/* Ergaenzung zu style.css der Vereinsseite — nur das, was die Vereinsseite
   nicht kennt: die Kabinentabellen und die Platzuebersicht. Die Farben,
   Schriften und Abstaende kommen alle von dort. */

.kp-rumpf { padding-top: clamp(1.5rem, 4vw, 3rem);
            padding-bottom: clamp(2rem, 6vw, 4rem); }

.kp-titel { font-family: var(--display); font-weight: 600;
            font-size: clamp(1.6rem, 4.5vw, 2.6rem); line-height: 1.1;
            color: var(--nacht); margin: 0 0 .25rem 0; }

.kp-stand { font-family: var(--mono); font-size: .82rem;
            color: var(--nebel); margin: 0 0 2rem 0; }

.kp-tag { margin: 0 0 2.25rem 0; }

.kp-tagtitel { font-family: var(--display); font-weight: 600;
               font-size: clamp(1.05rem, 2.4vw, 1.35rem);
               color: var(--nacht); margin: 0 0 .5rem 0;
               padding-bottom: .35rem; border-bottom: 3px solid var(--blau); }

.kp-untertitel { font-family: var(--display); font-weight: 500;
                 font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
                 color: var(--nebel); margin: 1.25rem 0 .35rem 0; }

.kp-ferien { display: inline-block; margin: 0 0 .75rem 0; padding: .2rem .6rem;
             background: var(--gelb); color: var(--tinte);
             font-size: .82rem; font-weight: 600; border-radius: 3px; }

/* Feste Spaltenbreiten, damit die Tage untereinander dieselben Spalten
   haben. Ohne sie richtet jede Tabelle sich nach ihrem laengsten Namen:
   am Samstag steht "Platz" weit rechts, am Sonntag weit links, und beim
   Hinunterscrollen springen die Spalten. Martin am 3.10.2026: "wäre schön
   wenn die tage immer die gleiche spaltenbreite haben, dass es nicht so
   wirwar aussieht." Die Mannschaft bekommt, was uebrig bleibt — sie ist
   die einzige Spalte, deren Laenge niemand kennt. */
