/* Toni Dashboard (2026-11-07): Anzeige für einen Fernseher — Optik des Toni Assistenten (Onyx/Gold, Toni im Ring),
   für 1920×1080 aus der Entfernung: alles skaliert mit der Bildschirmbreite (em auf .td-root). Kein Tailwind. */
.td-root {
  --td-onyx: #1a1612; --td-onyx-soft: #2a2420; --td-onyx-tief: #221e1a; --td-ink: #faf8f3; --td-ink-soft: rgb(250 248 243 / 0.72);
  --td-ink-leise: rgb(250 248 243 / 0.5); --td-gold: #d9a92e; --td-gold-light: #ebc96f; --td-champagner: #b8935a; --td-rot: #c0644f;
  --td-rot-light: #e8a796; --td-stoerung: #8f6f45; --td-verbindet: rgb(217 169 46 / 0.45); --td-blass: rgb(237 230 218 / 0.16);
  --td-linie: rgb(237 230 218 / 0.1);
  --td-serif: "Lora", Georgia, serif; --td-mono: "DM Mono", ui-monospace, Menlo, monospace; --td-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  position: fixed; inset: 0; overflow: hidden; box-sizing: border-box;
  background: var(--td-onyx); color: var(--td-ink); font-family: var(--td-sans);
  font-size: clamp(13px, 1.04vw, 44px); line-height: 1.4;
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.td-root *, .td-root *::before, .td-root *::after { box-sizing: border-box; }
html, body { margin: 0; background: #1a1612; }
.td-root[data-maus="weg"], .td-root[data-maus="weg"] * { cursor: none !important; }

/* ---- Kopf ---- */
.td-anzeige { display: flex; flex-direction: column; height: 100%; padding: 1.6em 2em 1.8em; gap: 1.2em; }
.td-kopf { display: flex; align-items: center; gap: 1.2em; flex: none; }
.td-marke { font-family: var(--td-mono); font-size: 0.85em; letter-spacing: 0.16em; color: var(--td-champagner); white-space: nowrap; }
.td-kopf-name { font-family: var(--td-serif); font-size: 1.35em; font-weight: 500; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.td-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 1em; flex: none; }
.td-stand { font-family: var(--td-mono); font-size: 0.85em; letter-spacing: 0.08em; color: var(--td-ink-leise); }
.td-offline { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.35em 0.9em; border-radius: 9999px; background: var(--td-onyx-soft); border: 1px solid var(--td-linie); color: var(--td-ink-soft); font-size: 0.85em; }
.td-offline::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 9999px; background: var(--td-stoerung); }

/* ---- Raster der Bereiche ---- */
.td-raster { flex: 1; min-height: 0; display: grid; gap: 1.2em; grid-template-columns: repeat(var(--td-spalten, 3), minmax(0, 1fr)); grid-template-rows: repeat(var(--td-zeilen, 1), minmax(0, 1fr)); }
.td-kachel { min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: 1.3em 1.4em; border-radius: 1.1em; background: var(--td-onyx-soft); border: 1px solid var(--td-linie); overflow: hidden; }
.td-kachel-titel { margin: 0 0 0.9em; font-family: var(--td-mono); font-weight: 400; font-size: 0.8em; letter-spacing: 0.16em; color: var(--td-champagner); text-transform: uppercase; flex: none; }
.td-kachel-titel[data-wichtig="1"] { color: var(--td-gold-light); }
.td-kachel-inhalt { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.td-kachel-inhalt[data-voll="1"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(to bottom, transparent, var(--td-onyx-soft)); pointer-events: none; }
.td-leer { margin: 0; color: var(--td-ink-soft); font-size: 1.15em; }

/* ---- Lage: Toni im Ring ---- */
.td-lage { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.2em; height: 100%; }
.td-lage[data-quer="1"] { flex-direction: row; text-align: left; gap: 2em; }
.td-ring { position: relative; width: min(15em, 42vh); aspect-ratio: 1; border-radius: 9999px; flex: none; }
.td-ring::before { content: ""; position: absolute; inset: 0.55em; border-radius: 9999px; background: var(--td-onyx-soft); }
.td-ring img { position: absolute; inset: 1.15em; width: calc(100% - 2.3em); height: calc(100% - 2.3em); border-radius: 9999px; -o-object-fit: cover; object-fit: cover; border: 0.3em solid var(--td-gold); box-shadow: 0 1em 2.5em rgb(0 0 0 / 0.5); }
.td-ring[data-braucht="1"] img { border-color: var(--td-rot); }
.td-titel { margin: 0; font-family: var(--td-serif); font-weight: 500; font-size: 2.6em; line-height: 1.1; letter-spacing: -0.02em; }
.td-zeile { margin: 0.5em 0 0; font-size: 1.15em; line-height: 1.5; color: var(--td-ink-soft); max-width: 34em; }

/* ---- Karten (Wartet / Neu) ---- */
.td-karten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75em; }
.td-karte { position: relative; display: flex; flex-direction: column; gap: 0.55em; padding: 0.95em 1.1em 0.95em 1.35em; border-radius: 0.9em; background: var(--td-onyx-tief); border: 1px solid var(--td-linie); overflow: hidden; }
.td-karte::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0.35em; background: transparent; }
.td-karte[data-art="braucht"]::before { background: var(--td-rot); }
.td-karte[data-art="vorschlag"]::before { background: var(--td-gold); }
.td-karte[data-art="denkt"] { border-color: rgb(217 169 46 / 0.45); box-shadow: 0 0 0 1px rgb(217 169 46 / 0.15); }
.td-karte[data-art="denkt"]::before, .td-karte[data-art="sendet"]::before { background: var(--td-verbindet); }
.td-karte-kopf { display: flex; align-items: center; gap: 0.7em; }
.td-kanal-kreis { width: 2.1em; height: 2.1em; border-radius: 9999px; border: 2px solid var(--td-gold); display: grid; place-items: center; flex: none; color: var(--td-ink); }
.td-karte-name { flex: 1; min-width: 0; font-weight: 600; font-size: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-karte-zeit { flex: none; font-size: 0.9em; color: var(--td-ink-leise); }
.td-chips { display: flex; flex-wrap: wrap; gap: 0.45em; }
.td-chip { padding: 0.2em 0.75em; border-radius: 9999px; background: rgb(184 147 90 / 0.18); color: var(--td-ink); font-size: 0.85em; }
.td-chip[data-leise="1"] { background: transparent; border: 1px solid var(--td-linie); color: var(--td-ink-soft); }
.td-chip[data-toni="1"] { font-family: var(--td-mono); font-size: 0.7em; letter-spacing: 0.1em; background: rgb(217 169 46 / 0.2); color: var(--td-gold-light); }
.td-karte-text { margin: 0; font-size: 1em; line-height: 1.45; color: rgb(250 248 243 / 0.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.td-toni { display: flex; gap: 0.7em; align-items: flex-start; padding-top: 0.55em; border-top: 1px solid rgb(237 230 218 / 0.08); }
.td-toni img { width: 1.75em; height: 1.75em; border-radius: 9999px; -o-object-fit: cover; object-fit: cover; border: 2px solid var(--td-gold); flex: none; }
.td-karte[data-art="braucht"] .td-toni img { border-color: var(--td-rot); }
.td-satz { display: block; font-size: 0.95em; color: var(--td-gold-light); }
.td-karte[data-art="braucht"] .td-satz { color: var(--td-rot-light); }
.td-karte[data-art="geantwortet"] .td-satz, .td-karte[data-art="erledigt"] .td-satz { color: var(--td-ink-soft); }
.td-vorschlag { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.2em; font-size: 0.92em; line-height: 1.45; color: var(--td-ink-soft); font-style: italic; }
.td-punkte { display: inline-flex; gap: 0.2em; margin-left: 0.35em; vertical-align: middle; }
.td-punkte i { width: 0.3em; height: 0.3em; border-radius: 9999px; background: currentColor; animation: td-punkt 1.2s infinite ease-in-out; }
.td-punkte i:nth-child(2) { animation-delay: 0.2s; }
.td-punkte i:nth-child(3) { animation-delay: 0.4s; }
@keyframes td-punkt { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* Ankunft einer neuen Karte: von oben einblenden, kurz golden aufleuchten */
.td-karte[data-neu="1"] { animation: td-ankunft 900ms cubic-bezier(.2, .8, .2, 1), td-leuchten 2.4s ease-out; }
@keyframes td-ankunft { from { opacity: 0; transform: translateY(-1.2em) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes td-leuchten { 0% { box-shadow: 0 0 0 2px rgb(235 201 111 / 0.9), 0 0 2em rgb(217 169 46 / 0.45); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---- Kanäle ---- */
.td-kanaele { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: 1em; }
.td-kanal { display: flex; flex-direction: column; align-items: center; gap: 0.55em; text-align: center; }
.td-kanal .td-kanal-kreis { width: 4.2em; height: 4.2em; border-width: 0.2em; background: var(--td-onyx-tief); }
.td-kanal[data-ton="gut"] .td-kanal-kreis { border-color: var(--td-gold); }
.td-kanal[data-ton="braucht"] .td-kanal-kreis { border-color: var(--td-rot); }
.td-kanal[data-ton="stoerung"] .td-kanal-kreis { border-color: var(--td-stoerung); border-style: dashed; }
.td-kanal[data-ton="verbindet"] .td-kanal-kreis { border-color: var(--td-verbindet); }
.td-kanal[data-ton="aus"] .td-kanal-kreis { border-color: var(--td-blass); opacity: 0.6; }
.td-kanal-name { font-family: var(--td-mono); font-size: 0.85em; letter-spacing: 0.08em; text-transform: uppercase; }
.td-kanal-satz { font-size: 0.9em; color: var(--td-ink-soft); }
.td-kanal[data-ton="braucht"] .td-kanal-satz { color: var(--td-rot-light); }

/* ---- Zahlen ---- */
.td-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; height: 100%; align-content: center; }
.td-zahl { display: flex; flex-direction: column; gap: 0.2em; padding: 0.9em 1em; border-radius: 0.9em; background: var(--td-onyx-tief); }
.td-zahl-wert { font-family: var(--td-serif); font-size: 3.2em; line-height: 1; font-weight: 500; font-variant-numeric: tabular-nums; }
.td-zahl[data-gold="1"] .td-zahl-wert { color: var(--td-gold-light); }
.td-zahl[data-rot="1"] .td-zahl-wert { color: var(--td-rot-light); }
.td-zahl-text { font-size: 0.95em; color: var(--td-ink-soft); }

/* ---- Frühwarnungen ---- */
.td-warnungen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75em; }
.td-warnung { display: flex; gap: 0.8em; padding: 0.9em 1em; border-radius: 0.9em; background: var(--td-onyx-tief); border-left: 0.35em solid var(--td-gold); }
.td-warnung[data-stufe="rot"] { border-left-color: var(--td-rot); }
.td-warnung-titel { display: block; font-weight: 600; font-size: 1.1em; }
.td-warnung-text { display: block; color: var(--td-ink-soft); font-size: 0.95em; margin-top: 0.15em; }

/* ---- Hinweise (nicht zugeordnet, Kopplung) ---- */
.td-mitte { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2.2em; height: 100%; padding: 3em; }
.td-mitte .td-toni-bild { width: 9em; height: 9em; border-radius: 9999px; -o-object-fit: cover; object-fit: cover; border: 0.3em solid var(--td-gold); box-shadow: 0 1em 2.5em rgb(0 0 0 / 0.5); }
.td-mitte h1 { margin: 0; font-family: var(--td-serif); font-weight: 500; font-size: 2.8em; letter-spacing: -0.02em; }
.td-mitte p { margin: 0; max-width: 40em; font-size: 1.45em; line-height: 1.5; color: var(--td-ink-soft); }
.td-mitte strong { color: var(--td-ink); font-weight: 600; }
.td-code { font-family: var(--td-mono); font-size: 7.5em; line-height: 1; letter-spacing: 0.12em; padding: 0.25em 0.5em; border-radius: 0.25em; background: var(--td-onyx-soft); border: 1px solid rgb(184 147 90 / 0.35); color: var(--td-gold-light); font-variant-numeric: tabular-nums; }
.td-klein { font-size: 1.1em !important; color: var(--td-ink-leise) !important; }

@media (prefers-reduced-motion: reduce) {
  .td-karte[data-neu="1"], .td-punkte i { animation: none; }
}