/* =====================================================================
   GustoGang Website (Relaunch 2026)
   Designrichtung: indisea.com (Stone-Canvas, Swiss-Typo, Connector-Linie,
   positionale Motion) mit GustoGang-Marke (Blau #201bde, Gold #e2a34a,
   kursiver Newsreader-Akzent, Wortmarke).
   Aufbau: 1 Fonts · 2 Tokens · 3 Modi · 4 Basis · 5 Layout · 6 Typo ·
   7 Controls · 8 Chrome (Banner, Header, Menü, Cursor, Linie) ·
   9 Komponenten · 10 Formulare · 11 Rechtliches · 12 Footer · 13 Motion
   ===================================================================== */

/* ---------- 1 · Fonts (self-hosted, OFL) ---------- */
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/ibm-plex-sans-var-latin.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("/assets/fonts/newsreader-italic-var-latin.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}

/* ---------- 2 · Tokens ---------- */
:root{
  /* Marke */
  --gg-blue:#201bde; --gg-blue-700:#1a15b8; --gg-blue-800:#160fb0; --gg-blue-900:#0f0a7a;
  --gg-blue-300:#9d99ff; --gg-blue-200:#c9c7fb; --gg-blue-100:#e6e5fc;
  --gg-gold:#e2a34a; --gg-gold-300:#efc584; --gg-gold-100:#f8ead3; --gg-gold-800:#7a5418; --gg-gold-900:#563a0e;
  /* Netzwerk-Akzente (sparsam: Indizes, Linien, Karten) */
  --gg-green:#2f7a3e; --gg-green-300:#86c493; --gg-green-100:#dcefe0; --gg-green-800:#1f5a2c; --gg-green-900:#143d1d;
  --gg-terra:#c2553a; --gg-terra-300:#eb9f8a; --gg-terra-100:#f7e1da; --gg-terra-800:#8a3420;
  /* Neutrale (Stone aus dem Marken-Creme abgeleitet) */
  --gg-stone-50:#fcfbf8; --gg-stone-100:#f2eee7; --gg-stone-200:#e7e2d9; --gg-stone-300:#d8d2c6;
  --gg-stone-400:#b3ada3; --gg-stone-500:#8c877f; --gg-stone-600:#6d6962; --gg-stone-700:#4f4c47;
  --gg-creme:#efe7d9;
  --gg-ink:#15151f; --gg-ink-800:#21212c; --gg-ink-700:#2c2c38; --gg-ink-950:#0d0d16;
  --gg-live:#3f9a52;

  /* Schrift */
  --font-sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;

  --t-hero:clamp(42px,6.6vw,112px);
  --t-display:clamp(40px,5.8vw,92px);
  --t-h2:clamp(34px,4.1vw,62px);
  --t-h3:clamp(21px,1.75vw,28px);
  --t-statement:clamp(25px,2.55vw,40px);
  --t-lead:clamp(18px,1.3vw,21px);
  --t-body:17px;
  --t-small:15px;
  --t-label:12px;

  --lh-display:.94; --lh-heading:1; --lh-snug:1.22; --lh-body:1.5;
  --tr-display:-.034em; --tr-heading:-.03em; --tr-body:-.011em; --tr-caps:.075em;

  /* Raum */
  --gutter:clamp(20px,8.3vw,120px);
  --gap:clamp(16px,1.8vw,28px);
  --sec-pad:clamp(88px,10.5vw,168px);
  --hdr-h:96px;
  --ann-h:0px;

  /* Form */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;

  /* Motion (positional, kein Bounce) */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-std:cubic-bezier(.2,0,0,1);
  --ease-cover:cubic-bezier(.7,0,.2,1);
  --d-fast:150ms; --d-med:250ms; --d-slow:400ms; --d-line:900ms; --d-cover:900ms;
}

/* ---------- 3 · Modi (jeder Block deklariert seinen Modus) ---------- */
:root,[data-theme="light"]{
  --canvas:var(--gg-stone-100); --card:var(--gg-stone-50); --sunken:var(--gg-stone-200);
  --heading:var(--gg-ink); --body:var(--gg-ink); --muted:var(--gg-stone-700); --faint:var(--gg-stone-600);
  --hair:var(--gg-stone-300); --hair-soft:var(--gg-stone-200);
  --accent:var(--gg-blue);
  --hl-bg:var(--gg-gold); --hl-fg:var(--gg-ink);
  --btn-bg:var(--gg-ink); --btn-fg:var(--gg-stone-50); --btn-hover:#2a2a36; --btn-icon:var(--gg-gold);
  --chip-bg:var(--gg-gold-100); --chip-fg:var(--gg-gold-900); --chip-dot:var(--gg-gold-800);
  --logo:var(--gg-blue);
  --line-c:var(--gg-blue);
}
[data-theme="dark"]{
  --canvas:var(--gg-ink); --card:var(--gg-ink-800); --sunken:var(--gg-ink-950);
  --heading:var(--gg-stone-100); --body:var(--gg-stone-100); --muted:#bab6c4; --faint:#908c9c;
  --hair:#363642; --hair-soft:#2a2a35;
  --accent:var(--gg-gold);
  --hl-bg:var(--gg-gold); --hl-fg:var(--gg-ink);
  --btn-bg:var(--gg-stone-50); --btn-fg:var(--gg-ink); --btn-hover:var(--gg-stone-200); --btn-icon:var(--gg-blue);
  --chip-bg:rgba(226,163,74,.14); --chip-fg:var(--gg-gold-300); --chip-dot:var(--gg-gold);
  --logo:var(--gg-creme);
  --line-c:var(--gg-blue-300);
}
[data-mode="blue"]{
  --canvas:var(--gg-blue); --card:var(--gg-stone-50); --sunken:var(--gg-blue-800);
  --heading:var(--gg-stone-50); --body:var(--gg-stone-50); --muted:rgba(252,251,248,.84); --faint:rgba(252,251,248,.7);
  --hair:rgba(252,251,248,.26); --hair-soft:rgba(252,251,248,.16);
  --accent:var(--gg-gold-300);
  --hl-bg:var(--gg-gold); --hl-fg:var(--gg-ink);
  --btn-bg:var(--gg-stone-50); --btn-fg:var(--gg-ink); --btn-hover:var(--gg-stone-200); --btn-icon:var(--gg-blue);
  --chip-bg:rgba(252,251,248,.14); --chip-fg:var(--gg-stone-50); --chip-dot:var(--gg-gold);
  --logo:var(--gg-creme);
  --line-c:var(--gg-creme);
}
/* Karten innerhalb farbiger Blöcke sind wieder hell */
[data-surface="card"]{
  --heading:var(--gg-ink); --body:var(--gg-ink); --muted:var(--gg-stone-700); --faint:var(--gg-stone-600);
  --hair:var(--gg-stone-300); --hair-soft:var(--gg-stone-200); --accent:var(--gg-blue);
  --btn-bg:var(--gg-ink); --btn-fg:var(--gg-stone-50); --btn-hover:#2a2a36; --btn-icon:var(--gg-gold);
  --chip-bg:var(--gg-gold-100); --chip-fg:var(--gg-gold-900); --chip-dot:var(--gg-gold-800);
  --canvas:var(--gg-stone-100); --card:var(--gg-stone-50); --sunken:var(--gg-stone-200);
  color:var(--body);
}
/* Deep-Karten (textreich, satte Fläche, heller Inhalt) */
.deep{--heading:var(--gg-stone-50);--body:var(--gg-stone-50);--muted:rgba(252,251,248,.86);--faint:rgba(252,251,248,.72);--hair:rgba(252,251,248,.24);--accent:var(--gg-gold-300);color:var(--body)}
.deep--blue{background:var(--gg-blue)}
.deep--gold{background:var(--gg-gold-800)}
.deep--green{background:var(--gg-green-800)}
.deep--ink{background:var(--gg-ink)}
.deep--terra{background:var(--gg-terra-800)}

/* ---------- 4 · Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--canvas);color:var(--body);font-family:var(--font-sans);font-size:var(--t-body);line-height:var(--lh-body);letter-spacing:var(--tr-body);font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
strong,b{font-weight:600}
::selection{background:var(--gg-gold);color:var(--gg-ink)}
:focus-visible{outline:3px solid var(--gg-blue-300);outline-offset:3px;border-radius:4px}
[data-theme="light"] :focus-visible,:root :focus-visible{outline-color:var(--gg-blue)}
.skip{position:absolute;left:16px;top:-80px;z-index:200;background:var(--gg-ink);color:var(--gg-stone-50);padding:12px 18px;border-radius:var(--r-pill);font-weight:500;transition:top .2s}
.skip:focus{top:16px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main{position:relative;display:block;overflow-x:clip}

/* ---------- 5 · Layout ---------- */
.wrap{position:relative;z-index:2;width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-block:var(--sec-pad);background:var(--canvas);color:var(--body)}
.sec--tight{padding-block:calc(var(--sec-pad)*.62)}
.sec--flush-top{padding-top:0}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.stack>*+*{margin-top:24px}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:24px;margin-bottom:clamp(48px,5.5vw,88px)}
.sec-head>.label{grid-column:1/-1}
.sec-head>h2{grid-column:1/span 9}
.sec-head>.lead{grid-column:1/span 7}
.sec-head--split>h2{grid-column:1/span 7}
.sec-head--split>.lead{grid-column:8/span 5;align-self:end}
.center{text-align:center}

