/*
 * Styles for shared/topbar.js -- see that file's header comment for why
 * this is a shared component instead of being copy-pasted per service.
 *
 * Kept independent from each host page's own palette on purpose: the
 * topbar carries one fixed scheme regardless of which screen is showing
 * underneath it, so nothing here reads a CSS custom property from a host
 * page's scoped palette (`--live` etc.) -- doing that once caused an
 * entire component to render invisible when it was moved outside the
 * scope that defined the variable (see CLAUDE.md). Every color below is a
 * literal value for that reason.
 *
 * CEO-Verlauf: Darkmode (schwarz) -> helle Glas-Leiste (Weiss) -> dunkle
 * Glas-Leiste (#121212, dieselbe Farbe wie die Post-Karten) -> jetzt
 * "hellgrau, fast weiss" (#f2f2f2 -- derselbe helle Ton, der sonst als
 * --text/--page-text auf dunklen Screens verwendet wird, hier als helle
 * Flaeche statt als Schriftfarbe). Weiterhin eine Glas-Leiste (halb-
 * transparent + backdrop-filter:blur), nur der Ton hat sich mehrfach
 * geaendert. Dunkle Schrift, aktiver Navi-Link #2E2EE8 (auf hellem Grund
 * der kontrastreichere der beiden Blautoene, siehe fruehere Anlaeufe).
 * Cache-Hinweis: /shared/* bekam frueher KEINEN Cache-Control-Header (siehe
 * caddy/Caddyfile), wodurch der Browser eine eigene Heuristik anwandte und
 * diese Datei zeitweise veraltet aus dem Disk-Cache zeigte -- bei mehreren
 * Deploys kurz hintereinander sah das aus wie ein selbststaendiges Hin-
 * und Herspringen der Farbe. Jetzt no-cache wie bei den HTML-Routen, jeder
 * Seitenaufruf prueft also per If-None-Match auf die aktuelle Version.
 * Die mobile Ausklapp-Schublade (siehe @media unten) bleibt eine eigene,
 * separat entschiedene Flaeche (reines Schwarz), unabhaengig von diesem Ton.
 */

/* Kleine Lade-Leiste ganz oben + sanfter "Herauszoom"-Effekt beim
   Seitenwechsel -- gehört zum Soft-Nav-System in topbar.js (progressStart/
   progressDone/swap). */
.nd-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:#5C5CFF; z-index:999; transition:width .3s ease, opacity .2s ease .15s; opacity:0; pointer-events:none; }
.nd-progress.active{ opacity:1; }
@keyframes ndZoomBack{
  from{ opacity:1; transform:scale(1); }
  to{ opacity:0; transform:scale(0.94); }
}
#ndContentRoot.nd-leaving{ animation:ndZoomBack .26s ease forwards; transform-origin:50% 0; }

/* Die Topleisten-Hoehe als CSS-Custom-Property auf :root statt als an
   mehreren Stellen (hier, .nd-topbar-spacer, .nd-burger-backdrop/.nd-nav
   top-Position, UND in jeder Host-Seite fuer eigene Hoehen-Berechnungen wie
   .scroll-section) wiederholtes hartcodiertes "60px" -- genau diese
   Verdopplung hat schon einmal dazu gefuehrt, dass eine Host-Seite (hub's
   Events-Screen) beim Hinzufuegen der Player-Leiste nicht mehr
   nachgezogen wurde und dadurch mehr Scroll-Hoehe reserviert hat, als
   tatsaechlich sichtbar war. :root statt eines scoped Selektors, damit der
   Wert unabhaengig vom DOM-Mount-Zeitpunkt sofort verfuegbar ist (siehe
   CLAUDE.md zu gescopeten Custom Properties).
   CEO 15.9.: "dünner, sowas wie das hier [The Lot Radio], aber nicht 1:1
   kopieren" -- 60px auf 44px, keine feste Spalte davor/danach noetig, weil
   ALLES (Spacer, Player-Leiste, mobile Schublade) ausschliesslich ueber
   diese eine Variable rechnet (siehe Kommentar oben) -- keine der frueher
   riskanten Stellen mit eigenem hartcodierten Wert mehr vorhanden, die den
   "Spalt oberhalb der Topleiste"-Bug beim ersten Versuch verursacht haetten. */
