/*
 * ISA im Web — zweites Design „Stahl" (Industrial Sci-Fi).
 *
 * Wird NACH isa.css geladen und kleidet dasselbe HTML neu ein: eine düstere,
 * schwere Schiffsmechanik der 90er. Massive Gunmetal-Rahmen aus gebürstetem,
 * rostigem Stahl mit Sechskantschrauben, dicke Rohre als Kanten, Lüftungs-
 * schlitze, Statusleuchten mit Schein. Darin eingelassene, abgedunkelte
 * Monitore mit Zeilenraster und Leuchtschrift in Cyan und Grün. Taster sind
 * erhabene Metallplatten, die beim Drücken nach innen schatten.
 *
 * Bilder gibt es genau vier: die Szene dahinter als Foto in Quer- und Hochformat
 * (aus einem Bildgenerator) sowie Metallkachel und Schraube als SVG
 * (werkzeug/hintergrund.mjs).
 * Keine Schrift, kein Nachladen, keine Bewegung. Die Farbpaare sind in
 * test-design.mjs auf Kontrast geprüft — wer hier Farben ändert, ändert sie an
 * den Variablen, nicht mitten in einer Regel, damit der Test sie sieht.
 * Text steht immer auf einer einfarbigen oder verlaufenden Fläche, nie direkt
 * auf der Metallkachel.
 */

:root {
  /* Monitore: dunkles Blaugrün, oben etwas heller (Röhrenglanz) */
  --st-flaeche-oben:  #0a1b1f;
  --st-flaeche-unten: #050f12;
  /* Fensterleisten: Stahlblau, wie die Frontplatte eines Monitors */
  --st-kopf-oben:     #263a41;
  --st-kopf-unten:    #121d22;
  /* Taster und Menüplatten: erhabener Gunmetal, helle Leuchtschrift */
  --st-knopf-oben:    #535a5f;
  --st-knopf-unten:   #2a2f33;
  --st-knopf-text:    #d2f6ff;
  /* Der eine Akzenttaster: Warnorange, dunkle Schrift */
  --st-akzent-oben:   #ffc261;
  --st-akzent-unten:  #e38a1e;
  --st-akzent-text:   #1b1000;
  /* Menüpunkt mit neuer Post: Bernstein auf derselben Stahlplatte */
  --st-neu-text:      #ffdf9a;

  /* Dieselben Namen wie im Grunddesign, neu belegt. */
  --schwarz:      #030b0d;   /* Eingabefelder, Anzeigen */
  --blau:         #1b2f36;   /* Meldungsflächen */
  --gruen:        #2c9a5a;
  --cyan:         #1597b5;
  --rot:          #8f2a20;
  --magenta:      #7a3a8a;
  --braun:        #6e4012;
  --hellgrau:     #b9cdd1;   /* Fließtext */
  --dunkelgrau:   #4f666c;   /* feine Linien */
  --hellblau:     #3fb0e0;   /* Leuchtkanten */
  --hellgruen:    #6df5a0;   /* Meldungen */
  --hellcyan:     #7de8ff;   /* Beschriftungen, Überschriften */
  --hellrot:      #ff9488;
  --hellmagenta:  #e08cf0;
  --gelb:         #c4ffd8;   /* Werte: helles Phosphorgrün */
  --weiss:        #ffffff;

  /* Alles Monospace, wie auf einer Konsole. */
  --schrift: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, "DejaVu Sans Mono", Menlo, monospace;
  --st-mono: var(--schrift);
  --st-titel: var(--schrift);
}

/* ------------------------------------------------- Weltraum */

/* Der Hintergrund ist ein Bild (public/stahl-hintergrund.jpg und …-hoch.jpg): links und
   rechts Stahlwände mit Rohren, Ventilen und Schott, in der Mitte ruhiger Weltraum mit
   Planet. Es liegt fest hinter der Seite; der Inhalt scrollt davor.
   Größe und Position einer Schicht gehören ins Kürzel „background" — in
   „background-image" wären sie ungültig und der Browser verwürfe die ganze Regel.
   Die Farbe dahinter gilt nur, bis das Bild geladen ist. */