/* ---------- 6 · Typografie ---------- */
.label{display:flex;align-items:center;gap:.5em;font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--faint);line-height:1.3}
.label>span{color:var(--heading)}
.label--plain{display:block}
h1,.h1{font-size:var(--t-hero);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:600;color:var(--heading);text-wrap:balance}
h2,.h2{font-size:var(--t-h2);line-height:var(--lh-heading);letter-spacing:var(--tr-heading);font-weight:500;color:var(--heading);text-wrap:balance}
.h2--display{font-size:var(--t-display);font-weight:600;line-height:var(--lh-display);letter-spacing:var(--tr-display)}
h3,.h3{font-size:var(--t-h3);line-height:1.12;letter-spacing:-.022em;font-weight:500;color:var(--heading)}
.h4{font-size:19px;line-height:1.25;letter-spacing:-.015em;font-weight:500;color:var(--heading)}
h1,h2,.h1,.h2{overflow-wrap:break-word;hyphens:manual}
h1 em,h2 em,h3 em,.h1 em,.h2 em,.statement em,.ftr__claim em,.legal__head h2 em{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.012em;color:var(--accent);font-size:1.05em;line-height:0}
h3 em{font-size:1.04em}
.lead{font-size:var(--t-lead);line-height:1.45;color:var(--muted);max-width:42em;text-wrap:pretty}
.statement{font-size:var(--t-statement);line-height:1.24;letter-spacing:-.024em;font-weight:500;color:var(--heading);text-wrap:pretty}
.statement+.statement{margin-top:.8em}
.body{color:var(--muted);text-wrap:pretty}
.small{font-size:var(--t-small);line-height:1.5}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.fine{font-size:13px;line-height:1.5;color:var(--faint)}
.mono{font-family:var(--font-mono);font-weight:500;letter-spacing:0}
/* Markierung (Indisea-Highlight in Gold) */
.hl{background:var(--hl-bg);color:var(--hl-fg);border-radius:6px;padding:0 .14em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl em,h1 .hl em{color:inherit}
h1 .hl,h2 .hl{border-radius:.09em;padding:0 .1em}
/* wechselnde Hero-Markierung */
.cyc{border-radius:.09em;padding:0 .08em;margin:0 -.04em;transition:background-color var(--d-slow) var(--ease-std),color var(--d-slow) var(--ease-std);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cyc.is-on{background:var(--gg-gold);color:var(--gg-ink)}
.cyc.is-on em{color:var(--gg-ink)}
/* Rotierendes Wort (/gastronomie) */
.rot{display:inline-block;position:relative;vertical-align:bottom;background:var(--gg-gold);color:var(--gg-ink);border-radius:.09em;padding:0 .12em;overflow:hidden;transition:width 600ms var(--ease-out);white-space:nowrap;line-height:1.04;margin-top:.04em}
.rot__w{display:block;font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:-.012em;font-size:1.04em;white-space:nowrap;transition:transform 600ms var(--ease-out)}
.rot__w.is-out{position:absolute;left:.12em;top:0;transform:translateY(-110%)}
.rot__w.is-in{transform:translateY(110%);transition:none}
.rot__w.is-in.go{transform:translateY(0);transition:transform 600ms var(--ease-out)}

/* ---------- 7 · Controls ---------- */
.btn{--h:56px;display:inline-flex;align-items:center;justify-content:center;gap:14px;height:var(--h);padding:0 26px 0 30px;border-radius:var(--r-pill);background:var(--btn-bg);color:var(--btn-fg);font-size:16px;font-weight:500;letter-spacing:-.008em;line-height:1;white-space:nowrap;transition:background-color var(--d-fast) var(--ease-std),transform var(--d-fast) var(--ease-std),box-shadow var(--d-fast) var(--ease-std);position:relative;isolation:isolate}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:scale(.98)}
.btn svg{width:20px;height:20px;flex:none;color:var(--btn-icon);transition:transform var(--d-med) var(--ease-out)}
.btn:hover svg{transform:translateX(4px)}
.btn--ghost{background:transparent;color:var(--heading);box-shadow:inset 0 0 0 1.5px var(--heading)}
.btn--ghost:hover{background:color-mix(in srgb,var(--heading) 8%,transparent)}
.btn--ghost svg{color:currentColor}
.btn--gold{background:var(--gg-gold);color:var(--gg-ink)}
.btn--gold:hover{background:var(--gg-gold-300)}
.btn--gold svg{color:var(--gg-ink)}
.btn--sm{--h:46px;padding:0 20px 0 22px;font-size:15px;gap:10px}
.btn--sm svg{width:18px;height:18px}
.btn--block{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--heading);padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;transition:background-size var(--d-med) var(--ease-out)}
.tlink:hover{background-size:0 1.5px;background-position:100% 100%}
.tlink svg{width:18px;height:18px;transition:transform var(--d-med) var(--ease-out)}
.tlink:hover svg{transform:translateX(3px)}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:7px 16px 7px 14px;border-radius:var(--r-pill);background:var(--chip-bg);color:var(--chip-fg);font-size:14px;font-weight:500;letter-spacing:-.005em;line-height:1.25}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--chip-dot);flex:none}
.chip--nodot::before{display:none}
.chip--blue{--chip-bg:var(--gg-blue-100);--chip-fg:var(--gg-blue-900);--chip-dot:var(--gg-blue)}
.chip--green{--chip-bg:var(--gg-green-100);--chip-fg:var(--gg-green-900);--chip-dot:var(--gg-green)}
.chip--sm{white-space:nowrap;min-height:28px;padding:4px 12px 4px 10px;font-size:12px;font-family:var(--font-mono);letter-spacing:var(--tr-caps);text-transform:uppercase;gap:8px}
.chip--sm::before{width:6px;height:6px}
.trust{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:8px}
.trust svg{width:16px;height:16px;color:var(--accent);flex:none}
.ico{width:24px;height:24px;flex:none}
.ibox{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--heading);color:var(--heading)}
.ibox svg{width:22px;height:22px}
.num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--heading);font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--heading)}

