/* ============================================================================ verein.css - Vereinsseiten: Verein, Training, Mitglied werden, Sponsoren, Kontakt, Downloads, Impressum, Datenschutz, Satzung. Laedt NACH bbc08.css. Dort steht der ganze Stilblock des Templates - Stundenplan (.p-plan), Sponsorentafel (.p-sponsors, .p-partner), Mitgliedsband (.p-join, .p-beitraege), Termintabelle (.p-zusatz, .p-jahr, .p-termin__zeit) - und die gemeinsamen Bausteine des Rahmens (Abschnitt C): Kachelraster (.p-kachelraster), Quellenzeile (.p-quelle), Angabenliste (.p-angaben), Platzhalter-Huelle (.p-fehlt), Leerhinweis (.panel > .p-leer). Diese Datei ueberschreibt deren Eigenschaften nicht. Hier steht nur, was diese Seiten darueber hinaus brauchen. Farben, Schriften und Abstaende kommen ausschliesslich aus den Tokens des Systems; Umschaltgrenzen nur von der Leiter (480/640/900/1000/1300/1500). ========================================================================= */ /* ─── 1 · RECHTSTEXTE ───────────────────────────────────────────────────── Wortgleich aus dem Stilzusatz der live abgenommenen Rechtsseiten (30_Design/impressum.html, datenschutz.html, satzung.html). Das System kennt keinen Fliesstext-Baustein: p hat margin 0, fuer ul gibt es ausser im Fuss keine Regel. Der Zusatz regelt nur Abstaende und Zeilenlaenge. */ /* "Datenschutzerklaerung" ist ein einziges Wort und steht bei 320px breiter da als die Spalte -- ohne Umbruchstelle laeuft die Seite waagerecht aus dem Bild. Die Trennstelle steht als weiches Trennzeichen (­) im Markup, an der richtigen Fuge: "Datenschutz-/erklaerung". overflow-wrap ist nur die Rueckfalloption, falls auch das noch nicht reicht. */ h1.p-display { overflow-wrap: anywhere; } .p-recht { max-width: var(--p-lesemass, 78ch); display: grid; gap: var(--s6); } .p-recht h2.p-display { font-size: var(--p-t-h3); line-height: 1.05; margin-top: var(--s10); overflow-wrap: anywhere; } .p-recht > *:first-child { margin-top: 0; } /* Der Kopf klebt oben; den Abstand darunter haelt html { scroll-padding-top } in bbc08.css. Hier nur die Luft ueber der angesprungenen Ueberschrift ("Auf dieser Seite"). */ .p-recht h2.p-display[id] { scroll-margin-top: var(--s6); } .p-recht ul { margin: 0; padding-left: var(--s7); display: grid; gap: var(--s4); color: var(--fg-2); } /* IBAN, Steuernummer und Adressen sind unteilbar lang. Auf schmalen Geraeten muessen sie umbrechen duerfen, sonst laeuft die Seite waagerecht aus dem Bild. */ .p-recht p, .p-recht li, .p-recht a { overflow-wrap: anywhere; } /* ─── 2 · STUNDENPLAN MIT DATENMASS ─────────────────────────────────────── Das Template setzt den Plan fest auf vier Tage und 16:30 bis 21:00: 16 Bahnen, neun Halbstundenzeilen, vier Tagesbloecke untereinander. verein_stundenplan() rechnet Tage und Zeitraum aus den Daten und haengt die Masse als Eigenschaften an das Raster: --p-plan-bahnen 4 je Tag (Segmente A-D) --p-plan-reihen-breit Kopfzeile, Halbstunden, Schlusszeile --p-plan-reihen-schmal derselbe Block einmal je Tag Ausgeschrieben kommt das Zeilenmuster aus PHP, weil repeat() nicht in repeat() stehen darf. Alles andere - Kaesten, Linien, Zeiten, die Umschaltung bei 1300px - bleibt die Regel des Templates. */ .p-plan.p-plan--daten { grid-template-columns: auto repeat(var(--p-plan-bahnen, 16), minmax(0, 1fr)); grid-template-rows: var(--p-plan-reihen-breit, var(--p-plan-block)); } @media (max-width: 1300px) { .p-plan.p-plan--daten { grid-template-columns: auto repeat(4, minmax(0, 1fr)); grid-template-rows: var(--p-plan-reihen-schmal, var(--p-plan-block)); } } /* Liegt eine Zeit neben dem Halbstundenraster, sagt die Hoehe des Kastens sie nicht mehr genau - dann steht sie sichtbar im Kasten. */ .p-plan__uhr { font-family: var(--font-mono); font-size: var(--t-label); line-height: 1; color: var(--fg-3); } /* Eintraege, die nicht ins Raster passen (unbekannter Platz, Ueberschneidung), stehen darunter als Liste - nie verschluckt. */ .verein-plan-rest { display: grid; gap: var(--s5); padding: 0 var(--s6) var(--s6); } /* ─── 3 · ABSCHNITTE ────────────────────────────────────────────────────── Zwei Spalten: Text links, Karte rechts, im Verhaeltnis des Mitgliedsbands (1,4 : 1). Ab 900px abwaerts untereinander - dieselbe Stufe wie .p-join. */ .verein-spalten { display: grid; align-items: start; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(var(--s8), 4vw, var(--s11)); } @media (max-width: 900px) { .verein-spalten { grid-template-columns: minmax(0, 1fr); } } /* Fliesstext der Vereinsseiten: gemischte Schreibung, Abstand wie in den Rechtstexten. Breite: das Lesemass (--p-lesemass, 78ch wie .p-recht der Begleitseiten des Templates; Abgleich 01.10.2026). */ .verein-text { display: grid; gap: var(--s6); max-width: var(--p-lesemass, 78ch); } .verein-text > .p-acts { margin-top: var(--s2); } /* Folgt dem Text ein Raster (Karten, Kacheln, Kontaktwege), steht der Zwischenabstand der Sektion dazwischen - wie unter .p-head. Als margin-bottom, damit er mit einem groesseren oberen Abstand des Nachfolgers (.verein-unterkopf) zusammenfaellt, statt sich zu addieren. */ .p-wrap > .verein-text:not(:last-child) { margin-bottom: var(--p-sp-oben); } .verein-anriss { font-size: 1.15em; line-height: 1.45; color: var(--fg-1); } /* Auf Gruen muss der Text hell sein; p traegt sonst --fg-2. */ .verein-text--hell p { color: var(--accent-fg); opacity: .92; } /* Abstand nach einem Block, wenn ein zweiter folgt. */ .verein-nach { margin-top: var(--p-sp-oben); } /* Zweite Ueberschrift innerhalb eines Abschnitts: im Markup h3.p-display (Groesse aus bbc08.css), hier nur der Abstand. */ .verein-unterkopf { margin: var(--p-sp-sektion) 0 var(--s6); overflow-wrap: anywhere; } .verein-unterkopf:first-child { margin-top: 0; } /* Mitgliedsband: das Template setzt dort eine h2; auf der eigenen Seite ist es die Seitenueberschrift, also h1 - gleich aussehen soll sie. */ .p-join h1.p-display { color: var(--accent-fg); font-size: clamp(2rem, 4.2vw, 3.2rem); margin-top: var(--s5); } /* ─── 4 · KARTEN ────────────────────────────────────────────────────────── Alle Kartenreihen sind das Kachelraster des Rahmens (.p-kachelraster, bbc08.css C5.8): die Spaltenzahl wechselt nur an der Leiter. Hier stehen nur die Zahlen je Stufe - die, die auto-fill am Anfang der Stufe zeigte (gemessen bei 320/481/641/901/1001/1301) - und der Spalt. Fehlende Stufen erben die vorige. */ .verein-wege, .verein-karten, .verein-dokumente { list-style: none; margin: 0; padding: 0; gap: var(--s6); } /* Kontaktwege (/kontakt, /verein, /mitglied-werden): hoechstens zwei Karten - ab 641 zwei Spalten, auch ab 901 und ab 1301. Vorher standen sie ab 901 in 2 von 3 bzw. 4 Spalten und waren ab 1301 schmaler als bei 1300; die Facebook-Adresse brach um. */ .verein-wege { --p-spalten-320: 1; --p-spalten-641: 2; --p-spalten-901: 2; --p-spalten-1301: 2; --p-kachel-min: 240px; } /* /sponsoren (#partner-werden, eine Karte in .sp-anfrage): Spaltenzahl wie vor dem 01.10.2026 - ab 901 drei, ab 1301 vier. Mit zwei Spalten war die Karte dort 901-1000 breiter geworden (397/442 statt 260/289px). Auf /sponsoren aendert sich ohne Auftrag keine Groesse (Auftraggeber 01.10.2026: "Was zur Hölle soll das ...?"). */ .sp-anfrage .verein-wege { --p-spalten-901: 3; --p-spalten-1301: 4; } .verein-karten { --p-spalten-320: 1; --p-spalten-641: 2; --p-spalten-901: 3; --p-spalten-1301: 4; --p-kachel-min: 240px; } /* Der Vorstand (.verein-karten steht nur dort, /verein): vier Karten - bis 480 untereinander, 481-1000 zwei mal zwei, ab 1001 vier in einer Reihe. Vorher standen sie 901-1300 zu dritt und die vierte allein darunter. Keine Mindestbreite: 240px passen bei 481 nicht zweimal und bei 1001 nicht viermal in den Kasten. */ .verein-karten { --p-spalten-481: 2; --p-spalten-901: 2; --p-spalten-1001: 4; --p-kachel-min: 0px; } .verein-dokumente { --p-spalten-320: 1; --p-spalten-901: 2; --p-spalten-1301: 3; --p-kachel-min: 300px; } .verein-weg, .verein-person { gap: var(--s4); padding: var(--s7); min-width: 0; } /* Die Adresse bricht nur nach "/" ( im Markup, wie die Namen in der Buehne) - nie mitten im Wort. */ .verein-weg__wert { font-weight: 600; color: var(--fg-1); } /* Eine Karte fuer E-Mail, Facebook und Instagram: Zeilen untereinander. */ .verein-weg--kanaele { gap: var(--s5); } .verein-weg__zeile { display: grid; gap: var(--s2); } a.verein-weg__wert { color: var(--accent-text); } /* Das Symbol (18px) steht mit seiner Mitte auf der Mitte der Versalhoehe der ERSTEN Zeile (Designvorgabe 01.10.2026), wie Kaestchen und Auswahlkreis in antrag.css: Unterkante auf der Grundlinie (align-items: baseline), top schiebt um die halbe Hoehe weniger die halbe Versalhoehe nach unten; margin-top -9px, damit es die Zeile nicht nach unten drueckt. Vorher mittig zum ganzen Block - bei zwei Zeilen 12px zu tief. */ .verein-weg__netz { display: inline-flex; align-items: baseline; gap: var(--s4); } .verein-weg__netz svg { width: 18px; height: 18px; flex: none; fill: currentColor; font: inherit; margin-top: -9px; position: relative; top: calc(9px - .5cap); } /* Namen im Vorstand und Kartentitel sind h3.p-display (bbc08.css) - keine eigene Groesse. Steckbrief und Platzangaben sind die Angabenliste des Rahmens (.p-angaben, bbc08.css C5.10). */ .verein-person__amt { font-size: var(--t-sm); } .verein-karte { gap: var(--s5); min-width: 0; } .verein-anschrift { color: var(--fg-1); overflow-wrap: anywhere; } .verein-karte > .p-acts { margin-top: var(--s2); } /* Dokumente: Titel oben, Knoepfe unten untereinander - "Auf der Webseite lesen" ueber "PDF herunterladen", der PDF-Knopf zuunterst und so in jeder Reihe auf einer Linie (Auftraggeber 01.10.2026: "so das PDF herunterladen, immer unten ist"). Der Titel in h3-Groesse auch mit zwei Klassen - gegen h2.p-display aus bbc08.css, sonst "Beitragsordnung" in Kapitelgroesse ueber den Fensterrand. */ .verein-dokument { gap: var(--s5); min-width: 0; } .verein-dokument__titel, .verein-dokument__titel.p-display { font-size: var(--p-t-h3); line-height: 1.05; overflow-wrap: anywhere; } .verein-dokument > .p-acts { margin-top: auto; padding-top: var(--s4); flex-direction: column; align-items: flex-start; } /* ─── 5 · CHRONIK, SCHRITTE, LISTEN ──────────────────────────────────── */ /* Chronik in der Handschrift der Terminliste (.p-dates, .p-day): grosse Jahreszahl links, Text rechts, Linien dazwischen. */ .verein-chronik { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--border-subtle); } .verein-chronik > li { display: grid; align-items: baseline; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s7); padding: var(--s6) 0; border-bottom: 1px solid var(--border-subtle); color: var(--fg-2); } .verein-chronik__jahr { font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700; font-size: 30px; line-height: .95; font-variant-numeric: tabular-nums; color: var(--fg-1); } @media (max-width: 640px) { .verein-chronik > li { grid-template-columns: 68px minmax(0, 1fr); gap: var(--s6); } } /* Der Weg in den Verein: nummerierte Karten. Die Zahl setzt der Zaehler, nicht das Markup - so bleibt die Reihenfolge beim Umstellen richtig. Vier Karten wie der Vorstand (.verein-karten): bis 480 untereinander, 481-1000 zwei mal zwei, ab 1001 vier in einer Reihe. Vorher standen sie 901-1300 zu dritt und die vierte allein darunter. */ .verein-schritte { list-style: none; margin: 0; padding: 0; gap: var(--s6); counter-reset: verein-schritt; --p-spalten-320: 1; --p-spalten-481: 2; --p-spalten-641: 2; --p-spalten-901: 2; --p-spalten-1001: 4; --p-spalten-1301: 4; --p-kachel-min: 0px; } .verein-schritte > li { counter-increment: verein-schritt; gap: var(--s5); min-width: 0; } .verein-schritte > li::before { content: counter(verein-schritt); font-family: var(--p-font-display); font-stretch: 82%; font-weight: 700; font-size: 30px; line-height: .95; font-variant-numeric: tabular-nums; color: var(--accent-text); } /* Titelbereich gleich hoch, damit der Kartentext in einer Reihe auf einer Hoehe beginnt: zwei Zeilen in den Stufen, in denen ein Titel umbricht (gemessen 01.10.2026: 481-571 und 1001-1191 und ab 1311 zweizeilig, 641-1000 alle einzeilig). Hoechstens zwei Zeilen. */ @media (min-width: 481px) and (max-width: 640px), (min-width: 1001px) { .verein-schritte > li > h3 { min-height: 2lh; } } .verein-liste { margin: 0; padding-left: var(--s7); display: grid; gap: var(--s4); color: var(--fg-2); } /* Bankverbindung (web/bankverbindung.php): Nummern gut lesbar. */ .verein-bank { max-width: 560px; margin-top: var(--p-sp-oben); } .verein-bank__nummer { font-variant-numeric: tabular-nums; letter-spacing: .02em; overflow-wrap: anywhere; }