html {
  background: #02060a url("/stahl-hintergrund.jpg") center / cover no-repeat;
  background-attachment: fixed;
}
@media (orientation: portrait) {
  html { background: #02060a url("/stahl-hintergrund-hoch.jpg") center / cover no-repeat; background-attachment: fixed; }
}
body { background: transparent; color: var(--hellgrau); font-size: 14.5px; }
/* Schmaler als im Grunddesign (68rem): Die Fenster liegen in der Mitte des Bildes, und
   der Weltraum mit dem Planeten soll links und rechts daneben noch zu sehen sein. */
main { max-width: 54rem; }

a { color: var(--hellcyan); }
a:hover { color: var(--weiss); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--hellcyan);
  outline-offset: 2px;
}

/* ------------------------------------------------- Kopfleiste: Stahlträger über Warnband */

.leiste {
  position: relative;
  gap: 0 .9rem;
  align-items: center;
  padding: .6rem 2.8rem calc(.6rem + 9px);
  color: var(--weiss);
  background:
    repeating-linear-gradient(45deg, #e9a812 0 10px, #15120a 10px 20px) 0 100% / 100% 9px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 16%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.62)),
    url("/stahl-metall.svg") 0 0 / 400px 400px;
  border-bottom: 2px solid #040506;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 18px rgba(0,0,0,.85);
}
/* Flanschplatten an beiden Enden, je drei Schrauben */
.leiste::before, .leiste::after {
  content: "";
  position: absolute; top: 0; bottom: 9px; width: 28px;
  background:
    url("/stahl-schraube.svg") center 6px / 14px 14px no-repeat,
    url("/stahl-schraube.svg") center 50% / 14px 14px no-repeat,
    url("/stahl-schraube.svg") center bottom 6px / 14px 14px no-repeat,
    linear-gradient(90deg, #0d0f11 0%, #565e64 30%, #858e95 48%, #3a4147 76%, #0b0d0f 100%);
  box-shadow: 0 0 0 1px #040506;
}
.leiste::before { left: 0; }
.leiste::after  { right: 0; }

/* Das Logo: eine Schildplatte mit Leuchtschrift */
.leiste .marke {
  padding: .12rem .85rem;
  color: var(--hellcyan);
  font-family: var(--st-titel);
  font-weight: 800;
  font-size: 1.05em;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #0a2530, #04121a);
  border: 2px solid #030506;
  border-radius: 3px;
  box-shadow: 0 0 0 2px #6a737b, 0 0 0 3px #0a0c0e, 0 0 14px rgba(63,176,224,.5), inset 0 0 10px rgba(63,176,224,.3);
  text-shadow: 0 0 9px #3fb0e0, 0 0 2px #ffffff;
}
.leiste .datum {
  padding: .05rem .6rem;
  color: var(--gelb);
  font-family: var(--st-mono);
  background: #030b0d;
  border: 1px solid #000;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.95), 0 0 0 2px #1c2125, 0 0 0 3px #626c74;
  text-shadow: 0 0 6px rgba(109,245,160,.55);
}
/* Schalterplatten der Kopfleiste: erhabener Stahl mit Leuchtschrift */
.leiste .abmelden, .leiste .kontolink, .leiste .stil {
  padding: .12rem .7rem;
  font-size: .82em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-knopf-text);
  text-decoration: none;
  background: linear-gradient(180deg, var(--st-knopf-oben), var(--st-knopf-unten));
  border: 1px solid #040506;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.4), 0 0 0 2px #14181c, 0 0 0 3px #5d6770;
}
.leiste .abmelden:hover, .leiste .kontolink:hover, .leiste .stil:hover {
  color: var(--weiss);
  box-shadow: inset 0 0 0 1px var(--hellblau), 0 0 0 2px #14181c, 0 0 0 3px #5d6770, 0 0 10px rgba(63,176,224,.55);
}
.leiste .abmelden:active, .leiste .kontolink:active, .leiste .stil:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.85), 0 0 0 2px #14181c, 0 0 0 3px #5d6770;
}
/* Kleine Statusleuchte vor „Design" */
.leiste .stil::before {
  content: "";
  display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 10%, #ffd88a 28%, #ff9d00 70%, #7a4a00 100%);
  box-shadow: 0 0 6px rgba(255,170,0,.85), 0 0 0 2px #070809;
}

/* ------------------------------------------------- Kästen: massiver Rahmen mit Monitor */

