/* ========================================================================== Spielbetrieb - Spielplan, Tabellen, Mannschaftsseiten Geladen nur auf spielplan.php, tabellen.php und mannschaft.php ueber seite_kopf(['css' => ['spielbetrieb']]). Buehne, Spielliste, Ligatabelle und Berichtsliste tragen die Klassen und Stile der Arbeitskopie des Templates (p-stage, p-alle, p-tabelle, p-own, p-story ...). Auswahl, Quellenzeile, Leerhinweis und Angabenliste sind die gemeinsamen Bausteine des Rahmens (bbc08.css Abschnitt C5: .p-klapp, .p-quelle, .p-leer, .p-angaben). Diese Regeln stehen in bbc08.css und werden hier weder wiederholt noch ueberschrieben. Hier steht nur, was die drei Seiten dazu brauchen; Praefix sb-. Umschaltgrenzen nur aus der Leiter: max-width 480/640/900/1000/1300/1500 bzw. min-width 481/641/901/1001/1301/1501. ========================================================================== */ /* Jedes Element mit eigenem display braucht eine eigene [hidden]-Regel (Design-Erkenntnisse). Die Zeilen der Liste und die Leermeldung werden vom Server wie vom Skript ueber hidden ein- und ausgeblendet. */ .sb-liste tr[hidden], .sb-leer[hidden] { display: none; } /* ---- Auswahl: Mannschaft, Wettbewerb, Spielort, Zeitraum --------------- spiel_reiter.php baut sie aus den Bausteinen: die Mannschaften als Reiterreihe .p-tabs wie auf der Startseite (bbc08.css Abschnitt B: ueber 640px Reiter, bis 640px Klappmenue), Wettbewerb, Spielort und Zeitraum als Klappmenue .p-klapp (C5.5) in jeder Breite. Knopf, Pfeil, Liste, Flaeche und Flaechenumkehr kommen von dort; hier steht nur die Anordnung. Alle vier stehen in EINER Flexzeile, die umbrechen darf. Ueber 640px nimmt die Reiterreihe die ganze Zeile, die drei Knoepfe stehen darunter. Bis 640px ist auch die Mannschaft ein Knopf: eine kurze Reihe aus vier Knoepfen statt vier Feldern untereinander. */ .sb-auswahl { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s4); margin-bottom: var(--p-sp-oben); } /* Den Abstand zum Inhalt darunter traegt hier die Flexzeile, nicht die Reiterreihe (.p-tabs bringt --p-sp-oben mit). Zwischen Reiterreihe und Knoepfen stehen 16px: der Innenabstand unten aus Abschnitt B (4px), 4px Rand und der Spalt (8px). An .sb-reiter haengt bis 640px die Liste des Klappmenues - auf der Startseite traegt das .p-kopfreihe. */ .sb-auswahl > .sb-reiter { flex: 1 1 100%; margin-bottom: 0; position: relative; } .sb-auswahl > .sb-reiter:not(:last-child) { margin-bottom: var(--s2); } .sb-reiter a.chip:hover { text-decoration: none; } @media (max-width: 640px) { .sb-auswahl > .sb-reiter { flex: 0 1 auto; padding-bottom: 0; } .sb-auswahl > .sb-reiter:not(:last-child) { margin-bottom: 0; } } /* Ohne Skript (keine Klasse p-js an ) geht bis 640px kein Klappmenue auf. Die Mannschaften stehen dann als Reiterreihe da, wie ueber 640px und wie Wettbewerb, Spielort und Zeitraum im Baustein (C5.5, gleiche Werte): Liste als display: contents, Reiter mit Rand, Rundung und Flaechenumkehr, der Knopf weg. */ @media (max-width: 640px) { html:not(.p-js) .sb-auswahl > .sb-reiter { flex-basis: 100%; } html:not(.p-js) .sb-reiter .chip.p-tabs__auswahl { display: none; } html:not(.p-js) .sb-reiter .p-tabs__liste { display: contents; } html:not(.p-js) .sb-reiter .p-tabs__liste .chip { height: var(--h-chip); padding: 0 var(--s5); border: 1px solid var(--border-default); border-radius: var(--r-lg); } html:not(.p-js) .sb-reiter .p-tabs__liste .chip:hover { border-color: var(--border-strong); } html:not(.p-js) .sb-reiter .p-tabs__liste .chip.on { border-color: var(--accent-border); } html:not(.p-js) .p-sec--alt .sb-reiter .p-tabs__liste .chip:not(.on) { background: var(--bg-body); } html:not(.p-js) .p-sec:not(.p-sec--alt):not(.p-sec--gruen):not(.p-join) .sb-reiter .p-tabs__liste .chip:not(.on) { background: var(--surface-1); } html:not(.p-js) .p-sec--alt .sb-reiter .p-tabs__liste .chip.on, html:not(.p-js) .p-sec:not(.p-sec--alt):not(.p-sec--gruen):not(.p-join) .sb-reiter .p-tabs__liste .chip.on { background: var(--accent-tint); } } /* ---- Spielliste -------------------------------------------------------- Der Hinweis (verlegt, Absetzung, spielfrei) steht als Marke unter der Begegnung, dazu eine Randmarke an der ersten Zelle - dasselbe Mittel wie bei der eigenen Tabellenzeile (30_Design/spielplan.html). Kurze Statusanzeigen stehen versal (ADR-0004). */ .sb-liste .sb-paarung { overflow-wrap: break-word; } /* Datum und Zeit brechen nicht um. */ .sb-liste td.num { white-space: nowrap; } /* Die Begegnung ist die breiteste Spalte und bleibt es; nichts scrollt seitlich. Kommt an einer Stufe der Leiter eine Spalte dazu (Wochentag 481, Mannschaft 641, Wettbewerb 901, Ort 1001 - Design-Erkenntnisse §5, unveraendert), soll das nur den Platz dieser Spalte kosten. Vorher kamen bei 481px zugleich 16px statt 6px Zellrand, "Ergebnis" statt "Erg." und das Jahr dazu: die Begegnung fiel von 280 auf 134px, die Liste lief bei 481-504px bis 23px seitlich ueber. - Das Jahr steht in der Liste nicht - sie zeigt eine Saison, und die steht im Kicker. Bis 480px war das schon so. - Bis 640px: Zellrand 6px, Spaltenkopf "Erg.", und ab 481px steht der Wochentag UEBER dem Datum - in der Hoehe, die die Begegnung mit der Mannschaft darunter ohnehin braucht. Die Datumsspalte bleibt so schmal wie bis 480px. - Ab 641px: Zellrand 12px (wie 30_Design/spielplan.html; mit den 16px aus table.t waere bei 1001px der Wettbewerb breiter als die Begegnung), "Ergebnis", Wochentag und Datum in einer Zeile. */ .sb-liste .p-alle__jahr { display: none; } .sb-kurz { display: none; } @media (max-width: 640px) { .sb-liste table.t thead th, .sb-liste table.t tbody td { padding-inline: var(--s3); } .sb-lang { display: none; } .sb-kurz { display: inline; } } @media (min-width: 481px) and (max-width: 640px) { .sb-liste .p-alle__tag { display: block; } } @media (min-width: 641px) { .sb-liste table.t thead th, .sb-liste table.t tbody td { padding-inline: var(--s5); } } /* Die Mannschaft ist ein Verweis auf ihre Seite, steht aber wie Klartext in der Zeile (Template: die Zelle ist Klartext) - die Akzentfarbe erst beim Ueberfahren, wie die Mannschaft ueber der Ligatabelle. */ .sb-liste .p-alle__team a { color: inherit; } .sb-liste .p-alle__team a:hover { color: var(--accent-text); text-decoration: none; } .sb-merk { display: block; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-top: var(--s2); padding: 1px var(--s3); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--warning); background: var(--warning-tint); border-left: 3px solid var(--warning); } table.t tbody tr.sb-merk-zeile td:first-child { box-shadow: inset 3px 0 0 var(--warning); } /* Die Mannschaft steht unter der Begegnung, sobald ihre Spalte wegfaellt (Leiter: 640px). Sonst sind A- und C-Junioren ("Birkenwerder BC 1908") nicht von den Herren zu unterscheiden. */ .sb-team-schmal { display: none; } @media (max-width: 640px) { .sb-team-schmal { display: block; margin-top: var(--s1); font-size: var(--t-xs); color: var(--fg-3); } } /* ---- Tabellen ---- */ .p-tabelle__kopf a { color: inherit; } .p-tabelle__kopf a:hover { color: var(--accent-text); text-decoration: none; } /* Liegt das Wappen als Datei vor, steht es vor dem Vereinsnamen, ohne verzerrt zu werden. */ img.sb-wappen { object-fit: contain; } /* Das Wappenfeld (bbc08.css, ab 1001px) steht mit vertical-align: middle auf halber x-Hoehe; der Vereinsname daneben beginnt mit Versalien und Ziffern. Das Feld stand 1,25px unter der Schriftmitte (Fundliste Ausrichtung 01.10.2026; Designvorgabe: Text steht mittig zu Kreisen). Ein Zehntel der Schriftgroesse hoeher (13px: 1,3px). bbc08.css ist fuer diesen Auftrag gesperrt, deshalb hier mit hoeherer Spezifitaet. */ @media (min-width: 1001px) { .p-tabelle .p-tab__wappen { position: relative; top: -.1em; } } /* ---- Buehne der Mannschaftsseite --------------------------------------- Aufbau wie 30_Design/mannschaft-herren.html: Infozeile, Mannschaftsname, Paarung, Countdown. Der Luftraum fuers Motiv (--p-buehne-luft) steht ueber dem Namen statt ueber der Paarung - so bleibt das Luftbild frei, und Name und Paarung stehen beieinander. Schriftgroesse des Namens aus der Layoutvorlage. */ .sb-buehne h1.sb-buehne__titel { margin-top: var(--p-buehne-luft); color: #fff; font-size: clamp(2.6rem, 6vw, 4.6rem); } .sb-buehne .p-pairing { margin-top: var(--s8); } /* ---- Mannschaft: Foto und Steckbrief ----------------------------------- Die Ueberschriften tragen die Kapitelgroesse wie jede h2 (--p-t-hero, Design-Erkenntnisse "Kapitelueberschriften haengen an derselben Groesse"), auch "Trainingszeiten" in der Nebenspalte. Im Zweispalter des Rahmens (.p-two, 1,7 : 1) brach das Wort dort in zwei Zeilen, und Foto und Tabelle begannen 46 bis 60px versetzt (Nachpruefung 01.10.2026, Befund 7: "„Trainings-zeiten" bricht um, deshalb stehen die Spalten nicht bündig"). Ab 1001px teilt sich diese Sektion deshalb 1,4 : 1: das Wort braucht 338px (1001) bis 441px (ab 1366), die Spalte hat 359 bis 458px. Das weiche Trennzeichen (mannschaft_seite.php) bleibt als Rueckfall. Die Angaben darunter sind die Angabenliste des Rahmens (.p-angaben). */ @media (min-width: 1001px) { #mannschaft > .p-wrap.p-two { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } } .sb-foto { margin: 0; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--border-subtle); background: var(--surface-2); } .sb-foto picture, .sb-foto img { display: block; width: 100%; height: auto; } .sb-foto--leer { display: grid; place-items: center; aspect-ratio: 2 / 1; padding: var(--s8); text-align: center; border-style: dashed; } .sb-steckbrief__kopf { margin: var(--s10) 0 var(--s5); } /* Berichte: ein im Bildfeld fuellt es wie ein . */ .p-shot picture { display: block; width: 100%; height: 100%; } /* 404 der Mannschaftsseite: Abstand der Knoepfe wie in web/404.php. */ .sb-acts { margin-top: var(--p-sp-oben); } /* Einklappen (spielbetrieb.js, 30.09.2026): der Knopf unter Liste und Tabelle. Unter der Liste traegt .p-alle > .p-tabellen__zeile den Abstand (bbc08.css), unter der Tabelle steht er hier. Hat die Liste hoechstens 8 Zeilen, gibt es nur schmal etwas aufzuklappen. */ .p-tabelle > .p-tabellen__zeile { margin-top: var(--s5); } @media (min-width: 641px) { .sb-klapp.sb-klapp--schmal { display: none; } } /* Aktuelles (web/aktuelles.php): drei Bloecke untereinander, Kopf wie die Gruppen der Mannschaftsseite (.p-teams__kopf), rechts der Verweis auf die ausfuehrliche Seite. */ .akt-block + .akt-block { margin-top: var(--p-sp-sektion); } .akt-kopf { align-items: baseline; margin-bottom: var(--s6); } .akt-kopf .p-teams__kopf.p-display { margin: 0; }