/* =====================================================================
   VendTRIX Marketing — styles.css
   Operations Command Center · dark · muted emerald · ampel logic
   ===================================================================== */

/* ---- Fonts (self-hosted, DSGVO: no external requests) ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/inter-800.woff2') format('woff2')}

body{font-family:var(--font);background:var(--bg-base);color:var(--ink);overflow-x:hidden}

/* ---- A11y-Utilities (WCAG 2.4.1/3.3.2, Audit docs/business/website-wcag-bitv-seo-audit-2026-08.md) ---- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--brand-green);color:var(--cta-ink);
  padding:12px 20px;border-radius:0 0 10px 10px;font-weight:700;font-size:14px;transition:top var(--dur) var(--ease)}
.skip-link:focus{top:0}
.req{color:var(--amber);font-weight:700;margin-left:2px}
.req-legend{font-size:12px;color:var(--ink-faint);margin-top:8px}

/* ---- Layout primitives ---- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{position:relative;padding:120px 0;overflow-x:clip}
/* overflow-x:clip: Die 900-px-Glows (.pain/.roi/.features/.pricing) ragten sonst seitlich raus;
   ein Mobil-Browser zoomte die Seite dann auf ~640 px Layoutbreite heraus (Befund 19.09.2026).
   clip statt hidden: erzeugt keinen Scroll-Container, overflow-y bleibt sichtbar. */