.kasten {
  position: relative;
  padding: 14px 14px 20px;
  border: 2px solid #050607;
  border-radius: 5px;
  background:
    /* Lüftungsschlitze in der unteren Rahmenkante */
    repeating-linear-gradient(90deg, #030405 0 3px, #626b72 3px 5px) left 3rem bottom 6px / 46px 8px no-repeat,
    repeating-linear-gradient(90deg, #030405 0 3px, #626b72 3px 5px) right 3rem bottom 6px / 46px 8px no-repeat,
    /* Fase: oben hell, unten dunkel */
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 9%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.66)),
    /* Gunmetal mit Rost und Kratzern */
    url("/stahl-metall.svg") 0 0 / 400px 400px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.34),
    inset 0 -3px 0 rgba(0,0,0,.6),
    inset 2px 0 0 rgba(255,255,255,.1),
    inset -2px 0 0 rgba(0,0,0,.45),
    0 10px 22px rgba(0,0,0,.85);
}
/* Das Rohr auf der Oberkante, mit Flanschen an den Enden und Muffen dazwischen */
.kasten::before {
  content: "";
  position: absolute; left: 26px; right: 26px; top: -10px; height: 22px;
  pointer-events: none;
  background:
    linear-gradient(180deg, #0c0e10 0, #6f777d 12%, #d5dbde 32%, #8b949a 52%, #353c42 80%, #07080a 100%) 0 50% / 8px 22px no-repeat,
    linear-gradient(180deg, #0c0e10 0, #6f777d 12%, #d5dbde 32%, #8b949a 52%, #353c42 80%, #07080a 100%) 100% 50% / 8px 22px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 11rem, #07080a 11rem calc(11rem + 1px), #98a1a7 calc(11rem + 1px) calc(11rem + 3px), #1d2226 calc(11rem + 3px) calc(11rem + 9px), #98a1a7 calc(11rem + 9px) calc(11rem + 11px), #07080a calc(11rem + 11px) calc(11rem + 12px), transparent calc(11rem + 12px)) 0 50% / 100% 14px no-repeat,
    linear-gradient(180deg, #07080a 0, #4a5258 14%, #aeb7bc 38%, #6c757b 58%, #262b30 84%, #050607 100%) 0 50% / 100% 14px no-repeat;
}
/* Schrauben: sechs Sechskantköpfe auf dem Rahmen. Als letztes Kind, damit sie über allem liegen. */
.kasten::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    url("/stahl-schraube.svg") left 1px top 1px / 14px 14px no-repeat,
    url("/stahl-schraube.svg") right 1px top 1px / 14px 14px no-repeat,
    url("/stahl-schraube.svg") left 1px bottom 3px / 14px 14px no-repeat,
    url("/stahl-schraube.svg") right 1px bottom 3px / 14px 14px no-repeat,
    url("/stahl-schraube.svg") center bottom 3px / 14px 14px no-repeat;
}
/* Die Fensterleiste: Frontplatte des Monitors, rechts drei Statusleuchten mit Schein */
.kasten > h2 {
  position: relative;
  margin: 0;
  padding: .42rem 5rem .42rem 1rem;
  font-family: var(--st-titel);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hellcyan);
  background: linear-gradient(180deg, var(--st-kopf-oben), var(--st-kopf-unten));
  border: 2px solid #020405;
  border-bottom: 1px solid #000;
  border-radius: 3px 3px 0 0;
  box-shadow: inset 0 1px 0 rgba(160,225,255,.28), inset 0 -1px 0 rgba(0,0,0,.8);
  text-shadow: 0 0 9px #3fb0e0, 0 -1px 0 rgba(0,0,0,.7);
}
.kasten > h2::after {
  content: "";
  position: absolute; right: .75rem; top: 50%; width: 58px; height: 26px;
  transform: translateY(-50%);
  background:
    radial-gradient(circle, #ffe9e6 0 14%, #ff4a38 46%, #5a0e08 100%) 41px 50% / 12px 12px no-repeat,
    radial-gradient(circle, #fff0cc 0 14%, #ffaa28 46%, #6a3a00 100%) 23px 50% / 12px 12px no-repeat,
    radial-gradient(circle, #eafff1 0 14%, #2ee06f 46%, #0b4a22 100%) 5px 50% / 12px 12px no-repeat,
    radial-gradient(circle, rgba(255,74,56,.65), transparent 68%) 34px 50% / 26px 26px no-repeat,
    radial-gradient(circle, rgba(255,170,40,.65), transparent 68%) 16px 50% / 26px 26px no-repeat,
    radial-gradient(circle, rgba(46,224,111,.65), transparent 68%) -2px 50% / 26px 26px no-repeat;
}
/* Der Bildschirm: abgedunkelt, mit Zeilenraster, feinem Gitter und Röhrenschatten */
.kasten > .inhalt {
  padding: .8rem 1.05rem 1rem;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(70,230,200,.06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(70,230,200,.06) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(ellipse at 50% 35%, rgba(50,190,170,.1), transparent 72%),
    linear-gradient(180deg, var(--st-flaeche-oben), var(--st-flaeche-unten));
  border: 2px solid #020405;
  border-top: 0;
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 0 34px rgba(0,0,0,.92), inset 0 7px 10px rgba(0,0,0,.65), inset 0 0 0 1px rgba(125,232,255,.1);
}

.kopfzeile {
  padding: .5rem 1rem;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--st-kopf-oben), var(--st-kopf-unten));
  border: 2px solid #020405;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(160,225,255,.28), 0 0 0 2px #5d6770, 0 0 0 3px #050607, 0 6px 14px rgba(0,0,0,.7);
}
.kopfzeile .imperium { color: var(--hellcyan); letter-spacing: .06em; text-shadow: 0 0 8px rgba(63,176,224,.8); }
.kopfzeile .geld { color: var(--gelb); font-family: var(--st-mono); }

/* ------------------------------------------------- Werte: Anzeigen mit Balken */

.feld .etikett { border-bottom: 1px dotted var(--dunkelgrau); }
.feld .wert {
  padding: 0 .6rem;
  font-family: var(--st-mono);
  font-variant-numeric: tabular-nums;
  color: var(--gelb);
  background: #020809;
  border: 1px solid #0b3a40;
  border-radius: 2px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.95);
  text-shadow: 0 0 6px rgba(109,245,160,.5);
}
.feld .klasse { color: var(--hellgruen); }

/* Die Lage im Hauptmenü: Beschriftungen in eckigen Klammern wie in der Ressourcenleiste */
.lage .feld .etikett { border-bottom: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .9em; }
.lage .feld .etikett::before { content: "["; color: var(--hellblau); margin-right: .15rem; }
.lage .feld .etikett::after  { content: "]"; color: var(--hellblau); margin-left: .15rem; }
.feld .balken {
  height: .5rem;
  margin: .15rem 0 .45rem;
  background: #020809;
  border: 1px solid #0b3a40;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.95);
}
.feld .balken > span {
  background: linear-gradient(180deg, #a6ffcb, #2fcf79 55%, #137a44);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(46,224,111,.75);
}

.liste .wert, .walze, code, .einmalpasswort {
  font-family: var(--st-mono);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 6px rgba(109,245,160,.45);
}
.walze {
  background: linear-gradient(180deg, #020708, #091a1d);
  border: 2px solid #040608;
  border-radius: 2px;
  box-shadow: inset 0 0 9px rgba(0,0,0,.95), 0 0 0 1px var(--hellblau), 0 0 8px rgba(63,176,224,.4);
}
.einmalpasswort {
  background: #020809;
  border: 1px solid #0b3a40;
  border-radius: 2px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.95);
}

/* ------------------------------------------------- Eingaben */

.formular input, .liste input, .handel input, .feld input, select, textarea {
  color: var(--gelb);
  background: var(--schwarz);
  border: 1px solid #0f4a52;
  border-radius: 2px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.9), 0 0 0 1px #02060a;
}
.formular input:focus, .formular input:focus-visible {
  outline: 3px solid var(--hellcyan);
  outline-offset: 1px;
}
.formular label, .handel label { color: var(--hellcyan); }

/* ------------------------------------------------- Taster: erhabene Metallplatten */

.formular button, .liste button, .handel button, main > form button,
.menue button, form.reihe button, main > form > p button {
  font: inherit;
  font-family: var(--st-titel);
  font-size: .86em;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-knopf-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 50%),
    linear-gradient(180deg, var(--st-knopf-oben), var(--st-knopf-unten));
  border: 1px solid #040506;
  border-radius: 3px;
  padding: .3rem .9rem;
  cursor: pointer;
  text-shadow: 0 0 7px rgba(125,232,255,.5), 0 -1px 0 rgba(0,0,0,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 0 rgba(0,0,0,.45),
    inset 1px 0 0 rgba(255,255,255,.12),
    inset -1px 0 0 rgba(0,0,0,.35),
    0 0 0 2px #0b0d0f,
    0 4px 0 2px #040506,
    0 8px 10px rgba(0,0,0,.6);
}
.formular button::before, .liste button::before, .handel button::before, main > form button::before,
.menue button::before, form.reihe button::before, main > form > p button::before { content: "[\00a0"; color: var(--hellblau); }
.formular button::after, .liste button::after, .handel button::after, main > form button::after,
.menue button::after, form.reihe button::after, main > form > p button::after { content: "\00a0]"; color: var(--hellblau); }
.formular button:hover, .liste button:hover, .handel button:hover, main > form button:hover,
.menue button:hover, form.reihe button:hover, main > form > p button:hover {
  color: var(--weiss);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -3px 0 rgba(0,0,0,.45),
    inset 0 0 0 1px var(--hellblau),
    0 0 0 2px #0b0d0f, 0 4px 0 2px #040506,
    0 0 14px rgba(63,176,224,.6), 0 8px 10px rgba(0,0,0,.6);
}
.formular button:active, .liste button:active, .handel button:active, main > form button:active,
.menue button:active, form.reihe button:active, main > form > p button:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 4px 9px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 0 0 2px #0b0d0f,
    0 0 0 3px #040506;
}
/* Der eine Taster, der heraussticht: Zug spielen */
.menue .zug button {
  padding: .55rem 1.6rem;
  font-size: 1.02rem;
  color: var(--st-akzent-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--st-akzent-oben), var(--st-akzent-unten));
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(120,60,0,.5), 0 0 0 3px #0b0d0f, 0 5px 0 3px #040506,
              0 0 18px rgba(255,170,40,.45), 0 10px 12px rgba(0,0,0,.6);
}
.menue .zug button::before, .menue .zug button::after { color: var(--st-akzent-text); }
.menue .zug button:hover {
  color: var(--st-akzent-text);
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -3px 0 rgba(120,60,0,.5), 0 0 0 3px #0b0d0f, 0 5px 0 3px #040506,
              0 0 24px rgba(255,170,40,.7), 0 10px 12px rgba(0,0,0,.6);
}
.menue .zug button:active {
  transform: translateY(5px);
  box-shadow: inset 0 4px 10px rgba(80,35,0,.8), 0 0 0 3px #0b0d0f, 0 0 0 4px #040506;
}

