/* ═══════════════════════════════════════════════════════════════════
   ELEKTROGENIUS — DESIGN SYSTEM
   Gemeinsame Basis für alle Seiten. Eine Quelle der Wahrheit.
   Seitenspezifisches gehört in einen <style>-Block der jeweiligen Seite.
   ═══════════════════════════════════════════════════════════════════ */

  @layer tokens, base, layout, components, pages, utilities;

  /* ─────────────────────────────── TOKENS ─────────────────────────── */
  @layer tokens {
    :root{
      /* Flächen */
      --bg:#0e1017;
      --bg-elevated:#151824;
      --surface:#191d2b;
      --surface-2:#1f2434;
      --surface-3:#272c3e;

      /* Text */
      --text:#eceef6;
      --text-muted:#a8adc2;
      --text-dim:#7c8199;
      --text-faint:#5c6178;

      /* Akzent (Marke) */
      --accent:#9184d9;
      --accent-bright:#b3a9f0;
      --accent-deep:#6d5fb8;
      --accent-ink:#0e1017;
      --accent-a08:rgb(145 132 217 / .08);
      --accent-a12:rgb(145 132 217 / .12);
      --accent-a20:rgb(145 132 217 / .20);
      --accent-a35:rgb(145 132 217 / .35);

      /* Produkt-Akzente */
      --c-voltbase:#9184d9;
      --c-materialcheck:#f5a623;
      --c-coaching:#ff8c42;
      --c-voltrechner:#7aa7f0;
      --c-voltdetective:#3d8fe0;
      --c-creative:#e63030;
      --c-success:#25c78b;

      /* Linien */
      --line:rgb(236 238 246 / .09);
      --line-strong:rgb(236 238 246 / .16);

      /* Radien */
      --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

      /* Schatten */
      --sh-sm:0 1px 2px rgb(0 0 0 / .35);
      --sh-md:0 8px 24px -8px rgb(0 0 0 / .55);
      --sh-lg:0 24px 56px -20px rgb(0 0 0 / .70);
      --sh-glow:0 0 0 1px var(--accent-a35), 0 18px 44px -18px rgb(145 132 217 / .55);

      /* Typografie */
      --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
      --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
      --fs-display:clamp(2.75rem, 1.4rem + 5.4vw, 5rem);
      --fs-h2:clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
      --fs-h3:clamp(1.15rem, 1rem + .6vw, 1.4rem);
      --fs-lead:clamp(1rem, .95rem + .35vw, 1.15rem);
      --fs-body:1rem;
      --fs-sm:.9rem;
      --fs-xs:.8rem;
      --fs-eyebrow:.72rem;

      /* Raster */
      --shell:1180px;
      --gutter:clamp(1.25rem, 4vw, 3rem);
      --section-y:clamp(4.5rem, 9vw, 8rem);
      --nav-h:68px;

      /* Kompatibilitaets-Aliase (Impressum / Datenschutz / VoltIQ im Dokument) */
      --font-heading:var(--font);
      --font-body:var(--font);
      --navy:var(--bg);
      --navy-mid:var(--surface);
      --navy2:var(--bg-elevated);
      --navy-light:var(--surface-3);
      --white:var(--text);
      --electric:var(--accent);
      --electric2:var(--accent-bright);
      --cyan:var(--accent-bright);
      --muted:var(--text-muted);
      --text2:var(--text-dim);
      --text3:var(--text-faint);
      --border:var(--line);
      --green:var(--c-success);
      --blue:var(--c-voltrechner);
      --red:#ff5a5a;
      --orange:var(--c-coaching);

      /* Bewegung */
      --ease:cubic-bezier(.22,.61,.36,1);
      --dur:.22s;
    }

    @media (max-width:640px){ :root{ --nav-h:62px; } }
  }

  /* ──────────────────────────────── BASE ──────────────────────────── */
  @layer base {
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

    html{
      scroll-behavior:smooth;
      scroll-padding-top:calc(var(--nav-h) + 16px);
      -webkit-text-size-adjust:100%;
      color-scheme:dark;
    }

    body{
      font-family:var(--font);
      font-size:var(--fs-body);
      line-height:1.65;
      background:var(--bg);
      color:var(--text);
      overflow-x:hidden;
      font-feature-settings:"cv11","ss01";
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
      position:relative;
    }

    /* Ruhiger Farbverlauf-Grund statt Neon-Raster */
    body::before{
      content:'';
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
      background:
        radial-gradient(1200px 720px at 78% -180px, rgb(109 95 184 / .22), transparent 62%),
        radial-gradient(900px 620px at -8% 12%, rgb(61 143 224 / .10), transparent 58%),
        radial-gradient(1000px 800px at 50% 108%, rgb(0 0 0 / .45), transparent 60%);
    }

    #bg-canvas{opacity:.34}

    h1,h2,h3,h4,h5,h6{
      font-weight:600;
      line-height:1.12;
      letter-spacing:-.025em;
      text-wrap:balance;
    }

    p{text-wrap:pretty}
    a{color:inherit}
    img,svg,canvas,video{display:block;max-width:100%}
    img{height:auto}
    button,input,textarea,select{font:inherit;color:inherit}
    button{background:none;border:none;cursor:pointer}
    ul,ol{list-style:none}

    :focus-visible{
      outline:2px solid var(--accent-bright);
      outline-offset:3px;
      border-radius:var(--r-xs);
    }
    ::selection{background:rgb(145 132 217 / .35);color:#fff}

    ::-webkit-scrollbar{width:10px;height:10px}
    ::-webkit-scrollbar-track{background:var(--bg)}
    ::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:99px;border:2px solid var(--bg)}
    ::-webkit-scrollbar-thumb:hover{background:#343a50}

    /* Scroll-Reveal — greift nur, wenn JS läuft */
    .js .reveal{
      opacity:0;
      transform:translateY(22px);
      transition:opacity .7s var(--ease), transform .7s var(--ease);
    }
    .js .reveal.visible{opacity:1;transform:none}

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

  /* ─────────────────────────────── LAYOUT ─────────────────────────── */
  @layer layout {
    .page{display:none}
    .page.active{display:block}

    .shell{
      width:min(100% - var(--gutter) * 2, var(--shell));
      margin-inline:auto;
    }
    .shell--narrow{width:min(100% - var(--gutter) * 2, 780px)}

    section{position:relative;z-index:1}
    .band{padding-block:var(--section-y)}
    .band--tight{padding-block:clamp(3rem, 6vw, 5rem)}
    .band--surface{background:linear-gradient(180deg, transparent, rgb(25 29 43 / .55) 18%, rgb(25 29 43 / .55) 82%, transparent)}
    .band--solid{background:var(--bg-elevated);border-block:1px solid var(--line)}

    .skip-link{
      position:absolute;
      left:1rem;
      top:-100px;
      z-index:9999;
      background:var(--accent);
      color:var(--accent-ink);
      padding:.7rem 1.2rem;
      border-radius:var(--r-sm);
      font-weight:600;
      transition:top .2s var(--ease);
    }
    .skip-link:focus{top:1rem}
  }

  /* ───────────────────────────── COMPONENTS ───────────────────────── */
  @layer components {

    /* ── Kopfzeile / Navigation ───────────────────────────────────── */
    .site-header{
      position:fixed;
      inset-inline:0;
      top:0;
      z-index:200;
      background:rgb(14 16 23 / .72);
      backdrop-filter:blur(16px) saturate(160%);
      -webkit-backdrop-filter:blur(16px) saturate(160%);
      border-bottom:1px solid transparent;
      transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }
    .site-header.is-scrolled{
      background:rgb(14 16 23 / .92);
      border-bottom-color:var(--line);
      box-shadow:0 10px 30px -20px rgb(0 0 0 / .9);
    }

    .nav{
      display:flex;
      align-items:center;
      gap:1.5rem;
      height:var(--nav-h);
      width:min(100% - var(--gutter) * 2, 1320px);
      margin-inline:auto;
    }

    .nav-logo{
      display:flex;
      align-items:center;
      gap:.6rem;
      text-decoration:none;
      flex-shrink:0;
      border-radius:var(--r-sm);
    }
    .nav-logo img{width:36px;height:36px;object-fit:contain;border-radius:9px}
    .nav-logo-text{
      font-size:1.2rem;
      font-weight:600;
      letter-spacing:-.03em;
      white-space:nowrap;
    }
    .nav-logo-text span{color:var(--accent-bright)}

    .nav-links{
      display:flex;
      align-items:center;
      gap:.15rem;
      margin-inline:auto;
    }
    .nav-links > li{position:relative}
    .nav-links a,
    .nav-dropdown-toggle{
      display:flex;
      align-items:center;
      gap:.3rem;
      padding:.5rem .7rem;
      border-radius:var(--r-sm);
      color:var(--text-muted);
      text-decoration:none;
      font-size:.875rem;
      font-weight:500;
      white-space:nowrap;
      transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    .nav-links a:hover,
    .nav-dropdown-toggle:hover,
    .nav-links a.active{
      color:var(--text);
      background:rgb(236 238 246 / .06);
    }
    .nav-links a.active{color:var(--accent-bright)}

    .nav-dropdown-toggle svg{
      width:14px;height:14px;
      transition:transform var(--dur) var(--ease);
    }
    .nav-dropdown[open] .nav-dropdown-toggle svg,
    .nav-dropdown.open .nav-dropdown-toggle svg{transform:rotate(180deg)}

    .nav-dropdown-menu{
      display:none;
      position:absolute;
      top:calc(100% + 10px);
      left:50%;
      translate:-50% 0;
      min-width:230px;
      padding:.4rem;
      background:var(--surface);
      border:1px solid var(--line-strong);
      border-radius:var(--r-md);
      box-shadow:var(--sh-lg);
      z-index:300;
    }
    .nav-dropdown.open .nav-dropdown-menu{display:block;animation:drop .18s var(--ease)}
    @keyframes drop{from{opacity:0;translate:-50% -6px}to{opacity:1;translate:-50% 0}}

    .nav-dropdown-menu a{
      display:flex;
      align-items:baseline;
      gap:.5rem;
      padding:.55rem .7rem;
      border-radius:var(--r-sm);
      font-size:.875rem;
      white-space:normal;
    }
    .nav-dropdown-menu .hint{
      color:var(--text-faint);
      font-size:.75rem;
      font-weight:400;
      margin-left:auto;
    }

    .nav-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0}

    .nav-toggle{
      display:none;
      width:42px;height:42px;
      align-items:center;
      justify-content:center;
      border-radius:var(--r-sm);
      border:1px solid var(--line);
      color:var(--text);
    }
    .nav-toggle:hover{background:rgb(236 238 246 / .06)}
    .nav-toggle .bars{display:flex;flex-direction:column;gap:5px;width:18px}
    .nav-toggle .bars span{
      height:2px;background:currentColor;border-radius:2px;
      transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
    }
    .nav-toggle.open .bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav-toggle.open .bars span:nth-child(2){opacity:0}
    .nav-toggle.open .bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

    /* Lesefortschritt */
    .scroll-progress{
      position:absolute;
      inset-inline:0;
      bottom:-1px;
      height:2px;
      background:transparent;
      overflow:hidden;
    }
    .scroll-progress i{
      display:block;
      height:100%;
      width:var(--p,0%);
      background:linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
    }

    @media (max-width:1100px){
      .nav-links{
        display:none;
        position:fixed;
        top:var(--nav-h);
        inset-inline:0;
        flex-direction:column;
        align-items:stretch;
        gap:.15rem;
        margin:0;
        padding:1rem var(--gutter) 2rem;
        max-height:calc(100dvh - var(--nav-h));
        overflow-y:auto;
        background:rgb(14 16 23 / .98);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        border-bottom:1px solid var(--line);
      }
      .nav-links.open{display:flex;animation:drop-m .22s var(--ease)}
      @keyframes drop-m{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
      .nav-links a,.nav-dropdown-toggle{
        width:100%;
        padding:.8rem .7rem;
        font-size:1rem;
      }
      .nav-dropdown-menu{
        position:static;
        translate:none;
        min-width:0;
        margin:.2rem 0 .4rem .9rem;
        background:none;
        border:none;
        border-left:1px solid var(--line);
        border-radius:0;
        box-shadow:none;
        padding:0 0 0 .5rem;
      }
      .nav-dropdown.open .nav-dropdown-menu{animation:none;translate:none}
      .nav-toggle{display:flex}
      .nav-actions{margin-left:auto}
      .nav-actions .nav-cta-desktop{display:none}
      .nav-links .nav-cta-mobile{display:block;margin-top:.8rem}
    }
    @media (min-width:1101px){
      .nav-links .nav-cta-mobile{display:none}
    }

    /* ── Buttons ──────────────────────────────────────────────────── */
    .btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-start,.btn-next{
      --btn-accent:var(--accent);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      padding:.8rem 1.4rem;
      border-radius:var(--r-sm);
      font-size:.95rem;
      font-weight:600;
      letter-spacing:-.01em;
      line-height:1.2;
      text-decoration:none;
      white-space:nowrap;
      cursor:pointer;
      min-height:46px;
      transition:transform .14s var(--ease), box-shadow var(--dur) var(--ease),
                 background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    .btn svg,.btn-primary svg,.btn-secondary svg,.btn-ghost svg,.btn-start svg,.btn-next svg{width:17px;height:17px;flex-shrink:0}
    .btn:active,.btn-primary:active,.btn-secondary:active,.btn-ghost:active,.btn-start:active,.btn-next:active{transform:translateY(0) scale(.985)}

    .btn-primary,.btn-start,.btn-next{
      background:linear-gradient(180deg, color-mix(in srgb, var(--btn-accent) 92%, white), var(--btn-accent));
      color:#12131c;
      border:1px solid color-mix(in srgb, var(--btn-accent) 70%, black);
      box-shadow:inset 0 1px 0 rgb(255 255 255 / .28), 0 10px 26px -14px color-mix(in srgb, var(--btn-accent) 90%, transparent);
    }
    .btn-primary:hover,.btn-start:hover,.btn-next:hover{
      transform:translateY(-2px);
      box-shadow:inset 0 1px 0 rgb(255 255 255 / .35), 0 18px 34px -16px color-mix(in srgb, var(--btn-accent) 95%, transparent);
    }

    .btn-secondary{
      background:rgb(236 238 246 / .04);
      color:var(--text);
      border:1px solid var(--line-strong);
    }
    .btn-secondary:hover{
      transform:translateY(-2px);
      background:rgb(236 238 246 / .08);
      border-color:color-mix(in srgb, var(--btn-accent) 55%, transparent);
      color:#fff;
    }

    .btn-ghost{
      background:transparent;
      color:color-mix(in srgb, var(--btn-accent) 80%, white);
      border:1px solid color-mix(in srgb, var(--btn-accent) 38%, transparent);
    }
    .btn-ghost:hover{
      transform:translateY(-2px);
      background:color-mix(in srgb, var(--btn-accent) 12%, transparent);
      border-color:color-mix(in srgb, var(--btn-accent) 70%, transparent);
    }

    .btn-lg{padding:1rem 1.9rem;font-size:1.05rem;min-height:54px;border-radius:var(--r-md)}
    .btn-sm{padding:.55rem 1rem;font-size:.85rem;min-height:38px}
    .btn-block{width:100%}

    .nav-cta{
      padding:.55rem 1.1rem;
      min-height:40px;
      font-size:.875rem;
      border-radius:var(--r-sm);
    }

    /* ── Section-Köpfe ────────────────────────────────────────────── */
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      font-size:var(--fs-eyebrow);
      font-weight:700;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--accent-bright);
    }
    .eyebrow::before{
      content:'';
      width:18px;height:1px;
      background:currentColor;
      opacity:.6;
    }
    .eyebrow--plain::before{display:none}
    /* Alter Klassenname der Unterseiten */
    .section-tag{
      display:inline-block;
      font-size:var(--fs-eyebrow);
      font-weight:700;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--accent-bright);
    }

    .section-head{max-width:720px;margin-bottom:clamp(2.5rem,5vw,4rem)}
    .section-head--center{margin-inline:auto;text-align:center}
    .section-head--center .eyebrow::before{display:none}
    .section-head h2{
      font-size:var(--fs-h2);
      margin-block:.9rem .8rem;
    }
    .section-head h2 em{font-style:normal;color:var(--accent-bright)}
    .section-head .lead{
      font-size:var(--fs-lead);
      color:var(--text-muted);
      line-height:1.7;
      max-width:60ch;
    }
    .section-head--center .lead{margin-inline:auto}

    /* ── Hero ─────────────────────────────────────────────────────── */
    .hero{
      position:relative;
      z-index:1;
      display:grid;
      place-items:center;
      min-height:clamp(620px, 92svh, 900px);
      padding-block:calc(var(--nav-h) + clamp(3rem,7vw,6rem)) clamp(3rem,6vw,5rem);
      text-align:center;
    }
    .hero-inner{max-width:880px}
    .hero > p{max-width:62ch;margin-inline:auto;color:var(--text-muted);line-height:1.7}

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.4rem 1rem .4rem .75rem;
      border:1px solid var(--accent-a20);
      border-radius:var(--r-pill);
      background:var(--accent-a08);
      font-size:var(--fs-eyebrow);
      font-weight:600;
      letter-spacing:.1em;
      text-transform:uppercase;
      color:var(--accent-bright);
      margin-bottom:1.8rem;
    }
    .hero-badge .dot{
      width:7px;height:7px;border-radius:50%;
      background:var(--accent-bright);
      box-shadow:0 0 0 4px var(--accent-a12);
      animation:pulse 2.4s var(--ease) infinite;
    }
    @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 4px var(--accent-a12)}50%{opacity:.55;box-shadow:0 0 0 7px rgb(145 132 217 / .05)}}

    .hero h1{
      font-size:var(--fs-display);
      font-weight:600;
      letter-spacing:-.04em;
      line-height:1.02;
      margin-bottom:1.4rem;
    }
    .hero h1 .line2{
      display:block;
      background:linear-gradient(105deg, var(--accent-bright) 10%, #cfc7ff 45%, var(--accent) 90%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-sub{
      font-size:clamp(1.02rem, .96rem + .5vw, 1.22rem);
      color:var(--text-muted);
      line-height:1.7;
      max-width:60ch;
      margin:0 auto 2.4rem;
    }
    .hero-actions{
      display:flex;
      gap:.9rem;
      justify-content:center;
      flex-wrap:wrap;
      margin-bottom:2.6rem;
    }

    .hero-trust{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
      gap:.55rem 1.6rem;
      font-size:var(--fs-xs);
      color:var(--text-dim);
    }
    .hero-trust li{display:flex;align-items:center;gap:.45rem}
    .hero-trust svg{width:15px;height:15px;color:var(--accent)}

    .hero-scroll{
      position:absolute;
      bottom:1.4rem;
      left:50%;
      translate:-50% 0;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:.35rem;
      font-size:.72rem;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--text-faint);
    }
    .hero-scroll svg{width:16px;height:16px;animation:bob 2.4s var(--ease) infinite}
    @keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}
    @media (max-height:820px),(max-width:768px){.hero-scroll{display:none}}

    /* ── Kennzahlen ───────────────────────────────────────────────── */
    .stats{
      position:relative;
      z-index:1;
      overflow:hidden;
      background:
        radial-gradient(900px 380px at 82% -60%, rgb(109 95 184 / .38), transparent 66%),
        linear-gradient(180deg, #1b1f35, #171a29);
      border-block:1px solid var(--line);
    }
    .stats-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      padding-block:clamp(2rem,4vw,3rem);
    }
    .stat-item{
      padding:.4rem clamp(.75rem,2vw,1.5rem);
      text-align:center;
      border-right:1px solid var(--line);
    }
    .stat-item:last-child{border-right:none}
    .stat-num{
      display:block;
      font-size:clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
      font-weight:600;
      letter-spacing:-.03em;
      line-height:1;
      color:#fff;
      font-variant-numeric:tabular-nums;
    }
    .stat-label{
      display:block;
      margin-top:.55rem;
      font-size:var(--fs-xs);
      letter-spacing:.06em;
      color:var(--text-muted);
    }
    @media (max-width:720px){
      .stats-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem 0}
      .stat-item:nth-child(2n){border-right:none}
    }

    /* ── Video ────────────────────────────────────────────────────── */
    .video-frame{
      max-width:400px;
      margin-inline:auto;
      border-radius:var(--r-lg);
      overflow:hidden;
      border:1px solid var(--line-strong);
      box-shadow:var(--sh-lg);
      background:var(--surface);
    }
    .video-ratio{position:relative;width:100%;padding-top:177.78%}
    .video-ratio > *{position:absolute;inset:0;width:100%;height:100%;border:0}
    #yt-facade{
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:.9rem;
      padding:1.5rem;
      text-align:center;
      background:radial-gradient(ellipse at 50% 35%, #262b3e, #14171f);
      color:var(--text);
      transition:background var(--dur) var(--ease);
    }
    #yt-facade:hover{background:radial-gradient(ellipse at 50% 35%, #2d3349, #14171f)}
    #yt-facade .play{
      display:grid;
      place-items:center;
      width:66px;height:66px;
      border-radius:50%;
      background:linear-gradient(180deg, var(--accent-bright), var(--accent));
      box-shadow:0 12px 34px -12px rgb(145 132 217 / .9);
      transition:transform var(--dur) var(--ease);
    }
    #yt-facade:hover .play{transform:scale(1.08)}
    #yt-facade .play svg{width:26px;height:26px;fill:#12131c;margin-left:3px}
    #yt-facade .label{font-weight:600}
    #yt-facade .note{font-size:.72rem;color:var(--text-faint);max-width:30ch;line-height:1.5}

    .video-split{
      display:grid;
      grid-template-columns:1fr minmax(0,340px);
      gap:clamp(2rem,5vw,4.5rem);
      align-items:center;
    }
    .video-split .section-head{margin-bottom:1.8rem}
    .video-split .video-frame{margin-inline:0;width:100%;max-width:340px}
    .video-points{display:grid;gap:.8rem}
    .video-points li{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--fs-sm);color:var(--text-muted)}
    .video-points svg{width:17px;height:17px;color:var(--accent-bright);flex-shrink:0;margin-top:.2rem}
    @media (max-width:900px){
      .video-split{grid-template-columns:1fr}
      .video-split .section-head{text-align:center;margin-inline:auto}
      .video-split .section-head .lead{margin-inline:auto}
      .video-split .video-frame{margin-inline:auto;width:min(100%,340px)}
      .video-points{max-width:420px;margin-inline:auto}
    }

    /* ── Karten ───────────────────────────────────────────────────── */
    .card{
      --card-accent:var(--accent);
      position:relative;
      display:flex;
      flex-direction:column;
      padding:clamp(1.5rem,2.4vw,2rem);
      background:linear-gradient(180deg, var(--surface-2), var(--surface));
      border:1px solid var(--line);
      border-radius:var(--r-lg);
      overflow:hidden;
      transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }
    .card::before{
      content:'';
      position:absolute;
      inset-inline:0;
      top:0;
      height:1px;
      background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--card-accent) 85%, transparent), transparent);
      opacity:.55;
      transition:opacity var(--dur) var(--ease);
    }
    .card:hover{
      transform:translateY(-4px);
      border-color:color-mix(in srgb, var(--card-accent) 40%, var(--line));
      box-shadow:var(--sh-md), 0 0 0 1px color-mix(in srgb, var(--card-accent) 20%, transparent);
    }
    .card:hover::before{opacity:1}

    .card-icon{
      display:grid;
      place-items:center;
      width:50px;height:50px;
      margin-bottom:1.2rem;
      border-radius:var(--r-md);
      background:color-mix(in srgb, var(--card-accent) 13%, transparent);
      border:1px solid color-mix(in srgb, var(--card-accent) 28%, transparent);
      color:var(--card-accent);
      flex-shrink:0;
    }
    .card-icon svg,.card-icon i{width:23px;height:23px;stroke-width:1.75}
    .card-kicker{
      font-size:var(--fs-eyebrow);
      font-weight:700;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--card-accent);
      margin-bottom:.5rem;
    }
    .card h3{font-size:1.4rem;margin-bottom:.6rem}
    .card p{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.7;flex:1}
    .card p.card-kicker{flex:0 0 auto}
    .card-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}

    /* Bento-Raster für die Tools */
    .bento{
      display:grid;
      grid-template-columns:repeat(6,1fr);
      gap:clamp(.9rem,1.6vw,1.4rem);
    }
    .bento > .card{grid-column:span 2}
    .bento > .card--wide{grid-column:span 3}
    @media (max-width:980px){
      .bento{grid-template-columns:repeat(2,1fr)}
      .bento > .card,.bento > .card--wide{grid-column:span 1}
    }
    @media (max-width:620px){
      .bento{grid-template-columns:1fr}
    }

    .bento > .card--banner{
      grid-column:span 6;
      flex-direction:row;
      align-items:center;
      flex-wrap:wrap;
      gap:1.4rem;
    }
    .card--banner .card-icon{margin-bottom:0}
    .card--banner .card-body{flex:1 1 320px;min-width:0}
    .card--banner .card-body p{flex:0 0 auto;margin-top:.4rem}
    .card--banner h3{margin-bottom:0}
    .card--banner .card-actions{margin-top:0}
    @media (max-width:980px){
      .bento > .card--banner{grid-column:span 2}
    }
    @media (max-width:620px){
      .bento > .card--banner{grid-column:span 1;flex-direction:column;align-items:flex-start}
    }

    /* Hervorgehobene Karte */
    .card--feature{
      background:
        radial-gradient(700px 320px at 12% -20%, color-mix(in srgb, var(--card-accent) 20%, transparent), transparent 62%),
        linear-gradient(180deg, var(--surface-2), var(--surface));
    }
    .card--feature h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem)}
    .card-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
    .tag{
      padding:.28rem .7rem;
      border-radius:var(--r-pill);
      border:1px solid var(--line-strong);
      background:rgb(236 238 246 / .04);
      font-size:.75rem;
      color:var(--text-muted);
    }

    /* ── Aufzählungs-Pills ────────────────────────────────────────── */
    .pill-row{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
    .pill{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      padding:.5rem 1rem;
      border:1px solid var(--line);
      border-radius:var(--r-pill);
      background:rgb(236 238 246 / .03);
      font-size:var(--fs-xs);
      color:var(--text-muted);
    }
    .pill svg{width:15px;height:15px;color:var(--accent-bright)}

    /* ── News-Banner ──────────────────────────────────────────────── */
    .newsbox{
      display:grid;
      grid-template-columns:180px 1fr;
      max-width:820px;
      margin-inline:auto;
      background:linear-gradient(180deg, var(--surface-2), var(--surface));
      border:1px solid var(--line);
      border-radius:var(--r-lg);
      overflow:hidden;
      text-decoration:none;
      color:inherit;
      transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }
    .newsbox:hover{
      transform:translateY(-4px);
      border-color:var(--accent-a35);
      box-shadow:var(--sh-md);
    }
    .newsbox-cover{position:relative;background:var(--surface-3);min-height:230px}
    .newsbox-cover img{width:100%;height:100%;object-fit:cover}
    .newsbox-cover .placeholder{display:grid;place-items:center;height:100%;color:var(--text-faint)}
    .newsbox-badge{
      position:absolute;
      top:.7rem;left:.7rem;
      padding:.2rem .6rem;
      border-radius:var(--r-xs);
      font-size:.7rem;
      font-weight:700;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:#fff;
    }
    .newsbox-body{display:flex;flex-direction:column;justify-content:center;padding:1.6rem 1.8rem;min-width:0}
    .newsbox-meta{
      display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
      margin-bottom:.7rem;
      font-size:.73rem;
    }
    .newsbox-meta .kind{font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-bright)}
    .newsbox-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--text-faint)}
    .newsbox-meta .date{color:var(--text-dim)}
    .newsbox-body h3{font-size:clamp(1.2rem,1rem + 1vw,1.6rem);margin-bottom:.6rem}
    .newsbox-body p{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.65;margin-bottom:1rem}
    .newsbox-more{display:inline-flex;align-items:center;gap:.4rem;color:var(--accent-bright);font-size:.88rem;font-weight:600}
    .newsbox:hover .newsbox-more svg{transform:translateX(3px)}
    .newsbox-more svg{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
    @media (max-width:640px){
      .newsbox{grid-template-columns:1fr}
      .newsbox-cover{min-height:180px;max-height:240px}
    }

    /* ── Promo-Band (Webseiten) ───────────────────────────────────── */
    .promo{
      position:relative;
      overflow:hidden;
      display:grid;
      grid-template-columns:1.35fr 1fr;
      align-items:center;
      gap:clamp(1.5rem,4vw,3.5rem);
      padding:clamp(2rem,4vw,3.2rem);
      border:1px solid var(--line-strong);
      border-radius:var(--r-xl);
      background:
        radial-gradient(760px 340px at 88% 10%, rgb(230 48 48 / .16), transparent 62%),
        linear-gradient(135deg, #1a1f33, #151824);
    }
    .promo h3{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);margin-block:.8rem .7rem}
    .promo p{color:var(--text-muted);max-width:52ch;margin-bottom:1.6rem}
    .promo-badge{
      display:inline-block;
      padding:.24rem .7rem;
      border-radius:var(--r-pill);
      border:1px solid rgb(230 48 48 / .35);
      background:rgb(230 48 48 / .12);
      color:#ff8080;
      font-size:.7rem;
      font-weight:700;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .promo-list{display:grid;gap:.7rem}
    .promo-list li{
      display:flex;align-items:flex-start;gap:.6rem;
      font-size:var(--fs-sm);color:var(--text-muted);
    }
    .promo-list svg{width:17px;height:17px;color:var(--c-success);flex-shrink:0;margin-top:.15rem}
    @media (max-width:820px){.promo{grid-template-columns:1fr}}

    /* ── Über uns ─────────────────────────────────────────────────── */
    .about{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:clamp(2rem,5vw,4rem);
      align-items:start;
    }
    .about-text p{color:var(--text-muted);line-height:1.85;margin-bottom:1.1rem}
    .about-text p strong{color:var(--text);font-weight:600}
    .value-list{display:grid;gap:1rem}
    .value{
      --card-accent:var(--accent);
      padding:1.3rem 1.5rem;
      border:1px solid color-mix(in srgb, var(--card-accent) 20%, var(--line));
      border-left:2px solid var(--card-accent);
      border-radius:var(--r-md);
      background:color-mix(in srgb, var(--card-accent) 6%, transparent);
    }
    .value-head{
      display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;
      font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
      color:var(--card-accent);
    }
    .value-head svg,.value-head i{width:16px;height:16px}
    .value p{color:var(--text-muted);font-size:var(--fs-sm);line-height:1.65}
    @media (max-width:820px){.about{grid-template-columns:1fr}}

    /* ── Kanäle ───────────────────────────────────────────────────── */
    .channels{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:2.6rem}
    .channel-btn{
      --card-accent:var(--accent);
      display:inline-flex;
      align-items:center;
      gap:.55rem;
      padding:.7rem 1.2rem;
      border:1px solid var(--line-strong);
      border-radius:var(--r-pill);
      background:rgb(236 238 246 / .04);
      color:var(--text);
      text-decoration:none;
      font-size:.9rem;
      font-weight:500;
      transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    .channel-btn svg,.channel-btn i{width:18px;height:18px;color:var(--card-accent)}
    .channel-btn:hover{
      transform:translateY(-2px);
      background:color-mix(in srgb, var(--card-accent) 12%, transparent);
      border-color:color-mix(in srgb, var(--card-accent) 45%, transparent);
    }

    /* ── Quiz ─────────────────────────────────────────────────────── */
    .quiz-box{
      max-width:720px;
      margin-inline:auto;
      padding:clamp(1.5rem,3vw,2.2rem);
      background:linear-gradient(180deg, var(--surface-2), var(--surface));
      border:1px solid var(--line);
      border-radius:var(--r-lg);
      box-shadow:var(--sh-md);
    }
    .quiz-topline{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.7rem;font-size:var(--fs-xs)}
    .quiz-topline #quiz-progress-text{color:var(--text-dim)}
    .quiz-topline #quiz-score-live{color:var(--accent-bright);font-weight:600;display:inline-flex;align-items:center;gap:.35rem}
    #quiz-progress-bar{height:5px;background:rgb(236 238 246 / .07);border-radius:99px;overflow:hidden;margin-bottom:1.6rem}
    #quiz-progress-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg, var(--accent-deep), var(--accent-bright));transition:width .45s var(--ease)}
    #quiz-question{font-size:1.12rem;font-weight:600;line-height:1.5;margin-bottom:1.4rem}
    #quiz-options{display:grid;gap:.7rem}
    .quiz-option-btn{
      width:100%;
      padding:.9rem 1.1rem;
      text-align:left;
      font-size:.95rem;
      background:var(--bg-elevated);
      color:var(--text);
      border:1px solid var(--line-strong);
      border-radius:var(--r-md);
      transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform .12s var(--ease);
    }
    .quiz-option-btn:hover{border-color:var(--accent);background:var(--accent-a08);transform:translateX(3px)}
    #quiz-feedback{margin-top:1rem;font-weight:600;font-size:.95rem}
    #quiz-feedback:empty{margin-top:0}
    #quiz-result{display:none;text-align:center;padding-block:.5rem}
    #quiz-score{font-size:3.4rem;font-weight:600;letter-spacing:-.03em;color:var(--accent-bright);margin-bottom:.4rem}
    #quiz-result-msg{font-size:1.2rem;font-weight:600;margin-bottom:.6rem}
    .quiz-result-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.4rem}
    .highscore-badge{
      display:inline-flex;align-items:center;gap:.5rem;
      padding:.45rem 1rem;
      border-radius:var(--r-pill);
      border:1px solid rgb(255 140 66 / .3);
      background:rgb(255 140 66 / .1);
      color:#ffb37a;
      font-size:var(--fs-xs);
      font-weight:600;
    }

    /* ── Kontakt ──────────────────────────────────────────────────── */
    .contact-form{
      display:grid;
      gap:.9rem;
      max-width:640px;
      margin-inline:auto;
    }
    .field-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
    @media (max-width:560px){.field-row{grid-template-columns:1fr}}
    .contact-input{
      width:100%;
      padding:.9rem 1rem;
      font-size:16px;
      background:var(--bg-elevated);
      color:var(--text);
      border:1px solid var(--line-strong);
      border-radius:var(--r-md);
      outline:none;
      transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    .contact-input::placeholder{color:var(--text-faint)}
    .contact-input:focus{
      border-color:var(--accent);
      background:var(--surface);
      box-shadow:0 0 0 3px var(--accent-a20);
    }
    textarea.contact-input{resize:vertical;min-height:130px;line-height:1.65}
    .consent{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--fs-xs);color:var(--text-dim)}
    .consent input{width:18px;height:18px;min-width:18px;margin-top:.15rem;accent-color:var(--accent);cursor:pointer}
    .consent a{color:var(--accent-bright);cursor:pointer;text-underline-offset:3px;text-decoration:underline}

    .contact-tiles{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
      gap:.8rem;
      max-width:880px;
      margin:2.6rem auto 0;
    }
    .contact-tile{
      --card-accent:var(--accent);
      display:flex;
      align-items:center;
      gap:.9rem;
      padding:1rem 1.2rem;
      border:1px solid color-mix(in srgb, var(--card-accent) 22%, var(--line));
      border-radius:var(--r-md);
      background:color-mix(in srgb, var(--card-accent) 6%, transparent);
      text-decoration:none;
      transition:transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
      min-width:0;
    }
    .contact-tile:hover{
      transform:translateY(-2px);
      border-color:color-mix(in srgb, var(--card-accent) 55%, transparent);
      background:color-mix(in srgb, var(--card-accent) 11%, transparent);
    }
    .contact-tile svg{width:21px;height:21px;color:var(--card-accent);flex-shrink:0}
    .contact-tile > span{display:flex;flex-direction:column;min-width:0}
    .contact-tile .k{
      display:block;
      font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:var(--card-accent);margin-bottom:2px;
    }
    .contact-tile .v{display:block;font-size:.8rem;color:var(--text-muted);overflow-wrap:break-word;line-height:1.4}

    /* Alte Layout-Klassen der Unterseiten */
    .section-wrap,.section{padding-block:var(--section-y);position:relative;z-index:1}
    .section-inner{width:min(100% - var(--gutter) * 2, var(--shell));margin-inline:auto}
    .section > .section-inner{padding:0}
    h2.eg,.section h2{font-size:var(--fs-h2);letter-spacing:-.03em;margin-block:.9rem .8rem}
    h2.eg em,.section h2 em{font-style:normal;color:var(--accent-bright)}
    .divider-eg{width:56px;height:2px;margin:0 0 1.8rem;border-radius:2px;background:linear-gradient(90deg,var(--accent),transparent)}
    .stats-bar{
      position:relative;z-index:1;overflow:hidden;
      display:grid;grid-template-columns:repeat(4,1fr);
      padding-block:clamp(2rem,4vw,3rem);
      padding-inline:var(--gutter);
      background:
        radial-gradient(900px 380px at 82% -60%,rgb(109 95 184 / .38),transparent 66%),
        linear-gradient(180deg,#1b1f35,#171a29);
      border-block:1px solid var(--line);
    }
    @media (max-width:720px){
      .stats-bar{grid-template-columns:repeat(2,1fr);gap:1.5rem 0}
      .stats-bar .stat-item:nth-child(2n){border-right:none}
    }

    /* ── Seitenkopf der Unterseiten ───────────────────────────────── */
    .page-hero{
      position:relative;
      z-index:1;
      text-align:center;
      padding-block:calc(var(--nav-h) + clamp(2.8rem,6vw,5rem)) clamp(2.2rem,5vw,3.5rem);
    }
    .page-hero .shell{display:grid;justify-items:center;gap:1.1rem}
    .page-hero h1{
      font-size:clamp(2.1rem,1.4rem + 3.1vw,3.5rem);
      letter-spacing:-.035em;
      line-height:1.05;
      max-width:18ch;
    }
    .page-hero h1 span,.page-hero h1 em{
      display:block;
      font-style:normal;
      background:linear-gradient(105deg,var(--accent-bright) 10%,#cfc7ff 45%,var(--accent) 90%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .page-hero p{
      font-size:var(--fs-lead);
      color:var(--text-muted);
      line-height:1.7;
      max-width:62ch;
    }

    /* ── Hinweisbox ───────────────────────────────────────────────── */
    .notice-box{
      display:flex;
      align-items:flex-start;
      gap:.7rem;
      max-width:760px;
      margin-inline:auto;
      padding:.9rem 1.2rem;
      border:1px solid var(--accent-a20);
      border-radius:var(--r-md);
      background:var(--accent-a08);
      font-size:var(--fs-sm);
      color:var(--text-muted);
      line-height:1.6;
    }
    .notice-box svg{width:18px;height:18px;flex-shrink:0;margin-top:.15rem;color:var(--accent-bright)}

    /* ── Reiter ───────────────────────────────────────────────────── */
    .tabs-nav{
      display:flex;
      flex-wrap:wrap;
      gap:.5rem;
      justify-content:center;
      margin-bottom:clamp(2rem,4vw,3rem);
    }
    .tab-btn{
      padding:.7rem 1.3rem;
      border:1px solid var(--line-strong);
      border-radius:var(--r-pill);
      background:rgb(236 238 246 / .04);
      color:var(--text-muted);
      font-size:.9rem;
      font-weight:500;
      transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
    }
    .tab-btn:hover{background:rgb(236 238 246 / .08);color:var(--text)}
    .tab-btn.active{
      background:var(--accent-a12);
      border-color:var(--accent-a35);
      color:var(--accent-bright);
    }
    .tab-panel{display:none}
    .tab-panel.active{display:block;animation:vqFade .3s var(--ease)}

    /* ── Formulare ────────────────────────────────────────────────── */
    .form-wrap{
      max-width:760px;
      margin-inline:auto;
      padding:clamp(1.5rem,3vw,2.4rem);
      background:linear-gradient(180deg,var(--surface-2),var(--surface));
      border:1px solid var(--line);
      border-radius:var(--r-lg);
      box-shadow:var(--sh-md);
    }
    .form-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:1.1rem;
      margin-bottom:1.6rem;
    }
    .form-group{display:flex;flex-direction:column;gap:.4rem;min-width:0}
    .form-group.full{grid-column:1/-1}
    .form-group > label{
      font-size:var(--fs-xs);
      font-weight:600;
      letter-spacing:.02em;
      color:var(--text-muted);
    }
    .req{color:var(--accent-bright)}
    .form-input{
      width:100%;
      padding:.85rem 1rem;
      font-size:16px;
      font-family:inherit;
      background:var(--bg-elevated);
      color:var(--text);
      border:1px solid var(--line-strong);
      border-radius:var(--r-md);
      outline:none;
      transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
    }
    .form-input::placeholder{color:var(--text-faint)}
    .form-input:focus{
      border-color:var(--accent);
      background:var(--surface);
      box-shadow:0 0 0 3px var(--accent-a20);
    }
    textarea.form-input{resize:vertical;min-height:130px;line-height:1.65}
    select.form-input option{background:var(--surface)}
    .form-hint{font-size:.75rem;color:var(--text-faint);line-height:1.5}

    .checkbox-group{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
    .checkbox-item{display:flex;align-items:center;gap:.55rem;min-width:0}
    .checkbox-item input[type=checkbox]{
      width:18px;height:18px;min-width:18px;flex-shrink:0;
      accent-color:var(--accent);cursor:pointer;
    }
    .checkbox-item > label{
      font-size:var(--fs-xs);
      font-weight:400;
      letter-spacing:0;
      color:var(--text-muted);
      cursor:pointer;
    }
    @media (max-width:520px){.checkbox-group{grid-template-columns:1fr}}

    .dsgvo-row,.consent-row{display:flex;align-items:flex-start;gap:.6rem}
    .dsgvo-row input[type=checkbox],.consent-row input[type=checkbox]{
      width:18px;height:18px;min-width:18px;flex-shrink:0;margin-top:.15rem;
      accent-color:var(--accent);cursor:pointer;
    }
    .dsgvo-row > label,.consent-row > label{
      font-size:var(--fs-xs);
      font-weight:400;
      letter-spacing:0;
      color:var(--text-dim);
      line-height:1.6;
      cursor:pointer;
    }
    .dsgvo-row a,.consent-row a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px}

    .btn-submit{
      display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
      width:100%;min-height:52px;
      padding:1rem 1.9rem;
      border-radius:var(--r-md);
      font-size:1.02rem;font-weight:600;letter-spacing:-.01em;
      background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 92%,white),var(--accent));
      color:#12131c;
      border:1px solid var(--accent-deep);
      box-shadow:inset 0 1px 0 rgb(255 255 255 / .28),0 10px 26px -14px var(--accent);
      transition:transform .14s var(--ease),box-shadow var(--dur) var(--ease);
    }
    .btn-submit:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 18px 34px -16px var(--accent)}
    .btn-submit:active{transform:translateY(0) scale(.99)}

    @media (max-width:640px){
      .form-grid{grid-template-columns:1fr}
    }

    /* ── Rechtstexte / Dokumentseiten ─────────────────────────────── */
    .doc{
      width:min(100% - var(--gutter) * 2, 860px);
      margin-inline:auto;
      padding-block:calc(var(--nav-h) + clamp(2.5rem,5vw,4rem)) clamp(3.5rem,7vw,5.5rem);
    }
    .doc .page-header{
      margin-bottom:clamp(2rem,4vw,3rem);
      padding-bottom:clamp(1.5rem,3vw,2rem);
      border-bottom:1px solid var(--line);
    }
    .doc .page-header h1{
      font-size:clamp(2rem,1.4rem + 2.6vw,3rem);
      letter-spacing:-.035em;
      margin-block:.9rem .5rem;
    }
    .doc .page-header .sub{font-size:var(--fs-sm);color:var(--text-dim)}
    .section-label{
      display:flex;
      align-items:center;
      gap:.8rem;
      margin:2.4rem 0 1rem;
      font-size:var(--fs-eyebrow);
      font-weight:700;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--accent-bright);
    }
    .section-label::after{content:'';flex:1;height:1px;background:var(--line)}
    .box{
      padding:1.4rem 1.7rem;
      margin-bottom:.8rem;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--r-md);
    }
    .box h2{
      margin-bottom:.9rem;
      font-size:var(--fs-eyebrow);
      font-weight:700;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--accent-bright);
    }
    .box h3{font-size:1rem;margin:1.2rem 0 .5rem}
    .box p,.box li{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.85;margin-bottom:.4rem}
    .box p:last-child,.box li:last-child{margin-bottom:0}
    .box ul,.box ol{padding-left:1.3rem;list-style:disc;margin:.5rem 0}
    .box ol{list-style:decimal}
    .box a{color:var(--accent-bright);text-underline-offset:3px}
    .box a:hover{text-decoration:underline}
    .box strong{color:var(--text);font-weight:600}
    .box em{color:var(--text-dim);font-style:normal}
    .box table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);margin:.6rem 0}
    .box th{text-align:left;padding:.5rem .7rem;background:var(--surface-3);color:var(--text-dim);font-size:var(--fs-eyebrow);letter-spacing:.08em;text-transform:uppercase}
    .box td{padding:.5rem .7rem;border-bottom:1px solid var(--line);color:var(--text-muted)}

    /* ── Fußzeile ─────────────────────────────────────────────────── */
    .site-footer{
      position:relative;
      z-index:1;
      background:linear-gradient(180deg, transparent, rgb(10 11 17 / .85));
      border-top:1px solid var(--line);
      padding-block:clamp(3rem,6vw,4.5rem) 2rem;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.6fr repeat(4, minmax(0,1fr));
      gap:clamp(1.5rem,3vw,2.5rem);
      margin-bottom:3rem;
    }
    .footer-logo{font-size:1.25rem;font-weight:600;letter-spacing:-.03em;margin-bottom:.5rem}
    .footer-logo span{color:var(--accent-bright)}
    .footer-brand .claim{font-size:var(--fs-xs);color:var(--text-faint);margin-bottom:.8rem}
    .footer-brand p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.7;max-width:34ch}
    .footer-social{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
    .footer-social a{
      display:grid;place-items:center;
      width:42px;height:42px;
      border-radius:var(--r-md);
      border:1px solid var(--line);
      background:rgb(236 238 246 / .03);
      color:var(--text-muted);
      transition:transform var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    .footer-social a:hover{
      transform:translateY(-2px);
      color:var(--accent-bright);
      border-color:var(--accent-a35);
      background:var(--accent-a08);
    }
    .footer-col h2{
      font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
      color:var(--text-faint);margin-bottom:1rem;
    }
    .footer-col ul{display:grid;gap:.6rem}
    .footer-col a{
      color:var(--text-muted);
      text-decoration:none;
      font-size:var(--fs-sm);
      cursor:pointer;
      transition:color var(--dur) var(--ease);
    }
    .footer-col a:hover{color:var(--accent-bright)}
    .footer-bottom{
      display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
      padding-top:1.6rem;
      border-top:1px solid var(--line);
      font-size:var(--fs-xs);
      color:var(--text-faint);
    }
    .footer-bottom nav{display:flex;gap:1.3rem;flex-wrap:wrap}
    .footer-bottom a{color:var(--text-faint);text-decoration:none;cursor:pointer;transition:color var(--dur) var(--ease)}
    .footer-bottom a:hover{color:var(--accent-bright)}
    @media (max-width:900px){
      .footer-grid{grid-template-columns:repeat(2,1fr)}
      .footer-brand{grid-column:1/-1}
    }
    @media (max-width:520px){
      .footer-grid{grid-template-columns:1fr;gap:2rem}
      .footer-bottom{flex-direction:column;align-items:flex-start}
    }

    /* ── Schwebende Elemente ──────────────────────────────────────── */
    #scroll-top{
      position:fixed;
      right:clamp(1rem,3vw,2rem);
      bottom:clamp(1rem,3vw,2rem);
      display:none;
      place-items:center;
      width:46px;height:46px;
      border-radius:50%;
      background:var(--surface-2);
      border:1px solid var(--line-strong);
      color:var(--accent-bright);
      box-shadow:var(--sh-md);
      z-index:100;
      transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    #scroll-top svg{width:18px;height:18px}
    #scroll-top.visible{display:grid}
    #scroll-top:hover{transform:translateY(-3px);background:var(--surface-3);box-shadow:var(--sh-glow)}

    #ki-trigger{
      position:fixed;
      right:clamp(1rem,3vw,2rem);
      bottom:calc(clamp(1rem,3vw,2rem) + 58px);
      display:grid;
      place-items:center;
      width:46px;height:46px;
      border-radius:50%;
      background:var(--surface-2);
      border:1px solid var(--line-strong);
      color:var(--accent-bright);
      box-shadow:var(--sh-md);
      z-index:99;
      transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    #ki-trigger:hover{transform:translateY(-3px);background:var(--surface-3);box-shadow:var(--sh-glow)}

    .toast{
      position:fixed;
      left:50%;
      bottom:5.5rem;
      z-index:999;
      translate:-50% 120px;
      max-width:min(92vw,460px);
      padding:.85rem 1.4rem;
      background:var(--surface-2);
      border:1px solid var(--line-strong);
      border-radius:var(--r-md);
      box-shadow:var(--sh-lg);
      font-size:.9rem;
      pointer-events:none;
      transition:translate .32s var(--ease), opacity .32s var(--ease);
      opacity:0;
    }
    .toast.show{translate:-50% 0;opacity:1}
    .toast.success{border-color:rgb(37 199 139 / .45);color:#6fe4b6}
    .toast.error{border-color:rgb(255 90 90 / .45);color:#ff9c9c}

    #cookie-banner{
      display:none;
      position:fixed;
      inset-inline:0;
      bottom:0;
      z-index:9999;
      align-items:center;
      justify-content:space-between;
      gap:1.2rem;
      flex-wrap:wrap;
      padding:1.1rem var(--gutter);
      background:rgb(21 24 36 / .96);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      border-top:1px solid var(--line-strong);
    }
    #cookie-banner p:first-child{font-weight:600;margin-bottom:.25rem;display:flex;align-items:center;gap:.4rem}
    #cookie-banner p:last-child{font-size:var(--fs-xs);color:var(--text-muted)}
    #cookie-banner a{color:var(--accent-bright);cursor:pointer}
  }

  /* ─── UNTERSEITEN IM DOKUMENT (Impressum / Datenschutz / VoltIQ) ─── */
@layer pages {
    .legal-page{
      max-width:820px;
      margin-inline:auto;
      padding:calc(var(--nav-h) + 3.5rem) var(--gutter) 5rem;
    }
    .legal-page h1{font-size:clamp(2rem,1.4rem + 2.4vw,2.8rem);color:var(--text);margin-bottom:2rem}
    .legal-page h2{font-size:1.3rem;margin:2.2rem 0 .8rem}
    .legal-page p,.legal-page li{color:var(--text-muted);line-height:1.85;margin-bottom:.8rem;font-size:.95rem}
    .legal-page ul{padding-left:1.4rem;list-style:disc;margin-bottom:1rem}
    .legal-page a{color:var(--accent-bright)}
    .legal-page .back-btn{
      display:inline-flex;align-items:center;gap:.5rem;
      margin-bottom:2rem;
      color:var(--accent-bright);
      font-weight:600;
    }
    .legal-page .back-btn:hover{text-decoration:underline;text-underline-offset:3px}

}


  /* ───────────────────────────── UTILITIES ────────────────────────── */
  @layer utilities {
    .visually-hidden{
      position:absolute!important;
      width:1px;height:1px;
      margin:-1px;padding:0;border:0;
      clip-path:inset(50%);
      overflow:hidden;white-space:nowrap;
    }
    .text-center{text-align:center}
    .mt-lg{margin-top:2.5rem}
  }

  /* iOS: black-translucent zieht Inhalt unter die Statusleiste. */
  @supports (padding: env(safe-area-inset-top)) {
    body{padding-top:env(safe-area-inset-top)}
    .site-header{top:env(safe-area-inset-top)}
  }