@charset "utf-8";

/* Mannschaftsrangierung: Platz, Mannschaftsname und Ergebnis. */
#id_gridergebnisliste.mannschaftsergebnisse > tbody > tr[data-role="row"] {
  grid-template-columns: var(--spalte-platz) minmax(0,1fr) var(--spalte-ergebnis);
}
#id_gridergebnisliste.mannschaftsergebnisse > tbody > tr[data-role="row"] > td:nth-child(2) { display: none !important; }
#id_gridergebnisliste.mannschaftsergebnisse > tbody > tr[data-role="row"] > td:nth-child(3) { grid-column: 2; }
#id_gridergebnisliste.mannschaftsergebnisse > tbody > tr[data-role="row"] > td:nth-child(6) { grid-column: 3; }

/* ==============================================================
   EINSTELLUNGEN – hier Groessen, Farben, Einflug und Blaettern aendern.
   Responsive fuer Monitore, Referenz 1920 x 1080 px.
   Die Kopfzeile inklusive Linie ist bei Full HD 280 px hoch.
   Einflug: Zeile 1 dauert 1400 ms, jede weitere 150 ms laenger.
   Startzeiten der Zeilen: 0 / 500 / 1000 / 1500 / 2000 ms.
   Tasten: Rechts / Leertaste / Bild ab = weiter; Links / Bild auf = zurueck.
   Pos1 / Ende = erste / letzte Seite. A = Automatik ein / aus.
   Nach A innerhalb von 2 Sekunden Platzgrenze eingeben (1–99, 0 = alle).
   S = zwischen Starterliste und Ergebnissen wechseln.
   ============================================================== */
:root {
  --ergebnis-ueberschrift: "Ergebnisse / Results";
  --starter-ueberschrift: "Starterliste / Startingorder";
  --starter-kopf-schrift: calc(112 * var(--monitor-einheit));
  /* Gemeinsame Schriften/Farben: am Anfang von zeitmessung_1920x1080.css */
  --kopf-schrift: calc(96 * var(--monitor-einheit));
  --zeilen-schrift: calc(112 * var(--monitor-einheit));
  --ergebnis-schrift: var(--zeilen-schrift);
  --status-schrift: calc(56 * var(--monitor-einheit));
  --zeilenhoehen-faktor: 1;
  --flaggen-hoehenfaktor: 1; /* 1 = sichtbare Hoehe der Platzziffern */

  /* Kopfzeile und Aufteilung */
  --kopfzeilen-hoehe: calc(280 * var(--monitor-einheit));
  --kopf-linie-staerke: calc(6 * var(--monitor-einheit));
  --kopf-linie-farbe: #ffffff;
  --kopf-innenabstand: calc(20 * var(--monitor-einheit));
  --zeilen-anzahl: 5;
  --seitenrand: calc(40 * var(--monitor-einheit));
  --unterer-rand: calc(12 * var(--monitor-einheit));
  --abstand-kopf-zeilen: calc(0 * var(--monitor-einheit));
  --zeilen-abstand: calc(0 * var(--monitor-einheit));
  --zellen-innenabstand: calc(14 * var(--monitor-einheit));
  --spalte-platz: 7%;
  --spalte-flagge: 11%;
  --spalte-ergebnis: 35%; /* Platz fuer die feste Zahlenschrift und den Stern */
  --ergebnis-buchstabenabstand: -0.025em;

  /* Farben: Zeilenflaechen verlaufen von unten nach oben heller. */
  --verlauf-start: var(--akzent-warm);
  --verlauf-ende: var(--akzent-kalt);
  --zeilen-linie-staerke: calc(3 * var(--monitor-einheit));
  --zeilen-flaeche: rgba(17, 27, 40, 0.65);
  --zeilen-flaeche-oben: rgba(34, 47, 63, 0.82);
  --zeilen-flaeche-alternierend: rgba(17, 27, 40, 0.9);
  --zeilen-flaeche-oben-alternierend: rgba(38, 52, 69, 0.9);

  /* vMix: Zeitgeber bewegen die Zellinhalte; unabhängig von Browser-Animationen.
     Aktiv: 1 = einfliegen, 0 = sofort anzeigen. Takt: 20 ms = bis zu 50 Schritte/s. */
  --einflug-aktiv: 1;
  --einflug-takt: 20ms;
  --einflug-dauer: 1400ms;
  --einflug-dauer-zuwachs: 150ms;
  --einflug-startabstand: 500ms;
  --einflug-startposition: calc(var(--anzeige-breite) * 1.1);
  --einflug-bewegung: cubic-bezier(0.12, 0.82, 0.18, 1);

  /* Blaettern: 0 = per Taste starten; 1 = automatisch beim Oeffnen */
  --seiten-automatik: 0;
  --seiten-intervall: 10s;
  --platz-eingabezeit: 2s;
  --platzgrenze-standard: 0; /* 0 = alle; Grenze gilt während der Automatik */
  --seiteninfo-anzeigen: 1;
  --seiteninfo-schrift: calc(24 * var(--monitor-einheit));
  --seiteninfo-farbe: #95a5b8;
  --seiteninfo-abstand: calc(12 * var(--monitor-einheit));

}
/* ENDE DER EINSTELLUNGEN */