.section .glow{max-width:100vw}
.section--tight{padding:96px 0}
/* Querverweis auf die Link-Seite /links (Rechner, Vorlagen) am Ende von Rechner- und Fallstudie-Seiten */
.more-links{margin-top:22px;color:var(--ink-soft);font-size:14.5px;line-height:1.6}
.more-links a{color:var(--brand-green-lt);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.center{text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 14px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:var(--brand-glow);border:1px solid rgba(16,185,129,.3);color:var(--brand-green-lt)}
.eyebrow--amber{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.28);color:var(--amber)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.h2{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.08}
.lead{color:var(--ink-soft);font-size:clamp(15px,1.4vw,17px);line-height:1.6}
.accent{color:var(--brand-green-lt)}
.accent-amber{color:var(--amber)}
/* #3181: Unschärfe-Flecken als Hintergrund sind ein KI-Look-Muster (Prüfliste, Abschnitt 1). Die Elemente bleiben im HTML, werden aber nicht gezeichnet. */
.glow{display:none}
.gridlines{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:160px 160px;opacity:.35;mask-image:radial-gradient(120% 80% at 50% 0,#000,transparent 75%)}
.section > .container{position:relative;z-index:1}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:16px;border-radius:var(--r-md);padding:15px 26px;
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brand-green);color:var(--cta-ink)}
.btn-primary:hover{background:var(--brand-green-lt)}
.btn-ghost{background:rgba(241,245,249,.03);border:1px solid var(--line-strong);color:var(--ink);font-weight:600}
.btn-ghost:hover{background:rgba(241,245,249,.06)}
.btn-lg{padding:18px 32px;font-size:17px;border-radius:var(--r-lg)}
.btn .arrow{transition:transform var(--dur) var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ===================== NAV ===================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background var(--dur) var(--ease)}
/* Beim Scrollen legt sich die Leiste über den Inhalt. Die 1-px-Linie darunter
   schnitt dabei quer durch die Überschrift, und bei 78 % Deckung schimmerte der
   Text unterschiedlich stark durch — beides sah aus wie ein Fehler, nicht wie
   Absicht (Paddys Mitschnitt, 20.09.2026). Jetzt: etwas mehr Deckung, keine
   harte Linie, stattdessen ein kurzer Verlauf, der nach unten ausklingt.
   Flackern beim Scrollen (Paddys Mitschnitt, 21.09.2026, Firefox): Beim Überschreiten von 24 px schaltete
   `.scrolled` zwei Dinge schlagartig, die nicht mitblendeten — den Weichzeichner der Leiste
   (`backdrop-filter`) und den Verlauf darunter —, während nur der Hintergrund über `--dur` einblendete.
   Vermutete Ursache (im Mitschnitt nicht als einzelnes Bild zu sehen, in Firefox nicht nachgestellt):
   Der Weichzeichner zwingt Firefox, alles hinter der Leiste neu zu rendern, auch die großen weichgezeichneten
   Lichtscheine. Jetzt: kein Weichzeichner mehr (etwas mehr Deckung ersetzt ihn), der Verlauf ist immer
   vorhanden und blendet nur ein und aus, im Gleichtakt mit dem Hintergrund.
   Sichtbare Kante quer durch die Überschrift (Paddys Screenshot, 24.09.2026, Handy): Der Verlauf begann bei
   50 % Deckung, die Leiste darüber deckt 94 %. An der Nahtstelle sprang die Deckung also um 44 Punkte —
   das ist keine weiche Kante, sondern eine Linie, und zwar genau die, die hier zweimal wegrepariert werden
   sollte. Gemessen live an vendtrix.de: mit .5 zieht sich der Strich durch „verliert.", mit .94 ist er weg.
   Deshalb beginnt der Verlauf jetzt bei DERSELBEN Deckung wie die Leiste und klingt von dort aus. Wer die
   Deckung der Leiste ändert, ändert diesen Wert mit — sonst kommt die Linie zurück.
   Weißer Strich am unteren Rand, genau einmal beim Runterscrollen (Paddy, 28.09.2026, Handy): `.scrolled`
   setzte `border-bottom:1px solid transparent`, und `.nav` blendete `border-color` mit. In Ruhe hat die
   Leiste aber keinen Rand, die Randfarbe steht dort auf `currentColor` = Textfarbe #f1f5f9. Beim Wechsel
   wurde der Rand sofort `solid` und seine Farbe lief 240 ms von fast Weiß nach transparent: ein heller
   Strich, der beim Überschreiten von 24 px aufblitzt und dann verschwindet. Gemessen live an vendtrix.de
   (Ruhe: rgb(241,245,249), Übergang border-bottom-color → transparent). Der Rand war ohnehin unsichtbar,
   deshalb gibt es ihn nicht mehr, und `border-color` wird nicht mehr überblendet.
   Wächter: website/tests/nav-kante.test.mjs. */
.nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;pointer-events:none;opacity:0;
  background:linear-gradient(rgba(14,17,23,.94),rgba(14,17,23,0));transition:opacity var(--dur) var(--ease)}
.nav.scrolled{background:rgba(14,17,23,.94)}
.nav.scrolled::after{opacity:1}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:20px;letter-spacing:-.02em}
.logo-mark{display:block;height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--ink-soft);font-weight:500;font-size:15px;transition:color var(--dur) var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-login{padding:9px 18px;border:1px solid var(--line-strong);border-radius:10px;font-weight:600;font-size:14px;color:var(--ink)}
.nav-login:hover{background:rgba(241,245,249,.05)}
.nav-toggle{display:none}
.btn.nav-demo{padding:9px 18px;font-size:14px;white-space:nowrap}
.nav-links .nav-links-login{display:none}

/* ===================== HERO ===================== */
/* overflow-x:clip statt overflow:hidden — sonst wird der untere Lichtschein
   (.glow-b, 100 px Unschärfe, reicht bis 120 px unter den Abschnitt) am
   Abschnittsende ABGESCHNITTEN, und quer über die Seite läuft eine harte,
   gerade Kante. Genau die hat Paddy am 20.09.2026 im Bildschirmmitschnitt
   gezeigt. Waagerecht muss weiter geklippt werden, sonst schiebt der 980 px
   breite Schein einen seitlichen Rollbalken heraus (derselbe Grund wie bei
   .section, Kommentar dort). Wächter: tests/verlaeufe-nicht-abgeschnitten.test.mjs */