/* ---------- 8 · Chrome ---------- */
/* 8.1 Aktionsbanner */
.offer{position:relative;z-index:60;background:var(--gg-ink);color:var(--gg-stone-100)}
.offer__in{display:flex;align-items:center;justify-content:center;gap:14px;min-height:46px;padding:8px 56px 8px var(--gutter);font-size:14px;line-height:1.35;text-align:center;flex-wrap:wrap}
.offer__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-caps);text-transform:uppercase;background:var(--gg-gold);color:var(--gg-ink);border-radius:var(--r-pill);padding:4px 10px;white-space:nowrap}
.offer__txt strong{color:var(--gg-gold-300);font-weight:600}
.offer__cta{display:inline-flex;align-items:center;gap:6px;font-weight:500;white-space:nowrap;text-decoration:underline;text-decoration-color:rgba(242,238,231,.4);text-underline-offset:4px}
.offer__cta svg{width:16px;height:16px;color:var(--gg-gold)}
.offer__in:hover .offer__cta{text-decoration-color:var(--gg-gold)}
.offer__x{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--gg-stone-300)}
.offer__x:hover{color:#fff;background:rgba(255,255,255,.08)}
.offer__x svg{width:16px;height:16px}
.offer__short{display:none}
.offer[hidden]{display:none}

/* 8.2 Header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:115;pointer-events:none;transform:translateY(var(--hdr-shift,0px))}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px;margin-inline:auto;height:var(--hdr-h);padding-inline:var(--gutter);padding-right:calc(var(--gutter) + 76px)}
.hdr__logo,.hdr__nav{pointer-events:auto;transition:transform 520ms var(--ease-out),opacity 320ms var(--ease-std)}
.hdr.is-tucked .hdr__logo,.hdr.is-tucked .hdr__nav,.is-menu-open .hdr__nav{transform:translateY(-150%);opacity:0;pointer-events:none}
.logo{display:block;width:var(--logo-w,158px);aspect-ratio:1200/263.04;background:var(--logo);-webkit-mask:url("/assets/brand/gustogang-logo-blue.svg") center/contain no-repeat;mask:url("/assets/brand/gustogang-logo-blue.svg") center/contain no-repeat;transition:background-color var(--d-med) var(--ease-std)}
.hdr__nav{display:flex;align-items:center;gap:8px}
.hdr__link{display:flex;flex-direction:column;gap:2px;padding:10px 18px;border-radius:var(--r-lg);line-height:1.15;color:var(--heading);transition:background-color var(--d-fast) var(--ease-std)}
.hdr__link strong{font-size:15px;font-weight:600;letter-spacing:-.01em}
.hdr__link span{font-size:12.5px;color:var(--muted)}
.hdr__link:hover{background:color-mix(in srgb,var(--heading) 7%,transparent)}
.hdr__link[aria-current="page"] strong{color:var(--accent)}
.menu-btn{position:absolute;z-index:2;top:calc(var(--hdr-h)/2 - 26px);right:max(var(--gutter),calc((100% - 1440px)/2 + var(--gutter)));width:52px;height:52px;border-radius:50%;background:var(--btn-surface,var(--canvas));color:var(--heading);box-shadow:inset 0 0 0 1.5px currentColor;display:grid;place-items:center;pointer-events:auto;transition:background-color var(--d-med) var(--ease-std),color var(--d-med) var(--ease-std),transform var(--d-fast) var(--ease-std)}
.menu-btn:active{transform:scale(.95)}
.menu-btn__bar{position:absolute;left:50%;top:50%;width:18px;height:1.75px;margin:-1px 0 0 -9px;background:currentColor;border-radius:2px;transition:transform 500ms var(--ease-out)}
.menu-btn__bar:nth-child(1){transform:translateY(-4px)}
.menu-btn__bar:nth-child(2){transform:translateY(4px)}
.is-menu-open .menu-btn__bar:nth-child(1){transform:rotate(45deg)}
.is-menu-open .menu-btn__bar:nth-child(2){transform:rotate(-45deg)}

/* 8.3 Menü-Overlay */
.menu{position:fixed;inset:0;z-index:110;visibility:hidden;transform:translateY(-100%);transition:transform var(--d-cover) var(--ease-out),visibility 0s linear var(--d-cover)}
.is-menu-open .menu{visibility:visible;transform:none;transition:transform var(--d-cover) var(--ease-out),visibility 0s}
.menu__panel{height:100%;display:flex;flex-direction:column;background:var(--canvas);color:var(--body);overflow-y:auto;padding-top:var(--hdr-h)}
.menu__top{display:flex;align-items:center;height:var(--hdr-h);padding-inline:var(--gutter);max-width:1440px;width:100%;margin-inline:auto;flex:none}
.menu__top .logo{--logo:var(--gg-creme)}
.menu__main{flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);min-height:0}
.menu__list{display:flex;flex-direction:column;justify-content:center;gap:clamp(4px,1vh,12px);padding:24px var(--gutter) 40px}
.menu__item{position:relative;display:flex;align-items:baseline;gap:18px;width:max-content;max-width:100%;color:var(--heading);transition:color var(--d-med) var(--ease-std),opacity 500ms ease,transform 500ms var(--ease-out);opacity:0;transform:translateY(28px)}
.is-menu-open .menu__item{opacity:1;transform:none}
.menu__idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;transform:translateY(-.4em);color:var(--idx)}
.menu__txt{display:block;font-size:clamp(40px,4.7vw,74px);line-height:1.04;letter-spacing:var(--tr-display);font-weight:600;white-space:nowrap}
.menu__sub{display:none;font-size:14px;color:var(--muted);margin-top:2px}
.menu__item[aria-current="page"] .menu__txt::after{content:"";display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--idx);margin-left:.18em;vertical-align:.12em}
.menu__list.is-hovering .menu__item{color:var(--faint)}
.menu__list.is-hovering .menu__item.is-active{color:var(--heading)}
.menu__field{position:relative;background:var(--card);transition:background-color 450ms var(--ease-std);display:flex;align-items:flex-end;padding:clamp(32px,4vw,64px);overflow:hidden}
.menu__fieldtxt{font-size:clamp(28px,2.8vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:500;color:var(--gg-ink);max-width:12em;transform:translateY(110%);transition:transform 600ms var(--ease-out)}
.menu__field.is-filled .menu__fieldtxt{transform:none}
.menu__field[data-on="blue"] .menu__fieldtxt,.menu__field[data-on="green"] .menu__fieldtxt,.menu__field[data-on="terra"] .menu__fieldtxt{color:var(--gg-stone-50)}
.menu__fieldtxt svg{display:inline-block;width:.8em;height:.8em;vertical-align:-.06em;margin-left:.15em}
.menu__foot{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:28px var(--gutter) 32px;border-top:1px solid var(--hair);max-width:1440px;width:100%;margin-inline:auto}
.menu__foot .label{margin-bottom:8px}
.menu__foot a:not(.btn),.menu__foot p,.menu__foot button{font-size:15px;color:var(--heading)}
.menu__foot a:not(.btn):hover,.menu__foot button:hover{color:var(--gg-gold)}
.menu__cta{justify-self:end;align-self:center}

/* 8.4 Cursor (nur feine Zeiger) */
.cursor{position:fixed;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--gg-ink);pointer-events:none;z-index:2147483000;transform:translate3d(-100px,-100px,0);opacity:0;transition:opacity 120ms linear,background-color 120ms linear,width 160ms var(--ease-std),height 160ms var(--ease-std),margin 160ms var(--ease-std);will-change:transform}
.cursor.is-big{width:44px;height:44px;margin:-13px 0 0 -13px}
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor input,.has-cursor textarea,.has-cursor select,.has-cursor [contenteditable]{cursor:auto!important}
.has-cursor input[type="checkbox"],.has-cursor input[type="submit"]{cursor:none!important}

