/* ==========================================================================
   VöhringerSolutions — Website Stylesheet
   Layout-Rhythmus & Farbspiele à la Krasenbrink (hell-dominant + dunkle
   Kontrast-Sektionen) · vhr-DNA: Indigo→Violett + Gold, Onest + Playfair,
   facettierte Achteck-Formen, Schach als Deko.
   SoT der Tokens: active/brand/brand-design-tokens.md
   ========================================================================== */

/* --- Lokal gehostete Schriften (DSGVO: keine IP-Übertragung an Google) ---
   Variable Fonts — eine Datei deckt den gesamten Gewichtsbereich ab.
   Subsets: latin + latin-ext (Umlaute & westeuropäische Zeichen). */
@font-face{
  font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../assets/fonts/onest-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Onest';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../assets/fonts/onest-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../assets/fonts/playfair-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(../assets/fonts/playfair-normal-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';font-style:italic;font-weight:400 600;font-display:swap;
  src:url(../assets/fonts/playfair-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';font-style:italic;font-weight:400 600;font-display:swap;
  src:url(../assets/fonts/playfair-italic-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* --- Marken-Akzent (kontextunabhängig) --- */
  --indigo:#5B4BE8; --indigo-br:#6D5EF5; --violet:#9D7BFF;
  --violet-soft:#C4B5FD; --pop:#B9A7FF;
  --gold:#E8C57A; --gold-soft:#F3DDA8; --gold-deep:#C79A3E;
  --grad:linear-gradient(135deg,#4A3AD4,#8163F0);
  --grad-br:linear-gradient(135deg,#6D5EF5,#B9A7FF);
  --grad-gold:linear-gradient(135deg,#E8C57A,#F3DDA8);
  --grad-gold-v:linear-gradient(180deg,#F3DDA8,#C79A3E);
  --glow:0 8px 44px rgba(91,75,232,.32);
  --glow-sm:0 4px 22px rgba(91,75,232,.28);
  --ease:cubic-bezier(.16,1,.3,1);
  --container:1180px; --pad:clamp(20px,5vw,46px); --hw:400;
  --fh:'Onest',sans-serif; --fb:'Onest',sans-serif;
  --fa:'Playfair Display',serif; --fs:'Playfair Display',serif;
  --oct:polygon(11px 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,11px 100%,0 calc(100% - 11px),0 11px);
  --oct-in:polygon(11.41px 1px,calc(100% - 11.41px) 1px,calc(100% - 1px) 11.41px,calc(100% - 1px) calc(100% - 11.41px),calc(100% - 11.41px) calc(100% - 1px),11.41px calc(100% - 1px),1px calc(100% - 11.41px),1px 11.41px);
  /* feinere Facette für kleine Chips/Labels (sec-num) – die 11px-Fase ist dort zu grob */
  --oct-sm:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);

  /* --- THEME: HELL (Default) --- */
  --bg:#F4F3F8; --bg-2:#FFFFFF;
  --surface:#FFFFFF; --surface-2:#F7F6FB; --elevated:#FFFFFF;
  --text:#15131F; --muted:#5C5A6E; --dim:#8E8BA0;
  --border:rgba(21,19,31,.10); --border-2:rgba(91,75,232,.22);
  --card-sh:0 14px 44px rgba(21,19,31,.08);
  --card-sh-hover:0 20px 60px rgba(91,75,232,.18);
  --sheen:linear-gradient(180deg,#1E1B30,#5B576F);
  --accent:var(--indigo);
  --lat:rgba(91,75,232,.05);
  --board:repeating-conic-gradient(rgba(91,75,232,.025) 0% 25%,transparent 0% 50%);
  --grain-op:.035;
}

/* --- THEME: DUNKEL (Kontrast-Sektionen) --- */
.dark{
  --bg:#0B0A12; --bg-2:#0E0D16;
  --surface:#15131F; --surface-2:#1C1830; --elevated:#241F3A;
  --text:#ECEAF4; --muted:#9C98B3; --dim:#67637E;
  --border:rgba(255,255,255,.08); --border-2:rgba(157,123,255,.22);
  --card-sh:0 12px 46px rgba(0,0,0,.35);
  --card-sh-hover:0 16px 54px rgba(109,94,245,.30);
  --sheen:linear-gradient(180deg,#EDEAF3,#C8BFD8);
  --accent:var(--violet);
  --lat:rgba(157,123,255,.06);
  --board:repeating-conic-gradient(rgba(157,123,255,.03) 0% 25%,transparent 0% 50%);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
/* Mobile: alle Texte 15% kleiner (rem skaliert mit; Abstände in px/vw bleiben) */
@media(max-width:920px){html{font-size:85%}}
body{font-family:var(--fb);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:var(--grain-op);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Helpers ---------- */
.acc{font-family:var(--fa);font-style:italic;font-weight:400}
.ser{font-family:var(--fs)}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:.14em .14em;margin:0 -.14em}
.gg{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:.14em .14em;margin:0 -.14em}
.sheen{background:var(--sheen);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.violet{color:var(--accent)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3,h4{font-family:var(--fh);letter-spacing:-.035em;line-height:1.04;font-weight:var(--hw,600);color:var(--text)}
section{padding:clamp(32px,4vw,58px) 0;position:relative;background:var(--bg)}
section.alt{--bg:#FFFFFF}

/* System-Section: Glow-Bühne — oben hell für Text, unten dunkel-cinematisch als Bühne
   für den Karten-Fächer. Endet in reinem #0B0A12 + dezentem Brett (gleiches Gewicht wie
   #prozess), damit der Anschluss an die nächste Section nahtlos ist. */
#system{overflow:hidden;
  background:
    radial-gradient(58% 42% at 50% 82%,rgba(157,123,255,.34),rgba(124,92,255,.09) 46%,transparent 72%),
    linear-gradient(180deg,
      #F4F3F8 0%,#F2F0F7 22%,#E3DEEF 33%,#B6ADD2 43%,
      #7A6FA4 53%,#473E73 64%,#241D40 76%,#120F26 88%,#0B0A12 100%)}
#system::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(rgba(157,123,255,.02) 0% 25%,transparent 0% 50%);
  background-size:60px 60px;
  -webkit-mask:linear-gradient(180deg,transparent 40%,#000 58%,#000 78%,transparent 94%);
          mask:linear-gradient(180deg,transparent 40%,#000 58%,#000 78%,transparent 94%)}
/* Lila Trennlinie zur nächsten Section (#prozess) — markiert die Grenze sauber, sodass
   das Brett unten ausläuft und sich nicht mit #prozess' Muster doppelt. */
#system::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(157,123,255,.5) 20%,rgba(196,181,253,.95) 50%,rgba(157,123,255,.5) 80%,transparent);
  box-shadow:0 0 22px 1px rgba(157,123,255,.5)}
#system .container{position:relative;z-index:1}
.board-bg{background-image:var(--board);background-size:60px 60px}
/* Foto-Hintergründe für dunkle Sektionen (Schach-Marmor + dunkles Overlay für Lesbarkeit) */
.sec-bg{background-size:cover;background-position:center;background-repeat:no-repeat}
.sec-bg.bg-reframe{background-image:linear-gradient(rgba(11,10,18,.82),rgba(11,10,18,.90)),url(../assets/bg-reframe.png)}
.sec-bg.bg-zahlen{background-image:linear-gradient(rgba(11,10,18,.80) 0%,rgba(11,10,18,.88) 100%),url(../assets/bg-zahlen.png)}
.sec-bg.bg-kontakt{background-image:linear-gradient(rgba(11,10,18,.82),rgba(11,10,18,.92)),url(../assets/bg-kontakt.png)}
.glow-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.center{text-align:center}
.center .sec-lead{margin-left:auto;margin-right:auto}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--fh);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);background:rgba(91,75,232,.10);padding:8px 16px;clip-path:var(--oct);margin-bottom:22px;filter:drop-shadow(3px 4px 9px rgba(91,75,232,.18))}
.dark .eyebrow{color:var(--pop);background:rgba(157,123,255,.13)}
.d{width:6px;height:6px;background:var(--grad);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);flex-shrink:0}
.sec-num{display:inline-flex;align-items:center;font-family:var(--fh);font-size:.8rem;font-weight:600;color:var(--muted);letter-spacing:.02em;background:var(--surface);padding:9px 18px;clip-path:var(--oct);margin-bottom:20px;filter:drop-shadow(3px 5px 11px rgba(21,19,31,.14))}
.dark .sec-num{color:var(--text);filter:drop-shadow(4px 6px 14px rgba(0,0,0,.5))}
/* Label direkt vor Content-Block (ohne Titel, z.B. #ueber/#kontakt): gleicher Rhythmus wie sec-num→sec-title (20+12) statt 20+46.
   Hinweis: JS wrappt .sec-num zur Laufzeit in .lbl-sh — daher der .lbl-sh-Selektor (Nachbar ist .lbl-sh, nicht .sec-num). .sec-num als Fallback ohne JS. */
.lbl-sh + .story-wrap,.lbl-sh + .contact-wrap,
.sec-num + .story-wrap,.sec-num + .contact-wrap{margin-top:12px}
.sec-title{font-size:clamp(1.6rem,3.68vw,2.72rem);line-height:1.16;margin:6px 0 6px}
/* Mobile: Section-Titles 15% größer (gleicht die 85%-Root-Skalierung wieder aus) */
@media(max-width:920px){
  .sec-title{font-size:clamp(1.84rem,4.23vw,3.13rem)}
  /* Label am Handy kompakter + feinere Facette (Desktop bleibt unverändert) */
  .sec-num{font-size:9.5px;line-height:1.15;letter-spacing:.04em;padding:7px 13px;clip-path:var(--oct-sm);margin-bottom:10px}
}
.sec-lead{font-size:clamp(.85rem,1.28vw,.96rem);color:var(--muted);max-width:640px;line-height:1.75}

/* ---------- Nav ---------- */
/* Section-adaptiver Header: passt sich der Sektion darunter an — über hellen
   Sektionen weiß (dunkles Logo), über dunklen #1A192B (helles Logo). JS setzt
   .is-light / .is-dark beim Scrollen. Durchgehende Indigo-Trennlinie. Kein Blur. */
nav{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid var(--indigo);transition:background .35s var(--ease),box-shadow .35s var(--ease)}
nav.is-light{background:#fff;box-shadow:0 6px 26px rgba(21,19,31,.07)}
nav.is-dark{background:#1A192B;box-shadow:none}
.nav-in{max-width:1440px;margin:0 auto;padding:10px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px}
/* Desktop: CTA-Button ist flacher (inline padding 6px statt 10px) → die 4px je Seite hier
   wieder draufgeben, damit die Header-Höhe trotz dünnerem Button exakt gleich bleibt.
   Nur Desktop — am Handy sitzt der CTA im Klappmenü, die Leiste bleibt unverändert. */
@media(min-width:901px){.nav-in{padding-block:14px}}
.brand-link{display:inline-flex;align-items:center}
.brand-logo{height:25px;width:auto;display:block}
/* Inline-SVG: "Vöhringer" folgt der Nav-Farbe (currentColor), "Solutions" bleibt Indigo-Verlauf.
   → helle Sektion: dunkler Schriftzug · dunkle Sektion: heller Schriftzug */
nav.is-light .brand-logo{color:#1A1830}
nav.is-dark .brand-logo{color:#ECEAF4}
.nav-links{display:flex;gap:25px;align-items:center}
.nav-links a:not(.btn){text-decoration:none;font-size:.85rem;font-weight:500;transition:color .2s}
nav.is-dark .nav-links a:not(.btn){color:#A7A2BE}
nav.is-dark .nav-links a:not(.btn):hover{color:var(--violet)}
nav.is-light .nav-links a:not(.btn){color:var(--muted)}
nav.is-light .nav-links a:not(.btn):hover{color:var(--indigo)}

/* Hamburger — nur unter dem Breakpoint sichtbar */
.nav-toggle{display:none}
@media(max-width:900px){
  /* Leiste bleibt beim Scrollen oben → CTA & Menü immer erreichbar */
  nav{position:sticky;top:0}
  html{scroll-padding-top:74px}

  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin:-6px -10px -6px 0;background:none;border:none;
    cursor:pointer;color:#15131F;-webkit-tap-highlight-color:transparent;z-index:2;transition:color .3s var(--ease)}
  nav.is-dark .nav-toggle{color:#ECEAF4}
  .nt-bars{position:relative;width:22px;height:14px}
  .nt-bars span{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;
    transition:transform .35s var(--ease),opacity .18s var(--ease),top .35s var(--ease)}
  .nt-bars span:nth-child(1){top:0}
  .nt-bars span:nth-child(2){top:6px}
  .nt-bars span:nth-child(3){top:12px}
  nav.open .nt-bars span:nth-child(1){top:6px;transform:rotate(45deg)}
  nav.open .nt-bars span:nth-child(2){opacity:0}
  nav.open .nt-bars span:nth-child(3){top:6px;transform:rotate(-45deg)}

  /* Menü als ausklappendes Panel unter der Leiste */
  .nav-links{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;padding:6px var(--pad) 24px;
    border-bottom:1px solid var(--indigo);box-shadow:0 24px 50px rgba(21,19,31,.14);
    opacity:0;visibility:hidden;transform:translateY(-12px);
    transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s,background .3s var(--ease)}
  nav.is-dark .nav-links{background:#1A192B;box-shadow:0 24px 50px rgba(0,0,0,.5)}
  nav.open .nav-links{opacity:1;visibility:visible;transform:none}
  .nav-links a:not(.btn){padding:16px 2px;font-size:1.02rem;color:var(--text);border-bottom:1px solid var(--border);transition:color .3s var(--ease)}
  nav.is-dark .nav-links a:not(.btn){color:#ECEAF4;border-bottom:1px solid rgba(255,255,255,.10)}
  .nav-links .btn-sh{display:block;margin-top:20px}
  .nav-links .btn-sh .btn{width:100%;justify-content:center;padding:10px 22px!important;font-size:.95rem}
}

/* ---------- Buttons ---------- */
.btns{display:flex;gap:15px;flex-wrap:wrap}
.btns.center{justify-content:center}
.btn{font-family:var(--fh);font-weight:600;font-size:.9rem;letter-spacing:-.01em;padding:15px 32px;cursor:pointer;border:none;transition:filter .5s var(--ease),color .4s var(--ease),background .5s var(--ease);text-decoration:none;display:inline-flex;align-items:center;gap:10px;clip-path:var(--oct);position:relative;isolation:isolate;overflow:hidden}
.btn-primary{background:rgba(91,75,232,.5);color:#fff}
.btn-primary::before{content:"";position:absolute;inset:0;clip-path:var(--oct-in);background:linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.06) 18%,rgba(255,255,255,0) 45%,rgba(0,0,0,.13) 80%,rgba(0,0,0,.26)),var(--grad);z-index:-1}
.btn-primary:hover{background:rgba(129,99,240,.9)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost::before{content:"";position:absolute;inset:0;clip-path:var(--oct);background:rgba(91,75,232,.45);z-index:-2;transition:.3s var(--ease)}
.btn-ghost::after{content:"";position:absolute;inset:0;clip-path:var(--oct-in);background:var(--surface);z-index:-1;transition:.3s var(--ease)}
.btn-ghost:hover{color:var(--accent);filter:drop-shadow(0 6px 24px rgba(91,75,232,.28))}
.btn-ghost:hover::before{background:var(--indigo)}
.dark .btn-ghost::before{background:rgba(157,123,255,.4)}
.dark .btn-ghost::after{background:var(--surface-2)}
.dark .btn-ghost{color:var(--text)}
.dark .btn-ghost:hover{color:#fff}
.dark .btn-ghost:hover::before{background:var(--violet)}
.dark .btn-ghost:hover::after{background:var(--elevated)}
.ar{width:23px;height:11px;flex-shrink:0;transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
/* Mobile: alle CTAs einheitlich kompakter — schmaler (horizontal) + flacher (vertikal).
   Gilt für Hero, Mid-Page-CTA & Form-Submit gleich. Nav-Menü-Button (full-width,
   eigenes !important) bleibt als Tap-Target unberührt. */
@media(max-width:920px){
  .btn{padding:10px 22px;gap:8px}
  .btn .ar{width:20px}
}
/* Schatten-Hülle: clip-path am Button beschneidet drop-shadow → Schatten auf den Wrapper legen.
   Form & Größe steuert weiterhin der Button; die Hülle trägt nur den Schatten. */
.btn-sh{display:inline-flex;vertical-align:top;transition:filter .4s var(--ease)}
.btn-sh:has(.btn-primary){filter:drop-shadow(0 10px 16px rgba(20,16,45,.33))}
.btn-sh:has(.btn-ghost){filter:drop-shadow(0 8px 14px rgba(20,16,45,.16))}
.btn-sh:has(.btn-primary):hover{filter:drop-shadow(0 14px 22px rgba(20,16,45,.42))}
.btn-sh:has(.btn-ghost):hover{filter:drop-shadow(0 12px 20px rgba(91,75,232,.30))}
#nav .btn-sh:has(.btn-primary){filter:drop-shadow(0 6px 10px rgba(20,16,45,.24))}
.form-card .btn-sh{display:block}
/* Schatten-Hülle für freistehende Labels (per JS umschlossen) */
.lbl-sh{vertical-align:top;filter:drop-shadow(0 4px 9px rgba(20,16,45,.18))}
.dark .lbl-sh{filter:drop-shadow(0 5px 13px rgba(0,0,0,.45))}
/* sec-num: dein im Lab eingestellter Wert (auf der Hülle, sonst beschnitten) */
.lbl-sh:has(.sec-num){filter:drop-shadow(0 0 9px rgba(34,26,72,.05))}
.dark .lbl-sh:has(.sec-num){filter:drop-shadow(0 0 11px rgba(0,0,0,.42))}

/* ---------- Stern-Trust-Badge ---------- */
/* eigene, kleinere Fase (6px) — bei der niedrigen Badge-Höhe wären die 11px-Fasen von --oct zu groß (spitze Enden) */
.starbadge{display:inline-flex;align-items:center;gap:7px;background:var(--surface);padding:4px 10px;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);margin-bottom:26px}
.stars{display:flex;gap:1px;color:var(--gold);font-size:.82rem;letter-spacing:0;line-height:1}
.starbadge .st{font-family:var(--fh);font-size:.72rem;color:var(--muted);font-weight:500;line-height:1}
.starbadge .st strong{color:var(--text);font-weight:700}

/* ---------- Hero (hell, 2-spaltig mit Foto) ---------- */
.hero{padding-top:94px;padding-bottom:84px;position:relative;overflow:hidden;background:#FFFFFF;min-height:660px;display:flex;align-items:center}
.hero .spot{position:absolute;top:-160px;right:-60px;width:760px;height:620px;background:radial-gradient(ellipse at center,rgba(91,75,232,.12),transparent 64%);pointer-events:none;z-index:0}
/* Schachfeldmuster: liegt als Layer über der ganzen Fläche und fadet nach
   rechts ins Bild aus (gleiches Prinzip wie der weiße Gradient nach links) */
.hero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:repeating-conic-gradient(rgba(91,75,232,.06) 0% 25%,transparent 0% 50%);background-size:60px 60px;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 78%),linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#000 0%,#000 45%,transparent 78%),linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);mask-composite:intersect}
/* Rauschen über dem Hero */
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.17;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='hn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hn)'/%3E%3C/svg%3E")}
.hero .container{position:relative;z-index:3;width:100%}
.hero-left{max-width:670px}
.hero h1{font-size:clamp(2.2rem,4.5vw,3.5rem);font-weight:var(--hw,600);letter-spacing:-.035em;margin:4px 0 22px;line-height:1.07}
.hero .lead{font-size:clamp(1.02rem,1.5vw,1.15rem);color:var(--muted);max-width:600px;margin-bottom:32px;line-height:1.7}
.hero-sub{margin-top:20px;font-family:var(--fh);font-size:.8rem;color:var(--dim);letter-spacing:.01em}
/* Foto: volle Größe rechts (full-bleed), mit Gradient-Übergang ins Helle */
.hero-photo-full{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:1}
.hero-photo-full .ph-box{position:absolute;inset:0;clip-path:none;border-radius:0;min-height:0}
.hero-photo-full .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:1}
.hero-photo-full .grad{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,#FFFFFF 0%,rgba(255,255,255,.78) 30%,rgba(255,255,255,.4) 52%,rgba(255,255,255,.18) 72%,rgba(255,255,255,.1) 88%,rgba(255,255,255,.1) 100%),linear-gradient(0deg,rgba(91,75,232,.14),transparent 44%)}
/* Mobile: editoriales Hero-Format (Referenz-Layout) — links-bündig, Bild oben
   randlos, Content überlappt die nach unten ins Weiß ausfadende Bildkante:
   eine Komposition statt zweier getrennter Blöcke. */
@media(max-width:920px){
  .hero{padding-top:0;padding-bottom:56px;min-height:0;text-align:left;flex-direction:column;align-items:stretch;overflow:hidden}
  .hero-left{max-width:none;display:block}
  .hero .lead{margin-inline:0}
  .hero h1{margin-top:0}
  .hero-photo-full{position:relative;width:100%;aspect-ratio:16/9;height:auto;margin-top:0}
  /* Bildkante fadet nach unten ins Weiß → Badge & Headline sitzen sauber darüber */
  .hero-photo-full .grad{background:
    linear-gradient(180deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.45) 50%,rgba(255,255,255,.9) 64%,#fff 74%),
    linear-gradient(0deg,rgba(91,75,232,.12),transparent 46%)}
  /* Content-Block als Einheit hochziehen, sodass das Label auf der Bild-Mittellinie (50% von 56,25vw = 28,1vw) sitzt; -13px = halbe Label-Höhe */
  .hero .container{margin-top:calc(-28.1vw - 10px);position:relative;z-index:3}
  .hero .starbadge{margin-bottom:18px}
  /* CTAs links-bündig, auto-breit (nicht volle Breite) — wie in der Referenz */
  .hero .btns{justify-content:flex-start}
}

/* ---------- Trust-Bar (Marquee) ---------- */
.trust{overflow:hidden;position:relative;background:#FFFFFF}
.trust-cap{text-align:center;font-family:var(--fh);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:28px}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;align-items:center;animation:scroll 48s linear infinite;flex-shrink:0;will-change:transform}
.trust:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tperson{display:flex;align-items:center;gap:16px;flex-shrink:0;margin-right:18px;background:var(--surface);color:var(--text);clip-path:var(--oct);padding:0 30px 0 0;min-height:82px;filter:drop-shadow(0 3px 8px rgba(21,19,31,.10)) drop-shadow(0 12px 26px rgba(21,19,31,.13))}
.tperson .ph{align-self:stretch;width:82px;flex-shrink:0;display:block;background:var(--bg-2)}
.tperson .ph img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.tperson .tn{font-family:var(--fh);font-weight:600;font-size:.92rem;color:var(--text);white-space:nowrap}
.tperson .th{font-family:var(--fh);font-size:.76rem;color:var(--muted);white-space:nowrap}
/* Mobile: schlankere Marquee — die quadratischen Fotos bestimmen die Kartenhöhe.
   Foto voll-bleed (align-self:stretch), Breite so gewählt, dass die Karte ~15%
   über/unter dem Text steht (Text≈28,6px × 1,5 ≈ 43px). */
@media(max-width:920px){
  .tperson{gap:11px;min-height:0;padding:0 20px 0 0;margin-right:14px}
  .tperson .ph{width:43px}
  .tperson .tn{line-height:1.25}
  .tperson .th{line-height:1.25}
}

/* ---------- Generic Cards ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g2,.g3{grid-template-columns:1fr}}

/* ---------- Problem (Kosten-Karten) ---------- */
#problem{position:relative;overflow:hidden}
#problem::before{content:"";position:absolute;inset:0;background-image:var(--board);background-size:60px 60px;opacity:.6;pointer-events:none;z-index:0}
#problem::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 50% 22%,rgba(157,123,255,.13),transparent 70%);pointer-events:none;z-index:0}
#problem .container{position:relative;z-index:1}
.cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.cost-card{display:flex;justify-content:space-between;align-items:center;gap:26px;background:repeating-linear-gradient(45deg,var(--lat) 0 1px,transparent 1px 11px),linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:inset 0 0 0 1px var(--border-2);padding:24px 26px;position:relative;overflow:hidden;transition:box-shadow .45s cubic-bezier(.16,1,.3,1)}
.cost-card::before{content:"";position:absolute;inset:6px;border:1px solid var(--border);pointer-events:none;z-index:2}
.cost-card:hover{box-shadow:inset 0 0 0 1px var(--violet),0 12px 46px rgba(109,94,245,.18)}
.cost-card .txt{position:relative;z-index:3}
.cost-card p{color:var(--muted);font-size:.98rem}
.cost-card p strong{color:var(--text);font-weight:600}
.cost-num{flex-shrink:0;text-align:right;line-height:1;position:relative;z-index:3}
.cost-num b{display:block;font-weight:500;font-size:2.5rem;letter-spacing:-.04em;background:var(--grad-gold-v);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}
.cost-num span{display:block;margin-top:7px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(max-width:680px){.cost-grid{grid-template-columns:1fr}}
/* Schmale Phones: Karte stapelt — große Zahl oben als Stat, Erklärung darunter (statt Text in dünne Spalte zu quetschen) */
@media(max-width:560px){
  .cost-card{flex-direction:column-reverse;align-items:flex-start;gap:14px;padding:22px 22px}
  .cost-num{text-align:left}
  .cost-num b{font-size:2.9rem}
  .cost-num span{margin-top:5px}
}
/* Lösungs-Insel: heller Container im dunklen Problem-Abschnitt */
.solution{position:relative;z-index:1;margin:clamp(28px,4vw,44px) 0 0;max-width:none;background:#FFFFFF;text-align:left;
  padding:clamp(24px,3vw,32px) clamp(26px,4vw,46px);
  box-shadow:inset 0 0 0 1px rgba(21,19,31,.10),0 26px 70px rgba(0,0,0,.5),0 -6px 70px rgba(157,123,255,.2);
  --surface:#FFFFFF;--text:#15131F;--muted:#5C5A6E;--dim:#9A98AC;
  --border:rgba(21,19,31,.10);--border-2:rgba(91,75,232,.22);--accent:var(--indigo);
  --sheen:linear-gradient(180deg,#1E1B30,#5B576F)}
.solution::before{content:"";position:absolute;inset:7px;border:1px solid var(--border);pointer-events:none}
.solution .big{font-family:var(--fh);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:-.035em;line-height:1.2;max-width:none;margin:0 0 22px;color:var(--text)}
.solution .big .no{color:var(--dim)}

/* ---------- Reframe (dunkel) ---------- */
.reframe{text-align:center}
.reframe .big{font-size:clamp(1.7rem,4vw,2.9rem);font-family:var(--fh);font-weight:400;letter-spacing:-.035em;line-height:1.18;max-width:880px;margin:0 auto}
.reframe .big .no{color:var(--dim)}

/* ---------- Modul-Cards · Spielkarten-Fächer (Flip) ----------
   6 hochkante Karten als aufgefächerte Hand (überlappend, um den unteren
   Mittelpunkt rotiert). Default = Vorderseite (Icon + Titel, solid white). Bei
   Hover/Fokus richtet sich die Karte auf, kommt nach vorn und dreht sich um →
   Inhalt. Facettierte oct-Form über die Doppel-Layer-Technik (--oct außen
   Rand-Farbe, --oct-in innen weißer Fill), Rand bleibt an den Fasen sauber. */
.deck-row{display:flex;justify-content:center;align-items:flex-end;flex-wrap:nowrap;
  margin-top:-36px;padding:78px 0 28px}

.mcard{position:relative;width:clamp(198px,21vw,238px);aspect-ratio:2/3;flex:0 0 auto;
  margin:0 -32px;perspective:1400px;z-index:1;cursor:pointer;outline:none;
  transform-origin:center center;
  transform:translateY(var(--ty,0px)) rotate(var(--rot,0deg));
  transition:transform .5s var(--ease)}
/* Symmetrischer Bogen: Winkel & Höhe spiegeln um die Mitte (1↔6, 2↔5, 3↔4) */
.mcard:nth-child(1){--rot:-15deg;--ty:44px}
.mcard:nth-child(2){--rot:-9deg;--ty:19px}
.mcard:nth-child(3){--rot:-3deg;--ty:4px}
.mcard:nth-child(4){--rot:3deg;--ty:4px}
.mcard:nth-child(5){--rot:9deg;--ty:19px}
.mcard:nth-child(6){--rot:15deg;--ty:44px}
.mcard:hover,.mcard:focus-visible,.mcard.flipped{z-index:50;
  transform:translateY(calc(var(--ty,0px) - 30px)) rotate(var(--rot,0deg))}
.mcard:focus-visible{outline:2px solid var(--accent);outline-offset:7px}

.mcard-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .72s var(--ease)}
.mcard:hover .mcard-in,
.mcard:focus-visible .mcard-in,
.mcard.flipped .mcard-in{transform:rotateY(180deg)}

.mcard-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:14px;padding:26px 18px;
  background:var(--border);clip-path:var(--oct);
  filter:drop-shadow(0 3px 8px rgba(21,19,31,.13)) drop-shadow(0 16px 34px rgba(21,19,31,.14));
  transition:background .4s var(--ease),filter .4s var(--ease)}
.mcard-face::before{content:"";position:absolute;inset:0;clip-path:var(--oct-in);
  background:var(--surface);z-index:0}                      /* solid white Fill */
.mcard-face::after{content:"";position:absolute;inset:9px;border:1px solid var(--border);
  pointer-events:none;z-index:1}                            /* dezenter Zierrahmen */
.mc-back{transform:rotateY(180deg)}
.mcard:hover .mcard-face,
.mcard:focus-visible .mcard-face,
.mcard.flipped .mcard-face{background:var(--accent);filter:drop-shadow(0 22px 46px rgba(91,75,232,.26))}
@media(prefers-reduced-motion:reduce){.mcard-in{transition:none}}

/* alle Inhalte über die Fill-/Rahmen-Layer heben */
.mcard-face>*{position:relative;z-index:2}

/* Eck-Indizes wie auf echten Spielkarten (oben-links + gespiegelt unten-rechts) */
.mc-corner{position:absolute;display:flex;flex-direction:column;align-items:center;
  line-height:1;color:var(--dim)}
.mc-corner.tl{top:14px;left:15px}
.mc-corner.br{bottom:14px;right:15px;transform:rotate(180deg)}
.mc-corner b{font-weight:500;font-size:.92rem}
.mc-corner i{font-style:normal;font-size:.8rem;margin-top:3px;opacity:.7}
.mcard.gold .mc-corner{color:var(--gold-deep)}

.mc-ic{width:58px;height:58px;display:grid;place-items:center;color:var(--accent);
  background:rgba(91,75,232,.10);clip-path:var(--oct)}
.mc-ic svg{width:30px;height:30px}
.mcard.gold .mc-ic{color:var(--gold-deep);background:rgba(232,197,122,.16)}

.mc-front h3{font-size:1.2rem;line-height:1.22}
.mc-back{gap:13px;align-items:flex-start;text-align:left;justify-content:center;padding:30px 22px}
.mc-back .eyebrow{margin:0}
.mc-back h3{font-size:1.14rem;line-height:1.2}
.mc-back p{font-size:.86rem;color:var(--muted);line-height:1.56}

/* === Karten-Bild (Full-Bleed Visual, Titel oben drüber) === */
.mc-front{justify-content:flex-start;padding:0}
.mc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:var(--oct-in)}
.mc-front h3{position:relative;z-index:3;margin-top:24px;padding:0 14px;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.mc-front .mc-corner,.mcard.gold .mc-front .mc-corner{z-index:3;color:rgba(255,255,255,.85)}

@media(max-width:820px){
  .deck-row{justify-content:flex-start;align-items:stretch;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:10px 0 16px;margin-top:40px;scrollbar-width:none;-ms-overflow-style:none}
  /* Scrollbar unsichtbar — Wischen bleibt, nur der graue Balken verschwindet */
  .deck-row::-webkit-scrollbar{display:none}
  .mcard{flex:0 0 clamp(178px,62vw,212px);margin:0;transform:none;scroll-snap-align:center}
  .mcard:hover,.mcard:focus-visible,.mcard.flipped{transform:none}
}
.badge-soon{display:inline-block;font-family:var(--fh);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);background:rgba(232,197,122,.18);padding:4px 10px;clip-path:var(--oct);margin-top:12px;position:relative;z-index:3}

/* ---------- Prozess (Pin-Stack · dunkel, Stil wie #problem) ----------
   Die Section wird beim Scrollen gepinnt (JS setzt .tl-on). Karten fahren
   scroll-gesteuert von unten rein und stapeln sich; ist der Stapel komplett,
   bleibt er fix, dann scrollt der ganze Abschnitt als Einheit weiter.
   Ohne JS / auf Mobile: schlichte vertikale Liste (Fallback). */
#prozess{position:relative;--navh:53px}
#prozess.tl-on{padding:0}
#prozess .container{position:relative;z-index:1}

/* Hintergrund-Ebene (sitzt im Pin → steht beim Scrollen still) */
.pfx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pfx::before{content:"";position:absolute;inset:0;background-image:var(--board);background-size:60px 60px;opacity:.6}
.pfx::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 65% 55% at 50% 24%,rgba(157,123,255,.13),transparent 70%)}

/* Bühne + Pin */
.tl-stage{position:relative}
.tl-pin{position:relative;overflow:hidden;padding:clamp(40px,6vw,64px) 0}
.tl-on .tl-pin{position:sticky;top:0;height:100vh;padding:0;display:flex;align-items:center}
.tl-on .tl-pin .container{width:100%}

.tl-head{position:relative;z-index:6;margin-bottom:clamp(20px,3vh,32px)}
.tl-head .sec-lead{margin-bottom:0}

/* Track + Karten */
.tl-track{position:relative}
.tl-item{position:relative;margin:0 0 24px}
.tl-item:last-child{margin-bottom:0}
.tl-on .tl-item{position:absolute;left:0;right:0;top:0;margin:0;will-change:transform}

/* Karte: Bild links, Text rechts */
.tl-card{position:relative;display:grid;grid-template-columns:44% 1fr;border-radius:18px;
  background:repeating-linear-gradient(45deg,var(--lat) 0 1px,transparent 1px 11px),linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 0 0 1px var(--border-2),0 14px 26px rgba(0,0,0,.52);overflow:hidden}
.tl-card::before{content:"";position:absolute;inset:6px;border:1px solid var(--border);border-radius:12px;pointer-events:none;z-index:3}
.tl-card>*{position:relative;z-index:2}

/* Nummer als Eck-Badge auf dem Bild */
.tl-node{position:absolute;top:16px;left:16px;z-index:4;width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  background:var(--grad);clip-path:var(--oct)}
.tl-node::before{content:"";position:absolute;inset:1px;clip-path:var(--oct);
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.05) 22%,rgba(255,255,255,0) 50%,rgba(0,0,0,.16) 86%)}
.tl-node .k{position:relative;z-index:2;font-family:var(--fa);font-style:italic;font-weight:500;font-size:1.4rem;color:#fff;line-height:1}

.tl-media{position:relative;margin:0;min-height:340px;overflow:hidden}
.tl-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;z-index:1}
.tl-body{padding:44px 50px;display:flex;flex-direction:column;justify-content:center}
.tl-step{display:inline-block;align-self:flex-start;font-family:var(--fh);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pop);background:rgba(157,123,255,.13);padding:7px 15px;clip-path:var(--oct);margin-bottom:16px}
.tl-body h3{font-size:1.7rem;margin-bottom:12px}
.tl-body p{color:var(--muted);font-size:1rem;line-height:1.65}

/* Mobile: gleicher Pin-Stack wie Desktop (JS), nur Karte vertikal (Bild oben, Text
   unten) + kompakter, damit Titel + aktuelle Karte zusammen in den 100vh-Pin passen.
   Kein Titel-BG nötig: im Pin scrollt nichts hinter den Titel. */
@media(max-width:720px){
  .tl-card{grid-template-columns:1fr}
  .tl-media{min-height:0;aspect-ratio:16/9}
  .tl-body{padding:18px 20px}
  .tl-body h3{font-size:1.35rem;margin-bottom:7px}
  .tl-body p{font-size:.875rem;line-height:1.5}
  .tl-step{margin-bottom:11px}
  .tl-node{width:46px;height:46px;top:12px;left:12px}
  .tl-node .k{font-size:1.2rem}
  /* Pin klebt UNTER der Nav (top:--navh, von JS exakt gesetzt) statt bei top:0.
     Dadurch reicht der normale Section-Abstand oben → das Label sitzt genauso
     weit unter dem Abschnittsanfang wie bei allen anderen Sections (kein 64px-
     Versatz mehr, der beim Reinscrollen eine große Lücke riss). */
  .tl-on .tl-pin{align-items:flex-start;top:var(--navh);height:calc(100vh - var(--navh));padding-top:clamp(32px,4vw,58px)}
  .tl-head{margin-bottom:14px}
  .tl-head .sec-lead{font-size:.85rem;line-height:1.55}
}
/* Fallback ohne JS / reduced-motion: schlichte vertikale Liste */
@media(max-width:720px) and (prefers-reduced-motion:reduce){
  .tl-item{position:relative}
}
/* Mehr Luft unter Schritt 04 bis zur Zahlen-Section (Desktop; mobile bleibt 0, s.o.) */
#prozess{padding-bottom:clamp(60px,7vw,104px)}

/* ---------- Zahlen / Stats (dunkel, Gold) ---------- */
/* Container-Layout: Hero-Tafel + Beleg-Chips, facettierte Brand-Doppelrahmen-Karten */
.zstats{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);margin-top:30px}
.stat-kick{display:inline-flex;align-items:center;gap:9px;font-family:var(--fh);font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:18px}
.stat-kick i{width:7px;height:7px;background:var(--grad-gold);clip-path:var(--oct)}

/* Brand-Karte: facettierter Doppelrahmen (1px-Randfarbe via 2 gestapelte oct + innerer Rahmen).
   KEIN filter:drop-shadow → das erzwingt pro Scroll-Frame einen eigenen Render-Pass und
   war (kumulativ mit den anderen Region-Filtern) die Scroll-Jank-Ursache bei voller Auflösung.
   Tiefe kommt aus dem hellen border-2-Rand + innerem Rahmen — rastert quasi gratis. */
.zcard{position:relative;clip-path:var(--oct);background:var(--border-2);padding:1px}
.zcard>.zin{position:relative;height:100%;clip-path:var(--oct);background:linear-gradient(180deg,var(--surface-2),var(--surface));padding:clamp(22px,2.8vw,34px)}
.zcard>.zin::before{content:"";position:absolute;inset:7px;clip-path:var(--oct);border:1px solid var(--border);pointer-events:none}

/* Hero-Tafel: Mega-Zahl + Kontext auf einer Grundlinie */
.zhero>.zin{display:flex;align-items:flex-end;gap:clamp(24px,3vw,48px);flex-wrap:wrap;padding:clamp(30px,3.6vw,48px)}
.zhero-head{display:flex;flex-direction:column}
.zv{font-family:var(--fh);font-weight:700;letter-spacing:-.045em;line-height:.88;font-size:clamp(3.2rem,7.2vw,6rem);background:var(--grad-gold-v);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.zlead{font-size:clamp(.98rem,1.35vw,1.1rem);color:var(--muted);max-width:34ch;line-height:1.6;padding-bottom:.4em}
.zlead strong{color:var(--text);font-weight:600}

/* Beleg-Chips: drei flache Mini-Karten */
.zchips{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(13px,1.5vw,18px)}
.zchip>.zin{padding:clamp(18px,2.2vw,26px)}
.zpv{font-family:var(--fh);font-weight:700;letter-spacing:-.03em;line-height:1;font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:8px;background:var(--grad-gold-v);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* Headline-Akzent ("sprechen.") nutzt denselben vertikalen Gold-Gradient wie die Zahlen — nur hier, .gg bleibt anderswo der Standard-Gradient */
#zahlen .gg{background:var(--grad-gold-v);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.zrl{font-size:.84rem;color:var(--muted);line-height:1.5}
.zrl s{color:var(--dim);text-decoration-color:rgba(157,123,255,.45)}
@media(max-width:760px){.zchips{grid-template-columns:1fr}}

/* ── Cinematic Backdrop: wandernde Lichtwelle (Drift auf ::before, Parallax per JS) ── */
/* Gold-Trennlinien: rahmen die Zahlen-Section voll durch (full-bleed) oben + unten */
/* Oben 1px gegen Dunkel reicht helles Gold @.45. Unten gegen den WEISSEN #cases-BG
   hat helles Gold keinen Kontrast (verschwindet) — daher abgedunkeltes, sattes Gold
   UND 1.5px Dicke, damit die untere Linie klar als Trennung liest. */
#zahlen{overflow:hidden;border-block:1px solid rgba(232,197,122,.45);border-block-end:1.5px solid #C18A2E}
#zahlen .container{position:relative;z-index:2}
.zahlen-light{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform;transition:transform .3s ease-out}
.zahlen-light::before{content:"";position:absolute;inset:-12%;
  background:radial-gradient(circle at 34% 42%,rgba(157,123,255,.16),transparent 42%);
  animation:zahlen-drift 16s ease-in-out infinite alternate;will-change:transform}
@keyframes zahlen-drift{0%{transform:translate(-3%,-2%)}50%{transform:translate(5%,3%)}100%{transform:translate(2%,-1%)}}
/* Hero-Tafel: kein filter:drop-shadow (Scroll-Jank, s.o.). Tiefe via border-2-Rand. */
@media(prefers-reduced-motion:reduce){
  .zahlen-light::before{animation:none}
}

/* SCROLL-PERFORMANCE: filter:drop-shadow erzwingt pro Scroll-Frame einen eigenen
   Render-Pass. In dieser Karten-dichten Region (prozess/zahlen/cases) summieren sich
   diese Passes bei voller Auflösung zu Scroll-Jank. Daher hier alle drop-shadow-Filter
   neutralisieren (auch die Eyebrow-/sec-num-Badges, die global noch Filter tragen). */
#prozess .lbl-sh,#prozess .sec-num,#zahlen .lbl-sh,#zahlen .sec-num{filter:none}
/* #cases: das eine sec-num-Label behält bewusst seinen Schatten (1:1 wie #system) —
   ein einzelnes Label ist ein winziger Render-Pass, kein Jank wie die Karten-Masse. */

/* ---------- Bild-Platzhalter ---------- */
.ph-box{position:relative;background:linear-gradient(155deg,#ECEAF6,#F7F6FB);box-shadow:inset 0 0 0 1px var(--border-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;color:var(--accent);min-height:200px}
.ph-box::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(91,75,232,.06) 0 1px,transparent 1px 13px);opacity:.7}
.dark .ph-box{background:linear-gradient(155deg,#231C3D,#15131F)}
.dark .ph-box::before{background-image:repeating-linear-gradient(45deg,rgba(157,123,255,.06) 0 1px,transparent 1px 13px)}
.ph-box .ico{position:relative;z-index:2;width:40px;height:40px;opacity:.75;filter:drop-shadow(0 0 10px rgba(91,75,232,.3))}
.ph-box .lbl{position:relative;z-index:2;font-family:var(--fh);font-size:.74rem;font-weight:500;letter-spacing:.04em;color:var(--muted);text-align:center;padding:0 16px}
.ph-box.rounded{border-radius:14px;clip-path:none}

/* ---------- Testimonials ---------- */
.tm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:46px}
@media(max-width:900px){.tm-grid{grid-template-columns:1fr}}
.tm{background:repeating-linear-gradient(45deg,var(--lat) 0 1px,transparent 1px 11px),linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:inset 0 0 0 1px var(--border-2);position:relative;overflow:hidden;display:flex;flex-direction:column;transition:.45s var(--ease)}
.tm::before{content:"";position:absolute;inset:6px;border:1px solid var(--border);pointer-events:none;z-index:4}
.tm:hover{box-shadow:inset 0 0 0 1px var(--accent),var(--card-sh-hover)}
.tm.dark,.ref.dark{color:var(--text)}
.tm .media{position:relative;aspect-ratio:16/9}
.tm .media .ph-box{position:absolute;inset:0;clip-path:none;border-radius:0}
.tm .media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* YouTube-Facade: eigenes 16:9-Thumbnail + Brand-Play-Button, lädt das iframe erst beim Klick (keine YT-Overlays in der Vorschau) */
.yt-facade{cursor:pointer;background:#000}
.yt-facade .yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yt-facade::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,18,.08),rgba(11,10,18,.30));pointer-events:none;transition:background .4s var(--ease)}
.yt-facade:hover::after{background:linear-gradient(180deg,rgba(11,10,18,0),rgba(11,10,18,.18))}
.tm .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:48px;height:48px;border:0;padding:0;cursor:pointer;border-radius:50%;background:rgba(13,12,22,.6);box-shadow:inset 0 0 0 2px var(--violet),0 6px 18px rgba(11,10,18,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;transition:box-shadow .4s var(--ease)}
.yt-facade:hover .play{box-shadow:inset 0 0 0 2px var(--pop),0 0 22px rgba(157,123,255,.6)}
.tm .play svg{width:19px;height:19px;display:block;margin-left:2px;fill:#fff}
.tm .body{padding:26px 28px 28px}
.tm .cat{display:inline-block;font-family:var(--fh);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:rgba(91,75,232,.10);padding:5px 12px;clip-path:var(--oct);margin-bottom:16px}
.tm .quote{font-family:var(--fa);font-style:italic;font-size:1.18rem;line-height:1.45;color:var(--text);margin-bottom:20px}
.tm .meta{display:flex;align-items:center;gap:13px;border-top:1px solid var(--border);padding-top:18px}
.tm .meta .av{width:46px;height:46px;flex-shrink:0;clip-path:var(--oct);background:linear-gradient(155deg,#473872,#1a1730);box-shadow:inset 0 0 0 1px var(--border-2);display:grid;place-items:center;color:var(--pop);font-family:var(--fh);font-weight:600;overflow:hidden}
.tm .meta .av.photo{background:transparent;box-shadow:none}
.tm .meta .av img{width:100%;height:100%;object-fit:cover;display:block}
.tm .meta .n{font-family:var(--fh);font-weight:600;font-size:.92rem}
.tm .meta .h{font-family:var(--fh);font-size:.78rem;color:var(--muted)}
.tm .result{margin-left:auto;text-align:right;font-family:var(--fh);font-size:.74rem;color:var(--gold-deep);font-weight:700;max-width:130px;line-height:1.3}
/* Schmale Phones: Ergebnis-Label bricht in eigene Zeile (sonst Clipping am rechten Rand) */
@media(max-width:560px){
  .tm .meta{flex-wrap:wrap}
  .tm .result{order:3;flex-basis:100%;margin:8px 0 0 59px;text-align:left;max-width:none}
}

/* Referenz-Marquee: zwei gegenläufige Reihen (ersetzt das alte 3er-Grid) */
/* full-bleed über die volle Viewport-Breite, kein Fade — Karten schneiden hart am Bildschirmrand ab */
.ref-marquee{margin-top:24px;display:flex;flex-direction:column;gap:16px;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.ref-row{display:flex;align-items:stretch;gap:16px;width:max-content;flex-shrink:0;will-change:transform}
.ref-row.r1{animation:refscroll 40s linear infinite}
.ref-row.r2{animation:refscroll 46s linear infinite reverse}
.ref-marquee:hover .ref-row{animation-play-state:paused}
@keyframes refscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ref-marquee .ref{width:clamp(228px,72vw,300px);flex-shrink:0}
@media(prefers-reduced-motion:reduce){.ref-row{animation:none}}
/* Desktop: keine Marquee — statisch 4 nebeneinander. 5 echte Karten in r1, .desk-hide (ADM) wird ausgeblendet → genau 4 symmetrisch. Mobil läuft alles. */
@media(min-width:921px){
  .ref-marquee{width:auto;margin-left:0;margin-right:0}
  .ref-row.r2{display:none}
  .ref-row.r1{animation:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:auto}
  .ref-row.r1 .ref[aria-hidden],.ref-row.r1 .ref.desk-hide{display:none}
  .ref-marquee .ref{width:auto}
}
.ref{background:repeating-linear-gradient(45deg,var(--lat) 0 1px,transparent 1px 11px),linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:inset 0 0 0 1px var(--border-2);padding:22px 24px;position:relative;transition:.4s var(--ease);overflow:hidden}
.ref::before{content:"";position:absolute;inset:6px;border:1px solid var(--border);pointer-events:none;z-index:2}
.ref>*{position:relative;z-index:3}
.ref:hover{box-shadow:inset 0 0 0 1px var(--accent),var(--card-sh-hover)}
.ref .rt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px}
.ref .n{font-family:var(--fh);font-weight:600;font-size:1rem}
.ref .f{font-family:var(--fh);font-size:.72rem;color:var(--gold-deep);font-weight:700;white-space:nowrap}
.ref p{color:var(--muted);font-size:.86rem;line-height:1.55}

/* ---------- Founder-Story ---------- */
.story-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start;margin-top:46px}
@media(max-width:900px){.story-wrap{grid-template-columns:1fr;gap:30px}}
.story-photo{position:relative;aspect-ratio:4/5;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border-2)}
.story-photo::before{content:"";position:absolute;inset:6px;border:1px solid var(--border);pointer-events:none;z-index:4}
.story-photo .ph-box{position:absolute;inset:0}
.story-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block}
.story-txt h3{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:18px}
.story-txt p{color:var(--muted);font-size:.98rem;line-height:1.75;margin-bottom:14px}
.story-txt p strong{color:var(--text);font-weight:600}
.story-sign{margin-top:22px;font-family:var(--fa);font-style:italic;font-size:1.4rem;color:var(--accent)}

/* ---------- Garantie-Siegel ---------- */
.seal-wrap{display:flex;align-items:center;gap:13px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-2);padding:12px 16px;margin-top:46px;position:relative;overflow:hidden}
.seal-wrap::before{content:"";position:absolute;inset:6px;border:1px solid var(--border);pointer-events:none;z-index:2}
.seal-wrap .lat{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(232,197,122,.06) 0 1px,transparent 1px 12px);opacity:.6}
.seal{width:46px;height:46px;flex-shrink:0;position:relative;z-index:2}
.seal-txt{position:relative;z-index:2}
.seal-txt h3{font-size:1.3rem;margin-bottom:5px}
.seal-txt p{color:var(--muted);font-size:.9rem}

/* ---------- Vergleich ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:46px}
@media(max-width:760px){.compare{grid-template-columns:1fr}}
.comp{background:repeating-linear-gradient(45deg,var(--lat) 0 1px,transparent 1px 11px),linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:inset 0 0 0 1px var(--border-2);padding:32px;position:relative;overflow:hidden}
.comp::before{content:"";position:absolute;inset:6px;border:1px solid var(--border);pointer-events:none;z-index:2}
.comp>*{position:relative;z-index:3}
.comp.win{box-shadow:inset 0 0 0 1.5px var(--accent)}
.comp h3{font-size:1.2rem;margin-bottom:6px}
.comp.win h3{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.comp .ch{font-family:var(--fh);font-size:.74rem;color:var(--dim);letter-spacing:.1em;text-transform:uppercase;margin-bottom:22px}
.comp ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.comp li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--muted)}
.comp li .i{flex-shrink:0;width:22px;height:22px;display:grid;place-items:center;clip-path:var(--oct);font-size:.8rem;font-weight:700}
.comp.lose li .i{background:rgba(210,85,63,.12);color:#D2553F}
.comp.win li .i{background:rgba(91,75,232,.14);color:var(--accent)}
.comp.win li{color:var(--text)}

/* ---------- FAQ ---------- */
.faq{margin:23px 0 0}
.fitem{border-bottom:1px solid var(--border)}
.fq{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:24px 50px 24px 0;font-family:var(--fh);font-weight:500;font-size:1.06rem;color:var(--text);position:relative;letter-spacing:-.01em}
.fq::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.5rem;color:var(--accent);font-weight:300;transition:transform .35s var(--ease)}
.fitem.open .fq::after{transform:translateY(-50%) rotate(45deg)}
.fa{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.fa p{color:var(--muted);font-size:.95rem;line-height:1.7;padding:0 0 24px}

/* ---------- Kontakt / Formular (dunkel) ---------- */
.contact-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:start;margin-top:46px}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr;gap:32px}}
.contact-info h3{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:16px}
.contact-info p{color:var(--muted);font-size:.98rem;line-height:1.7;margin-bottom:14px}
.contact-points{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:14px}
.contact-points li{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--muted)}
.contact-points li .i{flex-shrink:0;color:var(--accent)}
.contact-points li strong{color:var(--text);font-weight:600}
.foot-socials{display:flex;gap:12px;margin-top:18px}
.foot-socials .social-ic{width:40px;height:40px;margin:0;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:rgba(255,255,255,.82);transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease)}
.foot-socials .social-ic svg{display:block;width:20px;height:20px}
.foot-socials .social-ic:hover{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.form-card{background:repeating-linear-gradient(45deg,var(--lat) 0 1px,transparent 1px 11px),linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:inset 0 0 0 1px var(--border-2);padding:clamp(26px,4vw,40px);position:relative;overflow:hidden}
.form-card::before{content:"";position:absolute;inset:6px;border:1px solid var(--border);pointer-events:none;z-index:1}
.fgroup{margin-bottom:13px;position:relative;z-index:2}
.fgroup label{display:block;font-family:var(--fh);font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--muted);margin-bottom:6px}
.fgroup label .req{color:var(--accent)}
/* Ruhezustand: dezenter Standard-Rand. Der Trennlinien-Verlauf erscheint erst bei Fokus
   und blendet weich ein: --fbord (via @property animierbar) skaliert die Rand-Alphas von
   0→1. border bleibt 1px transparent (statt none), damit beim Fokus nichts springt. */
@property --fbord{syntax:'<number>';initial-value:0;inherits:false}
.fgroup input,.fgroup textarea{width:100%;border:1px solid transparent;--fbord:0;
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,
    linear-gradient(90deg,rgba(157,123,255,calc(.32*var(--fbord))),rgba(196,181,253,calc(.62*var(--fbord))) 50%,rgba(157,123,255,calc(.32*var(--fbord))) ) border-box;
  box-shadow:inset 0 0 0 1px var(--border);color:var(--text);font-family:var(--fb);font-size:.95rem;padding:10px 14px;
  transition:--fbord .4s var(--ease),box-shadow .4s var(--ease);resize:vertical}
.fgroup input:focus,.fgroup textarea:focus{outline:none;--fbord:1;box-shadow:0 0 13px rgba(157,123,255,.14)}
.fgroup input::placeholder,.fgroup textarea::placeholder{color:var(--dim)}
/* Eingabetexte einheitlich auf die +49-/dial-code-Größe (.95rem). Bewusst < 16px
   (auf Wunsch) → iOS-Safari zoomt beim Feld-Fokus minimal rein, Android/Desktop nicht.
   Akzeptiert zugunsten konsistenter, feinerer Optik. NICHT zurück auf 16px „fixen".
   padding 9px (statt 7px) gleicht die durch die kleinere Schrift verlorene Zeilenhöhe
   aus → Felder bleiben so hoch wie zuvor mit 16px. */
@media(max-width:600px){
  .fgroup input,.fgroup textarea{font-size:.95rem;padding:9px 12px}
  .fgroup{margin-bottom:10px}
  .fgroup label{margin-bottom:4px}
}
.fhint{font-family:var(--fh);font-size:.76rem;color:var(--dim);margin:-4px 0 13px}
.ferror{font-family:var(--fh);font-size:.78rem;color:#E8857A;margin-top:8px;display:none}
.fgroup.invalid input,.fgroup.invalid textarea{
  background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,linear-gradient(#E8857A,#E8857A) border-box;box-shadow:none}
.fgroup.invalid .ferror{display:block}
.form-card .btn{width:100%;justify-content:center;margin-top:6px}
.form-status{margin-top:18px;font-family:var(--fh);font-size:.88rem;text-align:center;display:none}
.form-status.show{display:block}
.form-status.ok{color:var(--pop)}
.form-status.err{color:#E8857A}

/* ---------- Telefon-Input · intl-tel-input, aufs Brand gezogen ---------- */
/* Flaggen-Sprites: ABSOLUTER Pfad — Chrome löst url() in CSS-Variablen relativ
   zur nutzenden Vendor-CSS auf, nicht zu dieser Datei (sonst /vendor/vendor/…).
   Library-Farben hart auf die Dunkel-Tokens — Dropdown liegt ggf. außerhalb .dark. */
:root{
  --iti-path-flags-1x:url(/vendor/intl-tel-input/img/flags.webp);
  --iti-path-flags-2x:url(/vendor/intl-tel-input/img/flags@2x.webp);
  --iti-country-selector-bg:#1C1830;
  --iti-border-color:rgba(255,255,255,.10);
  --iti-icon-color:#9C98B3;
  --iti-hover-color:rgba(157,123,255,.12);
}
/* Wrapper füllt die Feldbreite (Default: inline-block) */
#g-phone .iti{display:block;width:100%}
/* Dropdown ist inline (Kind der .form-card) → Card darf nicht clippen und die
   Telefon-Gruppe muss über den Folgefeldern (Notiz/Button) liegen. */
.form-card{overflow:visible}
#g-phone{z-index:6;scroll-margin-top:90px}
/* Länder-/Vorwahl-Button im Feld */
#g-phone .iti__selected-country{color:#ECEAF4}
#g-phone .iti__selected-dial-code{font-family:var(--fb);font-size:.95rem;opacity:.92}
#g-phone .iti__country-container{border-right:1px solid rgba(255,255,255,.10)}
#g-phone .iti__flag{border-radius:0;box-shadow:0 0 0 1px rgba(0,0,0,.45)}

/* Dropdown-Fläche: dunkel + facettiert (Achteck) statt heller Box */
.iti__country-selector{
  background:#1C1830;border:0;box-shadow:none;
  clip-path:var(--oct);
  filter:drop-shadow(0 18px 46px rgba(0,0,0,.62));
  z-index:50;
}
/* Mobile-Vollbild-Popup ist ein Sheet → kein Achteck/Schatten */
.iti--fullscreen-popup .iti__country-selector{clip-path:none;filter:none}
/* Suchfeld + Länderliste */
/* Lupen-Icon im Länder-Suchfeld raus (Handy & Desktop) + Einzug zurück auf normalen Rand,
   da der padding-left der Library Platz für genau dieses Icon reserviert hat. */
.iti__search-icon{display:none}
.iti__search-input{background:#0E0D16;color:#ECEAF4;font-family:var(--fb);padding-left:var(--iti-spacer-horizontal,12px)}
.iti__search-input::placeholder{color:#67637E}
.iti__country{color:#ECEAF4;font-family:var(--fb);font-size:.92rem}
.iti__country .iti__dial-code{color:#9C98B3}
.iti__country.iti__highlight{background:rgba(157,123,255,.12)}
.iti__country-check{color:#B9A7FF}
.iti__no-results{color:#9C98B3}
/* Scrollbalken der Länderliste im Brand (Default war hellgrau) */
.iti__country-list{scrollbar-width:thin;scrollbar-color:#7C66E6 rgba(157,123,255,.08)}
.iti__country-list::-webkit-scrollbar{width:12px}
.iti__country-list::-webkit-scrollbar-track{background:rgba(157,123,255,.07)}
.iti__country-list::-webkit-scrollbar-thumb{
  background:#7C66E6;                   /* klar sichtbar violett */
  border:3px solid #1C1830;            /* schmale, schwebende Optik; eckig = Brand */
  background-clip:padding-box;
}
.iti__country-list::-webkit-scrollbar-thumb:hover{
  background:#9D7BFF;
  border:3px solid #1C1830;
  background-clip:padding-box;
}
.form-legal{font-family:var(--fh);font-size:.74rem;color:var(--dim);margin-top:16px;line-height:1.5;position:relative;z-index:2}
.form-legal a{color:var(--muted)}

/* ---------- Footer (dunkel) ---------- */
footer{background:#0B0A12;padding:64px 0 44px;position:relative;overflow:hidden}
footer .gb{width:500px;height:300px;background:#5B4BE8;opacity:.16;bottom:-160px;left:50%;transform:translateX(-50%)}
footer .pieces{font-size:1.4rem;letter-spacing:.4rem;color:var(--violet);opacity:.55;margin-bottom:24px;filter:drop-shadow(0 0 16px rgba(157,123,255,.5));text-align:center}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap;position:relative;z-index:2}
.foot-brand .brand-logo{height:28px;margin-bottom:14px}
.foot-brand p{font-size:.86rem;color:#9C98B3;max-width:320px;line-height:1.65}
.foot-cols{display:flex;gap:60px;flex-wrap:wrap}
.foot-col h4{font-family:var(--fh);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#67637E;margin-bottom:16px}
.foot-col a{display:block;color:#9C98B3;text-decoration:none;font-size:.88rem;margin-bottom:10px;transition:.2s}
.foot-col a:hover{color:var(--pop)}
.foot-bot{border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:#67637E;position:relative;z-index:2}
/* Mobile: gestapelte Footer-Spalten enger zusammen (60px Lücke wirkt sonst wie Abriss) */
@media(max-width:560px){.foot-cols{gap:30px}}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:.8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.marquee-track{animation:none}}

/* ==========================================================================
   Rechtliches / Blog / Artikel (hell)
   ========================================================================== */
.legal{padding-top:120px;padding-bottom:80px;min-height:70vh;background:var(--bg)}
.legal .container{max-width:760px}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:10px}
.legal .lead{color:var(--muted);margin-bottom:40px}
.legal h2{font-size:1.3rem;margin:36px 0 12px;color:var(--text)}
.legal h3{font-size:1.05rem;margin:24px 0 8px;color:var(--text)}
.legal p,.legal li{color:var(--muted);font-size:.95rem;line-height:1.75;margin-bottom:12px}
.legal ul{padding-left:22px;margin-bottom:12px}
.legal a{color:var(--accent);text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal .ph-inline{background:rgba(91,75,232,.1);color:var(--accent);padding:1px 7px;clip-path:var(--oct);font-family:var(--fh);font-size:.85em;font-weight:500}

/* Blog */
.blog-hero{padding-top:104px;padding-bottom:14px;text-align:center;background:var(--bg)}
.blog-hero .lead{color:var(--muted);max-width:620px;margin:12px auto 0;font-size:1.05rem}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr}.blog-hero{padding-top:74px;padding-bottom:8px}}
.post{background:repeating-linear-gradient(45deg,var(--lat) 0 1px,transparent 1px 11px),linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:inset 0 0 0 1px var(--border-2);position:relative;overflow:hidden;transition:.45s var(--ease);text-decoration:none;display:flex;flex-direction:column}
.post::before{content:"";position:absolute;inset:6px;border:1px solid var(--border);pointer-events:none;z-index:4}
.post:hover{box-shadow:inset 0 0 0 1px var(--accent),var(--card-sh-hover)}
.post .media{aspect-ratio:16/9;position:relative}
.post .media .ph-box{position:absolute;inset:0;clip-path:none;min-height:0}
.post .pbody{padding:24px 26px 28px}
.post .ptag{display:inline-block;font-family:var(--fh);font-size:.64rem;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:rgba(91,75,232,.10);padding:8px 16px;clip-path:var(--oct);margin-bottom:14px}
.post h3{font-size:1.16rem;margin-bottom:9px;color:var(--text)}
.post p{color:var(--muted);font-size:.9rem;line-height:1.6}
.post .pmeta{margin-top:16px;font-family:var(--fh);font-size:.76rem;color:var(--dim)}

/* Artikel */
.article{padding-top:38px;padding-bottom:80px;background:var(--bg)}
.article .container{max-width:960px}
.article .ptag{display:inline-block;font-family:var(--fh);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:rgba(91,75,232,.10);padding:6px 14px;clip-path:var(--oct);margin-bottom:20px}
.article h1{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:18px;line-height:1.08}
.article .ameta{font-family:var(--fh);font-size:.8rem;color:var(--dim);margin-bottom:30px}
.article .media{aspect-ratio:16/9;position:relative;margin:10px 0 44px}
.article .media .ph-box{position:absolute;inset:0;border-radius:14px;clip-path:none}
.article-body p{color:#3E3C4E;font-size:1.25rem;line-height:1.85;margin-bottom:1.5em;letter-spacing:.001em}
.article-body > p:first-of-type{font-size:1.42rem;line-height:1.62;color:#2A2838;margin-bottom:1em}
.article-body h2{font-family:var(--fh);font-weight:500;font-size:1.75rem;letter-spacing:-.02em;line-height:1.22;margin:1.6em 0 .45em;color:var(--text)}
.article-body h3{font-family:var(--fh);font-weight:500;font-size:1.32rem;letter-spacing:-.01em;line-height:1.3;margin:1.5em 0 .4em;color:var(--text)}
.article-body strong{color:var(--text);font-weight:600}
.article-body ul,.article-body ol{padding-left:24px;margin:0 0 1.5em}
.article-body li{color:#3E3C4E;font-size:1.18rem;line-height:1.7;margin-bottom:.55em}
.article-body li::marker{color:var(--text)}
.article-body blockquote{border-left:4px solid var(--accent);padding:4px 0 4px 26px;margin:1.6em 0;font-family:var(--fa);font-style:italic;font-size:1.5rem;line-height:1.42;color:var(--text)}

/* Spezial-Listen */
.article-body ul.list-check,.article-body ul.list-cross{list-style:none;padding-left:0}
.article-body ul.list-check li,.article-body ul.list-cross li{position:relative;padding-left:38px;margin-bottom:.6em}
.article-body ul.list-check li::before{content:"";position:absolute;left:0;top:.16em;width:23px;height:23px;background:no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236D5EF5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.article-body ul.list-cross li::before{content:"";position:absolute;left:0;top:.16em;width:23px;height:23px;background:no-repeat center/100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC4A3D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.article-body ol.list-steps{list-style:none;padding-left:0;counter-reset:step}
.article-body ol.list-steps li{counter-increment:step;position:relative;padding-left:54px;min-height:34px;padding-top:3px;margin-bottom:.9em}
.article-body ol.list-steps li::before{content:counter(step);position:absolute;left:0;top:0;width:34px;height:34px;background:var(--grad);clip-path:var(--oct);color:#fff;font-family:var(--fh);font-weight:600;font-size:.92rem;display:flex;align-items:center;justify-content:center}

/* CTA-Block (Voll-Panel) */
.cta-panel{position:relative;background:var(--surface-2);clip-path:var(--oct);padding:48px 40px;text-align:center;margin-top:52px}
.cta-panel::before{content:"";position:absolute;inset:8px;border:1px solid var(--border-2);clip-path:var(--oct);pointer-events:none}
.cta-panel h3{font-family:var(--fh);font-weight:500;font-size:1.7rem;letter-spacing:-.02em;line-height:1.18;color:var(--text);margin-bottom:10px}
.cta-panel h3 em{font-family:var(--fa);font-style:italic;color:var(--indigo-br)}
.cta-panel p{color:var(--muted);font-size:1.05rem;max-width:460px;margin:0 auto 24px}
.cta-panel .btns{justify-content:center}

/* Lesefortschritts-Balken (nur Artikel-Seiten) */
.reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:2000;pointer-events:none;background:transparent}
.reading-progress span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 12px rgba(109,94,245,.55)}

/* Ähnliche Artikel (Block am Artikelende) */
.related{padding:54px 0 70px;background:var(--bg);border-top:1px solid var(--border)}
.related .container{max-width:960px}
.related-title{font-size:1.5rem;margin-bottom:24px;color:var(--text)}