.hero{position:relative;padding:170px 0 110px;overflow-x:clip}
.hero .glow-a{width:980px;height:760px;background:rgba(16,185,129,.14);top:-180px;right:-160px}
.hero .glow-b{width:620px;height:520px;background:rgba(5,150,105,.1);bottom:-120px;left:-220px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,62px);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin:20px 0 22px}
.hero .lead{max-width:520px;font-size:clamp(16px,1.5vw,19px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 22px}
.trust-bar{color:var(--ink-faint);font-size:13.5px;font-weight:500}
.trust-bar b{color:var(--ink-soft);font-weight:600}
.trust-bar a{color:var(--ink-soft);font-weight:600;text-decoration:underline;text-decoration-color:rgba(148,163,184,.4);text-underline-offset:3px}
.trust-bar a:hover{color:var(--ink)}
.mini-proofs{display:flex;gap:36px;margin-top:38px;flex-wrap:wrap}
.mini-proof{display:flex;gap:13px;align-items:flex-start;max-width:200px}
.mp-chip{flex:none;width:34px;height:34px;border-radius:9px;background:var(--brand-glow);border:1px solid rgba(16,185,129,.22);display:grid;place-items:center}
.mp-chip svg{width:18px;height:18px;stroke:var(--brand-green-lt);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mp-t{font-size:13.5px;line-height:1.35}
.mp-t b{display:block;color:var(--ink);font-weight:600}
.mp-t span{color:var(--ink-soft)}

/* ---- Hero visual (command center) ---- */
.hero-visual{position:relative}
.panel{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.map{position:relative;height:330px;overflow:hidden}
.map svg.map-canvas{position:absolute;inset:0;width:100%;height:100%}
.map-chip{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ink-soft)}
.map-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--brand-green-lt)}
.map-legend{position:absolute;bottom:16px;left:22px;display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--ink-soft)}
.map-legend b{color:var(--ink);font-weight:600}
.map-legend .lg{display:inline-flex;align-items:center;gap:6px}
.map-legend .lg i{width:8px;height:8px;border-radius:50%}
.map-tip{position:absolute;z-index:2;left:62%;top:38%;transform:translate(-50%,0);background:#0c1016;border:1px solid rgba(239,68,68,.35);border-radius:10px;padding:10px 14px;box-shadow:0 8px 20px -4px rgba(0,0,0,.5);display:flex;gap:10px;align-items:flex-start;white-space:nowrap}
.map-tip .pdot{width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:4px}
.map-tip b{display:block;font-size:13px;color:var(--ink)}
.map-tip span{font-size:12px;color:var(--ink-soft)}

.rev-chip{position:absolute;z-index:2;top:-22px;right:8px;background:var(--bg-tile);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:14px 16px;box-shadow:0 12px 28px -6px rgba(0,0,0,.5);width:172px}
.rev-chip .k{font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--ink-faint)}
.rev-chip .v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.rev-chip .up{font-size:12px;font-weight:700;color:var(--brand-green-lt);float:right;margin-top:-18px}
.rev-chip svg{margin-top:8px;width:100%;height:30px;stroke:var(--brand-green-lt);fill:none;stroke-width:2;stroke-linecap:round}

.decision{margin-top:28px;background:var(--bg-tile);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px;box-shadow:0 16px 40px -8px rgba(0,0,0,.3)}
.decision-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.decision-head b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.decision-head .stamp{font-size:11px;font-weight:600;color:var(--brand-green-lt);background:var(--brand-glow);padding:5px 10px;border-radius:var(--r-pill)}
.decision-row{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:14.5px}
.decision-row i{width:9px;height:9px;border-radius:50%;flex:none}
.decision-row span{flex:1;color:var(--ink)}
.decision-row b{font-weight:600;font-size:13.5px}
.decision-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:12px;padding-top:14px}
.decision-foot .lbl{color:var(--ink-soft);font-size:14px}
.decision-foot .pot{font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--brand-green-lt)}

