/* css/liga.css · Liga-Detail ohne Zettel (R10), gebaut nach dem Figma-Screen „Liga-Detail" (83:130),
 * am 02.09.2026 über den Draht gemessen. Lage ab der linken oberen Ecke des Screens, Einheit --u
 * wie in start.css (ein Pixel bei 393).
 *
 * Kopfrahmen bei y 0. Wäscheleine (Entscheidung 54): Kordel 393 × 3 bei y 190; rote Klammer
 * 19,15 × 70,05 bei −0,3 / 174,38 um 40 Grad gegen den Uhrzeigersinn, hölzerne Klammer 16 × 80 bei
 * 379,44 / 156,36 um 30 Grad im Uhrzeigersinn, beide um ihre linke obere Ecke gedreht und über
 * den Rand hinaus (abgeschnitten, Klärung DESIGN.md Abschnitt 1). Pergament 345 × 520 bei 24 / 204.
 * `pergament-hell.png` liefert als einheitlicher 9-Slice-Rahmen die vollständige transparente
 * Kontur an allen Kanten und Ecken; längere Seitenstücke werden ohne harte Naht gerundet wiederholt.
 * Kein Radius und kein Schatten am Pergament (Stilregel 6, gerissene Kante).
 *
 * Tabelle 313 breit bei 40 / 220, Zeilenhöhe 48, Spalten 30 · 100 · 48 · 36 · 49 · 50
 * (Entscheidung 52), Kopfzeile plus neun Zeilen. Trennlinien 1 px Espresso 70 % als untere Kontur
 * innen (Stilregel 6, Entscheidung 59), die neunte Zeile ohne. ⚠️ In Figma steht die Kontur auf
 * CENTER, ein halber Pixel, Tabeas Entscheidung steht aus (Startprompt, kleine offene Entscheidung 1).
 * Spaltenköpfe als Symbole 46 × 46 aus dem Archiv, Tinte #2A160F, das Podium 80 × 80 mit
 * Überstand nach oben (Nachtrag 01.09.). Text Indie Flower 24 (Bestandsaufnahme), Zeilenhöhe 35
 * wie Figmas Auto-Zeilenhöhe. Alle Namen und Zahlen Platzhalter wie in Figma (Festregel 2).
 * Styling-Datei im Sinne von CLAUDE.md: Claude ändert sie nie ungefragt.
 */
.liga {
  --liga-papier-hoehe: 520;
  --liga-sektion-hoehe: 852;
  --liga-tab-hoehe: max(44px, calc(44 * var(--u)));
  --liga-inhalt-top: calc(220 * var(--u) + var(--liga-tab-hoehe) + 16 * var(--u));
  position: relative;
  height: calc(var(--liga-sektion-hoehe) * var(--u) + env(safe-area-inset-bottom, 0px));
}
.liga [hidden] { display: none !important; }
.liga > .kopf { position: absolute; left: 0; top: 0; width: 100%; }
.liga img.abs { position: absolute; display: block; object-fit: cover; }
.liga .kordel { left: 0; top: calc(190 * var(--u)); width: 100%; height: calc(3 * var(--u)); }
.liga .klammer { transform-origin: 0 0; }
.liga .klammer.rot  { left: calc(-0.3 * var(--u)); top: calc(174.38 * var(--u)); width: calc(19.15 * var(--u)); height: calc(70.05 * var(--u)); transform: rotate(-40deg); }
.liga .klammer.holz { left: calc(379.44 * var(--u)); top: calc(156.36 * var(--u)); width: calc(16 * var(--u)); height: calc(80 * var(--u)); transform: rotate(30deg); }
.liga-papier {
  position: absolute; display: block; box-sizing: border-box;
  left: calc(24 * var(--u)); top: calc(204 * var(--u));
  width: calc(345 * var(--u)); height: calc(var(--liga-papier-hoehe) * var(--u));
  border: calc(32 * var(--u)) solid transparent;
  border-image: url('../assets/pergament-hell.png') 96 fill / calc(32 * var(--u)) / 0 stretch round;
}
.liga-papier > img { display: none; }