:root{
  --nd-topbar-h:44px;
  /* NEONROT -- die eine Farbe fuer JEDES Herz auf LFX (CEO 15.9.: "die
     Herzen sollen immer neon rot sein"). Vorher waren sie an drei Orten
     verschieden: auf PLAY schwarz (dort ist --live auf Schwarz gesetzt), in
     der Console blau (--accent) und im Beitrags-Strom dunkelrot. Diese
     Datei laedt auf allen drei Seiten -- deshalb steht der Wert hier und
     nirgends sonst. Derselbe Ton wie der rote Puls des Signatur-Effekts
     (0xff1533 in shared/club-house.js). */
  --lfx-heart:#ff1533;
}

/* Dauerhaft fixierte Kopfzeile -- bleibt beim Scrollen sichtbar. Zwei feste
   Farbkacheln links (Logo, aktuelles Modul), danach die Navigation. */
/* Bug gefunden + behoben 12.9. ("Das Seiten Menü geht nicht mehr"): das
   Glas-Aussehen (halbtransparenter Hintergrund + backdrop-filter) sass
   direkt auf .nd-topbar selbst. Ein filter/backdrop-filter auf einem
   Element macht es zum Containing Block fuer ALLE eigenen
   position:fixed-Nachfahren (statt des Viewports) -- betraf hier sowohl
   .nd-nav/.nd-burger-backdrop (die mobile mit position:fixed arbeiten) als
   auch .nd-info-overlay: alle drei wurden auf .nd-topbar's eigene 60px
   hohe Box zusammengestaucht statt auf den vollen Bildschirm, dazu
   zusaetzlich noch von dessen (durch overflow-x:auto implizit erzwungenem)
   overflow-y:auto beschnitten. Fix: das Glas ist jetzt ein eigenes
   ::before dahinter -- .nd-topbar selbst traegt kein filter/backdrop-filter
   mehr und ist dadurch KEIN Containing Block mehr, .nd-nav & Co. koennen
   ganz normal echte Kinder von .nd-topbar bleiben (wichtig fuer die
   Desktop-Ansicht, wo .nd-nav als stinknormale Inline-Zeile direkt neben
   .nd-primary-nav im selben Flex-Container stehen muss).
   CEO 15.9. (erneut): "die Topleiste aendert immer noch ihre Farbe random"
   -- das Glas selbst war die Ursache. backdrop-filter:saturate(180%) auf
   einem NUR 82% deckenden Hintergrund verstaerkt aktiv die Farbe von allem,
   was darunter liegt (ein farbiger Seitenkopf schien also durch UND wurde
   zusaetzlich gesaettigt) -- je nachdem, welcher Screen gerade sichtbar
   war, sah die Leiste dadurch buchstaeblich anders eingefaerbt aus, ohne
   dass sich am eigenen CSS der Leiste je etwas geaendert haette. Jetzt eine
   voll deckende Flaeche statt Glas: KEIN backdrop-filter mehr noetig (das
   war ohnehin nur fuer den Glas-Effekt da, nicht fuer den Containing-Block-
   Fix oben -- der bleibt gueltig, weil ein einfaches background-color
   niemals einen eigenen Containing Block erzeugt), die Farbe ist dadurch
   ab jetzt garantiert konstant. */
