/* Eigene Optik des Ticketsystems (Vorgabe D. Damaschke vom 06.11.2026): Tech-Poster im Military-Stil. Grund fast schwarz,
   Olivgrün als Hauptfarbe, helle Tabelle und helles Menü, alles eckig. Neon nur bei Prio und Status, wie hinterleuchtete
   Taster an einem Gerät: dunkle Schrift auf leuchtender Kappe, damit sie lesbar bleibt. Die Kennzahlen bleiben ohne Neon.
   Beere ist das Signal für Wichtiges. Bedeutung steht immer auch als Wort da (WCAG 2.2). */
:root {
  --grund: #0B0C08; --flaeche: #15170F; --linie: #3A4023; --text: #E7E8DC; --leise: #A9AD95;
  --oliv: #5E6B24; --oliv-tief: #363E16; --oliv-hell: #A4B44A; --knochen: #D8D9C7; --tinte: #12140C; --knochen-linie: #9B9D88; --tinte-weich: #3D4030; --hell: #F4F5EA;
  --beere: #A8124F; --neon-beere: #FF4F93; --neon-oliv: #C6E03C; --neon-cyan: #3FE0F5; --neon-bernstein: #FFB43A;
  --schrift: Bahnschrift, "Segoe UI Variable", "Segoe UI", Roboto, Arial, sans-serif;
  --technik: "Cascadia Mono", Consolas, "Roboto Mono", monospace;
  --poster: Impact, Haettenschweiler, "Arial Narrow Bold", Bahnschrift, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; border-radius: 0; }
html { background: var(--grund); }
body { margin: 0; min-height: 100vh; color: var(--text); font: 1rem/1.5 var(--schrift); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--neon-oliv); outline-offset: 2px; }
h1, h2 { font-weight: 600; line-height: 1.2; }

/* Rahmen: Menü links, Inhalt rechts */
.rahmen { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 100vh; }
.menue { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 1rem 0; background: var(--knochen); color: var(--tinte); border-right: 3px solid var(--oliv); }
.menue :focus-visible { outline-color: var(--tinte); }
.menue .marke { font: 400 1.5rem/1 var(--poster); letter-spacing: .04em; text-decoration: none; color: var(--tinte); }
.menue nav { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.menue nav a { writing-mode: vertical-rl; padding: .5rem .25rem; font: 500 .95rem/1.3 var(--technik); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--tinte-weich); }
.menue nav a:hover { color: var(--tinte); }
.menue nav a[aria-current] { color: var(--hell); background: var(--oliv); border-left: 3px solid var(--beere); }
.menue form { margin-top: auto; }
.menue button { writing-mode: vertical-rl; min-height: 0; margin: 0; padding: .5rem .25rem; font: .75rem/1.3 var(--technik); letter-spacing: .14em; color: var(--tinte); background: none; border: 1px solid var(--tinte-weich); box-shadow: none; }

