/* Anzeigeseite fuer den Grossbildschirm.
   Alle Groessen in vh/vmin, damit die Tafel jede Bildschirmgroesse fuellt. */

:root {
  --heim: #2f6fed;
  --gast: #e0402f;
  --grund: #06080d;
  --flaeche: #11151f;
  --linie: #232a3a;
  --schrift: #f4f7ff;
  --gedaempft: #8c98b4;
  --rand: 2.2vh;           /* Sicherheitsabstand gegen Overscan am Fernseher */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--grund);
  color: var(--schrift);
  font-family: system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: none;
  -webkit-user-select: none;
  user-select: none;
}

#tafel {
  height: 100%;
  padding: var(--rand);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.4vh;
}

/* --- Kopfzeile ---------------------------------------------------------- */
#kopf {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 3.4vh;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gedaempft);
  min-height: 4.4vh;
}
#titel { text-align: left; text-transform: uppercase; }
#abschnitt {
  text-align: center;
  color: var(--schrift);
  background: var(--flaeche);
  border: .2vh solid var(--linie);
  border-radius: 999px;
  padding: .5vh 2.4vh;
  font-size: 3vh;
  text-transform: uppercase;
}
#abschnitt:empty { display: none; }
#uhrzeit { text-align: right; font-weight: 500; }

/* --- Ansichten ---------------------------------------------------------- */
.ansicht { display: none; height: 100%; min-height: 0; }
body.modus-volleyball #ansicht-volleyball,
body.modus-fussball   #ansicht-fussball,
body.modus-sponsoren  #ansicht-sponsoren,
body.modus-text       #ansicht-text,
body.modus-aus        #ansicht-aus { display: grid; }

/* --- Gemeinsames Spielstand-Layout -------------------------------------- */
.teams {
  display: grid;
  /* Mittelspalte fest: sonst wandert die Spaltenbreite mit dem Inhalt
     (z.B. jede Sekunde mit der Uhr) und die Teamboxen springen. */
  grid-template-columns: 1fr 18vw 1fr;
  gap: 1.6vh;
  align-items: stretch;
  min-height: 0;
}

.team {
  position: relative;
  background: var(--flaeche);
  border: .25vh solid var(--linie);
  border-radius: 2.4vh;
  padding: 2vh 2vh 1.4vh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  justify-items: center;
  min-width: 0;
  overflow: hidden;
}
.team .farbband {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1.4vh;
  background: var(--farbe, #666);
}
.team.heim { --farbe: var(--heim); }
.team.gast { --farbe: var(--gast); }

.teamname {
  margin-top: 1.2vh;
  font-size: clamp(2.4vh, 5.2vh, 6vh);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.05;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.punkte {
  align-self: center;
  /* auch von der Breite begrenzt, damit die Ziffern nie aus der Box laufen */
  font-size: min(40vh, 22vw);
  line-height: .82;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.zusatz {
  display: flex;
  gap: 2.6vh;
  align-items: center;
  font-size: 3vh;
  color: var(--gedaempft);
  font-weight: 600;
}
.zusatz b { color: var(--schrift); font-size: 4vh; }
.tolabel { text-transform: uppercase; letter-spacing: .08em; font-size: 3.8vh; font-weight: 700; }

/* Timeouts gross, damit sie auch von der Tribuene gut zu sehen sind */
.timeouts { display: flex; gap: 1.8vh; align-items: center; }
.timeouts i {
  width: 5vh; height: 5vh; border-radius: 50%;
  border: .6vh solid var(--gedaempft); display: inline-block;
}
.timeouts i.voll {
  background: #ffcf4a; border-color: #ffcf4a;
  box-shadow: 0 0 2.4vh rgba(255, 207, 74, .7);
}

.aufschlag {
  margin-top: .8vh;
  font-size: 2.6vh;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #0a0d14;
  background: #ffcf4a;
  border-radius: 999px;
  padding: .4vh 2vh;
  visibility: hidden;
}
.team.serviert .aufschlag { visibility: visible; }

/* Mitte Volleyball: Satzstand */
#ansicht-volleyball { grid-template-rows: 1fr auto; gap: 1.4vh; }
.mitte {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .6vh;
}
.satzstand { font-size: min(16vh, 8vw); font-weight: 800; line-height: 1; display: flex; align-items: baseline; gap: 1vh; }
.satzstand i { font-style: normal; color: var(--gedaempft); }
.satzlabel { font-size: 3.4vh; letter-spacing: .18em; color: var(--gedaempft); text-transform: uppercase; }

#historie {
  display: flex;
  gap: 1.6vh;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 3.2vh;
  font-weight: 600;
  color: var(--gedaempft);
  min-height: 4vh;
}
#historie span {
  background: var(--flaeche);
  border: .2vh solid var(--linie);
  border-radius: 1vh;
  padding: .3vh 1.6vh;
}
#historie span.gewonnen-h { color: var(--heim); }
#historie span.gewonnen-g { color: var(--gast); }

#siegmeldung {
  position: absolute;
  inset: auto 0 12vh 0;
  text-align: center;
  font-size: 6vh;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ffcf4a;
  text-shadow: 0 0 4vh rgba(0,0,0,.9);
}
#siegmeldung:empty { display: none; }

