/* =====================================================================
   Design-Tokens — kabelage.com
   Konzept: Retro-Elektro-Look. Gelb/Schwarz als Warnfarben-Kombination
   (passend zum Namen "Kabelage"), Hellblau als kühler Kontrast-Akzent.
   Kräftige Kanten statt Schlagschatten, wie ein altes
   Terminal/Werkstatt-Schild statt SaaS-Marketing-Design.
   Signatur-Element: monospace ID-Badges (z. B. #014) in Gelb.
   ===================================================================== */

:root {
  --c-bg: #fff6d6;
  --c-surface: #ffffff;
  --c-surface-alt: #ffeda0;
  --c-text: #111111;
  --c-text-muted: #4a4a4a;
  --c-primary: #111111;
  --c-primary-dark: #000000;
  --c-accent: #ffd400;
  --c-accent2: #3fb6e0;
  --c-border: #111111;
  --c-shadow: var(--c-border);
  --c-danger: #d62828;
  --c-danger-bg: #fbe2e2;
  --c-success: #1f7a4d;
  --c-success-bg: #dff3e6;
  --c-warning: #a15c00;
  --c-warning-bg: #fff1cf;

  --font-display: 'Press Start 2P', 'Courier New', monospace;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'VT323', ui-monospace, monospace;
  --font-brutalist: 'Archivo Black', 'Inter', sans-serif;
  --font-badge: 'DM Mono', 'VT323', ui-monospace, monospace;

  --radius: 4px;
  --gap: 1rem;
  --sidebar-width: 240px;
  --topbar-height: 56px;

  color-scheme: light;
}

/* Dunkel-Modus (User-Wunsch 2026-09-15): die Gelb/Schwarz-Warnfarben-
   Kombination aus dem Hell-Modus (siehe Kommentar oben) wird hier durch
   Neon-Gruen/Magenta ersetzt - dieselbe "Cyber-Terminal"-Optik wie
   Retro.Login.php (siehe dortige .cyber-title/.cyber-terminal-Farben),
   nur jetzt als vollwertiges Farbschema fuer die ganze App im Dunkel-
   Modus, nicht mehr nur fuer die Login-Seite. --c-accent (Gruen) bleibt
   der Haupt-Akzent (ID-Badges, Rahmen, Hazard-Stripe), --c-primary/
   --c-accent2 (Magenta) der kuehle Gegenpart fuer Links/Buttons - exakt
   das Zwei-Ton-Schema des Logins (Gruen fuer Ueberschriften/Rahmen,
   Magenta fuer Access-Text/Glitch-Blitze). --c-bg/--c-surface bleiben
   nahezu Schwarz (passt zum Neon-Look genauso wie zum alten Gelb/Schwarz),
   --c-text wird von warmem Creme auf ein kuehles, noch gut lesbares
   Mintweiss umgestellt. --c-danger/--c-success/--c-warning bleiben
   bewusst unangetastet (eigenstaendige Status-/Bedeutungsfarben, nicht
   Teil der Gelb/Schwarz-Akzent-Identitaet). */
[data-theme="dark"] {
  /* Punkt 402 (User-Wunsch 2026-09-15): --c-bg leicht aufgehellt (vorher
     #0b0b0b), damit sich die Boxen (.card, fast schwarz per rgba(0,0,0,0.9),
     siehe [data-theme="dark"] .card weiter unten) sichtbarer vom Hintergrund
     abheben - --c-surface bleibt unveraendert bei #171717 und damit weiterhin
     eine Spur heller als der neue Hintergrund, die bestehende Stufung
     Hintergrund < Oberflaeche < ... bleibt also erhalten. */
  --c-bg: #121212;
  --c-surface: #171717;
  --c-surface-alt: #0d2617;
  --c-text: #d8fbe0;
  --c-text-muted: #8fae9a;
  --c-primary: #ff2fd1;
  --c-primary-dark: #cc189e;
  --c-accent: #00ff41;
  --c-accent2: #ff2fd1;
  --c-border: #1f6b3a;
  --c-shadow: var(--c-border);
  --c-danger: #ff6b5c;
  --c-danger-bg: #3a1e18;
  --c-success: #6fe0a0;
  --c-success-bg: #123322;
  --c-warning: #ffb84d;
  --c-warning-bg: #3a2a0a;

  color-scheme: dark;
}

/* ---------- Reset & Basis ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--c-bg);
  background-image: url('../../files/bg/bg-hell.svg');
  background-repeat: repeat;
  background-attachment: fixed;
  color: var(--c-text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Punkt 383 (User-Wunsch 2026-09-15): das SVG-Rasterbild im Dunkel-Modus
   entfernt (vorher bg-dunkel.svg, gepunktetes Gitter) - der animierte
   Cyber-Grid-Hintergrund (.cyber-grid-bg, Punkt 377) uebernimmt jetzt
   allein die Hintergrund-Rolle im Dunkel-Modus, nur noch die einfarbige
   --c-bg-Flaeche darunter. Das Hell-Modus-Bild (bg-hell.svg, Basisregel
   oben) bleibt unveraendert. */
[data-theme="dark"] body {
  background-image: none;
}

h1, h2, h3, h4 {
  font-weight: 400; /* Press Start 2P bringt nur ein Gewicht mit */
  line-height: 1.5;
  margin: 0 0 0.7em;
  letter-spacing: 0.02em;
}

h2, h3, h4 { font-family: var(--font-display); }

/* Press Start 2P ist ein Pixelfont mit sehr breiten Zeichen -
   Größen deutlich kleiner ansetzen als bei einer normalen Sans-Serif,
   sonst brechen Überschriften unschön um oder wirken überdimensioniert. */
h2 { font-size: 1.05rem; }
h3 { font-size: 0.85rem; }

/* Seiten-Haupttitel (h1) - urspruenglich im "RAW EDGES"-Look der
   Brutalist-Vorlage (nur Hell-Modus), seit Punkt 395 (User-Wunsch
   2026-09-15: "Ueberschriften in Hell genau so wie in Dunkel, mit
   angepassten Farben") in beiden Themes identisch auf die Monospace-
   Terminal-Schrift von body.login-page-retro .cyber-title (KABELAGE_COM,
   siehe Punkt 389/390) umgestellt - nur die Farbe bleibt weiterhin pro
   Theme unterschiedlich (siehe die beiden Farb-Regeln weiter unten,
   Punkt 382). Dynamische Teile (z. B. der Nickname) werden zusaetzlich
   mit .heading-outline abgesetzt (Punkt 391/392). */
h1 {
  font-family: 'Courier New', 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  font-size: 1.75rem;
}
@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
  }
}

/* Punkt 391/392 (User-Wunsch 2026-09-15): "Willkommen zurück, <Nickname>"
   auf index.php/Willkommen.php - der Nickname soll denselben Look wie der
   Rest der Überschrift tragen (in Dunkel: Neon-Gruen/Monospace aus
   [data-theme="dark"] h1, Punkt 390; in Hell: Dunkelgruen/Brutalist-Font
   aus der Basis-h1-Regel, Punkt 382) statt des hohlen Outline-Zweitstils,
   der farblich/optisch klar von der uebrigen Ueberschrift abweicht.
   "color: inherit" ohne Theme-Bindung uebernimmt automatisch die jeweils
   aktive h1-Farbe/-Schrift des Themes - urspruenglich (Punkt 391) nur im
   Dunkel-Modus aktiv, auf expliziten Wunsch (Punkt 392) jetzt auch im
   Hell-Modus. */
.heading-outline {
  color: inherit;
  -webkit-text-stroke: 0;
}

/* Username-Überschrift im Profil-Header: h1 ist sonst site-weit auf den
   großgeschriebenen Brutalist-Font festgelegt - hier bewusst eine
   andere, gemischt-groß/kleingeschriebene Schriftart statt der
   Versalien-Pflicht. */
.profile-name {
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 2.2rem;
  line-height: 0.9;
}

/* Direkt gefolgt von der Etiketten-Unterzeile (h1 + p unten) reicht ein
   knapperer Abstand als vor "normalem" Folgeinhalt - sonst wirkt es wie
   ein doppelter Zeilenumbruch. */
h1:has(+ p) { margin-bottom: 0.2em; }

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Unterzeile direkt unter einem h1 (z. B. "Schön, dass du da bist...")
   im Etiketten-Look der Vorlage: monospace, invertierte Farben, etwas
   größer als im Vorlage-Original (11px). Gilt seitenweit automatisch für
   jeden Absatz, der direkt auf ein h1 folgt. Der blinkende Terminal-
   Cursor sitzt jetzt hier statt an der Überschrift - wirkt wie gerade
   frisch getippter Text, Cursorfarbe erbt automatisch die invertierte
   Textfarbe des schwarzen Felds. */
h1 + p, .badge-line {
  display: inline-block;
  font-family: var(--font-badge);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  background: var(--c-text);
  color: var(--c-bg);
  padding: 0.4rem 0.75rem;
}
h1 + p { margin: 0.15rem 0 0.7em; }
h1 + p a, .badge-line a {
  color: var(--c-accent);
}
/* Im Dunkel-Modus wird die Box invertiert (background: var(--c-text),
   also creme statt schwarz) - das kraeftige Gelb von --c-accent ist auf
   diesem hellen Untergrund kaum lesbar (User-Feedback 2026-08-22).
   --c-border ist im Dunkel-Modus bereits ein dunkleres Gold-/Braunton,
   dadurch bleibt der Link farblich in derselben Familie, aber lesbar. */
[data-theme="dark"] h1 + p a,
[data-theme="dark"] .badge-line a {
  color: var(--c-border);
}
/* Cursor bewusst nur an der echten Seiten-Unterzeile (h1 + p), nicht an
   jedem beliebigen .badge-line-Einsatz (z. B. "Mitglied seit"/"Gruppen"
   im Profil) - sonst blinken mehrere Cursor gleichzeitig auf einer Seite. */
h1 + p::after {
  content: '_';
  margin-left: 0.15em;
  animation: cursor-blink 1s step-end infinite;
}

a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--font-mono); }

button, input, select, textarea { font-family: inherit; font-size: 1rem; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Layout ---------- */
.app-shell {
  /* Punkt 386 (User-Wunsch 2026-09-15): Streifen-Hintergrund (.cyber-
     grid-bg) lag VOR den Karten statt dahinter - der eigentliche Fehler
     lag nicht am z-index-Wert selbst, sondern an einem CSS-Stacking-
     Context-Detail: jedes "position:fixed"-Element (auch mit z-index:0)
     bildet einen eigenen Stapelkontext und wird laut Spezifikation IMMER
     NACH normalem, nicht positioniertem Inhalt gemalt - unabhaengig von
     der Reihenfolge im HTML. .cyber-grid-bg (position:fixed) hat sich
     dadurch zwangslaeufig ueber .app-shell (normaler, unpositionierter
     Inhalt) gelegt, egal welchen z-index-Wert es bekam (0 UND -1 waren
     beide falsch, nur auf unterschiedliche Arten). Die korrekte Loesung:
     .app-shell bekommt selbst einen eigenen Stapelkontext mit hoeherem
     z-index (1 > 0) - dadurch werden beide Elemente als gleichrangige
     Geschwister-Stapelkontexte direkt anhand ihres z-index verglichen,
     und .app-shell gewinnt zuverlaessig. Der globale Chat-Toast
     (chat_toast.js, z-index:2000, ebenfalls direktes body-Kind) bleibt
     davon unberuehrt und liegt weiterhin ueber allem. */
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Bewusst unsichtbar (kein Hintergrund/Rahmen, nimmt keinen Platz im
   Layout ein) - wirkt wie kein Header vorhanden, Seiteninhalt beginnt
   direkt oben bei 0. Nur die einzelnen Buttons/Chips schweben mit
   eigenem Rahmen darüber (siehe .hamburger/.theme-toggle/.mail-icon/
   .topbar__chip). position:fixed statt sticky, damit die Leiste keine
   Höhe reserviert - trotzdem bleiben die schwebenden Elemente beim
   Scrollen oben fix stehen. pointer-events:none auf der leeren Fläche,
   damit Klicks auf Inhalt darunter durchgehen; die Buttons selbst
   holen sich pointer-events per Regel unten zurück. */
.topbar {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background: transparent;
  border-bottom: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.topbar__left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Einheitlicher Zurueck-Button (ersetzt die frueher vielen einzelnen
   Zurueck-Buttons auf einzelnen Seiten) - wie .topbar__chip, aber mit
   variabler Breite fuer den Text (der auf Mobile ausgeblendet wird). */
.topbar__zurueck {
  width: auto;
  padding: 0 1rem;
  gap: 0.5rem;
}
.topbar__zurueck-text {
  display: none;
}
@media (min-width: 1024px) {
  .topbar__zurueck-text {
    display: inline;
  }
}

/* Brutalist wie der Hamburger-Button: eckiger Rahmen + Hartschatten
   statt Pill-Form, presst sich beim Klicken in seinen Schatten. */
.theme-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  border-radius: 0;
  cursor: pointer;
  color: var(--c-text);
  font-size: 1.2rem;
  box-shadow: 3px 3px 0 var(--c-shadow);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
}
.theme-toggle:hover { background: var(--c-accent2); }
.theme-toggle:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c-shadow);
}

