@charset "UTF-8";
/* Hamster x LocaFox - Modehandel-LP v2 (Kunden-Briefing 08.08.2026).
   Laedt ZUSAETZLICH zu styles.css. Aendert NICHTS an v1 - alle Regeln
   haengen an v2-eigenen Klassen oder am Body-Scope .lp-v2. */

:root{
  --gold:#b8862b; --gold-soft:#f6ecd6; --gold-ink:#6b4d13;
}

/* ============ HERO: Nutzen zuerst, CTA ohne Scrollen ============ */
/* Eigener Verlauf: bleibt bis unten dunkel genug fuer weisse Schrift.
   (v1 laeuft ins fast Weisse - dort stuende die CTA-Note unsichtbar.) */
.hero--v2{
  background:linear-gradient(180deg,#0a1e47 0%,#10488c 38%,#167bd9 76%,#2f88dd 100%);
  padding-bottom:0;
}
/* min-width, damit die Ein-Spalten-Regel aus styles.css (max-width:860px)
   nicht ueberschrieben wird - mode-v2.css laedt danach. */
@media(min-width:861px){
  .hero--v2 .hero__grid{grid-template-columns:1.12fr .88fr;padding:10px 0 48px;align-items:center}
}
@media(max-width:860px){
  .hero--v2 .hero__grid{padding:6px 0 30px}
  .hero--v2 .hero__art{margin-top:22px}
  .hero--v2 .hero__art img{max-height:270px}
  .askbox,.exclusive{max-width:none}
  /* effects.js schiebt den Hamster beim Scrollen per inline-transform nach
     unten (Parallax). Der Hero hat overflow:hidden - auf Mobil ist er zu
     niedrig, der Hamster wird dadurch unten abgeschnitten. */
  .hero--v2 .hamster{transform:none !important}
  .hero--v2{padding-bottom:34px}
}
/* Nav: "Für Händler" bekommt auf schmalen Screens eine eigene Zeile,
   sonst kollidiert es mit dem LOCAFOX-x-Hamster-Lockup. */
@media(max-width:560px){
  .hero--v2 .nav{flex-wrap:wrap;row-gap:2px}
  .hero--v2 .nav__tag{width:100%;font-size:12.5px}
  .h1stack{font-size:clamp(29px,8.6vw,40px)}
}

.kicker{
  font-size:clamp(22px,2.9vw,32px);font-weight:600;color:#fff;
  margin-bottom:14px;letter-spacing:-.015em;line-height:1.2;
}
.h1stack{
  font-size:clamp(34px,4.9vw,58px);font-weight:700;line-height:1.06;
  letter-spacing:-.03em;margin-bottom:14px;
}
.h1stack > span{display:block}
.h1stack .mehr{display:inline;color:#9ec9ff}

.withlogo{display:flex;align-items:center;gap:10px;margin-bottom:22px}
.withlogo__txt{font-size:clamp(19px,2.2vw,24px);font-weight:600;color:rgba(251,252,255,.92)}
.withlogo img{height:27px;width:auto}
@media(max-width:560px){.withlogo img{height:23px}}

/* Die staerkste Frage der Seite - eigene Box, klar hervorgehoben */
.askbox{
  position:relative;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.26);border-left:5px solid #9ec9ff;
  border-radius:16px;padding:18px 24px;margin-bottom:24px;max-width:44ch;
  backdrop-filter:blur(2px);
}
.askbox p{font-size:clamp(16px,1.8vw,18px);color:rgba(251,252,255,.9);line-height:1.45}
.askbox strong{
  display:block;margin-top:7px;font-size:clamp(19px,2.4vw,25px);
  font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2;
}

/* Auf dem durchgehend blauen Hero braucht der CTA weissen Grund,
   sonst steht Blau auf Blau (v1 lag auf dem hellen Verlaufsende). */
.hero--v2 .btn{background:var(--offwhite);color:var(--blue);box-shadow:0 10px 30px rgba(4,22,54,.32)}
.hero--v2 .btn:hover{background:#fff;box-shadow:0 16px 38px rgba(4,22,54,.42)}
.hero--v2 .btn::after{background:linear-gradient(120deg,transparent,rgba(22,123,217,.35),transparent)}
.hero--v2 .hero__cta-note{color:rgba(251,252,255,.78);font-size:14px}

.exclusive{
  display:flex;gap:12px;align-items:flex-start;margin-top:22px;max-width:46ch;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  border-radius:14px;padding:14px 18px;
}
.exclusive__ic{flex:0 0 auto;font-size:17px;line-height:1.4;color:#9ec9ff;font-weight:700}
.exclusive p{font-size:14.5px;color:rgba(251,252,255,.86);line-height:1.5}
.exclusive b{color:#fff}

.hero--v2 .hero__art img{max-height:400px}

/* ============ GRUNDRHYTHMUS: mehr Luft als v1 ============
   v1 faehrt 80px Sektionspadding; die Briefing-Vorgabe ist deutlich
   grosszuegiger, deshalb hier durchgehend hoehere Werte. */
.lp-v2 section{padding:112px 0}
.lp-v2 .mock__head{max-width:62ch;margin-bottom:0}
.lp-v2 h2{margin-bottom:20px}
.lp-v2 .lead{line-height:1.6}
.lp-v2 .cardrow{margin-top:60px;gap:28px}
.lp-v2 .card{padding:32px}
.lp-v2 .faq__list{margin-top:48px;gap:16px}
.lp-v2 .faq__item{padding:0 28px}
.lp-v2 .faq__item summary{padding:26px 0}
.lp-v2 .split{gap:64px}
@media(max-width:860px){
  .lp-v2 section{padding:76px 0}
  .lp-v2 .cardrow{margin-top:40px}
  .lp-v2 .split{gap:40px}
}

/* ============ AHA-MOMENTE: grosse Statements mit viel Weissraum ============ */
.statement{padding:120px 0;text-align:center}
.statement__txt{
  font-size:clamp(28px,4.4vw,50px);font-weight:700;line-height:1.15;
  letter-spacing:-.025em;max-width:20ch;margin:0 auto;text-wrap:balance;
}
.statement__txt em{font-style:normal;color:var(--blue)}
/* gleicher Ton wie Kacheln, Netzwerk-Block und Videobild - ein Dunkelblau
   auf der ganzen Seite statt zwei aehnlicher Blaus */
.statement--dark{background:linear-gradient(168deg,#0a1e47 0%,#123a72 55%,#0e2f5e 100%);color:var(--offwhite)}
.statement--dark .statement__txt em{color:#9ec9ff}
.statement--tint{background:var(--tint)}
.statement--tight{padding:96px 0}
@media(max-width:860px){.statement{padding:84px 0}.statement--tight{padding:68px 0}}

/* ============ 4 KACHELN: "das will ich haben" ============ */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:64px}
/* Dunkelblaue Karten im Ton des Videobands: die vier Kernnutzen werden zum
   optischen Zentrum, der Abschnitt selbst bleibt hell - so bleibt der
   Hell/Dunkel-Rhythmus der Seite erhalten. */
.tile{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(163deg,#123c78 0%,#0e2f5e 52%,#0a2450 100%);
  border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:38px 34px 30px;
  box-shadow:0 18px 44px rgba(10,30,71,.28);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
/* Lichtschein oben rechts - gibt der Kachel Tiefe, ohne Rahmen */
.tile::after{
  content:"";position:absolute;top:-80px;right:-80px;width:230px;height:230px;
  border-radius:50%;background:radial-gradient(circle,rgba(94,164,246,.34),rgba(94,164,246,0) 70%);
  pointer-events:none;transition:opacity .35s ease;opacity:.8;
}
.tile::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--blue-accent),#39a0f0 60%,#9ec9ff);
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;z-index:2;
}
.tile:hover{transform:translateY(-7px);border-color:rgba(158,201,255,.5);box-shadow:0 34px 70px rgba(10,30,71,.42)}
.tile:hover::before{transform:scaleX(1)}
.tile:hover::after{opacity:1}
.tile > *{position:relative;z-index:1}
.tile__ic{
  position:relative;width:70px;height:70px;border-radius:22px;margin-bottom:24px;
  background:linear-gradient(150deg,var(--blue-accent) 0%,#2f8ce0 62%,#54b0f2 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px rgba(10,30,71,.5),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
}
.tile:hover .tile__ic{transform:translateY(-3px) rotate(-4deg);box-shadow:0 18px 38px rgba(45,98,255,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.tile__ic svg{width:34px;height:34px;display:block}
.tile h3{font-size:clamp(21px,2.3vw,25px);font-weight:700;letter-spacing:-.015em;margin-bottom:12px;color:#fff;line-height:1.2}
.tile p{font-size:16.5px;color:rgba(233,241,253,.84);line-height:1.6;text-wrap:pretty}
.tile p + p{margin-top:10px}
.tile__list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.tile__list li{font-size:16px;font-weight:600;color:#9ec9ff;display:flex;align-items:center;gap:10px}
.tile__list li::before{content:"";width:7px;height:7px;border-radius:50%;background:#9ec9ff;flex:0 0 auto}
/* "Fuer mehr X." - der Nutzen-Abbinder schliesst jede Kachel ab.
   Selektor braucht die Spezifitaet von `.tile p + p`, sonst gewinnt dessen
   margin-top und der Abbinder klebt am Text statt am Kachelfuss. */
.tile p.tile__for{
  margin-top:auto;padding-top:22px;
  font-size:21px !important;font-weight:700;color:#9ec9ff !important;
  letter-spacing:-.015em;display:flex;align-items:center;gap:10px;
}
/* Nina 2026-08-10: die Trennlinie vor dem Abbinder ist raus, stattdessen ein
   Pfeil im 45-Grad-Winkel nach oben rechts. Als SVG statt Schriftzeichen,
   damit er in jeder Schrift gleich aussieht. */
.tile p.tile__for::before{
  content:"";flex:0 0 auto;width:23px;height:23px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 17 17 7M8.6 7H17v8.4' fill='none' stroke='%239ec9ff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:contain;background-position:center;background-repeat:no-repeat;
}
@media(max-width:860px){
  .tiles{grid-template-columns:1fr;gap:22px;margin-top:44px}
  .tile{padding:30px 26px 26px;border-radius:22px}
  .tile__ic{width:62px;height:62px;border-radius:19px;margin-bottom:20px}
  .tile__ic svg{width:31px;height:31px}
}

/* ============ CTA-BAND (mehrfach auf der Seite) ============ */
.ctaband{text-align:center;padding:88px 0}
.ctaband--tint{background:var(--tint)}
.ctaband__txt{
  font-size:clamp(22px,2.9vw,32px);font-weight:700;letter-spacing:-.02em;
  color:var(--navy);max-width:24ch;margin:0 auto 30px;line-height:1.22;text-wrap:balance;
}
.ctaband__note{font-size:14.5px;color:#5b6276;margin-top:18px}
@media(max-width:860px){.ctaband{padding:64px 0}.ctaband__txt{margin-bottom:24px}}

/* ============ VIDEO: heller Abschnitt, damit das dunkle Videobild traegt ====
   Das Dunkelblau liegt jetzt auf den Kacheln und dem Netzwerk-Block. Hier
   ist der Grund bewusst weiss - zwischen den beiden hellblauen Baendern
   davor und danach bleibt der Abschnitt trotzdem klar abgegrenzt. */
.videoband{background:#fff;padding:88px 0;position:relative;overflow:hidden}
/* weicher blauer Schein hinter dem Videobild */
.videoband::before{
  content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(1180px,96%);height:70%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(22,123,217,.16),rgba(22,123,217,0) 70%);
}
.videoband .wrap{position:relative;z-index:1}
.videoband .video__frame{
  max-width:1000px;border:1px solid rgba(16,30,71,.1);
  box-shadow:0 44px 96px rgba(10,30,71,.34),0 8px 22px rgba(10,30,71,.16);
}
.videoband .mock__head{margin-bottom:56px}
.videoband .mock__head h2{margin-bottom:18px}
.videoband .video__cap{margin-top:28px}
@media(max-width:860px){
  .videoband{padding:76px 0}
  .videoband .mock__head{margin-bottom:40px}
  .videoband .video__frame{box-shadow:0 26px 56px rgba(10,30,71,.3)}
}

/* ============ WARUM HAMSTER FUNKTIONIERT: Taktzeilen ============ */
.beat{max-width:62ch}
.beat p{font-size:clamp(18px,2.1vw,21px);line-height:1.5;color:#3d4459}
.beat p + p{margin-top:14px}
.beat .turn{font-weight:700;color:var(--navy);font-size:clamp(20px,2.4vw,25px);margin-top:26px}
.beat .soft{color:#6b7288}

/* ============ NETZWERK ============
   Greift das Dunkelblau von Kacheln und Videoband unten noch einmal auf,
   damit die Seite ein durchgehendes Motiv hat statt eines einmaligen
   dunklen Blocks in der Mitte. */
/* gleicher Verlauf wie der Hero ganz oben (Nina) */
.netzband{
  background:linear-gradient(180deg,#0a1e47 0%,#10488c 38%,#167bd9 76%,#2f88dd 100%);
  color:var(--offwhite);
}
.netzband h2{color:var(--offwhite)}
.netzband .section-eyebrow{color:#9ec9ff}
/* Der Hero-Verlauf wird nach unten deutlich heller - dort braucht Text
   Weiss statt Hellblau, sonst faellt der Kontrast weg. */
.netzband .lead{color:rgba(255,255,255,.93)}
.netzband .netz__sum span{color:#fff}

.netz{display:flex;flex-direction:column;gap:14px;margin-top:38px;max-width:74ch}
.netz__row{
  display:flex;gap:16px;align-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:20px 24px;box-shadow:0 8px 22px rgba(4,16,40,.22);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.netz__row:hover{transform:translateX(5px);background:rgba(255,255,255,.11);box-shadow:0 16px 36px rgba(4,16,40,.34)}
.netz__ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;font-size:21px}
.netz__row p{font-size:16.5px;color:rgba(233,241,253,.9);line-height:1.5}
.netz__sum{display:flex;gap:34px;flex-wrap:wrap;margin-top:36px}
.netz__sum span{font-size:clamp(20px,2.6vw,27px);font-weight:700;color:#9ec9ff;letter-spacing:-.01em}
@media(max-width:860px){.netz__sum{gap:18px}.netz__row{padding:16px 18px}}

/* ============ KOSTENBLOCK: ruhig, vertrauensvoll, keine Preisoptik ============ */
/* Kostenblock zweispaltig: Keymotiv links, Karte rechts. Der Abschnitt ist
   der textlastigste der Seite - das Muenz-Motiv bebildert "Du zahlst nur,
   wenn es geklingelt hat". */
.pricestage{
  display:grid;grid-template-columns:.72fr 1.28fr;gap:44px;align-items:center;
  margin-top:52px;
}
.priceart{display:flex;justify-content:center}
.priceart img{
  width:100%;max-width:340px;height:auto;
  filter:drop-shadow(0 26px 44px rgba(16,30,71,.28));
}
@media(max-width:960px){
  .pricestage{grid-template-columns:1fr;gap:24px;margin-top:38px}
  .priceart img{max-width:220px}
}

.pricecard{
  background:#fff;border:1px solid #e3e9f6;border-radius:24px;
  padding:44px 44px 40px;box-shadow:0 14px 44px rgba(16,30,71,.07);max-width:760px;margin:0 auto;
}
.pricecard__lead{
  font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.02em;
  color:var(--navy);line-height:1.2;margin-bottom:10px;text-wrap:balance;
}
.pricecard__sub{font-size:17px;color:#5b6276;margin-bottom:26px}
.nofees{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px}
.nofee{
  display:inline-flex;align-items:center;gap:9px;background:var(--tint);
  border-radius:999px;padding:10px 18px;font-size:15px;font-weight:600;color:#33507f;
}
.nofee::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--blue);flex:0 0 auto;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.pricecard__split{border-top:1px solid #eef1f8;padding-top:28px}
.pricecard__split h3{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:10px}
.pricecard__split p{font-size:16.5px;color:#4d5468;line-height:1.55;max-width:64ch}
.pricecard__split p + p{margin-top:10px}
.checks{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px;margin-top:24px}
.checks li{display:flex;gap:11px;align-items:flex-start;font-size:16.5px;color:#3d4459;line-height:1.45}
.checks li::before{
  content:"";flex:0 0 auto;width:21px;height:21px;border-radius:50%;margin-top:2px;
  background:#e4f2e6;
  -webkit-mask:none;mask:none;
  box-shadow:inset 0 0 0 1px rgba(45,140,70,.22);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%232d8c46' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat;
}
.pricecard__cta{margin-top:34px;padding-top:30px;border-top:1px solid #eef1f8;text-align:center}
@media(max-width:860px){.pricecard{padding:30px 24px}.checks{grid-template-columns:1fr}}

/* ============ START-SCHRITTE ============ */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;counter-reset:fl}
.flowstep{
  position:relative;background:#fff;border:1px solid #e6ebf7;border-radius:20px;
  padding:30px 28px;box-shadow:0 6px 20px rgba(16,30,71,.05);
}
.flowstep__n{
  width:46px;height:46px;border-radius:14px;background:var(--blue);color:#fff;
  font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  box-shadow:0 8px 20px rgba(22,123,217,.32);
}
.flowstep h3{font-size:21px;font-weight:700;color:var(--navy);margin-bottom:8px}
.flowstep p{font-size:16px;color:#4d5468;line-height:1.55}
.flowstep p + p{margin-top:8px}
@media(max-width:860px){.flow{grid-template-columns:1fr;gap:18px;margin-top:36px}}

/* ============ GOLD BOX: Eintrittskarte, kein Kostenblock ============ */
/* Sektionshintergrund bewusst neutral (Nina: goldenen Hintergrund raus) -
   die Gold-Anmutung traegt jetzt allein die Ticket-Karte. */
.goldband{background:var(--offwhite)}
.goldgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
/* Nina 2026-08-10: Gold Box komplett ohne Gold. Optik uebernommen von der
   "Der Schlüssel"-Box aus dem App-Abschnitt (.mock__point.is-highlight in
   styles.css): leichtes Blau nach Weiss, blasser blauer Rand, weiche blaue
   Tiefe. Nur die Werte sind fuer die groessere Flaeche hochskaliert. */
.goldticket{
  position:relative;background:linear-gradient(180deg,#eaf2ff 0%,#fff 62%);
  border:1.5px solid #bcd6f7;border-radius:24px;padding:36px 34px;
  box-shadow:0 22px 54px rgba(22,123,217,.18);
}
.goldticket::before{
  content:"Dein Starterpaket";position:absolute;top:-13px;left:32px;
  background:var(--blue);color:#fff;font-size:11px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 14px;border-radius:999px;
  box-shadow:0 6px 16px rgba(22,123,217,.34);
}
/* Produktfoto der Gold Box - randlos freigestellt, sitzt oben in der Karte */
/* Der mitgelieferte Schlagschatten ist aus dem PNG herausgerechnet (er zog
   auf der Karte eine sichtbare Rechteck-Kante) - der Schatten kommt aus CSS. */
.goldticket__shot{
  display:block;width:100%;max-width:430px;height:auto;margin:4px auto 22px;
  filter:drop-shadow(0 22px 30px rgba(12,52,110,.26));
}
@media(max-width:860px){.goldticket__shot{max-width:340px;margin-bottom:18px}}
.goldticket h3{font-size:clamp(23px,2.8vw,29px);font-weight:700;color:var(--navy);letter-spacing:-.015em;margin-bottom:8px;line-height:1.2}
.goldticket p{font-size:16.5px;color:#4d5468;line-height:1.55}
.goldticket__sub{margin-top:20px;font-weight:700;color:var(--navy)}
.goldlist{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:16px}
.goldlist li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;color:#3c4557;line-height:1.45}
.goldlist li::before{
  content:"";flex:0 0 auto;width:21px;height:21px;border-radius:50%;margin-top:2px;background:#dbe9fb;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23167bd9' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat;
}
.goldlist--tight{margin-top:12px;gap:8px}
.goldwhy h3{font-size:clamp(22px,2.6vw,28px);color:var(--navy);font-weight:700;letter-spacing:-.015em;margin-bottom:12px}
.goldwhy p{font-size:17px;color:#4d5468;line-height:1.55;max-width:56ch}
.goldwhy p + p{margin-top:11px}
.budgetbox{
  margin-top:26px;background:linear-gradient(180deg,#eaf2ff 0%,#fff 70%);
  border:1.5px solid #bcd6f7;border-radius:18px;padding:26px 28px;
  box-shadow:0 14px 34px rgba(22,123,217,.16);
}
.budgetbox__tag{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-bottom:9px}
.budgetbox h4{font-size:20px;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.25}
.budgetbox p{font-size:16px;color:#4d5468;line-height:1.55}
.budgetbox .punch{margin-top:14px;font-weight:700;color:var(--navy);font-size:17px}
/* Preis sitzt in der Budget-Box, nicht mehr als eigene Ueberschrift darunter. */
.budgetbox__price{margin-top:18px;padding-top:16px;border-top:1px dashed #bcd6f7}
.budgetbox__price-num{
  display:inline-block;font-size:20px;font-weight:700;color:var(--blue);letter-spacing:-.01em;
  background:#dbe9fb;border-radius:999px;padding:5px 15px;margin-bottom:10px;
}
.budgetbox .budgetbox__price-note{font-size:15.5px;color:#5b6478;line-height:1.55}
@media(max-width:860px){.goldgrid{grid-template-columns:1fr;gap:32px}.goldticket{padding:30px 24px}}

/* ============ FINALER CTA ============
   Der Abschluss-Textblock ist auf Kundenwunsch entfallen; die CTA-Karte
   folgt jetzt direkt auf die FAQ und braucht oben eigenen Abstand. */
.lp-v2 .finalcta{padding:112px 0 100px}
@media(max-width:860px){.lp-v2 .finalcta{padding:76px 0 68px}}

/* ============ v2-Feinschliff auf geteilten Klassen (nur im v2-Scope) ============ */
/* Das Dashboard steht in v2 in einem Grid. Grid-Items haben min-width:auto,
   eine feste Pixelbreite wuerde den Viewport sprengen. */
.lp-v2 .split > *{min-width:0}

/* ============ Dashboard: Hover vergroessert (Nina-Wunsch) ============
   Staerkerer Zoom als v1 und ueber dem Nachbartext liegend, weil das
   Dashboard hier in einer schmaleren Grid-Spalte sitzt. */
.lp-v2 .dash-frame{position:relative;z-index:3}
.lp-v2 .dash-frame:hover{transform:scale(1.42)}
@media(max-width:860px){
  .lp-v2 .dash-frame:hover{transform:scale(1.06) translateY(-8px)}
}

/* v1 setzt .mock auf 88px oben/unten. In v2 folgt auf die Kacheln direkt ein
   Statement-Band - ohne unteres Padding stossen Kacheln und Farbflaeche
   aneinander. */
.lp-v2 .mock{padding:112px 0}
@media(max-width:860px){.lp-v2 .mock{padding:76px 0}}
.lp-v2 .faq__item summary{font-size:17.5px}
.lp-v2 .finalcta .btn{margin-top:20px}
.lp-v2 .stat__num{font-size:clamp(38px,5.4vw,58px)}