/* ===================== SCHMERZ ===================== */
.pain .glow-r{width:900px;height:500px;background:rgba(239,68,68,.05);left:50%;top:55%;transform:translateX(-50%)}
.section-head{max-width:760px;margin:0 auto 56px}
.section-head .h2{margin-top:18px}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pain-card{position:relative;background:var(--bg-surface);border:1px solid var(--line);border-radius:14px;padding:30px 24px 26px;overflow:hidden;transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pain-card:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.pain-icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px;
  background:color-mix(in srgb,var(--accent-c,var(--amber)) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent-c,var(--amber)) 22%,transparent)}
.pain-icon svg{width:20px;height:20px;stroke:var(--accent-c,var(--amber));fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pain-icon.fill svg{fill:var(--accent-c);stroke:none}
.pain-card h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px}
.pain-card p{color:var(--ink-soft);font-size:14.5px;line-height:1.5}

.why-now{position:relative;margin-top:48px;border-radius:18px;overflow:hidden;
  background:var(--bg-surface);border:1px solid rgba(239,68,68,.2);
  display:grid;grid-template-columns:1.5fr 1fr;gap:32px;padding:40px 44px}
.why-now h3{font-size:27px;font-weight:800;letter-spacing:-.01em}
.why-now .sub{color:var(--ink-soft);font-size:15.5px;margin:6px 0 18px}
.why-now ul li{display:flex;gap:12px;align-items:flex-start;padding:5px 0;color:var(--ink-soft);font-size:14px;font-weight:500}
.why-now ul li i{width:7px;height:7px;border-radius:50%;margin-top:7px;flex:none}
.why-loss{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;text-align:right}
.why-loss .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--ink-faint)}
.why-loss .v{font-variant-numeric:tabular-nums;font-size:44px;font-weight:800;letter-spacing:-.02em;color:var(--amber);line-height:1.1}
.why-loss .why-basis{font-size:12.5px;line-height:1.45;font-weight:500;color:var(--ink-faint);margin-top:8px;max-width:320px}

/* ===================== ROI ===================== */
.roi .glow-g{width:900px;height:520px;background:rgba(16,185,129,.06);left:50%;top:40%;transform:translateX(-50%)}
.roi-panel{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;max-width:1100px;margin:0 auto;
  background:var(--bg-surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:40px;box-shadow:0 24px 60px -12px rgba(0,0,0,.3)}
.roi-input{margin-bottom:28px}
.roi-input:last-child{margin-bottom:0}
.roi-input .row{display:flex;align-items:baseline;justify-content:space-between}
.roi-input label{font-size:14.5px;font-weight:600}
.roi-input .val{font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;color:var(--brand-green-lt)}
.roi-input input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;margin:18px 0 8px;
  background:linear-gradient(90deg,var(--brand-green-lt) var(--pct,30%),rgba(241,245,249,.1) var(--pct,30%))}
.roi-input input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand-green);cursor:pointer;transition:transform 120ms var(--ease)}
.roi-input input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12)}
.roi-input input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--brand-green);cursor:pointer}
.roi-input .ticks{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-faint)}
.roi-result{border-radius:var(--r-lg);padding:28px;background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.25);display:flex;flex-direction:column}
.roi-result .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--brand-green-lt)}
.roi-result .big{font-variant-numeric:tabular-nums;font-size:54px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:4px}
.roi-result .big small{font-size:18px;font-weight:700;color:var(--ink-soft);letter-spacing:0}
.roi-break{margin:22px 0 0}
.roi-break .br{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:var(--ink-soft)}
.roi-break .br b{color:var(--brand-green-lt);font-weight:700}
.roi-note{font-size:11px;color:var(--ink-faint);line-height:1.45;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.roi-result .btn{margin-top:18px;width:100%}
.roi-email{max-width:1100px;margin:18px auto 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--ink-faint);font-size:13.5px}
.roi-email form{display:flex;gap:8px;flex-wrap:wrap}
.roi-email input[type=email]{background:var(--bg-tile);border:1px solid var(--line-strong);border-radius:10px;padding:10px 14px;color:var(--ink);min-width:240px}
.roi-email button{padding:10px 16px;border-radius:10px;background:rgba(241,245,249,.05);border:1px solid var(--line-strong);font-weight:600;color:var(--ink)}
.roi-email .ok{color:var(--brand-green-lt);font-weight:600}
.roi-how{margin:16px 0 0;border-top:1px solid var(--line);padding-top:14px}
.roi-how summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;
  font-size:13px;font-weight:600;color:var(--ink-soft);transition:color var(--dur) var(--ease)}