/* Eigene Box wie die anderen schwebenden Elemente, da die Topbar
   selbst keinen Hintergrund mehr hat (siehe .topbar) - sonst wäre das
   Icon über beliebigem Seiteninhalt nicht mehr lesbar. */
.mail-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 44px;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--c-text);
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  box-shadow: 3px 3px 0 var(--c-shadow);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
}
.mail-icon:hover {
  text-decoration: none;
  background: var(--c-accent2);
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c-shadow);
}

/* Nickname-Chip (User_Profil-Link) - gleiche schwebende Box-Optik. */
/* Icon-only-Button (Person/Zahnrad) statt Text-Chip - gleiche Box-Größe
   wie Hamburger/Mail-Icon. */
.topbar__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  box-shadow: 3px 3px 0 var(--c-shadow);
  color: var(--c-text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
}
.topbar__chip:hover {
  text-decoration: none;
  background: var(--c-accent2);
  color: #111;
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c-shadow);
}

/* Profil-Dropdown: klappt unter dem Namens-Button auf, gleicher
   Button-/Tag-Stil wie die Sidebar ("// MENU.EXE"). */
.profile-menu-wrap { position: relative; }

/* Gleiche Button-Breite wie im Hauptmenü (--sidebar-width), Tag- und
   Button-Schriftgröße kommen unverändert von .sidebar__tag/.sidebar__link -
   dadurch sehen alle drei Menüs (Sidebar, Profil-, Admin-Dropdown)
   identisch aus. */
.profile-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: var(--sidebar-width);
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  box-shadow: 4px 4px 0 var(--c-shadow);
  padding: 0.75rem;
  z-index: 50;
}
.profile-menu.is-open { display: block; }
.profile-menu .sidebar__tag { margin: 0 0 0.75rem; }
.profile-menu .sidebar__link + .sidebar__link { margin-top: 0.5rem; }

.mail-icon__badge {
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-danger);
  color: #fff;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1;
}

/* Brutalist-Button: dicker Rahmen, versetzter Hartschatten statt weichem
   Schlagschatten, kein Radius - Vorlage: codefronts.com "Brutalist CSS
   Bordered Hamburger Menu". Presst sich beim Öffnen in seinen Schatten
   ("Press"-Effekt), die drei Striche drehen sich zu einem X. */
.hamburger {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 44px;
  background: var(--c-surface);
  border: 3px solid var(--c-border);
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  box-shadow: 4px 4px 0 var(--c-shadow);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
}
.hamburger:hover { background: var(--c-accent2); }
.hamburger.is-open {
  background: var(--c-accent);
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--c-shadow);
}
.hamburger span {
  display: block;
  position: absolute;
  left: 50%;
  width: 20px;
  height: 3px;
  background: var(--c-text);
  transform: translateX(-50%);
  transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.2s;
}
.hamburger span:nth-child(1) { top: 15px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 27px; }
.hamburger.is-open span { background: #111; }
.hamburger.is-open span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

.layout {
  flex: 1;
  display: flex;
  width: 100%;
}

/* Sidebar: standardmäßig als Off-Canvas-Menü (mobil), öffnet wie in der
   Demo von rechts und direkt ab der Fensteroberkante (nicht erst unter
   der - ohnehin unsichtbaren - Topbar). */
.sidebar {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--sidebar-width);
  background: var(--c-surface);
  border-left: 3px solid var(--c-border);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 30;
  overflow-y: auto;
  /* Oben zusätzlich Platz wie im Vorlagen-Panel (dort padding-top: 96px),
     sonst würde der erste Punkt vom schwebenden Hamburger-Button
     überdeckt. */
  padding-top: calc(var(--topbar-height) + 0.75rem);
}
.sidebar.is-open { transform: translateX(0); }

/* "// MENU.EXE"-Tag wie in der Vorlage (dort .chm-19__h, dort 11px) -
   überall exakt gleich groß (Sidebar, Profil-Dropdown, Admin-Dropdown),
   Schrift gelb (Akzentfarbe) statt der Vorlagen-Farbe. */
.sidebar__tag {
  display: inline-block;
  margin: 0 0.75rem 0.75rem;
  padding: 0.3rem 0.6rem;
  background: var(--c-border);
  color: var(--c-bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
}

.sidebar__nav {
  list-style: none;
  margin: 0;
  padding: 0 0.75rem 0.75rem;
}

.sidebar__nav li + li { margin-top: 0.5rem; }

/* Trennlinie zwischen Menü-Kategorien (Start/Community/Spiele/Austausch,
   User-Wunsch 2026-09-03) - eigenes <li> ohne Link, wie im Bootstrap-
   Muster .dropdown-divider, hier im Retro-Look (dickerer Rahmen statt
   dünner Linie, passend zu den brutalistischen 4px-Rahmen der
   .sidebar__link-Buttons). */
.sidebar__divider {
  height: 0;
  margin: 0.4rem 0.2rem;
  border: none;
  border-top: 2px solid var(--c-border);
}

/* Bordered Cards mit Hartschatten statt schlichter Zeilen, Schrift/
   Großschreibung wie die Menü-Buttons in der Vorlage (codefronts.com
   Brutalist-Demo: 'Archivo Black', uppercase, 4px-Rahmen). Schriftgröße
   überall gleich (Sidebar/Profil-/Admin-Dropdown) wie im Profil-Menü,
   sonst würden lange Wörter wie "Nachrichten" zu breit für den Button.
   min-width:0 auf dem Label-Span, damit Flexbox den Text tatsächlich
   umbricht statt ihn über den Rand hinausragen zu lassen. Beim Hover
   "presst" sich der Link in seinen Schatten. */
.sidebar__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 4px solid var(--c-border);
  border-radius: 0;
  color: var(--c-text);
  background: var(--c-surface);
  box-shadow: 3px 3px 0 var(--c-shadow);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s, color 0.2s;
  font-family: var(--font-brutalist);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.sidebar__link > span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sidebar__link:hover {
  background: var(--c-accent2);
  color: #111;
  text-decoration: none;
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--c-shadow);
}
.sidebar__link.is-active {
  background: var(--c-accent);
  color: #111;
  font-weight: 600;
}

/* Gruppierter Menüpunkt (z. B. "Admin-Bereich" mit Unterpunkten) */
.sidebar__group-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-text-muted);
  border-bottom: 2px solid var(--c-border);
  padding-bottom: 0.4rem;
  margin-bottom: 0.3rem;
}

.sidebar__subnav {
  list-style: none;
  margin: 0 0 0.3rem;
  padding: 0;
}
.sidebar__subnav li + li { margin-top: 0.5rem; }
.sidebar__subnav .sidebar__link { padding-left: 1.6rem; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 25;
  display: none;
}
.overlay.is-open { display: block; }

/* Erste Box beginnt etwas tiefer, damit die schwebenden Topbar-Buttons
   (Hamburger/Mail/Chip/Theme) sie nicht überdecken. */
.main {
  flex: 1;
  padding: calc(var(--topbar-height) + 0.75rem) 1.25rem 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.footer {
  text-align: center;
  padding: 1rem;
  color: var(--c-text-muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--c-border);
}

.footer__links {
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
}

.footer__links a {
  color: var(--c-text-muted);
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--c-primary);
}

/* ---------- Bausteine ---------- */
.card {
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: 0;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

/* ---------- Avatare ---------- */
.avatar-sm, .avatar-md, .avatar-lg {
  object-fit: cover;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
}
.avatar-sm { width: 64px; height: 64px; }
.avatar-md { width: 112px; height: 112px; }
.avatar-lg { width: 192px; height: 192px; }

/* Modifikator (Punkt 203): .avatar-sm/-md/-lg sind bewusst eckig
   (var(--radius)) fuer Mitgliederlisten/-listen (Mein_Netzwerk.php,
   User_Liste.php, Wichteln_Neu.php, Gruppe_Detail.php-Mitgliederliste) -
   NICHT global geaendert. Nur die Blog-Mini-Userbox (Blog_Beitrag.php)
   soll rund sein, analog zu Basics .user-details__avatar dort
   (border-radius:50%) und konsistent mit dem neuen runden
   .card-post-avatar in den Blog-Kartenlisten. */
.avatar-sm--rund {
  border-radius: 50%;
  /* Gleicher WebKit/Safari-Zuschneide-Bug wie bei .card-post-avatar,
     siehe dortiger Kommentar. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 0.5rem;
}
.avatar-grid__btn {
  padding: 0;
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}
.avatar-grid__btn:hover { border-color: var(--c-accent2); }
.avatar-grid__btn img { width: 100%; height: 56px; object-fit: cover; display: block; }

/* Vorgegebene-Bilder-Auswahlgrid fuer Gruppen-Titelbilder
   (Gruppe_Bearbeiten_Background.php) - groessere Kacheln als
   .avatar-grid, da Querformat-Titelbilder statt quadratischer Avatare,
   sonst gleiches Muster (analog Kala@Basic/assets/css/style.css
   .background-grid). */
.background-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.background-grid__btn {
  padding: 0;
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface-alt);
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
  width: 100%;
}
.background-grid__btn:hover { border-color: var(--c-accent2); }
.background-grid__btn img { width: 100%; height: 110px; object-fit: cover; display: block; }

/* Mitglieder-Kacheln: Avatar + Nickname darunter, nebeneinander in
   einer eigenen umrandeten Box (z. B. "Meine Mitgliedschaften" auf
   Gruppen.php). */
.mitglieder-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.mitglieder-box__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 72px;
  text-align: center;
  color: inherit;
  text-decoration: none;
}
.mitglieder-box__item span {
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

/* ---------- Dashboard (Startseite) ---------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* Dekoratives Gelb/Schwarz-Streifenband, sparsam einsetzen
   (z. B. als schmale Trennlinie unter der Topbar) */
.hazard-stripe {
  height: 8px;
  background: repeating-linear-gradient(
    45deg,
    var(--c-accent) 0px,
    var(--c-accent) 12px,
    var(--c-primary) 12px,
    var(--c-primary) 24px
  );
}

/* Im Hell-Modus ist --c-primary fast Schwarz (klassischer Gelb/Schwarz-
   Streifen). Im Dunkel-Modus ist --c-primary Hellblau (Hauptakzent) - das
   würde den Streifen unruhig/grell wirken lassen, deshalb dort echtes
   Schwarz statt der hellen --c-text-Farbe (vorheriger Bug: fast weiß). */
[data-theme="dark"] .hazard-stripe {
  background: repeating-linear-gradient(
    45deg,
    var(--c-accent) 0px,
    var(--c-accent) 12px,
    #000 12px,
    #000 24px
  );
}

.id-badge {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--c-accent2);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
}

/* Stift-Icons auf dem Gruppen-Hintergrundbild (Gruppe_Detail.php, Punkt
   84-Nachtrag) - analog zu den Bearbeiten-Badges auf dem Profil-Coverbild
   in Kala@Basic, hier im brutalistischen Retro-Stil (Gelb/Schwarz). Der
   umschliessende Wrapper braucht position:relative. */
