/* A.0.102.0 — die Garage (tafeln/rennen.js): drei Dinge im Raum als das, was sie sind. Der Schlüsselkasten (und jeder Wagen) zeigt die
   Stellplätze: je Wagen ein Platz zwischen gelben Linien, Funkrufname wie ein Schild, Bild, Zustand; freie Plätze gestrichelt mit „P“.
   Das Funkgerät zeigt die Leitstelle: dunkler Schirm, rote Lampe bei einem Einsatz, die Meldung, deine Wagen zum Losfahren, der Stand
   mit Balken und das Ergebnis. Das Pokalregal zeigt die Wertung (Gold, Silber, Bronze) und darunter das Regal mit den Pokalen. */

/* ── Leitstelle ───────────────────────────────────────────────────────── */
.lt { border-radius: .6em; overflow: clip; background: #0f1a24; color: #d6e4ef; border: 3px solid #2b3a47; box-shadow: 0 .2em .5em rgba(0, 0, 0, .3); }
.lt-kopf { display: flex; align-items: center; gap: .6em; padding: .45em .85em; background: #18252f; border-bottom: 1px solid #2c3d4b;
  font: 700 .82em/1.2 var(--schrift); letter-spacing: .07em; text-transform: uppercase; }
.lt-kopf b { color: #fff; }
.lt-kopf > span { color: #7f95a6; }
.lt-lampe { width: .85em; height: .85em; flex: none; border-radius: 50%; background: #3a4a57; box-shadow: inset 0 -.1em .15em rgba(0, 0, 0, .4); }
.lt-lampe.an { background: #ff3b30; box-shadow: 0 0 .7em #ff3b30; animation: lt-blinken 1.1s steps(2, jump-none) infinite; }
@keyframes lt-blinken { 50% { background: #7a1c17; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .lt-lampe.an { animation: none; } }
.lt-kopf .lt-zeit { margin-left: auto; color: #ffcf5a; font-family: ui-monospace, 'DejaVu Sans Mono', monospace; letter-spacing: .03em; }
.lt-kopf .lt-zeit.laeuft { color: #8ff0c0; }
.lt-schirm { padding: .7em .9em .9em; }
.lt-alarm { padding: .55em .75em; border: 1px solid #ff3b30; border-radius: .45em; background: rgba(255, 59, 48, .08); }
.lt-meldung { margin: 0; font: 700 1.08em/1.3 ui-monospace, 'DejaVu Sans Mono', monospace; color: #ff8a80; letter-spacing: .02em; }
.lt-daten { margin: .3em 0 0; font-size: .88em; color: #c3d3df; }
.lt-daten b { color: #fff; }
.lt-dabei { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; margin: .5em 0 0; font-size: .82em; }
.lt-dabei > span:first-child { color: #7f95a6; font-weight: 700; margin-right: .2em; }
.lt-chip { padding: .1em .55em; border-radius: 999px; background: #22323f; border: 1px solid #344756; }
.lt-chip small { margin-left: .35em; color: #9fb3c2; }
.lt-chip.du { border-color: #ffcf5a; color: #ffcf5a; }
.lt-leise { color: #7f95a6; }
.lt .lt-los { margin: .85em 0 .4em; font: 700 .95em/1.2 var(--schrift); color: #fff; }
.lt-warnung { margin: 0 0 .45em; color: #ffb4a8; font-weight: 700; font-size: .85em; }
.lt-wagenreihe { display: grid; grid-template-columns: repeat(auto-fill, minmax(14em, 1fr)); gap: .45em; }
.lt .knopf.lt-wagen { display: flex; align-items: center; gap: .6em; padding: .4em .6em; text-align: left; border-radius: .5em; background: #1c2b37;
  border: 1px solid #33495a; color: #e6f0f7; }
.lt .knopf.lt-wagen:hover:not(:disabled), .lt .knopf.lt-wagen:focus-visible { background: #24394a; border-color: #ffcf5a; outline: none; }
.lt .knopf.lt-wagen:disabled { opacity: .45; filter: grayscale(.7); }
.lt-wagen-bild { width: 4.6em; flex: none; }
.lt-wagen-bild img { width: 100%; display: block; }
.lt-wagen-text { display: flex; flex-direction: column; min-width: 0; }
.lt-wagen-text small { color: #9fb3c2; font-size: .78em; }
.lt-unterwegs { margin: .85em 0 0; padding: .5em .7em; border-radius: .45em; background: #1d3a2a; color: #b9f1cf; font-weight: 700; }
.lt-ruhe { margin: .3em 0; color: #9fb3c2; font-weight: 700; }
.lt-tafel { width: 100%; border-collapse: collapse; margin-top: .6em; font-size: .86em; }
.lt-tafel th { padding: .3em .45em; text-align: left; color: #7f95a6; font-size: .78em; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid #2c3d4b; }
.lt-tafel td { padding: .35em .45em; border-bottom: 1px solid #1f2d39; vertical-align: middle; }
.lt-tafel td small { display: block; color: #8ea3b3; font-size: .82em; }
.lt-tafel tr.du td { background: rgba(255, 207, 90, .12); }
.lt-tafel tr.du b { color: #ffcf5a; }
.lt-tafel tr.zu td { color: #7f8d99; }
.lt-platz { width: 2em; font: 700 1.05em/1 ui-monospace, 'DejaVu Sans Mono', monospace; color: #fff; }
.lt-tafel tr.p1 .lt-platz { color: #ffd54a; }
.lt-tafel tr.p2 .lt-platz { color: #d9e2ea; }
.lt-tafel tr.p3 .lt-platz { color: #e3a065; }
.lt-weg { min-width: 7em; }
.lt-strecke { display: block; height: .45em; border-radius: 999px; background: #22323f; overflow: clip; }
.lt-strecke i { display: block; height: 100%; background: linear-gradient(90deg, #2f80ed, #56ccf2); }
.lt-tafel tr.du .lt-strecke i { background: linear-gradient(90deg, #f2994a, #ffcf5a); }
.lt-punkte { font: 700 1.05em/1 ui-monospace, 'DejaVu Sans Mono', monospace; color: #fff; text-align: right; }
.lt-tafel-rahmen .hinweis { margin-top: .7em; }

/* ── Stellplätze ─────────────────────────────────────────────────────── */
.fp-kopf { margin: 0 0 .5em; font-weight: 700; }
.fp-leer { margin: 0 0 .5em; font-weight: 700; color: #6b5a44; }
.fp-halle { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr)); gap: .55em; padding: .7em .6em .6em; border-radius: .6em;
  background: linear-gradient(#d3d8dc, #bcc3c9); box-shadow: inset 0 .15em .4em rgba(0, 0, 0, .18); }
.fp-halle::before { content: ''; grid-column: 1 / -1; height: .45em; border-radius: .2em; background: repeating-linear-gradient(45deg, #f2c200 0 .7em, #2a2a2a .7em 1.4em); }
.fp-platz { display: flex; flex-direction: column; gap: .2em; padding: .5em .65em .6em; border-radius: .4em; background: #f4f6f7;
  border-left: 3px solid #f2c200; border-right: 3px solid #f2c200; box-shadow: 0 .1em .25em rgba(0, 0, 0, .15); }
.fp-platz.frei { display: grid; place-items: center; min-height: 11em; background: rgba(255, 255, 255, .22); box-shadow: none; border: 3px dashed rgba(214, 170, 0, .85); }
.fp-platz.frei span { font: 700 2.6em/1 var(--zier); color: rgba(40, 60, 80, .3); }
.fp-funk { align-self: flex-start; margin: 0; padding: .1em .55em; border-radius: .25em; background: #fff; border: 2px solid #1b2b3a; color: #1b2b3a;
  font: 700 .8em/1.3 ui-monospace, 'DejaVu Sans Mono', monospace; letter-spacing: .04em; }
/* das Bild füllt seinen Kasten (gleich hoch, egal wie hoch der Wagen gemalt ist) und steht unten */
.fp-bild { position: relative; height: 5.4em; }
.fp-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 .25em .15em rgba(0, 0, 0, .3)); }
.fp-emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3em; }
.fp-platz h4 { margin: .1em 0 0; font: 700 .95em/1.2 var(--zier); }
.fp-status { margin: 0; font-size: .8em; font-weight: 700; }
.fp-platz.bereit .fp-status { color: #1d6b3c; }
.fp-platz.kaputt .fp-status { color: #b0281b; }
.fp-platz.unterwegs .fp-status { color: #8a5a00; }
.fp-zustand small { font-size: .75em; color: #50606e; }
.fp-zustand .balken { display: block; width: 100%; }
.fp-werte { margin: 0; font-size: .75em; color: #50606e; }
.fp-zettel { margin: .75em 0 0; padding: .5em .75em; background: #fffbe6; border: 1px solid #e3d48a; border-radius: .2em; transform: rotate(-.4deg);
  font-size: .85em; box-shadow: 0 .1em .25em rgba(0, 0, 0, .12); }

/* ── Wertung und Pokalregal ──────────────────────────────────────────── */
.wt-kopf { margin: 0 0 .6em; font-size: .88em; color: #6b5a44; }
.wt-tabellen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.wt-tabelle h3, .wt-regal h3 { margin: 0 0 .3em; font: 700 1.02em/1.2 var(--zier); }
.wt-tabelle table { width: 100%; border-collapse: collapse; font-size: .85em; background: #fffdf7; border-radius: .4em; overflow: clip; box-shadow: 0 .1em .25em rgba(60, 40, 10, .12); }
.wt-tabelle th { padding: .3em .5em; text-align: left; background: #3b2a17; color: #f5ead6; font-size: .8em; }
.wt-tabelle td { padding: .3em .5em; border-bottom: 1px solid #efe5cf; vertical-align: middle; }
.wt-tabelle td small { display: block; color: #7a6a55; font-size: .85em; }
.wt-platz span { display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #e9dfc9; font-weight: 700; }
.wt-tabelle tr.p1 .wt-platz span { background: linear-gradient(#ffe27a, #e0a800); }
.wt-tabelle tr.p2 .wt-platz span { background: linear-gradient(#f1f4f6, #aab4bd); }
.wt-tabelle tr.p3 .wt-platz span { background: linear-gradient(#f5cfaa, #c27a3e); }
.wt-tabelle tr.du td { background: #fff1c4; }
.wt-tabelle tr.du b { color: #7a4b00; }
.wt-punkte { font-weight: 700; text-align: right; }
.wt-regal { margin-top: 1em; }
.wt-brett { display: flex; flex-wrap: wrap; gap: .7em; padding: .5em .7em .9em; border-radius: .3em;
  background: linear-gradient(#f6efe2 calc(100% - .65em), #8a5a2b calc(100% - .65em)); box-shadow: inset 0 -.15em 0 #5e3b19; }
.wt-pokal { margin: 0; width: 9em; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wt-pokal > span { font-size: 2.4em; line-height: 1.1; filter: drop-shadow(0 .1em .1em rgba(0, 0, 0, .3)); }
.wt-pokal figcaption { display: flex; flex-direction: column; font-size: .78em; line-height: 1.25; }
.wt-pokal small { color: #7a6a55; }
.wt-leer { margin: .2em 0; color: #7a6a55; font-weight: 700; }
/* Frage 9 (Audit 07.10.): wer die übrigen Pokale gewonnen hat — als Liste unter dem Regal */
.wt-andere { margin-top: .6em; font-size: .82em; color: #5c4d38; }
.wt-andere h4 { margin: 0 0 .2em; font-size: 1em; }
.wt-andere ul { margin: 0; padding-left: 1.2em; }
.wt-andere li { margin: .1em 0; }

/* schmal (Handy) */
@container (max-width: 640px) {
  .wt-tabellen { grid-template-columns: minmax(0, 1fr); }
  .lt-weg { min-width: 4em; }
  .lt-tafel th:nth-child(3) { font-size: 0; }
}