/* v3.css — Dark-Premium-Produktseite (Alex 28.07.).
   Eigene Datei neben v2.css/style.css: die neue Fassung soll die bestehenden
   Seiten nicht anfassen, bis sie freigegeben ist. Keine neue Bibliothek, keine
   Migration — dieselbe Bauweise wie im Rest des Projekts. */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --aa-dark-950:#060B0A; --aa-dark-900:#0B1211; --aa-dark-850:#0E1917; --aa-dark-800:#111E1C;
  --aa-teal-900:#102C2A; --aa-teal-800:#173B37; --aa-teal-700:#264850; --aa-teal-500:#3C6C68;
  --aa-light-page:#F5F7F6; --aa-light-card:#FFFFFF;
  --aa-yellow:#F5F24A; --aa-yellow-hover:#FFFF68; --aa-yellow-soft:rgba(245,242,74,.12);
  --aa-white:#FFFFFF; --aa-text-soft-dark:#B8C0BE; --aa-text-muted-dark:#858F8C;
  --aa-text-main-light:#142F35; --aa-text-muted-light:#66777A;
  --aa-border-dark:rgba(255,255,255,.12); --aa-border-dark-strong:rgba(255,255,255,.20);
  --aa-border-light:#DCE5E2;
  --radius-hero-panel:30px; --radius-product-frame:26px; --radius-section-card:24px;
  --radius-control:14px; --radius-small:10px; --radius-pill:999px;
  --shadow-product:0 38px 100px rgba(0,0,0,.40);
  --shadow-dark-card:0 24px 60px rgba(0,0,0,.26);
  --shadow-light-card:0 24px 60px rgba(20,47,53,.08);
  --shadow-yellow:0 14px 34px rgba(245,242,74,.20);
  --focus-yellow:0 0 0 4px rgba(245,242,74,.22);
}

/* ── Grundgeruest ────────────────────────────────────────────────────────── */
.v3 { background:var(--aa-dark-950); color:var(--aa-white); min-height:100vh; overflow-x:hidden;
  font-family:'Montserrat',ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.v3 *,.v3 *::before,.v3 *::after { box-sizing:border-box; }
.v3 img { max-width:100%; height:auto; display:block; }
.v3-wrap { width:100%; max-width:1440px; margin-inline:auto; padding-inline:72px; }
.v3-sec { padding-block:120px; }
.v3-sec.tight { padding-block:88px; }
.v3-dark { background:var(--aa-dark-950); }
.v3-dark-2 { background:var(--aa-dark-900); }
/* Petrol-Flaechen auf Schwarz umgestellt (Alex 28.07.). dark-900 statt
   dark-950, damit die feinen Trennlinien zwischen den drei Spalten und der
   Wechsel zur Oekosystem-Sektion sichtbar bleiben. */
.v3-teal { background:var(--aa-dark-900); }
.v3-light { background:var(--aa-light-page); color:var(--aa-text-main-light); }

.v3-skip { position:absolute; left:-9999px; }
.v3-skip:focus { left:16px; top:16px; z-index:100; background:var(--aa-yellow); color:#111817;
  padding:10px 16px; border-radius:var(--radius-small); font-weight:800; }

/* ── Typografie ──────────────────────────────────────────────────────────── */
.v3-h1 { font-size:clamp(68px,6.4vw,94px); line-height:.96; font-weight:900; letter-spacing:-.055em;
  max-width:760px; margin:0; }
.v3-h2 { font-size:clamp(46px,4.4vw,60px); line-height:1.06; font-weight:850; letter-spacing:-.035em; margin:0; }
/* Einzeilige Headlines (Alex 03.08.): nie umbrechen, die Groesse gibt nach.
   Die Klammern sind auf die Textlaenge abgestimmt (44 bzw. 32 Zeichen). */
.v3-h2-fit { max-width:none; white-space:nowrap; font-size:clamp(24px,3.2vw,47px); }
.v3-proof-title { max-width:none; white-space:nowrap; font-size:clamp(24px,4.1vw,46px); }
.v3-h3 { font-size:clamp(24px,2.4vw,32px); font-weight:850; letter-spacing:-.02em; margin:0; }
.v3-eyebrow { font-size:16px; letter-spacing:.1em; font-weight:850; text-transform:uppercase;
  color:var(--aa-text-muted-dark); margin:0 0 14px; }
.v3-light .v3-eyebrow { color:var(--aa-text-muted-light); }
.v3-lead { font-size:clamp(19px,1.6vw,22px); line-height:1.58; color:var(--aa-text-soft-dark); margin:24px 0 0; max-width:650px; }
.v3-light .v3-lead { color:var(--aa-text-muted-light); }
/* Harter Umbruch der Masterstory-Zeile nur am Desktop (30.07.) */
@media (max-width:767px){ .v3-lead-brk br{ display:none; } }
.v3-body { font-size:17px; line-height:1.65; color:var(--aa-text-soft-dark); }
.v3-light .v3-body { color:var(--aa-text-muted-light); }
.v3-hl { color:var(--aa-yellow); }

/* ── Schaltflaechen ──────────────────────────────────────────────────────── */
.v3-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:56px; padding-inline:28px; border-radius:var(--radius-pill); border:0;
  font-family:inherit; font-size:16px; font-weight:900; cursor:pointer; text-decoration:none;
  transition:background .16s, transform .16s, border-color .16s, color .16s; }
