@charset "utf-8";

/* EINSTELLUNGEN — alle Maße gelten bei 1920 × 1080 px.
   Kleinere/größere Monitorfenster werden automatisch angepasst.
   Einfrierzeit (Sekunden) und Überblendung: am Anfang von zeitmessung_anzeige.js.
   Kopf-Farben sind feste Vorgaben; Sponsortexte kommen aus SBN.
   Ergebnisliste: zeitmessung_1920x1080_ergebnisse.css. */
:root {
  --anzeige-version: "20261027-schmaler-rand";
  --monitor-basis-breite: 1920;
  --monitor-basis-hoehe: 1080;
  --monitor-einheit: 1px; /* wird für den vMix-Browser in px berechnet */
  --anzeige-breite: 100vw;
  --anzeige-hoehe: 100vh;
  --schriftart: "Bahnschrift", Arial, sans-serif;
  --schriftgewicht: 600;
  --zahlen-schriftart: "BebasNeue-Regular", "Arial Narrow", sans-serif;
  --zahlengewicht: 500;
  --textfarbe: #ffffff;
  --gelb: #ffe36e;
  --abstammung-farbe: #BED7C5;
  --zucht-team-farbe: #BED7C5; /* Graublau für Zuchtgebiet und Team */
  --sponsor-farbe: #ffba53;
  --hintergrund: #080e17;
  --panel-oben: #223044;
  --panel-unten: #101a29;
  /* Gemeinsame Farben der bestehenden Ergebnisliste. */
  --akzent-warm: var(--sponsor-farbe);
  --akzent-kalt: var(--abstammung-farbe);
  --kopffarbe: var(--sponsor-farbe);

  --kopf-hoehe-live: calc(280 * var(--monitor-einheit));
  --kopf-schrift-live: calc(112 * var(--monitor-einheit));
  --kopf-linie-live: calc(8 * var(--monitor-einheit));
  --kopf-farbe-unten: #F2B705;
  --kopf-farbe-oben: #FFE46B;
  --kopf-schriftart: Arial, sans-serif;
  --kopf-schriftfarbe: #000000;
  --seitenrand-live: var(--kopf-linie-live);
  --rand-vertikal-live: var(--kopf-linie-live);
  --abstand-live: calc(6 * var(--monitor-einheit));
  --rahmen-live: calc(5 * var(--monitor-einheit));
  --innenrand-live: calc(8 * var(--monitor-einheit));
  --radius-live: calc(6 * var(--monitor-einheit));

  --namenzeile-hoehe: calc(116 * var(--monitor-einheit));
  --namen-schrift: calc(118 * var(--monitor-einheit));
  --zusatz-breite: calc(510 * var(--monitor-einheit)); /* Zuchtgebiet / Team + Flagge */
  --kopfnummer-abstand: calc(18 * var(--monitor-einheit));
  --flagge-breite: calc(180 * var(--monitor-einheit));
  --flagge-hoehe: var(--namenzeile-hoehe); /* volle Zeilenhöhe */
  --flagge-radius: calc(10 * var(--monitor-einheit));
  --team-flagge-abstand: calc(20 * var(--monitor-einheit));
  --abstammung-hoehe: calc(108 * var(--monitor-einheit));
  --abstammung-schrift: calc(112 * var(--monitor-einheit));
  --abstammung-trenner-farbe: #ffffff;
  --alter-einheit: "j.";
  --alter-trenner: " | ";

  --werte-hoehe: calc(198 * var(--monitor-einheit));
  --werte-spalten: minmax(0, 28fr) minmax(0, 36fr) minmax(0, 36fr);
  --werte-schrift-max: calc(268 * var(--monitor-einheit));
  --beschreibung-schrift: calc(32 * var(--monitor-einheit));
  --beschreibung-hoehe: calc(38 * var(--monitor-einheit));
  --hinweis-hoehe: calc(30 * var(--monitor-einheit));
  --hinweis-schrift: calc(28 * var(--monitor-einheit));
  --label-start: "REITER / GESAMT";
  --label-platz: "PLATZ";
  --label-fehler: "FEHLER";
  --label-zeit: "ZEIT";
  --label-countdown: "Countdown";

  --tabelle-spalten: minmax(0, 8fr) minmax(0, 56fr) minmax(0, 36fr);
  --tabelle-schrift-max: calc(360 * var(--monitor-einheit));
  --tabelle-rand-vertikal: calc(4 * var(--monitor-einheit));
  --tabelle-rand-horizontal: calc(12 * var(--monitor-einheit));
}

