/* PROJECT LEGEND V0.54.0 - Der Spielfilm-Bildschirm (v0566).

   STUFE NEU der stil-wache (v0[6-9]xx bzw. v05(3[3-9]|[4-9][0-9])-): keine
   Wichtig-Markierung, keine Hexfarbe, kein rgb()/rgba(255,255,255,), kein
   var()-Ersatzwert, Schriftgroesse/Eckenradius/Sperrung/Schatten NUR aus den
   --pl42-Token, Bruchpunkte nur 380/640/980/981/1440/1780/1781/2200 px und
   Hoehe 800 px, keine nackte Elementregel. UNGESCHICHTET (kein @layer,
   schicht-wache), eingehaengt VOR ui-v0420/system.css in BEIDEN index.html.

   WARUM DIESES BLATT EIGENE GRUNDREGELN MITBRINGT: der Vorhang haengt am
   body, NICHT in #pl420Root. Die Grundregeln der Huelle sind dort
   ID-qualifiziert (shell.css:29 Knopf-Reset, :31 Fokusring; system.css:672
   tabellarische Ziffern auf time) und treffen ihn nicht. Die Bausteine
   .pl42-btn (shell.css:200), .pl42-btn--primary (:209) und .pl42-segment
   (:229) sind dagegen unqualifiziert und gelten auch hier.

   HOEHENKETTE (Rezept v0482-livesim-layout.css:30-56): feste Zeilen
   min-content, EINE beugsame Zeile minmax(0,1fr), Zwischenkaesten
   min-height:0. So bleibt der Film in jeder Fenstergroesse ohne Scrollen,
   nur die Leinwand wird kleiner. Ihre Pixelgroesse setzt bemessen() im
   Modul (Bitmap = CSS x DPR), nicht dieses Blatt.

   GERECHNET, NICHT GEMESSEN: Kopf 61 px / Leiste 123 px bei 1280x900 und
   53 / 115 bei 1366x768 (Entwurf 4.1, Annahme --pl42-ui-scale 1, DPR 1).
   Das Messprotokoll (Entwurf 10, Schritt 3 und 16) gilt vor der Abnahme. */