main { width: 100%; max-width: 1040px; padding: 1rem 1.25rem 2rem; }
/* Kopf: Kennzeile über die ganze Breite, darunter Logo und Wort gleich hoch und links bündig mit den Kacheln */
.kopf { --wort: clamp(2.75rem, 11vw, 5.5rem); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25rem 1rem; margin-bottom: .75rem; }
.logo { display: block; width: auto; height: 32px; }
.kopf:has(.gross) .kennung { grid-column: 1 / -1; grid-row: 1; }
.kopf:has(.gross) .logo { height: calc(var(--wort) * .78); }
.kennung { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; font: 500 .72rem/1.5 var(--technik); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.gross { margin: 0; font: 400 var(--wort)/.95 var(--poster); letter-spacing: .03em; text-transform: uppercase; color: var(--knochen); }
.gross span { color: var(--oliv-hell); }

/* Lagezeile: Kennzahlen als eckige Tafeln in den Grundfarben, daneben der Strichcode */
.lage { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; padding-bottom: .75rem;
  border-bottom: 2px solid var(--oliv-hell); }
.zahlen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.zahlen div { min-width: 118px; padding: .375rem .75rem; color: var(--hell); background: var(--beere); }
.zahlen div:nth-child(2) { background: var(--oliv); }
.zahlen div:nth-child(3) { color: var(--tinte); background: var(--knochen); }
.zahlen dt { font: 700 .75rem/1.5 var(--technik); letter-spacing: .08em; text-transform: uppercase; }
.zahlen dd { margin: 0; font: 400 2.5rem/1.1 var(--poster); letter-spacing: .03em; }
.geraet { display: flex; align-items: flex-end; gap: .25rem; }
.schuetze { display: block; width: auto; height: 164px; margin-top: -80px; }   /* ragt in den freien Platz neben dem großen Wort */
.strich { display: block; flex: none; width: auto; height: 34px; }   /* feste Größe, damit der Code scanbar bleibt */

h2 { margin: 1.5rem 0 0; padding: .25rem .625rem; font: 700 .8rem/1.5 var(--technik); letter-spacing: .1em; text-transform: uppercase; color: var(--knochen); background: var(--oliv); }

/* helle Tabelle wie auf dem Poster; am Handy wird jede Zeile ein Block */
.tabelle { width: 100%; border-collapse: collapse; background: var(--knochen); color: var(--tinte); font: .9rem/1.4 var(--technik); }
.tabelle th { padding: .375rem .625rem; text-align: left; font-size: .7rem; letter-spacing: .08em; border-bottom: 2px solid var(--tinte); }
.tabelle td { padding: .5rem .625rem; vertical-align: top; border-bottom: 1px solid var(--knochen-linie); }
.tabelle tbody tr:hover { background: #E8E9D9; }
.tabelle .nr { white-space: nowrap; font-weight: 700; }
.tabelle .titel a { font-family: var(--schrift); font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.tabelle small { display: block; font-family: var(--schrift); color: #3D4030; }
@media (max-width: 640px) {
  .tabelle thead { display: none; }
  .tabelle, .tabelle tbody { display: block; }
  .tabelle tr { display: grid; grid-template-columns: auto auto 1fr; gap: .25rem .5rem; padding: .625rem; border-bottom: 1px solid var(--knochen-linie); }
  .tabelle td { display: block; padding: 0; border: 0; }
  .tabelle .titel { grid-column: 1 / -1; grid-row: 2; }
  .tabelle .kw { grid-column: 1 / -1; }
  .tabelle .kw:empty { display: none; }
}

/* Leuchtmelder: Taster mit dunkler Fassung und hinterleuchteter Kappe, heller in der Mitte */
.melder { --f: var(--leise); display: inline-block; padding: .125rem .5rem; color: var(--tinte); border: 2px solid var(--tinte);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--f) 65%, #FFFFFF), var(--f) 80%);
  font: 700 .82rem/1.5 var(--technik); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 0 9px color-mix(in srgb, var(--f) 75%, transparent); }
.melder.stufe-1, .melder.neu { --f: var(--neon-beere); }
.melder.stufe-2, .melder.in_arbeit { --f: var(--neon-bernstein); }
.melder.stufe-3, .melder.erledigt { --f: var(--neon-oliv); }
.melder.eingeplant { --f: var(--neon-cyan); }

/* Felder mit Eckmarken wie auf einer Lagekarte */
.karte { position: relative; margin-bottom: 1rem; padding: 1rem; background: var(--flaeche); border: 1px solid var(--linie); }
.karte::before, .karte::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--oliv-hell); }
.karte::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.karte::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.schmal { max-width: 380px; margin: 2rem auto; }
.detail { display: grid; gap: 1rem; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
.detail .karte { margin: 0; }
@media (max-width: 760px) { .detail { grid-template-columns: minmax(0, 1fr); } }
.ticket-titel { margin: .25rem 0 .75rem; font-size: 1.4rem; overflow-wrap: anywhere; }
.leise { color: var(--leise); font-size: .9rem; }
.angaben { display: grid; grid-template-columns: auto 1fr; gap: .125rem .75rem; margin: 0 0 .75rem; }
.angaben dt { color: var(--leise); font: .8rem/1.8 var(--technik); text-transform: uppercase; }
.angaben dd { margin: 0; overflow-wrap: anywhere; }
.text { overflow-wrap: anywhere; }
.verlauf { margin: 0; padding: 0; list-style: none; }
.verlauf li { padding: .375rem 0; border-bottom: 1px solid var(--linie); overflow-wrap: anywhere; }
.verlauf .leise { display: block; font-size: .8rem; }
img { max-width: 100%; height: auto; }
label { display: block; margin: .625rem 0 .25rem; color: var(--leise); font: .75rem/1.5 var(--technik); letter-spacing: .06em; text-transform: uppercase; }
input, select, textarea { width: 100%; min-height: 44px; padding: .5rem; font: inherit; color: inherit; background: var(--grund); border: 1px solid var(--linie); }
input:focus, select:focus, textarea:focus { border-color: var(--oliv-hell); }
button { min-height: 44px; margin-top: .875rem; padding: .5rem 1.5rem; font: 700 .9rem/1.4 var(--technik); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  background: var(--oliv); color: #FFFFFF; border: 1px solid var(--oliv-hell); }
button:hover { background: var(--oliv-hell); color: var(--tinte); }
.hinweis { padding: .5rem .75rem; background: var(--oliv-tief); color: var(--neon-oliv); border: 1px solid var(--neon-oliv); }
.hinweis.error { background: #2E0D1C; color: var(--neon-beere); border-color: var(--neon-beere); }

@media (max-width: 960px) { .schuetze { display: none; } }
@media (max-width: 760px) { .geraet { display: none; } }
@media (max-width: 560px) {
  .rahmen { grid-template-columns: 52px minmax(0, 1fr); }
  main { padding: .75rem; }
  .zahlen { width: 100%; }
  .zahlen div { flex: 1; min-width: 0; padding: .375rem .5rem; }
  .zahlen dt { font-size: .66rem; letter-spacing: .03em; white-space: nowrap; }
}