.v3-btn-primary { background:var(--aa-yellow); color:#111817; box-shadow:var(--shadow-yellow); }
.v3-btn-primary:hover { background:var(--aa-yellow-hover); transform:translateY(-1px); }
.v3-btn-primary:active { transform:scale(.99); }
.v3-btn-ghost { background:transparent; color:var(--aa-white); border:1px solid var(--aa-border-dark-strong); }
.v3-btn-ghost:hover { border-color:var(--aa-white); }
.v3-light .v3-btn-ghost { background:#fff; border:1px solid #C8D6D2; color:var(--aa-teal-700); }
.v3 a:focus-visible,.v3 button:focus-visible { outline:none; box-shadow:var(--focus-yellow); }

/* ── Kopfzeile ───────────────────────────────────────────────────────────── */
.v3-header { position:sticky; top:0; z-index:50; height:76px; background:transparent;
  transition:background .2s, border-color .2s; border-bottom:1px solid transparent; }
/* Bewusst OHNE backdrop-filter (Alex 28.07., Ruckeln auf iPhone 15 Pro):
   Die Kopfzeile klebt oben und ist beim Scrollen DAUERHAFT sichtbar - ein Blur
   zwingt iOS, ihren Hintergrund bei jedem Scroll-Bild neu abzutasten, die ganze
   Seite hindurch. Stattdessen fast deckend (96 % statt 88 %); auf dunklem Grund
   ist der Unterschied nicht zu sehen. Gleicher Mechanismus wie bei der
   App-Tableiste (b74c9d8) und dem Hero-Kasten der App-Startseite (ec3870f). */
.v3-header.is-stuck { background:rgba(6,11,10,.96);
  border-bottom-color:rgba(255,255,255,.08); }
/* gap statt reinem space-between und schrumpffaehige Teile (Alex 28.07.):
   Der Kopf lief mobil ueber den Bildrand, sobald iOS die Schrift vergroessert
   ("Groesserer Text" / text-size-adjust). Gemessen bei 390px und 1,3-facher
   Schrift: Logo bis 261px, davor schon 390px Fensterbreite - Knopf und Logo
   schoben sich ineinander. Nichts davon durfte bisher schmaler werden. */
.v3-header .v3-wrap { display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:12px; }
.v3-logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff;
  min-width:0; flex-shrink:1; }
/* Das Zeichen liegt als dunkles PNG vor und war auf dem dunklen Kopf kaum zu
   sehen (Alex 28.07.). brightness(0) invert(1) faerbt es rein weiss, ohne eine
   zweite Bilddatei zu brauchen. Gleiches Mittel nutzt die App-Registrierung. */
.v3-logo img { width:28px; height:28px; filter:brightness(0) invert(1); }
.v3-logo span { font-weight:800; font-size:13px; letter-spacing:.16em; line-height:1.15; text-transform:uppercase; }
.v3-nav { display:flex; align-items:center; gap:30px; }
.v3-nav a { color:rgba(255,255,255,.72); font-size:14px; font-weight:700; text-decoration:none; }
.v3-nav a:hover { color:#fff; }
.v3-head-cta { display:flex; align-items:center; gap:18px; flex-shrink:0; }
.v3-head-cta .v3-btn { min-height:42px; padding-inline:17px; font-size:14px; white-space:nowrap; }
.v3-burger { display:none; background:none; border:0; color:#fff; padding:8px; cursor:pointer; }

/* ── Held ────────────────────────────────────────────────────────────────── */
.v3-hero { position:relative; padding-top:100px; padding-bottom:96px;
  background:
    radial-gradient(circle at 16% 18%, rgba(207,220,33,.15), transparent 29%),
    radial-gradient(circle at 80% 48%, rgba(25,82,71,.24), transparent 36%),
    linear-gradient(135deg,#080C08 0%,#060B0A 48%,#071412 100%); }
.v3-hero-grid { display:grid; grid-template-columns:minmax(460px,.88fr) minmax(600px,1.12fr);
  gap:80px; align-items:center; }
.v3-badge { display:inline-flex; align-items:center; gap:8px; min-height:40px; padding-inline:14px;
  border-radius:var(--radius-pill); background:rgba(245,242,74,.10); border:1px solid rgba(245,242,74,.34);
  color:var(--aa-yellow); font-size:13px; font-weight:850; }
.v3-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.v3-cta-stack { display:inline-flex; flex-direction:column; align-items:center; }
.v3-cta-stack .v3-trustline { margin-top:12px; text-align:center; }
.v3-trustline { margin-top:16px; color:rgba(255,255,255,.68); font-size:13px; font-weight:650; }

/* ── Produktbuehne ───────────────────────────────────────────────────────── */
/* Werte 1:1 von der Startseite uebernommen (Alex 28.07.): gleiche Buehne,
   gleicher Schimmer, gleicher Play-Knopf. */
.v3-frame { width:100%; max-width:760px; margin-left:auto; border-radius:28px; padding:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 120px rgba(0,0,0,.45), 0 0 120px rgba(38,72,80,.22);
  position:relative; transition:box-shadow .3s; }
.v3-frame-bar { height:34px; display:flex; align-items:center; gap:7px; padding-inline:6px;
  border-bottom:1px solid rgba(255,255,255,.09); }
.v3-frame-dot { width:10px; height:10px; border-radius:var(--radius-pill); background:rgba(255,255,255,.22); }
.v3-frame-body { margin-top:12px; border-radius:18px; overflow:hidden; background:#fff; position:relative; }
.v3-frame-body img { width:100%; height:auto; display:block; }
.v3-frame-body iframe { width:100%; aspect-ratio:16/9; border:0; display:block; }
.v3-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:68px; height:68px; border-radius:var(--radius-pill); background:var(--aa-yellow); color:#11151c;
  border:0; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(252,255,92,.45), 0 2px 8px rgba(0,0,0,.3);
  transition:transform .2s, box-shadow .2s; }
/* Puls als eigener Ring ueber transform+opacity statt ueber den box-shadow des
   Knopfs: Schatten-Animationen zeichnet der Browser jedes Bild neu (Paint),
   transform/opacity laufen auf dem Compositor und kosten beim Scrollen nichts
   (Alex 28.07., Ruckeln auf iPhone 15 Pro). */
.v3-play::after { content:''; position:absolute; inset:-4px; border-radius:inherit;
  border:2px solid rgba(252,255,92,.55); pointer-events:none;
  animation:v3-play-ring 2.4s ease-out infinite; }
.v3-play:hover::after { animation:none; opacity:0; }
@keyframes v3-play-ring {
  0% { transform:scale(1); opacity:.9; }
  70%,100% { transform:scale(1.45); opacity:0; }
}
/* Pulsierender Ring fuer den Haupt-CTA, gleiches Prinzip wie beim Play-Button
   (Compositor-Ring via transform+opacity). Sanftere Skalierung, weil der Knopf
   deutlich breiter ist als der runde Play-Button (Alex 01.08.). */
.v3-btn-pulse { position:relative; }
.v3-btn-pulse::after { content:''; position:absolute; inset:-4px; border-radius:inherit;
  border:2px solid rgba(252,255,92,.55); pointer-events:none;
  animation:v3-btn-ring 4.8s ease-out infinite; }
.v3-btn-pulse:hover::after { animation:none; opacity:0; }
@keyframes v3-btn-ring {
  0% { transform:scale(1); opacity:.9; }
  35%,100% { transform:scale(1.12); opacity:0; }
}
@media (prefers-reduced-motion: reduce) { .v3-btn-pulse::after { animation:none; opacity:0; } }
.v3-play svg { margin-left:3px; }
.v3-play:hover { transform:translate(-50%,-50%) scale(1.08); background:var(--aa-yellow-hover); animation:none; }

.v3-demo-note { margin-top:14px; text-align:center; color:rgba(255,255,255,.62); font-size:13px; font-weight:650; }

/* ── Vertrauensstreifen ──────────────────────────────────────────────────── */
.v3-strip { background:var(--aa-light-page); border-block:1px solid var(--aa-border-light); padding-block:24px; }
.v3-strip-inner { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:36px; }
.v3-strip-item { display:inline-flex; align-items:center; gap:9px; color:#52666B; font-size:14px; font-weight:750; }
.v3-strip-item img { width:20px; height:20px; }

/* ── Problem und Wandel ──────────────────────────────────────────────────── */
.v3-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:64px; }
.v3-col { padding:0 34px; border-left:1px solid rgba(255,255,255,.12); }
.v3-col:first-child { padding-left:0; border-left:0; }
.v3-col-icon { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px; }
.v3-punch { margin-top:72px; font-size:clamp(24px,2.4vw,32px); font-weight:850; line-height:1.3;
  letter-spacing:-.02em; max-width:820px; }

/* ── Workflow-Geschichte ─────────────────────────────────────────────────── */
.v3-step { display:grid; grid-template-columns:1fr 1fr; gap:84px; align-items:center; margin-top:104px; }
.v3-step:nth-child(even) .v3-step-media { order:-1; }
.v3-shot { background:#fff; border:1px solid var(--aa-border-light); border-radius:var(--radius-section-card);
  padding:10px; box-shadow:var(--shadow-light-card); overflow:hidden; }
.v3-shot img { border-radius:17px; }
/* 13px statt 11px (Alex 28.07.): Neben den sehr grossen Schritt-Ueberschriften
   ging die Nummer optisch unter. */
.v3-step-eyebrow { font-size:15px; letter-spacing:.08em; font-weight:850; color:var(--aa-text-muted-light); }

/* ── Produktarchitektur ──────────────────────────────────────────────────── */
/* Sechs Spalten statt drei, jede Karte ueber zwei: Nur so laesst sich eine
   angebrochene letzte Reihe mittig setzen (Alex 28.07.). Seit dem Zusammenlegen
   von Ideen und Texten sind es fuenf Karten - drei oben, zwei zentriert darunter,
   statt zwei linksbuendig mit Loch rechts. */
.v3-grid3 { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-top:56px; }
.v3-grid3 > * { grid-column:span 2; }
/* Greift nur bei genau fuenf Karten: Die vierte startet eine Spalte weiter
   rechts, damit das Paar unter der Dreierreihe mittig steht. */
.v3-grid3 > :nth-child(4):nth-last-child(2) { grid-column:2 / span 2; }
.v3-plan-basis { margin:18px 0 -6px; font-size:13.5px; font-weight:800; color:var(--aa-text-muted-light); }

/* Onepager-Sprungmarken (Alex 28.07.): Weich scrollen statt springen, und die
   Ziele um die Hoehe der klebenden Kopfzeile (76px) versetzen - sonst liegt die
   Ueberschrift beim Ankommen dahinter. */
/* iOS vergroessert Text in Querformat und bei aktivierter Systemvergroesserung
   selbsttaetig; das sprengte den Kopf. 100% = Groessen wie ausgezeichnet. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html { scroll-behavior:smooth; }
#erfolge, #funktionen, #fuer-wen, #preise { scroll-margin-top:96px; }

/* ── Zeilenfuehrung der Abschnitts-Ueberschriften (Alex 28.07.) ────────────
   Alle Werte sind gemessen, nicht geschaetzt: scratchpad/probe.mjs liest die
   Pixelbreite der Textvarianten bei der jeweils geltenden Schriftgroesse.
   Nur oberhalb der Mobil-Schwelle - darunter soll frei umbrochen werden. */
@media (min-width:901px) {
  
  /* "Von der Idee bis zum Beitrag: alles in einem System." soll nach dem
     Doppelpunkt umbrechen. Die Breite muss dafuer zwischen der Zeile bis zum
     Doppelpunkt und derselben Zeile plus " alles" liegen - gemessen sind das
     bei 1440px 890 bzw. 1043, bei 1000px 682 bzw. 800. 70vw trifft dieses
     Fenster durchgehend, die Grenzen fangen sehr breite und sehr schmale
     Fenster ab. */
  .v3-h2-break, .v3-lead-break { max-width:clamp(690px, 70vw, 1010px); }

  /* Vorspann so breit wie die Ueberschrift darueber. */
  .v3-lead-wide { max-width:none; }
  /* Erfolgs-Vorspann einzeilig am Desktop (Alex 30.07.): 720px brachen den Satz
     knapp um. Dreifach-Selektor noetig: .v3-proof-head .v3-lead (720px) steht
     SPAETER im File und gewinnt sonst bei gleicher Spezifitaet. */
  .v3-proof-head .v3-lead.v3-lead-wide { max-width:none; }

  /* "Erfolg auf Social Media war bisher aufwaendig und stressig." auf zwei
     Zeilen statt drei, Umbruch nach "bisher". Gemessen: Die erste Zeile misst
     bei 1440px 1028px, mit " aufwaendig" waeren es 1371px - dazwischen muss die
     Breite liegen. Ein Umbruch nach "aufwaendig" ist bei dieser Schriftgroesse
     nicht moeglich, dafuer reicht die Spalte nirgends aus. */
  .v3-h2-break2 { max-width:clamp(800px, 80vw, 1296px); }
}
.v3-card { min-height:230px; padding:26px; border-radius:22px; background:rgba(255,255,255,.055);
  border:1px solid var(--aa-border-dark); transition:border-color .16s, transform .16s, background .16s; }
.v3-card:hover { border-color:rgba(245,242,74,.30); transform:translateY(-2px); background:rgba(255,255,255,.075); }
.v3-card-icon { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:16px; }
.v3-card h3 { font-size:21px; font-weight:850; margin:0; }
.v3-card p { margin:9px 0 0; color:var(--aa-text-soft-dark); line-height:1.55; font-size:15.5px; }

/* ── Kundenstimmen ──────────────────────────────────────────────────────── */
.v3-proof { border-bottom:1px solid var(--aa-border-light); }
.v3-proof-head { max-width:920px; margin:0 auto; text-align:center; }
.v3-proof-head .v3-lead { max-width:720px; margin-inline:auto; }
.v3-proof-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px; max-width:1020px; margin:54px auto 0; }
.v3-proof-card { min-width:0; display:flex; flex-direction:column; padding:18px;
  border:1px solid var(--aa-border-light); border-radius:20px; background:#fff;
  box-shadow:0 10px 30px rgba(20,47,53,.06); }
.v3-proof-person { display:flex; align-items:center; gap:10px; }
.v3-proof-avatar { width:38px; height:38px; flex:0 0 38px; display:grid;
  place-items:center; border-radius:50%; background:#E5EEEC; color:var(--aa-teal-700);
  font-size:11px; font-weight:900; }
img.v3-proof-avatar { object-fit:cover; display:block; }
.v3-proof-person h3 { margin:0; font-size:14px; font-weight:900; }
.v3-proof-person p { margin:3px 0 0; color:var(--aa-text-muted-light);
  font-size:10px; font-weight:700; line-height:1.35; text-transform:uppercase;
  letter-spacing:.045em; }
.v3-proof-claim { margin:22px 0; color:var(--aa-text-main-light);
  font-size:clamp(28px,2.7vw,39px); font-weight:900; line-height:1.08;
  letter-spacing:-.05em; }
.v3-proof-claim span { display:block; white-space:nowrap; }
.v3-proof-image { margin-top:auto; padding:7px; overflow:hidden;
  border:1px solid #E7ECEB; border-radius:12px; background:#F7F9F8; }
/* Verenas Beleg ist deutlich flacher als Evas. Ohne diese Ausnahme wuerde
   flex-auto ihn nach unten schieben; oben ausgerichtet bleibt die Bildkante
   gleich und der gewollte freie Raum liegt am Kartenende. */
.v3-proof-card.is-proof-top .v3-proof-image { margin-top:0; }
.v3-proof-image img { width:100%; height:auto; object-fit:contain; border-radius:7px; }
.v3-proof-verified { display:flex; align-items:center; justify-content:flex-end;
  gap:5px; margin:10px 0 0; color:#536F73; font-size:10px; font-weight:800; }
.v3-proof-verified span { width:12px; height:12px; flex:0 0 12px; display:grid;
  place-items:center; border-radius:50%; background:#0095F6; color:#fff;
  font-size:8px; line-height:1; }
@media (min-width:901px) {
  /* Der Beweisbereich folgt auf dem Desktop derselben linken Lesekante wie
     die übrigen Abschnittsüberschriften. Mobil bleibt der kompakte,
     zentrierte Kopf unverändert. */
  .v3-proof-head { margin:0; text-align:left; }
  .v3-proof-head .v3-lead { margin-inline:0; }
}

/* ── Zielgruppen und Preise ──────────────────────────────────────────────── */
.v3-plans { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; align-items:stretch; }
.v3-plan { display:flex; flex-direction:column; padding:28px; border-radius:26px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13); }
.v3-light .v3-plan { background:#fff; border-color:var(--aa-border-light); box-shadow:var(--shadow-light-card); }
.v3-plan.is-top { background:linear-gradient(180deg,rgba(245,242,74,.11),rgba(255,255,255,.065));
  border-color:rgba(245,242,74,.34); }
.v3-light .v3-plan.is-top { background:#fff; border-color:var(--aa-teal-500); }
.v3-plan-flag { display:inline-block; padding:4px 11px; border-radius:var(--radius-pill);
  background:var(--aa-yellow); color:#111817; font-size:11.5px; font-weight:900;
  margin-left:10px; vertical-align:middle; transform:translateY(-1px); }
.v3-plan-name { font-size:18px; font-weight:850; }
.v3-plan-role { color:var(--aa-text-soft-dark); font-size:15px; margin:6px 0 0; }
/* Preise auf gleicher Hoehe (Alex 09.08.): die Rollen-Zeile reserviert
   nebeneinander immer zwei Zeilen, egal wie lang der Text ist. */
@media (min-width:768px){ .v3-plan-role { min-height:46px; } }
.v3-light .v3-plan-role { color:var(--aa-text-muted-light); }
.v3-plan-price { font-size:clamp(46px,4vw,58px); font-weight:900; letter-spacing:-.04em; margin:22px 0 0; }
.v3-plan-price small { font-size:14px; font-weight:700; letter-spacing:0; color:var(--aa-text-muted-dark); }
.v3-light .v3-plan-price small { color:var(--aa-text-muted-light); }
.v3-plan ul { list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px; }
.v3-plan li { display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.5;
  color:var(--aa-text-soft-dark); }
.v3-light .v3-plan li { color:var(--aa-text-main-light); }
.v3-plan li::before { content:'✓'; color:var(--aa-yellow); font-weight:900; flex:0 0 auto; }

/* ── Monat/Jahr-Umschalter der Preiskarten (wie /freischalten, Alex 01.08.) ── */
.v3-price-toggle { display:inline-flex; align-items:center; gap:4px; background:#E8ECEA;
  border-radius:12px; padding:4px; margin-top:28px; }
.v3-price-toggle button { border:0; background:none; border-radius:9px; padding:10px 20px;
  font-size:14px; font-weight:700; font-family:inherit; color:#4B5563; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; }
.v3-price-toggle button.active { background:#fff; color:var(--aa-teal-700); box-shadow:0 2px 8px rgba(17,18,19,.08); }
.v3-save { background:var(--aa-yellow); color:#111817; border-radius:999px; padding:2px 9px; font-size:11px; font-weight:800; }
.v3-plan-alt { display:none; margin-top:18px; font-size:14.5px; }
.v3-light .v3-plan-alt s { color:var(--aa-text-muted-light); }
.v3-plan-badge { background:#E9F7EF; color:#188653; border-radius:999px; padding:2px 9px; font-size:12px; font-weight:800; margin-left:4px; }
.v3-plan-jahrinfo { display:none; font-size:13px; color:var(--aa-text-muted-light); margin:6px 0 0; }
.v3-plans.jahr .v3-plan-alt, .v3-plans.jahr .v3-plan-jahrinfo { display:block; }
.v3-plans.jahr .v3-plan-alt + .v3-plan-price { margin-top:6px; }
/* Aktionspreis 1. Monat (Alex 09.08., wie /freischalten): Streichpreis neben
   der grossen Zahl + gruene Erklaerzeile, beides nur im Monats-Modus. */
.v3-akt-alt { font-size:16px; font-weight:600; color:var(--aa-text-muted-light); margin-left:8px; }
.v3-akt-sub { margin:6px 0 0; font-size:13px; font-weight:800; color:#0F7A55; line-height:1.5; }
.v3-plans.jahr .v3-akt-alt, .v3-plans.jahr .v3-akt-sub { display:none; }
/* Einheit folgt dem Tarif (Alex 10.08.): jaehrlich steht der Jahrespreis. */
.v3-einheit-j { display:none; }
.v3-plans.jahr .v3-einheit-m { display:none; }
.v3-plans.jahr .v3-einheit-j { display:inline; }
.v3-jahrspar { color:#0F7A55; font-weight:800; }
.v3-light .v3-plan li::before { color:var(--aa-teal-500); }
.v3-plan-foot { margin-top:auto; padding-top:26px; }
.v3-plan-foot .v3-btn { width:100%; }

/* ── Haeufige Fragen ─────────────────────────────────────────────────────── */
.v3-faq { max-width:900px; margin-inline:auto; }
.v3-faq details { border-bottom:1px solid var(--aa-border-light); }
.v3-faq summary { display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:68px; cursor:pointer; font-size:17px; font-weight:800; list-style:none; }
.v3-faq summary::-webkit-details-marker { display:none; }
.v3-faq summary::after { content:'+'; font-size:24px; font-weight:400; color:var(--aa-text-muted-light); }
.v3-faq details[open] summary::after { content:'–'; }
.v3-faq-a { padding-bottom:22px; max-width:760px; color:var(--aa-text-muted-light); line-height:1.7; }
.v3-faq-a p { margin:0 0 12px; }

/* ── Abschluss ───────────────────────────────────────────────────────────── */
/* Abschluss ebenfalls schwarz. Ohne Akzent wuerde er mit der Fusszeile
   verschmelzen, deshalb ein sehr zurueckhaltender radialer Gelbschimmer. */
.v3-final { background:var(--aa-dark-950); position:relative; overflow:hidden; text-align:center; }
/* Abschluss-Block: ChatGPT-Weg fuer Unentschlossene (Alex 08.08., Variante 3) */
.v3-unsicher { margin-top:34px; padding-top:28px; border-top:1px solid rgba(255,255,255,.12); }
.v3-unsicher p { margin:0 0 14px; font-size:15px; font-weight:700; color:rgba(255,255,255,.82); }
.v3-btn-weiss { background:#fff; color:#111213; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.v3-btn-weiss:hover { background:#F2F3F1; transform:translateY(-1px); }
.v3-final::before { content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(245,242,74,.07), transparent 58%); }
.v3-final > * { position:relative; }
.v3-final .v3-h2 { max-width:840px; margin-inline:auto; }
.v3-final .v3-lead { margin-inline:auto; }
.v3-final .v3-hero-actions { justify-content:center; }

/* ── Fusszeile ───────────────────────────────────────────────────────────── */
.v3-footer { background:var(--aa-dark-950); border-top:1px solid rgba(255,255,255,.09); padding-block:56px 40px; }
.v3-footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; }
.v3-footer h4 { font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:850;
  color:rgba(255,255,255,.5); margin:0 0 14px; }
.v3-footer a { display:block; color:rgba(255,255,255,.58); text-decoration:none; font-size:15px; padding:5px 0; }
.v3-footer a:hover { color:#fff; }
.v3-footer-copy { margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.45); font-size:13px; }

/* ── Bewegung ────────────────────────────────────────────────────────────── */
.v3-reveal { opacity:0; transform:translateY(8px); transition:opacity .36s ease, transform .36s ease; }
.v3-reveal.is-in { opacity:1; transform:none; }

/* ── Anpassung an kleinere Schirme ───────────────────────────────────────── */
@media (max-width:1180px) {
  .v3-wrap { padding-inline:40px; }
  .v3-hero-grid { grid-template-columns:1fr; gap:56px; }
  .v3-frame { margin-left:0; max-width:100%; }
  .v3-h1 { font-size:clamp(52px,7vw,72px); }
  .v3-sec { padding-block:96px; }
  .v3-step { gap:56px; margin-top:80px; }
  .v3-footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:900px) {
  /* Mobile Reihenfolge (Alex 28.07.): Headline, dann Video, dann Knopf, darunter
     der Text. Dafuer loesen sich die beiden Hero-Spalten auf (display:contents),
     damit ihre Kinder direkte Rasterelemente werden und sich per order sortieren
     lassen. Ohne Box greift auf den Spalten kein Einblenden mehr, deshalb sind
     sie hier fest sichtbar gestellt: sonst blieben sie auf Opazitaet 0 haengen. */
  .v3-hero-grid > .v3-reveal { display:contents; }
  .v3-hero .v3-reveal { opacity:1; transform:none; }
  /* Reihenfolge und Abstaende exakt wie auf der Startseite (Alex 28.07.).
     Entscheidend ist gap:0 — mit dem Raster-Abstand wirkte er nach dem
     Aufloesen der Spalten zwischen JEDEM Element und riss die Seite auseinander.
     Die Abstaende kommen jetzt aus den Element-Margins. */
  .v3-hero-grid { gap:0; }
  /* Der Kopfbereich ist mobil sticky und 76px hoch; die Ueberschrift braucht
     darunter nur noch etwas Luft, keine zweite volle Polsterung (Alex 28.07.). */
  .v3-hero { text-align:center; padding-top:26px; }
  /* Badge mobil ausgeblendet (Alex 28.07.): Die Aussage steht ohnehin im
     Knopf darunter und kostete oben nur Hoehe vor der Headline. */
  .v3-hero .v3-badge        { display:none; }
  .v3-hero .v3-h1           { order:2; margin:0 0 22px; max-width:100%; }
  .v3-hero .v3-lead-long    { display:none; }
  .v3-hero .v3-lead-short   { display:block; order:3; margin:0 auto 22px; max-width:100%; }
  .v3-hero .v3-frame        { order:4; margin:0 0 26px; }
  .v3-hero .v3-hero-actions { order:5; margin:0; justify-content:center; }
  .v3-hero .v3-cta-stack    { width:100%; }
  .v3-hero .v3-trustline    { order:6; margin-top:14px; }
  .v3-hero .v3-platforms    { order:7; justify-content:center; margin-top:22px; gap:18px; }
  .v3-hero .v3-platforms-label { flex-basis:100%; text-align:center; margin-right:0; font-size:13px; }
  .v3-hero .v3-trustbadges  { order:8; justify-content:center; }
  /* Mobil deutlich praesenter (Alex 01.08.): groessere Logos, etwas heller. */
  .v3-hero .v3-pf { opacity:.55; }
  .v3-hero .v3-pf img { width:28px; height:28px; }
  /* Mobil ohne Fensterrahmen, wie die Startseite: Punkte weg, Schatten direkt
     aufs Bild. */
  .v3-hero .v3-frame-bar { display:none; }
  .v3-hero .v3-frame { background:none; border:0; padding:0; box-shadow:none; }
  .v3-hero .v3-frame-body { border-radius:18px;
    /* Kurzer Schattenwurf (Alex 07.08.): der alte 24/70er fiel auf den CTA
       26px darunter und dunkelte das Gelb messbar ab (204 statt 244). */
    box-shadow:0 10px 34px rgba(0,0,0,.38), 0 0 60px rgba(38,72,80,.18); }
  /* CTA über die Schatten der Nachbarn heben — das Video kommt im DOM später
     und malte sonst über den Knopf. */
  .v3-hero .v3-hero-actions { position:relative; z-index:2; }

  .v3-nav { display:none; }
  .v3-burger { display:block; }
  /* Wortmarke faellt weg, das Zeichen bleibt: Bei grosser Systemschrift ist sie
     der breiteste Einzelposten im Kopf und drueckt den Knopf aus dem Bild. */
  .v3-logo span { display:none; }
  .v3-logo img { width:32px; height:32px; }
  .v3-grid3, .v3-plans { grid-template-columns:1fr; }
  .v3-grid3 > *, .v3-grid3 > :nth-child(4):nth-last-child(2) { grid-column:auto; }
  .v3-proof-grid { grid-template-columns:1fr; max-width:680px; }
  .v3-cols { grid-template-columns:1fr; gap:34px; }
  .v3-col { padding:0; border-left:0; }
  /* Mobil weniger Abstand zwischen Text des einen und Bild des naechsten Schritts (Alex 01.08.) */
  .v3-step, .v3-step:nth-child(even) { grid-template-columns:1fr; gap:22px; margin-top:52px; }
  /* Mobil/Tablet: erst der Schritt-Text, direkt darunter das zugehoerige Bild (Alex 01.08.). */
  .v3-step .v3-step-media, .v3-step:nth-child(even) .v3-step-media { order:0; }
}
@media (max-width:560px) {
  .v3-wrap { padding-inline:20px; }
  .v3-sec { padding-block:72px; }
  /* Weicher Hintergrund-Uebergang statt harter Kante (Alex 07.08.): Mobil stiess
     der dunkle Bereich mit einer 1px-Kante an den hellen — das las sich wie ein
     Strich quer durchs Bild statt wie ein Wechsel. Der Verlauf endet nach genau
     72px, also exakt am Ende der Sektions-Polsterung: Der dunkle Text der hellen
     Sektion beginnt erst dahinter und steht nie auf dunklem Grund.
     Desktop bleibt bewusst unveraendert (dort wirkt die klare Kante ruhig). */
  .v3-teal + .v3-light { background-image:linear-gradient(to bottom, var(--aa-dark-900) 0, var(--aa-light-page) 72px); }
  .v3-dark + .v3-light { background-image:linear-gradient(to bottom, var(--aa-dark-950) 0, var(--aa-light-page) 72px); }
  .v3-hero { padding-bottom:64px; }
  .v3-h1 { font-size:clamp(44px,13vw,58px); line-height:.98; letter-spacing:-.045em; }
  .v3-h2 { font-size:clamp(34px,9vw,42px); }
  /* Mobil bricht normal um — nowrap wuerde hier aus dem Bild laufen. */
  .v3-h2-fit, .v3-proof-title { white-space:normal; font-size:clamp(30px,8.4vw,40px); }
  .v3-proof-grid { gap:14px; margin-top:30px; }
  .v3-proof-card { padding:14px; border-radius:16px; }
  .v3-proof-claim { margin:18px 0; font-size:clamp(19px,6.35vw,27px); }
  .v3-hero-actions .v3-btn { width:100%; }
  .v3-play { width:64px; height:64px; }
  .v3-strip-inner { gap:18px 24px; }
  .v3-footer-grid { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .v3 *, .v3 *::before, .v3 *::after { transition:none !important; animation:none !important; }
  .v3-reveal { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}

/* ── Mobiles Menü ────────────────────────────────────────────────────────── */
.v3-drawer { position:fixed; inset:0; z-index:60; }
.v3-drawer[hidden] { display:none; }
/* Einfahren von rechts (Alex 28.07.): Vorher war das Menue schlagartig da.
   Der Zustand haengt an .is-open statt am hidden-Attribut, weil ein Element mit
   display:none keinen Uebergang zeigen kann - das JS setzt hidden vor dem
   Einblenden und erst nach dem Ausfahren wieder. */
.v3-drawer-backdrop { position:absolute; inset:0; background:rgba(3,7,6,.72); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .26s ease; }
.v3-drawer.is-open .v3-drawer-backdrop { opacity:1; }
/* Fullscreen-Menue (Alex 31.07., Vorbild wh4.de): volle Flaeche, faehrt von
   rechts ein, Punkte gross und mittig, gestaffeltes Einblenden. */
.v3-drawer-panel { transform:translateX(100%); transition:transform .38s cubic-bezier(.22,1,.36,1);
  position:absolute; inset:0; width:100%; height:100%;
  background:radial-gradient(circle at 85% 8%, rgba(244,233,76,.10), transparent 30%), var(--aa-dark-900);
  padding:76px 0 0; display:flex; flex-direction:column; overflow-y:auto; }
.v3-drawer-panel .v3-drawer-links { padding-bottom:56px; }
.v3-drawer.is-open .v3-drawer-panel { transform:translateX(0); }
.v3-drawer-panel:focus { outline:none; }
/* Kein zweites Logo (Alex 31.07.): bei offenem Menue hebt body.v3-menu-open
   die ECHTE Kopfzeile ueber das Overlay — das Logo bleibt physisch dasselbe
   Element und kann nicht springen. Burger/CTA werden solange versteckt,
   im Menue schliesst der eigene X-Knopf. */
body.v3-menu-open .v3-header { z-index:70; pointer-events:none; }
/* Nur das Logo bleibt klickbar — sonst finge die drueberliegende Kopfzeile
   die Klicks auf den X-Knopf des Menues ab. */
body.v3-menu-open .v3-header .v3-logo { pointer-events:auto; }
body.v3-menu-open .v3-head-cta { visibility:hidden; }
.v3-drawer-top { position:absolute; top:0; left:0; right:0; z-index:2; height:76px;
  display:flex; align-items:center; justify-content:flex-end; padding:0 72px; }
@media (max-width:1180px) { .v3-drawer-top { padding:0 40px; } }
@media (max-width:560px) { .v3-drawer-top { padding:0 20px; } }
.v3-drawer-logo span { color:#fff; }
.v3-drawer-links { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:24px; text-align:center; }
.v3-drawer-links a { color:#fff; text-decoration:none; font-size:clamp(30px,8.5vw,42px); font-weight:900;
  letter-spacing:-.02em; line-height:1.25; padding:6px 10px;
  opacity:0; transform:translateY(16px); transition:opacity .34s ease, transform .34s cubic-bezier(.22,1,.36,1); }
.v3-drawer.is-open .v3-drawer-links a { opacity:1; transform:none; }
.v3-drawer.is-open .v3-drawer-links a:nth-child(1) { transition-delay:.10s; }
.v3-drawer.is-open .v3-drawer-links a:nth-child(2) { transition-delay:.17s; }
.v3-drawer.is-open .v3-drawer-links a:nth-child(3) { transition-delay:.24s; }
.v3-drawer.is-open .v3-drawer-links a:nth-child(4) { transition-delay:.31s; }
.v3-drawer-links a:hover { color:var(--aa-yellow); }
/* Der Knopf ist zwar ein <a>, darf die weisse Link-Farbe der Menue-Eintraege
   aber nicht erben: weisse Schrift auf Gelb war nicht lesbar (Alex 28.07.). */
.v3-drawer-links a.v3-drawer-cta { margin-top:22px; font-size:16px; font-weight:900; letter-spacing:0;
  color:#111817; opacity:0; transform:translateY(16px); padding-inline:44px; }
.v3-drawer.is-open .v3-drawer-links a.v3-drawer-cta { opacity:1; transform:none; }
.v3-drawer-links a.v3-drawer-cta:hover { color:#111817; }
.v3-drawer-x { width:44px; height:44px; border:0; flex:none;
  background:rgba(255,255,255,.07); color:#fff; border-radius:var(--radius-pill);
  font-size:26px; line-height:1; cursor:pointer; }
.v3-drawer-x:hover { background:rgba(255,255,255,.13); }
@media (prefers-reduced-motion:reduce) { .v3-drawer-panel, .v3-drawer-links a { transition:none; } }

/* Icons statt Emoji: Farbe kommt ueber currentColor. */
.v3-col-icon { color:var(--aa-yellow); }
.v3-card-icon { color:var(--aa-yellow); }


/* ── Kanal-Leiste im Hero (Alex 28.07.) ──────────────────────────────────
   Ersetzt den weissen Vertrauensstreifen. Werte von der Startseite: Logos in
   Weiss umgefaerbt und gedimmt, damit sie die Marke nicht ueberstrahlen. */
.v3-platforms { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:22px; }
/* Vertrauens-Badges im Hero (Alex 08.08.): dezente dunkle Chips. */
.v3-trustbadges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.v3-tb { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.16); border-radius:999px;
  padding:6px 12px; background:rgba(255,255,255,.04); white-space:nowrap; }
.v3-platforms-label { font-size:11px; font-weight:700; color:rgba(255,255,255,.38);
  letter-spacing:.06em; text-transform:uppercase; margin-right:4px; white-space:nowrap; }
.v3-pf { opacity:.38; filter:brightness(0) invert(1); display:flex; transition:opacity .2s; }
.v3-pf:hover { opacity:.7; }
.v3-pf img { width:20px; height:20px; }

/* ── Notiz unter dem Video (Alex 28.07.) ──────────────────────────────────
   Werte 1:1 von der alten Startseite uebernommen (.v2-video-note in v2.css),
   damit es genauso aussieht wie vorher. 'Kalam' ist NICHT in fonts.css
   eingebunden, es greift also derselbe Fallback wie dort — bewusst nicht
   "korrigiert", sonst waere die Schrift ploetzlich eine andere.
   Nur ab 1024px: mobil uebernimmt der pulsierende Play-Knopf, so war es
   in der alten Fassung schon (Alex 18.07.). */
/* Sattes, leuchtendes Gelb (Alex 08.08.): die Striche verschwammen auf dem
   dunklen Grund zu Oliv, weil Kalam nie geladen wurde (Comic-Sans-Fallback)
   und die Glaettung das Gelb mit dem Hintergrund mischte. Kalam kommt jetzt
   aus fonts.css, dazu Glaettung und weicher Gelb-Schein. */
.v3-video-note {
  display:none; align-items:center; justify-content:center; gap:8px;
  width:max-content; margin:15px auto 0; white-space:nowrap;
  color:#FCFF5C; font-family:'Kalam','Comic Sans MS',cursive;
  font-weight:700; font-size:26px; line-height:1.1;
  -webkit-font-smoothing:antialiased;
  text-shadow:0 0 16px rgba(252,255,92,.45), 0 0 2px rgba(252,255,92,.6);
}
.v3-video-note .arr { font-size:26px; line-height:1; display:inline-block; }
@media (min-width:1024px) { .v3-video-note { display:flex; } }

/* Zwei Sublines: lang am Desktop, kurz mobil. */
.v3-lead-short { display:none; }


/* ── Exit-Popup (Alex 28.07.) ──────────────────────────────────────────────
   Gleiche Mechanik wie die Schublade: sichtbar ueber .is-open, damit der
   Uebergang laufen kann, das hidden-Attribut setzt das JS davor und danach. */
.v3-exit { position:fixed; inset:0; z-index:70; display:flex; align-items:center;
  justify-content:center; padding:24px; }
.v3-exit[hidden] { display:none; }
.v3-exit-backdrop { position:absolute; inset:0; background:rgba(3,7,6,.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .24s ease; }
.v3-exit.is-open .v3-exit-backdrop { opacity:1; }
.v3-exit-card { position:relative; width:100%; max-width:520px; text-align:center;
  background:linear-gradient(160deg, #0d1614 0%, var(--aa-dark-900) 62%);
  border:1px solid var(--aa-border-dark); border-radius:26px; padding:38px 34px 30px;
  box-shadow:0 40px 120px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px) scale(.97);
  transition:opacity .26s ease, transform .26s cubic-bezier(.22,1,.36,1); }
.v3-exit.is-open .v3-exit-card { opacity:1; transform:none; }
.v3-exit-card .v3-badge { margin-bottom:18px; }
.v3-exit-h { font-size:clamp(28px,4.6vw,36px); line-height:1.1; font-weight:850;
  letter-spacing:-.03em; margin:0; color:#fff; }
.v3-exit-sub { margin:16px 0 0; font-size:16px; line-height:1.55;
  color:var(--aa-text-soft-dark); }
.v3-exit-cta { width:100%; justify-content:center; margin-top:24px; }
.v3-exit-free { margin:14px 0 0; font-size:13px; color:var(--aa-text-muted-dark); }
.v3-exit-no { display:block; margin:18px auto 0; background:none; border:0;
  font:inherit; font-size:13px; color:var(--aa-text-muted-dark);
  text-decoration:underline; cursor:pointer; }
.v3-exit-no:hover { color:#fff; }
.v3-exit-x { position:absolute; top:14px; right:14px; width:40px; height:40px; border:0;
  background:rgba(255,255,255,.07); color:#fff; border-radius:var(--radius-pill);
  font-size:24px; line-height:1; cursor:pointer; }
.v3-exit-x:hover { background:rgba(255,255,255,.14); }

/* Exit-Overlay: ChatGPT-Weg fuer Unentschlossene (Alex 08.08., Variante A) */
.v3-exit-kicheck { margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.v3-exit-kicheck p { margin:0 0 14px; font-size:14.5px; line-height:1.45; font-weight:700; color:rgba(255,255,255,.85); }
.v3-exit-zeit { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:800;
  color:var(--aa-yellow); background:var(--aa-yellow-soft); border-radius:999px; padding:5px 12px; margin-bottom:12px; }
.v3-exit-kicheck .v3-btn { display:inline-flex; align-items:center; gap:9px; }
.v3-exit-kicheck .v3-btn svg { flex:none; }