/* Farbvertrag v3940: audit/THEME_CONTRACT.md. Diese Datei besitzt gemeinsame Geometrie. Alle Farben ausschliesslich theme-dark.css/theme-light.css; neue Seiten muessen beide vollstaendigen Paletten verwenden. */ @layer vertraege{ /* Antragsprüfung: eine Inhaltskante; erster Abschnitt 20, Aktionen 24/12. Auswahlkacheln vor Hinweis/Abschnitt ohne zusätzlichen 8px-Nachlauf. */ .mb-antrag-detail > .bt-eb2:first-child{margin-top:0} .mb-antrag-detail > .bt-wahlz:has(+ .bt-info), .mb-antrag-detail > .bt-wahlz:has(+ .bt-eb2){margin-bottom:0} .mb-antrag-detail > .bt-haupt{margin-top:var(--sp-7)} .mb-antrag-detail > .bt-haupt + .bt-zweit{margin-top:var(--sp-4)} /* Fehleranzeige der Mitgliederliste: Wiederholen bleibt klar vom Hinweis getrennt. */ .mb-body > .bt-info + .bt-zweit{margin-top:var(--sp-5)} /* Terminkarte: Art-Pille -> freier Titel = eng zusammengehoerig (8px). Die bestehenden Zeit-/Ortsabstaende folgen danach unveraendert. */ .hm-hero-title + .hm-event-title, .hm-flat-head + .hm-event-title{margin-top:var(--sp-3)} /* ═══════════════════════════════════════════════════════════════════════════ CONTRACTS — die bindenden Rhythmusregeln der App: Abstand zwischen Bausteinen und Kantenbuendigkeit, in Karten wie auf Screens. Eigenschaften: nur margin-* und padding-* (top/bottom). Aussehen steht in komponenten.css. Herkunft: der Globalblock aus profil.css (M1, 08/2026); relative Originalreihenfolge beibehalten. Erlaubte Setzstellen fuer --vertrag-*-Stellschrauben: KEINE — es gibt bisher keine einzige; jede neue braucht einen Eintrag hier und im Prüfer. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ ABSTANDSLEITER IN KARTEN — die EINZIGE Quelle. Gilt fuer jede Karte von unten, egal welcher Screen sie oeffnet. Screens bringen KEINE eigenen Vorlauf-Masse mit; wer hier etwas aendert, aendert es ueberall. Kopfzeile (Griff/Zurueck) → Kartentitel 8 (--sp-3) Kartentitel → Unterzeile 2 (--sp-1) Kartentitel/Unterzeile → 1. Abschnitt 20 (--sp-6) Kopfzeile → Bildkopf (Person/Kind) 4 (--sp-2) Bildkopf → 1. Abschnitt 24 (--sp-7) Abschnitt: darueber 24, darunter 12 (--sp-7 / --sp-4) Abschnitt → Erklaertext 0 (die 12 tragen schon) Feld/Kachel → Erklaertext 4 (--sp-2) Hauptknopf → naechster Abschnitt 24 (--sp-7) Aliasnamen der Abschnittsueberschrift: .pf-eb .bt-eb2 .mb-eb2 .kd-eb Aliasnamen des Bildkopfs: .pf-me .mb-khead .kd-khead .tt-khead Eine Ueberschrift NEBEN einem Personenavatar ist immer Stufe lead (21px, -.3px) — nie title: der Kreis traegt die Zeile, die Schrift muss ihn nicht uebertreffen. PERSONEN-AVATARE folgen der Kader-Form: Rechteck mit weichen Ecken, nie Kreis. Kopfavatar (Bildkopf einer Person, oben in einer Karte) 56 / Radius 16 Listenavatar (Zeile in einer Liste, Verfasser im Feed) 40 / Radius 12 Aliasnamen Kopf: .pf-av .mb-kav .tt-kav Aliasnamen Liste: .mb-av .fd-av .pf-mini ═══════════════════════════════════════════════════════════════════════════ */ /* Einstiegsschiene: gemeinsame Kopf-Typografie und Logo-Geometrie. Gilt fuer Login, Registrierung, Trainer-Registrierung und Trainer-Onboarding. */ :root{--entry-logo-h:38px;--entry-title-size:30px;--entry-head-base:119px} /* Einstiegsschiene: Titel und Unterzeile bilden wie in der App EINEN Kopfblock. Deshalb ueberall 2px (--sp-1) zwischen beiden; der grosse Abstand beginnt erst danach zum ersten Inhaltsblock. Gilt fuer Auth und Mannschafts-Setup in beiden Hüllen. */ .au-h + .au-sub, .ig-titel + .ig-unter, .ms-titel + .ms-unter{margin-top:var(--sp-1)} /* Installationsanleitung: gleicher Rhythmus auch bei wenig Hoehe; nativ scrollen. */ .ig-logo + .ig-titel{margin-top:var(--sp-6)} .ig-unter + .ig-liste{margin-top:var(--sp-6)} .ig-mini-eb{margin:var(--sp-7) 0 var(--sp-4)} .ig-knopf{margin-top:var(--sp-5)} /* Auth-/Onboarding-Felder folgen ueber die GANZE Einstiegsschiene demselben Rhythmus. Das gilt auch fuer Trainer-Zugang, Code, „Wie heisst du?“, Datenschutz und die Person-anlegen-Unterseite im Kader. */ .au-lab{margin-top:var(--sp-7)} .au-lab + .au-in{margin-top:var(--sp-3)} .au-msg{margin-top:var(--sp-5)} .au-code{margin-top:var(--sp-7)} .au-eb{margin-top:var(--sp-4)} .au-codeback{margin-top:var(--sp-4)} .au-code + .au-codeziel{margin-top:var(--sp-3)} .au-ck{margin-top:var(--sp-7)} /* Kurze regulaere Auth-Schiene (Moin!/Willkommen!) nutzt dieselben Werte; nur ihre optionalen Bloecke brauchen eigene Nachbarschaftsregeln. */ .au-kurz > .bt-info{margin-top:var(--sp-5)} .au-kurz > .au-kurz-option{margin-top:var(--sp-5);text-align:center} .au-kurz-option .au-link{margin-top:var(--sp-2)} .au-flow-actions{margin-top:var(--sp-7)} .au-flow-actions > .bt-zweit{margin-top:var(--sp-7)} /* Zwei gleichwertige Zweitaktionen teilen sich eine Zeile unter der Hauptaktion. */ .au-flow-actions > .au-flow-zweit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);margin-top:var(--sp-7)} /* Zweitaktionszeile -> unkritischer Hilfetext: 12px, ohne zusaetzliche Seitenkante. */ .au-flow-actions > .au-flow-zweit + .bt-hilfetext{margin-top:var(--sp-4)} /* Gemeinsame Inhaltskante aller bt-Kartenseiten. Diese Regel ist ein Layout-Contract und darf nicht in einem einzelnen Screen-CSS (z. B. Beitritt) liegen. */ .bt-body{padding-left:var(--edge);padding-right:var(--edge);padding-bottom:var(--sp-8)} /* Erfolgskachel als erster Inhalt einer abgeschlossenen Router-Seite: 24px Vorlauf. Die Hauptaktion bleibt Teil der Kachel und folgt dem Text mit dem grossen 24er Blockabstand. */ .bt-body > .bt-erfolg:first-child{margin-top:var(--sp-7)} .bt-erfolg-tx + .bt-haupt{margin-top:var(--sp-7)} /* Der Inhalt der Karte bringt keinen eigenen Vorlauf mit. */ .pf-wrap .pf-body > .pf-page, .pf-wrap .pf-body > .bt-body, .pf-wrap .pf-body .pf-page > .bt-body, .pf-wrap .pf-body .pf-page > .mb-body{padding-top:0} /* Variante: Kartenseite ohne Kartentitel — der Inhalt bringt sein eigenes Kopfelement mit (Bildkopf des Kindes, Einladen-Kopf) und beginnt darum mit 12 statt 0. Den Marker setzen die vier kopfNur()-Seiten in team.js; gleiche Staerke (0,4,0) wie die Regel darueber, gewinnt als spaetere Quelle. */ .pf-wrap.bt .bt-body.ohne-kartentitel{padding-top:var(--sp-4)} /* Kartentitel und Unterzeile. */ .pf-wrap.bt .pf-title, .pf-wrap.nav-kopf .pf-title{padding-top:var(--sp-2)} /* Personen-Kopf im aktuellen navKopf beginnt mit 4. */ .pf-wrap.nav-kopf .pf-body .pf-page > .pf-me:first-child, .pf-wrap.nav-kopf .pf-body > .pf-me:first-child{padding-top:var(--sp-2)} /* Unterzeile als Baustein im Rhythmus: 2 nach oben, Kantenbuendigkeit an der Inhalts- kante (M3.4). Allgemein vor speziell — der Titel-Contract darunter ist mit (0,3,0) ohnehin staerker als dieses (0,1,0) und gewinnt per Spezifitaet, nicht per Quelle. */ .bt-unter{margin-top:var(--sp-1);padding-left:var(--edge);padding-right:var(--edge)} .pf-wrap .pf-title + .bt-unter, .pf-wrap .pf-title + .pf-sub{padding-top:0;margin-top:var(--sp-1)} /* Abschnittsueberschriften: 24 darueber, 12 darunter. */ .pf-wrap .bt-eb2, .pf-wrap .mb-eb2, .pf-wrap .kd-eb{margin:var(--sp-7) 0 var(--sp-4);padding-top:0;padding-bottom:0} /* Neutraler Systemhinweis (bt-info): 16 Vorlauf; nach dem Unterschrift-Feld 20 (eigenstaendige Einheit nach der Eingabeflaeche — Beitritt, Tennis, Foerder, Jugendtraining); als erster Inhalt eines Formularkoerpers 0. */ .bt-info{margin-top:var(--sp-5)} .bt-sig + .bt-info{margin-top:var(--sp-6)} .bt-body > .bt-info:first-child{margin-top:0} /* TERMINE (home), TEAM, FEED: echte Leerbereiche/Hinweise sind keine Materialkacheln. Innenmass/Rahmen gehoeren komponenten.css; hier ausschliesslich der Aussenrhythmus. */ .hm-art-page > .bt-leerzustand:first-child, .hm-body > .bt-info:first-child, .tm-body > .bt-leerzustand:first-child, .fd-body > .bt-leerzustand:first-child, .fd-body > .bt-info:first-child{margin-top:var(--sp-6)} .tm-body > .bt-leerzustand + *{margin-top:var(--sp-5)} /* Im neuen navKopf-Formularaufbau steht der Titel-/Fortschrittsblock AUSSERHALB des Bodys — dort ist der erste Systemhinweis echter erster Inhaltsbaustein und behaelt den 16er-Standard (v3301-Korrektur, Screenshot Tennis Schritt 1). */ .pf-wrap.nav-kopf .pf-page > .bt-body > .bt-info:first-child{margin-top:var(--sp-5)} /* Weg-Pille am Ende von Kader-/Mitglieder-Seiten: 20 Vorlauf (V3C/6). FEED hat wegen eigener Seitenkanten einen separaten Wrapper (feed.css). */ .kd-wegzeile,.mb-wegzeile,.dk-wegzeile{padding-top:var(--sp-6)} /* Spieltreff-/Turnier-Badge im Timeline-Bildstreifen: derselbe optische 1px-Ausgleich in TERMINE und TEAM (V3C/7). */ .hm-row.kf .hm-band-in .hm-kf-badge{margin-top:-1px} /* Bildkopf der Dokumente-Karte als erster Inhalt unter dem gemeinsamen navKopf: 4 zum Griff — derselbe Rhythmus wie pf-title/pf-me (v3293-Nachlauf). */ /* FEED-Beitragsdetail mit eigener Weg-Pille: der Body gibt seinen normalen Kartenabschluss ab, damit nicht 24px Body-Abschluss + 20px Weg-Pillen-Vorlauf doppelt wirken (V3D/1-Korrektur, Server-Smoke v3286). */ .pf-wrap.bt .fd-body:has(+ .fd-wegzeile){padding-bottom:0} /* FEED-Systemanschluss (V3D/1): erster eigener Inhaltsblock — 20 ohne Filter, 24 nach dem Filter (der Filter gehoert zum Kopf), 20 in der Beitragskarte (Rolle B). fd-eb ist bewusst NICHT in der nackten first-child-Null-Liste. */ .scr-titelblock + .fd-body > .fd-eb:first-child{margin-top:var(--sp-6)} .fd-filter + .fd-body > .fd-eb:first-child, .fd-filter + .fd-body > .bt-leerzustand:first-child, .fd-filter + .fd-body > .bt-info:first-child{margin-top:var(--sp-7)} .pf-wrap .bt-unter + .fd-body > .fd-eb:first-child{margin-top:var(--sp-6)} /* Lesedokumente teilen den Abschnittsvertrag: 24 davor, 12 danach. Folgende Listen, Hinweise und Signaturen tragen keinen zweiten Vorlauf bei. */ .dk-para{margin:var(--sp-7) 0 var(--sp-4)} .dk-para + *{margin-top:0} /* Geldkachel: 20 Vorlauf zum Kopf bzw. vorigen Block (v3296, aus dokumente.css). */ .dk-kachel{margin-top:var(--sp-6)} /* Folgt die Kachel direkt auf eine Formular-Abschnittsueberschrift, traegt allein die Ueberschrift ihre 12 darunter (Abschnittsvertrag; v3298-Nachlauf Turn 341). */ .pf-wrap .bt-eb2 + .dk-kachel{margin-top:0} /* Zahl → Plus im Abschnittskopf: 12 zwischen den zwei Bausteinen (V3C/5). */ .mb-eb2 .vt-zahl + .mb-plus{margin-left:var(--sp-4)} /* Kader-Suche: das Suchfeld und ein tatsaechlich vorhandener Trefferblock sind zwei Inhaltsbausteine. 12px aus der Leiter; leerer Trefferblock erzeugt bewusst keinen kuenstlichen Zwischenraum. */ .kd-suchz + .kd-treffer:not(:empty){margin-top:var(--sp-4)} /* Kompakte Kader-Suche in der Einrichtung: Seit dem vorgeschalteten 🔎-Hinweis ist die Trefferliste nicht mehr direkter Nachbar des Suchfelds. Der Trefferabstand bleibt trotzdem derselbe 12px-Vertrag und entsteht nur, wenn es Treffer gibt. */ .pf-wrap .kd-suchz + .bt-info + .kd-treffer:not(:empty){margin-top:var(--sp-4)} /* Auswahlkacheln: Darstellung in komponenten.css; der Nachlauf zwischen den Bausteinen bleibt aeusserer Vertrag (V3C/2). */ .tm-wahlz,.mb-wahlz,.tb-wahlz,.bt-wahlz{margin-bottom:var(--sp-3)} /* Direkte Setup-Auswahlgruppen: Erklärung -> erste Kachel 16. Vor einem folgenden Systemhinweis, einem neuen 24er-Abschnitt oder der 24er-Hauptaktion entfällt der sonstige 8er Listennachlauf, damit sich die Vertragsabstände nicht addieren. */ /* Router-Mehrschrittformulare: ein neutraler Systemhinweis und die direkt folgende Auswahlkachel sind zwei eigenstaendige Inhaltsbausteine -> 16px Gruppenabstand. */ .ms-body > .bt-erkl + .bt-wahlz, .ms-body > .bt-info + .bt-wahlz, .ms-body > .bt-info + .bt-wertkachel{margin-top:var(--sp-5)} /* Vor einem folgenden Hinweis/Abschnitt/Aktionsblock entfaellt der 8px-Listennachlauf. Das gilt auch, wenn ein animierter Hoehenwrapper den optionalen Hinweis traegt; so addieren sich bei Ein-/Ausblenden niemals 8px Restabstand + 16px Gruppenabstand. */ .ms-body > .bt-wahlz:has(+ .bt-info), .ms-body > .bt-wahlz:has(+ .bt-eb2), .ms-body > .bt-wahlz:has(+ .bt-haupt), .ms-body > .bt-wahlz:has(+ .bt-hoehenbox), .ms-body > .bt-wahlz:has(+ .bt-feld){margin-bottom:0} /* Schalterkacheln sind echte Cards: Standardfuge 12 zwischen Geschwistern. Das gilt zentral fuer jede bt-Kartenseite, nicht nur fuer Zu- und Absagen. */ .pf-wrap .bt-body .kd-schaltz + .kd-schaltz{margin-top:var(--kachel-gap)} .tm-pflichtbox > .kd-schaltz{margin-top:var(--kachel-gap)} .bt-body .tm-wert + .tm-wert{margin-top:var(--kachel-gap)} /* Standard-Formularfeld: Vorlauf 16. Ein eingeblendeter eigener Abschnitt mit Eyebrow folgt dagegen dem 24/12-Abschnittsvertrag (siehe Datumsbereich unten). */ .bt-feld{margin-top:var(--sp-5)} /* Sportart-Auswahl und nachfolgende Fotoliste sind eigene Inhaltsbausteine. Der Listen-gap trennt nur die Fotos untereinander, nicht das Feld davor. */ .tm-cardmedia-body > .bt-feld + .tm-cardmedia-list{margin-top:var(--sp-5)} /* Eigenstaendige Wert-/Geldkarten folgen derselben 12px-Kachelfuge. Der erste Baustein bekommt keinen kuenstlichen Vorlauf. */ .bt-wertkachel + .bt-wertkachel, .dk-kachel + .bt-wertkachel, .bt-wertkachel + .dk-kachel{margin-top:var(--kachel-gap)} /* Rueckkehrdatum nach der Auswahl ist ein eigener Abschnitt, kein kompakter Unterpunkt: 24 bis zum Label; die Feldkomponente besitzt die 12 zum Input. Vorlauf innerhalb des Hoehenwrappers, damit Ein-/Ausblenden ihn mitnimmt. */ .kd-datumbox .bt-feld{margin-top:var(--sp-7);margin-bottom:0} /* Aufgaben-/Listenkarten: Darstellung in komponenten.css; der bestehende 8er-Nachlauf bleibt aeusserer Vertrag (V3C/3). */ .tm-aufg,.ab-z,.ab-wahl,.st-z,.dk-row,.vm-z{margin-bottom:var(--sp-3)} /* ═══ ABLAGE — Gruppen, Ordner, Dateien und Ablage-Bottom-Cards ═══ Screenkopf -> erster Inhalt 20; diese 20 traegt der Body selbst. Sein erstes Element bringt deshalb 0 eigenen Vorlauf mit. Abschnitte 24/12; Kartenlisten 8. */ .scr-titelblock + .ab-body > .ab-merk:first-child, .scr-titelblock + .ab-body > .bt-info:first-child{margin-top:0} .ab-body > .ab-merk:has(+ .mb-eb2), .ab-body > .ab-z:has(+ .mb-eb2), .ab-body > .ab-z:has(+ .bt-info), .ab-body > .ab-z:has(+ .mb-link){margin-bottom:0} .ab-body > .ab-merk + .mb-eb2{margin-top:var(--sp-7)} .ab-body > .bt-info + .ab-z, .ab-body > .bt-leerzustand + .ab-z, .ab-body > .bt-info + .ab-merk, .ab-body > .ab-speicher + .bt-info{margin-top:var(--sp-5)} .ab-speicher .k + .ab-balken{margin-top:var(--sp-4)} .ab-wahl:has(+ .bt-hoehenbox), .ab-body > .ab-z:has(+ .bt-zweit){margin-bottom:0} .ab-wahl + .bt-hoehenbox > .ab-fort{padding-top:var(--sp-5)} .ab-body > .bt-zweit{margin-top:var(--sp-7)} /* Ablage-Sheets: der Titel besitzt den kompletten 20er Abstand zum ersten Inhalt. */ .pf-wrap .pf-body .pf-page > .pf-title + .ab-card-body{padding-top:var(--sp-6)} .pf-wrap .ab-card-body > .bt-info:first-child, .pf-wrap .ab-card-body > .bt-hint:first-child, .pf-wrap .ab-card-body > .bt-feld:first-child, .pf-wrap .ab-card-body > .bt-eb2:first-child{margin-top:0} .ab-card-body > .bt-feld + .ab-trefferbox, .ab-card-body > .ab-trefferbox + .bt-feld, .ab-card-body > .bt-feld + .bt-wahlz{margin-top:var(--sp-5)} /* Suchfeld -> Trefferabstand liegt INNERHALB des animierten Hoehenbereichs, damit auch die 12px weich mit ein- und ausfahren statt beim Start hart aufzuspringen. */ .bt-suchz + .bt-hoehenbox > .ab-treffer-in{padding-top:var(--sp-4)} .ab-treffer-in > .bt-info:first-child{margin-top:0} .ab-card-body > .bt-wahlz:has(+ .bt-info){margin-bottom:0} .ab-treffer-in > .bt-wahlz:last-child{margin-bottom:0} /* ═══ TABELLE — Kennzahlgruppe und Ligatabelle ═══ Titel/Unterzeile -> erster Inhalt 20; diese 20 traegt der Body selbst. Sein erstes Element bringt deshalb 0 eigenen Vorlauf mit. Kennzahlen -> Abschnitt 24. */ .scr-titelblock + .tb-body > .tb-stats:first-child, .scr-titelblock + .tb-body > .tb-eb:first-child, .scr-titelblock + .tb-body > .bt-leerzustand:first-child, .scr-titelblock + .tb-body > .bt-info:first-child{margin-top:0} .tb-kopf + .tb-z{margin-top:var(--sp-3)} .tb-z{margin-bottom:var(--sp-3)} .tb-z:has(+ .tb-grau){margin-bottom:0} .tb-grau{margin-top:var(--sp-4)} /* ═══ PLATZBELEGUNG — Datum, Plätze und genau drei Platzkarten ═══ Router-Screen nutzt den appweiten Abschnittsvertrag: 24 davor / 12 danach. Die 20px vom Screenkopf bis DATUM traegt der Body; DATUM selbst beginnt mit 0. Platzkarten laufen im 8er Listenrhythmus; Titelzeile -> Slots 12px. */ .pr-body > .bt-eb2{margin:var(--sp-7) 0 var(--sp-4);padding-top:0;padding-bottom:0} .scr-titelblock + .pr-body > .bt-eb2:first-child{margin-top:0} .pr-platzkopf + .pr-slotraster{margin-top:var(--sp-4)} .pf-wrap .pf-body .pf-page > .bt-unter + .pr-card-body{padding-top:var(--sp-6)} .pr-card-body > .bt-wertkachel + .bt-info{margin-top:var(--sp-5)} .pr-card-body > .bt-hoehenbox + .bt-zweit,.pr-card-body > .bt-info + .bt-zweit{margin-top:var(--sp-7)} /* Kopfrollen (V3B): Rolle C schlichter Titel → direkte pf-eb = 16 · Rolle B Titel + Unterzeile → erster Inhaltsblock = 20 · Rolle A Bildkopf → erster Abschnitt = 24. */ /* Erste Ueberschrift einer Kartenseite unter Unterzeile/Body: 20. Alle Namen — ein fehlender Name liess die Ueberschrift direkt unter der Unterzeile kleben. */ /* Rolle C — schlichter Titelkopf: Titel direkt vor der ersten Ueberschrift, ohne Unterzeile/Bildkopf. 16 statt 20 (V3B); vorher stapelten sich hier 20 margin (Vertrag) + 20 padding (Profil-Patch) zu sichtbaren 40. */ .pf-wrap .pf-title + .pf-eb{margin-top:var(--sp-5)} /* Rolle B — Titelkopf mit Unterzeile: 2 Titel→Unterzeile, danach 20 zum ERSTEN Inhaltsblock — egal ob Eyebrow, Kachel, Leerzustand oder Body-Wrapper (N2). */ .pf-wrap .pf-title + .pf-sub + *{margin-top:var(--sp-6)} /* Profil · Mannschaften folgen: die gemeinsame Seitenkante gehoert hierher, nicht in das Screen-CSS. Kachelraster, Systemhinweis, Ladezustand und Mannschaftszeilen stehen damit exakt auf derselben appweiten Inhaltskante. */ .pf-follow-sportgrid,.pf-follow-info,.pf-follow-warte{margin-left:var(--edge);margin-right:var(--edge)} .pf-follow-team{width:calc(100% - 2 * var(--edge));margin-left:var(--edge);margin-right:var(--edge)} .pf-follow-empty{margin-top:var(--sp-6)} /* Benachrichtigungen: stabile Abstands-Eigentuemerschaft fuer Motion. Der Bereich startet wie Rolle B mit 20 unter Titel+Unterzeile; nach einer optionalen Push-Karte gilt der normale Abschnittsvorlauf 24. Jede Gruppe traegt ihren kompletten 24er Nachlauf selbst. Die negative Bereichskante neutralisiert nur den letzten davon. So aendert ein verbleibender Gruppenkopf beim Entfernen seines Vorgaengers NIE seinen eigenen Abstand und kann ohne Reflow-Sprung an derselben Geometrie weiterlaufen. */ .pf-nf-bereich{margin-top:var(--sp-7);margin-bottom:calc(-1 * var(--sp-7))} .pf-wrap .pf-title + .pf-sub + .pf-nf-bereich{margin-top:var(--sp-6)} .pf-nf-bereich .pf-nf-gruppenkopf{margin:0 0 var(--sp-4)} .pf-nf-bereich .pf-nf-gruppengap{height:var(--sp-7)} /* Schlichter Titelkopf mit direktem Leerzustand — Bestand 20 (aus profil.css uebernommen). */ .pf-wrap .pf-title + .pf-empty{margin-top:var(--sp-6)} /* Beteiligungsseiten kapseln Kader, optionalen Merkkasten und Liste gemeinsam in .tm-wer. Als erster Inhaltsblock nach der Unterzeile traegt diese Huelle denselben 20er Kopfabstand wie jede andere erste Kachel oder Eyebrow. */ .pf-wrap .bt-unter + .tm-wer{margin-top:var(--sp-6)} .pf-wrap .bt-unter + .pf-eb, .pf-wrap .pf-title + .bt-eb2,.pf-wrap .bt-unter + .bt-eb2, .pf-wrap .pf-title + .mb-eb2,.pf-wrap .bt-unter + .mb-eb2, .pf-wrap .pf-title + .kd-eb,.pf-wrap .bt-unter + .kd-eb, .pf-wrap .pf-title + .tm-meb,.pf-wrap .bt-unter + .tm-meb, .pf-wrap .pf-title + .tm-eb,.pf-wrap .bt-unter + .tm-eb, .pf-wrap .bt-body > .bt-abschnitt:first-child, .pf-wrap .bt-body > .pf-eb:first-child, .pf-wrap .bt-body > .bt-eb2:first-child, .pf-wrap .bt-body > .mb-eb2:first-child, .pf-wrap .bt-body > .kd-eb:first-child, .pf-wrap .bt-body > .tm-meb:first-child, .pf-wrap .bt-body > .tm-eb:first-child, .pf-wrap .bt-body > .tm-termin:first-child, .pf-wrap .bt-body > .tm-leer:first-child, .pf-wrap .mb-body > .mb-eb2:first-child, .pf-wrap .tm-gr > .tm-eb:first-child, .pf-wrap .kd-kbody > .kd-eb:first-child{margin-top:var(--sp-6)} /* Der Bildkopf steht 4 unter der Kopfzeile; danach beginnt der Abschnitt mit 24. */ .pf-wrap .mb-khead, .pf-wrap .kd-khead{padding-top:var(--sp-2)} /* M0d/A1 — Bildkopf ohne Vorlauf. Eine Kartenseite, die mit einem Personenbild beginnt, setzt den Kopf direkt an die Kopfzeile. Deckt alle drei produktiven Strukturen: kindHtml in der Team-Karte, ttPersonHtml, kindHtml in der Kader-Karte (dort ohne .bt-body, deshalb steht .kd-kind mit im Selektor). */ .pf-wrap .kd-kind .kd-khead, .pf-wrap .bt-body.kd-kindseite .kd-khead{padding-top:0} /* M0d/A3 — bestehende Mitgliederkarten behalten ihren historischen 20er Nachlauf. Die Ablage ist seit v3700 auf dem aktuellen 24/12-Vertrag und steht separat unten. */ .pf-wrap .mb-merk + .mb-eb2, .mb-body .mb-merk + .mb-eb2{margin-top:var(--sp-6)} .pf-wrap .mb-khead + .mb-eb2, .pf-wrap .mb-khead + .kd-eb, .pf-wrap .mb-khead + .tm-eb, .pf-wrap .kd-khead + .kd-eb, .pf-wrap .kd-kbody > .kd-eb:first-child{margin-top:var(--sp-7)} /* Abschnitt nach der Datumszeile der Beteiligungs-Karte: 20 (Beschluss 313; M2.9 aus team.css — der .tm-merk-Nachbar blieb dort, ihn fasst kein Vertrag an). */ .tm-wer .tm-wer-datum + .tm-eb{margin-top:var(--sp-6)} /* Erklaertext in einer Karte: 12 — und der Orts-Erklaersatz am Feld: 8 (M2.9 aus team.css; Werte bleiben bis zum UI-Audit). Reihenfolge hier ist Absicht: die Null-Regel nach einer Ueberschrift steht DANACH und gewinnt den Gleichstand. */ .pf-wrap .bt-body .tm-fuss{margin-top:var(--sp-4)} .pf-wrap .tm-fuss.ort{margin-top:var(--sp-3)} /* Profil-Kontextausnahmen gehoeren zum Abstandssystem, nicht zum Screen-CSS. */ .pf-lab + .pf-in{margin-top:var(--sp-4)} /* Profil-Feld -> naechste Abschnittsueberschrift: Das Feld besitzt bereits 12px Nachlauf. Weitere 12px ergeben zusammen exakt den appweiten 24px-Abschnittsvorlauf. Kein zusaetzliches Padding: sonst wurden daraus sichtbare 48px. */ .pf-field + .pf-eb{margin-top:var(--sp-4);padding-top:0} /* Feldhilfe gehoert4px zum Feld; der naechste Feldblock beginnt12px danach. */ .pf-feldsub + .pf-field{margin-top:var(--sp-4)} .pf-ladestatus{margin-inline:var(--edge)} .pf-ladestatus > .bt-info{margin:0} .pf-ladestatus > .bt-info + .bt-zweit{margin-top:var(--sp-5)} .pf-notes{gap:var(--kachel-gap)} .pf-team{margin:var(--sp-7) var(--edge) var(--sp-4);gap:var(--sp-1)} /* Der Gruppenkopf besitzt bereits Vor-/Nachlauf. Seine Eyebrow ist hier ein Textbaustein ueber der Autorenzeile, kein zweiter Abschnitt mit12px Nachlauf. */ .pf-team > .ez-eb{margin:0} .pf-nf .tx > .bt-zweit{margin-top:var(--sp-5)} .pf-ausz + .pf-eb{padding-top:var(--sp-5)} /* Kind-Persoenliche-Daten: wenn direkt ein gemeinsamer bt-info-Hinweis folgt, traegt ausschliesslich dessen 16px-Standard den Abstand. So addieren sich weder der 12px-Feldnachlauf noch der 12/8px-Kachelnachlauf ein zweites Mal. */ .pf-field.pf-vor-info{padding-bottom:0} .pf-wahl.pf-vor-info{margin-bottom:0} /* FEED „Neuer Beitrag": 20px vom Titelblock, echte Kacheln mit der gemeinsamen 12px-Geschwisterfuge; Feldhilfe 4px. Keine zweite gap-/margin-Quelle. */ .pf-wrap.bt .bt-body.fd-neu{display:flow-root;padding-top:var(--sp-6);padding-bottom:var(--sp-8)} .fd-neu > .fd-compose-hint{margin-top:var(--sp-2)} /* Erklaertext: nach einer Ueberschrift ohne Vorlauf, nach einem Feld mit 4. */ .pf-wrap .bt-eb2 + .tm-fuss, .pf-wrap .mb-eb2 + .mb-grau, .pf-wrap .kd-eb + .kd-grau{margin-top:0;padding-top:0} .pf-wrap .tm-fuss, .pf-wrap .mb-grau, .pf-wrap .kd-grau{margin-top:var(--sp-2)} /* Bestehende freie Schlusshinweise: 8. Direkt am Grundfeld gilt dagegen der verbindliche Feld -> Erklaertext-Abstand 4; keine screenlokale Ausnahme. */ .kd-warte.hin{margin-top:var(--sp-3)} .kd-grundz + .kd-warte.hin{margin-top:var(--sp-2)} /* Hauptknopf: 24 vor dem naechsten Abschnitt, kein eigener Nachlauf. */ .pf-wrap .tm-haupt + .bt-eb2, .pf-wrap .tm-haupt + .mb-eb2, .pf-wrap .tm-haupt + .kd-eb{margin-top:var(--sp-7)} /* Unterzeile neben dem runden Bild: Stufe sub, 2 unter dem Namen. */ /* (geteilte Regel — Komponentenanteil in komponenten.css) */ .pf-wrap .mb-khead .mb-ktx > i, .pf-wrap .kd-khead .kd-ktx > i{margin-top:var(--sp-1)} /* ═══════════════════════════════════════════════════════════════════════════ ABSCHNITTSUEBERSCHRIFTEN — die EINZIGE Quelle (Beschluss 313). 24 darueber, 12 darunter, in Screens wie in Karten. Kein Screen setzt eigene Werte. Zwei Faelle sind GLEICH hoch: Ueberschrift allein und Ueberschrift mit Plus rechts — der 26px-Knopf wird aus dem Zeilenfluss genommen, sonst waere der Abstand darunter um 13px groesser. Namen: .pf-eb .ez-eb .hm-eb .mr-eb .tm-eb .tm-meb .tp-eb .dt-eb .dk-eb .kd-eb .bt-eb2 .mb-eb2 ═══════════════════════════════════════════════════════════════════════════ */ /* (geteilte Regel — Komponentenanteil in komponenten.css) */ .pf-eb,.ez-eb,.hm-eb,.fd-eb,.mr-eb,.tm-eb,.tm-meb,.tp-eb,.dt-eb,.dk-eb, .kd-eb,.vm-eb,.bt-eb2,.mb-eb2{margin:var(--sp-7) 0 var(--sp-4)} /* Der erste Abschnitt eines Bereichs bringt keinen Vorlauf mit — den traegt der Kopf. */ /* .tm-grbox ist nur die Huelle fuer das weiche Auffahren — ihre erste Ueberschrift behaelt deshalb die 24 darueber. */ .pf-wrap .tm-grbox > .tm-eb:first-child{margin-top:var(--sp-7)} /* .pf-eb bewusst NICHT mehr generisch auf first-child genullt: das erste Kind eines technischen Wrappers (#pf-tagblock) ist keine "erste Ueberschrift eines Bereichs" — genau so klebte "Welcher Tag" an "Unbefristet" (V3B-Nachlauf N1). */ .ez-eb:first-child,.hm-eb:first-child,.mr-eb:first-child, .tm-eb:first-child,.tm-meb:first-child,.tp-eb:first-child,.dt-eb:first-child, .dk-eb:first-child,.kd-eb:first-child,.vm-eb:first-child,.bt-eb2:first-child, .mb-eb2:first-child{margin-top:0} /* Bestandserhaltende LEGACY-Contracts fuer MEHR (M2.9 aus mehr.css): der Bereich ist bewusst noch altes Layout; 24 und 16 sind der heutige sichtbare Stand, NICHT das endgueltige Designsystem — das UI-Audit darf beide neu bewerten. .erste steht nach dem :first-child-Block und gewinnt den Gleichstand als spaetere Quelle. */ .mr-eb.erste{margin-top:var(--sp-7)} /* Die Kachel besitzt hier keinen Nachlauf mehr. Der Abschnitt selbst traegt die vollen 24px; der alte 16px-Ausgleich war seit der Konsolidierung falsch. */ .mr-row + .mr-eb{margin-top:var(--sp-7)} /* Technischer Aufklappwrapper: erster Kontodatenabschnitt behaelt seinen Vorlauf. */ .st-kontodaten > .mb-eb2:first-child{margin-top:var(--sp-7)} .tm-zielhinweis > .bt-info{margin-top:var(--sp-6)} .tm-zielhinweis > .bt-info + .bt-zweit{margin-top:var(--sp-5)} .pf-follow-selectedbox > .bt-info:first-child{margin-top:0} .pf-follow-selectedbox > .bt-info,.pf-follow-sportbox > .bt-info{margin-inline:var(--edge)} .pf-follow-selectedbox > .bt-info + .pf-follow-selected-list{margin-top:var(--sp-5)} [data-follow-form] > [data-speicherfehler]{margin-inline:var(--edge)} [data-follow-form] > .pf-eb:first-child{margin-top:0} /* Erster Inhaltsblock eines SCREENS: 20 unter Titel plus Unterzeile (Beschluss 313). Ueberschrift, Kachel und Switcher folgen hier demselben gemeinsamen Rhythmus. */ .st-body > .mb-eb2:first-child, .ab-body > .mb-eb2:first-child, .scr-titelblock + .dk-body > .dk-eb:first-child, .scr-titelblock + .mb-body > .mb-eb:first-child, .dk-body > .dk-eb:first-child, .dk-body > .dk-merk + .dk-eb, .scr-titelblock + .tm-body > .tm-eb:first-child, .tm-body > .tm-eb:first-child, .scr-titelblock + .tm-body > .tm-setup-fortsetzen:first-child, .scr-titelblock + .hm-filter, .scr-titelblock + .fd-filter, .scr-titelblock + .tm-seg{margin-top:var(--sp-6)} /* Standard-Header v3765: erster echter Inhalt beginnt appweit 20px unter Titel/Untertitel. Legacy-Screens wie Jugendtraining verlieren dadurch ihre lokalen Zufallsabstaende. */ .scr-titelblock + .mb-suche, .scr-titelblock + .vm-schiene{margin-top:var(--sp-6)} /* Mitgliederfilter: gleiche Aussenkante wie Suche und Liste, eine Rasterstufe Abstand. */ .mb-schiene{margin:var(--sp-4) var(--edge) 0} /* Spieltagsplanung: Kopf, Arbeitsflaeche und Auswahlkarten folgen demselben Raster. */ .pf-wrap.nav-kopf.sp-verwaltung .pf-page > .bt-body.sp-plan > :first-child{margin-top:var(--sp-6)} .sp-event + .sp-einstellungen{margin-top:var(--sp-5)} .sp-einstellungen > .bt-feld{margin:0} .sp-plan .sp-sys{margin:0 0 var(--sp-4)} .sp-plan [data-sp-tip]{margin-top:var(--sp-2)} .sp-plan [data-sp-tip] > .bt-leerzustand{margin:0} .sp-choice + .sp-choice{margin-top:var(--sp-3)} .sp-pick-list{margin-top:var(--sp-5)} .sp-absagen,.sp-vorher{margin-top:var(--sp-6)} .sp-plan [data-sp-status]:not(:empty){margin-top:var(--sp-4)} /* Mannschaftsverwaltung: derselbe Switcher; 20 bis zum ersten Abschnitt. Seitenkanten und aeusserer Rhythmus bleiben im Vertrag. */ .vm-body{padding:var(--sp-6) var(--edge) var(--sp-8)} .vm-body > .vm-eb:first-child{margin-top:0} .vm-body > .bt-info:first-child{margin-top:0} .vm-neuladen{padding-top:var(--sp-6)} .vm-fehler{margin-top:var(--sp-3)} /* Formular-, Auswahl- und Bestaetigungsseiten starten gleich weit unter dem Kopf. Kaderseiten mit eigenem Kopf behalten ihren bestehenden Sondervertrag. */ .pf-wrap.vm-verwaltung .bt-body > .bt-feld:first-child, .pf-wrap.vm-verwaltung .bt-body > .vm-z:first-child, .pf-wrap.vm-verwaltung .bt-body > .bt-leerzustand:first-child, .pf-wrap.vm-verwaltung .bt-body > .bt-erkl:first-child{margin-top:var(--sp-6)} .pf-wrap.vm-verwaltung .bt-body > .vm-z:has(+ .bt-eb2), .pf-wrap.vm-verwaltung .bt-body > .vm-z:has(+ .mb-wegzeile){margin-bottom:0} .scr-titelblock + .mb-body, .scr-titelblock + .va-body, .scr-titelblock + .ab-body, .scr-titelblock + .pr-body, .scr-titelblock + .tb-body, .scr-titelblock + .st-body, .scr-titelblock + .dk-body{padding-top:var(--sp-6)} .scr-titelblock + .mb-eb2, .scr-titelblock + .bt-eb2{margin-top:var(--sp-6)} /* Wenn der Body selbst die 20px traegt, darf seine erste Eyebrow sie nicht ein zweites Mal addieren. */ .scr-titelblock + .ab-body > .mb-eb2:first-child, .scr-titelblock + .st-body > .mb-eb2:first-child, .scr-titelblock + .mb-body > .mb-eb:first-child, .scr-titelblock + .dk-body > .dk-eb:first-child{margin-top:0} /* Auswahl innerhalb eines bereits begonnenen TEAM-Kopfbereichs bleibt eine Stufe enger. */ /* Beschluss 313, zweite Haelfte: der erste Inhalt UNTER einer Abschnittsueberschrift bringt keinen eigenen Vorlauf mit. Sonst addiert er sich zu den 12 der Ueberschrift — genau so entstanden 28er und 32er Abstaende. Gilt fuer jedes Element, auch kuenftige. */ .pf-eb + *,.ez-eb + *,.hm-eb + *,.fd-eb + *,.mr-eb + *,.tm-eb + *,.tm-meb + *,.tp-eb + *, .dt-eb + *,.dk-eb + *,.kd-eb + *,.vm-eb + *,.bt-eb2 + *,.mb-eb2 + *{margin-top:0} /* Spielplan & Ergebnisse · Spieleransicht. Der Screen nutzt denselben 20px-Start, dieselbe Inhaltskante und denselben 12px-Kachelabstand wie der Rest der App. */ .spb-body{padding-left:var(--edge);padding-right:var(--edge);padding-bottom:var(--sp-8)} .scr-titelblock + .spb-body{padding-top:var(--sp-6)} .spb-list{display:grid;gap:var(--kachel-gap)} .spb-list > .ez-kachel{margin-top:0;margin-bottom:0} .spb-body > .bt-leerzustand:first-child, .spb-body > .bt-info:first-child{margin-top:0} .spb-body > .bt-info + .bt-zweit{margin-top:var(--sp-5)} .pf-wrap .pf-body .pf-page > .bt-unter + .spb-reportbody{padding-top:var(--sp-6)} .pf-wrap .spb-reportdetails > .bt-eb2:first-child{margin-top:var(--sp-7)} .spb-wahl + .spb-wahl{margin-top:var(--kachel-gap)} /* Mannschafts-Setup / Verwaltung Anmeldungen: der aeussere Rhythmus lebt nur hier. Setup-Body 24 unter Titel/Untertitel; die spaetere App-Variante bleibt 20. */ .ms-body{padding-top:var(--sp-7)} .ms-app .ms-body{padding-top:var(--sp-6)} /* Fortsetzen als App-Screen: derselbe Kopfvertrag wie Onboarding und Card. Fortschritt traegt Schrittzahl direkt in seiner Zeile; danach exakt 20 zum Titel. */ .scr-scroll.ms-app > .ms-page > .ms-kopf{padding-top:var(--sp-6)} .scr-scroll.ms-app > .ms-page > .ms-kopf .ms-titel{margin-top:0} /* Abschnittsüberschriften in Router-Mehrschrittformularen: derselbe appweite 24/12-Rhythmus wie in Karten. Direkter Folgeinhalt bringt durch den bestehenden bt-eb2-Contract 0 mit. */ .ms-body > .bt-eb2{margin:var(--sp-7) 0 var(--sp-4)} /* Eingebettete TEAM-Einrichtung: Fortschrittsbalken und „Schritt x von x“ nutzen 1:1 den gemeinsamen Kopf aus der Ersteinrichtung. Die Card gibt der Zeile 4px Puffer zur festen Kopfzeile und danach EINEN 20er Titelvorlauf. Feldhilfe steht 4px nach dem Mannschaftsnamen; der Abschluss entspricht dem bt-body-Standard. */ .pf-wrap.bt.ms-setup-card .ms-card-fort{padding-top:var(--sp-2)} .pf-wrap.bt.ms-setup-card .ms-card-fort > .ms-fortkopf{margin-top:0} .pf-wrap.bt.ms-setup-card .ms-card-fort .ms-progress{margin:0} .pf-wrap.bt.ms-setup-card .ms-card-fort + .ms-kopf{padding-top:var(--sp-6)} .pf-wrap.bt.ms-setup-card .ms-card-fort + .ms-kopf .ms-titel{margin-top:0} /* Ohne Fortschrittskopf gilt wie bei .pf-title der 4px-Nachlauf zum festen Kopf. */ .ms-setup-card .ms-app > .ms-kopf:first-child .ms-titel{margin-top:var(--sp-2)} .pf-wrap.bt.ms-setup-card .ms-name-input + .bt-info{margin-top:var(--sp-2)} .pf-wrap.bt.ms-setup-card .ms-body{padding-bottom:var(--sp-8)} .ms-body > .bt-eb2:first-child{margin-top:0} .ms-body > .bt-info:first-child, .ms-body > .bt-hint:first-child, .ms-body > .bt-erkl:first-child, .ms-body > .bt-feld:first-child{margin-top:0} .ms-body > .dk-kachel:first-child{margin-top:0} .ms-body > .ms-provider:first-child{margin-top:0} /* Mehrschritt-Formulare als Router-Screen übernehmen den Mannschafts-Setup-Kopf 1:1: 20 vom oberen Screenrand zum Fortschritt (besitzt .bt-fort.kopf), 20 zum Titel, 2 zur Emoji-Unterzeile und 20 von dort zum ersten Inhalt. Ein einfacher Erklärungstext als erster Body-Baustein bringt keinen zweiten Vorlauf mit. Keine screenlokalen Sonderabstände. */ .bt-screen-page > .ms-kopf + .bt-body{padding-top:var(--sp-6)} /* Eingebettete Lesedokumente besitzen mit .dk-body bereits ihre eigene Inhaltskante. Der Formular-Wrapper darf diese Kante weder verdoppeln noch einen zweiten Vorlauf addieren. */ .bt-body.lese{padding-left:0;padding-right:0} .bt-body.lese > .dk-body{padding-top:0} /* Auch Lesedokumente führen ihre Rückaktion unter dem vollständigen Inhalt. Da die Dokumentkante bereits .dk-body gehört, stellt der Vertrag sie hier einmal wieder her. */ .bt-body.lese > .bt-lese-foot{margin-left:var(--edge);margin-right:var(--edge)} .ms-backfoot{padding-top:var(--sp-7)} .ms-hilfe{margin-top:var(--sp-3)} .ms-sek{margin-top:var(--sp-4)} /* Ein Fehlerhinweis ist selbst der erste Inhaltsblock. Der danach wieder einsetzende Formular-/Providerblock beginnt als neue Gruppe mit 16, nicht direkt am Fehlertext. */ .ms-body > .bt-hint + .bt-eb2, .ms-body > .bt-hint + .ms-setupblock, .ms-body > .bt-hint + .ms-provider, .ms-body > .bt-hint + .ms-quellenkopf{margin-top:var(--sp-5)} /* Mannschafts-Setup: Aktionsrhythmus folgt dem gemeinsamen Onboarding-Vertrag. Letzter Inhalt -> Hauptaktion 24; Hauptaktion -> Zurueck 24. */ .ms-body > .bt-haupt{margin-top:var(--sp-7)} .ms-body > .ms-sek + .bt-haupt{margin-top:var(--sp-5)} /* Spielplan-Einrichtung: eingebettete Verbandsaktionen folgen demselben Onboarding-Vertrag wie die restliche Schiene. */ .ms-body .ms-plan-provider .bt-haupt{margin-top:var(--sp-7)} .ms-body > .ms-plan-provider + .bt-zweit{margin-top:var(--sp-7)} .ms-body > .ms-plan-provider + .bt-haupt{margin-top:var(--sp-7)} /* Kader-Provider folgen sportartenuebergreifend dem Fussball-Aufbau: Providerkopf -> 16 Info -> 24 Providerinhalt -> 24 manueller Alternativweg. */ .ms-body > .ms-quellenkopf + .ms-provider.kd-vbseite, .ms-body > .ms-quellenkopf + .ms-provider.ms-kader-sourceflow, .ms-body > .ms-quellenkopf + .bt-info + .ms-provider.kd-vbseite, .ms-body > .ms-quellenkopf + .bt-info + .ms-provider.ms-kader-sourceflow{margin-top:var(--sp-7)} .ms-body .ms-provider.kd-vbseite .bt-haupt, .ms-body .ms-provider.ms-kader-sourceflow > .bt-haupt{margin-top:var(--sp-7)} /* Ist die Provideraktion selbst der erste Inhalt, reichen die 24px des Providerblocks; es darf kein zweiter 24px-Vorlauf addiert werden. */ .ms-body .ms-provider.ms-kader-sourceflow > .bt-haupt:first-child, .ms-body .ms-provider.ms-kader-sourceflow > .ms-kader-laden:first-child, .ms-body .ms-provider.ms-kader-sourceflow > .bt-hint:first-child{margin-top:0} .ms-body > .ms-provider.kd-vbseite + .bt-zweit, .ms-body > .ms-provider.ms-kader-sourceflow + .bt-zweit, .ms-body > .ms-provider.kd-seite + .bt-zweit{margin-top:var(--sp-7)} .ms-body > .ms-breit-add + .bt-haupt{margin-top:var(--sp-7)} /* Gemeldete/uebernommene Personen sind echte Abschnittskoepfe: 24 davor, 12 danach. Als erster Inhalt im bereits 24px abgesetzten Providerblock faellt nur der Vorlauf weg. */ .ms-kader-sekkopf{margin:var(--sp-7) 0 var(--sp-4)} .ms-kader-sourceflow > .ms-kader-sekkopf:first-child{margin-top:0} .ms-kader-laden{margin-top:var(--sp-6)} .ms-kader-ergaenzen{margin-top:var(--sp-4)} .ms-familien{margin-top:var(--sp-7)} /* Automatik-Unterpunkt gehoert zur gewaehlten Fahrdienst-Kachel: 8px hinein und wieder hinaus. */ .ms-dienstoptionen > .bt-wahlz:has(+ .ms-dienstfahrerbox.an){margin-bottom:0} .ms-dienstfahrerbox.an .ms-dienstfahrer{margin:var(--sp-3) 0} /* Termin-Dienstzuweisung: Hinweis -> Personenauswahl 16; Liste -> Speichern 24. */ .bt-body > .bt-info + .dt-dienstliste{margin-top:var(--sp-5)} .bt-body > .dt-dienstliste + .bt-haupt{margin-top:var(--sp-7)} .dt-dienstliste > .bt-wahlz:last-child{margin-bottom:0} /* Dienste-Setup: Eyebrows folgen dem gemeinsamen Abschnittsvertrag. Der unsichtbare Wrapper gruppiert nur die zwei Wahlkacheln; die letzte bringt keinen Rest-Nachlauf mit. */ .ms-dienstoptionen > .bt-wahlz:last-child{margin-bottom:0} /* Abschluss: Checkliste -> zentraler Registrierungsblock 24. Innerhalb des Hero-Blocks bleibt die Hauptaktion 20 unter der Erklaerung, der kopierbare Link 12 darunter. Weitere Mannschaft ist eine eigene 24er Gruppe; Hinweis -> Aktion 12; App-Oeffnen beginnt danach wieder als eigenstaendige 24er Aktion. */ .ms-fertigliste + .ms-einladung{margin-top:var(--sp-7)} .ms-einladung .bt-haupt{margin-top:var(--sp-6)} .ms-einladung .ms-link{margin-top:var(--sp-4)} .ms-einladung + .ms-fertig-weitere{margin-top:var(--sp-7)} .ms-fertig-weitere > .bt-info:first-child{margin-top:0} .ms-fertig-weitere > .bt-zweit{margin-top:var(--sp-4)} .ms-fertig-weitere + .bt-zweit{margin-top:var(--sp-7)} /* Eingebettete Kader-/Verbandsbausteine erben ausserhalb einer pf-Karte sonst alte Mitglieder-Abstaende. Im Setup gilt derselbe Kartenvertrag: Erklaertext 4 nach Feld/Kachel, 0 direkt nach Eyebrow. Der Weg-Wrapper traegt allein seine 20px. */ .ms-body .kd-grau{margin-top:var(--sp-2)} .ms-body .kd-eb + .kd-grau{margin-top:0} .ms-body .kd-wegzeile > .kd-wegp.still{margin-top:0} .ms-body .kd-grau + .kd-vbfehler, .ms-body .bt-info + .kd-vbfehler{margin-top:var(--sp-5)} .ms-body .kd-vbfehler + .kd-karte, .ms-body .kd-vbfehler + .kd-stapel{margin-top:var(--sp-4)} .ms-body > .ms-plan-skip + .bt-hilfetext{margin-top:var(--sp-4)} /* Nummerierte Setup-Abschnitte: jeder neue Teilblock beginnt exakt 24px nach dem Vorblock; die Eyebrow selbst bringt innerhalb des Blocks keinen zweiten Vorlauf. */ .ms-body .ms-setupblock > .bt-eb2:first-child{margin-top:0} .ms-body .ms-setupblock + .ms-setupblock{margin-top:var(--sp-7)} .ms-body .ms-zeitenblock .ms-switchpad{padding-top:0} /* Sichtbarer Uhrzeit-Schalter und Zeitfelder sind zwei zusammengehoerige Inhalte: 16px. Ist der Schalter bei nur einem Trainingstag leer, entsteht bewusst kein Abstand. */ .ms-body .ms-switchbox:not(:empty) + .ms-zeitenbasis{margin-top:var(--sp-5)} .ms-body .ms-zeitenbasis > .bt-info:first-child{margin-top:0} .ms-body .ms-zeitenbasis > .ms-tzeile:first-child{margin-top:0} /* Jeder einzelne Trainingstag verwendet dieselben zwei Zeitfelder wie der gemeinsame Modus. Tageslabel -> Feldpaar12, naechster Tag24; keine schmale Seitenkachel. */ .ms-tzeile{margin-top:var(--sp-7)} .ms-tzeile > .tag + .ms-zeitpaar{margin-top:var(--sp-4)} /* Trainingsort: Abschnitts-Eyebrow traegt den Vorlauf. Segment -> Inhalt 12; innerhalb eines Saisonblocks ist Feldlabel/Ort ein kompakter 8er-Verbund. */ .ms-body .ms-ortseg{margin-bottom:var(--sp-4)} .ms-body .ms-ortdyn-in > .bt-feld:first-child{margin-top:0} .ms-body .ms-saisonort .bt-feld{margin-top:var(--sp-3)} .ms-body .ms-saisonhilfe{margin-top:var(--sp-3)} /* Anmeldungen: Tagesarbeit in getrennten Abschnitten, Standardfugen und Sheet-Rhythmus. */ .va-body > * + *{margin-top:var(--sp-7)} .va-section > .bt-eb2{margin-top:0;margin-bottom:var(--sp-4)} .va-list > .va-row + .va-row{margin-top:var(--kachel-gap)} .va-copy > b + small{margin-top:var(--sp-1)} .va-section > .bt-info + .va-row{margin-top:var(--sp-4)} .va-sheet > * + *{margin-top:var(--sp-5)} .va-sheet > .bt-eb2:first-child{margin-top:0} .va-sheet > .bt-eb2 + .bt-feld{margin-top:0} .va-choices > .bt-check + .bt-check{margin-top:var(--sp-3)} .va-created{padding-top:var(--sp-5)} .va-created > * + *{margin-top:var(--sp-4)} .va-invite-detail > * + *{margin-top:var(--sp-3)} /* ═══ VERBINDLICHER ABSCHLUSSABSTAND ═══ Endliche Hauptseiten: sichtbar 20px zwischen letztem Inhalt und Navigationsleiste. TERMINE ist als fortlaufende Timeline ausdruecklich ausgenommen und behaelt seinen kompakten Lade-/Scrollabschluss. Ohne Navigationsleiste entfaellt nur deren Geometrie. Die Tastaturregel bleibt der letzte Besitzer, damit Eingabefelder erreichbar bleiben. Cards: ausschliesslich .pf-body besitzt den unteren Abschluss — Safe Area + 4px, exakt wie die Profil-Card. Terminale Inhalts-Wrapper und ihr letztes Element duerfen keinen eigenen Restabstand addieren. Neue Seiten/Cards verwenden die kanonischen .scr-scroll-/ .pf-body-Huellen; screenlokale Abschlusswerte sind unzulaessig. */ :is(#sh-main,.sh-ueber-inhalt):not([data-screen="termine"]) > .scr-scroll{ padding-bottom:calc(env(safe-area-inset-bottom) + var(--nav-overlap) + var(--screen-end-gap)) } :root.ohne-leiste :is(#sh-main,.sh-ueber-inhalt):not([data-screen="termine"]) > .scr-scroll{ padding-bottom:calc(env(safe-area-inset-bottom) + var(--screen-end-gap)) } :root.tastatur :is(#sh-main,.sh-ueber-inhalt):not([data-screen="termine"]) > .scr-scroll{padding-bottom:var(--sp-7)} :is(#sh-main,.sh-ueber-inhalt):not([data-screen="termine"]) > .scr-scroll > :last-child{margin-bottom:0} :is(#sh-main,.sh-ueber-inhalt):not([data-screen="termine"]) > .scr-scroll > :last-child:is( .tm-body,.fd-body,.mr-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody, .dt-body,.va-body,.vm-body,.ms-body,.bt-body ){padding-bottom:0} :is(#sh-main,.sh-ueber-inhalt):not([data-screen="termine"]) > .scr-scroll > :last-child:is( .tm-body,.fd-body,.mr-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody, .dt-body,.va-body,.vm-body,.ms-body,.bt-body ) > :last-child{margin-bottom:0} :is(#sh-main,.sh-ueber-inhalt):not([data-screen="termine"]) > .scr-scroll > :last-child:is( .tm-body,.fd-body,.mr-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody, .dt-body,.va-body,.vm-body,.ms-body,.bt-body ) > :last-child:is(.fd-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody,.dt-body,.ms-body,.bt-body){ padding-bottom:0 } /* Ein Router-Mehrschrittformular besitzt zwischen scr-scroll und bt-body eine layoutfreie Bühne/Seite. Auch hier bleibt scr-scroll der einzige Abschlussbesitzer. */ :is(#sh-main,.sh-ueber-inhalt):not([data-screen="termine"]) > .scr-scroll > .bt-screen-stage:last-child > .bt-screen-page:last-child > .bt-body:last-child{padding-bottom:0} :is(#sh-main,.sh-ueber-inhalt):not([data-screen="termine"]) > .scr-scroll > .bt-screen-stage:last-child > .bt-screen-page:last-child > .bt-body:last-child > :last-child{margin-bottom:0} .pf-wrap .pf-body{padding-bottom:calc(env(safe-area-inset-bottom) + var(--card-end-gap))} .pf-wrap .pf-body > :last-child{margin-bottom:0} .pf-wrap .pf-body > :last-child:is( .tm-body,.fd-body,.mr-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody, .dt-body,.va-body,.vm-body,.ms-body,.bt-body ), .pf-wrap .pf-body > .pf-page:last-child > :last-child:is( .tm-body,.fd-body,.mr-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody, .dt-body,.va-body,.vm-body,.ms-body,.bt-body ){padding-bottom:0} .pf-wrap .pf-body > :last-child:is( .tm-body,.fd-body,.mr-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody, .dt-body,.va-body,.vm-body,.ms-body,.bt-body ) > :last-child, .pf-wrap .pf-body > .pf-page:last-child > :last-child{margin-bottom:0} .pf-wrap .pf-body > :last-child:is( .tm-body,.fd-body,.mr-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody, .dt-body,.va-body,.vm-body,.ms-body,.bt-body ) > :last-child:is(.fd-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody,.dt-body,.ms-body,.bt-body), .pf-wrap .pf-body > .pf-page:last-child > :last-child:is( .tm-body,.fd-body,.mr-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody, .dt-body,.va-body,.vm-body,.ms-body,.bt-body ) > :last-child:is(.fd-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody,.dt-body,.ms-body,.bt-body){ padding-bottom:0 } .pf-wrap .pf-body > :last-child:is( .tm-body,.fd-body,.mr-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody, .dt-body,.va-body,.vm-body,.ms-body,.bt-body ) > :last-child:is(.fd-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody,.dt-body,.ms-body,.bt-body) > :last-child, .pf-wrap .pf-body > .pf-page:last-child > :last-child:is( .tm-body,.fd-body,.mr-body,.mb-body,.dk-body,.st-body,.ab-body,.kd-kbody, .dt-body,.va-body,.vm-body,.ms-body,.bt-body ) > :last-child{margin-bottom:0} /* ═══ KACHEL-OBERFLAECHENVERTRAG · v3944 ═══ Verbindlich fuer die gesamte App — TERMINE, PROFIL, TEAM, FEED, MEHR, Kader/Mitglieder, Tabellen, Dokumente, Ablage, Setups und alle kuenftigen echten Kacheln. 1. Eine neutrale Kachel nutzt IMMER: background-color: var(--kachel) — ohne zweite neutrale Card-Grundfarbe, background-image: var(--kachel-material-verlauf), box-shadow: var(--kachel-material-schatten), die bestehende weiche Card-Rundung (normal var(--r-card)). 2. Neue Kacheln beginnen mit .ez-kachel oder einer bestehenden gemeinsamen Kachelkomponente aus komponenten.css. Keine screenlokale Kopie der Materialwerte. 3. Neutrale Kacheln haben KEINE sichtbare Konturlinie. Border ist ausschliesslich semantischer Zustand: Auswahl, Warnung, Fehler oder bewusst markierte Aktion. 4. Pressed/Active darf die Kachel kurz abflachen (box-shadow:none); Inhalt, Masse und Rundung duerfen dabei nicht springen. 5. Eingabefelder, Pills, Buttons, Info-/Leerkaesten sind KEINE Kacheln und erben den Kachelvertrag nicht automatisch. 6. Foto-Kacheln duerfen eine eigene Medien-Buehne besitzen; der Informationsbereich darunter bleibt jedoch auf derselben Kachel-Materialbasis. Auch Termin-Hero, Terminzeilen, Datumskacheln und Schiri-Kacheln nutzen im hellen Modus dieselben drei Materialrollen; die Foto-Buehne selbst wird nicht uebermalt. 7. Direkte echte Kachel-Geschwister stehen IMMER var(--kachel-gap) = 12px auseinander. Der Abstand besitzt genau EINE Quelle: bei normalen Listen der Geschwistervertrag, bei Grid/Flex-Kachellisten deren gap. Bestehende Rest-margins duerfen sich nicht addieren. Team-Hintergrundwechsel: Porträts alle 3000ms, Wappen alle 3600ms; Überblendung ausschließlich Opacity über --motion-team-background (900ms, ease-in-out). Kein Layoutwechsel. Laufender Takt bleibt bei weiteren Bild-Loads erhalten. Pause, Reduced Motion sowie unsichtbare/überdeckte Kacheln stoppen den Wechsel. 8. Die vier Navigationskacheln im Team-Hub dürfen zusätzlich einen statischen Sportfarbverlauf auf ::before tragen. Grundlage, Schatten, Radius und Abstände bleiben neutraler Kachelvertrag. Keine Auswahl-/Statusbedeutung; Text liegt über der Dekoration. Farbrollen --team-kachel--verlauf sind vollständig und unabhängig in beiden Paletten definiert. Der Farbverlauf selbst bleibt statisch. Kader/Spieltreffs dürfen den Verlauf durch dekorative wechselnde Fotos/Wappen ersetzen: absolut in derselben Kachelfläche, gerundet beschnitten, von der Ecke zum Text ausgeblendet. Eigene Masken-/Deckkraftrollen in beiden Paletten. Text/Emoji bleiben darüber und alle Maße unverändert. Pause und Reduced Motion, sichtbarkeitsgebundener Ablauf sowie vollständiges Aufräumen sind verpflichtend. Die Farb-/Materialwerte gehoeren ausschliesslich nach theme-dark.css bzw. theme-light.css, getrennt je Modus. tokens.css enthaelt nur gemeinsame Geometrie. Historische helle Sonderoberflaechen werden in theme-light.css an dieselben Rollen gebunden. test/e2e/tile_material.test.js prueft die berechneten Browserwerte der echten Termine und aller erfassten Kachelfamilien; neue Familien dort ergaenzen. Die kanonische neue Huelle .ez-kachel gehoert nach komponenten.css. Dieser Vertrag definiert die Pflicht, nicht eine zweite Kopie der Werte. */ /* Kachel-Fuge: genau ein Besitzer. Vor einer weiteren Kachel entfaellt ein historischer Nachlauf der ersten; die zweite bekommt exakt die Termine-Referenzfuge. */ :where( .ez-kachel, .bt-wertkachel, .tm-aufg, .ab-z, .ab-wahl, .st-z, .dk-row, .vm-z, .tm-wahlz, .mb-wahlz, .tb-wahlz, .bt-wahlz, .pf-row, .pf-wahl, .pf-ausz, .pf-follow-team, .fd-post, .mr-row, .tm-men.kachel, .dt-abl, .tm-merk, .tm-kachel, .tm-termin, .tm-pz, .mb-row, .mb-karte .mb-z, .dk-thema, .pr-platzkarte, .tb-z, .ms-kader-person, .dt-uebungkarte ):has(+ :where( .ez-kachel, .bt-wertkachel, .tm-aufg, .ab-z, .ab-wahl, .st-z, .dk-row, .vm-z, .tm-wahlz, .mb-wahlz, .tb-wahlz, .bt-wahlz, .pf-row, .pf-wahl, .pf-ausz, .pf-follow-team, .fd-post, .mr-row, .tm-men.kachel, .dt-abl, .tm-merk, .tm-kachel, .tm-termin, .tm-pz, .mb-row, .mb-karte .mb-z, .dk-thema, .pr-platzkarte, .tb-z, .ms-kader-person, .dt-uebungkarte )){margin-bottom:0} :where( .ez-kachel, .bt-wertkachel, .tm-aufg, .ab-z, .ab-wahl, .st-z, .dk-row, .vm-z, .tm-wahlz, .mb-wahlz, .tb-wahlz, .bt-wahlz, .pf-row, .pf-wahl, .pf-ausz, .pf-follow-team, .fd-post, .mr-row, .tm-men.kachel, .dt-abl, .tm-merk, .tm-kachel, .tm-termin, .tm-pz, .mb-row, .mb-karte .mb-z, .dk-thema, .pr-platzkarte, .tb-z, .ms-kader-person, .dt-uebungkarte ) + :where( .ez-kachel, .bt-wertkachel, .tm-aufg, .ab-z, .ab-wahl, .st-z, .dk-row, .vm-z, .tm-wahlz, .mb-wahlz, .tb-wahlz, .bt-wahlz, .pf-row, .pf-wahl, .pf-ausz, .pf-follow-team, .fd-post, .mr-row, .tm-men.kachel, .dt-abl, .tm-merk, .tm-kachel, .tm-termin, .tm-pz, .mb-row, .mb-karte .mb-z, .dk-thema, .pr-platzkarte, .tb-z, .ms-kader-person, .dt-uebungkarte ){margin-top:var(--kachel-gap)} /* Gruppen mit echtem CSS-gap besitzen den Abstand selbst; dort sind Zusatzmargins verboten. */ .kd-stapel{gap:var(--kachel-gap)} .kd-stapel > .kd-karte{margin-top:0;margin-bottom:0} /* Gemeinsame explizite Abschnitte: eine Inhaltskante, 24/12 fuer Ueberschriften. Die Gruppe kapselt margin-collapse; echte Karten besitzen ausschliesslich 12px gap. Eingabefelder sind dagegen keine Karten und stehen 16px auseinander. */ .scr-titelblock + .bt-body{padding-top:var(--sp-6)} .bt-abschnitt{display:flow-root;margin:0} .bt-abschnitt + .bt-abschnitt{margin-top:var(--sp-7)} .bt-abschnitt > .bt-eb2{margin:0 0 var(--sp-4)} .bt-abschnitt > .dk-kachel, .bt-abschnitt > .bt-info{margin-top:0} .bt-abschnitt > .bt-leerzustand{margin-top:0} .bt-kachelliste{display:grid;gap:var(--kachel-gap)} .bt-kachelliste > .ez-kachel,.bt-kachelliste > .bt-info, .bt-kachelliste > .bt-wahlz,.bt-kachelliste > .bt-wertkachel,.bt-kachelliste > .dk-kachel{margin-top:0;margin-bottom:0} .bt-formliste{display:grid;gap:var(--sp-5)} .bt-formliste > .bt-feld{margin-top:0;margin-bottom:0} .bt-body > .bt-abschnitt + .bt-haupt{margin-top:var(--sp-7)} .bt-feldhilfe{margin-top:var(--sp-2)} /* Mitglied anlegen: materialisierte Eingabekacheln teilen die 12px-Kachelfuge. */ .mb-neu .mb-feld{margin-bottom:var(--kachel-gap)} :where(.pf-trainerliste,.pf-follow-list,.pf-follow-sportgrid,.tm-liste,.tm-kacheln, .ms-sportgrid,.ms-kader-auswahl,.ms-kader-pruefliste,.dt-uebungliste) > :where(.pf-trainerzeile,.pf-follow-team,.ms-sportcard,.tm-pz,.tm-kachel,.ms-kader-person,.dt-uebungkarte){ margin-top:0;margin-bottom:0 } /* Wappen-Asset-Vertrag · v3619 Die 105 Vereinswappen sind auf Asset-Ebene auf eine quadratische 88%-Safe-Area normalisiert. Nur SVGs, deren interne Illustrator-Geometrie beim viewBox-Umbau semantisch anders clippt, erhalten HIER eine zentrale optische Korrektur. Niemals screenlokale Wappen-Offsets ergänzen. Liegt im Layer vertraege, damit die Korrektur wie bisher (unlayered) gegen Screen-Transforms gewinnt. */ img[src*="/wappen/warendorfersportunion.svg"]{transform:scale(.88);transform-origin:50% 50%} /* Vereinsmeisterschaften: Abschnitts-, Kachel- und Formularbeziehungen. Die komplette gemeinsame Filter-Schiene besitzt ihre eigene Aussenkante; im eingerueckten Body wird ausschliesslich dessen doppelte Kante ausgeglichen. */ .vc-body > .hm-filter{margin-inline:calc(-1 * var(--edge))} /* Filterkopf bleibt bestehen; nur diese Inhaltsebene erbt den Abschnittsrhythmus. */ .vc-body > .vc-results-stage{margin-top:var(--sp-7)} .vc-results > * + *{margin-top:var(--sp-5)} .vc-results > .vc-heading:first-child{margin-top:0} .scr-titelblock + .vc-body{margin-top:var(--sp-6)} .vc-body > * + *,.vc-sheet > * + *{margin-top:var(--sp-5)} .vc-body .vc-heading,.vc-sheet .vc-heading{margin-top:var(--sp-7);margin-bottom:var(--sp-4)} .vc-list > * + *,.vc-sheet [data-participants] > * + *{margin-top:var(--kachel-gap)} .vc-match > * + *{margin-top:var(--sp-3)} .vc-match .vc-foot{margin-top:var(--sp-4)} .vc-hero > * + *,.vc-panel > * + *,.vc-person > * + *{margin-top:var(--sp-4)} .vc-sheet{padding-top:0} /* Beitritt-Haken auch hier: Eyebrow-Abstand kommt nur aus der Überschrift. */ .vc-sheet > .vc-heading + .bt-check{margin-top:0} .vc-sheet [data-sets] > * + *{margin-top:var(--sp-4)} /* Ranglistenpodest und separate Zeilen: Abstand bleibt im gemeinsamen Vertrag. */ .vc-podium,.vc-rankcards{margin-bottom:0} .vc-podium-place > * + *{margin-top:var(--sp-2)} .vc-rankcards{gap:var(--kachel-gap)} .vc-rankcards > .vc-rankcard + .vc-rankcard{margin-top:0} .vc-rankcopy > b + small{margin-top:var(--sp-1)} .vc-body > .vc-manage-heading + .vc-rankcards{margin-top:0} .vc-ranking .vc-rank:first-child{padding-top:0} .vc-ranking .vc-rank:last-child{padding-bottom:0} .vc-note + .vc-ranking{margin-top:var(--sp-4)} /* Kabinenordnung: Titelblock20, Abschnitte24, Kartenfuge12 aus dem Materialvertrag. */ /* All document readers: eyebrows OUTSIDE tiles, 24 before / 12 after. Section wrappers own the rhythm; no nested independent card stacks. */ .pf-wrap.bt .dk-doc-reader, .pf-wrap.bt .bt-body.dk-doc-reader{padding-top:var(--sp-6);padding-bottom:var(--sp-8)} .dk-doc-section + .dk-doc-section{margin-top:var(--sp-7)} .dk-doc-eyebrow{margin:0 0 var(--sp-4)} .dk-doc-text>*+*{margin-top:var(--sp-3)} .dk-doc-text>p+p,.dk-doc-text>p+ul,.dk-doc-text>ul+p,.dk-doc-text>.dk-thema+.dk-thema{margin-top:var(--sp-3)} .dk-doc-text>.dk-doc-subheading{margin:var(--sp-4) 0 var(--sp-3)} .dk-doc-text>.dk-doc-nav{margin-top:var(--sp-5)} .mr-ko .mr-ko-schluss{margin:var(--sp-7) 0 0} } @layer vertraege{ /* Vereinsmeisterschaft: äußere Eyebrows, gemeinsame Kachel-Fugen und Untertitel. Keine eigenen Paletten: beide Modi beziehen ausschließlich semantische Rollen. Rangliste und feste Start-Setzung bleiben getrennte Ansichten. */ .vc-next > * + *{margin-top:var(--sp-4)} .vc-body > .vc-nav + .vc-nav{margin-top:var(--kachel-gap)} .vc-sheet [data-availability] > * + *{margin-top:var(--kachel-gap)} .vc-sheet .vc-sethead + [data-sets]{margin-top:var(--sp-4)} .vc-body > .vc-heading:first-child,.vc-sheet > .vc-heading:first-child{margin-top:0} /* Runden: Eyebrow bleibt außen, aufgeklappte Spiele behalten ihre Standardfuge. */ .vc-round + .vc-round{margin-top:var(--kachel-gap)} .vc-round-inner{padding-top:var(--sp-4);padding-bottom:var(--sp-2)} .vc-round-inner > .vc-note + .vc-ranking{margin-top:var(--sp-4)} /* Partie-Details: Vergleichskacheln mit einer einzigen Rasterfuge; Textabstände wie Profil. */ .vc-outcomes > .vc-outcome{margin-top:0;margin-bottom:0} .vc-appointment-copy > .vc-note,.vc-path small{margin-top:var(--sp-2)} /* Texttrenner-Vertrag: Jeder kleine Mittelpunkt (U+00B7) erhält links und rechts exakt zwei geschützte Leerzeichen (U+00A0). JS-Literale schreiben dafür \u00a0\u00a0\u00b7\u00a0\u00a0. Das gilt auch für Untertitel und zusammengesetzte Metadaten, niemals für Statuspunkte, Aufzählungszeichen oder Parser-RegExp. HTML-Quelltext verwendet dieselben Zeichen oder   ·  . CSS-generierte Trenner verwenden \00a0\00a0\00b7\00a0\00a0 ohne Zusatzmargen. Kein Laufzeit-Observer und keine Änderung von Nutzereingaben/gespeicherten Daten. test/frontend/middle_dot.test.js schützt bestehende und neue Textbausteine. */ /* Turnierleitung: Eyebrow außen, Kachelfugen und Aktionsabstände wie Profil. */ .vc-body > .vc-manage-heading{margin-top:var(--sp-7);margin-bottom:var(--sp-4)} .vc-body > .vc-manage-heading:first-child{margin-top:0} .vc-body .vc-manage-heading > .vc-heading{margin:0} .vc-body > .vc-manage-heading + .vc-manage-list{margin-top:0} .vc-manage-list > * + *{margin-top:var(--kachel-gap)} .vc-body > .vc-manage-actions{margin-top:var(--sp-7)} .vc-manage-actions > * + *{margin-top:var(--sp-4)} /* Verlauf: Tagesgruppen, Fugen und Textbeziehungen nach Materialvertrag. */ .vc-history-day + .vc-history-day{margin-top:var(--sp-7)} .vc-history-day > .vc-heading{margin-top:0} .vc-timeline{margin:0} .vc-timeline-item + .vc-timeline-item{margin-top:var(--kachel-gap)} .vc-timeline-card > * + *{margin-top:var(--sp-2)} .vc-timeline-card > .vc-timeline-actor{margin-top:var(--sp-4)} /* Spielplanprüfung: externe Eyebrows, gemeinsame Fugen, keine neue Kachelfamilie. */ .vc-plan-groups > * + *{margin-top:var(--sp-4)} .vc-plan-groups > .vc-round{margin-top:var(--sp-7)} .vc-plan-groups > .vc-heading:first-child{margin-top:0} .vc-plan-deadline + .vc-list{margin-top:var(--sp-4)} } @layer vertraege{ .ttr-body .bt-kachelliste > .bt-info{margin:0} /* Ranglisten-Grid besitzt seine Kachelfuge; keine zusätzlichen Zeilenmargins. */ .ttr-body .vc-rankcards,.ttr-body .vc-rankcards > .ttr-row{margin:0} .ttr-body > .ttr-results{margin-top:var(--sp-7)} .vc-rankcards + .ttr-more{margin-top:var(--kachel-gap)} } /* Klar-Termine: ein vertikaler Rhythmus fuer Hero, Training, Spieltag und Spieltreff. Variante liegt wie ihre Komponenten im Zustandslayer; Owner bleibt contracts.css. */ @layer zustaende{ [data-design="klar"] .hm-hero .hm-hero-tx > * + *, [data-design="klar"] .hm-row .hm-main > * + *, [data-design="klar"] .hm-hero .hm-acts, [data-design="klar"] .hm-hero .hm-fuss > * + *{margin-top:var(--sp-4)} [data-design="klar"] .hm-row .hm-main > :first-child, [data-design="klar"] .hm-hero .hm-hero-tx > :first-child{margin-top:0} [data-design="klar"] .hm-row .ez-duel{margin-bottom:0} [data-design="klar"] .hm-row.spiel .ez-duel{margin-inline:calc(-1 * var(--row-x));padding:var(--sp-4) var(--row-x)} [data-design="klar"] .hm-zeile:has(.ez-list-row) .hm-datecol{padding-top:var(--row-x)} [data-design="klar"] .hm-zeile:has(.ez-list-row) .hm-date{padding-top:0;padding-bottom:0} } /* Training: Hero behält seinen Rhythmus; kleine Karte folgt Entwurf A. */ @layer zustaende{ [data-design="klar"] .hm-hero.tr .hm-hero-tx > .hm-zahl, [data-design="klar"] .hm-row.tr .hm-main > .hm-zahl{margin-top:var(--sp-5)} [data-design="klar"] .hm-hero.tr .hm-acts{margin-top:var(--sp-6)} [data-design="klar"] .hm-row:is(.tr,.kf) .hm-main > .hm-acts, [data-design="klar"] .hm-row.spiel .hm-main > .hm-match-place + .hm-acts{margin-top:var(--sp-5)} [data-design="klar"] .hm-row.tr{padding:var(--sp-5) var(--row-x)} /* Match cards keep their existing inset when using the shared sport corners. */ [data-design="klar"] .hm-row.spiel{padding:var(--row-x)} } /* Zeit-/Duellblock und Ort: eine enge 8px-Beziehung in allen Terminkarten. */ @layer zustaende{ [data-design="klar"] .hm-hero .hm-hero-tx > .hm-line, [data-design="klar"] .hm-row .hm-main > .hm-line, [data-design="klar"] .hm-hero .hm-hero-tx > .hm-fuss{margin-top:var(--sp-3)} } /* Kleine Trainingskarte: Ort unmittelbar unter der Zeit, lange Namen lesbar. */ @layer zustaende{ [data-design="klar"] .hm-row.tr .hm-main > .hm-line{margin-top:var(--sp-3);line-height:1.45;align-items:baseline} [data-design="klar"] .hm-row.tr .hm-line span{white-space:normal;overflow-wrap:anywhere} } /* Ereignisdetail: bestehende Kopf-/Abschnittsabstände, offene zusammengehörige Zeiten. */ @layer zustaende{ [data-design="klar"] .ez-event-header h2{margin:0} [data-design="klar"] .ez-event-header p{margin:var(--sp-2) 0 0} [data-design="klar"] .ez-event-header + *{margin-top:var(--sp-6)} [data-design="klar"] .ez-event-photo + .ez-event-overview, [data-design="klar"] .ez-event-duel + .ez-event-overview, [data-design="klar"] .ez-event-host + .ez-event-overview{margin-top:var(--sp-6)} [data-design="klar"] .ez-event-host{margin:var(--sp-4) 0 0} [data-design="klar"] .ez-event-overview{padding:var(--sp-6) 0} [data-design="klar"] .ez-event-meeting, [data-design="klar"] .ez-event-response{margin-top:var(--sp-6)} [data-design="klar"] .ez-event-response .dt-acts{margin-top:var(--sp-4)} [data-design="klar"] .ez-event-detail .dt-abl + .dt-abl, [data-design="klar"] .ez-event-detail .dt-dienstkachel + .dt-dienstkachel{margin-top:0} } @layer zustaende{ [data-design="klar"] .ez-event-matchdate{margin:var(--sp-4) 0 0} [data-design="klar"] .ez-event-matchdate + .ez-event-overview{margin-top:var(--sp-6)} [data-design="klar"] .ez-event-overview > .ez-event-meeting:first-child, [data-design="klar"] .ez-event-overview > .ez-event-response:first-child{margin-top:0} [data-design="klar"] .ez-event-duty{padding:var(--sp-5) var(--row-x);margin:0} } @layer zustaende{ [data-design="klar"] .ez-match-poster{padding-top:var(--sp-5);padding-bottom:var(--sp-6)} [data-design="klar"] .ez-match-meta .ez-event-matchdate{margin:0} [data-design="klar"] .ez-match-poster .ez-event-duel{margin-top:var(--sp-5)} [data-design="klar"] .ez-match-end{margin:var(--sp-4) 0 0} [data-design="klar"] .ez-match-poster + .ez-event-overview{margin-top:var(--sp-6)} } @layer vertraege{ /* Register: die bestehende Leiter 24/12 bleibt bestehen. Offene Listen haben keine Materialfuge; ihre Zeilen behalten das gemeinsame 12px-Innenmass. */ [data-sheet-design="register"] .pf-row{margin-bottom:0} [data-sheet-design="register"] .ez-register-profile{margin-top:var(--sp-6);padding-top:var(--sp-4);padding-bottom:var(--sp-5)} [data-sheet-design="register"] .ez-register-profile.ez-register-card{padding-top:var(--row-x);padding-bottom:var(--row-x)} } @layer vertraege{ /* Gruppen besitzen die Aussenkante; Eyebrows erben weiterhin den 24/12-Vertrag. */ [data-sheet-design="register"] .ez-register-list{margin-left:var(--edge);margin-right:var(--edge)} [data-sheet-design="register"] .ez-register-list > .pf-row, [data-sheet-design="register"] .ez-register-list > .pf-empty{margin-left:0;margin-right:0} } @layer vertraege{ /* Offene Menuegruppen sind keine getrennten Kacheln. Das vorhandene --row-y polstert Inhalte beidseits der Haarlinie gleichmaessig; keine Zusatzfuge. */ [data-sheet-design="register"] .ez-register-list > .pf-row + .pf-row{margin-top:0} } @layer vertraege{ /* Sicherheitsformular: eine Abstandseigentümerin; Hinweise und Eingaben 16px, Abschnittsüberschriften unverändert 24px davor / 12px danach. */ .pf-account-flow{display:flow-root} .pf-account-flow > * + *{margin-top:var(--sp-5)} .pf-account-flow > .pf-sub{padding-top:0} .pf-account-flow > .pf-field{padding-bottom:0} .pf-account-flow > .pf-eb{margin-top:var(--sp-7);margin-bottom:var(--sp-4);padding-top:0} .pf-account-flow > .pf-eb + *{margin-top:0} .pf-account-flow > .ez-outline-action{margin-inline:var(--edge);width:calc(100% - 2 * var(--edge))} .pf-affiliations{margin-inline:var(--edge);display:grid;gap:var(--sp-4)} .pf-affiliation{padding:var(--row-y) var(--row-x)} .pf-affiliation-teams{margin-top:var(--sp-4);margin-left:calc(var(--kreis-liste) + var(--sp-4))} .pf-affiliation-teams li{padding-block:var(--sp-3)} .pf-affiliation-teams li:first-child{padding-top:0} .pf-affiliation-teams li:last-child{padding-bottom:0} } @layer vertraege{ /* Kinderprofil: gesamter Trainingsblock in einer Kachel; Abschnittsrhythmus 24/12. */ .pf-child-training{margin:0 var(--edge);padding:0 var(--sp-5)} .pf-child-training > .pf-child-week,.pf-child-training > .pf-empty{margin:0} } @layer vertraege{ /* Push-Einrichtung ist eine eigene Aktion unter dem Postfach, kein Teil des Leerzustands. */ .pf-push-panel{margin:var(--sp-7) var(--edge) 0;padding:var(--sp-4)} .pf-push-panel .ez-outline-action{margin-top:var(--sp-4)} } @layer vertraege{ /* Mannschaften folgen: Kasten besitzt die Kante; Innenzeilen ohne zweiten Einzug. */ .pf-follow-selectedbox,.pf-follow-switch,.pf-follow-note{margin-inline:var(--edge)} .pf-follow-selectedbox{padding:0} .pf-follow-selectedbox:has(> .pf-follow-selected-list){padding:0 var(--sp-4)} .pf-follow-selectedbox .pf-follow-team{width:100%;margin-inline:0} .pf-follow-selectedbox > .pf-empty,.pf-follow-selectedbox > .pf-follow-warte,.pf-follow-selectedbox > .bt-info{margin-inline:0} .pf-follow-note{margin-top:var(--sp-7);margin-bottom:0} } @layer vertraege{ /* Abschnittsachse: Eyebrows bleiben stehen, Feldlabel/Feld/Feldhilfe 8px eingerückt. Opt-in für Persönliche Daten; entspricht der sichtbaren Profil-Home-Achse. */ .ez-section-inset > .pf-field, .ez-section-inset > .pf-feldsub, .ez-section-inset > .pf-code{padding-inline-start:calc(var(--edge) + var(--sp-3))} .ez-section-inset > .pf-msg{margin-inline-start:calc(var(--edge) + var(--sp-3))} } @layer vertraege{ .ez-section-inset > .ez-outline-action{margin:var(--sp-7) var(--edge) 0 calc(var(--edge) + var(--sp-3));width:calc(100% - 2 * var(--edge) - var(--sp-3))} } @layer vertraege{ .ez-section-inset > .bt-info{width:auto;margin-inline:calc(var(--edge) + var(--sp-3)) var(--edge)} } @layer vertraege{ /* Ein Feld nach einem erklärenden Infokästchen beginnt mit der gemeinsamen Hinweisfuge. */ .ez-section-inset > .bt-info + .pf-field{margin-top:var(--sp-5)} } @layer vertraege{ /* Spieltagsdetails: gleiche 8px-Inhaltsachse wie Profil, Abschnittslabels bleiben links. */ .ez-event-detail.ez-section-inset > :is(.ez-match-poster,.ez-event-dutygroup,.ez-event-location,.dt-breit,.dt-note,.dt-fuss), .ez-event-detail.ez-section-inset .ez-event-meeting, .ez-event-detail.ez-section-inset .ez-event-response .dt-acts{margin-inline-start:var(--sp-3)} } @layer zustaende{ /* Freigegebene Fotokante: Wappen-/Kreismitte an der Fotokante, kompakter Anschluss. */ [data-design="klar"] .hm-hero.ez-match-hero .hm-hero-body{padding-top:var(--sp-5);padding-bottom:var(--sp-5)} .ez-match-hero-duel{margin-top:calc(-1 * var(--klar-kickoff-size) / 2 - var(--sp-3))} .ez-match-hero-info{margin-top:var(--sp-4);padding-block:var(--sp-4)} .ez-match-hero-duty{margin-top:var(--sp-4)} [data-design="klar"] .hm-hero.ez-match-hero .hm-acts{margin-top:var(--sp-5)} } @layer vertraege{ /* Appweite Inhaltsachse: Eyebrows links, Inhalte 8px dahinter. Ein einziger Einzug am äußersten Inhaltskörper; verschachtelte Bodies und Profil/Termine mit ihrer bereits freigegebenen Achse sind ausdrücklich ausgenommen. */ body[data-layout="klar"] :is(.mr-body,.tm-body,.fd-body,.mb-body,.dk-body,.ab-body,.st-body,.tb-body,.pr-body,.vc-body,.vc-sheet,.bt-body,.ms-body):not(:is(.mr-body,.tm-body,.fd-body,.mb-body,.dk-body,.ab-body,.st-body,.tb-body,.pr-body,.vc-body,.vc-sheet,.bt-body,.ms-body) *):not(:is(#sh-main,.sh-ueber-inhalt)[data-screen="termine"] *):not([data-profile-root] *){padding-inline-start:calc(var(--edge) + var(--sp-3));padding-inline-end:var(--edge)} body[data-layout="klar"] :is(.mr-body,.tm-body,.fd-body,.mb-body,.dk-body,.ab-body,.st-body,.tb-body,.pr-body,.vc-body,.vc-sheet,.bt-body,.ms-body):not(:is(#sh-main,.sh-ueber-inhalt)[data-screen="termine"] *):not([data-profile-root] *) > :is(.pf-eb,.ez-eb,.hm-eb,.fd-eb,.mr-eb,.tm-eb,.tm-meb,.tp-eb,.dt-eb,.dk-eb,.kd-eb,.vm-eb,.bt-eb2,.mb-eb2,.ms-kader-eb), body[data-layout="klar"] .bt-body:not(:is(#sh-main,.sh-ueber-inhalt)[data-screen="termine"] *):not([data-profile-root] *) > .bt-abschnitt > :is(.bt-eb2,.ez-eb){margin-inline-start:calc(-1 * var(--sp-3))} /* Menülinien sitzen mittig zwischen Zeilen, ohne Kachelfuge oder Abschlusslinie. */ body[data-layout="klar"] :is(.mr-row,.tm-men,.mb-row,.dk-row,.ab-z,.st-z,.tm-kachel) + :is(.mr-row,.tm-men,.mb-row,.dk-row,.ab-z,.st-z,.tm-kachel){margin-top:0} body[data-layout="klar"] :is(.mr-row,.tm-men,.tm-manage){padding-block:var(--row-y)} } @layer vertraege{ body[data-layout="klar"] .tm-kacheln .tm-kachel{padding:var(--row-y) 0;margin-top:0} body[data-layout="klar"] :is(.mb-row,.dk-row,.ab-z,.st-z){padding-block:var(--row-y)} } @layer vertraege{ /* D kompakt: gemeinsame Hülle, 12px je Zeilenseite, mittige Trennlinien ab Textachse. */ body[data-layout="klar"] .ez-menu-group{padding:0 var(--sp-5)} /* Tabelle: Kennzahlen benötigen Block-Innenraum; die Tabelle trägt ihre Zellabstände selbst. */ body[data-layout="klar"] .ez-menu-group.tb-stats{padding:var(--sp-5) 0} body[data-layout="klar"] .ez-menu-group.tb-standings{padding:0} body[data-layout="klar"] .ez-menu-group > :is(.tm-kachel,.mr-row,.dk-row){padding:var(--sp-4) 0;margin:0} body[data-layout="klar"] .ez-menu-group .pf-row-s{margin-top:var(--sp-2)} } @layer vertraege{ /* Mehr: Symbolachse weitere 4px innen, Pfeilachse unverändert. */ body[data-layout="klar"] :is(.mr-menu-group,.dk-menu-group){padding-inline-start:calc(var(--sp-5) + var(--sp-2))} } @layer vertraege{ body[data-layout="klar"] .dk-detail-group.dk-detail-text{padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6)} body[data-layout="klar"] .dk-detail-group .dk-doc-text{padding-left:calc(var(--fs-row) + var(--sp-4));margin-top:var(--sp-3)} body[data-layout="klar"] .dk-detail-body > .dk-doc-section > .dk-doc-eyebrow{margin-inline-start:calc(-1 * var(--sp-3))} body[data-layout="klar"] .dk-detail-group > .dk-z2{padding:var(--sp-4) 0;margin:0} body[data-layout="klar"] .dk-detail-group.dk-detail-text > :first-child{margin-top:0} body[data-layout="klar"] .dk-detail-group.dk-detail-text > :last-child{margin-bottom:0} body[data-layout="klar"] .dk-detail-body > .dk-detail-group + :is(.bt-info,.dk-wegzeile){margin-top:var(--sp-4)} } /* PDF: gleicher Innenrahmen wie die Google-Route, A4 bleibt scrollbar. */ @layer vertraege{ .pf-wrap.pdf.nav-kopf .pf-body{transition:none;display:flex;flex-direction:column;overflow:hidden;padding:calc(66px + var(--sp-2)) var(--edge) max(var(--edge),env(safe-area-inset-bottom))} } /* Multi-Cards behalten ihre Höhe zwischen Übersicht und PDF-Unterseiten. */ @layer vertraege{ .pf-wrap.bt.dk-membership .pf-sheet{height:88%;max-height:88%} .pf-wrap.bt.dk-membership .pf-body{flex:1} } @layer zustaende{ /* Ein Einzug je Menügruppe; Eyebrows bleiben außen auf ihrer Vertragsachse. */ body[data-layout="klar"] [data-profile-root] .pf-menu-group{margin-inline:calc(var(--edge) + var(--sp-3)) var(--edge);margin-bottom:0} body[data-layout="klar"] .pf-wrap .pf-menu-group{padding:0 var(--sp-5) 0 calc(var(--sp-5) + var(--sp-2))} /* Auswahlmenüs: Emoji und Auswahlkreis haben denselben Abstand zum Rand. */ body[data-layout="klar"] .pf-wrap .pf-menu-group:has(> .pf-follow-team){padding-inline:var(--sp-5)} body[data-layout="klar"] .pf-wrap .pf-menu-group > .pf-menu-row, body[data-layout="klar"] [data-profile-root] .pf-menu-group :is(.pf-follow-linked,.pf-nf,.pf-note){width:100%;margin:0;padding:var(--sp-4) 0} body[data-layout="klar"] .pf-wrap .pf-menu-group .pf-row-s{margin-top:var(--sp-2)} body[data-layout="klar"] [data-profile-root] .pf-menu-group .pf-trainertx i{margin-top:var(--sp-2)} body[data-layout="klar"] [data-profile-root] .pf-follow-selectedbox > .pf-menu-group{margin-inline:0} body[data-layout="klar"] [data-profile-root] .pf-follow-selectedbox:has(> .pf-menu-group){padding:0;margin-inline:calc(var(--edge) + var(--sp-3)) var(--edge)} body[data-layout="klar"] [data-profile-root] .pf-menu-group :is(.pf-follow-linkgap,.pf-nf-slotgap){height:0} } @layer zustaende{ /* Postfach: Leer- und Push-Fläche teilen Kanten und Akzente mit den Menügruppen. */ body[data-layout="klar"] [data-profile-root] :is(.pf-push-panel,.pf-nf-empty).ez-menu-group{margin-inline:calc(var(--edge) + var(--sp-3)) var(--edge);padding:var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + var(--sp-2))} body[data-layout="klar"] [data-profile-root] .pf-nf-empty.ez-menu-group{border-style:dashed} } /* External club discovery follows the same eyebrow/inset and form spacing. */ @layer zustaende{ body[data-layout="klar"] [data-profile-root] .pf-external-inset{margin-inline:calc(var(--edge) + var(--sp-3)) var(--edge)} body[data-layout="klar"] [data-profile-root] [data-external-results]:not(:empty){margin-top:var(--sp-7)} body[data-layout="klar"] [data-profile-root] .pf-external-back{padding:0;border:0;background:transparent;color:var(--muted);font:inherit;min-height:44px} body[data-layout="klar"] [data-profile-root] .pf-nf-empty{margin-inline:calc(var(--edge) + var(--sp-3)) var(--edge)} } /* v4160: Vereinswappen ersetzen nur die Emoji-Fläche, die Textflucht bleibt bestehen. */ @layer zustaende { .pf-wrap .pf-follow-crest{display:block;width:var(--fs-row);height:var(--fs-row);object-fit:contain} } @layer zustaende{ /* Vereinsreiter: Vertragsabstand zur ersten Abschnitts-Eyebrow. */ body[data-layout="klar"] [data-profile-root] .pf-follow-area{margin-bottom:var(--sp-7)} } @layer zustaende{ /* iOS verschiebt die feste Card an den sichtbaren Viewport-Rand. Ihre deckende Fläche muss darunter weitergehen, auch hinter transparenter Tastatur/Zubehörleiste. Außerhalb des Flex-/Scrolllayouts: keine Höhenänderung und kein Scrollsprung. */ .pf-wrap::after{content:"";position:absolute;top:100%;left:0;right:0;height:100vh;background:var(--klar-bg,var(--card-2,var(--bg)));pointer-events:none} } @layer vertrag{ /* Match views retain the shared header/eyebrow rhythm and profile inset. */ .mv-panel{margin-top:var(--sp-6);min-width:0} .mv-panel > :is(.mv-team-tabs,.mv-status,.mv-live-poster,.mv-group,.ez-empty,.mv-note,.mv-refresh,.mv-source){margin-inline-start:var(--sp-3)} .mv-group{padding:0 var(--sp-5);--menu-corner-color:var(--sp-fuss-t)} .mv-row,.mv-player,.mv-events>li{padding-block:var(--sp-4)} .mv-bench-body>.mv-player:first-child,.mv-row + .mv-row,.mv-player + .mv-player,.mv-events>li + li{border-top:var(--klar-line-width) solid var(--klar-line)} .mv-bench-toggle{padding-inline:0} .mv-refresh{margin-top:var(--sp-6);width:calc(100% - var(--sp-3))} .mv-source{margin-top:var(--sp-5)} .mv-status + :is(.mv-group,.ez-empty){margin-top:var(--sp-4)} } @layer zustaende{ /* Training D: Eyebrows außen, alle Inhalte auf der Profil-Achse (+8px). Reiter → erster Abschnitt 24px; weitere Abschnitte 24/16px nach Vertrag. */ [data-design="klar"] .ez-training-detail .ez-training-tabs{margin-inline-start:var(--sp-3)} [data-design="klar"] .ez-training-panel{margin-top:var(--sp-7)} [data-design="klar"] .ez-training-panel > .dt-eb{padding:0;margin:var(--sp-7) 0 var(--sp-4)} [data-design="klar"] .ez-training-panel > .dt-eb:first-child{margin-top:0} [data-design="klar"] .ez-training-panel > :is(.ez-training-group,.ez-training-note,.ez-training-empty,.dt-ablauf,.ez-training-calendar,.ez-match-poster){margin-inline-start:var(--sp-3)} [data-design="klar"] .ez-training-time{padding:var(--sp-6) 0} [data-design="klar"] .ez-training-date{padding-right:var(--sp-4)} [data-design="klar"] .ez-training-clock p{margin:var(--sp-2) 0 0} [data-design="klar"] .ez-training-location{padding:var(--sp-4) 0} [data-design="klar"] .ez-training-location .dt-tx i{margin-top:var(--sp-2)} [data-design="klar"] .ez-training-location-actions{padding-bottom:var(--sp-4)} [data-design="klar"] .ez-training-note{padding:var(--sp-4)} [data-design="klar"] .ez-training-note p{margin:0} [data-design="klar"] .ez-training-note .ez-training-author{margin-top:var(--sp-2)} [data-design="klar"] .ez-training-empty{padding:var(--sp-6)} [data-design="klar"] .ez-training-calendar{margin-top:var(--sp-7);gap:var(--sp-4)} [data-design="klar"] .ez-training-group .dt-ablauf{margin:0;padding:0} } @layer zustaende{ /* Ablauf: Unterschrift und Erklärung beginnen exakt unter dem Übungstitel. */ } @layer zustaende{ /* Beteiligung: dieselbe Profil-Achse, bündige Statuszeilen und mittige Trenner. */ [data-design="klar"] .ez-training-member{padding:var(--sp-4) 0} [data-design="klar"] .ez-training-member-status{margin-top:var(--sp-2)} } @layer zustaende{ [data-design="klar"] .ez-treff-info{padding:var(--sp-4) 0} [data-design="klar"] .ez-treff-info p{margin:var(--sp-2) 0 0} [data-design="klar"] .ez-treff-dutygroup.ez-training-group{padding:0 var(--sp-5)} [data-design="klar"] .ez-treff-dutygroup .ez-event-duty{padding:var(--sp-4) 0} } @layer zustaende{ /* Dienstzuweisung: eine gemeinsame Menüfläche auf der Profil-Achse. */ [data-design="klar"] .ez-duty-editor>.dt-eb{padding:0} [data-design="klar"] .ez-duty-editor>:is(.ez-menu-group,.ez-training-note,.ez-training-empty,.ez-training-calendar){margin-inline-start:var(--sp-3)} [data-design="klar"] .ez-duty-person{padding:var(--sp-4) 0;margin:0} [data-design="klar"] .ez-duty-person .tx i{margin-top:var(--sp-2)} } @layer vertraege{ /* League navigation: same 24/12 eyebrow rhythm and 8px content inset as Profile. */ .lg-eyebrow{margin-top:var(--sp-7);margin-bottom:var(--sp-4)} [data-league-home]>.lg-eyebrow:first-child{margin-top:var(--sp-7)} :is(.lg-board,.lg-switch,.lg-history,.lg-choice){margin-inline-start:var(--sp-3)} .lg-round-nav{margin-block:var(--sp-4)} .lg-board>.lg-round-nav:first-child{margin-top:var(--sp-4)} .lg-round-pill{padding-block:var(--sp-3);padding-inline:var(--sp-4)} body[data-layout="klar"] .ez-menu-group.lg-games{padding-inline:var(--sp-4)} .lg-game{padding:var(--sp-3) 0} .lg-picker,.lg-match-picker{padding:var(--sp-4);margin-bottom:var(--sp-4)} .lg-round-options{margin-top:var(--sp-4)} .lg-pick{padding:var(--sp-3)} .lg-current{margin-bottom:var(--sp-4)} .lg-choice summary{padding:var(--sp-4) var(--row-x)} .lg-options{padding:0 var(--row-x) var(--sp-3)} .lg-options label{padding-block:var(--sp-3)} .lg-choice small{margin-top:var(--sp-1)} .lg-team-nav{margin-top:var(--sp-6);margin-bottom:var(--sp-6);margin-inline-start:var(--sp-3)} .lg-team-choice button{padding:var(--sp-3)} /* Ohne gefolgte Liga: ein einziger Auswahlknopf auf voller Inhaltsbreite. */ .lg-team-nav-single{margin-inline-start:0} .lg-history{margin-bottom:var(--sp-4)} } @layer vertraege{ .lg-discover{padding-inline:var(--edge)} .lg-discover>.lg-eyebrow{margin-top:var(--sp-7)} } @layer vertraege{ /* TEAM event and plan share one frame and the existing 24/12/8 rhythm. */ /* Outer inset and inner padding come from .tm-body and .ez-menu-group, like Die Mannschaft. */ .tm-event-meta{padding-top:var(--sp-5)} .tm-plan-toggle{padding:var(--sp-5) 0;min-height:calc(var(--sp-8) * 2)} .tm-plan-toggle-text small{margin-top:var(--sp-2)} /* Einladungen folgen den 12px-Menuezeilen; in Terminlisten liefert die aeussere Zeile den unteren Abstand. */ .tm-event-planning>:is([data-invite-event],[data-event-duties]){padding-block:var(--sp-4)} .pf-wrap .tm-training-row>.tm-event-planning>:is([data-invite-event],[data-event-duties]){padding-bottom:0;min-height:0} .tm-plan-content{padding-bottom:var(--sp-3)} .tm-event-time{padding:var(--sp-6) 0} .tm-event-day{padding-right:var(--sp-3)} .tm-event-clock{padding-left:var(--row-x)} .tm-event-day b{margin:0} .tm-event-clock strong{margin:0} .tm-event-card .tm-quote{margin:0;padding:var(--sp-4) 0} .tm-quote-summary{margin-top:var(--sp-2);margin-inline-start:calc(var(--fs-row) + var(--sp-4))} .tm-plan-item{padding:var(--sp-4) 0} .tm-plan-item small{margin-top:var(--sp-2)} .tm-plan-item p{margin:var(--sp-3) 0 0 calc(var(--fs-row) + var(--sp-4))} .tm-event-card .tm-plan-action{margin:var(--sp-4) 0;min-height:42px} .tm-event-pitch{margin:var(--sp-5) calc(-1 * var(--sp-5));padding:var(--sp-4) var(--sp-5)} .tm-event-info{padding-bottom:var(--sp-4)} } @layer vertraege{ /* TEAM-Setup: eine Inhaltskante, 8/2/20 im Kopf und 24/12 zwischen Abschnitten. */ .ms-team-setup .ms-app > .ms-kopf:first-child .ms-titel{margin-top:var(--sp-3)} .ms-team-setup .ms-kopf .ms-unter{margin-top:var(--sp-1)} .ms-team-setup .ms-app .ms-body{padding-top:var(--sp-6)} .ms-team-setup .ms-body .ms-setupblock > .bt-eb2{margin-top:0;margin-bottom:var(--sp-4)} .ms-team-setup .ms-setupblock > :not(.bt-eb2){margin-left:var(--sp-3)} .ms-team-setup .ms-body .bt-feld > :is(input,select):first-child{margin-top:0} .ms-team-setup .ms-body .ms-dienstoptionen > .bt-wahlz{margin-top:0;margin-bottom:0} .ms-team-setup .ms-body .ms-dienstfahrerbox.an .ms-dienstfahrer{margin-top:0;margin-bottom:0} .ms-team-setup .ms-body :is(.ms-status,.ms-kader-person){margin-top:0;margin-bottom:0} .ms-team-setup .ms-body .ms-saisonort .bt-feld{margin-top:var(--sp-4)} .ms-team-setup .ms-body .ms-saisonort .bt-feld select{margin-top:0} .pf-wrap.bt.ms-team-setup .ms-body .ms-name-input + .bt-info{margin-top:var(--sp-5)} .ms-team-setup .ms-body .ms-provider > .kd-eb:first-child{margin-top:0} .ms-team-setup .ms-body .ms-quellenkopf + .bt-info{margin-top:var(--sp-5)} .ms-team-setup .ms-body .ms-hilfe.bt-info{margin-top:var(--sp-4);margin-bottom:0} .ms-team-setup .ms-body .ms-provider + .ms-familien{margin-top:var(--sp-7)} } @layer vertraege{ .ms-team-setup .ms-body .kd-stapel.ez-menu-group > .kd-karte{margin-top:0;margin-bottom:0} .ms-team-setup .ms-body .kd-grau.bt-info{margin-top:var(--sp-4)} .ms-team-setup .ms-body .ms-plan-hilfe.bt-info{margin-top:var(--sp-5)} .ms-team-setup .ms-body .ms-provider .kd-eb + .kd-stapel, .ms-team-setup .ms-plan-provider .kd-wegzeile{margin-left:var(--sp-3)} } @layer zustaende{ /* Die Einrichtungs-Card besitzt bereits ihre eigene 20px-Kante; kein zweiter negativer Eyebrow-Einzug. */ body[data-layout="klar"] .ms-team-setup .ms-body > :is(.bt-eb2,.ms-kader-eb){margin-inline-start:0} body[data-layout="klar"] .ms-team-setup .ms-body > .ms-statusliste{margin-inline-start:var(--sp-3)} } @layer komponenten{ /* Verbandsauswahl: kompakte Zeilen, Verknüpfung als ruhige Statuspille. */ .kd-link-pill{flex:0 0 auto;margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:var(--sp-2) var(--sp-3);color:var(--muted);background:var(--surface);font-size:var(--fs-mini);line-height:1.2;font-weight:400;white-space:nowrap} } @layer vertraege{ .ms-team-setup .ms-kader-add-menu{margin-top:var(--sp-4);margin-left:var(--sp-3)} .ms-team-setup .ms-kader-pruefliste.pf-menu-group{margin-left:var(--sp-3)} } @layer vertraege{ /* Zugangshinweis und Aktion gehören zur selben eingerückten Anmeldegruppe. */ .ms-team-setup .ms-provider:has(#dfb-user) > :is(.kd-grau,.bt-haupt){margin-left:var(--sp-3);width:calc(100% - var(--sp-3));box-sizing:border-box} } @layer vertraege{ /* Verbundener DFBnet-Zugang: dieselbe Inhaltsachse wie seine Menügruppen. */ .ms-team-setup .ms-plan-provider .bt-info, .ms-team-setup .ms-provider > :is(.kd-dfb-access,.kd-connection-actions){margin-left:var(--sp-3)} .ms-team-setup .ms-provider > .kd-dfb-access{margin-top:var(--sp-5)} .ms-team-setup .kd-connection-actions{display:flex;flex-direction:column;gap:var(--sp-4);margin-top:var(--sp-6)} .ms-team-setup .kd-connection-actions > .bt-zweit{margin:0} } @layer vertraege{ /* Die Verbindungsauswahl klappt innerhalb desselben Blocks auf; eine Inhaltsachse. */ .ms-team-setup .kd-dfb-selection > :not(.kd-eb), .ms-team-setup .kd-inline-inner > :not(.kd-eb):not(.kd-dfb-selection){margin-left:var(--sp-3)} .ms-team-setup .kd-dfb-selection > .bt-zweit, .ms-team-setup .kd-inline-inner > .bt-zweit{width:calc(100% - var(--sp-3))} .ms-team-setup .kd-inline-inner{padding-top:var(--sp-7)} .ms-team-setup .ms-body .kd-inline-inner .kd-eb:first-child{margin-top:0} .ms-team-setup .kd-dfb-selection > .bt-info, .ms-team-setup .kd-inline-inner > .bt-info{margin-top:var(--sp-5)} .ms-team-setup .kd-dfb-selection > .bt-info + .bt-zweit, .ms-team-setup .kd-inline-inner > .bt-info + .bt-zweit{margin-top:var(--sp-6)} .ms-team-setup .ms-plan-provider .kd-inline-inner .kd-eb + .kd-stapel{margin-left:var(--sp-3)} } @layer vertraege{ /* Zusammengehörige Auswahlaktionen: 20px nach Hinweis, 12px zwischen Buttons. */ .ms-team-setup .kd-inline-actionpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-6)} .ms-team-setup .kd-inline-actionpair > .bt-zweit{width:100%;min-width:0;margin:0} .ms-team-setup .kd-inline-actionpair > .bt-zweit:only-child{grid-column:1 / -1} .ms-team-setup .kd-connection-actions.kd-inline-actions-open{margin-top:var(--sp-4)} .ms-team-setup .kd-inline-actions-open > [hidden], .ms-team-setup .kd-wegzeile.kd-inline-actions-open{display:none} } @layer vertraege{ /* Variante B: bestehender Abschnittsrhythmus, Inhalte auf der Profilachse. */ .ms-team-setup .ms-complete > :not(.bt-eb2){margin-left:var(--sp-3)} .ms-team-setup .ms-complete > .bt-info{margin-top:var(--sp-5);margin-bottom:0} .ms-team-setup .ms-complete-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);padding-bottom:var(--sp-5);margin-top:var(--sp-2)} .ms-team-setup .ms-complete-actions > .bt-zweit{width:100%;min-width:0;margin:0;padding-inline:var(--sp-2)} .ms-team-setup .ms-complete-details{margin-left:calc(var(--fs-row) + var(--sp-4))} .ms-team-setup .ms-complete-details > .pf-menu-row{padding:var(--sp-4) 0;margin:0} } @layer zustaende{ /* Beteiligung: Eyebrows außen, gemeinsame Profil-Flucht +8px für alle Inhalte. */ .pf-wrap .bt-unter + .tm-attendance{margin-top:var(--sp-7)} .pf-wrap .tm-attendance :is(.tm-eb){margin:var(--sp-7) 0 var(--sp-4);padding:0} .pf-wrap .tm-attendance>.tm-eb:first-child{margin-top:0} .pf-wrap .tm-attendance>:is(.ez-menu-group,.ez-training-note,.ez-training-empty,.tm-attendance-field,.tm-attendance-actions), .pf-wrap .tm-attendance .tm-grbox>:is(.ez-menu-group,.ez-training-note,.tm-attendance-field,.tm-attendance-actions){margin-inline:var(--sp-3) 0} .pf-wrap .tm-attendance .ez-training-note{margin-block:var(--sp-4) 0} .pf-wrap .tm-attendance>.ez-training-note:first-child{margin-top:0} .pf-wrap .tm-attendance .tm-attendance-actions{margin-top:var(--sp-4)} .pf-wrap .tm-attendance .tm-attendance-label{margin-bottom:var(--sp-3)} .pf-wrap .tm-attendance .pf-in{margin:0} } @layer vertraege{ .tm-attendance-detail{margin-top:var(--sp-2)} } @layer zustaende{ /* Enger Anschluss innerhalb der bestehenden Zeile, ohne wechselnde Außenhöhe. */ body[data-layout="klar"] .pf-wrap .pf-menu-group .tm-attendance-slot{margin-top:var(--sp-1)} .tm-attendance-slot>.tm-attendance-detail{margin-top:0} } @layer zustaende{ /* Kader: eine Inhaltsachse +8px hinter allen Eyebrows wie Profil. */ body[data-layout="klar"] .pf-wrap .bt-body:has(> .kd-modern), body[data-layout="klar"] .pf-wrap .bt-body.kd-modern{padding-inline:var(--edge)} .pf-wrap .kd-modern .kd-khead,.pf-wrap .kd-modern .kd-kbody{padding-inline:0} .pf-wrap .kd-modern .kd-eb{margin:var(--sp-7) 0 var(--sp-4);padding:0} .pf-wrap .kd-modern>.kd-eb:first-child{margin-top:0} .pf-wrap .kd-modern :is(.kd-kbody,.kd-wahlbox,.kd-treffer,.kd-datumbox)>.kd-eb{margin-inline:0} .pf-wrap .kd-modern>:is(.ez-menu-group,.bt-info,.ez-training-note,.bt-leerzustand,.pf-in,.kd-suchz,.kd-warte,.kd-wegzeile,.ez-outline-action), .pf-wrap .kd-modern :is(.kd-kbody,.kd-wahlbox,.kd-treffer) > :is(.ez-menu-group,.bt-info,.ez-training-note,.bt-leerzustand,.kd-warte,.kd-wegzeile,.ez-outline-action){margin-inline:var(--sp-3) 0;width:auto} .pf-wrap .kd-modern .kd-datumbox>.pf-in{margin-inline:var(--sp-3) 0;width:calc(100% - var(--sp-3))} .pf-wrap .kd-modern>.pf-in{width:calc(100% - var(--sp-3));margin-block:0} .pf-wrap .kd-modern :is(.bt-info,.ez-training-note,.kd-wegzeile,.ez-outline-action){margin-top:var(--sp-4)} .pf-wrap .kd-modern>:is(.bt-info,.ez-training-note):first-child{margin-top:0} .pf-wrap .kd-modern .kd-khead{margin-bottom:var(--sp-7)} .pf-wrap .kd-modern .kd-khead + .kd-kbody>.kd-eb:first-child{margin-top:0} .pf-wrap .kd-modern .kd-khead .kd-ktx>b{font-weight:var(--klar-fw-title);font-size:var(--fs-title);text-transform:uppercase} .pf-wrap .kd-modern .kd-betz{padding:var(--sp-4) 0} .pf-wrap .kd-modern .kd-history .pf-row-s{padding-inline-start:calc(var(--fs-row) + var(--sp-4))} } @layer vertraege{ .pf-wrap .bt-unter + .bt-body.kd-modern, .pf-wrap .bt-unter + .bt-body:has(> .kd-modern){margin-top:var(--sp-7)} } @layer zustaende{ .pf-wrap .kd-modern .kd-wegzeile{padding-top:0} .pf-wrap .kd-modern .kd-wegzeile>.ez-outline-action{margin-top:0} } @layer vertraege{ /* Same 24/12/8 rhythm as Kader; inset applied once to every training section. */ body[data-layout="klar"] .pf-wrap .bt-body.tm-training-modern{padding-inline:var(--edge)} .pf-wrap :is(.bt-unter,.pf-sub)+.tm-training-modern{margin-top:var(--sp-7)} body[data-layout="klar"] .pf-wrap .tm-training-modern>:is(.tm-eb,.tp-eb){margin:var(--sp-7) 0 var(--sp-4);padding:0} body[data-layout="klar"] .pf-wrap .tm-training-modern>:is(.tm-eb,.tp-eb):first-child{margin-top:0} .pf-wrap .tm-training-modern>:is(.ez-menu-group,.ez-training-empty,.tm-zeitenbox,.tm-tage,.tm-seg,.tm-training-orthint,.ez-outline-action){margin-inline:var(--sp-3) 0;width:calc(100% - var(--sp-3))} .pf-wrap .tm-training-modern>:is(.tm-training-orthint,.ez-outline-action){margin-top:var(--sp-4)} .pf-wrap .tm-training-modern>.tm-seg{margin-bottom:var(--sp-5)} body[data-layout="klar"] .pf-wrap .tm-training-modern .pf-menu-group{padding-inline:var(--sp-5)} .pf-wrap .tm-training-row>.pf-follow-team{width:100%;margin:0;padding:0} .pf-wrap .tm-training-plan{margin-top:var(--sp-3);padding:0} .pf-wrap .tm-training-row>.tm-event-planning{margin-top:var(--sp-4)} .pf-wrap .tm-training-settings :is(.tm-tzeile,.tm-saisonort,.tm-training-field){margin:0;padding:var(--sp-4) 0} .pf-wrap .tm-training-settings .tm-tzeile :is(.tag,.zeit){padding:0} .pf-wrap .tm-training-settings .tm-tzeile input{margin:0;padding:var(--sp-3)} .pf-wrap .tm-training-settings .tm-training-field>select{margin-top:var(--sp-4)} .pf-wrap .tm-training-settings .bt-feld{margin-bottom:0} .pf-wrap .tp-exercise .tp-unten{padding:var(--sp-4) 0 0} .pf-wrap .tp-exercise .tp-text{margin:0;padding:var(--sp-3) 0 0} } @layer vertraege{ .pf-wrap .kd-modern .kd-contact-field .pf-in{margin-top:var(--sp-3)} .pf-wrap .tm-training-modern>.ez-training-note{margin:var(--sp-4) 0 0 var(--sp-3)} .pf-wrap .tm-training-row>.tm-quote{margin:var(--sp-4) 0 0;padding:0;width:100%} } @layer vertraege{ /* TEAM-Einstellungen teilen die Profil-Inhaltsachse und den Kader-Abschnittsrhythmus. */ .pf-wrap .tm-settings :is(.kd-wegzeile,.kd-connection-actions){display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-5);padding:0} .pf-wrap .tm-settings :is(.kd-wegzeile,.kd-connection-actions)>.ez-outline-action{flex:1;min-width:0;margin:0} .pf-wrap .tm-settings>:is(.kd-connection-actions,.tm-cardmedia-list,.bt-feld), .pf-wrap .tm-settings .kd-dfb-selection>:not(.kd-eb), .pf-wrap .tm-settings .kd-vbauf>:not(.kd-eb){margin-left:var(--sp-3);width:calc(100% - var(--sp-3));box-sizing:border-box} .pf-wrap .tm-settings .kd-dfb-selection>:is(.ez-training-note,.bt-info,.ez-outline-action){margin-top:var(--sp-4)} .pf-wrap .tm-settings .tm-pflichtbox{margin:0} .pf-wrap .tm-settings .tm-pflichtbox>.pf-menu-row{position:relative;width:100%;margin:0;padding:var(--sp-4) 0;gap:var(--sp-4);min-height:calc(var(--sp-8) * 2 + var(--sp-3))} .pf-wrap .tm-settings .tm-pflichtbox>.pf-menu-row::before{content:"";position:absolute;top:0;left:calc(var(--fs-row) + var(--sp-4));right:0;border-top:var(--klar-line-width) solid var(--klar-line)} .pf-wrap .tm-settings .tm-settings-field{display:block;padding:var(--sp-4) 0} .pf-wrap .tm-settings .tm-settings-field>.pf-in{display:block;width:100%;margin:var(--sp-3) 0 0} .pf-wrap .tm-settings textarea.pf-in{height:auto;min-height:calc(var(--sp-8) * 4);resize:vertical} .pf-wrap .tm-settings .tm-cardmedia-list{gap:var(--sp-4)} .pf-wrap .tm-settings .tm-cardmedia-list>.ez-menu-group{padding:var(--sp-4)} .pf-wrap .tm-settings .tm-cardmedia-preview{border-radius:var(--r-field)} .pf-wrap .tm-settings .tm-cardmedia-in{padding:var(--sp-4) 0 0} .pf-wrap .tm-settings .tm-cardmedia-copy b{font-size:var(--fs-row);font-weight:var(--klar-fw-row)} .pf-wrap .tm-settings .tm-cardmedia-actions>.ez-outline-action{font-size:var(--fs-body);font-weight:var(--klar-fw-row);min-height:44px;padding:var(--sp-3) var(--sp-4)} .pf-wrap .tm-settings .tm-zaehl{gap:var(--sp-3);margin-left:auto} .pf-wrap .tm-settings .tm-zaehl button{width:var(--sp-6);height:var(--sp-6);min-width:var(--sp-6);padding:0;border-width:var(--klar-line-width);font-weight:var(--klar-fw-row);color:var(--klar-ink)} .pf-wrap .tm-settings .tm-zaehl b{min-width:var(--sp-6);font-size:var(--fs-row);font-weight:var(--klar-fw-row)} .pf-wrap .tm-settings .pf-menu-row>svg{width:var(--sp-5);height:var(--sp-5);flex-shrink:0;color:var(--muted)} .pf-wrap .tm-settings .emo>.lg{display:block;width:var(--fs-row);height:var(--fs-row);color:var(--ink)} } @layer vertraege{ .pf-wrap.bt.ms-setup-card.tm-karte-hoch .pf-sheet{height:88%;max-height:88%} } @layer zustaende{ body[data-layout="klar"] .pf-wrap .tm-settings .tm-cardmedia-list>.ez-menu-group{padding:var(--sp-5)} body[data-layout="klar"] .pf-wrap .tm-settings .tm-cardmedia-card{border:0;border-radius:0;background:transparent;box-shadow:none} } @layer zustaende{ body[data-layout="klar"] .pf-wrap .tm-settings>.ez-outline-action{display:flex;width:calc(100% - var(--sp-3))} } @layer vertraege{ .pf-wrap .tm-training-settings :is(.tm-saisonort,.tm-training-field){padding-block:var(--sp-5)} .pf-wrap .tm-training-settings .tm-saisonort .bt-feld{margin-top:var(--sp-4)} .pf-wrap .tm-training-settings>.tm-training-orthint{margin-top:var(--sp-5)} } @layer zustaende{ /* Zeiten & Ort trägt den Abschnittseinzug einmal, wie die Einstellungen davor. */ body[data-layout="klar"] .pf-wrap .bt-body.tm-training-settings{padding-inline:var(--edge)} body[data-layout="klar"] .pf-wrap .tm-training-settings>.tm-eb{margin-inline:0} body[data-layout="klar"] .pf-wrap .tm-training-settings>.pf-menu-group{padding-inline:var(--sp-5)} } @layer zustaende{ /* Compact match venue: the approved Training-style line beneath the duel. */ [data-design="klar"] .hm-row.spiel .hm-main > .hm-match-place{margin-top:var(--sp-4)} } @layer zustaende{ /* Kopf bis zur Kontur ziehen; Text bleibt auf der vorhandenen Inhaltsachse. */ [data-design="klar"] .hm-row:is(.tr,.spiel) .hm-main > .hm-flat-head:first-child{margin-top:calc(-1 * var(--row-x));margin-inline:calc(-1 * var(--row-x));padding:var(--row-x) var(--row-x) var(--sp-4)} [data-design="klar"] .hm-row.tr .hm-main > .hm-flat-head:first-child{margin-top:calc(-1 * var(--sp-5));padding-top:var(--sp-5)} [data-design="klar"] .hm-row.spiel .hm-main > .hm-flat-head + .ez-duel{margin-top:0} } @layer zustaende{ /* Guided user cards: existing 24/12 section rhythm, one owner per inset. */ .au-user .au-body{--au-body-top:var(--sp-7)} .au-user-intro,.au-user-photo{margin-bottom:var(--sp-7)} .au-user-intro p{margin:var(--sp-3) 0 0} .au-user-head{padding:var(--sp-4) var(--row-x)} .au-user-pill{padding:var(--sp-3) var(--sp-4)} .au-user-content{padding:var(--sp-7) var(--row-x)} .au-user-content>.au-sub{margin-top:var(--sp-1)} .au-user-group{margin-top:var(--sp-7)} .au-user-eb{margin-bottom:var(--sp-4)} .au-user-choices{padding:0 var(--sp-5)} .au-user-field{padding:0} .au-user .au-lab{margin:0} .au-user .au-in{margin:0;padding:var(--sp-4) var(--sp-5)} .au-user .au-code{margin:0;padding:0} .au-user .au-code input{margin:0;padding:var(--sp-4) var(--sp-5)} .au-user .au-codeziel{margin-top:var(--sp-5)} .au-user .au-ck{margin:0;padding:var(--sp-4) var(--sp-5)} .au-user-content>.bt-info,.au-user-content>.au-kurz-option{margin-top:var(--sp-5)} .au-user .au-kurz-option .au-link{margin-top:var(--sp-2);font-weight:var(--klar-fw-label)} .au-user-choices>button{padding:var(--sp-4) 0} .au-user-footer{margin-top:var(--sp-4);padding:0} .au-user-link{margin-top:var(--sp-3);padding:0} /* Code uses the same single, full focus contour as the other profile fields. */ .au-auth-sheet .au-code input.pf-in:not([readonly]):focus{outline:none;box-shadow:none;border:var(--klar-line-width) solid var(--klar-accent)} .au-user-actions{margin-top:var(--sp-7)} .au-user-actions>.ez-outline-action{margin:0} } @layer zustaende{ /* v4292: approved welcome proportions and legal surfaces share the app spacing ladder. */ .au-welcome-hero{padding-top:calc(var(--shell-head-height) + var(--sp-5))} body[data-layout="klar"] .au-user-card.ez-menu-group{padding:0} /* Both legal cards use the same fixed viewport-relative height, independent of content. */ /* Gleiche Höhe wie die Standard-Card; unabhängig vom Umfang beider Dokumente. */ .pf-wrap.ez-legal-sheet .pf-sheet{height:80%;max-height:80%} .ez-imprint>.legal-section{margin-top:var(--sp-7)} .ez-imprint>.legal-section:first-child{margin-top:var(--sp-6)} .ez-imprint .legal-section>.eyebrow{margin:0 0 var(--sp-4)} .ez-imprint>.legal-note{margin-top:var(--sp-7)} body[data-layout="klar"] .ez-imprint .club-brand.ez-menu-group{padding:var(--sp-5)} body[data-layout="klar"] .ez-imprint .studio-brand.ez-menu-group{padding:calc(var(--sp-7) + var(--sp-3)) var(--sp-5)} } @layer zustaende{ body[data-layout="klar"] .dk-doc-nav.bt-feld>select{padding-inline:var(--sp-5) var(--sp-8);margin:0} } @layer zustaende{ .au-auth-sheet .au-user-content{padding:var(--sp-7) var(--edge) 0} .au-auth-sheet .au-user-content>.au-user-group:first-child{margin-top:0} .au-auth-sheet .au-user-content>.au-msg:first-child{margin-top:0} } @layer zustaende{ /* Reserve the fixed header once; let the artwork shrink before any action is clipped. */ .au-wrap.au-user{padding-top:calc(var(--shell-head-height) + var(--sp-5))} .au-wrap.au-user .au-welcome-hero{padding-top:0} html.au-open:has(.au-wrap.au-user),html.au-open:has(.au-wrap.au-user) body{height:100%;overflow:hidden;overscroll-behavior:none} } @layer zustaende{ .au-auth-sheet .au-msg{padding:var(--sp-4) var(--sp-5)} } @layer zustaende{ /* Mitglieder: identische Profil/Kader-Achsen; Rhythmus ausschließlich hier. */ body[data-layout="klar"] .mb-modern :is(.mb-body,.bt-body){padding:0 var(--edge) var(--sp-7);margin-top:var(--sp-7)} body[data-layout="klar"] .mb-sheet .mb-modern .mb-karte{margin-top:var(--sp-7)} body[data-layout="klar"] .mb-sheet .mb-modern .pf-page>.mb-karte:first-child{margin-top:0} body[data-layout="klar"] .mb-modern :is(.mb-eb,.mb-eb2,.bt-eb2){margin:var(--sp-7) 0 var(--sp-4);padding:0;min-height:0} body[data-layout="klar"] .mb-modern :is(.mb-body,.bt-body)>:is(.mb-eb,.mb-eb2,.bt-eb2):first-child{margin-top:0} body[data-layout="klar"] .mb-modern :is(.mb-body,.bt-body) > :is(.mb-group,.mb-feld,.mb-info,.mb-grau,.bt-info,.bt-leerzustand,.mb-legende2,.mb-wegcard,.mb-sig,.mb-ende,.ez-outline-action,.mb-link){margin-inline:var(--sp-3) 0} body[data-layout="klar"] .mb-modern .mb-group{padding-inline:var(--sp-5);margin-block:0} body[data-layout="klar"] .mb-modern .mb-group>.mb-menu-row{gap:var(--sp-4);margin:0;padding:var(--sp-4) 0;min-height:calc(var(--sp-8) + var(--sp-6))} body[data-layout="klar"] .mb-modern .mb-menu-row :is(.pf-row-tx,.tx,.who){gap:0} body[data-layout="klar"] .mb-modern .mb-menu-row :is(.pf-row-s,.wert,.r){margin:var(--sp-2) 0 0;padding:0} body[data-layout="klar"] .mb-modern .mb-menu-row>.mb-dot{margin-inline:var(--sp-2)} body[data-layout="klar"] .mb-modern .mb-av{margin:0} body[data-layout="klar"] .mb-modern .mb-menu-row .hk{margin-left:auto} body[data-layout="klar"] .mb-modern .mb-count{padding:var(--sp-1) var(--sp-3)} body[data-layout="klar"] .mb-modern :is(.mb-info,.mb-grau,.bt-info){margin-block:var(--sp-4) 0;padding:var(--sp-4)} body[data-layout="klar"] .mb-modern .mb-feld{margin-block:0;padding:var(--sp-4)} body[data-layout="klar"] .mb-modern .mb-feld input{min-height:var(--sp-6);margin:0;padding:0} body[data-layout="klar"] .mb-modern .mb-section-action{padding:var(--sp-2) var(--sp-4)} body[data-layout="klar"] .mb-modern .mb-khead{padding:0;margin:0 0 var(--sp-7);gap:var(--sp-4)} body[data-layout="klar"] .mb-modern .mb-suche{margin:var(--sp-7) var(--edge) 0;padding:var(--sp-4)} body[data-layout="klar"] .mb-modern .mb-schiene{margin-top:var(--sp-4)} body[data-layout="klar"] .mb-modern .mb-legende2{margin-top:var(--sp-7);gap:var(--sp-4);padding:var(--sp-4)} body[data-layout="klar"] .mb-modern :is(.mb-wegcard,.mb-merk){margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-5);gap:var(--sp-4)} body[data-layout="klar"] .mb-modern .ez-outline-action{margin-top:var(--sp-4)} body[data-layout="klar"] .mb-modern .ez-training-note+.mb-group{margin-top:var(--sp-4)} body[data-layout="klar"] .mb-modern .mb-menu-row .kf + .pf-row-s{padding-inline-start:calc(var(--fs-row) + var(--sp-4))} body[data-layout="klar"] .mb-sheet .pf-page>:is(.mb-info,.mb-group,.mb-in){margin-inline:calc(var(--edge) + var(--sp-3)) var(--edge);margin-top:var(--sp-7)} body[data-layout="klar"] .mb-modern [data-speicherfehler]{margin:var(--sp-4) var(--edge) var(--sp-4) calc(var(--edge) + var(--sp-3))} } @layer zustaende{ /* Eigenständige Aktion vor Suche/Filtern: keine Eyebrow, deshalb volle Inhaltsbreite. */ body[data-layout="klar"] .mb-modern>.mb-create-entry{margin:var(--sp-7) var(--edge) 0} body[data-layout="klar"] .mb-modern>.mb-create-entry+.mb-suche{margin-top:var(--sp-4)} } @layer vertraege { body[data-layout="klar"] .mb-modern [data-access-error]{margin:var(--sp-4) 0 0 var(--sp-3)} body[data-layout="klar"] .mb-modern [data-access-error] .bt-info{margin:0;width:100%} } /* Spieltreff: Treffpunkt zwischen Beginn und Spielort, mit demselben Zeilenrhythmus. */ @layer zustaende{ [data-design="klar"] .hm-line.hm-meeting{align-items:baseline;line-height:1.45} [data-design="klar"] .hm-line.hm-meeting span{white-space:normal;overflow-wrap:anywhere;min-width:0} .pf-wrap .tm-meeting-settings label.kd-eb{display:block} .pf-wrap .tm-meeting-settings .tm-meeting-error{margin:var(--sp-4) 0 0 var(--sp-3)} [data-design="klar"] .ez-training-note + .ez-training-note{margin-top:var(--sp-4)} } /* Postfach nutzt die vorhandene Profil-Textachse hinter der Emoji-Spalte. */ @layer zustaende{ body[data-layout="klar"] .pf-nf .nf-kopf{flex-wrap:nowrap} body[data-layout="klar"] .pf-nf .nf-kopf b{min-width:0;overflow-wrap:anywhere} body[data-layout="klar"] .pf-nf .tx > .bt-zweit{margin-inline-start:calc(var(--fs-row) + var(--sp-4));max-width:calc(100% - var(--fs-row) - var(--sp-4))} } /* Termine: Beginn als Akzent, die Endzeit bleibt untergeordnet. */ @layer zustaende{ [data-design="klar"] .hm-zahl b, [data-design="klar"] .ez-event-start{color:var(--hl-text)} [data-design="klar"] .ez-event-end{font-size:var(--fs-sub);font-weight:inherit;color:var(--klar-sub)} } /* Einheitliche große Startzeit; Endzeit darf als Ganzes darunter umbrechen. */ @layer zustaende{ [data-design="klar"] .hm-zahl b, [data-design="klar"] .ez-event-start:not(.ez-duel .ez-event-start), [data-design="klar"] .ez-event-time{font-size:var(--fs-event-start)} [data-design="klar"] .hm-zahl{flex-wrap:wrap} [data-design="klar"] .hm-zahl b, [data-design="klar"] .hm-zahl i, [data-design="klar"] .ez-training-clock .ez-event-start, [data-design="klar"] .ez-training-clock .ez-event-end{white-space:nowrap} } /* Hallenbelegung: externe Feld-Eyebrows und gemeinsamer Abschnittsrhythmus. */ @layer zustaende{ .hb-modern .hb-field>.bt-eb2{display:block;margin:0 0 var(--sp-4)} .hb-modern .hb-fields>*+*{margin-top:var(--sp-7)} .hb-modern .hb-fields>.ez-training-note{margin-top:var(--sp-4)} .hb-modern .hb-fields>.hb-field-help{margin-top:var(--sp-2);font-size:var(--fs-sub);line-height:1.4;color:var(--klar-sub)} .hb-modern .hb-group+.ez-training-note{margin-top:var(--sp-4)} } @layer vertraege{ /* Mitglieder: dynamische Elternlisten teilen die Inhaltsachse der normalen Gruppen. */ .mb-sheet [data-parent-selected],.mb-sheet [data-parent-results]{margin-inline-start:var(--sp-3)} .mb-sheet .mb-feld + [data-parent-results]{margin-top:var(--sp-4)} } @layer zustaende{ /* Mannschaften: same eyebrow/content axes as Mitglieder and TEAM settings. */ body[data-layout="klar"] .vm-modern>.vm-create{margin:var(--sp-7) var(--edge) 0} body[data-layout="klar"] .vm-modern :is(.vm-body,.vm-content){padding:0 var(--edge) var(--sp-7);margin-top:var(--sp-7)} body[data-layout="klar"] .vm-modern :is(.vm-eb,.vm-content>.bt-eb2){margin:var(--sp-7) 0 var(--sp-4);padding:0;min-height:0} body[data-layout="klar"] .vm-modern :is(.vm-body,.vm-content)>:is(.vm-eb,.bt-eb2):first-child{margin-top:0} body[data-layout="klar"] .vm-modern :is(.vm-body,.vm-content)>:is(.vm-group,.vm-field,.bt-info,.bt-leerzustand,.vm-fehler){margin-inline:var(--sp-3) 0} body[data-layout="klar"] .vm-modern .vm-group{padding:0 var(--sp-5);margin-block:0} body[data-layout="klar"] .vm-modern .vm-group>.vm-menu-row{margin:0;padding:var(--sp-4) 0;gap:var(--sp-4);min-height:calc(var(--sp-8) + var(--sp-6))} body[data-layout="klar"] .vm-modern .vm-menu-row .pf-row-tx{gap:0} body[data-layout="klar"] .vm-modern .vm-menu-row .kf{gap:var(--sp-4)} body[data-layout="klar"] .vm-modern .vm-menu-row .pf-row-s{margin:var(--sp-2) 0 0;padding:0} body[data-layout="klar"] .vm-modern .vm-menu-row .kf+.pf-row-s{padding-left:calc(var(--fs-row) + var(--sp-4))} body[data-layout="klar"] .vm-modern .vm-menu-row+.vm-menu-row::after{left:calc(var(--fs-row) + var(--sp-4))} body[data-layout="klar"] .vm-modern .vm-menu-row:has(>.mb-av)::after{left:calc(var(--kreis-liste) + var(--sp-4))} body[data-layout="klar"] .vm-modern .vm-menu-row .hk{margin-left:auto} body[data-layout="klar"] .vm-modern .vm-content>.bt-info{margin-top:var(--sp-4)} body[data-layout="klar"] .vm-modern .vm-content>.bt-info:first-child{margin-top:0} body[data-layout="klar"] .vm-modern .vm-field{padding:var(--sp-4);margin-block:0} body[data-layout="klar"] .vm-modern .vm-field input{padding:0;margin:0;min-height:var(--sp-6)} body[data-layout="klar"] .vm-modern .vm-fehler>.bt-info{margin:0} } @layer zustaende{ /* Ablage: Eyebrow an der Hauptachse, gemeinsame Gruppen um sp-3 eingerückt. */ body[data-layout="klar"] .ab-modern :is(.ab-body,.ab-card-body){padding:0 var(--edge) var(--sp-7);margin-top:var(--sp-7)} body[data-layout="klar"] .ab-modern :is(.mb-eb2,.bt-eb2){margin:var(--sp-7) 0 var(--sp-4);padding:0;min-height:0} body[data-layout="klar"] .ab-modern :is(.ab-body,.ab-card-body)>:is(.mb-eb2,.bt-eb2):first-child{margin-top:0} body[data-layout="klar"] .ab-modern :is(.ab-body,.ab-card-body)>:is(.ab-group,.ab-field,.bt-suchz,.bt-info,.bt-leerzustand,.ab-speicher,.ab-merk,.bt-hoehenbox){margin-inline:var(--sp-3) 0} body[data-layout="klar"] .ab-modern .ab-group{padding:0 var(--sp-5);margin-block:0} body[data-layout="klar"] .ab-modern .ab-group>.ab-menu-row{padding:var(--sp-4) 0;margin:0;gap:var(--sp-4);min-height:calc(var(--sp-8) + var(--sp-6))} body[data-layout="klar"] .ab-modern .ab-menu-row :is(.pf-row-tx,.pf-row-t){margin:0;padding:0;gap:0} body[data-layout="klar"] .ab-modern .ab-menu-row .kf{gap:var(--sp-4)} body[data-layout="klar"] .ab-modern .ab-menu-row .pf-row-s{margin:var(--sp-2) 0 0;padding:0} body[data-layout="klar"] .ab-modern .ab-menu-row .kf+.pf-row-s{padding-left:calc(var(--fs-row) + var(--sp-4))} body[data-layout="klar"] .ab-modern .ab-menu-row+.ab-menu-row::after{left:calc(var(--fs-row) + var(--sp-4))} body[data-layout="klar"] .ab-modern .ab-menu-row:has(>.bt-av)::after{left:calc(var(--kreis-liste) + var(--sp-4))} body[data-layout="klar"] .ab-modern .ab-value-row{padding:var(--sp-4) 0;margin:0;gap:var(--sp-4)} body[data-layout="klar"] .ab-modern :is(.ab-body,.ab-card-body)>.bt-info{margin-top:var(--sp-4)} body[data-layout="klar"] .ab-modern :is(.ab-body,.ab-card-body)>.bt-info:first-child{margin-top:0} body[data-layout="klar"] .ab-modern .bt-info+.ab-group{margin-top:var(--sp-4)} body[data-layout="klar"] .ab-modern .ab-field{padding:var(--sp-4);margin-block:0} body[data-layout="klar"] .ab-modern .ab-field input{padding:0;margin:0;min-height:var(--sp-6)} body[data-layout="klar"] .ab-modern .ab-field+.ab-group{margin-top:var(--sp-5)} body[data-layout="klar"] .ab-modern :is(.ab-speicher,.ab-merk){padding:var(--sp-4) var(--sp-5);margin-block:0} body[data-layout="klar"] .ab-modern .ab-balken{margin-top:var(--sp-4)} body[data-layout="klar"] .ab-modern .ab-merk+.mb-eb2{margin-top:var(--sp-7)} body[data-layout="klar"] .ab-modern [data-speicherfehler]{margin:var(--sp-4) var(--edge) var(--sp-4) calc(var(--edge) + var(--sp-3))} } @layer zustaende{ /* Meine Strafen: Eyebrow an der Hauptachse, gemeinsame Gruppen um sp-3 eingerückt. */ body[data-layout="klar"] .st-modern :is(.st-body,.bt-body){padding:0 var(--edge) var(--sp-7);margin-top:var(--sp-7)} body[data-layout="klar"] .st-modern :is(.mb-eb2,.bt-eb2){margin:var(--sp-7) 0 var(--sp-4);padding:0;min-height:0} body[data-layout="klar"] .st-modern :is(.st-body,.bt-body)>:is(.mb-eb2,.bt-eb2):first-child{margin-top:0} body[data-layout="klar"] .st-modern :is(.st-body,.bt-body)>:is(.st-group,.st-field,.bt-suchz,.bt-info,.bt-leerzustand,.st-summary,.bt-hoehenbox){margin-inline:var(--sp-3) 0} body[data-layout="klar"] .st-modern .st-group{padding:0 var(--sp-5);margin-block:0} body[data-layout="klar"] .st-modern .st-group>.st-menu-row{padding:var(--sp-4) 0;margin:0;gap:var(--sp-4);min-height:calc(var(--sp-8) + var(--sp-6))} body[data-layout="klar"] .st-modern .st-menu-row :is(.pf-row-tx,.pf-row-t){margin:0;padding:0;gap:0} body[data-layout="klar"] .st-modern .st-menu-row .kf{gap:var(--sp-4)} body[data-layout="klar"] .st-modern .st-menu-row .pf-row-s{margin:var(--sp-2) 0 0;padding:0} body[data-layout="klar"] .st-modern .st-menu-row .kf+.pf-row-s{padding-left:calc(var(--fs-row) + var(--sp-4))} body[data-layout="klar"] .st-modern .st-menu-row+.st-menu-row::after{left:calc(var(--fs-row) + var(--sp-4))} body[data-layout="klar"] .st-modern .st-menu-row:has(>.bt-av)::after{left:calc(var(--kreis-liste) + var(--sp-4))} body[data-layout="klar"] .st-modern .st-value-row{padding:var(--sp-4) 0;margin:0;gap:var(--sp-4)} body[data-layout="klar"] .st-modern :is(.st-body,.bt-body)>.bt-info{margin-top:var(--sp-4)} body[data-layout="klar"] .st-modern :is(.st-body,.bt-body)>.bt-info:first-child{margin-top:0} body[data-layout="klar"] .st-modern .bt-info+.st-group{margin-top:var(--sp-4)} body[data-layout="klar"] .st-modern .st-field{padding:var(--sp-4);margin-block:0} body[data-layout="klar"] .st-modern .st-field input{padding:0;margin:0;min-height:var(--sp-6)} body[data-layout="klar"] .st-modern .st-field+.st-group{margin-top:var(--sp-5)} body[data-layout="klar"] .st-modern :is(.st-summary){padding:var(--sp-4) var(--sp-5);margin-block:0} body[data-layout="klar"] .st-modern [data-speicherfehler]{margin:var(--sp-4) var(--edge) var(--sp-4) calc(var(--edge) + var(--sp-3))} } @layer zustaende{ body[data-layout="klar"] .st-modern :is(.st-body,.bt-body)>.st-summary{margin:0 0 0 var(--sp-3);padding:var(--sp-4) var(--sp-5);gap:var(--sp-4)} body[data-layout="klar"] .st-modern .st-summary i{margin:0} body[data-layout="klar"] .st-modern .st-menu-row .st-satz{margin:0;white-space:nowrap} body[data-layout="klar"] .st-modern .st-menu-row+.st-menu-row::after{left:0} body[data-layout="klar"] .st-modern .st-actions{gap:var(--sp-4)} body[data-layout="klar"] .st-modern .st-actions button{margin:0;padding:var(--sp-3)} body[data-layout="klar"] .st-modern .bt-body>.bt-summe{margin-top:var(--sp-7)} body[data-layout="klar"] .st-modern .bt-info+.st-group{margin-top:var(--sp-4)} body[data-layout="klar"] .st-modern .st-kontodaten:empty{margin:0;padding:0} body[data-layout="klar"] .st-modern .st-kontodaten .st-group{margin:0} } @layer zustaende{ body[data-layout="klar"] .st-modern .st-summary+.bt-leerzustand{margin-top:var(--sp-4)} body[data-layout="klar"] .st-modern .st-body>.ez-outline-action{margin:var(--sp-4) 0 0 var(--sp-3)} } @layer zustaende{ /* Ergebnisse: Hauptachse für Eyebrows, eingerückte Gruppen und gleiche Sheet-Abstände. */ body[data-layout="klar"] .spb-modern :is(.spb-body,.bt-body){padding:0 var(--edge) var(--sp-7);margin-top:var(--sp-7)} body[data-layout="klar"] .spb-modern .bt-eb2{margin:var(--sp-7) 0 var(--sp-4);padding:0;min-height:0} body[data-layout="klar"] .spb-modern :is(.spb-body,.bt-body)>.bt-eb2:first-child{margin-top:0} body[data-layout="klar"] .spb-modern :is(.spb-body,.bt-body)>:is(.ez-menu-group,.bt-info,.bt-leerzustand,.ez-outline-action){margin-inline:var(--sp-3) 0} body[data-layout="klar"] .spb-modern :is(.spb-list,.spb-teamgroup){padding:0 var(--sp-5);margin-block:0} body[data-layout="klar"] .spb-modern :is(.spb-result,.spb-reportmatch,.spb-wahl){margin:0;padding:var(--sp-4) 0;column-gap:var(--sp-4);row-gap:var(--sp-3)} body[data-layout="klar"] .spb-modern :is(.spb-result,.spb-reportmatch,.spb-wahl)+:is(.spb-result,.spb-reportmatch,.spb-wahl)::after{left:0} body[data-layout="klar"] .spb-modern .spb-result .pf-row-tx{gap:0} body[data-layout="klar"] .spb-modern :is(.spb-resultmeta,.spb-bilanztext>span,.spb-wahl>span>i){margin-top:var(--sp-2)} body[data-layout="klar"] .spb-modern .spb-scoregroup{gap:var(--sp-1)} body[data-layout="klar"] .spb-modern .spb-bilanz{padding:var(--sp-4) var(--sp-5);margin-block:0} body[data-layout="klar"] .spb-modern .spb-form{margin-top:var(--sp-4);padding-top:var(--sp-4);gap:var(--sp-3)} body[data-layout="klar"] .spb-modern .spb-bilanznote{margin-top:var(--sp-4)} body[data-layout="klar"] .spb-modern .spb-reportscore{padding:var(--sp-5);margin-block:0;gap:var(--sp-4)} body[data-layout="klar"] .spb-modern .spb-reportsets{gap:var(--sp-2);padding-left:calc(9px + var(--sp-2))} body[data-layout="klar"] .spb-modern .spb-reportsets>span{padding:var(--sp-1) var(--sp-3)} body[data-layout="klar"] .spb-modern .spb-reportdetails>.spb-list{margin-left:var(--sp-3)} body[data-layout="klar"] .spb-modern .spb-reportdetails>.bt-info{margin:var(--sp-4) 0 0 var(--sp-3)} body[data-layout="klar"] .spb-modern .spb-reportdetails>.bt-info:first-child{margin-top:var(--sp-7)} body[data-layout="klar"] .spb-modern .spb-body>.ez-outline-action{margin-top:var(--sp-4)} } @layer zustaende{ /* Dienste unter dem Datum: Trennlinie im selben Raster wie die Mini-Dienste. */ [data-design="klar"] .hm-hero .hm-hero-datecol > .hm-hero-duties{margin-top:var(--sp-4);padding-top:var(--sp-4);padding-bottom:0} [data-design="klar"] .hm-hero-duties .hm-duty-minis{gap:var(--sp-4)} [data-design="klar"] .hm-hero-duties .hm-duty-mini{padding:0;gap:var(--sp-2)} } /* Profil-Postfach B: einzelne Karten, Textachse hinter dem Emoji, gleiche Pillenmaße. */ @layer zustaende{ body[data-layout="klar"] [data-profile-root] .pf-nf-list{margin-inline:calc(var(--edge) + var(--sp-3)) var(--edge)} body[data-layout="klar"] .pf-nf-slotclip{padding:var(--klar-line-width)} body[data-layout="klar"] .pf-nf-card.ez-menu-group{margin:0;padding:var(--sp-5);width:100%} body[data-layout="klar"] .pf-nf-card .nf-meta{margin-bottom:var(--sp-3);gap:0} body[data-layout="klar"] .pf-nf-card .nf-kopf{gap:var(--sp-4)} body[data-layout="klar"] .pf-nf-card .tx>.pf-row-s{margin-top:var(--sp-2);margin-left:calc(var(--fs-row) + var(--sp-4));padding:0} body[data-layout="klar"] .pf-nf-card .nf-footer{margin-top:var(--sp-5);margin-left:calc(var(--fs-row) + var(--sp-4));padding-top:var(--sp-4);gap:var(--sp-4)} body[data-layout="klar"] .pf-nf-card :is(.nf-status-pill,.nf-aktion){width:auto;height:auto;min-height:36px;padding:calc(var(--sp-2) + var(--sp-1)) calc(var(--sp-3) + var(--sp-1));gap:calc(var(--sp-2) + var(--sp-1))} body[data-layout="klar"] .pf-nf-card .nf-aktion{margin-left:auto} body[data-layout="klar"] .pf-nf-card .nf-aktion svg{width:13px;height:13px} } @layer zustaende{ /* Die Überlappung erhält zusätzlichen Bildraum, statt die sichtbare Höhe zu kürzen. */ [data-design="klar"] :is(.hm-hero.kf,.hm-hero.tr,.hm-hero.ez-match-hero,.hm-row.kf) > .hm-band{padding-bottom:var(--r-card)} [data-design="klar"] :is(.hm-hero.kf > .hm-hero-body,.hm-hero.tr > .hm-hero-body,.hm-hero.ez-match-hero > .hm-hero-body,.hm-row.kf > .hm-main){margin-top:calc(-1 * var(--r-card))} } @layer zustaende{ body[data-layout="klar"] .pf-wrap .pf-menu-group > .pf-menu-row.ez-menu-group-head{width:calc(100% + 2 * var(--sp-5));margin-inline:calc(-1 * var(--sp-5));padding-inline:var(--sp-5)} } @layer vertraege{ /* Duty events: same inset and card gap as profile groups, no extra eyebrow gap. */ .pf-wrap .tm-settings .tm-duty-list{display:grid;gap:var(--kachel-gap);margin:0 0 0 var(--sp-3)} .pf-wrap .tm-settings #duty-history:not([hidden]){margin-top:var(--kachel-gap)} } @layer zustaende{ /* Eltern-Dienste: Profil-Menüzeilen, begrenzter Chevron und Standard-Kachelfugen. */ [data-design="klar"] .ez-duty-menu-group>.pf-menu-row{width:100%;margin:0;padding:var(--sp-4) 0} [data-design="klar"] .ez-duty-menu-group>.pf-menu-row>svg{width:var(--sp-5);height:var(--sp-5);flex:0 0 var(--sp-5);color:var(--muted)} [data-design="klar"] :is(.ez-duty-panel,.ez-duty-editor)>:is(.ez-menu-group,.ez-training-note,.ez-event-dutygroup)+:is(.ez-menu-group,.ez-training-note,.ez-training-calendar){margin-top:var(--kachel-gap)} } @layer zustaende{ [data-design="klar"] .ez-duty-request{align-items:flex-start} [data-design="klar"] .ez-duty-request>span[aria-hidden]{flex:none} [data-design="klar"] .ez-duty-request-copy{min-width:0;flex:1;overflow-wrap:anywhere} [data-design="klar"] .ez-duty-request-facts{display:grid;gap:var(--sp-4);margin:0} [data-design="klar"] .ez-duty-request-facts dt{margin:0;color:var(--klar-sub)} [data-design="klar"] .ez-duty-request-facts dd{margin:var(--sp-2) 0 0;color:var(--klar-ink);font-size:var(--fs-row);font-weight:var(--klar-fw-row);line-height:1.4} [data-design="klar"] .ez-duty-request-status{display:block;margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:var(--klar-line-width) solid var(--klar-line);color:var(--klar-sub)} } /* Diensttausch: approved neutral cards, status eyebrows and shared notification motion. */ [data-design="klar"] .ez-duty-request-slot{overflow:hidden} [data-design="klar"] .ez-duty-request-slot>.pf-nf-slotclip.ez-training-panel{margin:0;padding:var(--sp-7) 0 0} [data-design="klar"] .ez-duty-request-slot:first-child>.pf-nf-slotclip{padding-top:0} [data-design="klar"] .ez-duty-request-slot .dt-eb:first-child{margin-top:0} [data-design="klar"] .ez-duty-status-heading{color:var(--klar-accent)} [data-design="klar"] .ez-duty-status-heading[data-duty-state="accepted"]{color:var(--ok)} [data-design="klar"] .ez-duty-status-heading[data-duty-state="declined"]{color:var(--bad)} [data-design="klar"] .ez-duty-swap-icon{display:flex;align-items:center;flex:none;width:var(--sp-5);height:20px;color:var(--klar-sub)} [data-design="klar"] .ez-duty-swap-icon svg{width:var(--sp-5);height:var(--sp-5)} [data-design="klar"] [data-duty-state="accepted"]>.ez-duty-swap-icon{color:var(--ok)} [data-design="klar"] [data-duty-state="declined"]>.ez-duty-swap-icon{color:var(--bad)} [data-design="klar"] [data-duty-state="pending"]>.ez-duty-swap-icon{color:var(--klar-accent)} [data-design="klar"] .ez-duty-request-status{position:relative} [data-design="klar"] .ez-duty-info-icon{position:absolute;inset-inline-start:calc(-1 * (var(--sp-5) + var(--sp-3)));top:var(--sp-4);width:var(--sp-5);text-align:center} [data-design="klar"] .ez-duty-feedback>.pf-nf-slotclip{padding:0 0 var(--sp-7)} [data-design="klar"] .ez-duty-feedback .ez-training-note{margin-inline-start:var(--sp-3)} [data-design="klar"] .ez-duty-feedback+.dt-eb{margin-top:0} [data-design="klar"] .ez-duty-action-slot>.pf-nf-slotclip.ez-training-panel{margin:0;padding:var(--kachel-gap) 0 0} [data-design="klar"] .ez-duty-action-slot:first-child>.pf-nf-slotclip{padding-top:0} /* Termin-Detail: reine Dienstanzeige für Offizielle, Verwaltung bleibt unter TEAM. */ [data-design="klar"] .ez-duty-readonly-row{display:flex;align-items:center;color:var(--klar-ink);cursor:default} body[data-layout="klar"] .pf-wrap .ez-menu-group.pf-menu-group>.ez-duty-readonly-row:not(:has(.pf-row-s)){min-height:calc(var(--sp-8) + var(--sp-7))} /* Kindesname und Hinweise unter dem Familiennamen, nicht unter dem Emoji. */ [data-design="klar"] .ez-duty-readonly-row .pf-row-s{padding-inline-start:calc(var(--fs-row) + var(--sp-4))} /* Diensthinweise: gleiche Text- und Emoji-Spalten wie die Dienstkarten. */ [data-design="klar"] .ez-training-note.ez-duty-context-note{padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-6);gap:var(--sp-4)} [data-design="klar"] .ez-duty-context-note>span:first-child{width:var(--fs-row);flex:0 0 var(--fs-row);text-align:center} [data-design="klar"] .ez-duty-context-note>span:last-child{min-width:0;overflow-wrap:anywhere} @layer zustaende{ /* Diensthinweise: eine Abstandseigentümerin. Eyebrow 24/12, Kachel -> Hinweis 12. */ [data-design="klar"] .ez-duty-panel>.dt-eb+.ez-duty-context-note, .pf-wrap .kd-modern>.kd-eb+.ez-duty-context-note{margin-top:0} [data-design="klar"] .ez-duty-panel>.ez-menu-group+.ez-duty-context-note, .pf-wrap .kd-modern>.ez-menu-group+.ez-duty-context-note{margin-top:var(--kachel-gap)} } /* TEAM-Menüzeilen haben 16px Innenkante statt der 20px in der Terminansicht. */ .pf-wrap .kd-modern>.ez-duty-context-note{padding-inline-start:var(--sp-5)} @layer zustaende{ /* Briefsymbol an der Schriftgrundlinie der ersten Textzeile, auch bei Umbruch. */ [data-design="klar"] .hm-line.hm-invitation{align-items:baseline} [data-design="klar"] .hm-line.hm-invitation > .emoji{flex-shrink:0;align-self:baseline} [data-design="klar"] .hm-line.hm-invitation > span{white-space:normal;overflow-wrap:anywhere} } @layer zustaende{ /* Statusfarben wie in Beteiligung, ohne eigene Pillenflaeche. */ [data-design="klar"] .hm-invitation .hm-invitation-confirmed{display:inline-block;white-space:nowrap;overflow:visible;vertical-align:baseline} [data-design="klar"] .hm-invitation .hm-invitation-status{display:inline;white-space:nowrap;overflow:visible;font-size:inherit;line-height:inherit} [data-design="klar"] .hm-invitation .hm-invitation-status[data-status="zu"]{color:var(--ok)} [data-design="klar"] .hm-invitation .hm-invitation-status[data-status="ab"]{color:var(--bad)} } @layer vertraege{ /* Familienklärung: Außenabstand16, Profil-Symbolachse und volle Feld-/Pillenbreite. */ body[data-layout="klar"] .ms-familien>.ms-family-card{margin:var(--sp-5) 0 0;padding:0 var(--sp-5)} .ms-family-summary{padding:var(--sp-5) 0 var(--sp-2)} .ms-family-summary small,.ms-family-intro small,.ms-family-player-copy small{margin-top:var(--sp-2)} .ms-family-player{padding:var(--sp-4) 0} .ms-family-choices{padding:var(--sp-2) 0 var(--sp-5)} .ms-family-actions{gap:var(--sp-3)} .ms-family-choice{margin:0;padding:var(--sp-3) var(--sp-4)} .ms-family-parents{padding-top:var(--sp-5)} .ms-family-intro{margin-bottom:var(--sp-5)} .ms-family-card .bt-formliste{gap:var(--sp-5)} .ms-family-card .bt-formliste>.bt-feld{margin:0} .ms-family-save{margin-top:var(--sp-5)} .ms-family-info.bt-info{padding:var(--sp-5);margin:0} .ms-family-card .ms-family-info.bt-info{margin-top:var(--sp-5)} .ms-family-card .bt-feld input{margin-top:var(--sp-4)} } @layer zustaende{ /* Card-Fotos A: 20px Screenkante, Profil-Abschnitte 24/12, Zeilen 12/12. Vorschaubilder 64x48 mit 12px Textabstand; Trenner ab derselben Textachse. */ body[data-layout="klar"] .pf-wrap .tm-photo-page .tm-photo-list{padding:0 var(--sp-5)} .pf-wrap .tm-photo-row{margin:0;padding:var(--sp-4) 0;min-height:calc(var(--sp-8) * 2 + var(--sp-5))} .pf-wrap .tm-photo-copy i{margin-top:var(--sp-2)} .pf-wrap .tm-photo-page>.bt-feld{margin:0;width:100%} body[data-layout="klar"] .pf-wrap .tm-photo-page>:is(.ez-menu-group,.bt-info){margin-left:0;margin-right:0;width:100%} .pf-wrap .tm-photo-page>.kd-eb:first-child{margin-top:var(--sp-6)} body[data-layout="klar"] .pf-wrap .tm-photo-page .tm-photo-editor-card{padding:0} .pf-wrap .tm-photo-caption{padding:var(--sp-4) var(--sp-5)} .pf-wrap .tm-photo-preview{padding-bottom:var(--sp-4);margin-bottom:calc(-1 * var(--sp-4));box-sizing:content-box} .pf-wrap .tm-photo-actions{margin-top:var(--sp-7)} .pf-wrap .tm-photo-actions>.ez-outline-action{margin:0;width:100%;min-height:44px;padding:var(--sp-3) var(--sp-4)} .pf-wrap .tm-photo-fields>.bt-feld{margin:0} .pf-wrap .tm-photo-fields>.bt-feld+.bt-feld{margin-top:var(--sp-7)} .pf-wrap .tm-photo-fields input[type=range]{margin-top:var(--sp-3);padding:0} .pf-wrap .tm-photo-page>[data-photo-feedback]:not([hidden]){margin-top:var(--sp-5)} } @layer zustaende { /* ShareSpace composer: same 16px field/list rhythm as ab-field + ab-group. Lists reset their margins above; this scoped contract is the single owner. */ body[data-layout="klar"] .ab-modern .ss-mitte>.ss-folder-create{margin:var(--sp-5) var(--edge) var(--sp-5) calc(var(--edge) + var(--sp-3));padding:0} body[data-layout="klar"] .ab-modern .ss-mitte>.ss-folder-create>label{display:block;margin:0 0 var(--sp-3);padding:0} body[data-layout="klar"] .ab-modern .ss-mitte>.ss-folder-create+:is(.ss-liste,.ss-leer){margin-top:0} body[data-layout="klar"] .ab-modern .ss-mitte>.ss-liste+.ss-liste{margin-top:var(--sp-4)} }