.nd-topbar{
  position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:stretch;
  height:var(--nd-topbar-h); color:#0a0a0a;
  background:none;
  border-bottom:1px solid rgba(0,0,0,0.08);
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  overflow-x:auto; scrollbar-width:none;
}
.nd-topbar::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:#f2f2f2;
}
.nd-topbar::-webkit-scrollbar{ display:none; }
.nd-tile{
  display:flex; align-items:center; flex-shrink:0; padding:0 16px;
  font-family:'Archivo Variable',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  text-decoration:none; cursor:pointer;
}
/* LFX-Logo als drehender Wuerfel (CEO: "wie frueher die MTV-Logos"): die
   weisse Kachel bleibt, darin ein 26px-CSS-3D-Wuerfel (skaliert mit der
   duennen 44px-Leiste, siehe --nd-topbar-h oben), der endlos um die
   Y-Achse rollt und dabei leicht kippt. Vorder-/Rueckseite schwarz auf
   weiss, die vier anderen Flaechen weiss auf schwarz -- so liest sich die
   Drehung als Koerper und nicht als flackernder Text. */
.nd-tile-logo{ background:#fff; color:#000; border-right:1px solid rgba(0,0,0,0.1); perspective:200px; }
.nd-cube{
  position:relative; width:26px; height:26px; transform-style:preserve-3d;
  /* CEO: "durchgehend drehen ohne diese Pause" -- linear statt der
     vorherigen cubic-bezier(.45,0,.55,1): die hatte an jedem Drittel der
     Animation (0%/50%/100%) die Geschwindigkeit fast auf null abgebremst,
     bevor sie wieder beschleunigte -- sichtbar als kurzes Stocken zweimal
     pro Umlauf. linear laeuft mit konstanter Geschwindigkeit durch. */
  animation:ndCubeSpin 9s linear infinite;
}
.nd-cube-face{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:#fff; color:#000; border:1.5px solid #000; box-sizing:border-box;
  font-family:'Archivo Variable',sans-serif; font-size:9px; font-weight:800; letter-spacing:.06em;
}
.nd-cube-right, .nd-cube-left, .nd-cube-top, .nd-cube-bottom{ background:#000; color:#fff; border-color:#fff; }
.nd-cube-front{ transform:translateZ(13px); }
.nd-cube-back{ transform:rotateY(180deg) translateZ(13px); }
.nd-cube-right{ transform:rotateY(90deg) translateZ(13px); }
.nd-cube-left{ transform:rotateY(-90deg) translateZ(13px); }
.nd-cube-top{ transform:rotateX(90deg) translateZ(13px); }
.nd-cube-bottom{ transform:rotateX(-90deg) translateZ(13px); }
@keyframes ndCubeSpin{
  0%{ transform:rotateX(-18deg) rotateY(0deg); }
  50%{ transform:rotateX(18deg) rotateY(180deg); }
  100%{ transform:rotateX(-18deg) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce){ .nd-cube{ animation:none; transform:rotateX(-18deg) rotateY(-22deg); } }
.nd-tile-current{
  background:#2E2EE8; color:#DCA896; border-right:1px solid rgba(0,0,0,0.1);
  width:110px; justify-content:center; overflow:hidden; text-overflow:ellipsis;
  text-decoration:none;
}
.nd-topbar-mark{ display:none; }

/* Primäre Navigation, wie bei professionellen Seiten üblich: die beiden
   Hauptbereiche (Play, Events) stehen als echte Links inline in der
   Leiste, alles andere (Pager/Field/About -- seltener gebraucht) wandert
   ins Burger-Menü als sekundäre Navigation. */
.nd-primary-nav{
  display:flex; gap:18px; align-items:center; white-space:nowrap; margin-left:20px;
}
.nd-primary-nav a{
  color:#0a0a0a; text-decoration:none; font-family:'Archivo Variable',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  /* Immer reserviert, auch wenn nicht aktiv -- sonst verschiebt sich die
     Zeile leicht, sobald die Marke dazukommt. */
  border-bottom:2px solid transparent; padding-bottom:2px;
}
.nd-primary-nav a:active{ opacity:.6; }
/* Wo man ist, zeigt eine Marke -- keine Farbaenderung (CEO 15.9.: "die
   Topleiste aendert sich weiter staendig von der Farbe am Desktop").
   Frueher wurde der Linktext blau eingefaerbt; seit die Bereiche der
   Seite ohne Nachladen wechseln (derselbe Tag, siehe CLAUDE.md "Wechsel
   zwischen Bereichen DERSELBEN Seite braucht kein Netzwerk"), sprang diese
   Farbe bei jedem Klick sofort um -- vorher hat der Seitenwechsel selbst
   das ueberdeckt. Text bleibt jetzt konstant schwarz, eine Unterlinie
   markiert die aktive Seite, exakt wie ueberall sonst im Projekt (Marke
   statt Farbumkehr). Ein echter border-bottom statt eines abgesetzten
   Pseudo-Elements, weil .nd-topbar per overflow-x:auto auch vertikal
   beschneidet -- ausserhalb der eigenen Box liegt hier nichts sicher. */
.nd-primary-nav a.nd-nav-current{ border-bottom-color:#2E2EE8; }

/* Burger-Menü NUR am Mobile (siehe Media Query unten) -- auf breiten
   Screens ist genug Platz, da steht .nd-nav (Pager/Field/About) einfach
   inline in der Leiste, kein Button, kein Panel. Desktop-Standard hier:
   Button unsichtbar, .nd-nav wie .nd-primary-nav eine normale Inline-Zeile. */
.nd-burger-btn{ display:none; }
.nd-burger-btn span{ display:block; width:20px; height:2px; background:#0a0a0a; border-radius:1px; transition:transform .2s ease, opacity .2s ease; }
.nd-burger-btn:active{ opacity:.6; }
.nd-nav{
  display:flex; gap:18px; align-items:center; white-space:nowrap; margin-left:18px;
}
.nd-nav a{
  color:#0a0a0a; text-decoration:none; font-family:'Archivo Variable',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  border-bottom:2px solid transparent; padding-bottom:2px;
}
.nd-nav a:active{ opacity:.6; }
/* Marke statt Farbumkehr -- siehe .nd-primary-nav a.nd-nav-current oben. */
.nd-nav a.nd-nav-current{ border-bottom-color:#2E2EE8; }

/* Ab hier NUR Mobile: Burger-Button an, die Desktop-Zeile .nd-nav aus,
   stattdessen das Vollbild-Menue .nd-menu (siehe unten, Markup in
   Topbar.jsx). */
@media (max-width:720px){
  .nd-burger-btn{
    display:flex; flex-shrink:0; align-self:center;
    width:44px; height:44px; padding:0; background:none; border:none; cursor:pointer;
    flex-direction:column; align-items:center; justify-content:center; gap:4px;
  }
  .nd-topbar[data-burger-open="true"] .nd-burger-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nd-topbar[data-burger-open="true"] .nd-burger-btn span:nth-child(2){ opacity:0; }
  .nd-topbar[data-burger-open="true"] .nd-burger-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .nd-nav{ display:none; }
}

/* Mobiles Vollbild-Menue (CEO 12.9., Referenz Berlin Art Week): eine
   Flaeche in der Akzentfarbe ueber der ganzen Seite, die sich per
   clip-path-Kreis vom Burger-Icon oben rechts ausbreitet (Mittelpunkt =
   Position des Icons in der Leiste), waehrend die Flaeche von halb-
   transparent auf voll geht -- so wie im Referenz-Zwischenbild, wo die
   Seite noch durchschimmert. Die Links selbst kommen leicht versetzt
   nach (animationDelay je Eintrag aus Topbar.jsx). Nur auf Mobile
   sichtbar; Desktop hat die Inline-Zeile. */
.nd-menu{
  position:fixed; inset:0; z-index:150; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; padding:0 22px 32px; box-sizing:border-box;
  background:#2E2EE8; color:#fff; font-family:'Archivo Variable',sans-serif;
  animation:ndMenuIn .62s cubic-bezier(.22,.8,.2,1) both;
}
@keyframes ndMenuIn{
  from{ clip-path:circle(0px at calc(100% - 38px) 30px); opacity:.55; }
  to{ clip-path:circle(175% at calc(100% - 38px) 30px); opacity:1; }
}
.nd-menu-head{ display:flex; align-items:center; justify-content:space-between; height:var(--nd-topbar-h); flex-shrink:0; }
.nd-menu-mark{ font-family:'Archivo Black','Archivo Variable',sans-serif; font-size:15px; letter-spacing:.08em; }
.nd-menu-close{
  display:flex; align-items:center; gap:10px; background:none; border:none; padding:0; cursor:pointer;
  color:#fff; font-family:'Archivo Variable',sans-serif; font-size:17px; font-weight:700;
}
.nd-menu-close .nd-ico{ width:15px; height:15px; fill:currentColor; stroke:none; vertical-align:0; }
.nd-menu-primary{ display:flex; flex-direction:column; gap:4px; margin-top:clamp(28px, 9vh, 80px); }
.nd-menu-link{
  display:flex; align-items:center; gap:.22em; color:#fff; text-decoration:none;
  font-family:'Archivo Black','Archivo Variable',sans-serif; font-weight:900;
  font-size:clamp(36px, 11.5vw, 64px); line-height:1.08; letter-spacing:-.02em; text-transform:uppercase;
  opacity:0; transform:translateY(10px); animation:ndMenuItem .45s ease both;
}
.nd-menu-link:active{ opacity:.7; }
@keyframes ndMenuItem{ to{ opacity:1; transform:translateY(0); } }
/* Punkt vor dem Eintrag: nur bei der aktuellen Seite sichtbar, nimmt aber
   immer Platz ein, damit die Woerter buendig untereinander stehen. */
.nd-menu-dot{ width:.34em; height:.34em; flex-shrink:0; opacity:0; display:inline-flex; }
.nd-menu-link.is-current .nd-menu-dot{ opacity:1; }
.nd-menu-dot .nd-ico{ width:100%; height:100%; fill:currentColor; stroke:none; vertical-align:0; }
.nd-menu-secondary{ display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:44px; }
.nd-menu-secondary a, .nd-menu-secondary button{
  color:#fff; text-decoration:none; background:none; border:none; padding:0; text-align:left; cursor:pointer;
  font-family:'Archivo Variable',sans-serif; font-size:21px; font-weight:600; line-height:1.2; letter-spacing:-.01em;
}
.nd-menu-secondary .is-current{ text-decoration:underline; text-underline-offset:5px; }
@media (min-width:721px){ .nd-menu{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .nd-menu{ animation:none; }
  .nd-menu-link{ animation:none; opacity:1; transform:none; }
}
.nd-topbar-spacer{ height:var(--nd-topbar-h); }

/* Icons (Icon.jsx / window.LfxIcons): 24x24-Vektoren, Strich in
   currentColor, Groesse = Schriftgroesse des Elternelements. CEO 12.9.:
   keine Textzeichen als Icons mehr, nur echte Vektorgrafiken. */
.nd-ico{ width:1em; height:1em; display:inline-block; vertical-align:-.15em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.nd-info-close .nd-ico, .profile-close .nd-ico{ width:15px; height:15px; vertical-align:-3px; }

/* ---------- Info-Popup: "was ist LFX?" (CEO: "ein warn signal artiges
   info i symbol, das erklaert, was das hier ist" -- 12.9. praezisiert:
   "rot leuchtend animiert ... wie ein Warnsignal", dazu nicht mehr ganz am
   Ende der Leiste nach .nd-nav "reingequetscht", sondern direkt VOR dem
   Burger-Icon). Farbe/Rhythmus bewusst dieselben wie das "ON AIR"-Blinklicht
   auf PLAY (--live:#e6483c, siehe hub/index.html @keyframes liveDotPulse) --
   dieselbe Signalfarbe, hier als weiches Leuchten statt hartem Blinken,
   damit es eher nach "Warnsignal" als nach Fehlermeldung aussieht. Traegt
   als einziges Element in dieser Zeile margin-left:auto: auf Desktop steht
   .nd-nav (Field/Console/About) direkt DAVOR im DOM und bleibt normaler
   Inline-Fluss neben .nd-primary-nav, waehrend der freie Rest der Zeile
   dadurch komplett vor den Info-Knopf wandert -- er sitzt also ganz rechts,
   gleich nach der Nav-Gruppe. Auf Mobile (.nd-nav per position:fixed aus
   dem Fluss genommen) ruecken Info- und der direkt danach folgende
   Burger-Knopf gemeinsam ganz nach rechts -- .nd-burger-btn selbst braucht
   deshalb kein eigenes margin-left:auto mehr. */
.nd-info-btn{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:40px; height:100%; margin-left:auto; padding:0;
  background:none; border:none; cursor:pointer;
}
.nd-info-btn:active{ opacity:.6; }
.nd-info-btn svg{ color:#e6483c; animation:ndInfoGlow 1.8s ease-in-out infinite; }
@keyframes ndInfoGlow{
  0%,100%{ opacity:.7; filter:drop-shadow(0 0 1px rgba(230,72,60,.6)); }
  50%{ opacity:1; filter:drop-shadow(0 0 6px rgba(230,72,60,.95)); }
}
@media (prefers-reduced-motion: reduce){ .nd-info-btn svg{ animation:none; opacity:1; filter:drop-shadow(0 0 3px rgba(230,72,60,.8)); } }
.nd-info-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(0,0,0,0.45);
  animation:ndInfoFadeIn .18s ease;
}
@keyframes ndInfoFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.nd-info-panel{
  position:relative; width:100%; max-width:460px; max-height:calc(100dvh - 48px); overflow:hidden;
  display:flex; flex-direction:column;
  /* CEO 12.9.: "Hintergrund nicht weiss, sondern fast durchsichtig aber
     schwarz, Text weiss" -- dunkles Glas (halbtransparent + backdrop-blur),
     darunter scheint die Seite durch. Schrift: dieselbe Familie wie das
     Intro -- Archivo Black fuer Ueberschriften (wie .intro-day-label /
     .ps-item), Archivo Variable fuer Fliesstext (explizit gesetzt, nicht
     vom Host geerbt, damit hub/field/social identisch aussehen). */
  background:rgba(8,8,8,0.72); color:#fff; border:1px solid rgba(255,255,255,0.22); border-radius:16px;
  isolation:isolate;
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  font-family:'Archivo Variable','Helvetica Neue',Arial,sans-serif;
  padding:0;
}
/* Der Text scrollt in einer eigenen Ebene UEBER dem festen Hintergrund
   (.nd-info-bg bleibt als absolutes Kind des Panels stehen). */
.nd-info-scroll{ position:relative; z-index:1; overflow-y:auto; padding:28px 24px 24px; }
/* Animierter Hintergrund (shared/grid-tunnel.js, gemountet in Topbar.jsx):
   der Gitter-Raum fuellt das Panel und liegt unter der Scroll-Ebene, ohne
   Klickziel; leicht gedimmt, damit der weisse Text lesbar bleibt. */
.nd-info-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.nd-info-bg canvas{ opacity:.8; }
.nd-info-close{
  position:absolute; z-index:2; top:14px; right:14px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:1.5px solid #fff; border-radius:50%; color:#fff;
  font-size:18px; line-height:1; cursor:pointer;
}
.nd-info-close:active{ background:#fff; color:#0a0a0a; }
.nd-info-eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family:'Archivo Black','Archivo Variable',sans-serif; font-weight:900; font-size:20px; text-transform:uppercase;
  letter-spacing:-.01em; margin:0 0 10px; padding-right:30px;
}
.nd-info-lede{ font-size:14px; line-height:1.55; margin:0 0 20px; color:#fff; }
/* Schritte: nur Text, keine Linien (CEO 12.9.: "entferne auch alle
   weiteren Linien im Info-Popup, nur Text"). Der animierte Hintergrund ist
   .nd-info-bg (Club-Haus aus shared/club-house.js, siehe Topbar.jsx). */
.nd-info-steps{ position:relative; display:flex; flex-direction:column; gap:20px; padding:6px 0 4px; text-align:left; }
/* Kopfzeilen-Icon (CEO, Referenzbild: neonrotes Warndreieck, "ohne den
   Text und 3-dimensional"): zwei Ebenen des Dreiecks in einem
   preserve-3d-Wrapper, der um die senkrechte Achse rotiert (rotateY) --
   die hintere Ebene sitzt 6px dahinter und ist dunkler, seitlich zeigt sich
   so die Dicke. Neon: rote Kontur mit mehrfachem drop-shadow, das per
   ndAlarmGlow als knallrotes Alarmsignal pulsiert. */
.nd-info-head-icon{
  display:block; width:30px; height:30px; flex-shrink:0; color:#ff3b30; perspective:320px;
  animation:ndAlarmGlow 1.1s ease-in-out infinite;
}
/* Volle, endlose Drehung um die senkrechte Achse (CEO: "davor hat es
   geleuchtet und sich gedreht" -- ein zwischenzeitliches Pendeln war die
   falsche Loesung). Dass die Kante-zur-Kamera-Stellung dabei nicht mehr
   auseinanderfaellt, loest die feine Staffelung der Ebenen (siehe
   WARN_LAYERS in Topbar.jsx), nicht ein eingeschraenkter Winkel. */
.nd-warn-3d{ position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d; animation:ndInfoTurn 3.6s linear infinite; }
.nd-warn-face{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; stroke-linecap:round;
}
/* translateZ je Ebene kommt inline aus Topbar.jsx. Die beiden aeusseren
   Flaechen leuchten (bei voller Drehung ist mal die eine, mal die andere
   vorn), die Ebenen dazwischen bilden nur den Koerper -- sie tragen keinen
   eigenen Schein, sonst summieren sich 16 Glows zu einem Klumpen. */
.nd-warn-face-lit{ filter:drop-shadow(0 0 1.5px #ff3b30) drop-shadow(0 0 4px rgba(255,59,48,.9)); }
.nd-warn-body{ color:#e02a1f; }
@keyframes ndInfoTurn{ to{ transform:rotateY(360deg); } }
@keyframes ndAlarmGlow{
  0%,100%{ filter:drop-shadow(0 0 3px rgba(255,59,48,.7)) drop-shadow(0 0 8px rgba(255,59,48,.4)); }
  50%{ filter:drop-shadow(0 0 6px rgba(255,60,40,1)) drop-shadow(0 0 18px rgba(255,40,20,.9)) drop-shadow(0 0 32px rgba(255,40,20,.55)); }
}
.nd-info-step{ position:relative; display:flex; flex-direction:row; align-items:flex-start; gap:12px; }
.nd-info-step-n{
  flex-shrink:0; font-family:'Archivo Variable',sans-serif; font-weight:800; font-size:11px;
  color:rgba(255,255,255,0.75); padding-top:2px;
}
.nd-info-step-t{ font-family:'Archivo Black','Archivo Variable',sans-serif; font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.02em; color:#fff; }
.nd-info-step-d{ font-size:12.5px; line-height:1.5; color:rgba(255,255,255,0.78); margin-top:2px; }
.nd-info-foot{ font-size:12px; line-height:1.5; color:rgba(255,255,255,0.78); margin:18px 0 0; }