/* ------------------------------------------------- Hauptmenü: Schaltflächen wie die Navigation */

.menue { gap: .55rem; }
/* Gleich hohe Platten, auch wenn eine Beschriftung umbricht. */
.menue li { display: flex; }
.menue li > a { flex: 1; }
.menue a {
  display: block;
  padding: .45rem 2.3rem .45rem .75rem;
  font-family: var(--st-titel);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--st-knopf-text);
  text-decoration: none;
  background:
    /* grüne Betriebsleuchte rechts */
    radial-gradient(circle at calc(100% - 15px) 50%, #eafff1 0 1.5px, #2ee06f 3px, rgba(46,224,111,.45) 5px, transparent 9px),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 50%),
    linear-gradient(180deg, var(--st-knopf-oben), var(--st-knopf-unten));
  border: 1px solid #040506;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 0 rgba(0,0,0,.45),
    0 0 0 1px #0b0d0f,
    0 3px 0 1px #040506;
  text-shadow: 0 0 6px rgba(125,232,255,.45), 0 -1px 0 rgba(0,0,0,.6);
}
.menue a::before { content: "[\00a0"; color: var(--hellblau); }
.menue a::after  { content: "\00a0]"; color: var(--hellblau); }
.menue a:hover, .menue a:focus-visible {
  color: var(--weiss);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 0 rgba(0,0,0,.45),
    inset 0 0 0 1px var(--hellblau),
    0 0 0 1px #0b0d0f, 0 3px 0 1px #040506,
    0 0 14px rgba(63,176,224,.55);
}
.menue a:active {
  transform: translateY(3px);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.85), inset 0 0 0 1px rgba(0,0,0,.6), 0 0 0 1px #0b0d0f;
}
/* Neue Post: bernsteinfarbene Betriebsleuchte, Leuchtrand und fette Schrift. Die Schrift ist
   auch ohne Farbe lesbar als „neu" (Zahl im Text, Fettdruck). */
