/* Die Tafel. Gleiche Bildsprache wie die Stationen, eigene Datei, weil die
   Seite ohne Sitzung und ohne Spielstand auskommt. */
html, body { margin: 0; padding: 0; background: #0b0b0c; }
a { color: #ff8c2f; text-decoration: none; }
a:hover { color: #ffa958; }
@keyframes pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }

.tafel-1 { min-height: 100vh; color: #d6d3cd; font-family: 'IBM Plex Mono', monospace;
           background: radial-gradient(120% 85% at 50% -10%, #1f1f22 0%, #131315 42%, #0b0b0c 100%);
           display: flex; justify-content: center; padding: 44px 20px 60px; box-sizing: border-box; }
.tafel-2 { width: 100%; max-width: 760px; display: flex; flex-direction: column; gap: 28px; }

.tafel-kopf { display: flex; flex-direction: column; gap: 14px; }
.tafel-augenbraue { font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: #8a857c; }
.tafel-titel { margin: 0; font-family: 'Special Elite', 'IBM Plex Mono', monospace;
               font-size: clamp(34px, 7vw, 58px); line-height: 1.05; color: #f2efe9; }
.tafel-intro { margin: 0; max-width: 58ch; font-size: 15px; line-height: 1.75; color: #b0aca4; }

/* Die Warnung ist die halbe Station: wer die Adresse weitergibt, verliert
   Punkte. Deshalb nicht klein und grau, sondern als Kasten. */
.tafel-warnung { border: 1px solid #5a2b25; border-left-width: 6px; background: #1d100e;
                 padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; }
.tafel-warnung-kopf { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #ff7a6b; }
.tafel-warnung-text { font-size: 14px; line-height: 1.7; color: #e6ddd9; max-width: 62ch; }

.tafel-liste { border: 1px solid #26262a; background: #141416; }
.tafel-zeile { display: grid; grid-template-columns: 58px 1fr 92px 96px 82px; gap: 12px;
               padding: 16px 18px; border-bottom: 1px solid #1c1c1f; align-items: center; }
.tafel-zeile:last-child { border-bottom: none; }
.tafel-zeile-kopf { font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
                    color: #8f8a81; padding: 12px 18px; border-bottom: 1px solid #26262a; }
.rechts { text-align: right; }

.tafel-platz { font-family: 'Special Elite', monospace; font-size: 22px; color: #55524c;
               font-variant-numeric: tabular-nums; }
.tafel-erster .tafel-platz { color: #ff8c2f; }
.tafel-fertig .tafel-name  { color: #ff8c2f; }
.tafel-team { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tafel-name { font-size: 15px; color: #f2efe9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tafel-status { font-size: 11px; color: #8f8a81; }
.tafel-stationen { font-family: 'Special Elite', monospace; font-size: 19px; color: #f2efe9;
                   font-variant-numeric: tabular-nums; }
.tafel-von { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #55524c; }
.tafel-punkte { font-family: 'Special Elite', monospace; font-size: 24px; color: #ff8c2f;
                font-variant-numeric: tabular-nums; }

.tafel-leer { border: 1px solid #26262a; background: #141416; padding: 26px 20px;
              font-size: 14px; line-height: 1.7; color: #8f8a81; }
.tafel-fuss { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
              border-top: 1px solid #26262a; padding-top: 14px;
              font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #55524c; }

/* Zeit der letzten Spur - dezent, einstellig monospaced fuer saubere Kante. */
.tafel-zeit { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: #8f8a81;
              font-variant-numeric: tabular-nums; }

/* --- Handy: Platz links, Punkte rechts absolut verankert, Inhalt dazwischen
 * im Blockfluss - so kann nichts horizontal ueberlaufen. Die Kopfzeile
 * entfaellt, der Status erklaert die Station. */
@media (max-width: 560px) {
  .tafel-1 { padding: 24px 10px 40px; }
  .tafel-zeile-kopf { display: none; }
  .tafel-zeile {
    display: block; position: relative; padding: 14px 58px 14px 46px;
  }
  .tafel-platz  { position: absolute; left: 12px; top: 14px; font-size: 18px; }
  .tafel-punkte { position: absolute; right: 12px; top: 12px; }
  .tafel-team   { display: block; }
  .tafel-name   { white-space: normal; }
  /* Stationen und Zeit als kleine Zeile unter dem Namen, linksbuendig. */
  .tafel-stationen, .tafel-zeit { display: inline-block; text-align: left; margin-top: 6px; }
  .tafel-stationen { font-size: 15px; margin-right: 14px; }
}