.roi-how summary::-webkit-details-marker{display:none}
.roi-how summary:hover{color:var(--ink)}
.roi-how summary:focus-visible{outline:2px solid var(--brand-green);outline-offset:3px;border-radius:6px}
.roi-how-i{flex:none;width:18px;height:18px;display:grid;place-items:center;border-radius:6px;
  background:var(--brand-glow);color:var(--brand-green-lt);font-size:15px;font-weight:400;line-height:1;
  transition:transform var(--dur) var(--ease)}
.roi-how[open] .roi-how-i{transform:rotate(45deg)}
.roi-how-body{margin-top:12px}
.roi-how-body p{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin:7px 0}
.roi-how-body b{color:var(--ink);font-weight:600}
.roi-how-body [data-roi]{color:var(--brand-green-lt);font-weight:700}
.roi-how-body .roi-how-foot{color:var(--ink-faint);font-size:11.5px;margin-top:10px}

/* ===================== FEATURES ===================== */
.features .glow-g{width:900px;height:520px;background:rgba(16,185,129,.05);left:50%;top:34%;transform:translateX(-50%)}
.feat-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 40px}
.feat-pill{padding:9px 20px;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:rgba(241,245,249,.03);color:var(--ink-soft);font-weight:600;font-size:14px;cursor:pointer;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.feat-pill:hover{color:var(--ink);border-color:rgba(16,185,129,.4)}
.feat-pill.is-active{background:var(--brand-green);color:var(--cta-ink);border-color:transparent}
.feat-inherit{margin:-14px 0 30px;text-align:center;font-size:14px;font-weight:600;color:var(--brand-green-lt)}
.feat-inherit[hidden]{display:none}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat-card{position:relative;border:0;background:none;padding:0;cursor:pointer;text-align:left;font:inherit;perspective:1400px;min-height:212px}
.feat-card.feat-hidden{display:none}
.feat-inner{position:relative;display:block;width:100%;height:100%;min-height:212px;transition:transform .6s var(--ease);transform-style:preserve-3d}
.feat-card.is-flipped .feat-inner{transform:rotateY(180deg)}
.feat-face{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:16px;padding:22px;background:var(--bg-surface);border:1px solid var(--line);overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.feat-front{transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.feat-card:hover .feat-front{border-color:rgba(16,185,129,.4);box-shadow:0 14px 32px -14px rgba(16,185,129,.3)}
.feat-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--brand-glow);border:1px solid rgba(16,185,129,.22);margin-bottom:16px}
.feat-ic svg{width:22px;height:22px;stroke:var(--brand-green-lt);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.feat-name{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
.feat-tag{font-size:13px;color:var(--ink-soft);line-height:1.4;margin-top:7px}
.feat-badge{margin-top:auto;align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}
.feat-badge--solo{background:rgba(148,163,184,.14);color:var(--ink-soft)}
.feat-badge--pro{background:var(--brand-glow);color:var(--brand-green-lt)}
.feat-badge--premium{background:rgba(245,158,11,.14);color:var(--gold)}
.feat-back{transform:rotateY(180deg);justify-content:space-between;background:var(--bg-tile);border-color:rgba(16,185,129,.3)}
.feat-back-txt{font-size:13.5px;line-height:1.5;color:var(--ink)}
.feat-flip-hint{font-size:11px;color:var(--brand-green-lt);font-weight:600;margin-top:12px}
.feat-card:focus-visible .feat-face{outline:2px solid var(--brand-green);outline-offset:3px}
.feat-foot{text-align:center;margin-top:36px;color:var(--ink-soft);font-size:14px}
.feat-foot a{color:var(--brand-green-lt);font-weight:600;white-space:nowrap}
.feat-foot a:hover{color:var(--brand-green)}
.feat-foot .arrow{display:inline-block;transition:transform var(--dur) var(--ease)}
.feat-foot a:hover .arrow{transform:translateX(3px)}
@media (max-width:980px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feat-grid{grid-template-columns:1fr}}

/* ===================== PRICING ===================== */
.pricing .glow-g{width:800px;height:460px;background:rgba(16,185,129,.05);left:50%;top:45%;transform:translateX(-50%)}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1076px;margin:0 auto;align-items:start}
.plan{position:relative;background:var(--bg-surface);border:1px solid var(--line);border-radius:18px;padding:30px 28px;overflow:hidden;transition:transform var(--dur) var(--ease)}
.plan:hover{transform:translateY(-4px)}
.plan.hot{background:var(--bg-tile);border:1.5px solid rgba(16,185,129,.45)}
.plan.hot::before{content:"";position:absolute;width:360px;height:200px;left:-10px;top:-80px;background:rgba(16,185,129,.1);filter:blur(70px);border-radius:50%;pointer-events:none}
.plan-badge{position:absolute;top:24px;right:24px;font-size:10.5px;font-weight:700;letter-spacing:.08em;padding:5px 12px;border-radius:var(--r-pill);background:var(--brand-green);color:var(--cta-ink)}
.plan-name{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--ink-soft)}
.plan.hot .plan-name{color:var(--brand-green-lt)}
.plan-price{display:flex;align-items:baseline;gap:4px;margin:14px 0 4px}
.plan-price .num{font-variant-numeric:tabular-nums;font-size:46px;font-weight:800;letter-spacing:-.03em}
.plan-price .cur{font-size:22px;font-weight:700;color:var(--ink-soft)}
.plan-price .per{font-size:14px;font-weight:500;color:var(--ink-faint)}
.plan-lim{font-size:15px;font-weight:600;margin-top:10px}
.plan-extra{font-size:12.5px;color:var(--ink-faint);margin-top:2px}
.plan ul{margin:18px 0;border-top:1px solid var(--line);padding-top:18px;position:relative;z-index:1}
.plan ul li{display:flex;gap:12px;align-items:center;padding:7px 0;font-size:14px;color:var(--ink)}
.plan ul li .ck{flex:none;width:20px;height:20px;border-radius:50%;background:var(--brand-glow);display:grid;place-items:center}
.plan ul li .ck svg{width:12px;height:12px;stroke:var(--brand-green-lt);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan .btn{width:100%;position:relative;z-index:1}
.pricing-trial-line{text-align:center;margin:0 auto 36px;color:var(--ink-soft);font-size:14px;font-weight:500}
.final-trial-note{color:var(--ink-soft);font-size:13.5px;font-weight:500;margin-top:14px}
.pricing-trust{text-align:center;margin-top:40px;color:var(--ink-faint);font-size:13.5px;font-weight:500}
.pricing-trust a{color:var(--brand-green-lt);font-weight:600}
.price-note{text-align:center;margin-top:22px;color:var(--ink-faint);font-size:12.5px;font-weight:500}

/* ===================== FINAL CTA ===================== */
/* Wie beim Hero: waagerecht klippen, senkrecht ausklingen lassen. */
.final{position:relative;text-align:center;padding:120px 0;overflow-x:clip}
.final .glow-g{width:1000px;height:560px;background:rgba(16,185,129,.1);left:50%;top:10%;transform:translateX(-50%)}
.final h2{font-size:clamp(32px,4.5vw,48px);font-weight:800;letter-spacing:-.02em;line-height:1.12;max-width:820px;margin:0 auto}
.final .lead{margin:22px auto 30px;max-width:640px}
.final .sec-link{display:block;margin-top:18px;color:var(--ink-soft);font-weight:500;font-size:14px}
.final .sec-link:hover{color:var(--ink)}

/* ===================== FOOTER ===================== */
.footer{background:var(--bg-card);border-top:1px solid var(--line);padding:60px 0 32px}
.footer-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.footer-brand .brand{margin-bottom:16px}
.footer-brand p{color:var(--ink-soft);font-size:15px;max-width:340px}
.footer-brand .small{color:var(--ink-faint);font-size:13px;margin-top:8px}
.footer-eu{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:8px 14px;border-radius:var(--r-pill);background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);font-size:12px;font-weight:600;color:var(--brand-green-lt)}
.footer-eu .dot{width:7px;height:7px;border-radius:50%;background:var(--brand-green-lt)}
.footer-col h4{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:16px}
.footer-col a,.footer-col span.static-item{display:block;color:var(--ink-soft);font-weight:500;font-size:14px;padding:5px 0;transition:color var(--dur) var(--ease)}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);margin-top:36px;padding-top:24px;color:var(--ink-faint);font-size:13px}
.footer-bottom .links a{color:var(--ink-soft);margin-left:18px}
.footer-bottom .links a:hover{color:var(--ink)}