.menue a.neu {
  color: var(--st-neu-text);
  font-weight: 800;
  background:
    radial-gradient(circle at calc(100% - 15px) 50%, #fff0cc 0 1.5px, #ffaa28 3px, rgba(255,170,40,.55) 5px, transparent 9px),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 50%),
    linear-gradient(180deg, var(--st-knopf-oben), var(--st-knopf-unten));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -3px 0 rgba(0,0,0,.45),
    inset 0 0 0 1px #ffaa28,
    0 0 0 1px #0b0d0f, 0 3px 0 1px #040506,
    0 0 14px rgba(255,170,40,.5);
}
.menue a.neu::before { content: "●\00a0"; color: #ffaa28; }
.menue a.neu:hover, .menue a.neu:focus-visible { color: var(--weiss); }
.menue.nachgelagert { border-top: 1px solid rgba(63,176,224,.35); box-shadow: 0 -1px 0 rgba(0,0,0,.6); }
.menue .zug .gesperrt { color: var(--hellrot); }

/* ------------------------------------------------- Meldungen: Platten mit Warnstreifen */

.wichtig, .flash, .warnung {
  position: relative;
  padding: .5rem .8rem .5rem 1.7rem;
  color: var(--weiss);
  background: linear-gradient(90deg, rgba(255,188,46,.14), var(--blau) 55%);
  border: 1px solid #02060a;
  border-left: 0;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(63,176,224,.2);
}
.wichtig::before, .flash::before, .warnung::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 13px;
  border-radius: 2px 0 0 2px;
  background: repeating-linear-gradient(45deg, #e9a812 0 6px, #15120a 6px 12px);
}
.flash { background: linear-gradient(90deg, rgba(63,176,224,.2), var(--blau) 55%); }
.flash::before { background: repeating-linear-gradient(45deg, #5fd4ff 0 6px, #06242e 6px 12px); }
.warnung { background: linear-gradient(90deg, rgba(255,188,46,.2), var(--braun) 60%); }
.wichtig a { color: var(--weiss); }

.fehler {
  background: linear-gradient(180deg, var(--rot), #6c2118);
  border: 1px solid #2a0a07;
  border-left: 8px solid var(--hellrot);
  border-radius: 2px;
}
.meldungen li { color: var(--hellgruen); }
.meldungen.bericht li { color: var(--hellcyan); }
.grund { color: var(--hellrot); }
.hinweis { color: var(--hellgrau); }

/* Die Zeile unten im Hauptmenü: das Protokollfeld, rechts ein Lüftungsgitter */
.statuszeile {
  display: flex; flex-wrap: wrap; gap: .25rem 1.8rem;
  margin: .9rem 0 0;
  padding: .5rem 5.5rem .5rem 1rem;
  font-family: var(--st-mono);
  font-size: .8em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hellcyan);
  background:
    repeating-linear-gradient(90deg, #020405 0 3px, #5c656c 3px 5px) right .9rem center / 54px 55% no-repeat,
    repeating-linear-gradient(180deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #020809, #07181b);
  border: 2px solid #050607;
  border-radius: 4px;
  box-shadow: inset 0 0 14px rgba(0,0,0,.9), 0 0 0 2px #5d6770, 0 0 0 3px #050607, 0 6px 14px rgba(0,0,0,.7);
  text-shadow: 0 0 7px rgba(63,176,224,.8);
}

/* ------------------------------------------------- Tabellen */

.liste thead th {
  color: var(--hellcyan);
  font-family: var(--st-titel);
  font-size: .8em;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(38,58,65,.6);
  border-bottom: 2px solid #1d4a54;
}
.liste th, .liste td {
  border-bottom: 1px solid rgba(63,176,224,.16);
}
.liste tbody tr:nth-child(even) { background: rgba(63,176,224,.045); }
.liste tbody tr:hover { background: rgba(63,176,224,.14); }
/* Der Verlauf liegt auf der Zeile, nicht auf den Zellen — sonst finge er in jeder neu an. */
.liste tr.selbst { background: linear-gradient(90deg, rgba(46,224,111,.32), rgba(46,224,111,.08)); }
.liste tr.selbst th, .liste tr.selbst td { color: var(--weiss); background: transparent; }
.post li { border-bottom: 1px solid rgba(63,176,224,.16); }

/* ------------------------------------------------- Handy */

@media (max-width: 34rem) {
  .leiste { padding: .5rem 2rem calc(.5rem + 9px); }
  .kasten { padding: 12px 10px 18px; }
  .kasten > h2 { padding-right: 4.3rem; letter-spacing: .1em; }
  .kasten > h2::after { right: .4rem; }
  .kasten::before { left: 18px; right: 18px; }
  .menue a { padding-right: 2rem; }
  .statuszeile { padding-right: 1rem; background-size: 0 0, auto, auto; }
}

/* Wer mehr Kontrast verlangt, bekommt keine Leuchteffekte. */
@media (prefers-contrast: more) {
  * { text-shadow: none !important; }
  .feld .wert, .kasten, .kopfzeile, .statuszeile { box-shadow: none; }
}