/* Farben: hell als Grundlage; dunkel per Umschalter (data-theme) oder, ohne Wahl, nach Systemeinstellung */
:root { --bg: #f4f2ee; --fg: #1d1d1f; --karte: #fff; --rand: #d8d4cc; --leise: #77736b; --gruen: #1f7a3a; --gelb: #b88a00;
        --rot: #b3261e; --blau: #1f5fbf; --lila: #6a4fc0; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #121316; --fg: #e6e3dd; --karte: #1c1e22; --rand: #34373d; --leise: #8d8a84;
          --gruen: #3fa463; --gelb: #d6a520; --rot: #e0574d; --blau: #5b8fd6; --lila: #9a80e0; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #121316; --fg: #e6e3dd; --karte: #1c1e22; --rand: #34373d; --leise: #8d8a84;
          --gruen: #3fa463; --gelb: #d6a520; --rot: #e0574d; --blau: #5b8fd6; --lila: #9a80e0; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, sans-serif; background: var(--bg); color: var(--fg); }
header h2 small, h2 small { text-transform: none; color: var(--leise); font-weight: 400; }
header { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rand); }
.zustand { font-weight: 700; padding: 2px 10px; border-radius: 10px; color: #fff; background: #777; }
.zustand.läuft { background: var(--gruen); } .zustand.pausiert { background: var(--gelb); } .zustand.gestoppt { background: var(--rot); }
.knoepfe { margin-left: auto; display: flex; gap: 8px; }
button { font: inherit; font-weight: 600; padding: 6px 18px; border-radius: 6px; border: 1px solid var(--rand); background: var(--karte); color: var(--fg); cursor: pointer; }
#stop { background: var(--rot); color: #fff; border-color: var(--rot); }
#banner { padding: 10px 16px; font-weight: 600; color: #fff; }
#banner.sicherheit { background: var(--rot); } #banner.spieler { background: var(--gelb); } #banner.info { background: var(--blau); }
/* Spielbild in doppelter Originalgröße (320×200 → 640×400), daneben Statistiken und Logbuch */
main { display: grid; grid-template-columns: 642px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px; align-items: start; }
#spiel { width: 642px; height: 402px; background: #000; border: 1px solid var(--rand); position: relative; }
#spiel canvas, #standbild { image-rendering: pixelated; }
#standbild { position: absolute; inset: 0; width: 640px; height: 400px; }
.links > * + *, .mitte > * + * { margin-top: 12px; }
.zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 16px; margin: 0; }
.zahlen dt { font-size: 11px; color: var(--leise); } .zahlen dd { margin: 0; font-size: 17px; font-weight: 600; }
.flotte .z { text-align: right; } .flotte tfoot td { font-weight: 600; border-bottom: 0; }
.unter-spiel { margin: 6px 0; }
.kasten { background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px; }
.rechts { min-width: 0; }
#logbuch { list-style: none; margin: 0 0 10px; padding: 0; height: calc(100vh - 140px); min-height: 400px; overflow-y: auto; background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; }
#logbuch li { padding: 4px 10px 4px 12px; border-bottom: 1px solid var(--rand); border-left: 4px solid transparent; overflow-wrap: anywhere; }
#logbuch time { color: var(--leise); font: 11px ui-monospace, monospace; margin-right: 4px; }
#logbuch .ankunft { border-left-color: var(--gruen); font-weight: 600; }
#logbuch .abfahrt { border-left-color: var(--blau); } #logbuch .fracht { border-left-color: var(--lila); }
#logbuch .tanken { border-left-color: var(--gelb); } #logbuch .kauf { border-left-color: var(--gruen); background: rgba(31,122,58,.08); font-weight: 600; }
#logbuch .stand { border-left-color: var(--leise); background: rgba(128,128,128,.08); } #logbuch .sturm { border-left-color: var(--rot); }
#logbuch .warten { color: var(--leise); }
#technik summary { cursor: pointer; color: var(--leise); font-size: 12px; margin-bottom: 6px; }
.flotte table { width: 100%; border-collapse: collapse; font-size: 13px; }
.flotte th, .flotte td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--rand); }
.flotte th { font-size: 11px; color: var(--leise); font-weight: 600; }
#verlauf { width: 100%; height: 160px; color: var(--gruen); }
#log { list-style: none; margin: 0; padding: 0; height: 40vh; overflow-y: auto; font: 12px/1.45 ui-monospace, monospace; background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; }
#log li { padding: 1px 8px; border-bottom: 1px solid var(--rand); white-space: pre-wrap; overflow-wrap: anywhere; }
#log li.fehler, #log li.pause { color: var(--rot); } #log li.entscheidung { font-weight: 600; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }
.leer, .klein { color: var(--leise); font-size: 12px; }
@media (max-width: 1500px) { main { grid-template-columns: 642px minmax(0, 1fr); } .rechts { grid-column: 1 / -1; }
  #logbuch { height: 60vh; } }
@media (max-width: 1000px) { main { grid-template-columns: minmax(0, 1fr); }
  #spiel { width: 100%; height: auto; aspect-ratio: 8 / 5; } #standbild { width: 100%; height: 100%; } }
.tempo { display: flex; align-items: center; gap: 6px; }
.tempo input[type=number] { width: 3.5em; font: inherit; padding: 2px 4px; border: 1px solid var(--rand); border-radius: 4px; background: var(--karte); color: var(--fg); }
.tempo input[type=range] { width: 140px; }
.tempo small { color: var(--leise); }
#thema { padding: 6px 10px; }