/* ------------------------------------------------------ Grund des Vorhangs */
.pl566-vorhang{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  grid-template-rows:min-content minmax(0,1fr) min-content;
  background:linear-gradient(180deg,var(--pl42-bg),var(--pl42-void));
  color:var(--pl42-ink);
  font-family:var(--pl42-font);
  font-size:var(--pl42-body);
  line-height:1.45;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.pl566-vorhang,
.pl566-vorhang *{
  box-sizing:border-box;
  min-width:0;
}
/* Knopf-Reset: shell.css:29 gilt nur in #pl420Root/#pl420NativeModal.
   Der Selektor beginnt mit ':' und ist damit keine nackte Elementregel. */
:where(.pl566-vorhang) button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  margin:0;
  cursor:pointer;
}
:where(.pl566-vorhang) button:disabled{cursor:not-allowed}
.pl566-vorhang :focus-visible{
  outline:2px solid var(--pl42-gold);
  outline-offset:2px;
  border-radius:var(--pl42-r-xs);
}
/* Springende Ziffern in Uhr und Spielstand vermeiden (Muster system.css:672). */
.pl566-vorhang time{
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}
.pl566-titel{margin:0}
/* Nur fuer Hilfsmittel: der Hinweis, dass die Bahn keine Tore traegt. */
.pl566-sr{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
body.pl566-offen{overflow:hidden}

/* -------------------------------------------------------------------- Kopf */
/* EINE Zeile, drei Spalten. Die 44 px hohen Knoepfe bestimmen die Hoehe. */
.pl566-kopf{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:var(--pl42-s4);
  padding:var(--pl42-s2) var(--pl42-s4);
  border-bottom:1px solid var(--pl42-line);
  background:var(--pl42-raise);
}
.pl566-marke{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.pl566-marke-zeile{
  display:flex;
  align-items:baseline;
  gap:var(--pl42-s3);
  min-width:0;
}
.pl566-kicker,
.pl566-etikett,
.pl566-einstieg-kicker{
  font-size:var(--pl42-label);
  font-weight:800;
  letter-spacing:var(--pl42-track-label);
  text-transform:uppercase;
  color:var(--pl42-gold);
  white-space:nowrap;
}
.pl566-titel{
  font-size:var(--pl42-h3);
  font-weight:800;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl566-quelle,
.pl566-tasten,
.pl566-hinweis,
.pl566-erklaerung,
.pl566-einstieg-text{
  font-size:var(--pl42-small);
  color:var(--pl42-ink-3);
}
.pl566-quelle{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl566-tafel{
  display:flex;
  align-items:center;
  gap:var(--pl42-s3);
  white-space:nowrap;
}
.pl566-team{
  font-family:var(--pl42-display-schrift);
  font-size:var(--pl42-h3);
  text-transform:uppercase;
  letter-spacing:var(--pl42-track-label);
  max-width:16ch;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pl566-stand{
  font-family:var(--pl42-display-schrift);
  font-size:var(--pl42-h1);
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--pl42-ink);
}
/* Ohne Ereignisliste ist der Strich kein Spielstand - er wird zurueckgenommen. */
.pl566-vorhang:not([data-pl566-stand="1"]) .pl566-stand{color:var(--pl42-ink-4)}
.pl566-uhr{
  font-family:var(--pl42-display-schrift);
  font-size:var(--pl42-h1);
  line-height:1;
  font-weight:900;
  color:var(--pl42-gold-bright);
  border-bottom:2px solid var(--pl42-gold);
  padding:0 var(--pl42-s2);
  margin-left:var(--pl42-s3);
}
.pl566-phase{
  font-size:var(--pl42-label);
  letter-spacing:var(--pl42-track-label);
  text-transform:uppercase;
  color:var(--pl42-ink-3);
}
.pl566-kopf-aktionen{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:var(--pl42-s2);
  flex-wrap:nowrap;
}
.pl566-knopf span{white-space:nowrap}
.pl566-datei{display:none}

/* ------------------------------------------------------------------ Buehne */
.pl566-buehne{
  position:relative;
  display:grid;
  grid-template-rows:minmax(0,1fr);
  grid-template-columns:minmax(0,1fr);
  min-height:0;
  padding:var(--pl42-s3) var(--pl42-s4);
}
.pl566-halter{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  min-height:0;
  border:1px solid var(--pl42-line);
  border-radius:var(--pl42-r-lg);
  background:var(--pl42-panel);
  overflow:hidden;
}
/* Breite und Hoehe setzt bemessen() als Inline-Wert (Feldverhaeltnis aus der
   Bahn), damit die Letterbox von v0562 praktisch verschwindet. */
.pl566-leinwand{
  display:block;
  max-width:100%;
  max-height:100%;
  border-radius:var(--pl42-r-md);
}
.pl566-status{
  position:absolute;
  inset:auto 0 var(--pl42-s5) 0;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:var(--pl42-s1);
  width:max-content;
  max-width:90%;
  margin:0 auto;
  padding:var(--pl42-s3) var(--pl42-s5);
  border:1px solid var(--pl42-gold);
  border-radius:var(--pl42-r-md);
  background:var(--pl42-panel-2);
  box-shadow:var(--pl42-shadow-2);
  text-align:center;
}
.pl566-status b{
  font-size:var(--pl42-small);
  letter-spacing:var(--pl42-track-label);
  color:var(--pl42-gold-bright);
}
/* Waehrend eines 3D-Ausschnitts ruht die eigene Leinwand sichtbar. */
.pl566-vorhang[data-pl566-zustand="uebergabe"] .pl566-status{display:flex}
.pl566-vorhang[data-pl566-zustand="uebergabe"] .pl566-leinwand{
  opacity:.35;
  transition:opacity var(--pl42-mo-flaeche) var(--pl42-ease);
}
.pl566-hinweis{
  position:absolute;
  left:var(--pl42-s5);
  right:var(--pl42-s5);
  top:var(--pl42-s4);
  text-align:center;
  pointer-events:none;
}
.pl566-hinweis:empty,
.pl566-erklaerung:empty{display:none}

/* ------------------------------------------------------------------ Leiste */
.pl566-leiste{
  display:flex;
  flex-direction:column;
  gap:var(--pl42-s2);
  padding:var(--pl42-s2) var(--pl42-s4) var(--pl42-s3);
  border-top:1px solid var(--pl42-line);
  background:var(--pl42-raise);
}
.pl566-zeile{
  display:flex;
  align-items:center;
  gap:var(--pl42-s3);
  flex-wrap:wrap;
}
.pl566-knopf{min-height:var(--pl42-touch)}
.pl566-ico{display:inline-flex;align-items:center}
.pl566-zeit{
  position:relative;
  flex:1 1 320px;
  min-width:200px;
}
.pl566-erklaerung{
  flex:0 1 auto;
  max-width:34ch;
  line-height:1.2;
}
/* Das Haus-Polster der Segmentleiste ist 4 px (shell.css:230); 2 px halten
   die zweite Zeile bei 50 px, ohne die Trefferflaeche zu verkleinern. */
.pl566-segment{padding:2px}
.pl566-leiste .pl42-segment button{min-height:var(--pl42-touch)}
.pl566-tempo{
  display:flex;
  align-items:center;
  gap:var(--pl42-s2);
}
.pl566-knopf--spuren[aria-checked="true"]{
  border-color:var(--pl42-gold);
  background:var(--pl42-gold-wash-2);
  color:var(--pl42-gold-bright);
}
.pl566-amball{
  display:inline-flex;
  align-items:center;
  gap:var(--pl42-s2);
  margin-left:auto;
  white-space:nowrap;
}
.pl566-amball b{
  font-variant-numeric:tabular-nums;
  max-width:16ch;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Der Tastenhinweis passt erst ab 1781 px in die zweite Zeile (Entwurf 4.1). */
.pl566-tasten{display:none}

/* -------------------------------------------------------------- Zeitleiste */
/* Es gibt keinen pl42-Schieber-Baustein; ui-v0420/audio.css ist BESTAND mit
   Literalen und darf nicht kopiert werden. Hier alles aus Token. */
.pl566-schieber{
  --pl566-anteil:0%;
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:var(--pl42-touch);
  margin:0;
  background:transparent;
  cursor:pointer;
}
.pl566-schieber::-webkit-slider-runnable-track{
  height:6px;
  border-radius:var(--pl42-r-pill);
  background:linear-gradient(90deg,var(--pl42-gold) var(--pl566-anteil),var(--pl42-line-soft) var(--pl566-anteil));
}
.pl566-schieber::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin-top:-6px;
  border:2px solid var(--pl42-void);
  border-radius:50%;
  background:var(--pl42-gold-bright);
}
.pl566-schieber::-moz-range-track{
  height:6px;
  border-radius:var(--pl42-r-pill);
  background:var(--pl42-line-soft);
}
.pl566-schieber::-moz-range-progress{
  height:6px;
  border-radius:var(--pl42-r-pill);
  background:var(--pl42-gold);
}
.pl566-schieber::-moz-range-thumb{
  width:18px;
  height:18px;
  border:2px solid var(--pl42-void);
  border-radius:50%;
  background:var(--pl42-gold-bright);
}
.pl566-schieber:disabled{
  opacity:.42;
  cursor:not-allowed;
}
/* Marken liegen auf der Bahn des Daumens; 9 px Rand = halbe Daumenbreite. */
.pl566-marken{
  position:absolute;
  left:9px;
  right:9px;
  top:50%;
  height:0;
  pointer-events:none;
}
.pl566-zeitmarke{
  position:absolute;
  top:-8px;
  width:2px;
  height:16px;
  transform:translateX(-50%);
  background:var(--pl42-ink-4);
}
.pl566-zeitmarke--hz{background:var(--pl42-ink-3)}
.pl566-zeitmarke--ereignis{
  width:4px;
  border-radius:var(--pl42-r-xs);
  background:var(--pl42-cyan);
}

/* ------------------------------------------- Einstieg in der Uebersicht */
/* Variante A: EINE 44-px-Zeile im einzigen Panel-Slot (overview|context),
   ohne Panelpolster - ein .pl42-panel haette ueber 150 px gekostet und die
   Uebersicht zum Scrollen gebracht. */
.pl566-einstieg{
  display:flex;
  align-items:center;
  gap:var(--pl42-s4);
  min-height:var(--pl42-touch);
  flex-wrap:nowrap;
}
.pl566-einstieg-text{
  flex:1 1 320px;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ------------------------------------------------------------ Bruchpunkte */
/* Erst ab 1781 px innen bleibt neben Tempo, Spuren und "Am Ball" Platz. */
@media (min-width:1781px){
  .pl566-tasten{display:inline}
}
/* Darunter tragen die Kopfknoepfe und der Hoehepunkt-Knopf nur ihr Symbol;
   die Beschriftung steht in title und aria-label, die Trefferflaeche bleibt
   44 px hoch und ueber 24 px breit. */
@media (max-width:1440px){
  .pl566-kopf-aktionen .pl566-knopf span,
  .pl566-knopf--hoehepunkt span{display:none}
}
@media (max-height:800px){
  .pl566-kopf{padding:var(--pl42-s1) var(--pl42-s4)}
  .pl566-quelle{display:none}
  .pl566-buehne{padding:var(--pl42-s2)}
  .pl566-leiste{padding:var(--pl42-s1) var(--pl42-s4) var(--pl42-s2)}
}
@media (max-width:980px){
  .pl566-kopf{
    grid-template-columns:minmax(0,1fr);
    text-align:center;
  }
  .pl566-tafel{
    justify-content:center;
    flex-wrap:wrap;
  }
  .pl566-kopf-aktionen{justify-content:center}
  .pl566-zeile--tempo{
    flex-direction:column;
    align-items:stretch;
  }
  .pl566-amball{margin-left:0}
  .pl566-erklaerung{
    flex-basis:100%;
    max-width:none;
  }
  .pl566-einstieg{flex-wrap:wrap}
  .pl566-einstieg-text{flex-basis:100%}
}
@media (max-width:640px){
  .pl566-knopf span{display:none}
  .pl566-knopf--lauf span,
  .pl566-knopf--spuren span{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .pl566-vorhang[data-pl566-zustand="uebergabe"] .pl566-leinwand{transition:none}
}