#id_container,
#id_DisplayAus,
#id_DisplayAn {
  width: var(--anzeige-breite);
  height: var(--anzeige-hoehe);
  background: var(--hintergrund);
  color: var(--textfarbe);
}

#id_container,
#id_ergebnisliste,
#id_gridergebnisliste {
  font-family: var(--schriftart);
  font-weight: var(--schriftgewicht);
  font-variation-settings: "wght" var(--schriftgewicht);
}

body.ergebnis-vollbild { overflow: hidden; }
body.ergebnis-vollbild #id_Werbebereich { display: none; }

#id_ergebnisliste {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: var(--anzeige-hoehe);
  padding: 0 var(--seitenrand) var(--unterer-rand);
  overflow: hidden;
  background: radial-gradient(ellipse at 8% 0, rgba(255, 186, 83, 0.065), transparent 55%);
}

#id_ergebnislistecaption {
  display: flex;
  align-items: center;
  flex: 0 0 var(--kopfzeilen-hoehe);
  box-sizing: border-box;
  height: var(--kopfzeilen-hoehe);
  margin: 0 0 var(--abstand-kopf-zeilen);
  padding: var(--kopf-innenabstand) 0;
  border: 0;
  border-bottom: var(--kopf-linie-staerke) solid var(--kopf-linie-farbe);
  border-radius: 0;
  color: var(--kopffarbe);
  font-family: var(--schriftart);
  font-size: var(--kopf-schrift);
  font-weight: var(--schriftgewicht);
  line-height: 1.04;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

#id_ergebnisliste.starterliste #id_ergebnislistecaption {
  margin-left: calc(-1 * var(--seitenrand));
  margin-right: calc(-1 * var(--seitenrand));
  padding: var(--kopf-innenabstand) var(--seitenrand);
  justify-content: center;
  border-bottom-width: var(--kopf-linie-live);
  background: linear-gradient(to top, var(--kopf-farbe-unten), var(--kopf-farbe-oben));
  color: var(--kopf-schriftfarbe);
  font-family: var(--kopf-schriftart);
  font-size: var(--starter-kopf-schrift);
  text-align: center;
}

#id_ergebnisseiteninfo {
  position: absolute;
  top: var(--seiteninfo-abstand);
  right: var(--seitenrand);
  z-index: 2;
  color: var(--seiteninfo-farbe);
  font-family: var(--schriftart);
  font-size: var(--seiteninfo-schrift);
  font-weight: var(--schriftgewicht);
  line-height: 1.2;
  pointer-events: none;
}
#id_ergebnisseiteninfo[hidden] { display: none; }

#id_rahmentabelle {
  position: relative;
  flex: 1 1 0;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  height: auto !important;
  max-height: none;
  overflow: hidden !important;
  scrollbar-width: none;
  border: 0;
  border-radius: 0;
}

#id_gridergebnisliste {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--zeilen-schrift);
  line-height: var(--zeilenhoehen-faktor);
  font-variant-numeric: tabular-nums;
}

#id_gridergebnisliste > thead { display: none; }
#id_gridergebnisliste > tbody {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: repeat(var(--zeilen-anzahl), minmax(0, 1fr));
  row-gap: var(--zeilen-abstand);
}

#id_gridergebnisliste > tbody > tr[data-role="row"] {
  position: relative;
  left: 0;
  display: grid;
  grid-template-columns: var(--spalte-platz) var(--spalte-flagge) minmax(0, 1fr) var(--spalte-ergebnis);
  align-items: center;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  font-size: inherit;
  z-index: 0;
}