.gdetail-edit-btn {
  position: absolute; width: 32px; height: 32px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent); color: var(--c-text);
  border: 2px solid var(--c-border); border-radius: 50%;
}
.gdetail-edit-btn:hover { background: var(--c-surface); text-decoration: none; }
.gdetail-edit-btn--top { top: 8px; left: 8px; }
.gdetail-edit-btn--bg { bottom: 8px; right: 8px; }

/* Aktivitaeten-Buttons auf Gruppe_Detail.php (Punkt 91) - 8 nebeneinander
   auf Desktop, volle Breite auf dem Handy. */
.gdetail-btn-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
}
.gdetail-btn-grid > .btn { width: 100%; text-align: center; }
@media (max-width: 576px) {
  .gdetail-btn-grid {
    grid-template-columns: 1fr;
  }
}
/* Zweifarbige Aktivitaeten-Buttons (Punkt 92) - Blau fuer "Das weiss doch
   keiner", Gruen fuer Wichteln, Lila fuer die uebrigen Community-Aktionen
   (Kalender/Linkliste/Forum). */
.gdetail-btn--blau {
  background: linear-gradient(135deg, #1e3c72, #4a90d9);
  color: #fff; border: none;
}
.gdetail-btn--blau:hover { filter: brightness(1.1); color: #fff; }
.gdetail-btn--gruen {
  background: linear-gradient(135deg, #2e7d32, #66bb6a);
  color: #fff; border: none;
}
.gdetail-btn--gruen:hover { filter: brightness(1.1); color: #fff; }
.gdetail-btn--lila {
  background: linear-gradient(135deg, #6a3093, #a044ff);
  color: #fff; border: none;
}
.gdetail-btn--lila:hover { filter: brightness(1.1); color: #fff; }

.copy-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--c-text-muted, var(--c-text));
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  font-size: 0.9rem;
  line-height: 1;
}

.copy-btn:hover,
.copy-btn:focus-visible {
  color: var(--c-primary);
}

.btn {
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0.55rem 1rem;
  cursor: pointer;
  font-weight: 600;
  background: var(--c-primary);
  color: #fff;
}
.btn:hover { background: var(--c-primary-dark); text-decoration: none; }

.btn--ghost {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text);
}
.btn--ghost:hover { background: var(--c-surface-alt); }
.btn--ghost.is-active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

.btn--danger { background: var(--c-danger); }
.btn--danger:hover { filter: brightness(0.92); }

.btn--sm { padding: 0.35rem 0.7rem; font-size: 0.85rem; }

.form-group { margin-bottom: 1rem; }
.form-group label:not(.badge-recht):not(.checkbox-label) {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Checkbox + Beschriftungstext in einer Zeile, vertikal zentriert */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.92rem;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  color: var(--c-text);
}

/* Statusmeldungen als Terminal-Log-Zeilen: [OK]/[ERROR]-Präfix in
   Mono-Schrift statt schlichter Alert-Box. */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.alert::before {
  font-family: var(--font-mono);
  font-weight: bold;
  margin-right: 0.5em;
  letter-spacing: 0.05em;
}
.alert--error { background: var(--c-danger-bg); color: var(--c-danger); }
.alert--error::before { content: '[ERROR]'; }
.alert--success { background: var(--c-success-bg); color: var(--c-success); }
.alert--success::before { content: '[OK]'; }

table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left;
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid var(--c-border);
  font-size: 0.92rem;
  overflow-wrap: break-word;
}
th { color: var(--c-text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Breite Tabellen (viele Spalten) auf schmalen Bildschirmen: seitliches
   Scrollen nur innerhalb der Box statt die ganze Seite zu sprengen. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.badge-recht {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.72rem;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin: 0.1rem 0.2rem 0.1rem 0;
}

/* Teilnehmer-Box auf Wichteln.php: "gezogen"-Status waehrend die Runde
   noch laeuft absichtlich als neutraler Balken statt eines Empfaenger-
   Namens - wer wen gezogen hat, bleibt bis zum Ablauf/Beenden/Veroeffent-
   lichen geheim, nur DASS jemand schon gezogen hat, wird angezeigt (siehe
   wichtelnZiehungsstatusJeTeilnehmer(), 1:1 von Kala@Basic uebernommen).
   var(--c-text-muted)/var(--c-surface) statt fixer Grautoene, damit der
   Balken in Hell- UND Dunkel-Modus lesbar bleibt. */
.wichteln-status-balken {
  display: inline-block;
  min-width: 4.5rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--c-text-muted);
  color: var(--c-surface);
  font-size: .72rem;
  font-weight: 600;
  text-align: center;
}

.empty-state {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--c-text-muted);
}
/* Terminal-"NO DATA"-Präfix vor reinen Leer-Meldungen - nicht bei den
   404/403/500-Fehlerseiten, die schon ihre eigene Terminal-Überschrift
   haben (h1 als Kind erkennbar). */
.empty-state:not(:has(h1))::before {
  content: 'NO DATA // ';
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}

.table-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.table-actions form { display: inline-flex; }

/* Stärker als reine Ausgrauung: NUR für wirklich gesperrte/unbestätigte
   Accounts in User_Liste.php - grau UND durchgestrichen. */
.user-eingeschraenkt {
  opacity: 0.55;
  text-decoration: line-through;
}
.user-eingeschraenkt a { color: inherit; }

/* Aktive User, die nur Profil/Nachrichten privat geschaltet haben -
   nur grau, kein Durchstreichen (der Account ist ja weiterhin aktiv). */
.user-privat {
  opacity: 0.55;
}

/* ---------- Wichteln (Secret Santa) ---------- */
/* Festliche Hintergrund-Themes für Wichtel-Runden - seit Punkt 94 als
   zweifarbiger Farbverlauf (User-Wunsch), zusaetzlich optionales Titelbild
   oben in der Karte (.wichteln-bg__bild, gleiche Groesse wie
   .gruppen-card__bg in Kala@Basic). Text in Weiß/Creme für ausreichend
   Kontrast. Neuer Schlüssel in includes/wichteln.php → passende
   .bg-<schluessel>-Klasse hier ergänzen. */
.wichteln-bg { color: #fff6d6; border-color: var(--c-border); overflow: hidden; }
.wichteln-bg h1, .wichteln-bg h2, .wichteln-bg h3, .wichteln-bg a { color: inherit; }
.wichteln-bg h1, .wichteln-bg h2, .wichteln-bg h3 { text-shadow: 0 1px 3px rgba(0, 0, 0, .65); }

/* .badge-recht hat einen eigenen hellen Hintergrund (--c-surface-alt) -
   die cremeweiße Textfarbe von .wichteln-bg würde darauf im hellen
   Theme (blassgelber Badge-Hintergrund) fast unsichtbar sein. */
.wichteln-bg .badge-recht { color: var(--c-text); }

.bg-rot-gold { background: linear-gradient(135deg, #7a1010, #a8841b); }
.bg-tannengruen { background: linear-gradient(135deg, #0f3d24, #2f7a4f); }
.bg-winternacht { background: linear-gradient(135deg, #0d1b3d, #29527a); }

.wichteln-bg__bild {
  width: calc(100% + 2.5rem);
  margin: -1.25rem -1.25rem 1rem;
  height: 90px;
  background-size: cover;
  background-position: center center;
  position: relative;
}
.wichteln-bg__bild::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .25);
}

/* Titelbild oberhalb der Gruppen-Karten (index.php "meine Aktivitäten",
   Kala@Basic-Gegenstueck: .gruppen-card__bg) - Karte hier per Inline-Style
   bereits padding:0, daher keine negative Rand-Kompensation noetig. */
.gruppen-card__bg {
  width: 100%;
  height: 90px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}
.gruppen-card__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .25);
}

/* Blinkendes Joystick-Icon auf dem Titelbild einer Spiel-Typ-Kachel
   (index.php Gruppen-Karten), zeigt an, dass fuer den User in dieser
   Gruppe noch eine offene Runde dieses Spieltyps wartet. */
.spiel-offen-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  animation: spiel-offen-blink 1.2s ease-in-out infinite;
}
@keyframes spiel-offen-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* Ruhiges (nicht blinkendes) Start-Icon: Spieltyp wurde in dieser Gruppe
   noch nie gespielt und hat aktuell keine offene Runde. */
.spiel-start-icon {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2f9e5c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
}

.wichteln-reveal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
}
.wichteln-reveal--kompakt { padding: 0.75rem 0; }

.wichteln-reveal__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.wichteln-reveal__avatar {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.15);
}

.wichteln-reveal__mystery {
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border: 2px dashed currentColor;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.1);
}

.wichteln-reveal__arrow { font-size: 2.6rem; margin-top: 2rem; }
.wichteln-reveal__arrow img { width: 42px; height: auto; display: block; }

.wichteln-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.wichteln-swatch__preview {
  width: 22px;
  height: 22px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  display: inline-block;
}

/* ---------- Responsive: Tablet & Desktop ---------- */
@media (min-width: 768px) {
  .main { padding: calc(var(--topbar-height) + 0.75rem) 1.75rem 1.75rem; }
}

/* Ab hier bewusst KEINE Sidebar-/Hamburger-/Overlay-Sonderregeln mehr -
   das Off-Canvas-Menü verhält sich auf Handy, Tablet und Desktop
   identisch (immer per Hamburger auf/zu, nie dauerhaft sichtbar). */
@media (min-width: 1024px) {
  /* Nur Desktop: Wichteln-Bilder (Geber/Empfänger) noch größer, da im
     breiten Layout sonst zu klein neben viel Weißraum. */
  .wichteln-reveal__avatar,
  .wichteln-reveal__mystery { width: 170px; height: 170px; }
  .wichteln-reveal__mystery { font-size: 4rem; }
  .wichteln-reveal__arrow { font-size: 3.5rem; margin-top: 3.2rem; }
  .wichteln-reveal__arrow img { width: 56px; }
}

/* ---------- Kalender (serverseitiges Monats-Grid, kein FullCalendar/jQuery) ---------- */
.kalender-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  background: var(--c-border);
  border: 2px solid var(--c-border);
}

.kalender-grid__kopf {
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
  font-family: var(--font-badge);
  font-size: 0.75rem;
  text-transform: uppercase;
  text-align: center;
  padding: 0.3rem 0;
}

.kalender-day {
  background: var(--c-surface);
  min-height: 84px;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.kalender-day--outside {
  background: var(--c-bg);
  opacity: 0.5;
}

.kalender-day--today {
  box-shadow: inset 0 0 0 2px var(--c-primary);
}

.kalender-day__zahl {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--c-text-muted);
}

.kalender-dot {
  display: block;
  font-size: 0.7rem;
  line-height: 1.3;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--kalender-farbe) 25%, transparent);
  color: var(--c-text);
  border-left: 3px solid var(--kalender-farbe);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

a.kalender-dot:hover {
  background: color-mix(in srgb, var(--kalender-farbe) 45%, transparent);
}

@media (max-width: 640px) {
  .kalender-grid__kopf { font-size: 0.65rem; }
  .kalender-day { min-height: 56px; padding: 0.2rem; }
  .kalender-dot { font-size: 0.6rem; }
}

/* Punkt 43: 8 zufaellige 2-farbige Gradient-Designs fuer die Frage-/
   Kommentar-Box im Spiel "Das weiss doch keiner" - feste Farben statt
   Theme-Variablen, bewusst ohne Unterscheidung zwischen hell/dunkel. */