/* ===================== CONSENT BANNER ===================== */
.consent{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);z-index:80;width:min(1040px,calc(100% - 32px));
  background:var(--bg-surface);border:1px solid var(--line-strong);border-radius:16px;padding:28px 36px;
  box-shadow:0 18px 50px -8px rgba(0,0,0,.5);overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur)}
.consent.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.consent::before{content:"";position:absolute;width:400px;height:260px;left:-40px;top:-90px;background:rgba(16,185,129,.05);filter:blur(70px);border-radius:50%}
.consent-inner{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;position:relative}
.consent h3{font-size:17px;font-weight:700;letter-spacing:-.01em}
.consent p{color:var(--ink-soft);font-size:13.5px;line-height:1.5;margin:6px 0 4px;max-width:580px}
.consent .more{color:var(--brand-green-lt);font-size:13px;font-weight:500}
.consent-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;min-width:300px}
.consent-buttons{display:flex;gap:12px}
.consent-buttons .btn{flex:1;padding:13px 18px;font-size:14.5px}
.c-reject{background:rgba(241,245,249,.04);border:1px solid var(--line-strong);color:var(--ink);font-weight:600}
.c-reject:hover{background:rgba(241,245,249,.07)}
.c-settings{align-self:center;color:var(--ink-soft);font-size:13px;font-weight:500;background:none}
.c-settings:hover{color:var(--ink)}