@font-face {
  font-family: "BebasNeue-Regular";
  src: url("../fonts/BebasNeue-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* Schrift für Fehler und Zeit in der unteren Tabelle.
   Die Datei ND_CBL.TTF muss im Ordner fonts/ liegen. */
@font-face {
  font-family: "ND_CBL";
  src: url("../fonts/ND_CBL.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: var(--hintergrund); }
body { width: var(--anzeige-breite); height: var(--anzeige-hoehe); overflow: hidden; }
#id_container, #id_DisplayAus, #id_DisplayAn {
  width: 100%; height: 100%; color: var(--textfarbe);
  font-family: var(--schriftart); font-weight: var(--schriftgewicht);
  background: var(--hintergrund);
}
#id_DisplayAn { overflow: hidden; }
/* Die ursprünglichen SBN-Felder liefern Daten an die sichtbare Grafik. */
.zeit-daten { display: none !important; }

#id_Werbebereich {
  position: relative;
  display: grid; grid-template-rows: 1fr 1fr;
  height: var(--kopf-hoehe-live);
  padding: calc(2 * var(--monitor-einheit)); gap: calc(2 * var(--monitor-einheit));
  border-bottom: var(--kopf-linie-live) solid #fff;
  background: linear-gradient(to top, var(--kopf-farbe-unten), var(--kopf-farbe-oben));
}
.zeit-sponsor {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 0; overflow: hidden;
  color: var(--kopf-schriftfarbe); font-size: var(--kopf-schrift-live);
  font-family: var(--kopf-schriftart); font-weight: 400;
}
#id_linie1 { display: none !important; }

#id_BereichUnterWerbung {
  position: relative; width: 100%;
  height: calc(var(--anzeige-hoehe) - var(--kopf-hoehe-live));
  overflow: hidden;
}
.zeit-szene {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid;
  grid-template-rows: var(--namenzeile-hoehe) var(--namenzeile-hoehe)
    var(--abstammung-hoehe) var(--werte-hoehe) minmax(0, 1fr);
  gap: var(--abstand-live);
  padding: var(--rand-vertikal-live) var(--seitenrand-live);
}
.zeit-szene.zeit-ohne-abstammung {
  grid-template-rows: var(--namenzeile-hoehe) var(--namenzeile-hoehe)
    var(--werte-hoehe) minmax(0, 1fr);
}
.zeit-ohne-abstammung .zeit-abstammung { display: none; }
.zeit-szene > *, .zeit-feld > *, .zeit-zeile > * { min-width: 0; min-height: 0; }
.zeit-zeile { display: grid; grid-template-columns: minmax(0, 1fr) var(--zusatz-breite); gap: var(--abstand-live); }
.zeit-feld {
  display: flex; align-items: center; overflow: hidden;
  padding: var(--innenrand-live);
  border: 0; border-radius: var(--radius-live);
  background: linear-gradient(to top, var(--panel-unten), var(--panel-oben));
}
.zeit-identitaet { font-size: var(--namen-schrift); }
.zeit-pferd { gap: var(--kopfnummer-abstand); }
.zeit-kopfnummer { color: var(--gelb); flex-shrink: 0; }
.zeit-team { gap: var(--team-flagge-abstand); }
.zeit-teamname { flex: 1; }
[data-feld="zuchtgebiet"], .zeit-teamname { color: var(--zucht-team-farbe); }
.zeit-flagge {
  display: block; flex-shrink: 0;
  /* Automatische Breite: kein Leerraum zwischen Flaggenbild und Rahmen. */
  width: auto; height: var(--flagge-hoehe);
  max-height: none; object-fit: contain;
  /* Innenrand nur für die Flagge ausgleichen. Die Textfelder behalten ihre
     Maße und Schriftgröße; die Flagge reicht oben, unten und rechts zum Rand. */
  margin: calc(-1 * var(--innenrand-live)) calc(-1 * var(--innenrand-live)) calc(-1 * var(--innenrand-live)) 0;
  border: 1px solid #ffffff;
  border-radius: var(--flagge-radius);
}
.zeit-flagge[hidden] { display: none; }
.zeit-abstammung { color: var(--abstammung-farbe); font-size: var(--abstammung-schrift); }
.zeit-trenner { color: var(--abstammung-trenner-farbe); }
.zeit-werte { display: grid; grid-template-columns: var(--werte-spalten); gap: var(--abstand-live); }
.zeit-karte {
  display: grid; align-items: stretch;
  grid-template-rows: var(--beschreibung-hoehe) minmax(0, 1fr);
  border: var(--rahmen-live) solid var(--gelb);
}
.zeit-karte.zeit-mit-hinweis { grid-template-rows: var(--beschreibung-hoehe) minmax(0, 1fr) var(--hinweis-hoehe); }
.zeit-karte.zeit-countdown { grid-template-rows: var(--beschreibung-hoehe) minmax(0, 1fr); }
.zeit-countdown .zeit-wert { grid-row: 2; } /* Mitte wie bei den Zahlen in Feld 1/3 */
.zeit-beschreibung { display: flex; align-items: center; font-size: var(--beschreibung-schrift); }
.zeit-beschreibung[hidden] { display: none; }
.zeit-wert { display: flex; align-items: center; justify-content: center; font-size: var(--werte-schrift-max); }
.zeit-hinweis { display: flex; align-items: center; justify-content: center; font-size: var(--hinweis-schrift); }
.zeit-hinweis[hidden] { display: none; }
.zeit-zahlen { font-family: var(--zahlen-schriftart); font-weight: var(--zahlengewicht); }
.zeit-gelb { color: var(--gelb); }
.zeit-weiss { color: #ffffff; }
/* Fehler und Zeit in Feld 2/3 in allen Designs gelb; Feld 1 bleibt weiß. */
.zeit-wert[data-feld="fehler"], .zeit-wert[data-feld="zeit"] { color: #FFE36E; }
/* Beschriftung und Zahlen getrennt, damit Note/End/Countdown ihre
   Kleinbuchstaben behalten und 70 % der gemeinsamen Zahlengröße erhalten. */
.zeit-mischwert { display: flex; align-items: center; flex-shrink: 0; gap: .14em; }
.zeit-wert-text { font-family: var(--schriftart); font-weight: var(--schriftgewicht);
  font-size: .7em; text-transform: none; }
.zeit-wert-end { color: #ffffff; }
.zeit-wert-ziffern { font: inherit; }

.zeit-tabelle { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); min-height: 0; gap: var(--abstand-live); }
.zeit-tabelle.zeit-drei-zeilen { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.zeit-tabellenzeile {
  display: grid; grid-template-columns: var(--tabelle-spalten);
  min-height: 0; overflow: hidden;
  border: 0; border-bottom: 1px solid var(--abstammung-farbe);
  background: linear-gradient(to top, var(--panel-unten), var(--panel-oben));
}
.zeit-zelle {
  display: flex; align-items: center; overflow: hidden; min-width: 0; min-height: 0; height: 100%;
  padding: var(--tabelle-rand-vertikal) var(--tabelle-rand-horizontal);
  font-size: var(--tabelle-schrift-max);
}
.zeit-platz { justify-content: center; font-family: var(--schriftart); font-weight: var(--schriftgewicht); }
.zeit-ergebnis {
  justify-content: flex-end;
  font-family: "ND_CBL", Verdana, Arial, sans-serif;
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
}
.zeit-name .zeit-schrift { min-width: 0; max-width: 100%; flex-shrink: 1; overflow: hidden; } /* lange Namen abschneiden */
.zeit-tabellenflagge {
  display: block; flex: 0 0 auto; width: auto; height: 100%;
  margin-right: calc(12 * var(--monitor-einheit)); object-fit: contain;
  border: 1px solid #ffffff; border-radius: var(--flagge-radius, 10px);
}
.zeit-tabellenflagge[hidden] { display: none; }
.zeit-tabellenzeile.zeit-aktuell { color: var(--gelb); }
.zeit-tabellenzeile.zeit-stechen .zeit-platz,
.zeit-tabellenzeile.zeit-stechen .zeit-ergebnis { display: none; }
.zeit-tabellenzeile.zeit-stechen .zeit-name { grid-column: 1 / -1; justify-content: center; }
.zeit-tabellenzeile[hidden] { display: none; }

/* Sichtbare Zeichen statt der oft sehr hohen Schriftdatei-Zeilenbox einpassen.
   So werden auch im älteren vMix-Browser keine Zahlen abgeschnitten. */
.zeit-schrift { display: block; flex-shrink: 0; position: relative; overflow: visible; }
.zeit-glyphen { display: block; position: absolute; left: 0; top: 0; white-space: nowrap; line-height: normal; }
.zeit-basislinie { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

/* Vollbild-Fade: deckt auch Sponsoren, Zahlen, Tabelle und Hintergrund ab. */
#id_zeitfade { position: fixed; inset: 0; z-index: 2147483647; background: #000;
  opacity: 0; pointer-events: none; will-change: opacity; }
#id_zeitfade[hidden] { display: none; }