/* 8.5 Connector-Linie */
.spine{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.spine path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.spine__start{transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:transform 600ms var(--ease-out)}
.spine__start.is-on{transform:none}
.spine__end{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform 500ms var(--ease-out)}
.spine__end.is-on{transform:none}
/* alles, was über der Linie liegen soll */
.lift{position:relative;z-index:3}

/* ---------- 9 · Komponenten ---------- */
/* 9.1 Hero */
.hero{position:relative;padding-top:calc(var(--hdr-h) + clamp(40px,8vh,96px));padding-bottom:0;background:var(--canvas)}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);min-height:calc(100svh - var(--hdr-h) - var(--ann-h) - clamp(40px,8vh,96px));align-content:space-between;row-gap:40px;padding-bottom:clamp(40px,6vh,72px)}
.hero__text{grid-column:1/span 9;display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px)}
.hero__text .label{margin-bottom:clamp(4px,1vw,16px)}
.hero h1{max-width:none}
.hero .lead{max-width:36em}
.hero__aside{grid-column:10/span 3;position:relative}
.hero__foot{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.scroll-hint{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--heading)}
.scroll-hint svg{width:14px;height:14px;animation:nudge 2.4s var(--ease-std) infinite}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.hero__media{position:relative;margin-top:clamp(8px,2vw,24px)}
.media{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--sunken);isolation:isolate}
.media img{width:100%;height:100%;object-fit:cover}
.media--hero{aspect-ratio:2.35/1;max-height:78vh}
.media--hero img{height:116%;transform:translate3d(0,var(--par,0px),0);will-change:transform;margin-top:-8%}
.media__tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(32,27,222,.0) 40%,rgba(15,10,122,.38));mix-blend-mode:multiply;pointer-events:none}
.live-card{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:4;width:min(300px,calc(100% - 32px));padding:20px 22px 18px;border-radius:var(--r-lg);background:var(--gg-stone-50);color:var(--gg-ink)}
.live-card__top{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--gg-stone-700)}
.live-dot{display:inline-flex;align-items:center;gap:6px;color:var(--gg-green)}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gg-live);box-shadow:0 0 0 0 rgba(63,154,82,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,154,82,.45)}70%{box-shadow:0 0 0 8px rgba(63,154,82,0)}100%{box-shadow:0 0 0 0 rgba(63,154,82,0)}}
.live-card__vals{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 10px}
.live-card__vals b{display:block;font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1}
.live-card__vals span{font-size:12px;color:var(--gg-stone-700)}
.live-card svg{width:100%;height:46px}
.live-card .spark{fill:none;stroke:var(--gg-blue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.live-card .spark-fill{fill:url(#sparkfill);stroke:none}

/* 9.2 Laufband (Marquee) */
.marquee{position:relative;overflow:hidden;padding-block:6px}
.marquee+.marquee{margin-top:16px}
.marquee__row{display:flex;gap:16px;width:max-content;will-change:transform}
.tile{position:relative;display:flex;align-items:center;gap:14px;flex:none;min-width:236px;height:104px;padding:0 26px;border-radius:var(--r-lg);background:var(--card);color:var(--heading);transition:opacity var(--d-med) var(--ease-std)}
.tile svg{width:26px;height:26px;color:var(--gg-blue);flex:none}
.tile__name{font-size:18px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.tile__cap{position:absolute;left:26px;bottom:12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--faint);transform:translateY(8px);opacity:0;transition:transform var(--d-med) var(--ease-out),opacity var(--d-med)}
.tile:hover .tile__cap{transform:none;opacity:1}
.marquee-wrap.is-hover .tile{opacity:.32}
.marquee-wrap.is-hover .tile:hover{opacity:1}

/* 9.3 Statement / Rail-Layout */
.rail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:24px}
.rail>.label{grid-column:1/span 3;align-self:start;padding-top:.6em}
.rail>.rail__body{grid-column:5/span 8}

/* 9.4 Karten */
.card{position:relative;z-index:3;background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,2.4vw,36px);color:var(--body)}
.card h3{margin-bottom:12px}
.card p{color:var(--muted)}
.cards{display:grid;gap:var(--gap)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ncard{display:flex;flex-direction:column;min-height:clamp(280px,24vw,360px)}
.ncard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ncard__body{margin-top:auto;padding-top:40px}
.ncard h3{font-size:clamp(23px,2vw,30px);letter-spacing:-.028em;line-height:1.08;margin-bottom:14px}
.ncard p{font-size:15.5px}
/* Wege-Karten (Startseite) */
.way{display:flex;flex-direction:column;justify-content:space-between;min-height:clamp(380px,34vw,500px);padding:clamp(28px,3vw,48px);border-radius:var(--r-xl);position:relative;z-index:3;overflow:hidden;transition:transform 500ms var(--ease-out)}
.way:hover{transform:translateY(-6px)}
.way .ibox{box-shadow:inset 0 0 0 1.5px currentColor;color:var(--heading)}
.way h3{font-size:clamp(28px,2.8vw,44px);line-height:1.02;letter-spacing:-.032em;font-weight:500;margin:28px 0 16px}
.way p{color:var(--muted);font-size:clamp(16px,1.15vw,18px);max-width:30em}
.way__go{display:inline-flex;align-items:center;gap:10px;margin-top:32px;font-weight:500;color:var(--heading)}
.way__go span{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--gg-stone-50);color:var(--gg-ink);transition:transform var(--d-med) var(--ease-out)}
.way__go svg{width:20px;height:20px}
.way:hover .way__go span{transform:translateX(6px)}
/* Gründe-/Deep-Karten (3er) */
.rcard{padding:clamp(24px,2.4vw,34px);border-radius:var(--r-lg);position:relative;z-index:3;min-height:260px;display:flex;flex-direction:column}
.rcard .label{color:var(--faint);margin-bottom:18px}
.rcard .label span{color:var(--heading)}
.rcard h3{font-size:clamp(22px,1.9vw,28px);line-height:1.08;letter-spacing:-.026em;margin-bottom:14px}
.rcard p{color:var(--muted);font-size:15.5px}
.rcard__ico{width:30px;height:30px;color:var(--gg-gold-300);margin-bottom:22px}

/* 9.5 Vergleich (Kein Baukasten) */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.vs__card{position:relative;z-index:3;border-radius:var(--r-xl);padding:clamp(28px,3vw,48px)}
.vs__card--old{background:var(--card)}
.vs__card--new{background:var(--gg-ink)}
.vs__card .label{margin-bottom:28px}
.vs__list li{display:grid;grid-template-columns:28px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--hair);font-size:16.5px;line-height:1.45;color:var(--muted)}
.vs__list li:first-child{border-top:0;padding-top:0}
.vs__mark{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;margin-top:1px}
.vs__mark svg{width:14px;height:14px}
.vs__card--old .vs__mark{background:var(--gg-stone-200);color:var(--gg-stone-700)}
.vs__card--new .vs__mark{background:var(--gg-gold);color:var(--gg-ink)}
.vs__card--new li{color:var(--muted)}
.vs__card--new li strong{color:var(--heading)}

/* 9.6 Kennzahlen */
.stat{display:flex;flex-direction:column;gap:10px}
.stat__val{font-size:clamp(52px,7.2vw,116px);font-weight:600;letter-spacing:-.045em;line-height:.9;color:var(--heading);font-variant-numeric:tabular-nums}
.stat__val--accent{color:var(--accent)}
.stat__lbl{font-size:15px;color:var(--muted);max-width:22em}
.stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.scard{position:relative;z-index:3;padding:clamp(24px,2.4vw,36px);border-radius:var(--r-lg);background:var(--card)}
.scard .stat__val{font-size:clamp(44px,4.6vw,72px)}
.scard .label{margin-top:18px}
.big-figure{display:flex;align-items:baseline;gap:.18em;font-size:clamp(76px,13vw,208px);line-height:.86;letter-spacing:-.055em;font-weight:600;color:var(--heading);font-variant-numeric:tabular-nums}
.big-figure small{font-size:.42em;letter-spacing:-.03em;color:var(--accent);font-weight:500}

/* 9.7 Diagramm (Kreislauf) */
.diagram{position:relative;z-index:3;background:var(--card);border-radius:var(--r-xl);padding:clamp(20px,2.6vw,40px)}
.diagram svg{width:100%;height:auto;overflow:visible}
.diagram .d-line{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.diagram .d-node{fill:var(--gg-stone-50);stroke-width:4}
.diagram .d-lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;fill:var(--gg-stone-700)}
.diagram .d-name{font-family:var(--font-sans);font-size:19px;font-weight:600;letter-spacing:-.02em;fill:var(--gg-ink)}
.diagram .d-sub{font-family:var(--font-sans);font-size:14px;fill:var(--gg-stone-700)}
.diagram .d-ico{fill:none;stroke:var(--gg-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.diagram__m{display:none}
.diagram__pill{display:flex;justify-content:center;margin-top:12px}
[data-draw] .d-line{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1200ms var(--ease-out)}
[data-draw].is-drawn .d-line{stroke-dashoffset:0}

/* 9.8 Checkliste (Ist Ihnen wichtig …) */
.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.check{position:relative;z-index:3;display:flex;flex-direction:column;gap:22px;padding:clamp(22px,2.2vw,32px);border-radius:var(--r-lg);background:var(--card);min-height:210px}
.check__box{width:34px;height:34px;border-radius:9px;box-shadow:inset 0 0 0 1.75px var(--gg-stone-400);display:grid;place-items:center;color:var(--gg-ink);transition:background-color 300ms var(--ease-std),box-shadow 300ms var(--ease-std)}
.check__box svg{width:18px;height:18px;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset 420ms var(--ease-out) 120ms}
.check.is-checked .check__box{background:var(--gg-gold);box-shadow:inset 0 0 0 1.75px var(--gg-gold)}
.check.is-checked .check__box svg{stroke-dashoffset:0}
.check p{font-size:clamp(18px,1.4vw,21px);line-height:1.3;letter-spacing:-.018em;font-weight:500;color:var(--heading)}
.answer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:var(--gap);padding:clamp(24px,2.6vw,40px);border-radius:var(--r-xl);background:var(--gg-ink);position:relative;z-index:3}
.answer__txt{display:flex;align-items:center;gap:16px;font-size:clamp(24px,2.6vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.05;color:var(--gg-stone-50)}
.answer__txt em{font-family:var(--font-serif);font-weight:400;color:var(--gg-gold);font-size:1.08em}
.answer__tick{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--gg-gold);color:var(--gg-ink);flex:none}
.answer__tick svg{width:26px;height:26px}

/* 9.9 Beweis / Cases */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.case{position:relative;z-index:3;display:flex;flex-direction:column;border-radius:var(--r-xl);background:var(--card);overflow:hidden}
.case__shot{padding:clamp(18px,2vw,28px) clamp(18px,2vw,28px) 0}
.browser{border-radius:12px 12px 0 0;overflow:hidden;background:var(--gg-stone-100);color:var(--gg-ink)}
.browser__bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:var(--gg-stone-200)}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:var(--gg-stone-400)}
.browser__url{margin-left:10px;flex:1;height:18px;border-radius:6px;background:var(--gg-stone-50);font-family:var(--font-mono);font-size:10px;line-height:18px;padding-left:10px;color:var(--gg-stone-600);white-space:nowrap;overflow:hidden}
.browser__page{position:relative;padding:28px 26px 30px;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;background:var(--bp-bg,#1d1b18);color:var(--bp-fg,#f3ede2)}
.browser__nav{position:absolute;top:16px;left:26px;right:26px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.browser__nav b{font-weight:600;letter-spacing:.02em;text-transform:none;font-size:14px}
.browser__nav span{display:flex;gap:14px}
.browser__h{font-size:clamp(20px,1.9vw,27px);line-height:1.08;letter-spacing:-.02em;font-weight:600;max-width:15em}
.browser__btn{align-self:flex-start;font-size:11px;font-weight:600;padding:8px 14px;border-radius:999px;background:var(--bp-acc,#e2a34a);color:#111}
.case__body{padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;gap:20px;flex:1}
.case__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.case__head h3{font-size:22px}
.case__nums{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px 0;border-block:1px solid var(--hair)}
.case__nums b{display:block;font-size:clamp(34px,3.2vw,48px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--heading);font-variant-numeric:tabular-nums}
.case__nums span{font-size:13.5px;color:var(--muted)}
.stars{display:flex;gap:3px;color:var(--gg-gold)}
.stars svg{width:17px;height:17px;fill:currentColor;stroke:none}
.case blockquote{font-size:17px;line-height:1.45;color:var(--heading);letter-spacing:-.012em}

/* 9.10 Preise */
.offer-card{position:relative;z-index:3;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(20px,3vw,48px);padding:clamp(24px,3vw,40px);border-radius:var(--r-xl);background:var(--gg-ink);color:var(--gg-stone-100);margin-bottom:var(--gap);overflow:hidden}
.offer-card__badge{display:grid;place-items:center;width:clamp(96px,9vw,128px);aspect-ratio:1;border-radius:50%;background:var(--gg-gold);color:var(--gg-ink);text-align:center;line-height:1;font-weight:600;letter-spacing:-.03em;transform:rotate(-8deg)}
.offer-card__badge b{display:block;font-size:clamp(28px,2.6vw,38px)}
.offer-card__badge span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.offer-card h3{font-size:clamp(24px,2.4vw,36px);line-height:1.05;letter-spacing:-.03em;color:var(--gg-stone-50);margin:10px 0 10px}
.offer-card h3 em{font-family:var(--font-serif);font-weight:400;color:var(--gg-gold)}
.offer-card p{color:#c9c5d2;max-width:40em}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.price{position:relative;z-index:3;display:flex;flex-direction:column;border-radius:var(--r-xl);padding:clamp(26px,2.6vw,40px);background:var(--card);color:var(--body)}
.price--blue{background:var(--gg-blue)}
.price--ink{background:var(--gg-ink)}
.price--gold{box-shadow:inset 0 0 0 2px var(--gg-gold)}
.price__top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}
.price__name{font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--heading)}
.price__badge{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:var(--gg-gold);color:var(--gg-ink);white-space:nowrap}
.price__desc{color:var(--muted);font-size:15.5px;min-height:3em}
.price__amt{display:flex;align-items:baseline;gap:8px;margin:26px 0 4px;color:var(--heading)}
.price__amt b{font-size:clamp(52px,5vw,76px);font-weight:600;letter-spacing:-.05em;line-height:.9}
.price__amt span{font-size:16px;color:var(--muted)}
.price__sub{font-size:14px;color:var(--muted)}
.price__list{margin:26px 0 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.price__list li{display:grid;grid-template-columns:20px 1fr;gap:12px;font-size:15.5px;line-height:1.4;color:var(--body)}
.price__list svg{width:18px;height:18px;margin-top:2px;color:var(--accent)}
.price--blue .price__list svg,.price--ink .price__list svg{color:var(--gg-gold)}
.price__foot{font-size:13px;color:var(--faint);padding-top:16px;border-top:1px solid var(--hair);margin-top:auto}
.price .btn{margin-top:20px}
.price__note{margin-top:28px;font-size:15px;color:var(--muted);max-width:56em}
.price__day{font-family:var(--font-mono);font-size:12.5px;color:var(--faint);letter-spacing:.02em}
.custom-band{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 40px;margin-top:var(--gap);padding:clamp(24px,2.6vw,36px);border-radius:var(--r-xl);border:1.5px dashed var(--gg-stone-400);background:color-mix(in srgb,var(--card) 55%,transparent)}
.custom-band h3{margin-bottom:8px}
.custom-band p{color:var(--muted);max-width:44em}

/* 9.11 Tabellen */
.tbl-wrap{position:relative;z-index:3;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-xl);background:var(--card)}
.tbl{width:100%;min-width:860px;border-collapse:collapse;font-size:15px;line-height:1.45}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:18px 22px;border-top:1px solid var(--hair)}
.tbl thead th{border-top:0;background:var(--gg-ink);color:var(--gg-stone-100);font-family:var(--font-mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;padding-block:20px}
.tbl thead th:first-child{border-top-left-radius:var(--r-xl)}
.tbl thead th:last-child{border-top-right-radius:var(--r-xl)}
.tbl tbody th{font-weight:500;color:var(--heading);width:22%}
.tbl td{color:var(--muted)}
.tbl .is-pro{background:color-mix(in srgb,var(--gg-blue) 6%,transparent)}
.tbl thead .is-pro{background:var(--gg-blue)}
.tbl .yes{display:inline-flex;align-items:flex-start;gap:8px;color:var(--heading)}
.tbl .yes svg{width:16px;height:16px;color:var(--gg-blue);flex:none;margin-top:3px}
.tbl .no{color:var(--gg-stone-400)}
.tbl .gold{color:var(--gg-gold-800);font-weight:600}
.tbl-note{margin-top:16px}
.tbl--channels{min-width:900px}
.tbl--channels tbody th{width:16%;font-size:17px}
.tbl--channels td:nth-child(3){color:var(--heading)}
.tbl--channels thead th:nth-child(3){background:var(--gg-blue)}
.tbl--channels td:nth-child(3) .yes{color:var(--heading)}

/* 9.12 Vorher/Nachher */
.ba{position:relative;z-index:3;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;background:var(--sunken);touch-action:pan-y;user-select:none;-webkit-user-select:none;--pos:50%}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__after{clip-path:inset(0 0 0 var(--pos))}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--gg-stone-50);pointer-events:none}
.ba__handle{position:absolute;top:50%;left:var(--pos);width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--gg-stone-50);color:var(--gg-ink);display:grid;place-items:center;box-shadow:none;transition:transform var(--d-fast) var(--ease-std)}
.ba__handle svg{width:28px;height:28px}
.ba:active .ba__handle{transform:scale(.94)}
.ba__tag{position:absolute;top:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-caps);text-transform:uppercase;padding:7px 12px;border-radius:999px;pointer-events:none}
.ba__tag--l{left:18px;background:rgba(21,21,31,.72);color:var(--gg-stone-100)}
.ba__tag--r{right:18px;background:var(--gg-gold);color:var(--gg-ink)}
.ba input[type="range"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.points{display:grid;gap:0}
.point{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--hair)}
.point:first-child{border-top:0;padding-top:0}
.point h3{font-size:20px;margin-bottom:6px}
.point p{color:var(--muted);font-size:15.5px}
.point .ibox{width:48px;height:48px;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--hair)}

