/* NDP / NPD - shared DE/FR layout. Save as css/styles.css. */

  @font-face{ font-family:'TexGyreHeros'; src:url('../public/fonts/tex-gyre-heros-regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
  @font-face{ font-family:'TexGyreHeros'; src:url('../public/fonts/tex-gyre-heros-bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
  @font-face{ font-family:'TexGyreHeros'; src:url('../public/fonts/tex-gyre-heros-italic.woff2') format('woff2'); font-style:italic; font-display:swap; }

  *{ margin:0; padding:0; box-sizing:border-box; }
  /* visually hidden, but readable by search engines & screen readers */
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  /* Audit-Fix 09/2026: Skip-Link - unsichtbar bis Tastaturfokus, dann oben links sichtbar */
  .skip-link{ position:absolute; top:-60px; left:12px; z-index:100;
    background:var(--accent); color:#04240f; font-weight:700; font-size:15px;
    padding:10px 18px; border-radius:8px; text-decoration:none; transition:top .2s ease; }
  .skip-link:focus{ top:12px; }
  :root{
    --bold:#b6f7c1; --text:#aeb8c4; --bg:#05080f;
    --accent:#5effa6; --head-h:60px;
    --color-white:#eef4f0;
    --chapter-green-left:#00792E; --chapter-green-right:#1D8D66;
    --chapter-max:1440px;
  }
  /* Frame corners & glow around the animations - two options (data-frame on <body>) */
  body[data-frame="green"]{ --frame:#00aa2e; --frame-glow:rgba(0,170,46,.30); }
  body[data-frame="red"]{ --frame:#9e1601; --frame-glow:rgba(158,22,1,.30); }
  /* Per-segment override (segment field 'frame'): corner accents + glow only */
  .visual.frame-green{ --frame:#00aa2e; --frame-glow:rgba(0,170,46,.30); }
  .visual.frame-red{ --frame:#9e1601; --frame-glow:rgba(158,22,1,.30); }
  html,body{ height:100%; background:var(--bg); color:var(--text);
    font-family:'TexGyreHeros',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

  /* ---------- Cyber-Hintergrund ---------- */
  #cyberbg{ position:fixed; inset:0; z-index:0; overflow:hidden;
    background:
      radial-gradient(circle at 16% 22%, rgba(94,255,166,.16), transparent 40%),
      radial-gradient(circle at 82% 30%, rgba(60,170,255,.12), transparent 42%),
      radial-gradient(circle at 70% 78%, rgba(94,255,166,.13), transparent 44%),
      radial-gradient(circle at 30% 85%, rgba(60,170,255,.10), transparent 40%),
      var(--bg); }
  .bgpattern{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; pointer-events:none; }
  .bgpattern.active{ opacity:1; }
  .player{ position:absolute; top:0; left:0; width:100%; will-change:transform; }
  .player svg.net{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible; }
  .player svg.net line{ stroke:var(--accent); stroke-width:1; }
  .shape{ position:absolute; } .shape svg{ display:block; width:100%; height:100%; }
  /* Performance: only animate pattern shapes on the visible layer */
  .bgpattern:not(.active) .shape{ animation-play-state:paused; }
  /* Accessibility/performance: disable decorative motion on request */
  @media (prefers-reduced-motion: reduce){
    .shape, .particle, svg.net line, .intro-scroll .a, .intro-scroll .arr{ animation:none !important; }
  }
  @keyframes pulse{ 0%,100%{opacity:var(--o)} 50%{opacity:calc(var(--o)*2.1)} }
  @keyframes netpulse{ 0%,100%{opacity:.05} 50%{opacity:.16} }
  #particles{ position:absolute; inset:0; pointer-events:none; will-change:transform; }
  .particle{ position:absolute; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); }
  @keyframes drift{ 0%{transform:translate(0,0)} 50%{transform:translate(var(--dx),var(--dy))} 100%{transform:translate(0,0)} }
  @keyframes streamflow{ from{stroke-dashoffset:0} to{stroke-dashoffset:-120} }

  /* ---------- Header ---------- */
  :root{ --head-h:56px; }
  header{ position:fixed; top:0; left:0; right:0; height:var(--head-h); z-index:40;
    display:flex; align-items:center; justify-content:space-between; padding:0 18px;
    background:linear-gradient(180deg, rgba(5,8,15,.92), rgba(5,8,15,.55) 70%, transparent);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  header .logo{ display:flex; align-items:center; background:none; border:none; padding:0; cursor:pointer; }
  header .logo img{ height:30px; width:auto; display:block; }
  .head-right{ display:flex; align-items:center; gap:14px; }
  .active-title{ font-size:13px; color:var(--accent); opacity:0; transition:opacity .4s ease;
    max-width:44vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .active-title.show{ opacity:1; }
  .navtoggle{ background:none; border:1px solid rgba(255,255,255,.2); color:var(--text);
    font-size:20px; width:40px; height:36px; border-radius:8px; cursor:pointer; flex:none;
    transition:background .25s, border-color .25s; }
  .navtoggle:hover{ background:rgba(94,255,166,.1); border-color:rgba(94,255,166,.4); }
  nav.chapnav{ position:fixed; top:var(--head-h); right:0; left:0;
    display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0px 12px;
    background:rgba(5,8,15,.97); max-height:0; overflow:hidden;
    transition:max-height .4s ease; z-index:39; }
  nav.chapnav.open{ max-height:82vh; overflow-y:auto; }
  nav.chapnav button{ background:none; border:none; color:var(--text); font-family:inherit;
    text-align:left; padding:13px 12px; font-size:15px; cursor:pointer; opacity:.8;
    border-bottom:1px solid rgba(255,255,255,.06); transition:opacity .25s, color .25s, background .25s;
    display:flex; gap:10px; align-items:baseline; }
  nav.chapnav button:hover{ opacity:1; background:rgba(94,255,166,.08); }
  nav.chapnav button.active{ opacity:1; color:var(--accent); }
  nav.chapnav button .n{ font-size:12px; color:var(--accent); opacity:.75; flex:none; min-width:24px; }
  @media(min-width:900px){
    :root{ --head-h:74px; }
    header{ padding:0 30px; }
    header .logo img{ height:46px; }
    .active-title{ font-size:15px; }
    .navtoggle{ width:46px; height:40px; font-size:22px; }
    nav.chapnav{ left:auto; width:360px; border-bottom-left-radius:12px;
      box-shadow:0 20px 50px rgba(0,0,0,.5); }
    nav.chapnav button{ font-size:16px; }
  }

  /* ---------- Scroller ---------- */
  #scroller{ position:relative; z-index:1; height:100vh; overflow-y:scroll; overflow-x:hidden; }

  /* ---------- Intro-Titelvideo ---------- */
  .intro{ height:100vh; position:relative; background:#000; padding-top:var(--head-h); overflow:hidden; }

  /* Grosser Titel-Frame: gleiches HUD und gleicher kompakter Glow
     wie bei den kleinen Kapitel-Frames, aber maximal gross und mittig. */
  .intro-stage{ position:absolute; inset:var(--head-h) 0 0; display:grid; place-items:center; z-index:0;
    padding:24px 12px; }
  .intro-vidbox{ position:relative; width:min(calc(100vw - 24px), calc(56.25vh - 58.5px));
    aspect-ratio:720/1280; background:#000;
    box-shadow:0 0 34px var(--frame-glow);
    transition:box-shadow .4s ease, opacity .5s ease; }
  .intro-vidbox video{ display:block; width:100%; height:100%; object-fit:contain;
    object-position:center; background:#000; }
  .intro-vidbox .hud{ opacity:1; }
  .intro-vidbox .hud::before,.intro-vidbox .hud::after{
    box-shadow:0 0 8px var(--frame-glow);
  }

  @media(min-width:900px){
    /* Desktop: maximale Hoehe unterhalb des Headers, weiterhin exakt zentriert. */
    .intro{ background:linear-gradient(180deg, #000 0%, #000 16%, rgba(5,8,15,0) 72%); }
    .intro-stage{ padding:30px 20px; }
    .intro-vidbox{ width:min(calc(100vw - 40px), calc(56.25vh - 75.375px)); }
  }
  .intro-scroll{ position:absolute; left:50%; bottom:6vh; transform:translateX(-50%) translateY(8px);
    z-index:2; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
    background:rgba(10,17,32,.6); border:1px solid rgba(94,255,166,.45); color:var(--accent);
    font-family:inherit; font-size:13px; padding:12px 20px; border-radius:24px;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; pointer-events:none; transition:opacity .6s ease, transform .6s ease; }
  .intro-scroll.show{ opacity:1; pointer-events:auto; transform:translateX(-50%); }
  .intro-scroll:hover{ background:rgba(94,255,166,.18); }
  .intro-scroll .a{ display:inline-block; animation:bob 1.4s infinite; font-size:16px; }
  /* Scroll-hint button on the title animation */
  .intro-scroll{ position:absolute; left:50%; bottom:6vh; transform:translateX(-50%);
    z-index:2; display:inline-flex; flex-direction:column; align-items:center; gap:6px;
    background:rgba(10,17,32,.7); border:1px solid rgba(94,255,166,.45); color:var(--accent);
    font-family:inherit; font-size:14px; padding:12px 22px; border-radius:26px; cursor:pointer;
    opacity:0; pointer-events:none; transition:opacity .6s ease, transform .3s ease, background .25s;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  .intro-scroll.show{ opacity:1; pointer-events:auto; }
  .intro-scroll:hover{ background:rgba(94,255,166,.18); }
  .intro-scroll .arr{ font-size:18px; animation:bob 1.4s infinite; }

  /* ---------- Cover / chapter title ---------- */
  /* Title-slide length while scrolling: 100vh = full screen, smaller = shorter. */
  .cover{ min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:left; padding:32px 6vw; position:relative; }
  .cover .num{ font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent);
    margin-bottom:22px; width:min(100%,1040px); text-align:left; }
  /* Lead-in text on the title slide, below the chapter title (chapter `intro`). */
  .cover-intro{ width:min(100%,1040px); margin-top:26px; color:var(--text);
    font-size:clamp(15px,1.9vw,18px); line-height:1.6; }
  .cover-intro p{ margin:0 0 .7em; max-width:720px; }
  .cover-intro strong{ color:var(--bold); }
  .chapter-hero-title{ position:relative; z-index:3; width:min(100%,1040px);
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:0.12em; margin:0; color:var(--color-white); text-align:left; }
  .chapter-hero-line{ display:inline-block; max-width:100%; }
  .chapter-hero-line-small{ width:fit-content; max-width:100%; padding-left:0.04em;
    font-size:clamp(1.25rem,3.4vw,2.9rem); line-height:1.35; color:var(--color-white); font-weight:400; }
  .chapter-hero-line-main{ display:flex; align-items:center; justify-content:flex-start; max-width:100%;
    font-size:clamp(1.9rem,7vw,5.4rem); line-height:1.02; font-weight:500; letter-spacing:-0.01em; }
  .chapter-hero-line-highlight{ position:relative; isolation:isolate;
    padding:0.06em 0.28em 0.14em; color:var(--color-white); border-radius:3px;
    background:linear-gradient(135deg, var(--chapter-green-left) 0%, var(--chapter-green-right) 100%);
    max-width:100%; transform:scaleX(0.9); transform-origin:left center;
    overflow-wrap:break-word; word-break:break-word; hyphens:auto; -webkit-hyphens:auto; }
  @media(max-width:899px){
    /* Mobile: weicher Uebergang zwischen den schwarzen Kapitel-Video-Bereichen
       und den transparenten Titel-Folien. Oben und unten startet die Cover-Folie
       in Schwarz und blendet sanft in den Cyber-Hintergrund ein bzw. zurueck. */
    .cover{
      padding:32px 20px;
      background:linear-gradient(to bottom,
        #000 0%,
        rgba(0,0,0,.90) 4%,
        rgba(0,0,0,.58) 10%,
        rgba(0,0,0,.18) 17%,
        rgba(0,0,0,0) 24%,
        rgba(0,0,0,0) 76%,
        rgba(0,0,0,.18) 83%,
        rgba(0,0,0,.58) 90%,
        rgba(0,0,0,.90) 96%,
        #000 100%);
    }
    .chapter-hero-line-main{ font-size:clamp(1.7rem,8.5vw,3rem); }
  }
  @media(min-width:900px){
    /* Desktop: kleinere Titel + mehr Abstand oben (zu "Kapitel XX") und unten (zum Introtext) */
    .chapter-hero-line-main{ font-size:clamp(2rem,4.6vw,3.6rem); }
    .chapter-hero-line-small{ font-size:clamp(1.15rem,2.2vw,1.9rem); }
    .cover .num{ margin-bottom:40px; }   /* Abstand "Kapitel XX" -> Titel */
    .cover-intro{ margin-top:44px; }     /* Abstand Titel -> Introtext */
  }

  /* ---------- Chapter: sticky video + steps ---------- */
  .chapter{ position:relative; }
  .visual{ position:sticky; top:0; height:100vh; z-index:0; }
  .vidwrap{ position:absolute; inset:0; }
  .vidbox{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    aspect-ratio:720/1280; height:86vh; opacity:0;
    transition:left .7s cubic-bezier(.4,0,.2,1), height .7s cubic-bezier(.4,0,.2,1),
               transform .7s cubic-bezier(.4,0,.2,1), box-shadow .4s ease, opacity .5s ease; }
  .vidbox.show{ opacity:1; }
  .vidbox video{ display:block; width:100%; height:100%; object-fit:contain; background:#000; }
  .visual.view-full .vidbox{ left:50%; height:100vh; box-shadow:none;
    /* ======================================================================
       SEITENMASKE horizontal (links/rechts) — plus vertikale Maske (oben/unten) weiter unten.
       Genau EINE Variante aktiv lassen, die anderen drei auskommentieren.
       ====================================================================== */
    /* A - wide & soft (original 22/78) */
    /* --vfmask:linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%); */
    /* B - narrow & soft (10/90) - ACTIVE */
    --vfmask:linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
    /* C - narrow, digital steps (symmetric) */
    /* --vfmask:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 4%, rgba(0,0,0,.35) 6%, rgba(0,0,0,.7) 8%, rgba(0,0,0,.7) 10%, #000 12%, #000 88%, rgba(0,0,0,.7) 90%, rgba(0,0,0,.7) 92%, rgba(0,0,0,.35) 94%, rgba(0,0,0,.35) 96%, transparent 100%); */
    /* D - narrow, irregular fragments */
    /* --vfmask:linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 2%, transparent 3.5%, rgba(0,0,0,.55) 5%, rgba(0,0,0,.55) 7%, transparent 8.5%, rgba(0,0,0,.85) 10%, #000 13%, #000 87%, rgba(0,0,0,.85) 90%, transparent 91.5%, rgba(0,0,0,.55) 93%, rgba(0,0,0,.55) 95%, transparent 96.5%, rgba(0,0,0,.2) 98%, transparent 100%); */
    /* Vertikale Maske (oben/unten ins Transparente) — wird mit der horizontalen
       Maske per "intersect" kombiniert, sodass alle vier Kanten auslaufen. */
    --vfmask-v:linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image:var(--vfmask), var(--vfmask-v);
            mask-image:var(--vfmask), var(--vfmask-v);
    -webkit-mask-composite:source-in;    /* = intersect (ältere WebKit/Safari) */
            mask-composite:intersect; }
  .visual.view-frame .vidbox{ height:58vh; -webkit-mask-image:none; mask-image:none;
    box-shadow:0 0 34px var(--frame-glow); }
  @media(min-width:900px){
    .visual.view-frame.pos-left .vidbox{ left:31%; }
    .visual.view-frame.pos-right .vidbox{ left:69%; }
    .visual.view-frame.pos-center .vidbox{ left:50%; }
  }
  .hud{ position:absolute; width:24px; height:24px; opacity:0; transition:opacity .5s ease; pointer-events:none; }
  .hud::before,.hud::after{ content:''; position:absolute; background:var(--frame); box-shadow:0 0 8px var(--frame-glow); }
  .hud::before{ width:24px; height:2px; } .hud::after{ width:2px; height:24px; }
  .hud.tl{ top:-6px; left:-6px; } .hud.tl::before{ top:0;left:0 } .hud.tl::after{ top:0;left:0 }
  .hud.tr{ top:-6px; right:-6px; } .hud.tr::before{ top:0;right:0 } .hud.tr::after{ top:0;right:0 }
  .hud.bl{ bottom:-6px; left:-6px; } .hud.bl::before{ bottom:0;left:0 } .hud.bl::after{ bottom:0;left:0 }
  .hud.br{ bottom:-6px; right:-6px; } .hud.br::before{ bottom:0;right:0 } .hud.br::after{ bottom:0;right:0 }
  .visual.view-frame .hud{ opacity:1; }

  /* ---------- Steps ---------- */
  .steps{ position:relative; z-index:1; margin-top:-100vh; }
  .step{ min-height:100vh; display:flex; align-items:center; padding:0 6vw; }
  .card{ max-width:440px; padding:26px 28px; border-radius:14px;
    background:rgba(7,14,26,.55); border:1px solid rgba(94,255,166,.12);
    backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
    opacity:0; transform:translateY(26px); transition:opacity .55s ease, transform .55s ease; }
  .step.in .card{ opacity:1; transform:none; }
  .card p{ font-size:17px; line-height:1.6; margin-bottom:12px; color:var(--text); }
  .card p:last-child{ margin-bottom:0; }
  .card ul{ margin:6px 0 10px 18px; } .card li{ font-size:16px; line-height:1.5; margin-bottom:6px; color:var(--text); }
  .card strong{ color:var(--bold); font-weight:700; }
  .card > *{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
  .step.in .card > *{ opacity:1; transform:none; }
  .step.in .card > *:nth-child(1){ transition-delay:.15s } .step.in .card > *:nth-child(2){ transition-delay:.32s }
  .step.in .card > *:nth-child(3){ transition-delay:.49s } .step.in .card > *:nth-child(4){ transition-delay:.66s }
  @keyframes termglow{ 0%{text-shadow:none} 30%{text-shadow:0 0 14px rgba(94,255,166,.9),0 0 4px rgba(94,255,166,.7)} 100%{text-shadow:none} }
  .step.in .card strong{ animation:termglow 1.6s ease .5s 1; }

  /* "More info" button (standalone, centered like the end button) */
  .info-btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:inherit;
    background:rgba(94,255,166,.12); border:1px solid rgba(94,255,166,.45); color:var(--accent);
    font-size:16px; padding:14px 26px; border-radius:10px; transition:background .25s; }
  .info-btn:hover{ background:rgba(94,255,166,.22); }
  .info-btn::before{ content:'+'; font-size:18px; font-weight:700; }

  @media(min-width:900px){
    .step.card-left{ justify-content:flex-start; } .step.card-right{ justify-content:flex-end; }
    .step.card-center{ justify-content:center; }
    /* Constrain the chapter area (video + text) to laptop width and center it */
    .chapter{ max-width:var(--chapter-max); margin-left:auto; margin-right:auto; }
    .step{ padding:0 40px; min-height:70vh; }
    .step.step-first{ min-height:100vh; }
  }
  @media(max-width:899px){
    .visual{ background:#000; }
    .visual.view-full .vidbox, .visual.view-frame .vidbox{ -webkit-mask-image:none; mask-image:none; }
    .visual.view-full .vidbox{ height:100vh; left:50%; }
    .visual.view-frame .vidbox{ height:54vh; left:50%; }
    .step{ align-items:flex-end; padding:0 14px 6vh; }
    .card{ max-width:none; width:100%;
      background:linear-gradient(180deg, rgba(5,8,15,0) 0, rgba(5,8,15,.74) 40px, rgba(5,8,15,.74) calc(100% - 24px), rgba(5,8,15,0) 100%);
      border:none; border-radius:0; padding:22px 18px 26px; backdrop-filter:none; -webkit-backdrop-filter:none; }
    .card p, .card li{ font-size:16px; text-shadow:0 1px 14px rgba(0,0,0,.92), 0 0 5px rgba(0,0,0,.85); }

    /* Mobile: nur der Bereich mit dem "Mehr erfahren"-Button bleibt schwarz.
       Header und Navigation werden dadurch nicht beruehrt. */
    .end-section:has(.info-btn){ background:#000; }
  }

  /* ---------- Info-Dialog (Mehr-Info & Impressum) ---------- */
  .info-dialog{ border:none; background:transparent; padding:0; max-width:none; max-height:none;
    width:100%; height:100%; margin:0; overflow:visible; }
  .info-dialog::backdrop{ background:rgba(3,6,12,.82); backdrop-filter:blur(2px); }
  .info-dialog{ display:flex; align-items:center; justify-content:center; }
  .info-dialog:not([open]){ display:none; }
  .dialog-sheet{ background:#0a1120; border:1px solid rgba(94,255,166,.22); border-radius:16px;
    max-width:720px; width:calc(100% - 40px); max-height:86vh; overflow-y:auto; padding:34px 34px 30px;
    box-shadow:0 20px 80px rgba(0,0,0,.6); position:relative; }
  .dialog-close{ position:absolute; top:16px; right:16px; background:none; border:none; color:var(--text);
    font-size:28px; cursor:pointer; line-height:1; padding:4px 10px; border-radius:8px; }
  .dialog-close:hover{ background:rgba(255,255,255,.08); color:#fff; }
  .dialog-kicker{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
  .dialog-kicker[hidden]{ display:none; }
  .info-dialog h2{ font-size:24px; color:#eef4f0; font-weight:800; margin-bottom:18px; line-height:1.2; padding-right:30px; }
  .dialog-text p{ font-size:16px; line-height:1.62; margin-bottom:14px; color:#cdd5df; }
  .dialog-text strong{ color:var(--bold); }
  .dialog-text a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(94,255,166,.4); }
  .dialog-text a:hover{ border-color:var(--accent); }
  .kdo-logo, .impressum-logo{ display:block; max-width:150px; margin:6px 0 18px; }
  .inline-logo{ display:block; height:9.4em; width:auto; margin:0.6em auto 0; }
  .impressum-logo-row{ margin-bottom:8px; }
  .dialog-link{ display:inline-block; margin-top:8px; color:var(--accent); font-weight:700;
    text-decoration:none; border-bottom:1px solid rgba(94,255,166,.4); padding-bottom:2px; }
  .dialog-link[hidden]{ display:none; }
  .dialog-link:hover{ border-color:var(--accent); }

  /* ---------- Footer ---------- */
  .site-footer{ position:relative; z-index:1; background:#070c16; border-top:1px solid rgba(94,255,166,.14);
    padding:34px 24px; display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }
  .site-footer a, .site-footer button{ font-family:inherit; font-size:14px; color:#96a1b0;
    background:none; border:none; cursor:pointer; text-decoration:none; padding:0; }
  .site-footer a:hover, .site-footer button:hover{ color:var(--accent); }
  .footer-copyright{ font-size:13px; color:#7e8794; }  /* Audit-Fix 09/2026: war #6b7684 (4.24:1, unter WCAG-AA 4.5:1); jetzt 5.39:1 */

  /* ---------- Fortschritt / Hint ---------- */
  .totop{ position:fixed; bottom:20px; right:20px; z-index:45;
    width:46px; height:46px; border-radius:50%; cursor:pointer;
    background:rgba(10,17,32,.85); border:1px solid rgba(94,255,166,.4); color:var(--accent);
    font-size:20px; line-height:1; opacity:0; pointer-events:none; transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease, background .25s;
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    box-shadow:0 6px 20px rgba(0,0,0,.4); }
  .totop.show{ opacity:1; pointer-events:auto; transform:none; }
  .totop:hover{ background:rgba(94,255,166,.18); }

  /* ---------- Ende-Button ---------- */
  .end-section{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
    padding:60px 24px 40px; }
  .end-btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:inherit;
    background:rgba(94,255,166,.12); border:1px solid rgba(94,255,166,.45); color:var(--accent);
    font-size:16px; padding:14px 26px; border-radius:10px; transition:background .25s; }
  .end-btn:hover{ background:rgba(94,255,166,.22); }
  .end-btn::before{ content:'↑'; font-size:18px; }
  #progress{ position:fixed; top:var(--head-h); left:0; height:3px; width:0; background:var(--accent);
    z-index:41; box-shadow:0 0 10px var(--accent); transition:width .15s; }
  @keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* ---------- Localization: shared DE/FR shell ---------- */
[hidden]{ display:none !important; }
body{ overflow:hidden; }
.head-right{ min-width:0; }
header .logo{ flex:none; max-width:28vw; }
header .logo img{ max-width:100%; object-fit:contain; }
.language-switch{ display:inline-flex; align-items:center; gap:2px; flex:none;
  padding:3px; border:1px solid rgba(94,255,166,.32); border-radius:9px;
  background:rgba(7,14,26,.7); }
.language-switch a{ display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; min-height:30px; padding:5px 7px; border-radius:6px;
  color:var(--text); font-size:12px; font-weight:700; text-decoration:none; }
.language-switch a:hover{ color:var(--accent); background:rgba(94,255,166,.1); }
.language-switch a[aria-current]{ color:#04240f; background:var(--accent); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
@media(max-width:599px){
  .active-title{ display:none; }
  .head-right{ gap:10px; }
  header{ padding-left:14px; padding-right:14px; }
}
@media(min-width:600px){ .active-title{ max-width:25vw; } }
@media(min-width:900px){ .language-switch a{ min-width:35px; min-height:31px; font-size:13px; } }
.chapter-hero-line-main{ min-width:0; }
.chapter-hero-line-highlight{ min-width:0; }
.card, .cover-intro, .dialog-text{ overflow-wrap:break-word; }
.step{ padding-top:calc(var(--head-h) + 20px); }

/* A text fallback avoids showing the German poster on the French landing page. */
.intro-text-fallback{ position:absolute; inset:0; display:flex; flex-direction:column;
  justify-content:center; gap:22px; padding:24px; text-align:left; overflow:hidden; }
.intro-text-fallback p{ font-size:clamp(13px,2vh,19px); line-height:1.5; }
.intro-text-fallback .intro-fallback-title{ color:var(--color-white); font-weight:700;
  font-size:clamp(19px,3.6vh,32px); line-height:1.18; overflow-wrap:break-word; }
.intro-vidbox video{ position:relative; z-index:1; opacity:0; }
.intro-vidbox video[poster], .intro-vidbox.media-ready video{ opacity:1; }
.intro-vidbox.media-failed video{ opacity:0; }
.media-message{ position:absolute; left:12px; right:12px; bottom:18px; z-index:2;
  padding:12px; color:var(--color-white); background:rgba(7,14,26,.92);
  border:1px solid rgba(94,255,166,.32); border-radius:8px; font-size:13px; line-height:1.4; }
.language-notice{ position:fixed; z-index:60; top:calc(var(--head-h) + 12px);
  left:50%; transform:translateX(-50%); width:min(94vw,700px); padding:16px 18px;
  display:flex; gap:20px; align-items:center; color:var(--color-white); background:#0a1120;
  border:1px solid var(--accent); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.language-notice p{ font-size:14px; line-height:1.5; }
.language-notice button{ color:var(--accent); background:none; border:0; font-size:26px; cursor:pointer; }

/* Errors also remain readable when loading a module or dictionary fails. */
.boot-status,.boot-error{ position:fixed; z-index:35; inset:var(--head-h) 0 0; overflow:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px; gap:18px; background:var(--bg); text-align:center; }
.boot-status p{ font-size:15px; line-height:1.6; }
.boot-status .spinner{ width:24px; height:24px; border:2px solid rgba(94,255,166,.2);
  border-top-color:var(--accent); border-radius:50%; animation:boot-spin 1s linear infinite; }
.boot-error{ display:none; }
.boot-error section{ max-width:650px; }
.boot-error h2{ font-size:22px; color:var(--color-white); margin:14px 0; }
.boot-error p{ font-size:16px; line-height:1.5; margin:0 0 18px; }
.boot-error a{ color:var(--accent); }
body[data-state="ready"] .boot-status{ display:none; }
body[data-state="loading"] #scroller{ visibility:hidden; }
body[data-state="error"] .boot-status, body[data-state="error"] #scroller{ display:none; }
body[data-state="error"] .boot-error{ display:flex; }
@keyframes boot-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .spinner{ animation:none !important; }
  *, *::before, *::after{ scroll-behavior:auto !important; }
}

/* Header/footer JSON localization: text fallback only if the chosen logo is unavailable. */
header .logo{ min-height:30px; }
header .logo .logo-label{ font-family:inherit; font-size:14px; line-height:1.2;
  font-weight:700; color:var(--color-white); text-align:left; overflow-wrap:break-word; }
.dialog-text .imprint-heading{ font-size:12px; line-height:1.5; font-weight:700;
  letter-spacing:.12em; margin:22px 0 10px; color:var(--accent); }
.dialog-text .imprint-heading:first-child{ margin-top:0; }
@media(min-width:900px){
  header .logo{ min-height:46px; }
  header .logo .logo-label{ font-size:17px; }
}
/* Keep the floating top button clear of translated footer labels on narrow screens. */
@media(max-width:599px){
  .site-footer{ padding-bottom:90px; }
  .site-footer .footer-copyright{ flex-basis:100%; text-align:center; }
}

/* Embed-Modus: Scrollbalken ausblenden, Scrollen erlauben */
html.is-embedded #scroller {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.is-embedded #scroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}