/* ===================== MOTION ===================== */
/* #3181: kein Einblenden beim Scrollen, kein Dauerpulsieren (Prüfliste, Abschnitt 7). Inhalt steht sofort da. */
.pin-ping{display:none}

/* ===================== RESPONSIVE ===================== */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero{padding:140px 0 80px}
  .hero-visual{max-width:560px}
  .why-now{grid-template-columns:1fr;gap:24px}
  .why-loss{align-items:flex-start;text-align:left;flex-direction:row;justify-content:space-between;width:100%}
  .roi-panel{grid-template-columns:1fr;gap:28px;padding:28px}
  .pricing-grid{grid-template-columns:1fr;max-width:440px}
  .footer-top{grid-template-columns:1fr 1fr;gap:28px}
  .consent-inner{grid-template-columns:1fr}
  .consent-actions{min-width:0}
}
/* Hamburger-Umschaltpunkt: die volle Linkleiste braucht ~710 px (Seiten mit 4 Links + Anmelden + Demo). */
@media (max-width:760px){
  .nav-links{display:none}
  .nav-toggle{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line-strong);border-radius:10px}
  .nav-toggle svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2}
  .nav-links.open{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--gutter) 14px;background:rgba(14,17,23,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav-links.open a{padding:13px 0;font-size:16px;border-bottom:1px solid var(--line)}
  .nav-links.open a:last-child{border-bottom:0}
}
@media (max-width:640px){
  .section{padding:80px 0}
  .pain-grid{grid-template-columns:1fr}
  .why-now{padding:28px 22px}
  .why-loss{flex-direction:column;align-items:flex-start;gap:16px}
  .why-loss .v{font-size:34px}
  .why-loss .btn{width:100%}
  .footer-top{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .mini-proofs{gap:20px}
  .rev-chip{display:none}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .footer-bottom .links a{margin:0 18px 0 0}
}
/* Kopfzeile schmal (Befund 19.09.2026, Instagram-Zuschauer kommen fast nur mobil):
   Marke + „Demo anfragen“ + Menüknopf müssen bis 320 px nebeneinander passen.
   „Anmelden“ wandert unter 560 px ins Menü. Wächter: website/tests/header-mobil.test.mjs */
@media (max-width:560px){
  .nav-login{display:none}
  .nav-links .nav-links-login{display:block}
  .nav-cta{gap:8px}
  .btn.nav-demo{padding:8px 14px;font-size:13.5px}
}
@media (max-width:360px){
  .nav-inner{padding:0 16px}
  .brand{font-size:18px;gap:8px}
  .logo-mark{height:22px}
  .btn.nav-demo{padding:8px 12px;font-size:13px}
  .nav-toggle{width:40px;height:40px}
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-animate]{opacity:1;transform:none}
  .btn:hover{transform:none}
}

