/* =====================================================================
   Klivantis — Sales-Webseite Team-Training-App — styles.css
   =====================================================================
   Design "Dark Statement" (Konzept 1, freigegeben 2026-08-02).
   Alle Schriften self-hosted (DSGVO — kein Google-Fonts-Request).
   Fallback-Stacks greifen, falls woff2 nicht lädt.
   ===================================================================== */

/* ---------- Self-hosted Fonts ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/bricolage-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url('../fonts/bricolage-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700.woff2') format('woff2')}

  /* ============ Design-Tokens ============ */
  :root{
    --ink:#12121A; --ink-soft:#1A1A24; --ink-card:#1E1E2A;
    --accent:#5B4FE9; --accent-hover:#4437C9; --accent-soft:#9F95FF;
    --paper:#F6F6F8; --white:#FFFFFF; --line:#E5E5EB; --gray:#6B6B78;

    /* Theme-abhängig (Default: Light) */
    --bg:var(--paper); --bg-elev:#FFFFFF; --card:#FFFFFF;
    --tx:#12121A; --tx-soft:#55555F; --tx-mute:#6B6B78;
    --border:#E5E5EB; --shadow:0 2px 16px rgba(18,18,26,.06);
  }
  [data-theme="dark"]{
    --bg:#12121A; --bg-elev:#16161F; --card:#1E1E2A;
    --tx:#EDEDF2; --tx-soft:#B9B9C7; --tx-mute:#8D8DA3;
    --border:rgba(255,255,255,.09); --shadow:0 2px 16px rgba(0,0,0,.35);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--tx);line-height:1.65;transition:background .35s,color .35s}
  img{max-width:100%;height:auto;display:block}
  /* Verstecktes SVG-Sprite (Logo-Icon per <use>) — display:none statt der
     früheren inline position:absolute, die Chromium auf dem SVG-Root-
     Element nicht griff (svg.style.position blieb leer) und dadurch eine
     Inline-Zeilenbox in Höhe von body{line-height} erzeugte: sichtbar als
     heller/dunkler Balken über der Navigation (Bugfix 03.08.2026). Referenzen
     per <use href="#mark"> funktionieren mit display:none unverändert. */
  .sprite-sheet{display:none}
  .container{max-width:1160px;margin:0 auto;padding:0 28px}
  /* Headline-Typo: Bricolage Grotesque (Kai-Entscheidung 03.08.2026, ersetzt Sora); Wortmarke bleibt Space Grotesk */
  :root{--font-head:'Bricolage Grotesque';--head-weight:700;--head-track:-1.2px}
  h1,h2,h3{font-family:var(--font-head),sans-serif;font-weight:var(--head-weight);letter-spacing:var(--head-track)}
  section{padding:96px 0}
  .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
  .eyebrow::before{content:"";width:26px;height:2px;background:var(--accent)}
  [data-theme="dark"] .eyebrow{color:var(--accent-soft)}
  [data-theme="dark"] .eyebrow::before{background:var(--accent-soft)}
  .sec-h2{font-size:clamp(28px,3.6vw,40px);line-height:1.12;margin-bottom:16px;max-width:720px}
  .sec-lead{color:var(--tx-soft);font-size:16.5px;max-width:640px;margin-bottom:44px}

  /* ============ Header ============ */
  header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent}
  header .container{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
  header.scrolled{background:var(--bg-elev);border-bottom-color:var(--border);box-shadow:var(--shadow)}
  .logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;transition:color .3s}
  header.scrolled .logo{color:var(--tx)}
  .logo svg{height:34px;width:auto}
  .logo .wm{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:15px;line-height:1}
  .logo .sb{display:block;font-size:8px;letter-spacing:.36em;text-transform:uppercase;opacity:.65;margin-top:3px;line-height:1}
  nav.main{display:flex;gap:26px;font-size:13.5px;font-weight:500}
  nav.main a{color:rgba(255,255,255,.75);text-decoration:none;transition:color .2s}
  header.scrolled nav.main a{color:var(--tx-mute)}
  nav.main a:hover{color:var(--accent-soft)}
  .h-right{display:flex;align-items:center;gap:14px}
  .lang{display:flex;border:1px solid rgba(255,255,255,.25);border-radius:100px;overflow:hidden;font-size:11.5px;font-weight:600}
  header.scrolled .lang{border-color:var(--border)}
  .lang a,.lang span{padding:5px 11px;color:rgba(255,255,255,.7);cursor:pointer;text-decoration:none}
  header.scrolled .lang a,header.scrolled .lang span{color:var(--tx-mute)}
  .lang .on,header.scrolled .lang .on,.oc-tools .lang .on{background:var(--accent-hover);color:#fff !important;font-weight:700}
  .theme-btn{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:rgba(255,255,255,.85);cursor:pointer;display:grid;place-items:center;font-size:15px;transition:all .2s}
  header.scrolled .theme-btn{border-color:var(--border);color:var(--tx)}
  .theme-btn:hover{border-color:var(--accent-soft);color:var(--accent-soft)}
  .btn{display:inline-block;background:var(--accent);color:#fff;padding:10px 20px;border-radius:9px;font-weight:600;font-size:13.5px;text-decoration:none;transition:background .2s,transform .2s}
  .btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
  .btn.big{padding:14px 28px;font-size:15px}
  .btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff}
  .btn.ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

  /* ============ Hero (Full-Bleed) ============ */
  .hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:#0D0D14;padding:0}
  /* Foto-Ebene: JPG-Basis (universeller Fallback), WebP per @supports als Enhancement.
     Desktop-Crop 16:9, Motiv-Schwerpunkt rechts (74%/42%), damit Headline links frei bleibt.
     Retina-Variante (3200x1800, faktisch 1.33x statt exakt 2x) als hochauflösende
     Alternative eingebunden, Browser wählt selbst nach Displaydichte. */
  .hero-photo{position:absolute;inset:0;
      background-image:url("../img/hero/eu-ai-act-hero-desktop.jpg");
      background-size:cover;background-position:74% 42%}
  @supports (background-image: image-set(url(1x.jpg) 1x)){
    .hero-photo{background-image:image-set(
        url("../img/hero/eu-ai-act-hero-desktop.webp") type("image/webp") 1x,
        url("../img/hero/eu-ai-act-hero-desktop-retina.webp") type("image/webp") 1.33x,
        url("../img/hero/eu-ai-act-hero-desktop.jpg") type("image/jpeg") 1x,
        url("../img/hero/eu-ai-act-hero-desktop-retina.jpg") type("image/jpeg") 1.33x)}
  }
  /* Mobile-Crop: eigene, höher/schmaler geschnittene Datei statt Desktop-Bild verkleinert
     (spart Payload, vermeidet Ausschnitt-Verlust bei 88vh auf Hochformat) */
  @media(max-width:640px){
    .hero-photo{
        background-image:url("../img/hero/eu-ai-act-hero-mobile.jpg");
        background-position:center 30%}
    @supports (background-image: image-set(url(1x.jpg) 1x)){
      .hero-photo{background-image:image-set(
          url("../img/hero/eu-ai-act-hero-mobile.webp") type("image/webp") 1x,
          url("../img/hero/eu-ai-act-hero-mobile.jpg") type("image/jpeg") 1x)}
    }
  }
  /* Team-Training-Produktseite (Etappe 2, 27.08.2026): eigenes Hero-Bild
     ueber eine zusaetzliche, rein additive Modifier-Klasse. Aendert nichts
     an .hero-photo fuer die eu-ai-act-Variante oben - diese Regeln greifen
     nur, wenn "hero-team-training" zusaetzlich zu "hero-photo" auf dem
     Element steht (siehe public/sites/team-training/*/index.html).
     Bildmotiv am 27.08.2026 von Kai generiert und eingebaut: schwebender
     Stapel Glasplatten, die oberste loest sich in Partikel auf. Quellbild
     lag mit 1672x941 vor, Desktop und Retina sind daraus hochskaliert
     (Faktor 1,44 bzw. 1,91), bei einem so weichen Motiv vertretbar. Fuer
     Mobil ein 4:5-Ausschnitt mit Versatz nach rechts, damit der Stapel
     ganz im Bild bleibt und oben links Raum fuer die Ueberschrift steht.
     Faellt eine Bilddatei aus, tragen die darunterliegenden Verlaufs-
     Ebenen (.hero-bg/.hero-grid-lines/.hero-grad) den Hero allein. */
  .hero-photo.hero-team-training{
      background-image:url("../img/hero/team-training-hero-desktop.jpg");
      background-size:cover;background-position:74% 42%}
  @supports (background-image: image-set(url(1x.jpg) 1x)){
    .hero-photo.hero-team-training{background-image:image-set(
        url("../img/hero/team-training-hero-desktop.webp") type("image/webp") 1x,
        url("../img/hero/team-training-hero-desktop-retina.webp") type("image/webp") 1.33x,
        url("../img/hero/team-training-hero-desktop.jpg") type("image/jpeg") 1x,
        url("../img/hero/team-training-hero-desktop-retina.jpg") type("image/jpeg") 1.33x)}
  }
  @media(max-width:640px){
    .hero-photo.hero-team-training{
        background-image:url("../img/hero/team-training-hero-mobile.jpg");
        background-position:center 30%}
    @supports (background-image: image-set(url(1x.jpg) 1x)){
      .hero-photo.hero-team-training{background-image:image-set(
          url("../img/hero/team-training-hero-mobile.webp") type("image/webp") 1x,
          url("../img/hero/team-training-hero-mobile.jpg") type("image/jpeg") 1x)}
    }
  }
  /* Farbwäsche über dem Foto: Brand-Tint + Lesbarkeit, Deckkraft passend zum echten
     Motiv (Waage) auf 0.74 gesetzt (03.08.2026) */
  .hero-bg{position:absolute;inset:0;opacity:.74;background:
      radial-gradient(ellipse 75% 85% at 74% 38%, rgba(91,79,233,.38) 0%, transparent 58%),
      radial-gradient(ellipse 45% 50% at 88% 72%, rgba(159,149,255,.18) 0%, transparent 60%),
      radial-gradient(ellipse 50% 60% at 20% 85%, rgba(91,79,233,.10) 0%, transparent 55%),
      linear-gradient(155deg,#1A1A28 0%, #12121A 48%, #0C0C13 100%)}
  .hero-grid-lines{position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(159,149,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(159,149,255,.07) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 70% 80% at 70% 45%,#000 20%,transparent 75%)}
  .hero-grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,12,19,.9) 0%,rgba(12,12,19,.62) 40%,rgba(12,12,19,.08) 72%)}
  .hero .particle{position:absolute;background:var(--accent);border-radius:2px;opacity:.7;animation:float 7s ease-in-out infinite}
  @keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(8deg)}}
  .hero-inner{position:relative;width:100%;padding-top:140px;padding-bottom:110px}
  .hero-copy{max-width:640px}
  .pill{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;padding:8px 16px;border-radius:100px;background:rgba(91,79,233,.18);color:var(--accent-soft);border:1px solid rgba(159,149,255,.3);margin-bottom:26px}
  .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-soft);animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
  .hero h1{color:#fff;font-size:clamp(34px,5.2vw,62px);line-height:1.05;letter-spacing:-1.8px;margin-bottom:22px}
  .hero h1 em{font-style:normal;color:var(--accent-soft)}
  .hero p.sub{color:#A5A5B8;font-size:17.5px;max-width:500px;margin-bottom:34px}
  .hero-btns{display:flex;gap:14px;flex-wrap:wrap}
  .hero-ai{position:absolute;right:16px;bottom:14px;font-size:10px;color:rgba(255,255,255,.45);background:rgba(0,0,0,.4);padding:4px 9px;border-radius:5px;z-index:2}
  .scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);color:rgba(255,255,255,.4);font-size:20px;animation:cue 2s infinite}
  @keyframes cue{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

  /* ============ Ticker ============ */
  .ticker{background:#0C0C13;border-top:1px solid rgba(255,255,255,.08);padding:0}
  .ticker-grid{display:grid;grid-template-columns:repeat(4,1fr)}
  .tick{padding:30px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
  .tick:last-child{border-right:none}
  .tick b{display:block;font-family:var(--font-head),sans-serif;font-size:clamp(20px,2.6vw,30px);color:var(--accent-soft);letter-spacing:-.8px;margin-bottom:2px}
  .tick span{display:block;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#6B6B78;text-wrap:balance}

  /* ============ Reveal ============ */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
  .d0{transition-delay:0ms}
  .d80{transition-delay:80ms}
  .d100{transition-delay:100ms}
  .d120{transition-delay:120ms}
  .d200{transition-delay:200ms}
  .d220{transition-delay:220ms}
  .d240{transition-delay:240ms}
  .d300{transition-delay:300ms}
  .hero i.particle:nth-of-type(1){width:9px;height:9px;top:22%;left:56%;animation-delay:0s}
  .hero i.particle:nth-of-type(2){width:5px;height:5px;top:64%;left:64%;animation-delay:1.2s}
  .hero i.particle:nth-of-type(3){width:7px;height:7px;top:34%;right:9%;animation-delay:.6s}
  .hero i.particle:nth-of-type(4){width:4px;height:4px;top:74%;right:22%;animation-delay:2s}
  .hero i.particle:nth-of-type(5){width:6px;height:6px;top:16%;right:26%;animation-delay:1.6s}
  .hero i.particle:nth-of-type(6){width:5px;height:5px;top:52%;right:34%;animation-delay:.9s}
  footer .logo svg{height:30px}
  footer .logo .wm{font-size:13px}
  .btn.btn-full{width:100%}
  #kontakt .sec-lead{margin-bottom:20px}
  #kontakt .eyebrow{color:var(--accent-soft)}
  .cc-modal #ccSave{display:none}
  .cc-modal.show-cats #ccSave{display:inline-block}
  .cc-modal.show-cats #ccSettings{display:none}
  .reveal.vis{opacity:1;transform:none}

  /* ============ §01 Pflicht ============ */
  .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px}
  .fact{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
  .fact .date{font-family:var(--font-head),sans-serif;font-size:24px;color:var(--accent);letter-spacing:-.5px;margin-bottom:8px}
  [data-theme="dark"] .fact .date{color:var(--accent-soft)}
  .fact h3{font-size:16.5px;margin-bottom:8px}
  .fact p{font-size:13.5px;color:var(--tx-soft)}
  .fact.warn{border-top:3px solid var(--accent)}
  .clarify{margin-top:26px;background:rgba(91,79,233,.07);border:1px solid rgba(91,79,233,.22);border-radius:14px;padding:20px 24px;font-size:14px;color:var(--tx-soft)}
  .clarify b{color:var(--tx)}

  /* ============ Kompetenz-Test (zwischen §01 und §02) ============ */
  /* Deutlich reduzierter Abstand zu §01: der Standard-Sektionsabstand
     (§01 padding-bottom 96px + #test padding-top) wirkte hier wie eine
     Design-Lücke statt wie ein bewusster Übergang (Kai-Feedback 05.08.2026,
     zweite Runde: erste Reduktion betraf nur #test, §01 hatte weiterhin
     die volle Standard-Bottom-Padding von 96px - jetzt beide halbiert) */
  #pflicht{padding-bottom:40px}
  #test{padding-top:30px}
  .quiz-box{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:40px;box-shadow:var(--shadow);position:relative;overflow:hidden}
  .quiz-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-soft))}
  /* [hidden] muss die .quiz-intro/-run/-result-Basisregeln (display:flex/block)
     schlagen, sonst gewinnt bei gleicher Spezifität die spätere Klassenregel
     und das Element bleibt trotz hidden-Attribut sichtbar (Bug 05.08.2026:
     "Jetzt testen" blieb neben dem Ergebnis stehen) */
  .quiz-intro[hidden],.quiz-run[hidden],.quiz-result[hidden]{display:none}
  .quiz-intro{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
  .quiz-intro p{font-size:16.5px;color:var(--tx-soft);max-width:600px;margin:0}
  .quiz-progress{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--tx-mute)}
  .quiz-bar{flex:1;max-width:320px;height:6px;border-radius:100px;background:var(--border);overflow:hidden}
  .quiz-bar-fill{height:100%;width:0;background:var(--accent);border-radius:100px;transition:width .4s ease}
  .quiz-bar-fill.qp10{width:10%}
  .quiz-bar-fill.qp20{width:20%}
  .quiz-bar-fill.qp30{width:30%}
  .quiz-bar-fill.qp40{width:40%}
  .quiz-bar-fill.qp50{width:50%}
  .quiz-bar-fill.qp60{width:60%}
  .quiz-bar-fill.qp70{width:70%}
  .quiz-bar-fill.qp80{width:80%}
  .quiz-bar-fill.qp90{width:90%}
  .quiz-bar-fill.qp100{width:100%}
  .quiz-q-text{font-family:var(--font-head),sans-serif;font-weight:600;font-size:19px;letter-spacing:-.3px;margin-bottom:22px;max-width:680px}
  .quiz-options{display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
  .quiz-opt{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--border);border-radius:12px;padding:14px 16px;cursor:pointer;font-size:14.5px;color:var(--tx-soft);transition:border-color .2s,background .2s,color .2s}
  .quiz-opt:hover{border-color:var(--accent-soft)}
  .quiz-opt input{margin-top:3px;accent-color:var(--accent);flex:none}
  .quiz-opt.sel{border-color:var(--accent);background:rgba(91,79,233,.07);color:var(--tx)}
  /* Grün/Rot wie im Prüfungsergebnis der Team-Training-App
     (includes/views/exams/result.php, .alert.success/.alert.error) */
  .quiz-result-inner{text-align:center;padding:28px 24px;border-radius:18px;border:1px solid}
  .quiz-result-inner.is-pass{background:#F0FDF4;border-color:#BBF7D0}
  .quiz-result-inner.is-fail{background:#FEF2F2;border-color:#FECACA}
  [data-theme="dark"] .quiz-result-inner.is-pass{background:rgba(21,128,61,.18);border-color:rgba(34,197,94,.35)}
  [data-theme="dark"] .quiz-result-inner.is-fail{background:rgba(153,27,27,.18);border-color:rgba(248,113,113,.35)}
  .quiz-score{font-family:var(--font-head),sans-serif;font-weight:700;font-size:clamp(40px,6vw,56px);letter-spacing:-1.5px;margin-bottom:10px}
  .quiz-result-inner.is-pass .quiz-score{color:#166534}
  .quiz-result-inner.is-fail .quiz-score{color:#991B1B}
  [data-theme="dark"] .quiz-result-inner.is-pass .quiz-score{color:#86EFAC}
  [data-theme="dark"] .quiz-result-inner.is-fail .quiz-score{color:#FCA5A5}
  .quiz-result-inner p{max-width:520px;margin:0 auto 22px;font-size:15.5px}
  .quiz-result-inner.is-pass p{color:#166534}
  .quiz-result-inner.is-fail p{color:#991B1B}
  [data-theme="dark"] .quiz-result-inner.is-pass p{color:#BBF7D0}
  [data-theme="dark"] .quiz-result-inner.is-fail p{color:#FECACA}
  .quiz-result-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  @media(max-width:640px){
    #pflicht{padding-bottom:24px}
    #test{padding-top:20px}
    .quiz-box{padding:26px 22px}
    .quiz-intro{flex-direction:column;align-items:flex-start}
  }

  /* ============ §02 Produkt ============ */
  .bg-elev{background:var(--bg-elev)}
  .shot{border-radius:16px;overflow:hidden;border:1px solid var(--border);box-shadow:0 24px 60px rgba(18,18,26,.16);background:var(--card)}
  .shot-bar{display:flex;align-items:center;gap:7px;background:var(--ink);padding:11px 16px}
  .shot-bar i{width:10px;height:10px;border-radius:50%;background:#3A3A48;display:block}
  .shot-bar .u{margin-left:10px;background:rgba(255,255,255,.08);border-radius:6px;font-size:11px;color:#8D8DA3;padding:3px 16px}
  .shots-sub{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
  .cap{font-size:13px;color:var(--tx-mute);margin-top:12px;display:flex;align-items:center;gap:8px}
  .cap::before{content:"";width:8px;height:8px;background:var(--accent);border-radius:2px;flex:none}
  .langs{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px;align-items:center}
  .lang-chip{font-size:13px;font-weight:600;border:1px solid var(--border);background:var(--card);border-radius:100px;padding:8px 18px;display:flex;gap:8px;align-items:center}
  .lang-chip.soon{border-style:dashed;color:var(--tx-mute);font-weight:500}
  .langs-note{font-size:13px;color:var(--tx-mute);margin-top:14px}

  /* ============ §03 Funktionen ============ */
  .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
  .b-card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:28px;position:relative;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
  .b-card:hover{transform:translateY(-5px);border-color:var(--accent);box-shadow:0 14px 40px rgba(91,79,233,.14)}
  .b-card h3{font-size:19px;margin-bottom:8px}
  .b-card p{font-size:13.8px;color:var(--tx-soft);max-width:440px}
  .span2{grid-column:span 2}.span3{grid-column:span 3}.span6{grid-column:span 6}
  .b-card .ic{width:42px;height:42px;border-radius:11px;background:rgba(91,79,233,.1);display:grid;place-items:center;margin-bottom:16px;color:var(--accent);transition:transform .3s}
  .b-card:hover .ic{transform:translateY(-3px) rotate(-6deg)}
  [data-theme="dark"] .b-card .ic{background:rgba(91,79,233,.22);color:var(--accent-soft)}
  .b-card.dark{background:linear-gradient(150deg,#1A1A28,#12121A);border-color:rgba(255,255,255,.1)}
  .b-card.dark h3{color:#fff}
  .b-card.dark p{color:#A5A5B8}
  .b-card.dark .ic{background:rgba(91,79,233,.28);color:var(--accent-soft)}
  .b-card.accent{background:linear-gradient(120deg,#4437C9,var(--accent) 45%,#7B6FF2);border:none}
  .b-card.accent h3{color:#fff}
  .b-card.accent p{color:rgba(255,255,255,.88);max-width:none}
  .media-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
  .media-chips span{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;border:1px solid var(--border);border-radius:100px;padding:7px 15px;transition:transform .25s,border-color .25s}
  .media-chips span i{width:8px;height:8px;border-radius:2px;background:var(--accent);display:block}
  .b-card:hover .media-chips span{border-color:var(--accent);transform:translateY(-2px)}
  .qr-deco{position:absolute;right:-14px;top:-14px;display:grid;grid-template-columns:repeat(5,15px);gap:5px;opacity:.55;transform:rotate(8deg);pointer-events:none}
  .qr-deco i{width:15px;height:15px;background:var(--accent);border-radius:3px}
  .qr-deco i:nth-child(2n){opacity:.35}
  .qr-deco i:nth-child(3n){opacity:.75}
  .roles-row{display:flex;margin-top:16px}
  .roles-row span{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#7B6FF2);color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700;border:2px solid var(--card);margin-left:-9px}
  .roles-row span:first-child{margin-left:0}
  .sec-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
  .sec-chips span{font-size:12.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:7px 15px}
  .marquee{margin-top:26px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee-track{display:flex;gap:12px;width:max-content;animation:marquee 34s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .mq-chip{font-size:13px;font-weight:600;color:var(--tx-soft);border:1px dashed var(--border);border-radius:100px;padding:9px 18px;white-space:nowrap}
  @keyframes marquee{to{transform:translateX(-50%)}}

  /* ============ §04 Modelle ============ */
  .models{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .model{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column;position:relative;transition:transform .3s,border-color .3s,box-shadow .3s}
  .model:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 18px 44px rgba(91,79,233,.16)}
  .model.hl{border-color:var(--accent);background:linear-gradient(180deg,rgba(91,79,233,.08),var(--card) 58%);box-shadow:0 8px 30px rgba(91,79,233,.14)}
  .model .tag{position:absolute;top:-11px;left:24px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:100px}
  .model h3{font-size:19px;margin-bottom:4px}
  .model .price{font-family:var(--font-head),sans-serif;font-weight:700;font-size:20px;letter-spacing:-.5px;color:var(--tx);margin:0 0 12px}
  .model .price small{display:block;font-size:12px;font-weight:600;color:var(--tx-mute);letter-spacing:0;margin:2px 0 0}
  .model .price s{font-weight:600;font-size:15px;color:var(--tx-mute);text-decoration:line-through;margin-right:8px}
  .model .price .now{color:var(--accent)}
  [data-theme="dark"] .model .price .now{color:var(--accent-soft)}
  .model .promo{font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:100px;padding:4px 10px 4px 10.3px;display:inline-block;text-align:center;margin:0 0 10px}
  [data-theme="dark"] .model .promo{color:var(--accent-soft);border-color:var(--accent-soft)}
  .model .mode{display:block;font-size:11.5px;color:var(--accent);font-weight:700;letter-spacing:1.2px;text-transform:uppercase;line-height:1.7;margin-bottom:16px;min-height:40px}
  [data-theme="dark"] .model .mode{color:var(--accent-soft)}
  .model ul{list-style:none;margin-bottom:22px;flex:1}
  .model li{font-size:13.2px;color:var(--tx-soft);padding:7px 0 7px 24px;position:relative;border-bottom:1px dashed var(--border)}
  .model li:last-child{border-bottom:none}
  .model li::before{content:"✓";position:absolute;left:2px;color:var(--accent);font-weight:700}
  .model .btn{text-align:center}
  .direct-note{margin-top:30px;display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:20px 24px;font-size:14px;color:var(--tx-soft)}
  .direct-note b{color:var(--tx)}
  .direct-note .ic{color:var(--accent);flex:none;margin-top:2px}
  .offer-note{margin-top:30px;display:flex;gap:14px;align-items:flex-start;background:rgba(91,79,233,.06);border:1px solid var(--accent);border-left:3px solid var(--accent);border-radius:12px;padding:20px 24px;font-size:14px;color:var(--tx-soft)}
  .offer-note b{color:var(--tx)}
  .offer-note .ic{color:var(--accent);flex:none;margin-top:2px}
  .offer-note .tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#fff;background:var(--accent);border-radius:100px;padding:3px 10px 3px 10.3px;text-align:center;margin-right:8px;vertical-align:1px}
  [data-theme="dark"] .offer-note{background:rgba(91,79,233,.14);border-color:var(--accent-soft)}
  [data-theme="dark"] .offer-note .ic{color:var(--accent-soft)}
  [data-theme="dark"] .offer-note .tag{background:var(--accent-soft);color:#12121A}

  /* ============ §05 Kurse ============ */
  .courses{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .course{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;transition:transform .25s}
  .course:hover{transform:translateY(-4px)}
  .course .head{height:156px;position:relative;display:flex;align-items:flex-end;padding:16px 22px;overflow:hidden;background:linear-gradient(135deg,#1A1A28,#2A2456)}
  .course .head img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .course:hover .head img{transform:scale(1.06)}
  .course .head::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,16,.88) 0%,rgba(10,10,16,.35) 52%,rgba(10,10,16,.12) 100%)}
  .course .head .kbadge{position:absolute;top:14px;left:22px;z-index:2;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:rgba(18,18,26,.55);border:1px solid rgba(255,255,255,.3);padding:4px 10px;border-radius:100px;backdrop-filter:blur(3px)}
  .course .head .aib{position:absolute;top:14px;right:12px;z-index:2;font-size:9px;color:rgba(255,255,255,.75);background:rgba(0,0,0,.45);padding:3px 8px;border-radius:5px}
  .course .head h3{position:relative;z-index:2;color:#fff;font-size:18px;line-height:1.25;letter-spacing:-.4px}
  .course .body{padding:20px 22px 24px}
  .course .body p{font-size:13.5px;color:var(--tx-soft);margin-bottom:16px}
  .course .meta{display:flex;flex-wrap:wrap;gap:8px}
  .course .meta span{font-size:11.5px;background:rgba(91,79,233,.08);color:var(--accent);border-radius:100px;padding:4px 11px;font-weight:600}
  [data-theme="dark"] .course .meta span{background:rgba(91,79,233,.2);color:var(--accent-soft)}
  .courses-note{margin-top:26px;font-size:14px;color:var(--tx-mute)}
  .courses-toggle-wrap{text-align:center;margin-top:28px}
  .courses-toggle-wrap .chev{margin-left:6px;vertical-align:1px;transition:transform .2s}
  .courses-toggle-wrap .chev.open{transform:rotate(180deg)}

  /* ============ §06 FAQ ============ */
  .faq{width:100%}
  .faq details{border-bottom:1px solid var(--border)}
  .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-family:var(--font-head),sans-serif;font-weight:600;font-size:16.5px;letter-spacing:-.3px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:22px;color:var(--accent);transition:transform .25s;flex:none}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq .a{padding:0 4px 22px;font-size:14.5px;color:var(--tx-soft);max-width:700px}

  /* ============ §07 Kontakt (dark) ============ */
  .contact{background:#0D0D14;color:#EDEDF2;position:relative;overflow:hidden;color-scheme:dark}
  .contact .glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(91,79,233,.22) 0%,transparent 65%);top:-160px;right:-120px;pointer-events:none}
  .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;position:relative}
  .contact h2{color:#fff}
  .contact .sec-lead{color:#A5A5B8}
  .c-points{list-style:none;margin-top:8px}
  .c-points li{padding:10px 0 10px 32px;position:relative;font-size:15px;color:#B9B9C7}
  .c-points li::before{content:"✓";position:absolute;left:0;top:10px;width:20px;height:20px;border-radius:50%;background:rgba(91,79,233,.25);color:var(--accent-soft);font-size:11px;display:grid;place-items:center}
  .c-mail{margin-top:26px;font-size:14px;color:#8D8DA3}
  .c-mail a{color:var(--accent-soft);text-decoration:none}
  .form{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:32px}
  .f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .f-field{margin-bottom:16px}
  .f-field label{display:block;font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#8D8DA3;margin-bottom:7px}
  .f-field input,.f-field select,.f-field textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:12px 14px;color:#fff;font-family:inherit;font-size:14px;outline:none;transition:border-color .2s}
  .f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--accent-soft)}
  .dd{position:relative}
  .dd-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:9px;padding:12px 14px;color:#fff;font-family:inherit;font-size:14px;cursor:pointer;transition:border-color .2s;text-align:left}
  .dd.open .dd-btn,.dd-btn:focus-visible{border-color:var(--accent-soft);outline:none}
  .dd-btn svg{transition:transform .25s;flex:none}
  .dd.open .dd-btn svg{transform:rotate(180deg)}
  .dd-list{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;background:#1A1A24;border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:6px;margin:0;list-style:none;box-shadow:0 18px 44px rgba(0,0,0,.55);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s}
  .dd.open .dd-list{opacity:1;transform:none;pointer-events:auto}
  .dd-list li{padding:10px 12px;border-radius:8px;font-size:14px;color:#EDEDF2;cursor:pointer;display:flex;align-items:center;gap:10px}
  .dd-list li::before{content:"";width:7px;height:7px;border-radius:2px;background:transparent;flex:none}
  .dd-list li[aria-selected="true"]::before{background:var(--accent-soft)}
  .dd-list li:hover,.dd-list li.hl{background:rgba(91,79,233,.28)}
  .f-check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:#8D8DA3;margin:6px 0 20px}
  .f-check input{margin-top:3px;accent-color:var(--accent)}
  .f-check a{color:var(--accent-soft)}

  /* ============ Footer ============ */
  footer{background:#0A0A10;color:#8D8DA3;padding:54px 0 40px;font-size:13px}
  .f-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap;margin-bottom:36px}
  .f-links{display:flex;gap:26px;flex-wrap:wrap}
  .f-links a{color:#8D8DA3;text-decoration:none}
  .f-links a:hover{color:var(--accent-soft)}
  .f-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:#5D5D6B}

  /* ============ Zertifikat als Dokument ============ */
  .doc-shot{position:relative;margin-top:4px}
  .doc-shot::before{content:"";position:absolute;inset:14px -9px -11px 9px;background:var(--card);border:1px solid var(--border);border-radius:6px;transform:rotate(1.8deg)}
  .doc-shot img{position:relative;border-radius:6px;border:1px solid var(--border);box-shadow:0 12px 28px rgba(18,18,26,.16),0 34px 70px rgba(18,18,26,.18)}

  /* ============ Animationen ============ */
  .btn{position:relative;overflow:hidden}
  .btn::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .55s ease}
  .btn:hover::after{left:125%}
  .hero h1 em{background:linear-gradient(90deg,#9F95FF 20%,#D9D4FF 40%,#9F95FF 60%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 5.5s linear infinite}
  @keyframes shimmer{to{background-position:220% center}}
  @keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .tick{animation:fadeUp .8s .15s both}
  .tick:nth-child(2){animation-delay:.3s}
  .tick:nth-child(3){animation-delay:.45s}
  .tick:nth-child(4){animation-delay:.6s}
  @media(prefers-reduced-motion:reduce){.tick,.hero h1 em,.marquee-track,.particle,.scroll-cue,.pill .dot{animation:none}.reveal{opacity:1;transform:none;transition:none}}

  /* ============ Burger & Off-Canvas (mobil) ============ */
  .burger{display:none;width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:9px;background:transparent;cursor:pointer;place-items:center;transition:border-color .3s}
  .burger span{display:block;width:16px;height:2px;background:rgba(255,255,255,.85);position:relative;transition:background .3s}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:inherit}
  .burger span::before{top:-5px}
  .burger span::after{top:5px}
  header.scrolled .burger{border-color:var(--border)}
  header.scrolled .burger span{background:var(--tx)}
  .oc-backdrop{position:fixed;inset:0;background:rgba(10,10,16,.55);z-index:190;opacity:0;pointer-events:none;transition:opacity .3s}
  .offcanvas{position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);background:var(--bg-elev);border-left:1px solid var(--border);z-index:200;transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:22px 24px 28px}
  body.oc-open .oc-backdrop{opacity:1;pointer-events:auto}
  body.oc-open .offcanvas{transform:none}
  .oc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
  .oc-title{font-family:'Space Grotesk',sans-serif;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--tx-mute)}
  .oc-close{width:36px;height:36px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--tx);font-size:15px;cursor:pointer}
  .oc-nav{display:flex;flex-direction:column}
  .oc-nav a{color:var(--tx);text-decoration:none;font-family:var(--font-head),sans-serif;font-weight:600;font-size:18px;letter-spacing:-.3px;padding:13px 2px;border-bottom:1px solid var(--border)}
  .oc-nav a:hover{color:var(--accent)}
  .oc-tools{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:22px}
  .oc-tools .lang{border-color:var(--border)}
  .oc-tools .lang a,.oc-tools .lang span{color:var(--tx-mute)}
  .oc-theme{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:100px;background:transparent;color:var(--tx);font-size:12.5px;font-weight:600;padding:9px 16px;cursor:pointer;font-family:inherit}
  .oc-theme:hover{border-color:var(--accent);color:var(--accent)}
  .oc-cta{margin-top:18px;text-align:center}

  @media(max-width:960px){
    .bento{grid-template-columns:repeat(2,1fr)}
    .span2,.span3{grid-column:auto}
    .span6{grid-column:1/-1}
    .models{grid-template-columns:repeat(2,1fr)}
    .courses{grid-template-columns:1fr}
    .contact-grid{grid-template-columns:1fr}
    .facts{grid-template-columns:1fr}
    nav.main{display:none}
    .h-right .lang,.h-right .theme-btn,.h-right .btn{display:none}
    .burger{display:grid}
  }
  @media(max-width:640px){
    .ticker-grid{grid-template-columns:repeat(2,1fr)}
    .tick:nth-child(2){border-right:none}
    .tick{padding:22px 14px}
    .tick span{font-size:10px;letter-spacing:1.3px}
    .shots-sub{grid-template-columns:1fr}
    .bento,.models{grid-template-columns:1fr}
    .span6{grid-column:auto}
    .f-row{grid-template-columns:1fr}
    section{padding:68px 0}
  }

  /* =====================================================================
     Produktions-Ergänzungen (nicht Teil der Design-Preview)
     ===================================================================== */

  /* ---------- Fokus-Sichtbarkeit (Barrierefreiheit) ---------- */
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
  /* Bestandsmangel (Etappe 3, behoben Etappe 4, 27.08.2026): #5B4FE9 auf
     var(--card) im Dark Mode (#1E1E2A) ergibt nur 2,93:1, WCAG 2.1 AA
     Non-Text-Contrast verlangt 3:1. Einzige betroffene Flaeche site-weit
     (Hero, Footer, dauerhaft dunkle Karten liegen alle bereits >=3:1).
     Nur der Ring-Ton wird im Dark Mode auf --accent-soft angehoben
     (6,45:1 gegen var(--card)), die Akzentfarbe selbst bleibt unveraendert. */
  [data-theme="dark"] a:focus-visible,[data-theme="dark"] button:focus-visible,[data-theme="dark"] input:focus-visible,[data-theme="dark"] textarea:focus-visible,[data-theme="dark"] summary:focus-visible,[data-theme="dark"] [tabindex]:focus-visible{outline-color:var(--accent-soft)}
  .skip-link{position:absolute;left:-9999px;top:0;z-index:400;background:var(--accent);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;font-weight:600;font-size:14px}
  .skip-link:focus{left:0}

  /* ---------- Formular-Zustände ---------- */
  .f-field .f-error{display:none;font-size:12px;color:#FF9D9D;margin-top:6px}
  .f-field.invalid .f-error{display:block}
  .f-field.invalid input,.f-field.invalid textarea{border-color:#E05C5C}
  .form-status{display:none;border-radius:12px;padding:16px 18px;font-size:14px;margin-bottom:16px}
  .form-status.ok{display:block;background:rgba(91,79,233,.18);border:1px solid rgba(159,149,255,.4);color:#D9D4FF}
  .form-status.err{display:block;background:rgba(224,92,92,.14);border:1px solid rgba(224,92,92,.4);color:#FFB4B4}
  .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
  .hp-wrap{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}

  /* ---------- Cookie-Consent ---------- */
  .cc-backdrop{position:fixed;inset:0;background:rgba(10,10,16,.6);backdrop-filter:blur(3px);z-index:500;display:none}
  body.cc-open .cc-backdrop{display:block}
  .cc-modal{position:fixed;z-index:510;left:50%;bottom:24px;transform:translateX(-50%);width:min(480px,calc(100vw - 32px));background:var(--bg-elev);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.45);padding:28px;display:none}
  body.cc-open .cc-modal{display:block;animation:ccIn .35s cubic-bezier(.2,.9,.3,1) both}
  @keyframes ccIn{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
  .cc-icon{width:44px;height:44px;border-radius:12px;background:rgba(91,79,233,.14);display:grid;place-items:center;color:var(--accent);margin-bottom:14px}
  [data-theme="dark"] .cc-icon{background:rgba(91,79,233,.26);color:var(--accent-soft)}
  .cc-modal h2{font-size:20px;margin-bottom:8px}
  .cc-modal .cc-text{font-size:13.5px;color:var(--tx-soft);margin-bottom:18px}
  .cc-modal .cc-text a{color:var(--accent)}
  [data-theme="dark"] .cc-modal .cc-text a{color:var(--accent-soft)}
  .cc-cats{display:none;flex-direction:column;gap:10px;margin-bottom:18px}
  .cc-modal.show-cats .cc-cats{display:flex}
  .cc-cat{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border:1px solid var(--border);border-radius:12px;padding:13px 15px}
  .cc-cat b{display:block;font-size:13.5px;font-weight:600}
  .cc-cat p{font-size:12px;color:var(--tx-mute);margin-top:2px;max-width:300px}
  .cc-switch{position:relative;flex:none;width:44px;height:24px;margin-top:2px}
  .cc-switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
  .cc-switch .tr{position:absolute;inset:0;background:var(--border);border-radius:100px;transition:background .2s;pointer-events:none}
  .cc-switch .tr::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
  .cc-switch input:checked + .tr{background:var(--accent)}
  .cc-switch input:checked + .tr::after{transform:translateX(20px)}
  .cc-switch input:disabled + .tr{opacity:.55}
  .cc-switch input:focus-visible + .tr{outline:2px solid var(--accent);outline-offset:2px}
  [data-theme="dark"] .cc-switch input:focus-visible + .tr{outline-color:var(--accent-soft)}
  .cc-btns{display:flex;flex-wrap:wrap;gap:10px}
  .cc-btns .btn{flex:1 1 auto;min-width:132px;text-align:center;white-space:nowrap}
  .cc-btn-ghost{flex:1 1 auto;min-width:132px;text-align:center;white-space:nowrap;background:transparent;border:1.5px solid var(--border);color:var(--tx);padding:10px 16px;border-radius:9px;font-weight:600;font-size:13.5px;cursor:pointer;font-family:inherit;transition:border-color .2s}
  .cc-btn-ghost:hover{border-color:var(--accent)}

  /* ---------- Rechtsseiten ---------- */
  .legal-page header{background:var(--bg-elev);border-bottom:1px solid var(--border);box-shadow:var(--shadow)}
  .legal-page header .logo{color:var(--tx)}
  .legal-page header nav.main a{color:var(--tx-mute)}
  .legal-page header .lang{border-color:var(--border)}
  .legal-page header .lang a{color:var(--tx-mute)}
  .legal-page header .theme-btn{border-color:var(--border);color:var(--tx)}
  .legal-page header .burger{border-color:var(--border)}
  .legal-page header .burger span{background:var(--tx)}
  .legal-page main{padding-top:64px;min-height:70vh}
  .legal-page h1{font-size:clamp(30px,4vw,44px);margin-bottom:26px}
  .legal-page h2{font-size:22px;margin:36px 0 12px}
  .legal-page h3{font-size:17px;margin:26px 0 8px}
  .legal-page main p,.legal-page main li{font-size:15px;color:var(--tx-soft);max-width:780px}
  .legal-page main ul,.legal-page main ol{padding-left:22px;margin:10px 0}
  .legal-page main a{color:var(--accent)}
  [data-theme="dark"] .legal-page main a{color:var(--accent-soft)}
  .legal-page table{width:100%;max-width:860px;border-collapse:collapse;font-size:13.5px;margin:16px 0}
  .legal-page th,.legal-page td{border:1px solid var(--border);padding:10px 12px;text-align:left;color:var(--tx-soft);vertical-align:top}
  .legal-page th{color:var(--tx);background:var(--bg-elev);font-weight:600}
  .placeholder-mark{display:inline-block;background:rgba(224,92,92,.12);border:1px solid rgba(224,92,92,.4);color:#C24747;font-size:11px;font-weight:700;letter-spacing:.5px;padding:2px 8px;border-radius:5px;text-transform:uppercase;vertical-align:1px}
  [data-theme="dark"] .placeholder-mark{color:#FFB4B4}
  .divider-note{margin-top:36px;padding-top:18px;border-top:1px solid var(--border);font-size:13px;color:var(--tx-mute)}

  /* ---------- Feature-Akkordeon (§03 Funktionen) ---------- */
  .features-toggle-wrap{text-align:center;margin-top:28px}
  .features-toggle-wrap .chev{margin-left:6px;vertical-align:1px;transition:transform .2s}
  .features-toggle-wrap .chev.open{transform:rotate(180deg)}
  .features-panel{margin-top:30px;padding-top:30px;border-top:1px solid var(--border)}
  .feature-groups{columns:2;column-gap:40px}
  .feature-group{break-inside:avoid;margin-bottom:26px}
  .feature-group h4{font-family:var(--font-head),sans-serif;font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--tx);margin-bottom:6px}
  .feature-list{list-style:none}
  .feature-list li{font-size:13.2px;color:var(--tx-soft);padding:6px 0 6px 24px;position:relative;border-bottom:1px dashed var(--border)}
  .feature-list li:last-child{border-bottom:none}
  .feature-list li::before{content:"✓";position:absolute;left:2px;color:var(--accent);font-weight:700}
  @media(max-width:640px){
    .feature-groups{columns:1}
  }

  /* ---------- No-JS-Fallback ---------- */
  .no-js .reveal{opacity:1;transform:none}
  .no-js .cc-modal,.no-js .cc-backdrop{display:none !important}

  /* =====================================================================
     EmpCo-Themenseite (Etappe 3, 28.08.2026): eigener Akzentton Bernstein
     statt Klivantis-Violett, rein additiv ueber die Klasse "variant-empco"
     auf <html> (siehe public/sites/empco/*/index.html). Keine bestehende
     Regel oben wird angefasst, alle Bestandsseiten (eu-ai-act,
     team-training) bleiben exakt violett, das ist per Hash der HTML-
     Dateien nachgewiesen.

     Begruendung Bernstein statt Gruen: Eine Seite, die erklaert, warum
     vage Umweltversprechen ab dem 27.09.2026 verboten sind, darf nicht
     selbst in Oeko-Optik auftreten. Bernstein liest sich als Frist und
     Kennzeichnung, passt zur Werbewelt des Lesers und haelt den groessten
     Abstand zum Violett der beiden anderen Seiten (Kai, 28.08.2026).

     Umfang bewusst eng gehalten: nur Akzentfarbe, Hero-Motiv und
     Fakten-Ticker unterscheiden sich. Grundgeruest, Typografie, Raster,
     helle/dunkle Sektionsflaechen, Paper und Ink bleiben unveraendert -
     das traegt die Absenderin Klivantis auf allen drei Seiten gleich.

     Kontrastwerte (WCAG 2.1 AA, rechnerisch geprueft, siehe Meldung):
       --accent      #B45309  Weiss auf Accent (Buttons): 5.02:1
                              Accent auf Paper (Text):     4.65:1
                              Accent-Fokusring auf Ink:     3.71:1
       --accent-hover #8A4109 (nur Hover, keine Kontraktanforderung)
       --accent-soft  #FFB86B Text auf Ink/Hero-Schwarz:  >10.9:1
     Gradient-Zweitfarbe (ersetzt das hellere #7B6FF2 in .b-card.accent/
     .roles-row): #C36A08, Weiss darauf 3.90:1 (Bestand mit #7B6FF2 lag
     bei 3.89:1 fuer denselben Anwendungsfall - keine Verschlechterung). */
  .variant-empco{--accent:#B45309;--accent-hover:#8A4109;--accent-soft:#FFB86B}

  .variant-empco .hero-bg{background:
      radial-gradient(ellipse 75% 85% at 74% 38%, rgba(180,83,9,.38) 0%, transparent 58%),
      radial-gradient(ellipse 45% 50% at 88% 72%, rgba(255,184,107,.18) 0%, transparent 60%),
      radial-gradient(ellipse 50% 60% at 20% 85%, rgba(180,83,9,.10) 0%, transparent 55%),
      linear-gradient(155deg,#1A1A28 0%, #12121A 48%, #0C0C13 100%)}
  .variant-empco .hero-grid-lines{background-image:linear-gradient(rgba(255,184,107,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,184,107,.07) 1px,transparent 1px)}
  .variant-empco .pill{background:rgba(180,83,9,.18);border-color:rgba(255,184,107,.3)}
  .variant-empco .clarify{background:rgba(180,83,9,.07);border-color:rgba(180,83,9,.22)}
  .variant-empco .b-card:hover{box-shadow:0 14px 40px rgba(180,83,9,.14)}
  .variant-empco .b-card .ic{background:rgba(180,83,9,.1)}
  .variant-empco[data-theme="dark"] .b-card .ic{background:rgba(180,83,9,.22)}
  .variant-empco .b-card.dark .ic{background:rgba(180,83,9,.28)}
  .variant-empco .b-card.accent{background:linear-gradient(120deg,#8A4109,var(--accent) 45%,#C36A08)}
  .variant-empco .roles-row span{background:linear-gradient(135deg,var(--accent),#C36A08)}
  .variant-empco .model:hover{box-shadow:0 18px 44px rgba(180,83,9,.16)}
  .variant-empco .model.hl{background:linear-gradient(180deg,rgba(180,83,9,.08),var(--card) 58%);box-shadow:0 8px 30px rgba(180,83,9,.14)}
  .variant-empco .offer-note{background:rgba(180,83,9,.06)}
  .variant-empco[data-theme="dark"] .offer-note{background:rgba(180,83,9,.14)}
  .variant-empco .course .meta span{background:rgba(180,83,9,.08)}
  .variant-empco[data-theme="dark"] .course .meta span{background:rgba(180,83,9,.2)}
  .variant-empco .contact .glow{background:radial-gradient(circle,rgba(180,83,9,.22) 0%,transparent 65%)}
  .variant-empco .c-points li::before{background:rgba(180,83,9,.25)}
  .variant-empco .dd-list li:hover,.variant-empco .dd-list li.hl{background:rgba(180,83,9,.28)}
  .variant-empco .hero h1 em{background:linear-gradient(90deg,#FFB86B 20%,#FFE0BE 40%,#FFB86B 60%);background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .variant-empco .form-status.ok{background:rgba(180,83,9,.18);border-color:rgba(255,184,107,.4);color:#FFE0BE}
  .variant-empco .cc-icon{background:rgba(180,83,9,.14)}
  .variant-empco[data-theme="dark"] .cc-icon{background:rgba(180,83,9,.26)}

  /* Hero-Foto EmpCo (28.08.2026): Motiv sitzt mittiger als beim
     Team-Training-Bild - ein schwebendes glaesernes Produktetikett, linke
     Haelfte mit graviertem Zeilenblock und Haekchen, rechte Haelfte nur
     ein leuchtender Bernstein-Rahmen, der oben in Partikel zerfaellt,
     dahinter zwei unscharfe weitere Etiketten in der Tiefe. Der
     zuverlaessig schwarze Bereich reicht auf der Desktop-Fassung nur bis
     ca. 29% der Bildbreite, danach folgen die unscharfen (aber sehr
     dunklen) Hintergrund-Etiketten. Deshalb NICHT einfach die
     Team-Training-Werte uebernommen, sondern zwei Anpassungen: die
     Bildposition liegt mit 68% etwas weiter links als beim
     Team-Training-Bild (74%), und die Verlaufsebene ueber dem Foto ist
     fuer diese Variante verstaerkt (staerkere/breitere Abdunklung, siehe
     .variant-empco .hero-grad unten) statt das Motiv aus dem Bild zu
     schieben. Mobil-Fassung: eigener 4:5-Ausschnitt mit Versatz nach
     rechts, oben bleibt dunkler Raum fuer die Ueberschrift frei. */
  .hero-photo.hero-empco{
      background-image:url("../img/hero/empco-hero-desktop.jpg");
      background-size:cover;background-position:68% 45%}
  @supports (background-image: image-set(url(1x.jpg) 1x)){
    .hero-photo.hero-empco{background-image:image-set(
        url("../img/hero/empco-hero-desktop.webp") type("image/webp") 1x,
        url("../img/hero/empco-hero-desktop-retina.webp") type("image/webp") 1.33x,
        url("../img/hero/empco-hero-desktop.jpg") type("image/jpeg") 1x,
        url("../img/hero/empco-hero-desktop-retina.jpg") type("image/jpeg") 1.33x)}
  }
  @media(max-width:640px){
    .hero-photo.hero-empco{
        background-image:url("../img/hero/empco-hero-mobile.jpg");
        background-position:center 25%}
    @supports (background-image: image-set(url(1x.jpg) 1x)){
      .hero-photo.hero-empco{background-image:image-set(
          url("../img/hero/empco-hero-mobile.webp") type("image/webp") 1x,
          url("../img/hero/empco-hero-mobile.jpg") type("image/jpeg") 1x)}
    }
  }
  /* Verstaerkte Abdunklung fuer EmpCo (siehe Begruendung oben): haelt bis
     42% Bildbreite fast vollstaendig dunkel (Bestand faellt schon ab 40%
     auf 62% Deckkraft), damit die Ueberschrift auch bei langen Zeilen auf
     breiten Bildschirmen sicher lesbar bleibt, bevor der Bernstein-Rahmen
     rechts sichtbar wird. */
  .variant-empco .hero-grad{background:linear-gradient(90deg,rgba(12,12,19,.95) 0%,rgba(12,12,19,.86) 42%,rgba(12,12,19,.4) 62%,rgba(12,12,19,.08) 85%)}

  /* =====================================================================
     Vergleichstabelle (EmpCo, Etappe 3, 28.08.2026): einzige rein
     strukturelle Neuerung dieser Etappe (nicht themenspezifisch, keine
     eigenen Farben - die Tabelle nutzt ausschliesslich vorhandene
     Design-Tokens und passt sich damit automatisch an Theme und Akzent
     jeder Seite an, die sie einbindet). Gebraucht fuer die
     Verbote/Fristen-Uebersicht in der Sektion "regeln": eine echte
     <table>, die auf schmalen Bildschirmen in einem eigenen Container
     horizontal scrollt statt Text zu quetschen oder die Seite zu
     sprengen (Testpunkt 8 im Etappe-3-Auftrag). ===================== */
  .compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:18px;border:1px solid var(--border);border-radius:16px;background:var(--card)}
  .compare-table{width:100%;min-width:720px;border-collapse:collapse;font-size:13.5px}
  .compare-table caption{caption-side:bottom;text-align:left;padding:14px 20px;font-size:12px;color:var(--tx-mute)}
  .compare-table thead tr{border-bottom:2px solid var(--accent)}
  .compare-table th,.compare-table td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border)}
  .compare-table thead th{background:var(--bg-elev);color:var(--tx);font-weight:700;font-family:var(--font-head),sans-serif;letter-spacing:-.2px}
  .compare-table tbody tr:last-child td{border-bottom:none}
  .compare-table tbody td{color:var(--tx-soft)}
  .compare-table tbody td:first-child{color:var(--tx);font-weight:600;min-width:220px}
  .compare-table td.ref{white-space:nowrap;font-size:12.5px;color:var(--tx-mute)}