.liga-ansichten {
  position: absolute; z-index: 3; left: calc(40 * var(--u)); top: calc(220 * var(--u));
  width: calc(313 * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(6 * var(--u));
}
.liga-ansichten button { height: var(--liga-tab-hoehe); min-height: var(--liga-tab-hoehe); }
.liga-ansichten button,
.liga-spieltag button,
.liga-person-filter select,
.liga-nochmal {
  min-height: 44px; border: calc(2 * var(--u)) solid #2a1d12; border-radius: calc(18 * var(--u));
  background: #f3e8c8; color: #2a1d12; font: calc(20 * var(--u))/1 "Indie Flower", sans-serif;
  cursor: pointer;
}
.liga-ansichten button[aria-pressed="true"] { background: #2a1d12; border-color: #f0b429; color: #f0b429; }
.liga-ansichten button:not([aria-pressed="true"]),
.liga-spieltag button { background: #f5e4b8; }
.liga-ansichten button:focus-visible,
.liga-spieltag button:focus-visible,
.liga-person-filter select:focus-visible,
.liga-nochmal:focus-visible,
.rangliste tbody tr:focus-visible { outline: 3px solid #c62b1e; outline-offset: 2px; }
.liga-spiele {
  position: absolute; z-index: 2; left: calc(40 * var(--u)); top: var(--liga-inhalt-top);
  width: calc(313 * var(--u)); color: #2a1d12;
}
.liga-spieltag { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: calc(8 * var(--u)); }
.liga-spieltag button { width: 44px; min-width: 44px; padding: 0; border-color: #f0b429; font-size: calc(30 * var(--u)); }
.liga-spieltag button:disabled { opacity: .38; cursor: default; }
.liga-spieltag h1 { text-align: center; white-space: nowrap; font: calc(24 * var(--u))/44px "Rubik Dirt", sans-serif; }
.liga-person-filter { display: block; margin-top: calc(8 * var(--u)); }
.liga-person-filter select { width: 100%; padding: 0 calc(16 * var(--u)); text-align: center; background: #f0b429; color: #2a1d12; border-color: #2a1d12; }
.liga-status {
  position: absolute; z-index: 5; left: calc(40 * var(--u)); top: var(--liga-inhalt-top); width: calc(313 * var(--u));
  padding: calc(8 * var(--u)); border-radius: calc(18 * var(--u)); background: #f3e8c8;
  text-align: center; color: #2a1d12; font: calc(18 * var(--u))/1.25 "Indie Flower", sans-serif;
}
.liga-status[data-art="bereit"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.liga-nochmal { display: block; margin: calc(8 * var(--u)) auto 0; padding: 0 calc(14 * var(--u)); }
.liga-ergebnisse {
  box-sizing: border-box; margin-top: calc(8 * var(--u)); padding-inline: calc(8 * var(--u));
}
.liga-ergebnis {
  display: grid; grid-template-columns: minmax(0, 1fr) calc(66 * var(--u)) minmax(0, 1fr);
  align-items: center; height: calc(48 * var(--u)); font: calc(24 * var(--u))/1 "Indie Flower", sans-serif;
}
.liga-ergebnis:not(:last-child) { border-bottom: calc(1 * var(--u)) solid rgba(42, 29, 18, .7); }
.liga-ergebnis .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liga-ergebnis .name:last-child { text-align: right; }
.liga-ergebnis .wert { text-align: center; white-space: nowrap; }
.liga-ergebnisse-leer { min-height: calc(48 * var(--u)); display: grid; place-items: center; text-align: center; font: calc(20 * var(--u))/1.2 "Indie Flower", sans-serif; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.rangliste {
  position: absolute; left: calc(40 * var(--u)); top: calc(276 * var(--u)); width: calc(313 * var(--u));
  border-collapse: collapse; table-layout: fixed;
  font: calc(24 * var(--u)) / calc(35 * var(--u)) "Indie Flower", sans-serif; color: #2a1d12;
}
.rangliste col.platz { width: calc(42 * var(--u)); }
.rangliste col.name { width: calc(88 * var(--u)); }
.rangliste col.prozent { width: calc(48 * var(--u)); }
.rangliste col.spieltag { width: calc(36 * var(--u)); }
.rangliste col.diff { width: calc(49 * var(--u)); }
.rangliste col.punkte { width: calc(50 * var(--u)); }
.rangliste th, .rangliste td { height: calc(48 * var(--u)); padding: 0; box-sizing: border-box; vertical-align: middle; white-space: nowrap; font-weight: normal; }
.rangliste thead th, .rangliste tbody tr:not(:last-child) td { border-bottom: calc(1 * var(--u)) solid rgba(42, 29, 18, .7); }
/* Ausrichtung je Spalte, an den Figma-Textkästen abgelesen: Platz, Name und Spieltag beginnen links
   nach dem Innenabstand, Prozent, Differenz und Punkte enden rechts davor (Stilregel 14). */
.rangliste td.platz { text-align: left; padding-left: calc(15 * var(--u)); }
.rangliste td.name { text-align: left; overflow: hidden; }
.rangliste td.prozent { text-align: right; padding-right: calc(4 * var(--u)); }
.rangliste td.spieltag { text-align: left; padding-left: calc(6 * var(--u)); }
.rangliste td.diff { text-align: right; padding-right: calc(4 * var(--u)); }
.rangliste td.punkte { text-align: right; padding-right: calc(4 * var(--u)); }
/* Kopfzeile: Symbole in ihrer Zelle, Lage wie am Draht gemessen (Nachtrag 01.09.) */
.rangliste th { position: relative; }
.rangliste th img { position: absolute; display: block; width: calc(46 * var(--u)); height: calc(46 * var(--u)); object-fit: cover; }
.rangliste th.platz img { left: calc(7 * var(--u)); top: calc(-16 * var(--u)); width: calc(80 * var(--u)); height: calc(80 * var(--u)); }
.rangliste th.kalender img { left: calc(13 * var(--u)); top: calc(1 * var(--u)); }
.rangliste th.diff img { left: calc(7 * var(--u)); top: calc(1 * var(--u)); }
.rangliste th.punkte img { left: calc(10 * var(--u)); top: calc(1 * var(--u)); }

/* Die A1-Navigation liegt ueber der Bestandstabelle; der vorhandene Zettel folgt ihr nur in der Tabellenansicht. */
.liga[data-ansicht="tabelle"] .zettel { top: calc(435.19 * var(--u)); }
.app .liga[data-ansicht="spiele"] .zettel,
.app .liga[data-ansicht="spiele"] .marker { display: none; visibility: hidden; pointer-events: none; }