/* Der Verlauf wird als eigene Fläche bewegt und muss nicht bei jedem Schritt
   neu gemalt werden. Text und Flaggen bewegen sich über normale div-Elemente. */
#id_gridergebnisliste > tbody > tr[data-role="row"]::before {
  content: "";
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  z-index: -1; pointer-events: none;
  transform: translate3d(var(--einflug-x, 0px), 0, 0);
  background-image:
    linear-gradient(90deg, transparent, var(--verlauf-start) 18%, var(--verlauf-ende) 72%, transparent),
    linear-gradient(to top, var(--zeilen-flaeche), var(--zeilen-flaeche-oben));
  background-size: 100% var(--zeilen-linie-staerke), 100% 100%;
  background-position: left bottom, left top;
  background-repeat: no-repeat;
}

#id_gridergebnisliste > tbody > tr[data-role="row"]:nth-child(even)::before {
  background-image:
    linear-gradient(90deg, transparent, var(--verlauf-start) 18%, var(--verlauf-ende) 72%, transparent),
    linear-gradient(to top, var(--zeilen-flaeche-alternierend), var(--zeilen-flaeche-oben-alternierend));
}

#id_gridergebnisliste > tbody > tr[data-role="row"] > td {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  padding: 0 var(--zellen-innenabstand);
  border: 0;
  background: transparent;
  font-family: var(--schriftart);
  font-weight: var(--schriftgewicht);
  align-self: center;
}

#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(1) {
  grid-column: 1;
  padding: 0;
  font-size: var(--zeilen-schrift);
}
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(2) { grid-column: 2; }
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(3) {
  grid-column: 3;
  font-size: var(--zeilen-schrift);
}
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(3) > div {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis;
}
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(6) {
  grid-column: 4;
  font-size: var(--ergebnis-schrift);
  text-align: right;
  white-space: nowrap;
}
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(6) > div {
  white-space: nowrap;
  letter-spacing: var(--ergebnis-buchstabenabstand);
}
/* Starterliste: Startreihenfolge, Flagge, Reiter, Kopfnummer und Pferd.
   Gleiche Zeilenhöhe und Bewegung wie bei den Ergebnissen. */
#id_gridergebnisliste.starterliste > tbody > tr[data-role="row"] > td:nth-child(5) {
  display: block !important;
  grid-column: 4;
  font-size: var(--zeilen-schrift);
}
#id_gridergebnisliste.starterliste > tbody > tr[data-role="row"] > td:nth-child(5) > div {
  overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis;
}
#id_gridergebnisliste.starterliste > tbody > tr[data-role="row"] > td:nth-child(6) { display: none !important; }
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(6).ergebnis-status {
  font-size: var(--status-schrift);
  font-family: var(--schriftart);
}
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(1),
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(6):not(.ergebnis-status) {
  font-family: var(--zahlen-schriftart);
  font-weight: var(--zahlengewicht);
  font-variation-settings: normal;
  font-variant-numeric: tabular-nums lining-nums;
}
#id_gridergebnisliste > tbody > tr[data-role="row"] > td > div { color: inherit !important; }

/* Die Datenstruktur bleibt erhalten; sichtbar sind Platz, Flagge, Name, Ergebnis. */
#id_gridergebnisliste > thead > tr > th[data-field="Code"],
#id_gridergebnisliste > thead > tr > th[data-field="Pferd"],
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(4),
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(5),
#id_gridergebnisliste > tbody > tr[data-role="row"] > td:nth-child(n+7),
#id_gridergebnisliste > tbody > tr[aria-hidden="true"] {
  display: none !important;
}

.cls_ergebnislisteflagge,
.cls_ergebnislisteflaggebeima,
.cls_ergebnislisteflaggemazeile {
  margin: 0;
  border: 0;
  border-radius: 0;
  text-align: center;
}
.cls_ergebnislisteflagge img,
.cls_ergebnislisteflaggebeima img,
.cls_ergebnislisteflaggemazeile img {
  display: block;
  width: auto;
  height: var(--flaggen-hoehe, calc(var(--zeilen-schrift) * 0.72));
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
  border: 1px solid #ffffff;
  border-radius: var(--flagge-radius, 10px);
}

#id_gridergebnisliste > tbody > tr.ergebnis-einfliegen {
  will-change: opacity;
}
#id_gridergebnisliste > tbody > tr.ergebnis-einfliegen::before,
#id_gridergebnisliste > tbody > tr.ergebnis-einfliegen > td > div { will-change: transform; }