.dwdk-frage-box {
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  font-size: 1.15rem;
}
.dwdk-kategorie-text {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .8;
  margin-bottom: .4rem;
}
.dwdk-frage-text {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
}
.dwdk-kommentar-text {
  font-size: 1.35rem;
  font-style: italic;
  margin-top: .75rem;
}
.dwdk-design-1 { background: linear-gradient(135deg, #FF512F, #F09819); color: #ffffff; }
.dwdk-design-2 { background: linear-gradient(135deg, #2193b0, #6dd5ed); color: #ffffff; }
.dwdk-design-3 { background: linear-gradient(135deg, #654ea3, #eaafc8); color: #ffffff; }
.dwdk-design-4 { background: linear-gradient(135deg, #11998e, #38ef7d); color: #07331f; }
.dwdk-design-5 { background: linear-gradient(135deg, #fc5c7d, #6a82fb); color: #ffffff; }
.dwdk-design-6 { background: linear-gradient(135deg, #f7971e, #ffd200); color: #3a2400; }
.dwdk-design-7 { background: linear-gradient(135deg, #232526, #414345); color: #ffffff; }
.dwdk-design-8 { background: linear-gradient(135deg, #ee0979, #ff6a00); color: #ffffff; }

/* Antwort-Kacheln im Spiel "Das weiss doch keiner" (User-Feedback
   2026-08-22): ersetzt die vorherige Radio-Liste + separaten
   "Antworten"-Button - jede Kachel ist selbst ein Submit-Button mit dem
   jeweiligen Options-Wert, Klick sendet also direkt ab und fuehrt sofort
   zum Moderator-Kommentar. 4 Kacheln nebeneinander, auf Schmalbildschirm
   per Grid automatisch 2x2. Farbe = dieselbe .dwdk-design-N-Klasse wie
   die Fragen-Box, damit Frage und Antworten erkennbar zusammengehoeren. */
.dwdk-antwort-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: 1rem;
}
@media (max-width: 576px) {
  .dwdk-antwort-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
.dwdk-antwort-tile {
  border: none;
  border-radius: 12px;
  padding: 1rem .75rem;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.dwdk-antwort-tile:hover,
.dwdk-antwort-tile:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.dwdk-antwort-tile:active {
  transform: translateY(0);
  filter: brightness(.95);
}

/* Schaetzfrage: eigene farbige Box (gleiche .dwdk-design-N-Klasse wie
   die Frage), volle Breite statt normalem .form-group. */
.dwdk-schaetz-box {
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
  width: 100%;
}
.dwdk-schaetz-box label {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
}
.dwdk-schaetz-box input[type="number"] {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: .6rem .8rem;
  font-size: 1.1rem;
}
.dwdk-schaetz-box .dwdk-schaetz-submit {
  margin-top: .75rem;
}

/* Statistik-Dropdown auf Spiel_DWDK.php + beiden Statistik-Seiten -
   natives <details>/<summary> statt eigenem JS, da Retro (anders als
   Basic mit Bootstrap) kein Dropdown-Komponente hat. */
.dwdk-stat-dropdown {
  position: relative;
}
.dwdk-stat-dropdown summary {
  cursor: pointer;
  list-style: none;
}
.dwdk-stat-dropdown summary::-webkit-details-marker {
  display: none;
}
.dwdk-stat-dropdown__menu {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  min-width: 220px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  padding: .5rem 0;
  z-index: 20;
}
.dwdk-stat-dropdown__label {
  padding: .35rem 1rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--c-text-muted);
}
.dwdk-stat-dropdown__menu a,
.dwdk-stat-dropdown__current {
  display: block;
  padding: .5rem 1rem;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
}
.dwdk-stat-dropdown__menu a:hover {
  background: var(--c-surface-alt);
}
.dwdk-stat-dropdown__current {
  font-weight: 700;
  color: var(--c-text-muted);
}

/* Punkt 103 (Retro-Parität): Warn-Alert (z. B. "Runde nicht gewertet")
   und Farbvarianten fuer .badge-recht (z. B. Wer-kennt-mehr-
   Begriffsdatenbank rot/orange/gruen, Spiel-Punkte-Badges). */
.alert--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.alert--warning::before { content: '[WARN]'; }

.badge-recht--success { color: var(--c-success); border-color: var(--c-success); }
.badge-recht--warning { color: var(--c-warning); border-color: var(--c-warning); }
.badge-recht--danger { color: var(--c-danger); border-color: var(--c-danger); }

/* Wichteln: Nachricht/Wunschliste des gezogenen Empfaengers - steht
   ganz unten in jeder Wichteln-Box (Index, Wichteln.php-Kartenliste,
   Wichteln.php-Detailansicht), Hintergrund = Seitenhintergrund
   (var(--c-bg), damit hell/dunkel automatisch passt statt einer festen
   Farbe). Bewusst KEIN Icon/Badge mehr auf dem Profilbild und KEIN
   Blinken (Punkt 111 - Korrektur zu Punkt 109). */
.wichteln-nachricht-feld {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-top: .75rem;
  color: var(--c-text);
  font-size: 1.1rem;
  text-align: left;
}
.wichteln-nachricht-feld i { margin-right: .35rem; }

/* Titelbild auf Blog_Beitrag.php: .card hat in Retro (anders als
   Bootstrap in Basic) direkt padding:1.25rem auf allen vier Seiten
   (siehe .card-Regel oben), und .blog-titelbild ist ein direktes Kind
   von .card - negativer Randausgleich (-1.25rem links/rechts/oben,
   Breite um 2.5rem vergroessert) laesst das Bild trotzdem randlos bis
   an den Kartenrand reichen; oben abgerundete Ecken passend zum
   Karten-Radius (--radius:4px), unten eckig, da darunter weiterer
   Karteninhalt folgt.
   Umgestellt von background-image-Div auf echtes <img> (2026-09-02,
   gleiches Muster/gleiche Begruendung wie bei den Blog-Vorschau-Boxen
   in index.php/Blog.php/Blog_Autor.php): kein fixer/max-Hoehenwert
   mehr - das Bild behaelt seine natuerliche, proportionale Hoehe, die
   Karte waechst/schrumpft automatisch mit. */
.blog-titelbild {
  display: block;
  width: calc(100% + 2.5rem);
  height: auto;
  border-radius: 4px 4px 0 0;
  margin: -1.25rem -1.25rem 1rem -1.25rem;
}

/* Card-Post-Aside (Punkt 200): Pendant zu Basics .card-post--aside fuer
   Titelbild_Format='hochkant' - ein hochformatiges Bild wuerde bei
   width:100%;height:auto (Retros normales Muster) eine ungewoehnlich
   hohe Karte erzeugen. Stattdessen Bild als schmaler Streifen links
   ueber die volle Kartenhoehe (min-width 180px, exakt wie im Basic-
   Vorbild), Text rechts. Bewusst OHNE Mobile-Breakpoint (Punkt 201) -
   Basics .card-post--aside (Shards-Vendor-CSS) bleibt ebenfalls auf
   jeder Bildschirmgroesse im Zeilen-Layout, ein fruehere Umschaltung
   auf gestapeltes Layout unter 480px wich davon ab. */
.card-post-aside {
  display: flex;
  flex-direction: row;
  padding: 0;
  overflow: hidden;
}
.card-post-aside__img {
  width: 180px;
  min-width: 180px;
  height: auto;
  align-self: stretch;
  object-fit: cover;
  display: block;
}
.card-post-aside__body {
  padding: 0.75rem 1rem 1rem;
  flex: 1;
  min-width: 0;
}

/* Autor-Avatar in Blog-Karten (Punkt 202): kleiner runder Avatar vor
   "von <Name>" - Pendant zu Basics ueberlappendem card-post__author-
   avatar, aber im schlichten Retro-Look als normales Inline-Element
   in der Autorenzeile statt absolut ueber das Titelbild positioniert. */
.card-post-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--c-border);
  flex-shrink: 0;
  /* Bekannter WebKit/Safari-Bug: border-radius wird bei <img> in
     Kombination mit object-fit nicht zuverlässig als Zuschneide-Maske
     angewendet (Bild bleibt eckig, obwohl border-radius gesetzt ist) -
     die -webkit-mask-image-Deklaration erzwingt das Zuschneiden auch
     dort zusätzlich zu border-radius. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Diskussionen-Karte (Punkt 209): Retro-Pendant zu Basics
   .blog-comments-Demo-Klassen (die es in Retro nicht gibt) - schlichte
   eigene Liste mit rundem Avatar links, Meta-Zeile + Text rechts.
   :last-child ohne Trennlinie/Innenabstand, wie Basics vendor-eigenes
   .blog-comments__item:last-child{border:0}. */
.diskussion-item {
  display: flex;
  gap: .75rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--c-border);
}
.diskussion-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.diskussion-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Punkt 152: Chat-Mini-Eingabezeile (contenteditable statt <input>, damit
   Fett/Kursiv/Farbe/Schriftgroesse/Bild/Link direkt eingebettet werden
   koennen) - Platzhaltertext per :empty-Trick, da contenteditable kein
   natives placeholder-Attribut kennt. */
.chat-eingabe-editierbar {
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  background: var(--c-surface);
  color: var(--c-text);
}
.chat-eingabe-editierbar:empty:before {
  content: attr(data-placeholder);
  color: var(--c-text-muted);
}
.chat-farbe-picker {
  width: 32px;
  height: 31px;
  padding: 2px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: transparent;
}
.chat-text img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 4px;
  display: block;
  margin-top: 0.3rem;
}
#chat-schriftgroesse {
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0.3rem 0.4rem;
  font-size: 0.85rem;
}
.gruppen-icon-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: 1.1rem;
}
.gruppen-icon-badge:hover { color: var(--c-text); text-decoration: none; }
.gruppen-icon-badge__zahl {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* =====================================================================
   Sitweite Erweiterungen (User-Wunsch 2026-09-15), inspiriert vom
   Retro-Login-Design (neon-cyber-Demo): Kastenrahmen fuer .card
   (Umrandung + Leuchtrand) sowie ein periodisches "Flackern" der
   Seiten-Ueberschrift (h1) - beides in hell UND dunkel automatisch ueber
   die bestehenden --c-*-Variablen, keine hartkodierten Neon-Farben (die
   wuerden nicht zur Gelb/Schwarz-Elektro-Palette passen). Gilt fuer JEDE
   Kala@Retro-Seite, nicht nur den Login.
   ===================================================================== */

:root {
  --c-glow: rgba(17, 17, 17, 0.22);
}
[data-theme="dark"] {
  /* War Cyan (rgba(63, 182, 224, ...)), passend zum damaligen --c-accent2 -
     jetzt an die neue Neon-Gruen/Magenta-Palette angeglichen (Punkt 379). */
  --c-glow: rgba(0, 255, 65, 0.35);
}

/* Card-Umrandung: Aussenrand in --c-border (wie bisher) + zusaetzlicher
   weicher Leuchtrand (hell: dezenter Schatten, dunkel: echtes Cyan-
   Leuchten) + hauchduenner Innenrahmen fuer den "Doppelrahmen"-Look aus
   dem Login-Terminal-Fenster (.cyber-terminal). */
.card {
  box-shadow: 0 0 18px var(--c-glow), inset 0 0 0 1px var(--c-border);
}

/* Punkt 387 (User-Wunsch 2026-09-15): im Dunkel-Modus die Karten-Umrandung
   1:1 auf die Werte von body.login-page-retro .cyber-terminal umgestellt,
   statt nur eine angenaeherte, gedaempfte Variante (--c-border/--c-glow
   aus Punkt 379) zu verwenden - "genau so wie in Retro.Login.php". Alle
   vier Werte direkt aus dem Login-Terminal-Fenster uebernommen (nicht
   ueber die Variablen, da die dort bewusst gedaempfteren Farben verwendet
   werden - hier ist explizit die identische, kraeftige Login-Optik
   gewuenscht):
   - Rahmen: volle 2px in echtem Neon-Gruen #00ff41 (statt gedaempftem
     --c-border)
   - Ecken: 8px Radius wie das Login-Terminal (statt der sonst im
     Retro-Theme ueblichen 4px/eckigeren "kraeftige Kanten"-Optik)
   - Leuchtrand: identischer doppelter box-shadow (aeusseres Glühen +
     hauchduenner innerer Ring)
   - Hintergrund: halbtransparentes Schwarz statt vollflaechigem
     --c-surface, dadurch schimmert der Cyber-Grid-Hintergrund (Punkt 377/
     385/386) leicht durch die Karten hindurch, exakt wie beim Login.
   Gilt bewusst NUR im Dunkel-Modus - der Hell-Modus behaelt seine
   bestehende, unveraenderte Karten-Optik. */
[data-theme="dark"] .card {
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid #00ff41;
  border-radius: 0;
  box-shadow: 0 0 30px rgba(0, 255, 65, 0.3), inset 0 0 0 1px rgba(0, 255, 65, 0.1);
}

@keyframes retro-heading-flicker {
  0%, 91%, 100% { opacity: 1; filter: none; transform: translate(0, 0); }
  92% { opacity: 0.75; transform: translate(-1px, 0); }
  93% { opacity: 1; filter: hue-rotate(15deg); transform: translate(1px, 0); }
  94% { opacity: 0.8; filter: none; transform: translate(0, 0); }
  95% { opacity: 1; }
}
h1 {
  animation: retro-heading-flicker 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  h1 { animation: none; }
}

/* =====================================================================
   Sitweiter Cyber-Grid-Hintergrund (User-Wunsch 2026-09-15): der
   Hintergrund von Retro.Login.php (Grid-Linien + Glitch-Blitze,
   .cyber-grid im Login-Markup) soll auf JEDER Kala@Retro-Seite laufen,
   nicht nur beim Login - eingebunden ueber .cyber-grid-bg direkt in
   includes/header.php (fixed, pointer-events:none, hinter dem Inhalt).
   Gleiche Struktur wie beim Login (3 horizontale + 2 vertikale Linien,
   2 Glitch-Blitze), aber eigene Klassennamen (.cyber-grid-bg statt
   .cyber-grid) und eigene Keyframe-Namen (retro-grid-*), um nicht mit
   dem gescopten body.login-page-retro-Pendant weiter unten zu kollidieren.
   Farben bewusst NICHT das Neon-Gruen/Magenta des Demos, sondern die
   eigenen Retro-Elektro-Akzente (Cyan fuer die Linien, Gelb fuer die
   Blitze) ueber neue --c-grid-*-Variablen - im Dunkelmodus kraeftig
   (nahe am Login-Vorbild), im Hellmodus stark gedaempft/dunkel getoent
   statt Neon auf hellem Grund (User-Wunsch: "viel heller", aber "selbes
   Prinzip"). */

:root {
  --c-grid-line: rgba(17, 17, 17, 0.06);
  --c-grid-glitch: rgba(214, 40, 40, 0.35);
}
[data-theme="dark"] {
  /* Waren Cyan/Gelb (rgba(63,182,224,...)/rgba(255,212,0,...)), passend
     zum damaligen Gelb/Cyan-Akzent - jetzt an die neue Neon-Gruen/Magenta-
     Palette angeglichen (Punkt 379), damit Grid-Hintergrund und Rahmen/
     Ueberschriften wieder zusammenpassen. */
  --c-grid-line: rgba(0, 255, 65, 0.22);
  --c-grid-glitch: rgba(255, 47, 209, 0.6);
}

.cyber-grid-bg {
  /* Punkt 385 (User-Wunsch 2026-09-15): z-index wieder von -1 auf 0
     zurueckgesetzt - die Aenderung auf -1 in Punkt 383 hat den kompletten
     Streifen-Hintergrund unsichtbar gemacht ("verschwunden"). Ursache:
     ein bekannter, browseruebergreifender CSS-Stolperstein - position:
     fixed kombiniert mit negativem z-index rendert in der Praxis oft
     komplett hinter der Seiten-Canvas, obwohl das laut Spezifikation
     eigentlich nicht so sein muesste. z-index:0 (wie urspruenglich in
     Punkt 377 eingefuehrt und dort live bestaetigt funktionierend) reicht
     bereits aus, damit dieses Element vor .app-shell im DOM liegt und
     dadurch zuverlaessig hinter dem eigentlichen Seiteninhalt bleibt. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.cyber-grid-bg .grid-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--c-grid-line), transparent);
  animation: retro-grid-pulse 4s ease-in-out infinite;
}

.cyber-grid-bg .grid-h-1 { top: 20%; left: 0; width: 100%; height: 1px; animation-delay: 0s; }
.cyber-grid-bg .grid-h-2 { top: 50%; left: 0; width: 100%; height: 1px; animation-delay: 1.5s; }
.cyber-grid-bg .grid-h-3 { top: 80%; left: 0; width: 100%; height: 1px; animation-delay: 3s; }
.cyber-grid-bg .grid-v-1 {
  top: 0; left: 25%; width: 1px; height: 100%;
  background: linear-gradient(0deg, transparent, var(--c-grid-line), transparent);
  animation-delay: 0.75s;
}
.cyber-grid-bg .grid-v-2 {
  top: 0; left: 75%; width: 1px; height: 100%;
  background: linear-gradient(0deg, transparent, var(--c-grid-line), transparent);
  animation-delay: 2.25s;
}

@keyframes retro-grid-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.cyber-grid-bg .cyber-glitch {
  position: absolute;
  width: 200px;
  height: 2px;
  background: var(--c-grid-glitch);
  opacity: 0;
  animation: retro-grid-glitch-flash 6s ease-in-out infinite;
}
.cyber-grid-bg .glitch-1 { top: 30%; left: 10%; animation-delay: 2s; }
.cyber-grid-bg .glitch-2 { top: 70%; right: 10%; animation-delay: 4s; }

@keyframes retro-grid-glitch-flash {
  0%, 95%, 100% { opacity: 0; transform: scaleX(0); }
  96%, 99% { opacity: 1; transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cyber-grid-bg .grid-line,
  .cyber-grid-bg .cyber-glitch {
    animation: none;
    opacity: 0.4;
  }
  .cyber-grid-bg .cyber-glitch { opacity: 0; }
}

/* =====================================================================
   CYPHER_NET-Ueberschriften-Look sitweit (User-Wunsch 2026-09-15): die
   Optik der Login-Ueberschrift ".cyber-title" (Neon-Gruen, fett, Versalien,
   Buchstabenabstand) auf jedes h1 in Kala@Retro uebertragen - der Text
   selbst bleibt natuerlich seitenspezifisch (z. B. "Willkommen zurück,
   Jerome" auf index.php, "Tages-Challenge" auf Tagesherausforderung.php).
   Bewusst wortwoertlich das Neon-Gruen (#00ff41) aus dem Login uebernommen,
   nicht wie bei den fruoeheren Erweiterungen (Punkt 375/377) durch die
   Palette-eigenen Gelb/Cyan-Akzente ersetzt - der User hat die Farbe
   diesmal ausdruecklich selbst benannt ("scanner in Gruen").

   Das Font-Awesome-Icon, das auf sehr vielen Retro-Seiten direkt vor dem
   Ueberschriftentext steht (Markup-Konvention "<h1><i class="fa-solid
   ..."></i> Text</h1>", ueber 50 Dateien), wird darauf aufbauend wie der
   Scanner-Rahmen ueber "CYPHER_NET" gestaltet: gruener Quadrat-Rahmen +
   durchlaufender Scan-Lichtstreifen - ganz ohne die einzelnen Seiten
   anzufassen, allein ueber den Selektor "h1 i". Seiten ohne Icon vor der
   Ueberschrift (z. B. index.php) bleiben unveraendert, wie im Auftrag
   auch nur "die vorhandenen Icons" gemeint waren, nicht neue Icons.
   ===================================================================== */

h1 {
  /* Punkt 382 (User-Wunsch 2026-09-15): im Hell-Modus Dunkelgruen statt
     des Neon-Gruens aus dem Login - das Neon-Gruen bleibt unveraendert
     im Dunkel-Modus (siehe [data-theme="dark"] h1 unten), passt dort
     bereits zur Neon-Gruen/Magenta-Palette aus Punkt 379. Im Hell-Modus
     waere Neon-Gruen auf dem hellen Creme-/Weiss-Untergrund zu grell/
     schlecht lesbar gewesen. Seit Punkt 395 ist das die EINZIGE
     verbliebene Themetrennung fuer h1 - Schriftart/-groesse sind jetzt
     site-weit identisch (siehe die Basis-h1-Regel weiter oben). */
  color: #146c34;
  letter-spacing: 0.04em;
}
[data-theme="dark"] h1 {
  color: #00ff41;
}

/* Punkt 380 (User-Wunsch 2026-09-15): Quadrat-Rahmen samt Fuellung entfernt
   (nur noch das reine Icon-Glyph, ohne Kasten) und etwas vergroessert
   (font-size 0.5em -> 0.7em, width/height sind em-relativ und wachsen
   automatisch mit). Der Puls-Glow laeuft jetzt ueber ein drop-shadow-
   Filter statt box-shadow (box-shadow braeuchte weiterhin eine sichtbare
   Box-Flaeche/-Kante, genau das war der entfernte "Rahmen"). Der
   Scan-Lichtstreifen (::after) bleibt erhalten, "overflow: hidden" clippt
   ihn weiterhin auf den Icon-Bereich, damit er nicht in den Ueberschriften-
   text hineinlaeuft. */
/* Punkt 384 (User-Wunsch 2026-09-15): analog zu Punkt 382 (Ueberschriften-
   Text) jetzt auch Icon-Farbe, Puls-Glow und Scan-Lichtstreifen
   theme-abhaengig - im Hell-Modus dasselbe Dunkelgruen wie die
   Ueberschrift (#146c34), im Dunkel-Modus weiterhin Neon-Gruen. Ueber
   eigene --c-icon-*-Variablen geloest (gleiches Muster wie --c-glow aus
   Punkt 375 und --c-grid-line/--c-grid-glitch aus Punkt 377), da
   @keyframes selbst nicht per Theme-Selektor gescoped werden koennen -
   die Keyframes referenzieren die Variablen, wirken dadurch aber in
   beiden Themes automatisch korrekt. */
:root {
  --c-icon-color: #146c34;
  --c-icon-glow: rgba(20, 108, 52, 0.55);
  --c-icon-glow-soft: rgba(20, 108, 52, 0.4);
  --c-icon-glow-strong: rgba(20, 108, 52, 0.7);
  --c-icon-scan: rgba(20, 108, 52, 0.65);
}
[data-theme="dark"] {
  --c-icon-color: #00ff41;
  --c-icon-glow: rgba(0, 255, 65, 0.55);
  --c-icon-glow-soft: rgba(0, 255, 65, 0.4);
  --c-icon-glow-strong: rgba(0, 255, 65, 0.7);
  --c-icon-scan: rgba(0, 255, 65, 0.65);
}

h1 i {
  /* Punkt 381 (User-Wunsch 2026-09-15): Icon sass nicht mittig im
     Scan-Bereich - Ursache war, dass Font Awesomes eigene Basisregel
     (".fa-solid" etc., ein Klassen-Selektor, Spezifitaet 0-1-0) mit
     "display:var(--fa-display,inline-block)" hoehere Spezifitaet hat als
     der reine Element-Selektor "h1 i" (0-0-2) - "display: inline-flex"
     hier griff dadurch nie, das Icon stand als normales inline-block-
     Element an seiner natuerlichen Grundlinien-Position statt zentriert.
     !important erzwingt jetzt den Sieg gegen die FA-Regel, damit
     align-items/justify-content tatsaechlich wirken. */
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  font-size: 0.7em;
  margin-right: 0.35em;
  vertical-align: middle;
  color: var(--c-icon-color);
  overflow: hidden;
  filter: drop-shadow(0 0 6px var(--c-icon-glow));
  animation: retro-heading-icon-pulse 3s ease-in-out infinite;
}

h1 i::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--c-icon-scan), transparent);
  animation: retro-heading-icon-scan 2.4s linear infinite;
}

@keyframes retro-heading-icon-scan {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes retro-heading-icon-pulse {
  0%, 100% { filter: drop-shadow(0 0 6px var(--c-icon-glow-soft)); }
  50% { filter: drop-shadow(0 0 10px var(--c-icon-glow-strong)); }
}

@media (prefers-reduced-motion: reduce) {
  h1 i,
  h1 i::after {
    animation: none;
  }
  h1 i::after { opacity: 0; }
}

/* Neon Cyber Login Form - Complete & Self-Contained */

body.login-page-retro {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.login-page-retro {
    font-family: 'Courier New', 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    background: #0a0a0a;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    line-height: 1.4;
    position: relative;
    overflow: hidden;
}

/* Cyber Grid Background */

body.login-page-retro .cyber-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

body.login-page-retro .grid-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, #00ff41, transparent);
    opacity: 0.1;
    animation: login-retro-gridPulse 4s ease-in-out infinite;
}

body.login-page-retro .grid-h-1 {
    top: 20%;
    left: 0;
    width: 100%;
    height: 1px;
    animation-delay: 0s;
}

body.login-page-retro .grid-h-2 {
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    animation-delay: 1.5s;
}

body.login-page-retro .grid-h-3 {
    top: 80%;
    left: 0;
    width: 100%;
    height: 1px;
    animation-delay: 3s;
}

body.login-page-retro .grid-v-1 {
    top: 0;
    left: 25%;
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, transparent, #00ff41, transparent);
    animation-delay: 0.75s;
}

body.login-page-retro .grid-v-2 {
    top: 0;
    left: 75%;
    width: 1px;
    height: 100%;
    background: linear-gradient(0deg, transparent, #00ff41, transparent);
    animation-delay: 2.25s;
}

@keyframes login-retro-gridPulse {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.3; }
}

body.login-page-retro .cyber-glitch {
    position: absolute;
    width: 200px;
    height: 2px;
    background: #ff0080;
    opacity: 0;
    animation: login-retro-glitchFlash 6s ease-in-out infinite;
}

body.login-page-retro .glitch-1 {
    top: 30%;
    left: 10%;
    animation-delay: 2s;
}

body.login-page-retro .glitch-2 {
    top: 70%;
    right: 10%;
    animation-delay: 4s;
}

@keyframes login-retro-glitchFlash {
    0%, 95%, 100% { opacity: 0; transform: scaleX(0); }
    96%, 99% { opacity: 0.8; transform: scaleX(1); }
}

body.login-page-retro .login-container {
    width: 100%;
    max-width: 450px;
    position: relative;
    z-index: 1;
}

body.login-page-retro .cyber-terminal {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #00ff41;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.3), inset 0 0 0 1px rgba(0, 255, 65, 0.1);
    position: relative;
}

body.login-page-retro .terminal-header {
    background: linear-gradient(90deg, #1a1a1a, #2a2a2a);
    padding: 12px 16px;
    border-bottom: 1px solid #00ff41;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.login-page-retro .terminal-buttons {
    display: flex;
    gap: 8px;
}

body.login-page-retro .term-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

body.login-page-retro .btn-red {
    background: #ff5555;
    box-shadow: 0 0 8px rgba(255, 85, 85, 0.5);
}

body.login-page-retro .btn-yellow {
    background: #ffff55;
    box-shadow: 0 0 8px rgba(255, 255, 85, 0.5);
}

body.login-page-retro .btn-green {
    background: #55ff55;
    box-shadow: 0 0 8px rgba(85, 255, 85, 0.5);
}

body.login-page-retro .terminal-title {
    color: #00ff41;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.login-page-retro .cyber-content {
    padding: 40px 32px;
}

body.login-page-retro .neon-header {
    text-align: center;
    margin-bottom: 36px;
}

body.login-page-retro .cyber-logo {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.login-page-retro .logo-frame {
    position: relative;
    z-index: 2;
    color: #00ff41;
    border: 2px solid #00ff41;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 65, 0.05);
    animation: login-retro-logoScan 3s ease-in-out infinite;
}

@keyframes login-retro-logoScan {
    0%, 100% { 
        border-color: #00ff41; 
        box-shadow: 0 0 10px rgba(0, 255, 65, 0.3); 
    }
    50% { 
        border-color: #ff0080; 
        box-shadow: 0 0 15px rgba(255, 0, 128, 0.5); 
    }
}

body.login-page-retro .logo-scanner {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.6), transparent);
    animation: login-retro-scanLine 2s linear infinite;
}

@keyframes login-retro-scanLine {
    0% { left: -100%; }
    100% { left: 100%; }
}

body.login-page-retro .neon-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 255, 65, 0.2) 0%, transparent 70%);
    animation: login-retro-neonPulse 2s ease-in-out infinite;
}

@keyframes login-retro-neonPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

body.login-page-retro .cyber-title {
    color: #00ff41;
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

body.login-page-retro .title-glitch {
    position: relative;
    display: inline-block;
    animation: login-retro-textGlitch 4s ease-in-out infinite;
}

@keyframes login-retro-textGlitch {
    0%, 90%, 100% { 
        transform: translate(0); 
        filter: hue-rotate(0deg); 
    }
    91%, 95% { 
        transform: translate(-2px, 1px); 
        filter: hue-rotate(90deg); 
    }
    96%, 99% { 
        transform: translate(1px, -1px); 
        filter: hue-rotate(180deg); 
    }
}

body.login-page-retro .access-text {
    color: #ff0080;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Cyber Form Fields */

body.login-page-retro .cyber-field {
    position: relative;
    margin-bottom: 28px;
}

body.login-page-retro .field-frame {
    position: relative;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 255, 65, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

body.login-page-retro .field-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: linear-gradient(45deg, #00ff41, #ff0080) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.login-page-retro .cyber-field input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 16px 60px 16px 16px;
    color: #00ff41;
    font-size: 14px;
    font-weight: bold;
    outline: none;
    position: relative;
    z-index: 2;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.login-page-retro .cyber-field input::placeholder {
    color: transparent;
}

body.login-page-retro .cyber-field label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 255, 65, 0.6);
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.login-page-retro .cyber-field input:focus + label,
body.login-page-retro .cyber-field input:not(:placeholder-shown) + label {
    top: 8px;
    font-size: 10px;
    color: #00ff41;
    transform: translateY(0);
}

body.login-page-retro .cyber-field input:focus ~ .field-border {
    opacity: 1;
}

body.login-page-retro .cyber-scanner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

body.login-page-retro .scan-line {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.3), transparent);
    transition: left 0.5s ease;
}

body.login-page-retro .cyber-field input:focus ~ .cyber-scanner .scan-line {
    left: 100%;
    animation: login-retro-continuousScan 2s linear infinite;
}

@keyframes login-retro-continuousScan {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Cyber Toggle */

body.login-page-retro .cyber-field:has(.cyber-toggle) input {
    padding-right: 100px;
}

body.login-page-retro .cyber-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 4;
    padding: 4px;
}

body.login-page-retro .toggle-frame {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 255, 65, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ff41;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.8);
}

body.login-page-retro .cyber-toggle:hover .toggle-frame {
    border-color: #00ff41;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}

body.login-page-retro .eye-blocked {
    display: none;
}

body.login-page-retro .cyber-toggle.toggle-active .eye-scan {
    display: none;
}

body.login-page-retro .cyber-toggle.toggle-active .eye-blocked {
    display: block;
}

/* Cyber Options */

body.login-page-retro .cyber-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

body.login-page-retro .neon-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    color: #00ff41;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.login-page-retro .neon-checkbox input[type="checkbox"] {
    display: none;
}

body.login-page-retro .checkbox-matrix {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.login-page-retro .matrix-frame {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 255, 65, 0.5);
    background: rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    position: absolute;
}

body.login-page-retro .checkbox-matrix svg {
    color: transparent;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}

body.login-page-retro .neon-checkbox input[type="checkbox"]:checked + .checkbox-matrix .matrix-frame {
    background: rgba(0, 255, 65, 0.2);
    border-color: #00ff41;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}

body.login-page-retro .neon-checkbox input[type="checkbox"]:checked + .checkbox-matrix svg {
    color: #00ff41;
}

body.login-page-retro .cyber-link {
    color: #ff0080;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
}

body.login-page-retro .cyber-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #ff0080;
    transition: width 0.3s ease;
}

body.login-page-retro .cyber-link:hover::after {
    width: 100%;
}

body.login-page-retro .cyber-link:hover {
    color: #ff4da6;
    text-shadow: 0 0 5px rgba(255, 0, 128, 0.5);
}

/* Neon Button */

body.login-page-retro .neon-button {
    width: 100%;
    background: transparent;
    color: #00ff41;
    border: 2px solid #00ff41;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    margin-bottom: 32px;
    overflow: hidden;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

body.login-page-retro .btn-matrix {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    transition: all 0.3s ease;
}

body.login-page-retro .neon-button:hover {
    border-color: #ff0080;
    color: #ff0080;
    box-shadow: 0 0 15px rgba(255, 0, 128, 0.5);
}

body.login-page-retro .neon-button:hover .btn-matrix {
    background: rgba(255, 0, 128, 0.1);
}

body.login-page-retro .neon-button:active {
    transform: scale(0.98);
}

body.login-page-retro .btn-text {
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease;
}

body.login-page-retro .btn-loader {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.login-page-retro .matrix-loader {
    display: flex;
    gap: 4px;
}

body.login-page-retro .matrix-bar {
    width: 3px;
    height: 16px;
    background: #00ff41;
    animation: login-retro-matrixPulse 1.2s ease-in-out infinite;
}

body.login-page-retro .matrix-bar:nth-child(2) { animation-delay: 0.1s; }

body.login-page-retro .matrix-bar:nth-child(3) { animation-delay: 0.2s; }

body.login-page-retro .matrix-bar:nth-child(4) { animation-delay: 0.3s; }

@keyframes login-retro-matrixPulse {
    0%, 80%, 100% { transform: scaleY(0.5); opacity: 0.5; }
    40% { transform: scaleY(1); opacity: 1; }
}

body.login-page-retro .neon-button.loading .btn-text {
    opacity: 0;
}

body.login-page-retro .neon-button.loading .btn-loader {
    opacity: 1;
}

body.login-page-retro .btn-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #00ff41;
    border-radius: 6px;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
    z-index: -1;
}

body.login-page-retro .neon-button:hover .btn-glow {
    opacity: 0.3;
}

/* Cyber Divider */

body.login-page-retro .cyber-divider {
    display: flex;
    align-items: center;
    margin: 32px 0;
    gap: 16px;
}

body.login-page-retro .divider-grid {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.3), transparent);
    position: relative;
    overflow: hidden;
}

body.login-page-retro .divider-grid::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #00ff41, transparent);
    animation: login-retro-dividerScan 3s linear infinite;
}

@keyframes login-retro-dividerScan {
    0% { left: -100%; }
    100% { left: 100%; }
}

body.login-page-retro .divider-text {
    color: rgba(0, 255, 65, 0.7);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Matrix Social */

body.login-page-retro .matrix-social {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
}

body.login-page-retro .social-matrix {
    flex: 1;
    background: transparent;
    color: #00ff41;
    border: 1px solid rgba(0, 255, 65, 0.3);
    border-radius: 4px;
    padding: 12px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    min-height: 44px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.login-page-retro .social-frame {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    transition: all 0.3s ease;
}

body.login-page-retro .social-matrix:hover {
    border-color: #00ff41;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
}

body.login-page-retro .social-matrix:hover .social-frame {
    background: rgba(0, 255, 65, 0.1);
}

body.login-page-retro .social-matrix span,
body.login-page-retro .social-matrix svg {
    position: relative;
    z-index: 2;
}

body.login-page-retro .social-glow {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: rgba(0, 255, 65, 0.2);
    border-radius: 5px;
    opacity: 0;
    filter: blur(4px);
    transition: opacity 0.3s ease;
    z-index: 0;
}

body.login-page-retro .social-matrix:hover .social-glow {
    opacity: 1;
}

/* Matrix Signup */

body.login-page-retro .matrix-signup {
    text-align: center;
    font-size: 12px;
    color: rgba(0, 255, 65, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.login-page-retro .matrix-link {
    color: #ff0080;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
}

body.login-page-retro .matrix-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #ff0080;
    transition: width 0.3s ease;
}

body.login-page-retro .matrix-link:hover::after {
    width: 100%;
}

body.login-page-retro .matrix-link:hover {
    color: #ff4da6;
    text-shadow: 0 0 5px rgba(255, 0, 128, 0.5);
}

/* Punkt 399 (User-Wunsch 2026-09-15): "in Hell" gestaltet - dieser Link
   fuehrt zum hellen Basic-Login, daher als heller Pill-Button (weiss,
   dunkler Text) statt der magenta Cyber-Unterstreichung von .matrix-link
   - als visueller Vorgeschmack auf das Ziel. Ueberschreibt/deaktiviert
   dafuer gezielt nur die Farb-/Unterstreichungs-Eigenschaften von
   .matrix-link, der "CREATE_PROFILE"-Link (ohne diese Zusatzklasse)
   bleibt unveraendert bei der Cyber-Optik. */
body.login-page-retro .matrix-link--light-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 4px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #ffffff;
    color: #1a1a1a;
    text-shadow: none;
}
body.login-page-retro .matrix-link--light-switch::after {
    display: none;
}
body.login-page-retro .matrix-link--light-switch:hover {
    background: #f1f1f4;
    color: #000000;
    text-shadow: none;
}

/* Cyber Error */

body.login-page-retro .cyber-error {
    color: #ff0080;
    font-size: 11px;
    font-weight: bold;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.3s ease;
    position: relative;
    z-index: 5;
    text-transform: uppercase;
    letter-spacing: 1px;
}

body.login-page-retro .cyber-error.show {
    opacity: 1;
    transform: translateY(0);
}

body.login-page-retro .cyber-field.field-invalid .field-frame {
    border-color: #ff0080;
}

body.login-page-retro .cyber-field.field-invalid .field-border {
    opacity: 1;
}

body.login-page-retro .cyber-field.field-invalid label {
    color: #ff0080;
}

/* Cyber Success */

body.login-page-retro .cyber-success {
    display: none;
    text-align: center;
    padding: 40px 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

body.login-page-retro .cyber-success.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

body.login-page-retro .success-matrix {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.login-page-retro .matrix-rings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body.login-page-retro .success-ring {
    position: absolute;
    border: 2px solid #00ff41;
    border-radius: 50%;
    animation: login-retro-matrixExpand 1.5s ease-out forwards;
    opacity: 0;
}

body.login-page-retro .ring-1 {
    width: 60px;
    height: 60px;
    top: 20px;
    left: 20px;
    animation-delay: 0s;
}

body.login-page-retro .ring-2 {
    width: 80px;
    height: 80px;
    top: 10px;
    left: 10px;
    animation-delay: 0.3s;
}

body.login-page-retro .ring-3 {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    animation-delay: 0.6s;
}

@keyframes login-retro-matrixExpand {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.8; transform: scale(1); }
}

body.login-page-retro .success-core {
    position: relative;
    z-index: 2;
    color: #00ff41;
    animation: login-retro-coreActivate 0.8s ease-out 0.9s forwards;
    opacity: 0;
}

@keyframes login-retro-coreActivate {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

body.login-page-retro .success-title {
    color: #00ff41;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

body.login-page-retro .success-desc {
    color: rgba(0, 255, 65, 0.7);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mobile Responsive */

@media (max-width: 480px) {
body.login-page-retro {
        padding: 16px;
    }

body.login-page-retro .cyber-terminal {
        border-radius: 0;
    }

body.login-page-retro .cyber-content {
        padding: 32px 24px;
    }

body.login-page-retro .cyber-title {
        font-size: 1.5rem;
    }

body.login-page-retro .cyber-logo {
        width: 60px;
        height: 60px;
    }

body.login-page-retro .logo-frame {
        width: 50px;
        height: 50px;
    }

body.login-page-retro .cyber-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

/* "[ CONNECTION_ESTABLISHED ]" lief auf schmalen Handy-Displays ueber den
   Rand hinaus (font-size 1.25rem + letter-spacing 2px + uppercase war fuer
   den 480px-Mobile-Fall bisher nicht mitreduziert). */
body.login-page-retro .success-title {
        font-size: 1rem;
        letter-spacing: 1px;
    }

body.login-page-retro .matrix-social {
        flex-direction: column;
    }

body.login-page-retro .grid-line {
        opacity: 0.05;
    }
}

/* === Accessibility: keyboard focus indicators === */

/* Restores visible focus rings for keyboard users without affecting mouse interaction. */

body.login-page-retro :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Reduced motion: respect user preference. Animations defined per form will tone down. */

@media (prefers-reduced-motion: reduce) {
body.login-page-retro,
body.login-page-retro *::before,
body.login-page-retro *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   Punkt 388/393 (User-Wunsch 2026-09-15): "jede Box mit Titel in
   Kala@Retro so gestalten wie in Retro.Login.php (NEURAL_INTERFACE.exe)".
   Jede .card, die eine direkte Ueberschrift (h1-h6) als Titel hat, wird
   per generischem JS (assets/js/main.js, Funktion enhanceCardTitles) mit
   einer .terminal-header-Titelleiste umgebaut (3 Punkte + Titel), analog
   zu body.login-page-retro .terminal-header/.terminal-buttons/.term-btn/
   .terminal-title (Punkt 377/387).
   Urspruenglich (Punkt 388) nur im Dunkel-Modus aktiv, auf expliziten
   Wunsch (Punkt 393) jetzt in BEIDEN Themes identisch - Retro.Login.php
   selbst kennt gar keinen Hell/Dunkel-Umschalter (body.login-page-retro
   ist immer die gleiche Neon-Optik, unabhaengig vom Rest der App), "genau
   so wie in Retro.Login.php" bedeutet hier also folgerichtig: dieselbe
   Optik in Kala@Retro immer, unabhaengig vom dort gewaehlten Theme. */
.card > .terminal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -1.25rem -1.25rem 1rem -1.25rem;
  padding: 0.6rem 1.25rem;
  /* Punkt 396 (User-Wunsch 2026-09-15): "Titelleiste in Hell viel heller
     gestalten" - die urspruenglich immer dunkle Login-Optik (Punkt 393)
     wird im Hell-Modus jetzt durch einen hellen Verlauf aus den
     themeeigenen Elektro-Farben (--c-bg/--c-surface-alt, Creme/Gelb)
     ersetzt, mit dem kraeftigen schwarzen Rahmen des Hell-Themes statt
     Neon-Gruen. Im Dunkel-Modus bleibt die Titelleiste unveraendert wie
     im Login (siehe [data-theme="dark"]-Override unten). */
  background: linear-gradient(90deg, var(--c-bg), var(--c-surface-alt));
  border-bottom: 2px solid var(--c-border);
  border-radius: 0;
}
[data-theme="dark"] .card > .terminal-header {
  background: linear-gradient(90deg, #1a1a1a, #2a2a2a);
  border-bottom: 1px solid #00ff41;
}
.card > .terminal-header .terminal-buttons {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.card > .terminal-header .term-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.card > .terminal-header .btn-red {
  background: #ff5555;
  box-shadow: 0 0 8px rgba(255, 85, 85, 0.5);
}
.card > .terminal-header .btn-yellow {
  background: #ffff55;
  box-shadow: 0 0 8px rgba(255, 255, 85, 0.5);
}
.card > .terminal-header .btn-green {
  background: #55ff55;
  box-shadow: 0 0 8px rgba(85, 255, 85, 0.5);
}
/* Punkt 394/396 (User-Wunsch 2026-09-15): Titelfarbe angepasst - seit
   Punkt 396 ist die Titelleiste im Hell-Modus selbst hell (statt der
   vorher immer dunklen Login-Optik), daher braucht der Titeltext dort
   jetzt dunklen statt hellen Text fuer Kontrast: "var(--c-text)" (fast
   Schwarz im Hell-Theme). Im Dunkel-Modus bleibt es unveraendert bei
   "var(--c-accent)" (Neon-Gruen), da die Leiste dort weiterhin dunkel
   ist wie beim Login-Vorbild. */
.card > .terminal-header .terminal-title,
.card > .terminal-header .terminal-title * {
  color: var(--c-text);
}
[data-theme="dark"] .card > .terminal-header .terminal-title,
[data-theme="dark"] .card > .terminal-header .terminal-title * {
  color: var(--c-accent);
}
.card > .terminal-header .terminal-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  /* Punkt 391 (User-Wunsch 2026-09-15): Titeltext rechtsbuendig wie bei
     body.login-page-retro .terminal-header (dort per "justify-content:
     space-between" zwischen den 3 Punkten links und dem Titel rechts
     erreicht) - hier einfacher per text-align, da .terminal-title bereits
     "flex:1" hat und so die volle Restbreite bis zum rechten Rand
     einnimmt. */
  text-align: right;
  /* Punkt 389 (User-Wunsch 2026-09-15): Schriftart + Groesse 1:1 von
     body.login-page-retro .terminal-title (NEURAL_INTERFACE.exe)
     uebernommen - vorher hatte die Titelleiste noch eine eigene,
     nur angenaeherte Groesse (0.85rem statt echten 12px). */
  font-family: 'Courier New', 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Punkt 391/392 (User-Wunsch 2026-09-15): Button-Typografie wie bei
   body.login-page-retro .social-matrix (Beispiel "GITHUB_NODE") - Monospace-
   Terminal-Schrift, Versalien, Buchstabenabstand. Gilt fuer ".btn" und
   damit automatisch fuer alle Modifikator-Klassen (.btn--ghost/--danger/
   etc., die nur Farbe/Rahmen aendern) auf jeder Kala@Retro-Seite, ohne
   eine einzelne der ueber 60 Seiten anfassen zu muessen. Urspruenglich
   (Punkt 391) nur im Dunkel-Modus, auf expliziten Wunsch (Punkt 392)
   jetzt auch im Hell-Modus (anders als bei den frueheren, an die
   Neon-Farbpalette gebundenen Login-Look-Uebernahmen - reine Typografie
   ohne Farbbezug, passt daher auch ohne Neon-Optik). */
.btn {
  font-family: 'Courier New', 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* =====================================================================
   Punkt 398 (User-Wunsch 2026-09-15): Die Login-Box aus Retro.Login.php
   (NEURAL_INTERFACE.exe-Terminal) ersetzt jetzt die alte, einfache
   Login-Box im Gast-Zweig von Kala@Retro/index.php - "passend zur
   bestehenden Seite angepasst": alle body.login-page-retro-Regeln fuer
   die eigentliche Box (Terminal-Chrome, Logo-Animation, Glitch-Titel,
   Eingabefelder mit Scan-Linie, Passwort-Toggle, Checkbox, Button,
   Fehler-/Erfolgsmeldungen) werden hier unter dem neuen Wrapper
   ".cyber-terminal-embed" dupliziert (nicht body-gescopt, da index.php
   kein eigener Vollbild-Login ist). Bewusst NICHT mitgenommen: Body-
   Reset/.login-container (Vollbild-Zentrierung, hier uebernimmt die
   bestehende Layout-Struktur diese Aufgabe), der animierte Cyber-Grid-
   Vollbild-Hintergrund (.cyber-grid/.grid-line/.cyber-glitch - existiert
   bereits sitewide separat, siehe Punkt 377/393) sowie die rein
   dekorativen, funktionslosen "GITHUB_NODE"/"DISCORD_NET"-Demo-Buttons
   samt ihres Trenners (.matrix-social/.cyber-divider - passen nicht in
   ein eingebettetes Dashboard-Element). Der "Jetzt registrieren"-Link
   (.matrix-signup/.matrix-link) bleibt erhalten, der zweite, im Original
   vorhandene "Wechsel zu Basic.Login.php"-Link dieser Klasse wird im
   HTML einfach nicht mit uebernommen (ergibt hier keinen Sinn mehr, man
   ist ja schon in der konkreten App). Alle Keyframes sind bereits global
   im Stylesheet vorhanden und muessen nicht dupliziert werden.
   ===================================================================== */
.cyber-terminal-embed .cyber-terminal {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #00ff41;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.3), inset 0 0 0 1px rgba(0, 255, 65, 0.1);
    position: relative;
}

.cyber-terminal-embed .terminal-header {
    background: linear-gradient(90deg, #1a1a1a, #2a2a2a);
    padding: 12px 16px;
    border-bottom: 1px solid #00ff41;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cyber-terminal-embed .terminal-buttons {
    display: flex;
    gap: 8px;
}

.cyber-terminal-embed .term-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.cyber-terminal-embed .btn-red {
    background: #ff5555;
    box-shadow: 0 0 8px rgba(255, 85, 85, 0.5);
}

.cyber-terminal-embed .btn-yellow {
    background: #ffff55;
    box-shadow: 0 0 8px rgba(255, 255, 85, 0.5);
}

.cyber-terminal-embed .btn-green {
    background: #55ff55;
    box-shadow: 0 0 8px rgba(85, 255, 85, 0.5);
}

.cyber-terminal-embed .terminal-title {
    color: #00ff41;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-terminal-embed .cyber-content {
    padding: 40px 32px;
}

.cyber-terminal-embed .neon-header {
    text-align: center;
    margin-bottom: 36px;
}

.cyber-terminal-embed .cyber-logo {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-terminal-embed .logo-frame {
    position: relative;
    z-index: 2;
    color: #00ff41;
    border: 2px solid #00ff41;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 255, 65, 0.05);
    animation: login-retro-logoScan 3s ease-in-out infinite;
}

@keyframes login-retro-logoScan {
    0%, 100% { 
        border-color: #00ff41; 
        box-shadow: 0 0 10px rgba(0, 255, 65, 0.3); 
    }
    50% { 
        border-color: #ff0080; 
        box-shadow: 0 0 15px rgba(255, 0, 128, 0.5); 
    }
}

.cyber-terminal-embed .logo-scanner {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.6), transparent);
    animation: login-retro-scanLine 2s linear infinite;
}

@keyframes login-retro-scanLine {
    0% { left: -100%; }
    100% { left: 100%; }
}

.cyber-terminal-embed .neon-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 255, 65, 0.2) 0%, transparent 70%);
    animation: login-retro-neonPulse 2s ease-in-out infinite;
}

@keyframes login-retro-neonPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.cyber-terminal-embed .cyber-title {
    color: #00ff41;
    font-size: 1.75rem;
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.cyber-terminal-embed .title-glitch {
    position: relative;
    display: inline-block;
    animation: login-retro-textGlitch 4s ease-in-out infinite;
}

@keyframes login-retro-textGlitch {
    0%, 90%, 100% { 
        transform: translate(0); 
        filter: hue-rotate(0deg); 
    }
    91%, 95% { 
        transform: translate(-2px, 1px); 
        filter: hue-rotate(90deg); 
    }
    96%, 99% { 
        transform: translate(1px, -1px); 
        filter: hue-rotate(180deg); 
    }
}

.cyber-terminal-embed .access-text {
    color: #ff0080;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Cyber Form Fields */

.cyber-terminal-embed .cyber-field {
    position: relative;
    margin-bottom: 28px;
}

.cyber-terminal-embed .field-frame {
    position: relative;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 255, 65, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.cyber-terminal-embed .field-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: linear-gradient(45deg, #00ff41, #ff0080) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cyber-terminal-embed .cyber-field input {
    width: 100%;
    background: transparent;
    border: none;
    padding: 16px 60px 16px 16px;
    color: #00ff41;
    font-size: 14px;
    font-weight: bold;
    outline: none;
    position: relative;
    z-index: 2;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-terminal-embed .cyber-field input::placeholder {
    color: transparent;
}

.cyber-terminal-embed .cyber-field label {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(0, 255, 65, 0.6);
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-terminal-embed .cyber-field input:focus + label,
.cyber-terminal-embed .cyber-field input:not(:placeholder-shown) + label {
    top: 8px;
    font-size: 10px;
    color: #00ff41;
    transform: translateY(0);
}

.cyber-terminal-embed .cyber-field input:focus ~ .field-border {
    opacity: 1;
}

.cyber-terminal-embed .cyber-scanner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.cyber-terminal-embed .scan-line {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.3), transparent);
    transition: left 0.5s ease;
}

.cyber-terminal-embed .cyber-field input:focus ~ .cyber-scanner .scan-line {
    left: 100%;
    animation: login-retro-continuousScan 2s linear infinite;
}

@keyframes login-retro-continuousScan {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Cyber Toggle */

.cyber-terminal-embed .cyber-field:has(.cyber-toggle) input {
    padding-right: 100px;
}

.cyber-terminal-embed .cyber-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 4;
    padding: 4px;
}

.cyber-terminal-embed .toggle-frame {
    width: 24px;
    height: 24px;
    border: 1px solid rgba(0, 255, 65, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ff41;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.8);
}

.cyber-terminal-embed .cyber-toggle:hover .toggle-frame {
    border-color: #00ff41;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}

.cyber-terminal-embed .eye-blocked {
    display: none;
}

.cyber-terminal-embed .cyber-toggle.toggle-active .eye-scan {
    display: none;
}

.cyber-terminal-embed .cyber-toggle.toggle-active .eye-blocked {
    display: block;
}

/* Cyber Options */

.cyber-terminal-embed .cyber-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.cyber-terminal-embed .neon-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    color: #00ff41;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-terminal-embed .neon-checkbox input[type="checkbox"] {
    display: none;
}

.cyber-terminal-embed .checkbox-matrix {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-terminal-embed .matrix-frame {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(0, 255, 65, 0.5);
    background: rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease;
    position: absolute;
}

.cyber-terminal-embed .checkbox-matrix svg {
    color: transparent;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}

.cyber-terminal-embed .neon-checkbox input[type="checkbox"]:checked + .checkbox-matrix .matrix-frame {
    background: rgba(0, 255, 65, 0.2);
    border-color: #00ff41;
    box-shadow: 0 0 8px rgba(0, 255, 65, 0.3);
}

.cyber-terminal-embed .neon-checkbox input[type="checkbox"]:checked + .checkbox-matrix svg {
    color: #00ff41;
}

.cyber-terminal-embed .cyber-link {
    color: #ff0080;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    position: relative;
}

.cyber-terminal-embed .cyber-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #ff0080;
    transition: width 0.3s ease;
}

.cyber-terminal-embed .cyber-link:hover::after {
    width: 100%;
}

.cyber-terminal-embed .cyber-link:hover {
    color: #ff4da6;
    text-shadow: 0 0 5px rgba(255, 0, 128, 0.5);
}

/* Neon Button */

.cyber-terminal-embed .neon-button {
    width: 100%;
    background: transparent;
    color: #00ff41;
    border: 2px solid #00ff41;
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    position: relative;
    margin-bottom: 32px;
    overflow: hidden;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.cyber-terminal-embed .btn-matrix {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    transition: all 0.3s ease;
}

.cyber-terminal-embed .neon-button:hover {
    border-color: #ff0080;
    color: #ff0080;
    box-shadow: 0 0 15px rgba(255, 0, 128, 0.5);
}

.cyber-terminal-embed .neon-button:hover .btn-matrix {
    background: rgba(255, 0, 128, 0.1);
}

.cyber-terminal-embed .neon-button:active {
    transform: scale(0.98);
}

.cyber-terminal-embed .btn-text {
    position: relative;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.cyber-terminal-embed .btn-loader {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cyber-terminal-embed .matrix-loader {
    display: flex;
    gap: 4px;
}

.cyber-terminal-embed .matrix-bar {
    width: 3px;
    height: 16px;
    background: #00ff41;
    animation: login-retro-matrixPulse 1.2s ease-in-out infinite;
}

.cyber-terminal-embed .matrix-bar:nth-child(2) { animation-delay: 0.1s; }

.cyber-terminal-embed .matrix-bar:nth-child(3) { animation-delay: 0.2s; }

.cyber-terminal-embed .matrix-bar:nth-child(4) { animation-delay: 0.3s; }

@keyframes login-retro-matrixPulse {
    0%, 80%, 100% { transform: scaleY(0.5); opacity: 0.5; }
    40% { transform: scaleY(1); opacity: 1; }
}

.cyber-terminal-embed .neon-button.loading .btn-text {
    opacity: 0;
}

.cyber-terminal-embed .neon-button.loading .btn-loader {
    opacity: 1;
}

.cyber-terminal-embed .btn-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #00ff41;
    border-radius: 6px;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
    z-index: -1;
}

.cyber-terminal-embed .neon-button:hover .btn-glow {
    opacity: 0.3;
}

.cyber-terminal-embed .matrix-signup {
    text-align: center;
    font-size: 12px;
    color: rgba(0, 255, 65, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-terminal-embed .matrix-link {
    color: #ff0080;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
}

.cyber-terminal-embed .matrix-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #ff0080;
    transition: width 0.3s ease;
}

.cyber-terminal-embed .matrix-link:hover::after {
    width: 100%;
}

.cyber-terminal-embed .matrix-link:hover {
    color: #ff4da6;
    text-shadow: 0 0 5px rgba(255, 0, 128, 0.5);
}

/* Punkt 400 (User-Wunsch 2026-09-15): Wechsel-Link zum hellen Basic-Login,
   unten in der eingebetteten Box - identischer heller Pill-Button wie
   body.login-page-retro .matrix-link--light-switch auf Retro.Login.php
   (Punkt 399), hier nur unter dem Embed-Wrapper .cyber-terminal-embed
   statt body-gescopt. */
.cyber-terminal-embed .matrix-link--light-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 4px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #ffffff;
    color: #1a1a1a;
    text-shadow: none;
}
.cyber-terminal-embed .matrix-link--light-switch::after {
    display: none;
}
.cyber-terminal-embed .matrix-link--light-switch:hover {
    background: #f1f1f4;
    color: #000000;
    text-shadow: none;
}

/* Cyber Error */

.cyber-terminal-embed .cyber-error {
    color: #ff0080;
    font-size: 11px;
    font-weight: bold;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.3s ease;
    position: relative;
    z-index: 5;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-terminal-embed .cyber-error.show {
    opacity: 1;
    transform: translateY(0);
}

.cyber-terminal-embed .cyber-field.field-invalid .field-frame {
    border-color: #ff0080;
}

.cyber-terminal-embed .cyber-field.field-invalid .field-border {
    opacity: 1;
}

.cyber-terminal-embed .cyber-field.field-invalid label {
    color: #ff0080;
}

/* Cyber Success */

.cyber-terminal-embed .cyber-success {
    display: none;
    text-align: center;
    padding: 40px 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.cyber-terminal-embed .cyber-success.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.cyber-terminal-embed .success-matrix {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cyber-terminal-embed .matrix-rings {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cyber-terminal-embed .success-ring {
    position: absolute;
    border: 2px solid #00ff41;
    border-radius: 50%;
    animation: login-retro-matrixExpand 1.5s ease-out forwards;
    opacity: 0;
}

.cyber-terminal-embed .ring-1 {
    width: 60px;
    height: 60px;
    top: 20px;
    left: 20px;
    animation-delay: 0s;
}

.cyber-terminal-embed .ring-2 {
    width: 80px;
    height: 80px;
    top: 10px;
    left: 10px;
    animation-delay: 0.3s;
}

.cyber-terminal-embed .ring-3 {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    animation-delay: 0.6s;
}

@keyframes login-retro-matrixExpand {
    0% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.8; transform: scale(1); }
}

.cyber-terminal-embed .success-core {
    position: relative;
    z-index: 2;
    color: #00ff41;
    animation: login-retro-coreActivate 0.8s ease-out 0.9s forwards;
    opacity: 0;
}

@keyframes login-retro-coreActivate {
    0% { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}

.cyber-terminal-embed .success-title {
    color: #00ff41;
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cyber-terminal-embed .success-desc {
    color: rgba(0, 255, 65, 0.7);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cyber-terminal-embed :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}

@media (max-width: 480px) {
.cyber-terminal-embed .cyber-terminal {
        border-radius: 0;
    }

.cyber-terminal-embed .cyber-content {
        padding: 32px 24px;
    }

.cyber-terminal-embed .cyber-title {
        font-size: 1.5rem;
    }

.cyber-terminal-embed .cyber-logo {
        width: 60px;
        height: 60px;
    }

.cyber-terminal-embed .logo-frame {
        width: 50px;
        height: 50px;
    }

.cyber-terminal-embed .cyber-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

/* "[ CONNECTION_ESTABLISHED ]" lief auf schmalen Handy-Displays ueber den
   Rand hinaus (font-size 1.25rem + letter-spacing 2px + uppercase war fuer
   den 480px-Mobile-Fall bisher nicht mitreduziert). */
.cyber-terminal-embed .success-title {
        font-size: 1rem;
        letter-spacing: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
.cyber-terminal-embed,
.cyber-terminal-embed *::before,
.cyber-terminal-embed *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}