/* 9.13 Faux-KI-Chat */
.chat{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr);border-radius:var(--r-xl);background:var(--gg-ink);color:var(--gg-stone-100);overflow:hidden}
.chat__head{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid #2d2d39}
.chat__av{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--gg-blue);font-family:var(--font-serif);font-style:italic;font-size:24px;color:var(--gg-stone-50)}
.chat__who b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.chat__who span{font-size:12.5px;color:#a19dad}
.chat__on{margin-left:auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#8fd19c}
.chat__on::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gg-live);margin-right:7px;vertical-align:1px}
.chat__log{height:clamp(320px,44vh,420px);overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth;overscroll-behavior:contain}
.msg{max-width:82%;padding:13px 17px;border-radius:18px;font-size:15.5px;line-height:1.48;animation:rise 420ms var(--ease-out) both}
.msg--bot{background:#262632;border-bottom-left-radius:6px;align-self:flex-start}
.msg--me{background:var(--gg-blue);border-bottom-right-radius:6px;align-self:flex-end;color:var(--gg-stone-50)}
.msg--typing{display:inline-flex;gap:5px;align-items:center;padding:16px 18px}
.msg--typing i{width:7px;height:7px;border-radius:50%;background:#8e8a9a;animation:blink 1.1s infinite}
.msg--typing i:nth-child(2){animation-delay:.18s}
.msg--typing i:nth-child(3){animation-delay:.36s}
.msg--typing span{font-size:13px;color:#a19dad;margin-left:6px}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes rise{from{transform:translateY(12px)}to{transform:none}}
.chat__chips{display:flex;flex-wrap:wrap;gap:8px;padding:18px 24px 22px;border-top:1px solid #2d2d39;background:#191923}
.chat__hint{width:100%;font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#8e8a9a;margin-bottom:4px}
.qchip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#262632;color:var(--gg-stone-100);font-size:14px;line-height:1.25;text-align:left;transition:background-color var(--d-fast) var(--ease-std),opacity var(--d-fast)}
.qchip svg{width:13px;height:13px;color:var(--gg-gold);flex:none}
.qchip:hover{background:#30303e}
.qchip[aria-disabled="true"]{opacity:.42;pointer-events:none}
.qchip.is-asked{opacity:.5}
.faq-static{margin-top:24px}
.faq-static summary{cursor:pointer;color:var(--muted);font-size:14px}

/* 9.14 Trichter (LED-Realitäts-Check) */
.funnel{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:stretch}
.funnel__steps{display:flex;flex-direction:column;gap:10px}
.fstep{position:relative;padding:20px 24px;border-radius:var(--r-lg);background:var(--gg-ink-800);transform:translateX(-24px);opacity:0;transition:transform 700ms var(--ease-out),opacity 500ms ease}
.fstep.is-in{transform:none;opacity:1}
.fstep:nth-child(1){width:100%}
.fstep:nth-child(2){width:88%}
.fstep:nth-child(3){width:76%}
.fstep:nth-child(4){width:64%;background:var(--gg-gold);color:var(--gg-ink)}
.fstep b{display:block;font-size:clamp(18px,1.6vw,23px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.fstep span{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.fstep:nth-child(4) b{font-size:clamp(22px,2.2vw,32px)}
.fstep:nth-child(4) span{color:var(--gg-gold-900)}
.qbranch{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding-left:clamp(16px,2vw,32px)}
.qbranch__ask{font-size:16px;color:var(--muted);max-width:26em;position:relative}
.qmark{position:relative;display:grid;place-items:center;width:clamp(120px,11vw,168px);aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 4px var(--gg-gold);font-family:var(--font-serif);font-style:italic;font-size:clamp(72px,7vw,112px);color:var(--gg-gold);line-height:1;transform:scale(.6);opacity:0;transition:transform 700ms var(--ease-out) 1300ms,opacity 400ms ease 1300ms}
.qbranch.is-in .qmark{transform:none;opacity:1}
.qmark::before{content:"";position:absolute;right:calc(100% + 4px);top:50%;width:clamp(48px,7vw,120px);height:4px;margin-top:-2px;border-radius:4px;background:var(--gg-gold);transform-origin:right center;transform:scaleX(0);transition:transform 800ms var(--ease-out) 1700ms}
.qbranch.is-in .qmark::before{transform:scaleX(1)}
.price__name .ico{width:18px;height:18px;color:var(--gg-gold-800)}
.qbranch__no{font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-.025em;color:var(--gg-gold);line-height:1.1}
.qbranch__sub{font-size:15px;color:var(--muted);max-width:28em}
.disclaimer{margin-top:22px;font-size:12.5px;color:var(--faint);display:flex;gap:8px;align-items:flex-start}
.disclaimer svg{width:15px;height:15px;flex:none;margin-top:2px}
.contrast{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-top:var(--gap);padding:clamp(28px,3.2vw,52px);border-radius:var(--r-xl);background:var(--gg-blue);color:var(--gg-stone-50)}
.contrast h3{font-size:clamp(24px,2.4vw,36px);letter-spacing:-.03em;color:var(--gg-stone-50);margin-bottom:22px}
.contrast ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px}
.contrast li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:16px;line-height:1.4}
.contrast li svg{width:18px;height:18px;color:var(--gg-gold);margin-top:2px}

/* 9.15 Speisekarten-Beispiel (Partner) */
.menu-demo{position:relative;z-index:3;border-radius:var(--r-xl);background:var(--gg-ink);color:var(--gg-stone-100);padding:clamp(24px,3vw,44px)}
.menu-demo__head{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tr-caps);text-transform:uppercase;color:#a19dad;margin-bottom:24px}
.mrow{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px dashed #34343f}
.mrow i{display:block;height:10px;border-radius:6px;background:#2f2f3b}
.mrow i:first-child{flex:0 0 46%}
.mrow i.fill{flex:1;background:none;border-bottom:1px dotted #3a3a46;height:1px}
.mrow i:last-child{flex:0 0 46px}
.adcard{position:relative;margin-top:22px;padding:20px 22px;border-radius:var(--r-lg);background:var(--gg-stone-50);color:var(--gg-ink);display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:center}
.adcard__tag{position:absolute;top:-10px;right:18px;font-family:var(--font-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;background:var(--gg-gold);color:var(--gg-ink);padding:4px 9px;border-radius:999px}
.adcard__logo{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--gg-ink);color:var(--gg-gold);font-weight:600;font-size:18px;letter-spacing:-.04em}
.adcard b{display:block;font-size:17px;letter-spacing:-.015em}
.adcard span{font-size:14px;color:var(--gg-stone-700)}
.menu-demo__note{margin-top:20px;font-size:13.5px;color:#a19dad}
.checklist{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.checklist li{display:grid;grid-template-columns:26px 1fr;gap:14px;font-size:16.5px;line-height:1.45;color:var(--muted)}
.checklist li strong{color:var(--heading);font-weight:600}
.checklist .vs__mark{background:var(--gg-gold);color:var(--gg-ink)}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:48px;align-items:center}
.split__a{grid-column:1/span 6}
.split__b{grid-column:8/span 5}
.split--wide-b .split__a{grid-column:1/span 5}
.split--wide-b .split__b{grid-column:7/span 6}

/* 9.16 Bänder */
.band{position:relative;z-index:3;display:grid;grid-template-columns:auto 1fr;gap:24px 32px;align-items:center;margin-top:var(--gap);padding:clamp(26px,3vw,44px);border-radius:var(--r-xl);background:var(--gg-ink);color:var(--gg-stone-100)}
.band .ibox{color:var(--gg-gold);box-shadow:inset 0 0 0 1.5px rgba(226,163,74,.5);width:64px;height:64px}
.band .ibox svg{width:28px;height:28px}
.band h3{color:var(--gg-stone-50);margin:12px 0 10px;font-size:clamp(22px,2vw,30px)}
.band p{color:#c2bece;max-width:52em}
.band--blue{background:var(--gg-blue)}

/* 9.17 Schritte (Partner-Test) */
.steps{display:flex;flex-direction:column;gap:0;margin-top:36px}
.step{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--hair)}
.step:first-child{border-top:0}
.step h3{font-size:20px;margin-bottom:6px}
.step p{color:var(--muted);font-size:15.5px}
.payoff{margin-top:28px;font-family:var(--font-serif);font-style:italic;font-size:clamp(22px,2vw,30px);line-height:1.2;color:var(--accent)}

/* 9.18 CTA-Block (Ende jeder Seite) */
.cta{overflow:hidden}
.cta__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:40px;align-items:start}
.cta__text{grid-column:1/span 7;display:flex;flex-direction:column;gap:28px}
.cta__aside{grid-column:8/span 5}
.cta h2{font-size:var(--t-display);font-weight:600;line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.cta .split h2{font-size:var(--t-h2);font-weight:500;line-height:var(--lh-heading);letter-spacing:var(--tr-heading)}
.note-card{position:relative;z-index:3;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:22px 24px;border-radius:var(--r-lg);background:rgba(252,251,248,.1);color:var(--gg-stone-50);max-width:34em}
.note-card svg{width:24px;height:24px;color:var(--gg-gold)}
.note-card p{color:rgba(252,251,248,.9);font-size:15.5px}

/* 9.19 Blog */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.post-card{position:relative;z-index:3;display:flex;flex-direction:column;min-height:420px;padding:clamp(24px,2.4vw,34px);border-radius:var(--r-xl);background:var(--card);transition:transform 500ms var(--ease-out)}
.post-card:hover{transform:translateY(-6px)}
.post-card__cat{margin-bottom:auto}
.post-card h2,.post-card h3{font-size:clamp(23px,2vw,30px);line-height:1.08;letter-spacing:-.028em;font-weight:500;margin:48px 0 14px}
.post-card p{color:var(--muted);font-size:15.5px}
.post-card__meta{display:flex;justify-content:space-between;align-items:center;margin-top:28px;padding-top:18px;border-top:1px solid var(--hair);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.post-card__meta svg{width:18px;height:18px;color:var(--heading);transition:transform var(--d-med) var(--ease-out)}
.post-card:hover .post-card__meta svg{transform:translateX(4px)}
.article{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.article__aside{grid-column:1/span 3;position:relative}
.article__aside .toc{position:sticky;top:120px;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--muted)}
.article__aside .toc a:hover{color:var(--heading)}
.article__body{grid-column:5/span 7}
.prose{font-size:clamp(17px,1.2vw,19px);line-height:1.62;color:var(--body)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(26px,2.4vw,36px);line-height:1.08;margin-top:2em;letter-spacing:-.028em}
.prose h3{font-size:clamp(20px,1.6vw,24px);margin-top:1.6em}
.prose p,.prose li{color:#2b2a33}
.prose ul{display:flex;flex-direction:column;gap:.5em;padding-left:0}
.prose ul li{position:relative;padding-left:1.4em}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:.5em;height:.5em;border-radius:50%;background:var(--gg-gold)}
.prose a{color:var(--gg-blue);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--gg-ink)}
.prose .callout{padding:24px 26px;border-radius:var(--r-lg);background:var(--card)}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{border-top:1px solid var(--hair);padding:12px 10px;text-align:left;vertical-align:top}
.prose thead th{border-top:0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.hero--compact .hero__grid{min-height:0;padding-bottom:clamp(56px,7vw,112px)}
.post-hero{padding-top:calc(var(--hdr-h) + clamp(40px,7vh,88px));padding-bottom:clamp(40px,5vw,72px)}
.post-hero h1{font-size:clamp(40px,5.4vw,84px);max-width:14em}
.post-hero .lead{margin-top:28px}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:28px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* 9.20 Linien-Anker, Reichweite, Flow (mobil), FAQ-Liste */
.spine-anchor{position:absolute;left:50%;top:clamp(8px,5vh,48px);width:1px;height:1px}
.cta__aside{position:relative;align-self:stretch;min-height:160px}
.spine-term{position:absolute;left:50%;top:50%;width:1px;height:1px}
.spine-term--low{top:auto;bottom:clamp(48px,7vw,110px)}
.model-cards{margin-top:var(--gap)}
.reach{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:48px;align-items:end}
.reach__main{grid-column:1/span 7}
.reach__main .lead{margin-top:22px}
.reach__list{grid-column:8/span 5;display:flex;flex-direction:column;gap:24px}
.reach__list li{display:grid;grid-template-columns:1fr auto;row-gap:10px;align-items:baseline}
.reach__lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--faint)}
.reach__list b{font-size:clamp(26px,2.4vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--heading);font-variant-numeric:tabular-nums}
.reach__list i{grid-column:1/-1;height:10px;border-radius:999px;background:var(--hair-soft);position:relative;overflow:hidden}
.reach__list i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--gg-blue-300);border-radius:inherit;transform-origin:left;transform:scaleX(0);transition:transform 1200ms var(--ease-out) .25s}
.reach__list.is-in i::after{transform:scaleX(1)}
.reach__note{grid-column:1/span 7}
.flow{display:none}
.faq-static{margin-top:20px}
.faq-static summary{cursor:pointer;color:var(--muted);font-size:14px;padding:8px 0;list-style:none;display:inline-flex;align-items:center;gap:8px}
.faq-static summary::-webkit-details-marker{display:none}
.faq-static summary::before{content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font-size:15px;line-height:1}
.faq-static[open] summary::before{content:"−"}
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;margin-top:20px}
.faq-item h3{margin-bottom:6px}
.js [data-lines].is-done .ln{overflow:visible}
.rot{font-size:min(1em,calc((100vw - 2 * var(--gutter)) / 7.4))}
.hero .trust{margin-top:4px}
@media (max-width:760px){
  .reach__main,.reach__list,.reach__note{grid-column:1/-1}
  .faq-list{grid-template-columns:minmax(0,1fr)}
  .diagram__d{display:none}
  .flow{display:flex;flex-direction:column;padding:6px 2px 2px}
  .flow li{position:relative;padding:0 0 34px 44px}
  .flow li::before{content:"";position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 3px var(--gg-ink);background:var(--gg-stone-50)}
  .flow li::after{content:"";position:absolute;left:11.5px;top:36px;bottom:6px;width:3px;border-radius:3px;background:var(--c)}
  .flow b{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;line-height:30px}
  .flow span{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--gg-stone-700);margin-top:6px}
  .flow .flow__back{padding:0}
  .flow .flow__back::before,.flow .flow__back::after{display:none}
  .flow .flow__back .chip{font-family:var(--font-sans);text-transform:none;letter-spacing:-.005em;font-size:14px;color:var(--gg-gold-900);margin:0}
}

/* ---------- 10 · Formulare ---------- */
.form-card{position:relative;z-index:3;border-radius:var(--r-xl);background:var(--gg-stone-50);color:var(--gg-ink);padding:clamp(24px,2.8vw,44px)}
.form-card__head{margin-bottom:24px}
.form-card__head h3{font-size:clamp(24px,2.2vw,32px);letter-spacing:-.03em;margin-top:12px}
.form-card__head p{color:var(--gg-stone-700);margin-top:6px;font-size:15px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;grid-column:span 2}
.field--half{grid-column:span 1}
.field label,.field .flabel{font-size:13.5px;font-weight:500;color:var(--gg-ink);letter-spacing:-.005em}
.field label i{font-style:normal;color:var(--gg-blue)}
.field small{font-size:12.5px;color:var(--gg-stone-600)}
.input,.select,.textarea{width:100%;min-height:52px;padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--gg-stone-300);background:#fff;color:var(--gg-ink);font-size:16px;line-height:1.3;transition:border-color var(--d-fast) var(--ease-std),box-shadow var(--d-fast) var(--ease-std);-webkit-appearance:none;appearance:none}
.textarea{min-height:120px;resize:vertical}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2315151f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
.input::placeholder,.textarea::placeholder{color:var(--gg-stone-500)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--gg-stone-400)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--gg-blue);box-shadow:0 0 0 3px rgba(32,27,222,.16)}
.field.is-invalid .input,.field.is-invalid .select,.field.is-invalid .textarea{border-color:var(--gg-terra)}
.field__err{font-size:12.5px;color:var(--gg-terra-800);display:none}
.field.is-invalid .field__err{display:block}
.consent{grid-column:span 2;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:13.5px;line-height:1.45;color:var(--gg-stone-700)}
.consent input{width:22px;height:22px;margin:0;accent-color:var(--gg-blue)}
.consent button{color:var(--gg-blue);text-decoration:underline;text-underline-offset:2px;font-size:inherit}
.consent.is-invalid{color:var(--gg-terra-800)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form .btn{grid-column:span 2;margin-top:6px}
.form__chips{grid-column:span 2;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--gg-stone-700);margin-top:2px}
.form__chips li{display:flex;align-items:center;gap:7px}
.form__chips svg{width:15px;height:15px;color:var(--gg-green)}
.form__status{grid-column:span 2;display:none;padding:14px 16px;border-radius:var(--r-md);font-size:14.5px;line-height:1.45}
.form__status.is-error{display:block;background:var(--gg-terra-100);color:var(--gg-terra-800)}
.form-done{display:none;text-align:left}
.form-card.is-done .form{display:none}
.form-card.is-done .form-done{display:block}
.form-done__ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--gg-gold);color:var(--gg-ink);margin-bottom:22px}
.form-done__ico svg{width:30px;height:30px}
.form-done h3{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.03em;margin-bottom:12px}
.form-done p{color:var(--gg-stone-700)}
.btn.is-loading{pointer-events:none;opacity:.8}
.btn.is-loading svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 11 · Rechtliches (Pop-up) ---------- */
.legal{width:min(980px,calc(100% - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:var(--r-2xl);background:var(--gg-stone-100);color:var(--gg-ink);overflow:hidden}
.legal::backdrop{background:rgba(13,13,22,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.legal[open]{display:flex;flex-direction:column;animation:sheet 560ms var(--ease-out)}
@keyframes sheet{from{transform:translateY(40px)}to{transform:none}}
.legal__in{overflow-y:auto;padding:clamp(24px,3.4vw,52px);overscroll-behavior:contain}
.legal__head{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;margin-bottom:32px}
.legal__head h2{font-size:clamp(30px,3.4vw,48px);margin-top:14px;color:var(--gg-ink)}
.legal__head h2 em{color:var(--gg-blue)}
.legal__head .label{color:var(--gg-stone-600)}
.legal__close{width:48px;height:48px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--gg-ink);display:grid;place-items:center;color:var(--gg-ink)}
.legal__close svg{width:18px;height:18px}
.legal__close:hover{background:var(--gg-ink);color:var(--gg-stone-50)}
.docs{display:grid;gap:10px}
.doc{display:grid;grid-template-columns:auto 1fr auto;gap:12px 22px;align-items:center;padding:18px 20px 18px 22px;border-radius:var(--r-lg);background:var(--gg-stone-50);transition:box-shadow 300ms var(--ease-std)}
.doc.is-target{box-shadow:inset 0 0 0 2px var(--gg-gold)}
.doc__idx{font-family:var(--font-mono);font-size:12px;color:var(--idx)}
.doc h3{font-size:19px;letter-spacing:-.02em}
.doc p{font-size:13.5px;color:var(--gg-stone-700);margin-top:2px}
.doc__act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.doc__act a{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:500;box-shadow:inset 0 0 0 1.5px var(--gg-stone-300);color:var(--gg-ink);transition:background-color var(--d-fast),box-shadow var(--d-fast)}
.doc__act a:hover{box-shadow:inset 0 0 0 1.5px var(--gg-ink)}
.doc__act a.is-dl{background:var(--gg-ink);color:var(--gg-stone-50);box-shadow:none}
.doc__act a.is-dl:hover{background:#2a2a36}
.doc__act svg{width:16px;height:16px}
.imp{margin-top:36px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:20px;padding-top:32px;border-top:1px solid var(--gg-stone-300)}
.imp>h3{grid-column:1/span 4;font-size:22px}
.imp__cols{grid-column:5/span 8;display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;font-size:14.5px;line-height:1.55;color:#2b2a33}
.imp__cols h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gg-stone-600);font-weight:500;margin-bottom:6px}
.imp__cols a{color:var(--gg-blue)}
.imp__full{grid-column:5/span 8;font-size:13.5px;color:var(--gg-stone-700)}
.imp__full summary{cursor:pointer;font-weight:500;color:var(--gg-ink)}
.imp__full p{margin-top:10px}
.imp__full h5{font-size:14px;margin-top:16px;color:var(--gg-ink)}

/* ---------- 12 · Footer ---------- */
.ftr{position:relative;z-index:4;background:var(--canvas);color:var(--body);padding-top:clamp(72px,8vw,120px)}
.ftr__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:48px;padding-bottom:clamp(56px,6vw,96px)}
.ftr__brand{grid-column:1/span 5;display:flex;flex-direction:column;gap:20px}
.ftr__brand .logo{--logo-w:190px}
.ftr__claim{font-size:17px;line-height:1.45;color:var(--muted);max-width:22em}
.ftr__claim em{color:var(--gg-gold);font-size:1.08em}
.ftr__cols{grid-column:7/span 6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ftr__cols .label{margin-bottom:16px}
.ftr__cols ul{display:flex;flex-direction:column;gap:10px;font-size:15px}
.ftr__cols a,.ftr__cols button{color:var(--heading);text-align:left;font-size:15px;line-height:1.4;transition:color var(--d-fast)}
.ftr__cols a:hover,.ftr__cols button:hover{color:var(--gg-gold)}
.ftr__cols li{color:var(--muted)}
.ftr__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:26px 30px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--faint)}
.to-top{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--heading)}
.to-top svg{width:14px;height:14px;transition:transform var(--d-med) var(--ease-out)}
.to-top:hover svg{transform:translateY(-3px)}
.ftr__wordmark{display:block;width:100%;aspect-ratio:1200/263.04;margin:0 auto -1.2%;background:color-mix(in srgb,var(--gg-creme) 10%,transparent);-webkit-mask:url("/assets/brand/gustogang-logo-blue.svg") center/contain no-repeat;mask:url("/assets/brand/gustogang-logo-blue.svg") center/contain no-repeat}

/* ---------- 13 · Motion ---------- */
/* Zeilen steigen durch ihre eigene Maske */
.js [data-lines]:not(.is-split){visibility:hidden;animation:late-show 0s linear 2.5s forwards}
@keyframes late-show{to{visibility:visible}}
.js [data-lines] .ln{display:block;overflow:hidden;padding-block:.06em .16em;margin-block:-.06em -.16em}
.js [data-lines] .ln>span{display:block;transform:translateY(108%);transition:transform var(--d-line) var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.js [data-lines].is-in .ln>span{transform:none}
/* Elemente kommen von unten (Karten, Absätze) */
.js [data-reveal]{transform:translateY(28px);opacity:0;transition:transform 800ms var(--ease-out),opacity 700ms ease;transition-delay:calc(var(--i,0) * 80ms)}
.js [data-reveal].is-in{transform:none;opacity:1}
/* Masken-Aufdeckung für Bilder */
.js [data-unmask]{clip-path:inset(0 0 100% 0 round var(--r-xl));transition:clip-path 1100ms var(--ease-cover)}
.js [data-unmask].is-in{clip-path:inset(0 0 0 0 round var(--r-xl))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .js [data-lines] .ln>span,.js [data-reveal],.js [data-unmask]{transform:none!important;opacity:1!important;clip-path:none!important}
  .fstep,.qmark{transform:none!important;opacity:1!important}
  .media--hero img{transform:none!important}
}

.still *,.still *::before,.still *::after{transition:none!important;animation:none!important}
.still [data-reveal],.still [data-lines] .ln>span,.still [data-unmask],.still .fstep,.still .qmark,.still .qmark::before{transform:none!important;opacity:1!important;clip-path:none!important}
.still [data-lines]:not(.is-split){visibility:visible}
html.still{scroll-behavior:auto!important}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .hdr__link span{display:none}
  .cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  :root{--hdr-h:84px}
  .hdr__nav{display:none}
  .hdr__in{padding-right:var(--gutter)}
  .hero__text{grid-column:1/-1}
  .hero__aside{display:none}
  .sec-head>h2,.sec-head--split>h2{grid-column:1/-1}
  .sec-head>.lead,.sec-head--split>.lead{grid-column:1/-1}
  .rail>.label{grid-column:1/-1;padding-top:0}
  .rail>.rail__body{grid-column:1/-1}
  .cards--3,.prices,.stat-row{grid-template-columns:minmax(0,1fr)}
  .cases,.vs{grid-template-columns:minmax(0,1fr)}
  .split__a,.split__b,.split--wide-b .split__a,.split--wide-b .split__b{grid-column:1/-1}
  .funnel{grid-template-columns:minmax(0,1fr)}
  .qbranch{padding-left:0;margin-top:16px}
  .qmark::before{display:none}
  .contrast{grid-template-columns:minmax(0,1fr)}
  .cta__text,.cta__aside{grid-column:1/-1}
  .ftr__brand,.ftr__cols{grid-column:1/-1}
  .menu__main{grid-template-columns:minmax(0,1fr)}
  .menu__field{display:none}
  .menu__sub{display:block}
  .menu__item{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px;align-items:baseline;width:100%}
  .menu__txt{white-space:normal;font-size:clamp(28px,8vw,52px)}
  .menu__foot{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu__cta{justify-self:start}
  .article__aside{display:none}
  .article__body{grid-column:1/-1}
  .offer-card{grid-template-columns:auto 1fr}
  .offer-card .btn{grid-column:1/-1;justify-self:start}
  .imp>h3,.imp__cols,.imp__full{grid-column:1/-1}
  .media--hero{aspect-ratio:16/10}
}
@media (max-width:760px){
  :root{--t-body:16.5px;--hdr-h:76px}
  .logo{--logo-w:132px}
  .menu-btn{width:48px;height:48px;top:calc(var(--hdr-h)/2 - 24px)}
  .cards--2,.cards--4,.checks,.posts{grid-template-columns:minmax(0,1fr)}
  .contrast ul{grid-template-columns:minmax(0,1fr)}
  .form{grid-template-columns:minmax(0,1fr)}
  .field,.field--half,.consent,.form .btn,.form__chips,.form__status{grid-column:1/-1}
  .btns .btn{width:100%}
  .hero .btns{flex-direction:column;align-items:stretch}
  .scroll-hint{display:none}
  .media--hero{aspect-ratio:4/3.4;border-radius:var(--r-lg)}
  .live-card{position:relative;left:auto;bottom:auto;width:100%;margin-top:12px}
  .hero__media .live-card{margin-top:-64px;margin-left:12px;width:calc(100% - 24px)}
  .doc{grid-template-columns:auto 1fr}
  .doc__act{grid-column:1/-1;justify-content:flex-start}
  .imp__cols{grid-template-columns:minmax(0,1fr)}
  .offer__long{display:none}
  .offer__short{display:inline}
  .offer__cta{display:none}
  .offer__in{justify-content:flex-start;text-align:left;padding:9px 52px 9px 16px;gap:6px 10px;font-size:13px}
  .offer__short::after{content:" →";color:var(--gg-gold)}
  .menu__foot{grid-template-columns:minmax(0,1fr)}
  .ncard{min-height:0}
  .ncard__body{padding-top:28px}
  .way{min-height:0}
  .fstep:nth-child(n){width:100%}
  .band{grid-template-columns:minmax(0,1fr)}
  .tbl th,.tbl td{padding:14px 16px}
  .chat__log{height:min(60vh,420px)}
  .msg{max-width:92%}
  .ftr__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .offer-card{grid-template-columns:minmax(0,1fr)}
  .offer-card__badge{width:92px}
  .case__nums{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prose th,.prose td{min-width:150px}
}
@media (max-width:420px){
  .ftr__cols{grid-template-columns:minmax(0,1fr)}
}