/* main-v2.css — ausgegliedertes Inline-CSS aus index.html (SPEC-website-tuning-20260702, C3+C7).
   Versionierter Dateiname = Cache-Bust bei immutable /assets/-Cache: neue Revision -> neuer Name.
   Bei jeder Aenderung: Dateiname hochzaehlen (main-v3.css ...) UND die Referenz in index.html.
   v2 (C7): Kontrast-Token --ink-2/.--ink-dim angehoben (WCAG-Puffer). */

  :root{
    --bg-0:#07080a;
    --bg-1:#0c0e12;
    --ink:#f4f4f1;
    --ink-dim:#9a9a96;  /* C7: von #8a8a86 (5,78:1) auf #9a9a96 (7,10:1 auf #07080a) — dezenter WCAG-Puffer */
    --signal:oklch(0.78 0.12 72);
    --serif:'Fraunces', ui-serif, Georgia, serif;
    --ink-0:#ffffff;
    --ink-1:rgba(255,255,255,.78);
    --ink-2:rgba(255,255,255,.6);  /* C7: von .52 (5,66:1) auf .6 (7,30:1 auf #07080a) — Mono-Labels & Loading */
    --ink-3:rgba(255,255,255,.55);  /* was .32, raised for WCAG AA contrast (4.6:1 on #07080a) */
    --line:rgba(255,255,255,.08);
    --line-2:rgba(255,255,255,.14);
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --sans:'Inter Tight',ui-sans-serif,system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%;background:var(--bg-0);color:var(--ink-0);
    font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;overflow:hidden;letter-spacing:-0.005em;}
  ::selection{background:rgba(255,255,255,.18);color:#fff}

  /* Skip-to-Content (C7): erstes fokussierbares Element. Visually-hidden bis
     Tastatur-Fokus, dann sichtbar oben links — dunkel mit Cyan-Akzent (#8cd8ff),
     ueber allem (z ueber #overlay/#portal-layer). */
  .skip-link{position:fixed;top:0;left:0;z-index:1000;transform:translateY(-120%);
    padding:12px 20px;background:#0b0d11;color:#8cd8ff;
    border:1px solid #8cd8ff;border-radius:0 0 10px 0;
    font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
    text-decoration:none;box-shadow:0 8px 30px rgba(0,0,0,.55);
    transition:transform .18s ease;}
  .skip-link:focus-visible{transform:translateY(0);outline:2px solid #8cd8ff;outline-offset:2px;}
  /* Fokusziel darf keinen sichtbaren Outline-Kasten am Seitencontainer werfen */
  #below-fold:focus{outline:none;}
  #below-fold:focus-visible{outline:none;}

  /* full-bleed stage, hidden until lens click */
  #stage{position:fixed;inset:0;overflow:hidden;background:#06080b;opacity:0;pointer-events:none;transition:opacity .6s ease;}
  #stage.revealed{opacity:1;pointer-events:auto;}
  /* canvas: never let dragging on the board hijack page text selection */
  #stage canvas{user-select:none;-webkit-user-select:none;-moz-user-select:none;
    -ms-user-select:none;touch-action:pan-y;outline:none;}
  /* When dragging the board, kill text selection on the entire page momentarily */
  body.dragging-board, body.dragging-board *{user-select:none!important;
    -webkit-user-select:none!important;cursor:grabbing!important;}
  #overlay{opacity:0;pointer-events:none;transition:opacity .6s ease .2s;}
  #overlay.revealed{opacity:1;}
  /* Per-child pointer-events: nur Container für klickbare Elemente bekommen auto.
     Dekorative Overlay-Container (topbar, rails, bottombar) bleiben none, ihre
     wirklich klickbaren Kinder reaktivieren auto über spezifischere Regeln. */
  #overlay.revealed .topbar,
  #overlay.revealed .rail-left,
  #overlay.revealed .rail-right,
  #overlay.revealed .bottombar{pointer-events:none;}
  #overlay.revealed .topbar > *,
  #overlay.revealed .topbar nav a,
  #overlay.revealed .bottombar .cta-group,
  #overlay.revealed .bottombar .cta-group *,
  #overlay.revealed .module-menu,
  #overlay.revealed .module-menu *{pointer-events:auto;}
  /* Ambient layers, three large radial gradients animated infinitely on
     scale+translate were forcing constant full-viewport repaints. Promoted
     to a compositor layer (will-change:transform) and slowed to 30s so the
     GPU can keep it on a separate texture. Mask-image was a per-pixel alpha
     calc, replaced by a soft radial gradient overlay (compositor-friendly). */
  /* ── cinematic drone-feed backdrop (behind the floating 3D board) ── */
  #stage .ambient-glow{position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(900px 700px at 28% 22%, rgba(180,210,255,.10) 0%, rgba(180,210,255,0) 60%),
      radial-gradient(800px 600px at 78% 75%, rgba(255,235,200,.07) 0%, rgba(255,235,200,0) 65%),
      radial-gradient(1200px 900px at 50% 50%, rgba(255,255,255,.04) 0%, rgba(0,0,0,0) 70%);
    will-change:transform;animation:ambientShift 30s ease-in-out infinite alternate;}
  @keyframes ambientShift{
    0%  {transform:translate3d(-1%, -0.5%, 0)}
    100%{transform:translate3d( 1%,  0.5%, 0)}
  }
  #stage .ambient-grid{position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
      linear-gradient(transparent 95%, rgba(255,255,255,.04) 95%),
      linear-gradient(90deg, transparent 95%, rgba(255,255,255,.04) 95%);
    background-size:64px 64px;
    /* Cheaper than mask-image, overlay a darkening radial that fades the grid
       at the edges. Same visual, no per-pixel alpha computation. */
    background-color:transparent;}
  #stage .ambient-grid::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(900px 700px at 50% 50%, transparent 0%, #06080b 75%);}
  #three-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;}
  #fallback-stage{position:absolute;inset:0;display:none;perspective:1800px;perspective-origin:30% 20%;}

  /* faint grid lines, to feel like a calibrated workspace */
  #stage::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:96px 96px;mask-image:radial-gradient(1100px 700px at 50% 55%,#000 0%,transparent 80%);}
  #stage::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(900px 600px at 70% 90%,rgba(0,0,0,.55),transparent 70%);}

  /* DOM overlay layer */
  #overlay{position:absolute;inset:0;pointer-events:none;z-index:5;}
  #overlay > *{pointer-events:auto;}
  .mono{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;color:var(--ink-2);font-weight:500;}
  .mono strong{color:var(--ink-0);font-weight:600}
  .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink-0);box-shadow:0 0 0 3px rgba(255,255,255,.08);vertical-align:1px;margin-right:8px;}
  .dot.live{background:#fff;animation:pulse 1.8s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}50%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}

  /* top bar */
  /* Topbar ohne Hintergrund-Abgrenzung (Mustafa-Entscheid 2026-06-11:
     Variante "ohne" im A/B-Vergleich gewählt), Nav bleibt exakt zentriert. */
  .topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:16px 22px;pointer-events:none;z-index:4;}
  .topbar > *{pointer-events:auto;}
  .topbar nav{pointer-events:auto;}
  /* Höherr brand mark, Linsen-H: zwei Pfosten + Doppel-Querbalken mit
     Kamera-Punkt in der Mitte (Drohne + KI-Auswertung). Gefüllt gerendert,
     Display-Geometrie etwas dicker als Print-Master damit der Punkt auch
     bei 32px sicher lesbar bleibt. */
  .brand{display:flex;align-items:center;gap:14px;}
  .brand .mark{display:block;width:18px;height:34px;color:var(--ink-0);flex-shrink:0;}
  .brand .mark svg{display:block;width:100%;height:100%;fill:currentColor;stroke:none;}
  .brand .word{display:flex;flex-direction:column;line-height:1;}
  .brand .word .brand-name{display:block;font-family:var(--sans);font-size:16px;font-weight:300;
    letter-spacing:.34em;margin:0;color:var(--ink-0);text-transform:uppercase;}
  .brand .word .tld{font-family:var(--mono);font-size:10px;color:var(--ink-3);
    letter-spacing:.20em;margin-top:5px;text-transform:uppercase;}
  /* Nav exakt mittig, unabhängig von Brand-/Session-Breite */
  .topbar nav{display:flex;gap:28px;align-items:center;
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
  .topbar nav a{color:rgba(255,255,255,.62);font-size:13px;font-weight:500;text-decoration:none;
    font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;
    padding:6px 2px;border-bottom:1px solid transparent;transition:color .25s ease,border-color .25s ease;}
  .topbar nav a:hover{color:#fff;border-bottom-color:rgba(140,200,255,.6);}
  .topbar nav a.nav-trainer{color:#8cd8ff;border:1px solid rgba(140,200,255,.32);border-radius:7px;white-space:nowrap;
    padding:7px 13px;transition:color .25s ease,background .25s ease,border-color .25s ease;}
  .topbar nav a.nav-trainer:hover{color:#06121c;background:#8cd8ff;border-color:#8cd8ff;}
  /* mobile entry: shown only when the centered nav is hidden (<515px) */
  .trainer-fab{display:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:#8cd8ff;text-decoration:none;border:1px solid rgba(140,200,255,.32);border-radius:8px;
    padding:8px 12px;pointer-events:auto;align-items:center;white-space:nowrap;}
  .trainer-fab:active{color:#06121c;background:#8cd8ff;}
  /* (Geo-Pill entfernt, IP-Lookup an Drittanbieter kollidierte mit
     connect-src 'self' und war ohne Consent ein DSGVO-Risiko.
     Nicht wieder einführen ohne Einwilligungs-Konzept.) */

  /* left rail: Spielerkarte + Analyse-Fortschritt, pointer-events:none */
  .rail-left{position:absolute;left:22px;top:74px;width:248px;display:flex;flex-direction:column;gap:14px;pointer-events:none;z-index:4;}
  .rail-left .player-card{
    background:linear-gradient(180deg, rgba(140,200,255,0.09) 0%, rgba(12,18,28,0.32) 100%);
    border:1px solid rgba(140,200,255,0.28);border-radius:13px;
    padding:15px 15px 13px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .rail-left .pc-eyebrow{font-size:10.5px;letter-spacing:.14em;color:rgba(140,168,200,0.7);text-transform:uppercase;margin-bottom:9px;}
  .rail-left .pc-name{font-size:23px;font-weight:300;letter-spacing:-0.01em;color:#fff;line-height:1;margin-bottom:14px;}
  .rail-left .pc-meta{display:grid;gap:6px;margin-bottom:13px;}
  .rail-left .pc-meta-row{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;}
  .rail-left .pc-meta-row b{font-weight:400;color:rgba(140,168,200,0.75);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;}
  .rail-left .pc-meta-row span{color:rgba(224,236,252,0.95);}
  .rail-left .pc-focus{padding-top:11px;border-top:1px solid rgba(140,168,200,0.14);display:flex;flex-direction:column;gap:4px;}
  .rail-left .pc-focus .mono{font-size:10.5px;letter-spacing:.14em;color:rgba(140,168,200,0.65);text-transform:uppercase;}
  .rail-left .pc-focus-value{font-size:16px;font-weight:500;color:#8cd8ff;}

  /* right rail: Modul-Kennzahlen + Trainerhinweis (Module-driven) */
  .rail-right{position:absolute;right:22px;top:74px;width:248px;display:flex;flex-direction:column;gap:14px;text-align:left;pointer-events:none;z-index:4;}
  .rail-right .module-panel,
  .rail-right .coach-hint{
    background:linear-gradient(180deg, rgba(140,200,255,0.06) 0%, rgba(12,18,28,0.30) 100%);
    border:1px solid rgba(140,168,200,0.16);border-radius:13px;
    padding:15px 15px 13px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .rail-right .mp-eyebrow,
  .rail-right .ch-eyebrow{font-size:10.5px;letter-spacing:.14em;color:rgba(140,168,200,0.7);text-transform:uppercase;margin-bottom:9px;}
  .rail-right .mp-title{font-size:18px;font-weight:300;letter-spacing:-0.005em;color:#fff;margin-bottom:13px;}
  .rail-right .mp-stats{display:grid;gap:8px;}
  .rail-right .mp-stat{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;padding:7px 0;border-top:1px solid rgba(140,168,200,0.10);}
  .rail-right .mp-stat:first-child{border-top:none;padding-top:0;}
  .rail-right .mp-stat b{font-weight:400;color:rgba(140,168,200,0.78);font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;}
  .rail-right .mp-stat span{color:#fff;font-family:var(--mono);font-size:14.5px;font-variant-numeric:tabular-nums;}
  .rail-right .mp-stat.dimmed{opacity:.5;}
  .rail-right .mp-stat.dimmed span{font-family:var(--sans);font-size:12.5px;}
  .rail-right .ch-body{font-size:13.5px;line-height:1.6;color:rgba(216,230,250,0.92);}

  /* Scene-Timeline: Szenen des aktiven Moduls, sitzt in der linken Rail
     unter der Spielerkarte. Erscheint erst nach Modul-Klick (.empty = aus). */
  .scene-timeline{
    background:linear-gradient(180deg, rgba(140,200,255,0.06) 0%, rgba(12,18,28,0.30) 100%);
    border:1px solid rgba(140,168,200,0.16);border-radius:14px;
    padding:16px 18px 15px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    transition:opacity .35s ease;
  }
  .scene-timeline.empty{display:none;}
  .scene-timeline .st-eyebrow{font-size:9.5px;letter-spacing:.14em;color:rgba(140,168,200,0.65);text-transform:uppercase;margin-bottom:10px;}
  .scene-timeline .st-eyebrow span{color:rgba(212,228,250,0.95);font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:11px;font-weight:500;}
  .scene-timeline .st-row{display:grid;grid-template-columns:1fr;gap:10px;}
  .scene-timeline .st-item{display:flex;flex-direction:column;gap:2px;padding-left:10px;border-left:1px solid rgba(140,200,255,0.25);}
  .scene-timeline .st-t{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#8cd8ff;text-transform:uppercase;}
  .scene-timeline .st-txt{font-size:13.5px;line-height:1.5;color:rgba(230,238,252,0.9);}
  body.portal-active .scene-timeline,
  body.portal-transitioning .scene-timeline{opacity:0;}

  /* bottom bar: hero copy + CTA */
  .bottombar{position:absolute;left:22px;right:22px;bottom:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;pointer-events:none;z-index:4;}
  .bottombar .hero, .bottombar .hero *{pointer-events:none;}
  .bottombar .cta-group, .bottombar .cta-group *{pointer-events:auto;}
  .module-menu, .module-menu *{pointer-events:auto;}
  .hero{max-width:500px;}
  .hero h1{font-family:var(--sans);font-size:clamp(30px,3.6vw,46px);line-height:1.03;letter-spacing:-.026em;font-weight:600;margin:0;color:rgba(255,255,255,.82);text-wrap:balance;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-shadow:0 2px 40px rgba(0,0,0,.45);}
  .hero h1 em{font-style:normal;color:rgba(255,255,255,.56);font-weight:400;}
  .hero p{color:rgba(255,255,255,.68);font-size:13px;line-height:1.6;margin:15px 0 0;max-width:380px;letter-spacing:.002em;}
  .cta-group{display:flex;gap:10px;align-items:center;}
  .btn{appearance:none;border:1px solid var(--ink-0);background:var(--ink-0);color:#0a0a0a;font-family:var(--sans);font-size:13px;font-weight:600;
       letter-spacing:.005em;padding:14px 20px;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:transform .25s ease;}
  .btn:hover{transform:translateY(-1px)}
  .btn .arr{width:16px;height:1px;background:#0a0a0a;position:relative;display:inline-block;}
  .btn .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid #0a0a0a;border-right:1px solid #0a0a0a;transform:rotate(45deg);}
  .btn.ghost{background:transparent;color:var(--ink-0);border-color:var(--line-2);}
  .btn.ghost .arr{background:var(--ink-0)}
  .btn.ghost .arr::after{border-color:var(--ink-0)}
  .btn.ghost:hover{border-color:var(--ink-0)}

  /* ── Mobile-Chip-Leiste (Taktiktafel-Unterpunkte) ────────────────────
     Auf Desktop unsichtbar (Rails übernehmen). Erst ≤920px eingeblendet,
     horizontal scrollbar mit Rand-Maske wie die Topbar-Nav. */
  .module-menu{display:none;}
  .module-menu-btn .mm-caret{width:0;height:0;margin-left:8px;
    border-left:4px solid transparent;border-right:4px solid transparent;
    border-top:5px solid currentColor;transition:transform .25s ease;}
  .module-menu.open .module-menu-btn .mm-caret{transform:rotate(180deg);}
  .module-menu.open .module-menu-btn{color:#06121c;background:#8cd8ff;border-color:#8cd8ff;}
  .module-menu-panel{position:absolute;top:calc(100% + 8px);left:0;display:flex;
    flex-direction:column;gap:7px;min-width:198px;padding:10px;border-radius:16px;
    background:rgba(9,14,22,.78);border:1px solid rgba(140,200,255,.2);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 18px 50px -18px rgba(0,0,0,.8);
    opacity:0;transform:translateY(-6px);pointer-events:none !important;
    transition:opacity .22s ease,transform .22s ease;}
  .module-menu.open .module-menu-panel{opacity:1;transform:translateY(0);pointer-events:auto !important;}
  .module-menu-panel .hero-chip{justify-content:flex-start;border-radius:11px;}
  .hero-chip{appearance:none;flex:0 0 auto;white-space:nowrap;cursor:pointer;
    font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
    color:rgba(224,236,252,.92);background:rgba(12,20,30,.55);
    border:1px solid rgba(140,200,255,.26);border-radius:999px;
    padding:11px 16px;min-height:44px;display:inline-flex;align-items:center;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transition:border-color .2s ease,color .2s ease,background .2s ease;}
  .hero-chip:active{color:#06121c;background:#8cd8ff;border-color:#8cd8ff;}

  /* Board-Klick-Hinweis: kleine Mono-Pille, fadet nach der Assembly ein und
     verschwindet beim ersten Node-Kontakt. Kein Dauer-Glow (nur die transiente
     Hint-Punkt-Blinzel-Animation, die mit dem Hinweis verschwindet). */
  .board-hint{position:absolute;left:50%;bottom:104px;transform:translateX(-50%) translateY(7px);
    z-index:6;pointer-events:none;display:inline-flex;align-items:center;gap:9px;
    padding:7px 15px;border-radius:999px;white-space:nowrap;
    background:rgba(10,16,24,.44);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    border:1px solid rgba(140,200,255,.22);
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(220,235,255,.80);
    opacity:0;transition:opacity .55s ease,transform .55s ease;}
  .board-hint.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .board-hint.dismissed{opacity:0!important;transform:translateX(-50%) translateY(5px)!important;}
  .board-hint .bh-dot{width:7px;height:7px;border-radius:50%;background:#8cd8ff;
    box-shadow:0 0 8px rgba(140,216,255,.65);animation:bh-blink 1.7s ease-in-out infinite;}
  @keyframes bh-blink{0%,100%{opacity:.32}50%{opacity:1}}
  @media (max-width:920px){.board-hint{bottom:auto;top:56%;}}
  /* Phone: Pill deutlich kompakter (Mustafa: "punkte antippen zu groß") —
     sie ist ein Hinweis, kein Button, und lag zu dominant mitten auf der
     Tafel. Bewusst NUR ≤480 (Spec R2-4): auf Tablets waere die Mini-Pill
     auf der grossen Tafel verloren. */
  @media (max-width:480px){.board-hint{
    font-size:8.5px;letter-spacing:.13em;gap:6px;padding:5px 10px;
    background:rgba(10,16,24,.36);border-color:rgba(140,200,255,.16);color:rgba(220,235,255,.66);}
    .board-hint .bh-dot{width:5px;height:5px;}}
  @media (prefers-reduced-motion:reduce){.board-hint .bh-dot{animation:none;}}

  /* node tooltip */
  /* ── Hover-Preview-Karte für die Taktik-Punkte ──────────────────────
     Hover zeigt eine hochwertige Vorschau (Kennzahlen + Teaser), Klick
     öffnet erst das volle Modul. Outer .node-tip macht nur Positionierung
     (left/top per Frame in JS), die Karte + Animation sitzt auf .np-card. */
  .node-tip{position:absolute;transform:translate(-50%,-100%);pointer-events:none;
    width:272px;margin-top:-16px;z-index:7;opacity:1;}
  .node-tip::after{content:"";position:absolute;left:50%;bottom:-15px;width:1px;height:15px;
    background:linear-gradient(rgba(140,200,255,.55),rgba(140,200,255,0));transform:translateX(-50%);
    opacity:0;transition:opacity .2s ease .04s;}
  .node-tip.show::after{opacity:1;}
  .np-card{position:relative;padding:15px 16px 14px;border-radius:14px;overflow:hidden;
    background:linear-gradient(180deg, rgba(20,30,46,0.94) 0%, rgba(8,13,20,0.95) 100%);
    border:1px solid rgba(140,200,255,0.22);
    box-shadow:0 22px 56px -18px rgba(0,0,0,.78);
    -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
    opacity:0;transform:translateY(10px) scale(.95);filter:blur(5px);
    transition:opacity .26s cubic-bezier(.16,1,.3,1),transform .36s cubic-bezier(.16,1,.3,1),filter .26s ease;}
  .node-tip.show .np-card{opacity:1;transform:none;filter:none;}
  .np-accent{position:absolute;left:0;top:0;height:2px;width:0;
    background:linear-gradient(90deg,#8cd8ff,rgba(140,216,255,0));
    transition:width .5s cubic-bezier(.16,1,.3,1) .08s;}
  .node-tip.show .np-accent{width:100%;}
  .np-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;}
  .np-code{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:#8cd8ff;text-transform:uppercase;}
  .np-badge{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(140,168,200,.85);border:1px solid rgba(140,168,200,.28);border-radius:999px;padding:3px 9px;}
  .np-title{font-size:17px;font-weight:500;letter-spacing:-.01em;color:#fff;line-height:1.22;margin-bottom:12px;}
  .np-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
  .np-stat{display:flex;flex-direction:column;gap:4px;padding:9px 9px;border-radius:9px;
    background:rgba(140,200,255,0.06);border:1px solid rgba(140,200,255,0.10);
    opacity:0;transform:translateY(7px);
    transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1);}
  .node-tip.show .np-stat{opacity:1;transform:none;}
  .node-tip.show .np-stat:nth-child(1){transition-delay:.14s;}
  .node-tip.show .np-stat:nth-child(2){transition-delay:.20s;}
  .node-tip.show .np-stat:nth-child(3){transition-delay:.26s;}
  .np-stat .v{font-family:var(--mono);font-size:15px;font-weight:500;color:#fff;
    font-variant-numeric:tabular-nums;line-height:1;}
  .np-stat .k{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;
    color:rgba(140,168,200,.85);text-transform:uppercase;line-height:1.1;}
  .np-teaser{font-size:12.5px;line-height:1.5;color:rgba(208,224,246,.88);margin-bottom:13px;
    opacity:0;transform:translateY(6px);
    transition:opacity .3s ease .24s,transform .3s cubic-bezier(.16,1,.3,1) .24s;}
  .node-tip.show .np-teaser{opacity:1;transform:none;}
  .np-cta{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;
    letter-spacing:.1em;text-transform:uppercase;color:#8cd8ff;
    opacity:0;transition:opacity .3s ease .32s;}
  .node-tip.show .np-cta{opacity:.95;}
  .np-cta .np-arrow{transition:transform .3s cubic-bezier(.16,1,.3,1) .32s;transform:translateX(-5px);}
  .node-tip.show .np-cta .np-arrow{transform:none;}
  @media (prefers-reduced-motion:reduce){
    .np-card,.np-stat,.np-teaser,.np-cta,.np-accent,.np-cta .np-arrow{transition:none!important;}
    .np-card{opacity:1;transform:none;filter:none;}
  }


  /* (Side-Panel, Zoom-Modus, #zoom-close und .report-Preview-CSS entfernt,      alles durch den Portal-Modus + React-Report (report-* Klassen) ersetzt;
     body.zoomed wurde nirgends mehr gesetzt.) */

  /* ── Intro = cinematic drone-feed loader ────────────────────────────────
     Full-bleed video plays through, Höherr logo held prominently over it.
     When the clip ends, the portal fades and the homepage (board) appears.
     No lens, no click, the video IS the loader. */
  #lens-portal{position:fixed;inset:0;z-index:55;background:#02040a;
    display:none;align-items:center;justify-content:center;overflow:hidden;
    transition:opacity 1.1s cubic-bezier(.2,.7,.1,1);}
  #lens-portal.active{display:flex;cursor:pointer;}
  #lens-portal.finale{cursor:default;}
  #lens-portal.done{opacity:0;pointer-events:none;}

  #lens-portal .intro-feed{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;opacity:0;filter:saturate(.92) brightness(.96);
    transition:opacity 1.2s ease;}
  #lens-portal.playing .intro-feed{opacity:1;}
  /* keep the logo legible without flattening the footage */
  #lens-portal .intro-feed-vignette{position:absolute;inset:0;pointer-events:none;z-index:2;
    background:
      radial-gradient(ellipse 90% 70% at 50% 50%, transparent 38%, rgba(2,4,10,.55) 100%),
      linear-gradient(180deg, rgba(2,4,10,.55) 0%, transparent 22%, transparent 70%, rgba(2,4,10,.72) 100%);}
  /* black-fade: from the moment the in-lens tactical board appears, the
     footage sinks to black so that overlay is never read, the logo stays
     on top and reads stronger against it. JS adds .blackout at the cue. */
  #lens-portal .intro-blackout{position:absolute;inset:0;pointer-events:none;z-index:3;
    background:#02040a;opacity:0;transition:opacity 1.4s ease;}
  #lens-portal.blackout .intro-blackout{opacity:.97;}

  /* LOGO LOCKUP, prominent, lower-third, premium.
     Hidden until the camera dives into the drone (JS adds .logo-in around
     the push-in), then the three parts rise + sharpen in a staggered reveal. */
  #lens-portal .intro-logo{position:relative;z-index:5;display:flex;flex-direction:column;
    align-items:center;gap:26px;text-align:center;pointer-events:none;
    margin-top:13vh;
    transition:transform .9s cubic-bezier(.2,.7,.1,1);}
  #lens-portal .intro-logo .mark{width:clamp(84px,13vmin,138px);height:auto;
    opacity:0;transform:translateY(22px) scale(.9);filter:blur(7px) drop-shadow(0 6px 26px rgba(0,0,0,.6));
    transition:opacity 1.2s ease, transform 1.5s cubic-bezier(.16,.7,.1,1), filter 1.2s ease;}
  #lens-portal .intro-logo .mark svg{display:block;width:100%;height:100%;
    fill:#fff;stroke:none;}
  #lens-portal .intro-logo .wordmark{font-family:var(--mono);font-weight:500;
    font-size:clamp(26px,4.4vmin,42px);letter-spacing:.5em;text-indent:.5em;
    text-transform:uppercase;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.7);
    opacity:0;transform:translateY(18px);filter:blur(6px);
    transition:opacity 1.2s ease, transform 1.4s cubic-bezier(.16,.7,.1,1), filter 1.2s ease;}
  #lens-portal .intro-logo .tagline{font-family:var(--mono);font-size:13px;
    letter-spacing:.36em;text-transform:uppercase;color:rgba(200,222,252,.72);
    text-shadow:0 1px 14px rgba(0,0,0,.8);
    opacity:0;transform:translateY(14px);filter:blur(5px);
    transition:opacity 1.1s ease, transform 1.3s cubic-bezier(.16,.7,.1,1), filter 1.1s ease;}
  /* once the footage is black, the lockup eases a touch larger, more present */
  #lens-portal.blackout .intro-logo{transform:scale(1.06);}
  /* staggered reveal, triggered by JS on the dive-in */
  #lens-portal.logo-in .intro-logo .mark{opacity:1;transform:translateY(0) scale(1);
    filter:blur(0) drop-shadow(0 6px 26px rgba(0,0,0,.6));transition-delay:0s;}
  #lens-portal.logo-in .intro-logo .wordmark{opacity:1;transform:translateY(0);filter:blur(0);transition-delay:.28s;}
  #lens-portal.logo-in .intro-logo .tagline{opacity:1;transform:translateY(0);filter:blur(0);transition-delay:.52s;}
  /* the logo lifts and dissolves as the homepage takes over */
  #lens-portal.done .intro-logo{opacity:0;transform:translateY(-10px) scale(.99);
    transition:opacity .7s ease,transform .9s ease;}

  /* slim progress hairline at the bottom, real load progress */
  #lens-portal .intro-progress{position:absolute;left:0;bottom:0;height:2px;z-index:6;
    width:0;background:linear-gradient(90deg, rgba(140,200,255,.35), var(--blue, #8cd8ff));
    box-shadow:0 0 12px rgba(140,200,255,.5);
    transition:width .25s linear, opacity .5s ease;}
  /* On skip/finish the bar rushes to 100% and then dissolves into the dive —
     width-Transition MUSS hier mitdeklariert bleiben (transition ueberschreibt
     die Basisregel komplett), sonst springt der Sweep 50→100 instant; die
     .75s-Opacity-Verzoegerung laesst den vollen Balken sichtbar ankommen:
     liest sich als "geladen → weg", nicht "eingefroren → verschwunden". */
  #lens-portal.blackout .intro-progress,
  #lens-portal.finale .intro-progress{opacity:0;
    transition:width .45s ease-out, opacity .5s ease .75s;}

  /* skip hint, subtle, fades in shortly after the clip starts */
  /* text-align:center + padding-left = letter-spacing: das Tracking haengt
     hinter dem letzten Glyph und schob den Text sonst optisch nach links;
     auf schmalen Screens brach er zusaetzlich zweizeilig linksbuendig um
     (Mustafa R3: "soll mittig sein"). */
  #lens-portal .intro-skip{position:absolute;z-index:6;left:50%;bottom:30px;
    transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;
    letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;
    text-align:center;color:rgba(200,222,252,.5);
    opacity:0;transition:opacity .8s ease;pointer-events:none;}
  @media (max-width:480px){
    #lens-portal .intro-skip{font-size:10px;letter-spacing:.2em;padding-left:.2em;white-space:nowrap;}
  }
  #lens-portal.hint .intro-skip{opacity:1;}
  #lens-portal.blackout .intro-skip,
  #lens-portal.finale .intro-skip{opacity:0;}

  /* LENS RING, the lens edge that forms around the logo and then sweeps out
     past the frame as we dive in. Centred on the logo mark by JS. */
  #lens-portal .lens-ring{position:absolute;z-index:4;left:50%;top:50%;width:0;height:0;
    transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
    border:2px solid rgba(140,216,255,.92);
    box-shadow:0 0 30px 5px rgba(140,216,255,.42), inset 0 0 24px 3px rgba(140,216,255,.28);}

  /* FINALE, an iris mask punches a growing transparent hole into the black
     backdrop, centred on the logo, so the homepage is revealed through the
     expanding lens. --cx/--cy/--ir are driven by JS. */
  #lens-portal.finale .intro-blackout{
    -webkit-mask:radial-gradient(circle at var(--cx,50%) var(--cy,50%),
        transparent var(--ir,0px), #000 calc(var(--ir,0px) + 1.5px));
            mask:radial-gradient(circle at var(--cx,50%) var(--cy,50%),
        transparent var(--ir,0px), #000 calc(var(--ir,0px) + 1.5px));}

  @media (prefers-reduced-motion: reduce){
    #lens-portal .intro-logo .mark,
    #lens-portal .intro-logo .wordmark,
    #lens-portal .intro-logo .tagline{opacity:1;transform:none;filter:none;transition:none;}
  }

  /* loading ring (board assembling) */
  #loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:6;pointer-events:none;}
  /* Solange das Intro laeuft, verdeckt das Portal den Ring komplett — nicht
     mitpainten: seine JS-Label-Updates (FELD_KALIBRIEREN → OBERFLAECHE …)
     wuerden sonst als spaete LCP-Text-Kandidaten zaehlen. */
  body.intro #loading{visibility:hidden;}
  #loading .ring{width:34px;height:34px;border:1px solid var(--line-2);border-top-color:#fff;border-radius:50%;margin:0 auto 12px;animation:spin 1.1s linear infinite;}
  #loading .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink-2);text-transform:uppercase;}
  @keyframes spin{to{transform:rotate(360deg)}}
  /* Lens-H reveal: Beam sweept das volle Glas (top:0, Höhe 34% → -100%..294%
     deckt -34%..134% der Glashöhe ab). Dots flashen scan-synchron via
     animation-delay, gleiche Dauer, gleiche lineare Timing-Funktion. */
  @keyframes lens-h-scan{0%{transform:translateY(-100%)}100%{transform:translateY(294%)}}
  /* calibration arc orbiting the lens rim while the portal loads */
  @keyframes lens-focus-sweep{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
  /* H-Verbindung: Dots sind permanent sichtbar, die Verbindungslinien
     erscheinen nur während der Beam das H überstreicht (t=37.5%..62.5%
     des Zyklus). Posts zeichnen sich via dashoffset dem Beam folgend,
     Bars flashen beim Beam-Treffer (Peak 50% + animation-delay), danach
     gemeinsames Nachglühen und Ausfaden. */
  @keyframes lens-h-draw{
    0%,37%{stroke-dashoffset:80;opacity:0}
    38%{opacity:.9}
    63%{stroke-dashoffset:0;opacity:.9}
    80%{stroke-dashoffset:0;opacity:.75}
    95%,100%{stroke-dashoffset:0;opacity:0}}
  @keyframes lens-h-bar{
    0%,46%{opacity:0}
    50%{opacity:.9}
    80%{opacity:.75}
    95%,100%{opacity:0}}
  .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
  /* portal exit transition */

  /* ─── responsive: laptop (≤1280) ─────────────────────────────────────
     Tighten rails and hero so HUD doesn't crowd the pitch on a 13 bis 15"
     laptop screen. Camera auto-fits via JS so the board stays centered. */
  @media (max-width: 1280px){
    .topbar{padding:18px 22px;}
    .topbar nav{gap:22px;}
    .topbar nav a{font-size:14px;}
    .rail-left{left:22px;top:78px;width:220px;gap:14px;}
    .rail-right{right:22px;top:78px;width:260px;gap:14px;}
    .rail-right .num{font-size:36px;}
    .rail-right .sub{font-size:9.5px;letter-spacing:.04em;}
    .bottombar{left:22px;right:22px;bottom:20px;gap:18px;}
    .hero{max-width:480px;}
    .hero h1{font-size:clamp(28px,3.8vw,44px);}
    .hero p{font-size:13px;max-width:380px;}
  }

  /* ─── responsive: tablet (≤920) ──────────────────────────────────────
     Hide telemetry rails entirely, scrollable horizontal nav, stack hero+CTA. */
  @media (max-width: 920px){
    .rail-left,.rail-right{display:none;}
    /* Topbar-Nav: die volle 6-Item-Nav kollidiert auf Tablet mit dem Logo
       (justify-content:space-between, Nav überläuft links unter die Wortmarke).
       Daher verstecken; Trainerlogin als FAB, die 4 Analysemodule sind über
       die Hero-Chips unten erreichbar, "Über Höherr" per Scroll. */
    .topbar nav{display:none;}
    .trainer-fab{display:inline-flex;}
    .topbar{padding:14px 18px;gap:14px;}
    .bottombar{flex-direction:column;align-items:flex-start;gap:14px;left:18px;right:18px;bottom:18px;}
    .hero{max-width:none;}
    .hero h1{font-size:clamp(26px,5.2vw,36px);}
    .hero p{font-size:12.5px;max-width:none;}
    /* Chips oben unter der Topbar verankern (nicht mehr unten im Bottombar-Fluss).
       Topbar ist absolute top:0, padding 14px, Mark ~34px → Chips bei ~60px. */
    .module-menu{display:block;position:absolute;top:60px;left:18px;z-index:7;}
    .cta-group{width:100%;gap:8px;}
    /* Tap-Targets: mind. 44px Höhe (Apple HIG) */
    .cta-group .btn{flex:1;justify-content:center;padding:14px 14px;font-size:13px;min-height:48px;}
    /* Brand-Mark Wordmark-Untertitel auf Mobile etwas kleiner */
    .brand .word .tld{font-size:8.5px;}
  }

  /* ─── responsive: phone (≤480) ───────────────────────────────────────
     Tightest layout, Logo+Geo only, smaller hero, full-width CTAs. */
  @media (max-width: 480px){
    .topbar{padding:12px 14px;gap:10px;}
    .brand .word .brand-name{font-size:13px;letter-spacing:.28em;}
    .brand .word .tld{display:none;}    /* "Drohnenanalyse" sub aus auf Phone */
    .brand{gap:10px;}
    .brand .mark{width:15px;height:28px;}
    /* Nav komplett verstecken, User navigiert via Pitch-Punkte */
    .topbar nav{display:none;}
    .trainer-fab{display:inline-flex;}
    /* Bottombar kompakter halten, damit sie nicht das halbe Board verdeckt. */
    .bottombar{left:14px;right:14px;bottom:14px;gap:9px;}
    .hero h1{font-size:24px;line-height:1.12;}
    .hero p{font-size:12px;margin:8px 0 0;}
    .module-menu{top:52px;left:14px;}
    .hero-chip{font-size:10.5px;letter-spacing:.08em;padding:9px 12px;min-height:40px;}
    .cta-group{flex-direction:column;align-items:stretch;}
    .cta-group .btn{padding:13px 16px;width:100%;box-sizing:border-box;}
  }

  /* ─── responsive: very short viewports (≤640 height) ─────────────────
     Free up vertical space on landscape phones / split-screen laptops. */
  @media (max-height: 640px){
    .rail-left{top:64px;}
    .rail-right{top:64px;}
    .bottombar{bottom:14px;}
    .hero h1{font-size:clamp(22px,3.4vw,32px);}
    .hero p{font-size:12px;margin-top:8px;}
  }

  /* ─── performance: drop expensive overlays on smaller screens ────────
     The film grain + scan sweep + breathing halo combo is GPU-heavy on
     integrated graphics. On a phone/tablet they'd just cost battery. */
  @media (max-width: 1100px){
    #stage::before,#stage::after{display:none;}
  }
  @media (max-width: 768px){
    .dot.live{animation:none;}
  }

  /* ─── accessibility: respect prefers-reduced-motion ─────────────────── */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
  }

  /* tiny scrollbar */
  ::-webkit-scrollbar{width:6px;height:6px}
  ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}

  /* ──────────────────────────────────────────────────────────────────
     PORTAL-LAYER, Transparente UI über dem live-WebGL-Board.
     Das 3D-Board bleibt durchgehend gemounted und gerendert; die
     Pitch-Markings sind der Portal-Hintergrund. Kein display:none-
     Wechsel mitten im sichtbaren Bereich → kein Jump-Cut.
     ────────────────────────────────────────────────────────────────── */
  #portal-layer{
    position:fixed;inset:0;z-index:200;
    background:transparent;
    overflow-y:auto;overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    /* visibility:hidden + opacity:0 → harter Skip vom Rendering. opacity
       allein lässt manche Browser den Layer trotzdem partiell rendern
       (besonders mit backdrop-filter darunter) → vorzeitiges Flash. */
    visibility:hidden;opacity:0;pointer-events:none;
    transition:opacity .45s cubic-bezier(.2,.8,.2,1), visibility 0s linear .45s;
  }
  body.portal-active{overflow:hidden;}
  /* Stage bleibt SICHTBAR, nur Pointer-Events durchlassen damit Portal
     interaktiv ist. Das WebGL-Board ist jetzt der Portal-Hintergrund. */
  body.portal-active #stage{display:block;pointer-events:none;}
  body.portal-active #overlay{opacity:0 !important;pointer-events:none !important;}
  /* Entry-Kaskade: erst Cam ankommen lassen, dann Vignette, dann Top-Bar,
     dann Content. visibility togglet zeitgleich mit dem Sichtbar-Werden
     damit der Browser keine Layer rendert solange invisible. */
  body.portal-active #portal-layer{
    visibility:visible;opacity:1;pointer-events:auto;
    transition:opacity .50s cubic-bezier(.2,.8,.2,1) .60s, visibility 0s linear .60s;
  }
  body.portal-active #portal-layer .portal-top{
    visibility:visible;opacity:1;transform:translateY(0);
    transition:opacity .35s ease .85s, transform .45s cubic-bezier(.2,.8,.2,1) .85s, visibility 0s linear .85s;
  }
  body.portal-active #portal-layer .portal-content{
    visibility:visible;transform:translateY(0);opacity:1;
    transition:transform .55s cubic-bezier(.2,.8,.2,1) 1.00s, opacity .45s ease 1.00s, visibility 0s linear 1.00s;
  }

  /* Portal-Atmosphäre, nur Akzent. Pitch-Markings kommen vom live-WebGL. */
  #portal-layer .portal-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
  #portal-layer .portal-grid{display:none;}
  #portal-layer .portal-sweep{position:absolute;left:0;right:0;height:140px;top:0;
    background:linear-gradient(180deg,transparent 0%,rgba(207,224,255,.045) 50%,transparent 100%);
    will-change:transform;animation:portal-sweep 14s linear infinite;}
  @keyframes portal-sweep{0%{transform:translateY(-30vh)}100%{transform:translateY(120vh)}}
  /* Atmospheric layer, zwei subtile Glows die wie "Stadion-Licht aus
     dem Off" wirken, nicht wie eine harte Vignette. Crossfade smooth
     mit dem Pitch-Look. */
  #portal-layer .portal-vignette{position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(70vw 55vh at 50% -10%,rgba(180,210,255,.06) 0%,rgba(180,210,255,0) 55%),
      radial-gradient(90vw 70vh at 30% 110%,rgba(120,170,210,.04) 0%,transparent 60%),
      radial-gradient(140vw 120vh at 50% 50%,transparent 0%,rgba(2,4,8,.40) 75%);}

  /* Top-Bar: Zurück + Code */
  #portal-layer .portal-top{
    position:sticky;top:0;z-index:5;
    display:flex;justify-content:space-between;align-items:center;
    padding:22px clamp(20px,4vw,40px);
    background:linear-gradient(to bottom,rgba(4,6,10,.58) 45%,rgba(4,6,10,0));
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity .35s ease, transform .4s cubic-bezier(.2,.8,.2,1), visibility 0s linear .4s;
  }
  #portal-layer .portal-back{
    appearance:none;background:transparent;border:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.85);font-family:var(--sans);font-size:13px;font-weight:500;
    padding:10px 16px 10px 14px;border-radius:999px;
    display:inline-flex;align-items:center;gap:10px;cursor:pointer;
    transition:border-color .25s ease,background .25s ease,color .25s ease;
  }
  #portal-layer .portal-back:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.04);color:#fff;}
  #portal-layer .portal-back .back-short{display:none;}
  #portal-layer .portal-back .back-full{display:inline;}
  @media (max-width:480px){
    #portal-layer .portal-back .back-full{display:none;}
    #portal-layer .portal-back .back-short{display:inline;}
  }
  #portal-layer .portal-back .arr-back{
    width:14px;height:1px;background:currentColor;position:relative;display:inline-block;
  }
  #portal-layer .portal-back .arr-back::before{
    content:"";position:absolute;left:0;top:-3px;width:7px;height:7px;
    border-left:1px solid currentColor;border-bottom:1px solid currentColor;
    transform:rotate(45deg);
  }
  #portal-layer .portal-code{
    font-size:10.5px;letter-spacing:.10em;color:var(--ink-3);
  }

  /* Content */
  #portal-layer .portal-content{
    position:relative;z-index:2;
    max-width:980px;margin:0 auto;
    padding:60px clamp(24px,5vw,56px) 120px;
    visibility:hidden;transform:translateY(20px);opacity:0;
    transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease, visibility 0s linear .45s;
  }
  /* (portal-eyebrow/-headline/-subline/-status/-cards entfernt, das alte
     Portal-Landing-Design; heute mountet das Portal direkt den React-Report
     in #report-mount.) */

  @media (max-width:768px){
    #portal-layer .portal-top{padding:16px 18px;}
    #portal-layer .portal-back{font-size:12px;padding:9px 14px 9px 12px;}
    #portal-layer .portal-content{padding:40px 22px 80px;}
  }
  /* Phone: Back-Button-Text auf "Zurück" gekürzt */
  @media (max-width:480px){
    #portal-layer .portal-top{padding:14px 14px;}
    #portal-layer .portal-back{font-size:11.5px;padding:8px 12px 8px 11px;}
    #portal-layer .portal-back span:last-child{font-size:11.5px;}
    #portal-layer .portal-code{font-size:9.5px;}
    #portal-layer .portal-content{padding:32px 18px 70px;}
  }

  /* ──────────────────────────────────────────────────────────────────────
     Report-Module, Glass-Cards, Score-Ring, Pills, Heatmap-Container,
     Inter-Report-Nav-Strip. Lebt im #report-mount innerhalb des Portals.
     ────────────────────────────────────────────────────────────────────── */
  #report-mount{
    display:flex;flex-direction:column;gap:32px;
    font-family:'Inter Tight',sans-serif;color:#e8eef6;
    font-feature-settings:'tnum';
    padding-bottom:120px;
  }
  .report-shell-header{
    position:sticky;top:0;z-index:3;
    display:flex;justify-content:space-between;align-items:center;
    gap:16px;flex-wrap:wrap;
    padding:14px 0;
    background:linear-gradient(to bottom, rgba(6,10,16,0.92) 0%, rgba(6,10,16,0.0) 100%);
    backdrop-filter:blur(8px);
  }
  .report-shell-id{font-size:13px;letter-spacing:.04em;color:#b6cef0;line-height:1.55;}
  .report-shell-id strong{color:#fff;font-weight:600;}
  .report-shell-id .sep{color:rgba(140,168,200,0.45);margin:0 8px;}
  .report-shell-eyebrow{
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(140,168,200,0.78);
  }
  .report-section-title{
    font-size:42px;line-height:1.04;letter-spacing:-0.022em;
    font-weight:400;margin:8px 0 28px;text-wrap:balance;
  }
  .glass-card{
    background:linear-gradient(180deg, rgba(18,27,40,0.62) 0%, rgba(10,16,24,0.58) 100%);
    border:1px solid rgba(140,168,200,0.16);
    border-radius:14px;
    backdrop-filter:blur(20px);
    padding:22px;
    box-shadow:0 12px 32px -20px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.045);
    transition:border-color 200ms ease, box-shadow 200ms ease;
  }
  .glass-card:hover{border-color:rgba(140,168,200,0.30);
    box-shadow:0 16px 40px -20px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.06);}
  /* Shared editorial field-graphic panel (ink + hairline), used by pressing
     thirds + heatmap so they read consistently with the Formation editorial card. */
  .field-card{position:relative;width:100%;max-width:560px;margin:0 auto;
    border-radius:14px;overflow:hidden;
    background:linear-gradient(180deg, #121821 0%, #0d121a 100%);
    border:1px solid rgba(220,228,238,0.14);
    box-shadow:0 22px 55px -26px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.04);}
  .field-card.thirds{aspect-ratio:100/52;}
  .field-card.heat{aspect-ratio:100/64;}
  .field-legend{display:flex;align-items:center;gap:9px;max-width:560px;margin:10px auto 0;
    font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;color:rgba(138,149,164,0.7);}
  .field-legend .ramp{flex:1;height:5px;border-radius:3px;
    background:linear-gradient(90deg, rgba(127,208,196,0.25), rgba(224,177,94,0.6), rgba(255,228,196,0.95));}

  /* ───── Lane-D Editorial Formationsbericht (ink + brass + mono) ─────
     Self-contained card: masthead · pitch+rail body · footer. Brass accent
     #e0b15e for structural data, teal #7fd0c4 for the keeper. */
  .ed-card{--ed-accent:#e0b15e;--ed-gk:#7fd0c4;--ed-line:rgba(220,228,238,0.10);
    --ed-line-strong:rgba(220,228,238,0.16);--ed-muted:#8a95a4;--ed-faint:#5b6675;
    max-width:640px;margin:0 auto;padding:26px 30px 22px;
    background:linear-gradient(180deg,#11151c 0%,#0d1117 100%);
    border:1px solid var(--ed-line-strong);border-radius:14px;
    box-shadow:0 24px 70px -30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.03);
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;color:#e8edf4;}
  .ed-masthead{display:flex;align-items:flex-start;justify-content:space-between;
    padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--ed-line);}
  .ed-kicker{font-size:9.5px;letter-spacing:.30em;color:var(--ed-accent);
    text-transform:uppercase;font-weight:600;margin-bottom:7px;}
  .ed-mast-sub{font-size:10.5px;color:var(--ed-muted);letter-spacing:.02em;}
  .ed-sys{font-size:30px;font-weight:300;letter-spacing:.04em;line-height:1;text-align:right;white-space:nowrap;}
  .ed-sys-label{font-size:9px;color:var(--ed-faint);letter-spacing:.26em;
    text-transform:uppercase;margin-top:8px;text-align:right;}
  .ed-body{display:grid;grid-template-columns:1fr 150px;gap:24px;align-items:stretch;}
  .ed-pitchwrap{position:relative;min-width:0;}
  .ed-caption{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:10px;}
  .ed-caption .lbl{font-size:9px;letter-spacing:.22em;color:var(--ed-faint);text-transform:uppercase;}
  .ed-caption .dir{font-size:9px;letter-spacing:.16em;color:var(--ed-muted);
    display:flex;align-items:center;gap:6px;white-space:nowrap;}
  .ed-caption .dir .arr{color:var(--ed-accent);font-size:12px;line-height:1;}
  .ed-card svg{display:block;width:100%;height:auto;}
  .ed-rail{display:flex;flex-direction:column;padding-top:22px;}
  .ed-stat{padding:12px 0;border-bottom:1px solid var(--ed-line);}
  .ed-stat:first-child{padding-top:0;}
  .ed-stat:last-child{border-bottom:none;}
  .ed-stat .v{font-size:23px;font-weight:300;letter-spacing:-.01em;line-height:1;}
  .ed-stat .v .u{font-size:12px;color:var(--ed-muted);margin-left:2px;}
  .ed-stat .k{font-size:9px;letter-spacing:.14em;color:var(--ed-faint);text-transform:uppercase;margin-top:7px;}
  .ed-stat.accent .v{color:var(--ed-accent);}
  .ed-bar{height:3px;background:var(--ed-line);border-radius:3px;margin-top:9px;overflow:hidden;}
  .ed-bar>span{display:block;height:100%;background:var(--ed-accent);border-radius:3px;}
  .ed-barsplit{display:flex;height:3px;border-radius:3px;overflow:hidden;margin-top:9px;}
  .ed-barsplit .l{background:var(--ed-accent);}
  .ed-barsplit .r{background:var(--ed-line-strong);}
  .ed-splitleg{display:flex;justify-content:space-between;font-size:8.5px;
    color:var(--ed-faint);margin-top:6px;letter-spacing:.06em;}
  .ed-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;
    padding-top:13px;border-top:1px solid var(--ed-line);font-size:9px;color:var(--ed-faint);letter-spacing:.10em;}
  .ed-foot .brand{color:var(--ed-muted);letter-spacing:.20em;}
  .ed-foot .brand b{color:#e8edf4;font-weight:600;}
  .ed-foot .brand .dot{width:4px;height:4px;border-radius:50%;background:var(--ed-accent);
    display:inline-block;margin:0 7px 1px;}
  /* Editorial stat grid — reuses .ed-stat for the data sections (Teamzahlen etc.)
     so the whole report reads as one editorial document, not a card per stat. */
  .ed-statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px;}
  .ed-statgrid .ed-stat{border-bottom:1px solid var(--ed-line);}
  .ed-possession{margin-top:18px;}
  .ed-possession .lead{display:flex;justify-content:space-between;align-items:baseline;
    font-size:11px;letter-spacing:.04em;color:var(--ed-muted);margin-bottom:8px;}
  .ed-possession .lead b{color:var(--ed-accent);font-weight:600;}
  .ed-possession .lead .opp{color:var(--ed-faint);}
  @media(max-width:600px){
    .ed-card{padding:20px 18px 18px;}
    .ed-masthead{gap:14px;}
    .ed-sys{font-size:26px;}
    .ed-body{grid-template-columns:1fr;gap:16px;}
    .ed-rail{flex-direction:row;flex-wrap:wrap;gap:0 20px;padding-top:0;}
    .ed-rail .ed-stat{flex:1 1 40%;border-bottom:1px solid var(--ed-line);}
    .ed-foot{flex-direction:column;align-items:flex-start;gap:7px;}
    .ed-statgrid{grid-template-columns:1fr 1fr;gap:0 20px;}
    /* ungerade Stat-Anzahl (z.B. Laufdaten = 3): letzter Wert spannt beide Spalten statt
       als Orphan mit leerer Zelle zu stehen. Even-Grids (2×2 etc.) bleiben unberührt. */
    .ed-statgrid .ed-stat:last-child:nth-child(odd){grid-column:1 / -1;}
  }
  /* ───── Editorial — extended vocabulary (Laufdaten + Spielerdossier) ─────
     Reuses the .ed-card tokens so the whole report reads as one document.
     Section eyebrow · hairline divider · dossier head · notes · goals ·
     recommendation · runners table · verdict pull-line · CTA. */
  .ed-sec{font-size:9px;letter-spacing:.20em;text-transform:uppercase;
    color:var(--ed-faint);font-weight:600;margin-bottom:13px;}
  .ed-sec.accent{color:var(--ed-accent);}
  .ed-sec.teal{color:var(--ed-gk);}
  .ed-div{height:1px;background:var(--ed-line);margin:24px 0;}
  .ed-caption.curve{margin-top:4px;}
  /* Player dossier head — score column + radar */
  .ed-dossier{display:grid;grid-template-columns:188px 1fr;gap:30px;align-items:center;}
  .ed-scorebox{display:flex;flex-direction:column;align-items:center;gap:13px;}
  .ed-scorebox .score-ring{width:128px;height:128px;}
  .ed-scorebox .delta{font-size:10px;color:var(--ed-muted);letter-spacing:.03em;
    text-align:center;line-height:1.65;}
  .ed-scorebox .delta b{color:var(--ed-accent);font-weight:600;}
  .ed-scorebox .meta{font-size:9px;color:var(--ed-faint);letter-spacing:.10em;
    text-align:center;line-height:1.8;text-transform:uppercase;}
  /* Strengths / development fields */
  .ed-twocol{display:grid;grid-template-columns:1fr 1fr;gap:30px;}
  .ed-notes{display:grid;}
  .ed-note{position:relative;padding:12px 0 12px 14px;border-bottom:1px solid var(--ed-line);}
  .ed-note:last-child{border-bottom:none;}
  .ed-note::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;
    border-radius:2px;background:var(--ed-accent);}
  .ed-note.gap::before{background:var(--ed-line-strong);}
  .ed-note .lab{font-size:12px;color:#e8edf4;margin-bottom:4px;letter-spacing:.005em;}
  .ed-note .ev{font-size:10px;color:var(--ed-muted);line-height:1.55;}
  /* Training goals */
  .ed-goals{display:grid;}
  .ed-goal{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:baseline;
    padding:13px 0;border-bottom:1px solid var(--ed-line);}
  .ed-goal:last-child{border-bottom:none;}
  .ed-goal .no{font-size:16px;font-weight:300;color:var(--ed-accent);line-height:1;}
  .ed-goal .tx{font-size:12px;color:#cdd5e0;line-height:1.55;}
  /* Coach recommendation */
  .ed-rec .hl{font-size:16px;font-weight:300;color:#fff;letter-spacing:-.005em;
    margin:4px 0 16px;line-height:1.35;}
  .ed-rec ul{list-style:none;margin:0;padding:0;}
  .ed-rec li{display:grid;grid-template-columns:24px 1fr;gap:11px;font-size:12px;
    line-height:1.55;color:#cdd5e0;padding:11px 0;border-bottom:1px solid var(--ed-line);}
  .ed-rec li:last-child{border-bottom:none;}
  .ed-rec li .n{color:var(--ed-accent);font-size:10.5px;}
  .ed-rec .sign{font-size:9.5px;color:var(--ed-faint);margin-top:14px;
    letter-spacing:.05em;font-style:italic;}
  /* Runners table */
  .ed-table{width:100%;border-collapse:collapse;font-size:11.5px;}
  .ed-table th{text-align:left;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ed-faint);font-weight:600;padding:0 0 10px;border-bottom:1px solid var(--ed-line-strong);}
  .ed-table th.num{text-align:right;}
  .ed-table td{padding:10px 0;border-bottom:1px solid var(--ed-line);}
  .ed-table tr:last-child td{border-bottom:none;}
  .ed-table td.nm{color:#e8edf4;}
  .ed-table td.nm .ps{color:var(--ed-faint);font-size:9.5px;margin-left:5px;}
  .ed-table td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ed-muted);}
  .ed-table td.num.lead{color:var(--ed-accent);}
  .ed-table td.rk{color:var(--ed-faint);width:16px;}
  /* Verdict pull-line — outside the card, literal colors */
  .ed-verdict{max-width:640px;margin:16px auto 0;padding:2px 0 2px 16px;position:relative;
    font-style:italic;color:#b6c0cd;line-height:1.62;font-size:12.5px;
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;}
  .ed-verdict::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:2px;
    border-radius:2px;background:#e0b15e;}
  /* CTA + disclaimer — outside the card */
  .ed-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;max-width:640px;
    margin:22px auto 0;}
  .ed-cta .ed-btn{padding:13px 24px;font-size:12px;letter-spacing:.04em;text-decoration:none;
    font-family:'JetBrains Mono',monospace;border-radius:8px;transition:transform .2s,box-shadow .2s;}
  .ed-cta .ed-btn.primary{background:#e0b15e;color:#141414;font-weight:600;
    box-shadow:0 10px 30px -10px rgba(224,177,94,0.5);}
  .ed-cta .ed-btn.primary:hover{transform:translateY(-1px);box-shadow:0 14px 36px -10px rgba(224,177,94,0.62);}
  .ed-cta .ed-btn.ghost{color:#e8edf4;border:1px solid rgba(220,228,238,0.16);}
  .ed-cta .ed-btn.ghost:hover{border-color:rgba(220,228,238,0.3);}
  .ed-disc{font-size:10px;color:#5b6675;line-height:1.6;margin:18px auto 0;max-width:640px;
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;}
  /* Pressing + Zones — shared-helper editorial skins (literal tokens, leben
     ausserhalb von .ed-card). Daten-Sheet-Kachel · Verdict-Pill · Szenenzeile · Zonenraster. */
  .ed-metric{padding:14px 0 0;border-top:1px solid rgba(220,228,238,0.12);
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;}
  .ed-metric .v{font-size:23px;font-weight:300;letter-spacing:-.01em;line-height:1;color:#e8edf4;}
  .ed-metric .v .u{font-size:12px;color:#8a95a4;margin-left:2px;}
  .ed-metric.accent{border-top-color:rgba(224,177,94,0.55);}
  .ed-metric.accent .v{color:#e0b15e;}
  .ed-metric .k{font-size:9px;letter-spacing:.13em;color:#5b6675;text-transform:uppercase;
    margin-top:7px;line-height:1.45;}
  .ed-metric .h{font-size:9px;letter-spacing:.03em;color:#8a95a4;margin-top:6px;line-height:1.45;}
  .ed-pill{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;
    text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap;
    border:1px solid transparent;}
  .ed-pill.good{color:#e0b15e;border-color:rgba(224,177,94,0.4);background:rgba(224,177,94,0.08);}
  .ed-pill.warn{color:#b6c0cd;border-color:rgba(220,228,238,0.18);}
  .ed-pill.mut{color:#8a95a4;border-color:rgba(220,228,238,0.14);}
  .ed-scenes{display:grid;}
  .ed-scene{display:grid;grid-template-columns:50px 1fr auto;gap:16px;align-items:center;
    padding:14px 0;border-bottom:1px solid rgba(220,228,238,0.10);
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;}
  .ed-scene:last-child{border-bottom:none;}
  .ed-scene .min{font-size:13px;color:#e0b15e;}
  .ed-scene .act{font-size:12.5px;color:#e8edf4;margin-bottom:4px;letter-spacing:.005em;}
  .ed-scene .note{font-size:10.5px;color:#8a95a4;line-height:1.5;}
  .ed-zonegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
  .ed-zonegrid .cell{text-align:center;padding:14px 8px;
    border:1px solid rgba(220,228,238,0.07);border-radius:3px;}
  .ed-zonegrid .pct{font-size:19px;font-weight:300;
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;}
  @media(max-width:600px){
    .ed-dossier{grid-template-columns:1fr;gap:20px;}
    .ed-twocol{grid-template-columns:1fr;gap:6px;}
    .ed-table{font-size:11px;}
    .ed-scene{grid-template-columns:38px 1fr auto;gap:11px;}
  }
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  .stat-card .stat-value{font-size:28px;font-weight:300;letter-spacing:-0.01em;}
  .stat-card .stat-unit{font-size:14px;color:rgba(182,206,240,0.65);margin-left:4px;}
  .stat-card .stat-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(140,168,200,0.7);margin-top:8px;}
  .stat-card .pct-track{margin-top:12px;height:1px;background:rgba(140,168,200,0.18);position:relative;}
  .stat-card .pct-marker{position:absolute;top:-2px;width:2px;height:5px;background:#8cd8ff;}
  .stat-card .pct-label{font-size:10px;color:rgba(140,168,200,0.65);margin-top:4px;
    font-family:'JetBrains Mono','SF Mono',monospace;}
  .pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 12px;border-radius:999px;
    background:rgba(140,200,255,0.06);
    border:1px solid rgba(140,200,255,0.18);
    font-size:12px;letter-spacing:.04em;
  }
  .pill.warn{border-color:rgba(255,180,100,0.35);background:rgba(255,180,100,0.04);color:#ffd9b3;}
  .pill.muted{border-color:rgba(140,168,200,0.18);color:rgba(182,206,240,0.7);background:rgba(140,168,200,0.04);}
  .score-ring-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
  .score-ring{width:140px;height:140px;}
  .score-ring-delta{font-size:12px;color:rgba(140,200,255,0.85);
    font-family:'JetBrains Mono','SF Mono',monospace;}
  .report-nav-strip{
    position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
    display:flex;gap:6px;align-items:center;
    background:rgba(8,14,22,0.78);
    border:1px solid rgba(140,168,200,0.18);
    border-radius:999px;
    padding:6px 12px;
    backdrop-filter:blur(14px);
    z-index:5;
    font-size:12px;letter-spacing:.06em;
  }
  .report-nav-strip .crumb-list{display:flex;gap:2px;align-items:center;}
  .report-nav-strip button{
    background:transparent;border:none;color:rgba(182,206,240,0.65);
    padding:4px 10px;border-radius:999px;cursor:pointer;font:inherit;
    letter-spacing:inherit;transition:color 150ms,background 150ms;
  }
  .report-nav-strip button:hover:not(:disabled){color:#fff;background:rgba(140,200,255,0.06);}
  .report-nav-strip button:disabled{opacity:0.3;cursor:not-allowed;}
  .report-nav-strip button.active{color:#fff;background:rgba(140,200,255,0.14);}
  .report-nav-strip .arrow{
    width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;border:1px solid rgba(140,168,200,0.18);
    padding:0;
  }
  .report-nav-strip .mobile-current{display:none;padding:0 8px;color:#fff;}
  @media (max-width: 720px){
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    .report-section-title{font-size:30px;}
    .report-nav-strip .crumb-list{display:none;}
    .report-nav-strip .mobile-current{display:inline;}
    /* ‹/›-Pfeile sind auf Mobile die einzige Navigation zwischen den sechs
       Report-Sektionen (crumb-list ist aus): 28px war unter jeder Tap-Empfehlung. */
    .report-nav-strip .arrow{width:44px;height:44px;}
    /* Mobile-Stack für mehrspaltige Report-Layouts (klassen-basiert) */
    .rpt-2col, .rpt-3col, .rpt-dev-outer{ grid-template-columns: 1fr !important; }
    .rpt-stat-3{ grid-template-columns: repeat(2,1fr) !important; }
    /* Score-Ring-Wrapper auf Mobile: Ring kleiner, Text wrap */
    .score-ring-wrap{flex-direction:column;align-items:flex-start;}
    .score-ring{width:108px;height:108px;}
  }

  /* ──────────────────────────────────────────────────────────────────────
     Hero-Cue & Below-Fold Landing Sections
     ────────────────────────────────────────────────────────────────────── */

  /* Below-Fold sitzt UNTERHALB des fixed #stage. html/body werden scrollbar,
     beim Scrollen schiebt sich below-fold mit eigenem Background über den Stage. */
  html, body{ overflow:visible; height:auto; min-height:100%; }
  html{ overflow-x:hidden; }
  body{ overflow-x:hidden; }
  body.portal-active{ overflow:hidden; height:100%; }
  body.intro #below-fold{ display:none; }
  body.portal-active #below-fold{ display:none; }

  #below-fold{
    position:relative;z-index:2;
    margin-top:100vh;
    background:linear-gradient(to bottom,
      rgba(6,10,16,0.0) 0%,
      rgba(6,10,16,0.85) 8%,
      rgba(6,10,16,1) 18%,
      rgba(6,10,16,1) 100%);
    padding:140px 0 80px;
    font-family:'Inter Tight',sans-serif;color:#e8eef6;
    font-feature-settings:'tnum';
  }
  #below-fold .container{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 32px;}
  /* ── ambient particle field (behind content) ── */
  /* scroll beam, dim premium timeline spine that fills with light on scroll */
  /* white pitch-line on the left, one continuous line, fills top→down with scroll progress */
  #scroll-beam{position:fixed;top:0;bottom:38px;left:34px;width:2px;z-index:6;pointer-events:none;opacity:0;transition:opacity .5s ease;
    background:rgba(255,255,255,.06);}
  #scroll-beam.on{opacity:1;}
  #scroll-beam .beam-fill{position:absolute;left:0;top:0;width:100%;height:var(--beam,0%);
    background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.22));box-shadow:0 0 7px rgba(255,255,255,.28);}
  #scroll-beam .beam-head{position:absolute;left:50%;top:var(--beam,0%);transform:translate(-50%,-50%);
    width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(255,255,255,.5);}
  /* terminal blockade, goal-line cap the head docks into at the very end */
  #scroll-beam .beam-end{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%) scaleX(0);transform-origin:center;
    width:26px;height:2px;border-radius:1px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.6);opacity:0;
    transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .4s ease;}
  #scroll-beam.at-end .beam-end{transform:translateX(-50%) scaleX(1);opacity:.9;}
  #scroll-beam.at-end .beam-head{box-shadow:0 0 16px 5px rgba(255,255,255,.7);}
  @media (max-width:900px){#scroll-beam{left:16px;}}
  /* ── scroll-reveal for content ── */
  #below-fold .reveal-on{opacity:0;transform:translateY(22px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
  #below-fold .reveal-on.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion:reduce){#below-fold .reveal-on{opacity:1!important;transform:none!important;}}
  /* ── richer hover (audience + why rows) ── */
  #below-fold .audience-card{transition:border-color .2s,background .2s,
    transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s;}
  #below-fold .audience-card:hover,#below-fold .why-row:hover{transform:translateY(-3px);
    border-color:rgba(140,200,255,0.34);box-shadow:0 18px 40px -20px rgba(140,200,255,0.5);}
  #below-fold .audience-card:hover .ico-chip,#below-fold .why-row:hover .ico-chip{
    border-color:rgba(140,200,255,0.55);box-shadow:0 8px 22px -12px rgba(140,200,255,0.65);}
  #below-fold section{margin-bottom:120px;}
  #below-fold section:last-child{margin-bottom:0;}
  #below-fold .section-eyebrow{
    font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(140,168,200,0.7);margin-bottom:14px;
  }
  #below-fold .section-title{
    font-size:clamp(34px,4vw,58px);line-height:1.04;letter-spacing:-0.026em;font-weight:400;
    margin:0 0 26px;
  }
  #below-fold .section-lead{
    font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:rgba(228,236,250,0.86);
    max-width:760px;margin:0 0 24px;
  }
  /* ── workflow flow (centerpiece) ── */
  #below-fold .flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:44px;}
  #below-fold .flow::before{content:'';position:absolute;top:27px;left:9%;right:9%;height:1px;z-index:0;
    background:linear-gradient(90deg,transparent,rgba(140,200,255,.34) 12%,rgba(140,200,255,.34) 88%,transparent);}
  #below-fold .stage{position:relative;z-index:1;}
  #below-fold .flow.reveal-ready .stage{opacity:0;transform:translateY(18px);
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}
  #below-fold .flow.reveal-ready .stage.in{opacity:1;transform:none;}
  #below-fold .stage .node{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;
    background:radial-gradient(120% 120% at 50% 0,#13202f,#0a121b);border:1px solid rgba(140,200,255,.28);
    box-shadow:0 0 0 7px #07080a,0 12px 34px -14px rgba(140,200,255,.5);}
  #below-fold .stage .node svg{width:23px;height:23px;stroke:#8cd8ff;fill:none;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round;}
  #below-fold .stage .num{font-family:'JetBrains Mono',monospace;font-size:12px;color:#8cd8ff;letter-spacing:.1em;margin-bottom:9px;}
  #below-fold .stage .title{font-size:17px;font-weight:500;margin-bottom:8px;letter-spacing:-.01em;}
  #below-fold .stage .body{font-size:13px;color:rgba(182,206,240,0.72);line-height:1.55;margin-bottom:14px;}
  #below-fold .stage .tech{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.02em;line-height:1.55;
    color:rgba(140,168,200,0.6);padding-top:11px;border-top:1px solid rgba(140,168,200,0.12);}
  #below-fold .stage .tech b{color:rgba(140,200,255,.88);font-weight:500;}
  @media (prefers-reduced-motion:reduce){#below-fold .flow.reveal-ready .stage{opacity:1;transform:none;}}
  #below-fold .module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  #below-fold .module-pill{
    background:rgba(12,18,28,0.55);
    border:1px solid rgba(140,168,200,0.18);
    border-radius:14px;padding:18px;cursor:pointer;
    transition:border-color 200ms,background 200ms,transform 200ms;
    text-align:left;font:inherit;color:inherit;
  }
  #below-fold .module-pill:hover{
    border-color:rgba(140,200,255,0.4);
    background:rgba(20,32,48,0.6);transform:translateY(-1px);
  }
  #below-fold .module-pill .module-num{
    font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
    color:rgba(140,200,255,0.7);margin-bottom:10px;
  }
  #below-fold .module-pill .module-title{font-size:16px;font-weight:500;margin-bottom:4px;}
  #below-fold .module-pill .module-desc{font-size:12px;color:rgba(182,206,240,0.65);line-height:1.5;}
  /* shared icon chip (modules + audience), ties to workflow icon language */
  #below-fold .ico-chip{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;margin-bottom:15px;
    background:radial-gradient(120% 120% at 50% 0,#13202f,#0a121b);border:1px solid rgba(140,200,255,0.22);
    transition:border-color 200ms,box-shadow 200ms;}
  #below-fold .ico-chip svg{width:19px;height:19px;stroke:#8cd8ff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
  #below-fold .module-pill:hover .ico-chip{border-color:rgba(140,200,255,0.5);box-shadow:0 8px 22px -12px rgba(140,200,255,0.6);}
  #below-fold .audience-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
  #below-fold .audience-strip .audience-card,
  #below-fold .why-grid .audience-card{
    background:rgba(12,18,28,0.4);
    border:1px solid rgba(140,168,200,0.12);
    border-radius:12px;padding:18px;
  }
  #below-fold .audience-card .label{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(140,200,255,0.78);margin-bottom:8px;
  }
  #below-fold .audience-card > div:last-child{
    font-size:13px;color:rgba(228,236,250,0.85);line-height:1.5;
  }
  /* why-drone: horizontal icon-rows, distinct rhythm from the card grids */
  #below-fold .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  #below-fold .why-row{display:flex;gap:16px;align-items:flex-start;
    background:rgba(12,18,28,0.4);border:1px solid rgba(140,168,200,0.12);
    border-radius:12px;padding:18px 20px;transition:border-color 200ms,background 200ms;}
  #below-fold .why-row:hover{border-color:rgba(140,200,255,0.3);background:rgba(16,26,40,0.5);}
  #below-fold .why-row .ico-chip{margin-bottom:0;flex:0 0 auto;}
  #below-fold .why-row .why-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(140,200,255,0.78);margin-bottom:7px;}
  #below-fold .why-row .why-text{font-size:13px;color:rgba(228,236,250,0.85);line-height:1.5;}
  #below-fold .cta-strip{
    display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
    padding:48px 0;
  }
  #below-fold .cta-btn{
    padding:14px 24px;border-radius:999px;font-size:14px;letter-spacing:.04em;
    background:rgba(140,200,255,0.10);
    border:1px solid rgba(140,200,255,0.32);
    color:#fff;text-decoration:none;cursor:pointer;font:inherit;
    transition:background 180ms,transform 180ms,box-shadow 180ms,border-color 180ms;
  }
  #below-fold .cta-btn:hover{background:rgba(140,200,255,0.18);transform:translateY(-1px);}
  #below-fold .cta-btn.primary{
    background:#8cd8ff;color:#08111c;border-color:#8cd8ff;
    padding:16px 30px;font-size:15px;font-weight:500;
    box-shadow:0 0 0 1px rgba(140,200,255,0.25),0 8px 28px -8px rgba(140,200,255,0.55);
  }
  #below-fold .cta-btn.primary:hover{background:#b3e3ff;transform:translateY(-2px);box-shadow:0 0 0 1px rgba(140,200,255,0.4),0 12px 36px -8px rgba(140,200,255,0.7);}
  #below-fold .cta-btn.muted{background:transparent;border-color:rgba(140,168,200,0.22);color:rgba(220,232,250,0.7);}
  #below-fold .cta-btn.muted:hover{background:rgba(140,168,200,0.08);color:#fff;}
  #below-fold .footer-strip{
    margin-top:48px;padding-top:24px;border-top:1px solid rgba(140,168,200,0.12);
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
    font-size:12px;color:rgba(140,168,200,0.55);
  }
  #below-fold .footer-legal{display:flex;gap:18px;}
  #below-fold .footer-legal a{color:rgba(140,168,200,0.55);text-decoration:none;
    border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
  #below-fold .footer-legal a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.3);}
  /* ── HUD-editorial cards (icons removed, mono index + accent hairline) ── */
  #below-fold .module-pill{position:relative;overflow:hidden;padding-top:22px;}
  #below-fold .module-pill::before{content:'';position:absolute;top:0;left:0;width:38px;height:2px;background:#8cd8ff;opacity:.85;}
  #below-fold .audience-card{position:relative;padding-top:22px;}
  #below-fold .audience-strip .audience-card::before{content:'';position:absolute;top:0;left:0;width:32px;height:2px;background:rgba(140,200,255,.7);}
  #below-fold .aud-idx{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.12em;color:rgba(140,200,255,0.6);margin-bottom:12px;}
  #below-fold .why-row{align-items:flex-start;}
  #below-fold .why-idx{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:400;line-height:1;color:#8cd8ff;letter-spacing:-.02em;padding-top:2px;min-width:34px;}
  /* ══ premium card system: Bericht / Für-wen / Warum (glass depth, motion, presence) ══ */
  #below-fold #bericht-inhalt .module-grid{grid-template-columns:repeat(3,1fr);gap:16px;}
  #below-fold #fuer-wen .audience-strip{gap:16px;}
  #below-fold #warum-drohne .why-grid{gap:16px;}
  #below-fold #bericht-inhalt .module-pill,
  #below-fold #fuer-wen .audience-card,
  #below-fold #warum-drohne .why-row{
    background:radial-gradient(140% 120% at 50% -10%,rgba(24,38,56,.6),rgba(9,13,20,.5));
    border:1px solid rgba(140,200,255,.16);border-radius:16px;
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    box-shadow:0 34px 80px -44px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);
    position:relative;overflow:hidden;
    transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .45s,background .35s;
  }
  #below-fold #bericht-inhalt .module-pill{padding:30px 26px 26px;}
  #below-fold #fuer-wen .audience-card{padding:30px 24px 24px;}
  #below-fold #warum-drohne .why-row{padding:28px 26px;gap:22px;align-items:flex-start;}
  #below-fold #bericht-inhalt .module-pill:hover,
  #below-fold #fuer-wen .audience-card:hover,
  #below-fold #warum-drohne .why-row:hover{
    transform:translateY(-5px);border-color:rgba(140,200,255,.45);
    background:radial-gradient(140% 120% at 50% -10%,rgba(30,48,70,.72),rgba(11,16,24,.55));
    box-shadow:0 42px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(140,200,255,.18),0 24px 60px -28px rgba(140,200,255,.5),inset 0 1px 0 rgba(255,255,255,.07);
  }
  #below-fold #bericht-inhalt .module-pill::before{width:40px;height:2px;transition:width .45s cubic-bezier(.16,1,.3,1);}
  #below-fold #bericht-inhalt .module-pill:hover::before{width:76px;}
  #below-fold #bericht-inhalt .module-pill::after{
    content:'→';position:absolute;right:24px;bottom:22px;font-family:'JetBrains Mono',monospace;font-size:16px;
    color:#8cd8ff;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .4s;}
  #below-fold #bericht-inhalt .module-pill:hover::after{opacity:.9;transform:translateX(0);}
  #below-fold #bericht-inhalt .module-pill .module-num{font-size:12px;color:#8cd8ff;opacity:.9;margin-bottom:14px;}
  #below-fold #bericht-inhalt .module-pill .module-title{font-size:19px;font-weight:500;letter-spacing:-.01em;margin-bottom:9px;}
  #below-fold #bericht-inhalt .module-pill .module-desc{font-size:13px;color:rgba(190,210,240,.7);line-height:1.55;max-width:92%;}
  #below-fold #fuer-wen .aud-idx{font-size:13px;}
  #below-fold #fuer-wen .audience-card .label{font-size:13px;letter-spacing:.12em;color:#8cd8ff;margin-bottom:10px;}
  #below-fold #fuer-wen .audience-card > div:last-child{font-size:13.5px;color:rgba(228,236,250,.82);line-height:1.55;}
  #below-fold #warum-drohne .why-idx{font-size:34px;font-weight:400;color:rgba(140,200,255,.9);min-width:46px;padding-top:0;}
  #below-fold #warum-drohne .why-row .why-label{font-size:13px;letter-spacing:.12em;color:#8cd8ff;margin-bottom:9px;}
  #below-fold #warum-drohne .why-row .why-text{font-size:14px;color:rgba(228,236,250,.82);line-height:1.55;}
  /* ── aerial gallery (Vogelperspektive) ── */
  #below-fold #vogelperspektive .gallery-mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:172px;gap:12px;margin-top:42px;}
  #below-fold #vogelperspektive .g-tile{position:relative;border-radius:14px;overflow:hidden;border:1px solid rgba(140,200,255,.14);background:#0a0f16;}
  #below-fold #vogelperspektive .g-tile img{width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s;filter:saturate(.9) brightness(.88);}
  #below-fold #vogelperspektive .g-tile:hover img{transform:scale(1.05);filter:saturate(1.06) brightness(1);}
  #below-fold #vogelperspektive .g-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(4,7,11,.8));pointer-events:none;}
  #below-fold #vogelperspektive .g-cap{position:absolute;left:14px;bottom:12px;z-index:2;font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(220,235,255,.88);text-shadow:0 1px 6px rgba(0,0,0,.85);}
  #below-fold #vogelperspektive .g-hero{grid-column:1/5;grid-row:1/3;}
  #below-fold #vogelperspektive .g-hero .g-cap{font-size:12.5px;letter-spacing:.1em;}
  #below-fold #vogelperspektive .g-a{grid-column:5/7;grid-row:1/2;}
  #below-fold #vogelperspektive .g-b{grid-column:5/7;grid-row:2/3;}
  #below-fold #vogelperspektive .g-c{grid-column:1/3;grid-row:3/4;}
  #below-fold #vogelperspektive .g-d{grid-column:3/5;grid-row:3/4;}
  #below-fold #vogelperspektive .g-e{grid-column:5/7;grid-row:3/4;}
  @media (max-width:900px){
    #below-fold #vogelperspektive .gallery-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:148px;}
    #below-fold #vogelperspektive .g-tile{grid-column:auto!important;grid-row:auto!important;}
    #below-fold #vogelperspektive .g-hero{grid-column:1/3!important;}
    /* Halbbreite Tiles: Caption rechts begrenzen + Tracking runter, sonst
       umbricht "Vogelperspektive in 4K" unsauber ueber den Bildrand. */
    #below-fold #vogelperspektive .g-cap{right:12px;letter-spacing:.08em;line-height:1.55;}
  }
  /* ── cinematic story bands (workflow) ── */
  #below-fold .bf-band{display:grid;grid-template-columns:1fr 1.06fr;align-items:center;gap:clamp(48px,5vw,80px);margin:0 0 clamp(64px,10vh,128px);}
  #below-fold .bf-band.flip .bf-copy{order:2;}
  #below-fold .bf-band.flip .bf-vis{order:1;}
  #below-fold .bf-kicker{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--acc,#8cd8ff);display:flex;align-items:center;gap:12px;margin-bottom:22px;}
  #below-fold .bf-kicker::before{content:'';width:34px;height:1px;background:#8cd8ff;}
  #below-fold .bf-headline{font-size:clamp(46px,6vw,94px);line-height:.94;letter-spacing:-.035em;font-weight:400;margin:0 0 30px;text-wrap:balance;}
  #below-fold .bf-headline em{font-style:normal;color:#8cd8ff;}
  #below-fold .bf-lead{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:rgba(228,236,250,.86);max-width:540px;margin:0 0 34px;font-weight:400;}
  #below-fold .bf-metaline{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(140,168,200,.6);}
  #below-fold .bf-vis{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;
    border:1px solid rgba(140,200,255,.18);background:#080c12;
    box-shadow:0 50px 120px -50px rgba(0,0,0,.9),inset 0 0 80px -40px rgba(140,200,255,.25);}
  #below-fold .bf-vis.square{aspect-ratio:1/1;}
  #below-fold .bf-vis video,#below-fold .bf-vis img{width:100%;height:100%;object-fit:cover;display:block;}
  #below-fold .bf-vis .bf-scrim{position:absolute;inset:0;background:linear-gradient(120deg,rgba(6,8,11,.5),transparent 42%,rgba(6,8,11,.22));pointer-events:none;}
  #below-fold .bf-vis .bf-tag{position:absolute;top:16px;left:18px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
    color:#8cd8ff;display:flex;align-items:center;gap:7px;text-shadow:0 1px 6px rgba(0,0,0,.8);}
  #below-fold .bf-vis .bf-tag i{width:6px;height:6px;border-radius:50%;background:#8cd8ff;box-shadow:0 0 9px #8cd8ff;}
  #below-fold .bf-corner{position:absolute;width:18px;height:18px;border:1px solid rgba(140,200,255,.7);pointer-events:none;}
  #below-fold .bf-corner.tl{top:12px;left:12px;border-right:none;border-bottom:none;}
  #below-fold .bf-corner.tr{top:12px;right:12px;border-left:none;border-bottom:none;}
  #below-fold .bf-corner.bl{bottom:12px;left:12px;border-right:none;border-top:none;}
  #below-fold .bf-corner.br{bottom:12px;right:12px;border-left:none;border-top:none;}
  #below-fold .bf-readout{position:absolute;right:16px;bottom:14px;text-align:right;font-family:'JetBrains Mono',monospace;
    font-size:10px;letter-spacing:.1em;color:rgba(228,240,255,.7);line-height:1.7;text-shadow:0 1px 6px rgba(0,0,0,.8);pointer-events:none;}
  #below-fold .bf-readout b{color:#8cd8ff;font-weight:500;font-size:15px;}
  #below-fold .bf-tbox{position:absolute;border:1.4px solid #8cd8ff;box-shadow:0 0 12px -3px #8cd8ff;pointer-events:none;}
  #below-fold .bf-tbox.t2{border-color:#ffd27a;box-shadow:0 0 12px -3px #ffd27a;}
  #below-fold .bf-tbox span{position:absolute;top:-13px;left:0;font-family:'JetBrains Mono',monospace;font-size:8px;color:#8cd8ff;letter-spacing:.08em;white-space:nowrap;}
  #below-fold .bf-tbox.t2 span{color:#ffd27a;}
  @media (max-width:900px){
    #below-fold .bf-band{grid-template-columns:1fr;gap:28px;min-height:0;margin-bottom:64px;}
    #below-fold .bf-band.flip .bf-vis{order:0;}#below-fold .bf-band.flip .bf-copy{order:1;}
    #below-fold .bf-vis,#below-fold .bf-vis.square{aspect-ratio:16/11;}
  }
  @media (max-width:900px){
    #below-fold .audience-strip{grid-template-columns:repeat(2,1fr);}
    #below-fold .why-grid{grid-template-columns:1fr;}
    #below-fold .flow{grid-template-columns:1fr;gap:30px;}
    #below-fold .flow::before{top:0;bottom:0;left:26px;right:auto;width:1px;height:auto;
      background:linear-gradient(180deg,transparent,rgba(140,200,255,.3) 8%,rgba(140,200,255,.3) 92%,transparent);}
    #below-fold .stage{padding-left:74px;min-height:54px;}
    #below-fold .stage .node{position:absolute;left:0;top:0;margin-bottom:0;}
    /* 2-ID-Spezifität, sonst schlägt #below-fold #bericht-inhalt .module-grid
       (:1029) die Media-Regel und das Grid bleibt mobil 3-spaltig. */
    #below-fold #bericht-inhalt .module-grid{grid-template-columns:1fr;}
    #below-fold .section-title{font-size:30px;}
    #below-fold{padding:80px 0 60px;}
    #below-fold .container{padding:0 20px;}
    #below-fold section{margin-bottom:80px;}
    /* CTA-Strip: zentrierte Pills unterschiedlicher Breite wirken auf dem
       Phone unruhig ("P und B nicht gleich lang"). Gestapelt + gleiche Breite. */
    #below-fold .cta-strip{flex-direction:column;align-items:stretch;flex-wrap:nowrap;
      gap:12px;max-width:340px;margin:0 auto;padding:40px 0;}
    #below-fold .cta-btn{width:100%;box-sizing:border-box;text-align:center;justify-content:center;}
    /* Padding+Font für ALLE cta-btn vereinheitlichen — Spezifität (1 ID,2 Klassen)
       matcht #below-fold .cta-btn.primary (:1003) und gewinnt per Source-Order,
       sonst stehen primär/sekundär unterschiedlich hoch. */
    #below-fold .cta-strip .cta-btn{padding:15px 24px;font-size:14px;}
  }


/* ── C3: ehemalige Inline-style=-Attribute -> Klassen (CSP style-src 'self') ──
   Diese Regeln ersetzen 5 Inline-Styles aus index.html, damit unsafe-inline aus
   style-src entfernt werden kann. Werte 1:1 uebernommen (visuell identisch). */
#below-fold .bf-tbox--p1{left:43%;top:33%;width:24px;height:36px}
#below-fold .bf-tbox--p2{left:54%;top:44%;width:24px;height:36px}
#below-fold .bf-tbox--p3{left:48%;top:52%;width:24px;height:36px}
#below-fold #cta .section-eyebrow.is-centered{text-align:center}
#below-fold #cta .section-title.is-centered-narrow{text-align:center;max-width:760px;margin:0 auto 36px}