/* app.css — tool-eigenes Layout der Viewer. Bewusst fast leer: Optik kommt
   aus tokens.css + ui-kit.css (zentral, per Sync). Hier NUR Layout-Masse und
   Screens dieses Tools — keine neuen Farben/Hex-Werte (D-034), und nie eine
   Kit-Regel ueberschreiben (Kit-README, Regel 5: Abweichung bekommt eine
   eigene Klasse — oder sie gehoert ins Kit). */

/* Gleicher Reset wie in ALLEN Tools — ohne border-box rechnet das UI-Kit
   Polster + Rahmen auf min-height DRAUF (Felder/Buttons wuerden zu hoch). */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Body-Grundstyling: das Kit liefert Variablen + Komponenten, den dunklen
   Suite-Grund und die Schrift setzt jedes Tool selbst auf seiner Seite. */
body.app-page {
    background: var(--flaeche);
    color: var(--text);
    font-family: var(--schriftart-ui, system-ui, sans-serif);
    font-size: var(--schrift-sm, 13px);
    font-weight: var(--gewicht-normal, 400);
    line-height: 1.5;
}

/* DIE BREITE STEHT IM KIT (`.seite` in kopfleiste.css: 1140, Polster 32/24/80).
   Bis zum 09.09.2026 stand hier ein eigener Container mit 1440 px — das war
   die Zahl von vorgestern und haette jedes neue Werkzeug schief neben die
   Geschwister gestellt. Wer hier eine Breite setzt, weicht bewusst ab und
   schreibt den Grund daneben. */

/* ══ DER VIEWER (V3) — Handy zuerst ═══════════════════════════════════════
   Entwurf: ui-kit/entwuerfe/viewer-handy.html. Die Wert-Blöcke und das Bild
   wie im Reiter Video des Dashboards: klare Kanten, 2 px Fuge. */
.v-main { padding-bottom: var(--abstand-24); }

.v-titel { font-size: var(--schrift-2xs); letter-spacing: var(--laufweite); text-transform: uppercase;
    color: var(--text-leise); margin: var(--abstand-20) 0 var(--abstand-8); }
.v-suche { width: 100%; margin-bottom: var(--abstand-12); }

/* Die laufende Fahrt */
.v-live { margin-top: var(--abstand-12); }
.v-live + .v-live { margin-top: var(--abstand-24); }
.v-kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--abstand-12); }
.v-name { font-size: var(--schrift-grund); font-weight: var(--gewicht-halbfett); }
.v-unter { font-size: var(--schrift-sm); color: var(--text-gedaempft); margin: 2px 0 var(--abstand-12); }
.v-uhr, .v-laeuft { display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--schriftart-mono); font-size: 12px; }
.v-laeuft { color: var(--fehler); }
.v-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--fehler);
    animation: v-pulsieren 1.6s ease-in-out infinite; }
@keyframes v-pulsieren { 50% { opacity: 0.35; } }

/* Bild: 5:4 (PAL), klare Kanten. Schwarz ohne Token, mit Absicht — wie im
   Dashboard: der Rand jedes Videoplayers, kein Gestaltungsfarbe. */
.v-bild { position: relative; aspect-ratio: 5 / 4; background: #000; overflow: hidden; }
.v-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Das Testbild: EBU-Farbbalken, solange es kein Server-Livebild gibt */
.v-testbild { background: linear-gradient(90deg, #fff 0 12.5%, #c4b400 0 25%, #00b4c4 0 37.5%,
    #00a000 0 50%, #c81ec8 0 62.5%, #c81400 0 75%, #0014c8 0 87.5%, #000 0); }
.v-ecke { position: absolute; left: 8px; top: 8px; background: rgba(0, 0, 0, 0.6); color: #fff;
    font-size: 11px; padding: 3px 7px; display: flex; align-items: center; gap: 6px;
    font-family: var(--schriftart-mono); letter-spacing: 0.04em; }
.v-ecke .v-punkt { width: 7px; height: 7px; animation: none; }
.v-ohne-video { display: grid; place-items: center; padding: var(--abstand-24); text-align: center;
    color: var(--text-gedaempft); font-size: var(--schrift-sm); background: var(--vertieft); }
.v-teile { display: flex; gap: var(--abstand-6); margin-top: var(--abstand-8); }
.v-teile .btn.an { border-color: var(--akzent); }

/* Wert-Blöcke: drei je Reihe, klare Kanten, 2 px Fuge */
.v-werte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin-top: 2px; }
.v-wert { background: var(--vertieft); padding: 9px 10px 8px; min-width: 0; }
.v-wert-kopf { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: var(--laufweite);
    text-transform: uppercase; color: var(--text-gedaempft); white-space: nowrap; overflow: hidden; margin-bottom: 4px; }
.v-wert-punkt { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.v-wert-zahl { display: flex; align-items: baseline; gap: 4px; font-family: var(--schriftart-mono);
    font-size: 1.15rem; letter-spacing: 0.01em; }
.v-wert-einheit { font-size: 9px; color: var(--text-gedaempft); white-space: nowrap; }

/* Die Liste: Bauvorhaben als Zwischenüberschrift, die ganze Zeile ist EIN Ziel */
.v-gruppe { margin-bottom: var(--abstand-14); }
.v-gruppe-kopf { font-size: var(--schrift-sm); font-weight: var(--gewicht-halbfett); margin: 0 0 6px; }
.v-gruppe-kopf span { color: var(--text-leise); font-weight: var(--gewicht-normal); }
.v-zeile { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
    background: var(--vertieft); padding: 11px 12px; margin-bottom: 2px; color: inherit; text-decoration: none;
    min-height: var(--ziel-touch, 44px); }
.v-zeile-oben { font-family: var(--schriftart-mono); font-size: 13px; }
.v-zeile-unten { font-size: 12px; color: var(--text-gedaempft); grid-column: 1; }
.v-zeile-rechts { grid-row: 1 / span 2; grid-column: 2; display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--text-gedaempft); }
.v-pfeil { width: 8px; height: 13px; color: var(--text-leise); }
.v-aeltere { width: 100%; margin-top: var(--abstand-8); }

/* Die Aufnahme-Seite */
.v-zurueck { display: inline-flex; align-items: center; gap: 6px; padding: var(--abstand-8) 0;
    color: var(--akzent); text-decoration: none; font-size: var(--schrift-sm); }
.v-zurueck svg { width: 8px; height: 13px; }
/* Die Eckdaten wie die Infobox des Dashboards: Kit-Zeilen, Kapitälchen, Mono */
.v-fakten { background: var(--vertieft); margin-top: var(--abstand-12); padding: 4px 12px; }
.v-fakten .pk-row { font-size: var(--schrift-2xs); padding: 8px 0; }
.v-fakten .pk-label { color: var(--text-leise); letter-spacing: var(--laufweite); text-transform: uppercase; }
.v-fakten .pk-value { font-family: var(--schriftart-mono); font-weight: var(--gewicht-normal);
    font-variant-numeric: tabular-nums; font-size: 13px; }
.v-bericht { width: 100%; margin-top: var(--abstand-12); }