/* ===================== LEGAL PAGES ===================== */
.legal{max-width:780px;margin:0 auto;padding:140px 24px 100px}
.legal .back{display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;color:var(--ink-soft);font-weight:500;font-size:14px}
.legal .back:hover{color:var(--ink)}
.legal h1{font-size:clamp(28px,4vw,36px);font-weight:800;letter-spacing:-.02em}
.legal .updated{color:var(--ink-faint);font-size:13px;margin:8px 0 36px}
.legal h2{font-size:20px;font-weight:700;letter-spacing:-.01em;margin:34px 0 12px}
.legal h3{font-size:15px;font-weight:600;margin:20px 0 6px;color:var(--ink)}
.legal p,.legal li{color:var(--ink-soft);line-height:1.72;font-size:15px}
.legal p{margin:8px 0}
.legal ul{list-style:disc;padding-left:22px;margin:10px 0}
.legal ol{list-style:decimal;padding-left:24px;margin:10px 0}
.legal hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.legal .tabelle{overflow-x:auto;-webkit-overflow-scrolling:touch}
.legal li{margin:4px 0}
.legal a{color:var(--brand-green-lt)}
.legal a:hover{text-decoration:underline}
.legal strong{color:var(--ink)}
.legal .ph{color:var(--amber);background:rgba(245,158,11,.1);padding:1px 7px;border-radius:5px;font-weight:600;font-size:13.5px}
.legal table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:top}
.legal th{color:var(--ink);font-weight:600;background:rgba(241,245,249,.02)}
.legal .card{background:var(--bg-surface);border:1px solid var(--line);border-radius:14px;padding:24px 28px;margin:16px 0}

/* VisibilityTRIX 23.10.2026: Beispieldaten der Hero-Grafik sichtbar als Modell gekennzeichnet */
.hero-note{font-size:12.5px;line-height:1.45;font-weight:500;color:var(--ink-faint);margin-top:12px;text-align:center}