/* ============================================================================
   training.css - Zusatz zur Trainingsseite (web/training.php).

   Laedt NACH bbc08.css und verein.css. Hier steht nur die Platzaufteilung:
   das Grossfeld von oben mit den Segmenten A-D, als Inline-SVG im Markup,
   damit die Farben aus den Tokens kommen. Lage wie auf dem alten
   Platzbelegungsplan des Vereins (Foto vom 01.10.2026): A oben links,
   C oben rechts, B unten links, D unten rechts. Keine eigene
   Umschaltgrenze: die Grafik waechst mit ihrer Spalte in .verein-spalten.
   ========================================================================= */

/* Rundung der Kaestchen (.panel, .card: --r-lg). Gruen in beiden Themen
   wie das Mitgliedsband; die Segmente wechseln sich ab wie ein
   Schachbrett, damit zwei benachbarte nie gleich aussehen.
   Breite fliessend mit der Spalte, hoechstens 644px: so breit wie die
   linke Spalte bei voller Seitenbreite (1300px und mehr). Einspaltig
   (641-900px) waere sie sonst groesser als in der breiten Ansicht;
   dort steht sie mittig in ihrer Spalte (Auftraggeber 01.10.2026). */
.training-platz {
  --platz-rasen: var(--accent-down);
  --platz-segment: var(--accent-500);
  --platz-segment-hell: color-mix(in srgb, var(--accent-500) 82%, var(--accent-fg));
  --platz-naht: color-mix(in srgb, var(--accent-down) 50%, #000);
  display: block; width: 100%; max-width: 644px; height: auto;
  margin-inline: auto;
  border-radius: var(--r-lg); overflow: hidden;
}
.training-platz__rasen { fill: var(--platz-rasen); }
.training-platz__segment { fill: var(--platz-segment); }
.training-platz__segment--hell { fill: var(--platz-segment-hell); }
.training-platz__streifen { fill: var(--accent-fg); fill-opacity: .035; }

/* Die Naht waechst mit der Grafik (ein Meter breit). Die Platzlinien
   stehen in Bildschirmpixeln: bei 320px und bei 1500px gleich kraeftig. */
.training-platz__naht { fill: none; stroke: var(--platz-naht); stroke-width: 1; }
.training-platz__linien { fill: none; stroke: var(--accent-fg); stroke-opacity: .78; }
.training-platz__linien > * { stroke-width: 2px; vector-effect: non-scaling-stroke; }
.training-platz__punkte { fill: var(--accent-fg); fill-opacity: .78; }

/* Buchstaben in der Displayschrift der Ueberschriften. Groesse in
   Metern des Feldes - sie waechst mit der Grafik. */
.training-platz__buchstaben { font-family: var(--p-font-display); font-stretch: 82%;
                              font-weight: 700; font-size: 16px;
                              fill: var(--accent-fg); text-anchor: middle; }

/* Zweispaltig (ab 901px) bekommt die Grafik zwei Drittel der Zeile statt
   1,4 : 1 - so springt sie beim Wechsel von ein- auf zweispaltig weniger
   (900/901: 644 -> 517 statt 452px). Die Bildspalte endet bei 644px, dem
   Deckel der Grafik; den Rest bekommt die Liste. Ab 1300px steht alles
   wie in .verein-spalten (644 + 460px). Der Abstand ist der von
   .verein-spalten, hier benannt, weil er in die Rechnung eingeht.
   Auftraggeber 01.10.2026: "Vorallem dynamisch runterskalieren!!!!" */
@media (min-width: 901px) {
  #platz .verein-spalten {
    --platz-luecke: clamp(var(--s8), 4vw, var(--s11));
    column-gap: var(--platz-luecke);
    grid-template-columns: min(644px, calc((100% - var(--platz-luecke)) * 2 / 3)) minmax(0, 1fr);
  }
}