/* Mitte Fussball: Uhr braucht mehr Platz als der Satzstand */
:where(#ansicht-fussball) .teams { grid-template-columns: 1fr 28vw 1fr; }
#ansicht-fussball .mitte { gap: 1.6vh; }
.uhr {
  font-size: min(15vh, 8vw);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  padding: 0 1vh;
  white-space: nowrap;
}
/* mit Stunden (1:23:45) wird die Uhr kleiner, statt die Spalte zu sprengen */
.uhr.lang { font-size: min(10vh, 5.5vw); }
.uhr.gestoppt { color: var(--gedaempft); }
/* gleich breite Ziffern - sonst zappelt die Uhr im Sekundentakt */
.uhr, .punkte, .satzstand, #uhrzeit, .aus-uhr {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.uhrbalken {
  width: 100%;
  height: 1.2vh;
  background: var(--linie);
  border-radius: 999px;
  overflow: hidden;
}
.uhrbalken span { display: block; height: 100%; width: 0; background: #ffcf4a; transition: width .5s linear; }

/* --- Sponsoren ---------------------------------------------------------- */
#ansicht-sponsoren { position: relative; }
.dia {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity .8s ease;
}
.dia.sichtbar { opacity: 1; }
.dia-name {
  position: absolute;
  inset: auto 0 0 0;
  text-align: center;
  font-size: 3vh;
  color: var(--gedaempft);
}

/* --- Text --------------------------------------------------------------- */
#ansicht-text { align-content: center; justify-items: center; gap: 3vh; text-align: center; padding: 0 4vh; }
.text-titel { font-size: 6vh; font-weight: 700; color: var(--gedaempft); text-transform: uppercase; letter-spacing: .08em; }
.text-titel:empty { display: none; }
.text-inhalt { font-size: 12vh; font-weight: 800; line-height: 1.1; max-width: 100%; }
body.text-klein  .text-inhalt { font-size: 6vh; }
body.text-mittel .text-inhalt { font-size: 9vh; }

/* Laufschrift */
body.laufschrift #ansicht-text { justify-items: stretch; }
body.laufschrift .text-inhalt { white-space: nowrap; overflow: hidden; }
body.laufschrift .text-zeile {
  display: inline-block;
  padding-left: 100%;
  animation: lauf 18s linear infinite;
}
@keyframes lauf { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* --- Aus ---------------------------------------------------------------- */
#ansicht-aus { align-content: center; justify-items: center; }
.aus-uhr { font-size: 16vh; font-weight: 300; color: #1b2130; letter-spacing: .02em; }

/* --- Sponsorenband ------------------------------------------------------ */
#band {
  height: 12vh;
  background: #fff;
  border-radius: 1.6vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
#band[hidden] { display: none; }
.band-inhalt {
  display: flex;
  align-items: center;
  gap: 6vh;
  padding: 0 4vh;
  animation: bandlauf 40s linear infinite;
  white-space: nowrap;
}
.band-inhalt img { height: 8.5vh; width: auto; object-fit: contain; }
@keyframes bandlauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Status / Hinweis --------------------------------------------------- */
#status {
  position: fixed;
  left: 50%; bottom: 2vh;
  transform: translateX(-50%);
  background: #b3261e;
  color: #fff;
  font-size: 2.4vh;
  font-weight: 600;
  padding: .8vh 2.4vh;
  border-radius: 999px;
  transition: opacity .3s;
}
#status.status-weg { opacity: 0; pointer-events: none; }
/* nicht ueber dem Sponsorenband liegen */
body:has(#band:not([hidden])) #status { bottom: 16vh; }

#hinweis {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(6,8,13,.92);
  transition: opacity .5s;
}
#hinweis.weg { opacity: 0; pointer-events: none; }
#hinweis .karte {
  text-align: center;
  max-width: 70vw;
  padding: 5vh;
  border: .3vh solid var(--linie);
  border-radius: 2vh;
  background: var(--flaeche);
}
#hinweis h1 { font-size: 6vh; margin-bottom: 2vh; }
#hinweis p { font-size: 3vh; color: var(--gedaempft); margin-bottom: 1.4vh; }
#hinweis .klein { font-size: 2.2vh; }

/* QR-Code zur Fernbedienung (unten rechts, solange kein Handy verbunden ist) */
#fernqr {
  position: fixed;
  left: 50%; bottom: var(--rand);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .8vh;
  padding: 1.2vh;
  background: var(--flaeche);
  border: .3vh solid var(--linie);
  border-radius: 1.6vh;
  z-index: 5;
}
#fernqr[hidden] { display: none; }
#fernqr .qr { width: 15vh; height: 15vh; background: #fff; border-radius: .8vh; padding: .5vh; }
#fernqr .qr svg { display: block; width: 100%; height: 100%; }
#fernqr .qr-text { display: flex; flex-direction: column; align-items: center; font-size: 1.7vh; color: var(--gedaempft); }
#fernqr .qr-text b { font-size: 2.2vh; color: var(--schrift); }
/* Verbindungsmeldung dann darueber */
body:has(#fernqr:not([hidden])) #status { bottom: 26vh; }
body:has(#band:not([hidden])):has(#fernqr:not([hidden])) #status { bottom: 40vh; }
/* nicht ueber dem Sponsorenband liegen */
body:has(#band:not([hidden])) #fernqr { bottom: 16vh; }

/* Hochformat (z.B. gedrehter Bildschirm): Teams untereinander */
@media (max-aspect-ratio: 3/4) {
  .teams { grid-template-columns: 1fr; grid-template-rows: 1fr auto 1fr; }
  .punkte { font-size: 22vh; }
  .satzstand { font-size: 11vh; }
}