.kp-tabelle { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Alles ausser der Mannschaft ist so schmal wie sein Inhalt: eine Uhrzeit,
   eine Platznummer, eine Kabinennummer — da ist nichts zu raten. Was
   uebrig bleibt, gehoert dem Namen, denn er ist das einzige Feld, dessen
   Laenge niemand kennt. Davor stand "1. Mannschaft – FC Steinach 1" in
   einer 120 Punkte schmalen Spalte und brach dreimal um, waehrend neben
   "16:00" die Haelfte leer blieb. */
.kp-tabelle th:first-child { width: 7.5rem; }                 /* Zeit: "09:30–12:00" */
/* Jede Spalte so breit wie ihr Titel, denn der ist laenger als das, was
   darunter steht: "KABINE SCHIRI" misst 77 Punkte, die Zahl darunter
   zwoelf. Dafuer steht jeder Titel auf einer Zeile — "Kabine" ueber der
   einen und "Schiri" ueber der naechsten Spalte liest sich falsch. */
.kp-tabelle th:nth-child(2) { width: 22rem; }                 /* Mannschaft */
.kp-tabelle--spiel th:nth-child(3) { width: 3.5rem; }         /* Platz */
.kp-tabelle--spiel th:nth-child(4) { width: 3.5rem; }         /* Kabine */
.kp-tabelle--spiel th:nth-child(5) { width: 5.1rem; }         /* Kabine Gast */
.kp-tabelle--spiel th:nth-child(6) { width: 5.6rem; }         /* Kabine Schiri */
.kp-tabelle--training th:nth-child(3),
.kp-tabelle--training th:nth-child(4) { width: 3.5rem; }      /* Platz, Kabine */
/* Die letzte Spalte traegt nichts und bekommt, was uebrig bleibt.
   Vorher nahm die Mannschaft den ganzen Rest: auf einem breiten Schirm
   stand "Junioren C" links und "2a / 3" einen halben Meter weiter rechts,
   und das Auge musste ueber leeres Feld. Jetzt stehen die Spalten
   beieinander und das Leere liegt aussen — und Platz und Kabine stehen
   bei den Spielen und bei den Trainings an derselben Stelle. */
.kp-fuell { width: auto; }
/* Ein langer Vereinsname bricht um, statt die Spalte zu sprengen. */
.kp-tabelle td { overflow-wrap: anywhere; }
.kp-tabelle th { text-align: left; font-family: var(--display); font-weight: 500;
                 font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
                 color: var(--nebel); padding: .3rem .6rem .3rem 0;
                 border-bottom: 1px solid var(--linie); white-space: nowrap; }
.kp-tabelle td { padding: .55rem .6rem .55rem 0;
                 border-bottom: 1px solid var(--linie); vertical-align: top; }
.kp-tabelle tbody tr:last-child td { border-bottom: 0; }

/* .85rem statt .9: "09:30–12:00" muss in die Spalte passen, ohne dass
   die Spalte dem Namen daneben den Platz wegnimmt. */
.kp-zeit { font-family: var(--mono); font-size: .85rem; white-space: nowrap; }
.kp-gegen { color: var(--nebel); font-weight: 400; }
.kp-hinweis { margin-top: .15rem; color: #b00020; font-size: .85rem; font-weight: 600; }
.kp-tabelle--training td { color: var(--nebel); }
.kp-tabelle--training td[data-spalte="Mannschaft"] { color: var(--tinte); }

.kp-leer { color: var(--nebel); }

.kp-plaetze { margin: 2.5rem 0 0 0; }
/* Die Skizze ist seit dem 2.10.2026 gezeichnet (ein <svg>, aus
   skizze.php) und kein Foto mehr. Die Regel gilt fuer beide: faellt
   die Zeichnung einmal weg, steht wieder ein Bild da. */
.kp-plaetze img,
.kp-plaetze svg { display: block; width: 100%; max-width: 620px; height: auto;
                  margin: .75rem 0 .5rem 0; border: 1px solid var(--linie);
                  border-radius: 4px; background: var(--weiss); }
.kp-bildtext { font-size: .82rem; color: var(--nebel); margin: 0; }

.kp-fuss { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--linie);
           font-size: .82rem; color: var(--nebel); }
.kp-fuss p { margin: 0; }

/* Auf dem Handy und dem schmalen Fenster wird aus jeder Zeile ein eigener
   Block: sechs Spalten sind auf 375 Punkten nicht zu lesen. */
/* Umbruchpunkt bei 53rem, nicht mehr bei 40: unter 848 Punkten ist der
   Inhaltsrahmen schmaler als die sechs festen Spalten zusammen (756),
   und dann stuende die Tabelle ueber den Rand hinaus. Darunter wird aus
   jeder Zeile ohnehin ein Block. */
@media (max-width: 53rem) {
  /* Die Fuellspalte ist nur fuer die Breiten da — als Block waere sie
     eine leere Zeile unter jedem Eintrag. */
  .kp-fuell { display: none; }
  .kp-tabelle thead { position: absolute; width: 1px; height: 1px;
                      overflow: hidden; clip: rect(0 0 0 0); }
  .kp-tabelle tr { display: block; padding: .55rem 0;
                   border-bottom: 1px solid var(--linie); }
  .kp-tabelle td { display: flex; gap: .7rem; padding: .1rem 0; border: 0; }
  .kp-tabelle td::before { content: attr(data-spalte); flex: 0 0 7.5rem;
                           color: var(--nebel); font-size: .82rem; }
  .kp-tabelle td[data-spalte="Mannschaft"] { font-weight: 600; }
}

/* ── Trainingsraster ─────────────────────────────────────────────────────
   Wochenansicht aus der Platz- und Kabinenzuteilung. Die Platztabelle ist
   breiter als ein Handy — sie darf seitlich geschoben werden, statt die
   Schrift unlesbar zu machen. */

/* Die Tabellenfassungen von Trainingsraster und Kabinenbelegung sind am
   3.10.2026 weggefallen; mit ihnen ihre Regeln (.kp-raster, .kp-block,
   .kp-scroll und was dazugehoerte). Gezeichnet wird beides jetzt wie im
   Werkzeug — siehe .g-raster weiter unten. */

/* Die Kopfzeile der Vereinsseite klebt oben (position: sticky, 72px hoch).
   Ohne Abstand landet die angesprungene Überschrift darunter und ist nicht
   zu sehen — der Sprung wirkt, als ginge er zu weit. */
#inhalt, #belegung, #lageplan { scroll-margin-top: 5.5rem; }

/* Der Satz eines Sondertags: er steht unter dem Datum und beantwortet die
   Frage, mit der jemand vor der Seite steht — "Juniorenturnier, Garderoben
   nach Aushang". Deutlicher als eine Tabellenzeile, leiser als der Titel. */
.kp-sondertag { margin: .2rem 0 .6rem; padding: .35rem .7rem; border-radius: 3px;
                background: #fff4e5; color: #7a4a00; font-weight: 600;
                border-left: 4px solid #d98a00; }

/* Ein gesperrter Platz: rot, weil es eine Einschränkung ist. Wer den Plan
   liest, bevor er losfährt, soll es vorher wissen und nicht erst am Zaun. */
.kp-gesperrt { margin: .2rem 0 .7rem; padding: .3rem .6rem; border-radius: 3px;
               background: #fdecec; color: #8a2222; font-weight: 700;
               border-left: 4px solid #c23b3b; }
.kp-gesperrt::before { content: "\26A0\FE0E"; margin-right: .45rem; font-weight: 400; }

/* Der Einsatzplan fürs Clubhaus: links wer, rechts was. Zwei Spalten,
   weil beides zusammen gelesen wird — wer am Samstag eingeteilt ist, will
   wissen, was ihn erwartet. Schmal rutschen sie untereinander. */
.ch-zwei { display: grid; gap: .6rem 2rem;
           grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ch-namen, .ch-spiele { margin: .2rem 0 0; padding-left: 1.1rem; }
.ch-namen li { font-weight: 600; font-size: 1.05rem; }
.ch-spiele li { margin-bottom: .15rem; }
.ch-zeit { font-family: var(--mono); font-weight: 600; margin-right: .3rem; }
.ch-trainings { margin: .2rem 0 0; color: var(--nebel); }

/* Die Belegungsgrafik — dieselbe Zeichnung wie im Werkzeug auf „Die
   Woche". Gezeichnet wird sie von belegungGrafik() in grafik.php;
   die Regeln stehen hier ein zweites Mal, weil die öffentliche Seite
   style.css und zusatz.css lädt und nicht werkzeug.css. Werte kopiert, nicht
   Dateien verknüpft: so kann ein neues style.css der Vereinsseite das
   Werkzeug nicht umwerfen und umgekehrt. */
/* Ein Tag im Abschnitt "Kabinen und Plätze": zuerst die Garderoben,
   darunter der Rasen — dieselbe Reihenfolge wie im Werkzeug. Erst, wo man
   sich umzieht, dann, wo gespielt wird. */
.kp-gtag { margin: 0 0 1.6rem; }
.kp-gtitel { margin: .6rem 0 .1rem; font-family: var(--mono); font-size: .62rem;
             letter-spacing: .08em; text-transform: uppercase; color: var(--nebel); }

.g-raster { margin: .2rem 0 1.2rem; font-size: .72rem; }
.g-kopf { display: flex; padding-bottom: .15rem; }
.g-eck { flex: 0 0 2.6rem; }
.g-knr { flex: 1 1 0; min-width: 0; text-align: center;
         font-family: var(--mono); font-size: .68rem; color: var(--nacht); }
.g-koerper { display: flex; position: relative; }
.g-achse { flex: 0 0 2.6rem; position: relative; }
.g-marke { position: absolute; right: .35rem; transform: translateY(-50%);
           font-family: var(--mono); font-size: .62rem; color: var(--nebel); }
.g-linien { position: absolute; inset: 0 0 0 2.6rem; pointer-events: none; }
.g-linie { position: absolute; left: 0; right: 0; height: 0;
           border-top: 1px dashed var(--linie); }
.g-spalte { flex: 1 1 0; min-width: 0; position: relative;
            border-left: 1px solid var(--linie);
            border-top: 1px solid var(--linie);
            border-bottom: 1px solid var(--linie); }
.g-spalte:last-child { border-right: 1px solid var(--linie); }
.g-leer { background: repeating-linear-gradient(45deg, transparent,
          transparent 5px, #f4f7f9 5px, #f4f7f9 10px); }
.g-balken { position: absolute; box-sizing: border-box; overflow: hidden;
            border-radius: 2px; padding: .15rem .18rem; line-height: 1.1;
            display: flex; flex-direction: column; gap: .05rem; }
.g-balken b { font-weight: 600; font-size: .62rem;
              overflow-wrap: anywhere; hyphens: auto; }
.g-balken em { font-style: normal; font-family: var(--mono); font-size: .55rem;
               opacity: .75; }
.g-spiel    { background: var(--gelb); color: var(--nacht); }
.g-training { background: #e7eef4; color: var(--tinte); }
.g-weicht { box-shadow: inset 0 3px 0 #8a6100; }
.g-streit { outline: 2px solid #c23b3b; outline-offset: -2px;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.g-legende { display: flex; flex-wrap: wrap; gap: .2rem .9rem;
             margin: .1rem 0 .9rem; font-size: .68rem; color: var(--nebel); }
.g-lg { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.g-mb { display: inline-block; width: 1.5rem; height: .9rem; border-radius: 2px;
        flex: 0 0 auto; }