@layer komponenten{
/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENTEN — Aussehen und innerer Aufbau der gemeinsamen Bausteine.
   Hierher gehoert, was ein Bauteil SELBST ausmacht: Groesse, Schrift, Farbe,
   Flex-Aufbau und inneres Polster (auch negative Raender, die ein Element in
   seiner eigenen Zeile halten). Abstaende ZWISCHEN Bausteinen stehen in
   contracts.css. Herkunft: der Globalblock aus profil.css (M1, 08/2026);
   relative Originalreihenfolge beibehalten.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kanonische Standardkachel fuer NEUE Bauteile. Bestehende fachliche Kacheln behalten
   ihre Klassen, verwenden aber dieselben Material-Tokens. Sichtbare Rahmen sind nur
   fuer semantische Zustaende (Auswahl/Warnung/Fehler) erlaubt. */
.ez-kachel{background-color:var(--kachel);background-image:var(--kachel-material-verlauf);
  border:0;border-radius:var(--r-card);box-shadow:var(--kachel-material-schatten)}/* Kachelmaterial-Familie: Flaeche, Radius, Materialverlauf und -schatten kommen fuer alle
   fachlichen Kacheln aus DIESER Regel (bisher 28 wertgleiche Kopien in den Screens).
   Screens besitzen nur Innenmass, Zustaende und Varianten. */

.pf-trainerzeile,
.pf-row,
.pf-nf,
.pf-note,
.pf-tile,
.dt-feld,
.pf-follow-team,
.ab-merk,
.ab-speicher,
.dk-thema,
.dk-kontaktkarte,
.fd-post,
.fd-sr-events,
.fd-sr-fulltable,
.hm-row,
.hm-live-timeline-card,
.ig-z,
.ms-sportcard,
.ms-switchzeile,
.ms-saisonort,
.ms-status,
.ms-kader-person,
.pr-platzkarte,
.tb-stat,
.tb-z,
.tm-row,
.dt-abl,
.tm-saisonort,
.tm-cardmedia-card,
.dt-uebungkarte,
.dt-map.dt-google-map,
.vm-kachel,
.tm-teamhero-ident{
  background:var(--kachel);border-radius:var(--r-card);box-shadow:var(--kachel-material-schatten);
  background-image:var(--kachel-material-verlauf)}

/* Ueberschrift neben einem Personenavatar: Stufe lead, ueberall gleich. */
.pf-wrap .pf-me-name,
.pf-wrap .mb-khead .mb-ktx b,
.pf-wrap .kd-khead .kd-ktx b{font-size:var(--fs-lead);font-weight:800;letter-spacing:-.3px;
  line-height:1.15}
/* (geteilte Regel — Vertragsanteil in contracts.css) */
.pf-wrap .mb-khead .mb-ktx > i,
.pf-wrap .kd-khead .kd-ktx > i{
  display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted)}
/* Personenavatare: zwei Hauptmasse fuer die ganze App. Formensprache wie im Kader:
   rechteckig mit weichen Ecken statt Kreis. */
.pf-av, .mb-kav{width:56px;height:56px;border-radius:var(--r-card)}
.mb-av, .fd-av{width:40px;height:40px;border-radius:var(--r-field)}
/* Foto und Initialen sitzen in derselben Form; ein fehlgeschlagenes Bild legt
   die unveraenderten Initialen frei. Statuspunkte bleiben ausserhalb der Huelle. */
.ez-person-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;border-radius:inherit;overflow:hidden;vertical-align:middle;isolation:isolate}
.ez-person-avatar>.ez-avatar-initials{font:inherit;font-style:normal;line-height:1;color:inherit}
.ez-person-avatar>.ez-avatar-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
/* (geteilte Regel — Vertragsanteil in contracts.css) */
/* Eyebrow (Abschnitts-Kapitaelchen): EINE Typografie fuer alle Screens — bisher 17 wertgleiche
   Kopien in 12 Screen-Dateien. Screens setzen nur noch Varianten (Farbe, Ausrichtung, Vorlauf). */
.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,.au-eb,.ms-kader-eb{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:0;
  font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;color:var(--hl-text)}
/* Plus-Kreis (V3C/5): PROFIL und die Screen-Abschnittskoepfe teilen dieselbe
   26px-Huelle, 14px-SVG-Box und 44px-Trefferflaeche — seit V3D/1 auch der FEED-Titel-Plus
   (dort ohne Eyebrow-Vertikalausgleich). Radius bewusst 99px (nicht
   --r-chip=999) — reine Ownership, kein Wertfix. Glyph-Strichstaerken variieren
   (2.2/2.4/2.6) — offener Icon-Audit-Punkt, kein CSS-Thema. */
.pf-plus,.mb-plus,.fd-plus{position:relative;width:26px;height:26px;border-radius:99px;
  border:1px solid var(--hl);background:transparent;color:var(--hl-text);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.pf-plus.danger{border-color:var(--bad);color:var(--bad);cursor:pointer}
.pf-plus svg,.mb-plus svg,.fd-plus svg{width:14px;height:14px}
.pf-plus::after,.mb-plus::after,.fd-plus::after{content:"";position:absolute;inset:-9px}

/* Plus rechts: 26px Knopf, 44px Trefferfeld — ohne die Zeile zu dehnen. */
.pf-eb .pf-plus,.pf-eb .mb-plus,
.hm-eb .mb-plus,.tm-eb .mb-plus,.tm-meb .mb-plus,.kd-eb .mb-plus,
.vm-eb .mb-plus,.mb-eb2 .mb-plus,.bt-eb2 .mb-plus,.mr-eb .mb-plus{
  margin-top:-7px;margin-bottom:-7px}
/* Die Zahl rechts ist Beiwerk und aendert nichts an der Hoehe. */
.pf-eb .z,.hm-eb .z,.tm-eb .z,.tm-meb .z,.kd-eb .z,.mb-eb2 .z,.bt-eb2 .z,
.pf-eb .r,.tm-eb .r{font-size:12.5px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--muted)}
/* Ausnahme: ein Erklaertext direkt unter der Ueberschrift bleibt ohne Vorlauf (0),
   ein Feld darunter faengt seine Reihe an — beides deckt die Regel oben schon ab. */
/* Karten-/Formular-Unterzeile (.bt-unter): der Baustein selbst — Typografie, Farbe,
   vertikale Innengeometrie (M3.4, vorher drei wertgleiche Screen-Setzer). Aeusserer
   Rhythmus und Kantenbuendigkeit stehen in contracts.css. */
.bt-unter{font-size:var(--fs-sub);color:var(--muted);padding-top:0;padding-bottom:0}
/* Ruhiger Hilfetext ohne Kasten/Icon. Aeusserer Abstand bleibt Kontextvertrag. */
.bt-hilfetext{font-size:var(--fs-sub);font-weight:400;line-height:1.45;color:var(--muted);text-align:center}
.bt-feldhilfe{font-size:var(--fs-sub);font-weight:400;line-height:1.45;color:var(--muted)}
/* Standard-Formularfeld (V3C/4): bt-feld ist der appweite Baustein (33 Builder-
   Stellen in 9 Modulen) — intrinsische Darstellung hier, Vorlauf in contracts.css.
   Das Kartenfeld mb-feld ist eine EIGENE Rolle und bleibt in mitglieder.css. */
.bt-feld{display:block}
.bt-feld i,.pf-lab{display:block;font-style:normal;font-size:var(--fs-eb);font-weight:800;
  letter-spacing:var(--lsp-eb);text-transform:uppercase;color:var(--hl-text)}
.bt-feld input,.bt-feld select{display:block;width:100%;max-width:100%;box-sizing:border-box;height:53px;
  -webkit-appearance:none;appearance:none;margin-top:var(--sp-4);
  background-color:var(--field);border:1px solid var(--line);border-radius:var(--r-field);padding:var(--sp-5);
  color:var(--ink);font:400 var(--fs-input)/1.2 var(--f)}
.bt-feld select{padding-right:44px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.bt-feld input[type="date"]{height:53px;line-height:1.2}
.bt-feld input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
/* Native Datumssymbole in ALLEN Feldfamilien, nicht nur bt-feld: ein schwarzes
   Browser-Symbol ist auf dunklem Kartenmaterial sonst kaum zu erkennen. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(.7)}

.bt-feld input::placeholder{color:var(--muted)}
.bt-feld input:focus,.bt-feld select:focus{outline:none;border-color:var(--hl)}

/* Mehrfach-Dropdown: native Disclosure/Checkbox-Semantik, Standardkachel als
   Huelle. Dieselben Zeilenmasse und Farbrollen in beiden getrennten Paletten. */
.bt-mehrfach summary{display:flex;align-items:center;gap:var(--sp-4);min-height:53px;padding:var(--row-y) var(--row-x);box-sizing:border-box;cursor:pointer;list-style:none}
.bt-mehrfach summary::-webkit-details-marker{display:none}
.bt-mehrfach summary>span{flex:1;min-width:0}
.bt-mehrfach summary svg{width:20px;height:20px;flex-shrink:0;color:var(--muted)}
.bt-mehrfach[open] summary svg{transform:rotate(180deg)}
.bt-mehrfach small,.bt-mehrfach-wert small{display:block;font-size:var(--fs-sub);font-weight:400;color:var(--muted)}
.bt-mehrfach strong,.bt-mehrfach-wert strong{display:block;font-size:var(--fs-row);font-weight:400;color:var(--ink);overflow-wrap:anywhere}
.bt-mehrfach-wert{padding:var(--row-y) var(--row-x)}
.bt-mehrfach-liste{border-top:1px solid var(--line);max-height:240px;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--row-x) var(--sp-2)}
.bt-mehrfach-option{display:flex;align-items:center;gap:var(--sp-4);min-height:48px;padding:var(--row-y) 0;box-sizing:border-box;cursor:pointer;font-size:var(--fs-body);font-weight:400;color:var(--ink)}
.bt-mehrfach-option + .bt-mehrfach-option{border-top:1px solid var(--line)}
.bt-mehrfach-option>span{flex:1;min-width:0;overflow-wrap:anywhere}
.bt-mehrfach-option input{appearance:none;-webkit-appearance:none;flex-shrink:0;width:22px;height:22px;margin:0;border:1px solid var(--line-stark);border-radius:var(--sp-2);background:var(--field);display:grid;place-content:center;cursor:pointer}
.bt-mehrfach-option input:checked{background:var(--hl);border-color:var(--hl-text)}
.bt-mehrfach-option input:checked::after{content:"";width:10px;height:6px;border-left:2px solid var(--hl-ink);border-bottom:2px solid var(--hl-ink);transform:translateY(-1px) rotate(-45deg)}

/* Wertkachel: appweiter kompakter Label/Wert-Baustein fuer Zusammenfassungen.
   Die Kachel besitzt nur ihre intrinsische Geometrie; Gruppenabstaende leben im Contract. */
.bt-wertkachel{display:flex;align-items:baseline;gap:var(--sp-4);width:100%;box-sizing:border-box;
  background:var(--kachel);border-radius:var(--r-card);box-shadow:var(--kachel-material-schatten);padding:var(--row-y) var(--row-x);
  background-image:var(--kachel-material-verlauf);}
.bt-wertkachel .lab{flex:1;min-width:0;font-size:var(--fs-body);color:var(--muted)}
.bt-wertkachel .wert{min-width:0;max-width:64%;font-size:var(--fs-row);font-weight:400;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.bt-wertkachel .wert.hell{color:var(--hl-text)}
/* Sekundaerer Wert rechts in einer Navigations-/Auswahlkachel, keine Titelrolle. */
.bt-nebenwert{flex:0 0 auto;max-width:35%;font-size:var(--fs-sub);font-weight:400;color:var(--muted);overflow-wrap:anywhere}

/* Schalter-Familie: gleiche Geometrie und Motion in Profil, Kader, Formular und Setup.
   Die vorhandenen Zustandssuffixe bleiben kompatibel. Der Knopf bewegt sich nur per
   transform, nicht per left (kein Layout pro Animationsframe). 46/28 mit 3px Innenkante. */
.pf-sw,.bt-sw,.kd-schalt,.ms-switch{position:relative;display:block;flex:0 0 auto;width:46px;height:28px;
  border:0;border-radius:var(--r-chip);background:var(--field);padding:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line-stark);
  transition:background var(--motion-state) var(--ease-state)}
.pf-sw > i,.bt-sw > i,.kd-schalt > i,.ms-switch > i{position:absolute;display:block;left:3px;top:3px;
  width:22px;height:22px;border-radius:var(--r-chip);background:var(--muted);transform:translateX(0);
  transition:transform var(--motion-state) var(--ease-state),background var(--motion-state) var(--ease-state)}
.pf-sw.on,.bt-sw.on,.kd-schalt.an,.ms-switch.an{background:var(--switch-active-bg)}
.pf-sw.on > i,.bt-sw.on > i,.kd-schalt.an > i,.ms-switch.an > i{transform:translateX(18px);background:var(--switch-active-thumb)}

/* Aufgaben-/Listenkarten-Huelle (V3C/3): TEAM-Aufgabe, Ablage-Zeile/-Dateiwahl,
   Strafen-Zeile und Dokument-Zeile teilen dieselbe 11x14-Kartenhuelle. Innere Slots
   bleiben wegen unterschiedlicher DOM-Anatomie fachlokal; Aussenrhythmus in
   contracts.css. */
.tm-aufg,.ab-z,.ab-wahl,.st-z,.dk-row,.vm-z{display:flex;align-items:center;gap:var(--sp-3);width:100%;
  padding:11px var(--row-x);background:var(--kachel);border:0;border-radius:var(--r-card);
  box-shadow:var(--kachel-material-schatten);color:var(--ink);text-align:left;font:inherit;cursor:pointer;
  background-image:var(--kachel-material-verlauf);}
/* Linkfaehige Varianten benoetigen denselben intrinsischen Text-Reset. */
.st-z,.dk-row{text-decoration:none}

/* Kompakte Suche: appweiter Suchbaustein fuer Kader, Ablage und weitere Listen.
   Lupe + randloses Eingabefeld in einer normalen Card; Aussenrhythmus in contracts.css. */
.kd-suchz,.bt-suchz{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--row-x)}
.bt-suchz{background:var(--kachel);border-radius:var(--r-card);box-shadow:var(--kachel-material-schatten);
  background-image:var(--kachel-material-verlauf);}
.kd-suchz .ic,.bt-suchz .ic{flex:0 0 auto;display:flex;color:var(--muted)}
.kd-suchz .ic svg,.bt-suchz .ic svg{width:17px;height:17px}
.kd-suchz input,.bt-suchz input{flex:1;min-width:0;background:transparent;border:0;outline:none;
  -webkit-appearance:none;appearance:none;font:400 var(--fs-input) var(--f);color:var(--ink)}
.kd-suchz input::placeholder,.bt-suchz input::placeholder{color:var(--muted)}
.kd-suchz:focus-within .ic,.bt-suchz:focus-within .ic{color:var(--hl-text)}

/* Auswahlkachel: TEAM / MITGLIEDER / TABELLE / FORMULARE teilen Kartenhuelle,
   Textgeometrie und .an-Zustand (V3C/2; bt-wahlz seit dem Formular-Umbau v3296).
   Rechter Abschluss optional: Haken, Chevron oder nichts (tb).
   Aussenrhythmus (8 Nachlauf) in contracts.css. */
.tm-wahlz,.mb-wahlz,.tb-wahlz,.bt-wahlz{display:flex;align-items:center;gap:var(--sp-4);width:100%;
  padding:11px var(--row-x);background:var(--kachel);border:1px solid transparent;
  border-radius:var(--r-card);box-shadow:var(--kachel-material-schatten);font:inherit;text-align:left;cursor:pointer;
  background-image:var(--kachel-material-verlauf);}
.tm-wahlz.an,.mb-wahlz.an,.tb-wahlz.an,.bt-wahlz.an{border-color:var(--hl)}
/* Optionales Emoji als intrinsischer linker Marker einer gemeinsamen Auswahlkachel. */
.bt-wahlz .bt-wahl-emoji{display:flex;align-items:center;justify-content:center;
  flex:0 0 var(--sp-7);width:var(--sp-7);font-size:var(--fs-lead);line-height:1}
.tm-wahlz .tx,.mb-wahlz .tx,.tb-wahlz .tx,.bt-wahlz .tx{flex:1;min-width:0}
.tm-wahlz .tx b,.mb-wahlz .tx b,.tb-wahlz .tx b,.bt-wahlz .tx b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--ink)}
.tm-wahlz .tx i,.mb-wahlz .tx i,.tb-wahlz .tx i,.bt-wahlz .tx i{display:block;font-style:normal;font-size:var(--fs-sub);
  color:var(--sek);margin-top:var(--sp-1)}
.tm-wahlz .hk,.mb-wahlz .hk,.bt-wahlz .hk{flex:0 0 auto;width:24px;height:24px;border-radius:var(--r-chip);
  border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--hl-ink)}
.tm-wahlz .hk.an,.mb-wahlz .hk.an,.bt-wahlz .hk.an{border-color:var(--hl-text);background:var(--hl)}
.tm-wahlz .hk svg,.mb-wahlz .hk svg,.bt-wahlz .hk svg{width:13px;height:13px}

/* Filter-Schiene (V3C/1): HOME und MEHR verwenden denselben kompletten Baustein
   einschliesslich Aussenkante; nur die Inhalte unterscheiden sich. FEED teilt
   weiterhin dessen innere Geometrie. Neue Filter nicht screenweise kopieren. */
.hm-filter{display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--edge);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hm-filter::-webkit-scrollbar{display:none}
.hm-schiene,.fd-schiene{align-items:center;gap:3px;flex:1 1 auto;min-width:0;
  background:var(--field);border:1px solid var(--line);border-radius:var(--r-chip);padding:3px}
/* HOME und MEHR: Jede Spalte ist mindestens so breit wie ihr Inhalt. Solange die
   Summe hineinpasst, teilen 1fr-Spalten die volle Breite gleichmaessig auf; erst bei
   echtem Platzmangel entsteht horizontaler Scrollraum. Kein Mengen-Schwellwert. */
.hm-schiene{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hm-schiene::-webkit-scrollbar{display:none}
.fd-schiene{display:flex}
.hm-fchip,.fd-fchip{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-2);border:0;border-radius:var(--r-chip);padding:7px 10px;background:transparent;
  color:var(--muted);font:600 12.5px var(--f);white-space:nowrap;cursor:pointer}
.fd-fchip{flex:1 1 0}
.fd-schiene.viele{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fd-schiene.viele::-webkit-scrollbar{display:none}
.fd-schiene.viele .fd-fchip{flex:0 0 auto;padding:7px 14px}
.hm-fchip.sel,.fd-fchip.sel{background:var(--kachel-fest);color:var(--ink);font-weight:700;
  box-shadow:0 1px 3px var(--paint-hm-fchip-box-shadow)}

.hm-fdot,.fd-fdot{width:6px;height:6px;border-radius:99px;flex-shrink:0}

/* Weg-Pille (V3C/6): ruhige Vollbreiten-Aktion am Ende eines Karten-/Seitenpfads.
   Basis rot; kd-wegp.still darf sie fachlokal neutralisieren (kein reines
   Destruktiv-Versprechen). */
.fd-wegp,.kd-wegp,.mb-wegp,.dk-wegp{display:block;width:100%;background:var(--kachel);border:0;
  border-radius:var(--r-chip);padding:13px 0;font:700 var(--fs-row) var(--f);
  color:var(--bad);text-align:center;cursor:pointer}

/* Spieltreff-/Turnier-Badge (V3C/7): HOME und TEAM teilen die kompakte
   Verlaufs-Huelle und das 40x40-Wappenbild. Das links ueberhaengende Wappen sitzt
   buendig und ist so hoch wie die Badge (Rund = ihre Rundung); margin-left:15px ist
   intrinsische Ueberhang-Kompensation. Halter-/Hero-Varianten bleiben screenlokal
   (HOME koppelt z-index an seine Pseudo-Kante). */
.hm-kf-badge{position:relative;display:inline-flex;align-items:center;
  flex-shrink:0;font-size:13.25px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;color:var(--paint-hm-kf-badge-color);
  background:linear-gradient(90deg,var(--paint-hm-kf-badge-background),var(--paint-hm-kf-badge-background-2),var(--paint-hm-kf-badge-background-3),var(--paint-hm-kf-badge-background-4));
  border-radius:var(--r-chip);padding:0 10px 0 28px;margin-left:15px;min-height:26px}
.hm-kf-badge .wap img{display:block;width:40px;height:40px;object-fit:contain}

/* Wappen-Kontrastvertrag (v3577): Vereinswappen bleiben als Original-SVG unveraendert.
   Der feine helle Kontur-Halo trennt dunkle Formen vom Dark-Background; der zweite,
   dunkle Schatten haelt gleichzeitig sehr helle/weisse Wappen lesbar. Gilt zentral
   fuer alle kanonischen Dateien unter wappen/ und vermeidet Vereins-Sonderfaelle. */
img[src^="wappen/"],img[src*="/wappen/"]{
  filter:drop-shadow(0 0 .75px var(--paint-komponenten-filter)) drop-shadow(0 1px 1.5px var(--paint-komponenten-filter-2))
}
/* Labelgewicht gemeinsam gepinnt: das native <b> rechnete in TEAM sonst UA-bolder (900)
   auf dem 800er-Kontext — beim C7-Computed-Smoke entdeckter vorbestehender Unterschied,
   in v3284 geschlossen (einzige beabsichtigte visuelle Aenderung des Nachlaufs). */
.hm-kf-badge b{font-weight:800}

/* Unterschrift-Anzeige (V3C/8): bereits gespeicherte Unterschriften in Verwaltung
   und Dokumenten teilen dieselbe read-only Bildhuelle. Aussenrhythmus liegt in
   contracts.css; das aktive Unterschreiben ist die getrennte bt-sig-Rolle. */
.mb-sig,.dk-sig{border:1px solid var(--line);border-radius:var(--r-field);background:var(--field);
  height:104px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mb-sig img,.dk-sig img{max-width:100%;max-height:100%}
/* Unterschrift-Eingabefeld (V3C/8): gemeinsames Canvas-Feld fuer Beitritt, Training,
   Foerderverein, Tennis und Kuendigung. Der Vorlauf kommt aus dem bestehenden
   bt-eb2-Contract; deshalb kein eigener margin-top. */
.bt-sig{position:relative;height:168px;border:1.5px dashed var(--paint-bt-sig-border);border-radius:var(--r-field)}

.bt-sig canvas{filter:var(--signature-filter);position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.bt-sig-hint{position:absolute;left:0;right:0;bottom:var(--sp-4);text-align:center;
  font-size:var(--fs-sub);color:var(--muted);pointer-events:none}
.bt-sig.voll{border-style:solid;border-color:var(--hl)}
.bt-sig.voll .bt-sig-hint{display:none}
.bt-sig-weg{position:absolute;right:var(--sp-3);top:var(--sp-3);border:0;border-radius:var(--r-chip);
  background:var(--hl);padding:var(--sp-3) var(--sp-4);font:800 var(--fs-eb)/1 var(--f);color:var(--hl-ink);
  box-shadow:var(--kachel-schatten);visibility:hidden;cursor:pointer}
.bt-sig.voll .bt-sig-weg{visibility:visible;color:var(--hl-ink)}

/* Geldkachel (v3296): gefuellte Kachel mit der EINEN grossen Zahl (Betrag/Enddatum) —
   geteilt von den Mitgliedschafts-Karten (Dokumente) und den Formularen.
   Aussenrhythmus (20 Vorlauf) in contracts.css. */
.dk-kachel{background:var(--kachel);border-radius:var(--r-card);
  box-shadow:var(--kachel-material-schatten);padding:var(--sp-4) var(--row-x);
  background-image:var(--kachel-material-verlauf);}
.dk-betrag{display:flex;align-items:baseline;gap:var(--sp-3)}
.dk-betrag span{font-size:var(--fs-zahl);font-weight:800;letter-spacing:-1.2px;line-height:1.1;color:var(--hl-text)}
.dk-betrag span.aus{color:var(--muted)}
.dk-betrag span.rot{color:var(--bad)}
/* Label ueber der Zahl (Kuendigung: "Endet am") — Zeichen zu Wort 4. */
.dk-klab{font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--sp-2)}
.dk-betrag i{font-style:normal;font-size:var(--fs-sub);color:var(--muted)}
.dk-grund{font-size:var(--fs-sub);line-height:1.55;color:var(--muted);padding-top:var(--sp-3)}
.dk-trenn{height:1px;background:var(--line);margin:var(--sp-4) 0}
.dk-kz{display:flex;align-items:center;gap:var(--sp-4);padding-bottom:var(--sp-3)}
.dk-kz:last-child{padding-bottom:0}
.dk-kz .lab{flex:1;min-width:0;font-size:var(--fs-body);color:var(--muted)}
.dk-kz .wert{min-width:0;font-size:var(--fs-row);font-weight:700;color:var(--ink);text-align:right}
.dk-kz .wert.hl{color:var(--hl-text)}

/* Beitragskachel: eine einzige volle Standardkachel unter der gemeinsamen
   Abschnitts-Eyebrow. Nur ihre innere Tarif-/Betragsgeometrie ist speziell;
   Aussenrhythmus und Kachelgrundlage kommen aus dem zentralen Vertrag. */
.bt-beitrag-kachel{padding-top:var(--sp-6);padding-bottom:var(--sp-6)}
.bt-beitrag-kopf{display:flex;align-items:center;gap:var(--sp-5)}
.bt-beitrag-tarif{flex:1;min-width:0}
.bt-beitrag-tarif b{display:block;font-size:var(--fs-row);font-weight:800;line-height:1.2;color:var(--ink)}
.bt-beitrag-tarif i{display:block;margin-top:var(--sp-2);font-style:normal;font-size:var(--fs-sub);line-height:1.3;color:var(--muted)}
.bt-beitrag-preis{flex:0 0 auto;white-space:nowrap;font-size:var(--fs-title);font-weight:800;line-height:1.1;color:var(--hl-text)}
.bt-beitrag-preis.aus{color:var(--muted)}

/* Positiver Leerzustand: grosse gestrichelte Kachel mit Statussymbol, Titel und Unterzeile.
   Appweit wiederverwendbar fuer echte leere Inhaltsbereiche; der Aussenrhythmus kommt
   vom jeweiligen Abschnitts-/Body-Vertrag. */
.bt-leerzustand{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;min-height:calc(var(--sp-8) * 5);box-sizing:border-box;border:1px dashed var(--line-stark);
  border-radius:var(--r-card);padding:var(--sp-7) var(--sp-6);text-align:center}
.bt-leerzustand-ic{width:calc(var(--sp-7) * 2);height:calc(var(--sp-7) * 2);border:2px solid var(--ok);
  border-radius:var(--r-chip);display:flex;align-items:center;justify-content:center;color:var(--ok);margin-bottom:var(--sp-6)}
.bt-leerzustand-ic svg{width:var(--sp-7);height:var(--sp-7)}
.bt-leerzustand-h{font-size:var(--fs-lead);font-weight:800;line-height:1.2;color:var(--ink)}
.bt-leerzustand-tx{margin-top:var(--sp-2);font-size:var(--fs-val);line-height:1.3;color:var(--muted)}
/* Ruhiger Leerhinweis, NICHT die grosse positive Statuskarte: Typografierolle wie
   pf-empty / mb-leer (sub, normal), Polsterung wie pf-empty. Bestehende grosse
   Erfolg-/Statusdarstellungen behalten ihre eigene Rolle und werden nicht global verkleinert. */
.bt-leerzustand.kompakt{min-height:0;padding:var(--sp-5);font:400 var(--fs-sub)/1.5 var(--f);color:var(--muted)}
.bt-leerzustand-text{max-width:100%;overflow-wrap:anywhere;font:400 var(--fs-sub)/1.5 var(--f);color:var(--muted)}
/* Inhaltsgrenze gilt auch fuer lange ungegliederte Namen und vergroesserte Schrift.
   Nicht abschneiden: Umbruch besitzt der gemeinsame Baustein, nicht jeder Screen. */
.bt-leerzustand-h,.bt-leerzustand-tx,.bt-info-text{max-width:100%;overflow-wrap:anywhere}

/* Erfolgskachel: gemeinsamer Abschlussbaustein fuer erfolgreich beendete Vorgänge.
   Intrinsische Card-Geometrie hier; Aussenrhythmus und Aktionsabstand in contracts.css. */
.bt-erfolg{width:100%;box-sizing:border-box;background:var(--kachel);border-radius:var(--r-card);
  box-shadow:var(--kachel-material-schatten);padding:var(--sp-7) var(--sp-6) var(--sp-6);text-align:center;
  background-image:var(--kachel-material-verlauf);}
.bt-erfolg-ic{width:56px;height:56px;border-radius:999px;background:var(--hl);color:var(--hl-ink);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5)}
.bt-erfolg-ic svg{width:28px;height:28px}
.bt-erfolg-h{font-size:var(--fs-lead);font-weight:800;line-height:1.2;color:var(--ink)}
.bt-erfolg-tx{font-size:var(--fs-body);line-height:1.55;color:var(--muted);margin-top:var(--sp-4)}

/* Neutraler Systemhinweis: ruhiger solider Kasten mit kleinem gelbem Info-Zeichen.
   Appweit genutzt (Formulare, Kader, Ablage, Strafen, TEAM). Solid = Information;
   gestrichelt bleibt fuer Leeres/noch Auszufuellendes reserviert. Aussenrhythmus
   in contracts.css. */
.bt-info{display:flex;align-items:flex-start;gap:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-field);
  padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sub);line-height:1.55;color:var(--muted)}
.bt-info-ic{flex:0 0 auto;color:var(--hl-text);height:calc(var(--fs-sub) * 1.55);
  display:flex;align-items:center}
.bt-info-ic svg{width:16px;height:16px;display:block}
.bt-info-text{flex:1;min-width:0}
.bt-info.fehler{color:var(--bad);border-color:var(--bad)}
.bt-info.fehler .bt-info-ic{color:var(--bad)}
.bt-info b{color:var(--ink);font-weight:700}

/* Gemeinsamer Vorgangs-Fortschritt: Beitritt, Mannschafts-Setup und weitere Mehrschritt-Flows. */
.bt-fort{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--edge) 0}
.bt-rule{display:flex;gap:var(--sp-2);flex:1;min-width:0}
.bt-rule i{flex:1;height:3px;border-radius:var(--r-chip);background:var(--line)}
.bt-rule i.on{background:var(--hl)}
/* Header-Variante: Gesamtbreite bleibt unabhaengig von der Schrittzahl gleich.
   Der Balken nutzt den freien Platz, der Schrittstand sitzt rechtsbuendig daneben. */
.bt-fort.kopf{width:100%;box-sizing:border-box;margin-top:var(--sp-6);padding:0;gap:var(--sp-6)}
.bt-fort.kopf .bt-rule i{transition:background var(--motion-auth-step) var(--ease-standard),opacity var(--motion-auth-step) var(--ease-standard),flex-grow var(--motion-auth-step) var(--ease-standard)}
.bt-fort.kopf em{flex:0 0 14ch;width:14ch;min-width:14ch;max-width:14ch;line-height:1;white-space:nowrap;text-align:right;color:var(--hl-text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}


.bt-fort.unter{padding-top:var(--sp-1);gap:var(--sp-3);font-size:var(--fs-sub);color:var(--muted)}
.bt-fort em{flex:0 0 auto;font-style:normal;font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;color:var(--muted)}

/* Gemeinsame volle Hauptaktion in Formular-/Setup-Flows. */
.bt-haupt{display:block;width:100%;border:0;border-radius:var(--r-chip);background:var(--hl);color:var(--hl-ink);font:800 var(--fs-body) var(--f);padding:13px 0;cursor:pointer}
.bt-haupt:disabled,.bt-haupt.aus{opacity:.5;cursor:default}

/* Gemeinsame volle Zweitaktion: ruhige dunkle Flaeche, Vereinsgelb als Schrift.
   .pf-kachelknopf bleibt als bestehender Profil-Alias erhalten; das Aussehen lebt hier. */
.bt-zweit,.pf-kachelknopf{display:block;border:0;border-radius:var(--r-chip);background:var(--kachel);color:var(--hl-text);font:700 var(--fs-row) var(--f);padding:13px 0;text-align:center;cursor:pointer}
.bt-zweit{width:100%}
.bt-zweit:disabled,.bt-zweit.aus{opacity:.5;cursor:default}
.bt-zweit.rot,.pf-kachelknopf.rot{color:var(--bad)}
/* Kleiner destruktiver Entfernen-Button: bestehendes rotes Profil-X als gemeinsamer Baustein. */
/* Kleine Hinzufuegen-/Entfernen-Aktionen teilen dieselbe sichtbare Geometrie:
   26px-Huelle, 14px-Icon und 44px-Trefferflaeche. Nur Bedeutung/Farbe unterscheiden sich. */
.bt-entfernen{position:relative;flex-shrink:0;width:26px;height:26px;border-radius:99px;
  border:1px solid color-mix(in srgb,var(--bad) 50%,transparent);background:transparent;
  display:flex;align-items:center;justify-content:center;color:var(--bad);cursor:pointer;padding:0}
.bt-entfernen svg{width:14px;height:14px}
.bt-entfernen::after{content:"";position:absolute;inset:-9px}

/* Kleine Statuspille: Maße der rechten Termine-Pille (.hm-pill.trainer.klein),
   Material der kleinen Sportpille; Farbrolle setzt der jeweilige Screen. */
.ez-statuspill{position:relative;display:inline-flex;align-items:center;gap:var(--sp-3);
  flex-shrink:0;max-width:100%;box-sizing:border-box;border-radius:999px;
  padding:4px 10px;font:800 11.25px/1.4 var(--f);letter-spacing:1px;text-transform:uppercase;
  overflow-wrap:anywhere;color:var(--statusfarbe,var(--sek));
  background:linear-gradient(180deg,var(--paint-hm-art-page-background) 0%,var(--paint-hm-art-page-background-2) 100%),
    color-mix(in srgb,var(--statusfarbe,var(--sek)) 16%,var(--kachel) 84%);
  box-shadow:0 3px 7px var(--paint-hm-art-page-box-shadow),
    inset 0 1px 1px var(--paint-hm-art-page-box-shadow-2),
    inset 0 -1px 2px var(--paint-hm-art-page-box-shadow-3)}
.ez-statuspill::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid var(--paint-hm-art-page-border)}
}

/* KLAR — zentrale, schrittweise aktivierbare Designsprache.
   Die spaete Varianten-Schicht loest historische Screen-Materialien ab, ohne
   deren Geometrie oder den gemeinsamen Rhythmus zu ueberschreiben.
   Aktivierung: data-design="klar" am Screen/Sheet oder spaeter am App-Root. */
@layer zustaende{
body{background:var(--klar-bg)}
body .scr-leiste,
body .au-welcome-head,
body .sh-nav{background:var(--klar-bg);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
body .sh-nav{border-color:var(--klar-soft)}
body .scr-leiste,body .au-welcome-head{border-bottom-color:transparent}
body .scr-leiste.eng,body .au-welcome-head.eng{border-bottom-color:var(--klar-soft)}
body .scr-krume{font-size:var(--fs-sub);font-weight:var(--klar-fw-label);color:var(--klar-sub);text-transform:uppercase}
body .scr-krume .ez-title-dot{color:var(--klar-accent)}
body .scr-ic.voll{background:transparent;color:var(--klar-accent);border-color:var(--klar-accent-line);font-weight:var(--klar-fw-label)}
body .sh-tab{font-weight:var(--klar-fw-label)}
[data-design="klar"] .scr-titelblock h1,

[data-design="klar"] .pf-title,

[data-design="klar"] .pf-me-name{font-weight:var(--klar-fw-title)}
.ez-title-dot{color:var(--hl-text)}
[data-design="klar"] .pf-eb,

[data-design="klar"] .ez-eb,

[data-design="klar"] .hm-eb,

[data-design="klar"] .fd-eb,

[data-design="klar"] .mr-eb,

[data-design="klar"] .tm-eb,

[data-design="klar"] .tm-meb,

[data-design="klar"] .tp-eb,

[data-design="klar"] .dt-eb,

[data-design="klar"] .dk-eb,

[data-design="klar"] .kd-eb,

[data-design="klar"] .vm-eb,

[data-design="klar"] .bt-eb2,

[data-design="klar"] .mb-eb2,

[data-design="klar"] .au-eb,

[data-design="klar"] .ms-kader-eb{font-weight:var(--klar-fw-label)}
[data-design="klar"] .pf-row-t,

[data-design="klar"] .pf-row-t.b,

[data-design="klar"] .hm-event-title{font-weight:var(--klar-fw-row)}
/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .ez-kachel,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .hm-hero,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .hm-row,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .hm-live-timeline-card,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .pf-row,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .pf-note,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .pf-nf,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .tm-row,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .dk-row,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .vm-z,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .fd-post,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .ms-kader-person,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .tb-z,

/* Konturkarte: nur der Baustein besitzt Material. Keine neue Abstandsleiter. */
[data-design="klar"] .bt-wertkachel{background:transparent;background-image:none;border:var(--klar-line-width) solid var(--klar-line);box-shadow:none}
/* Freie Listenzeile: Rahmen entfaellt, existierendes Innenmass bleibt erhalten. */
[data-design="klar"] .ez-list-row{border:0;border-bottom:var(--klar-line-width) solid var(--klar-line);border-radius:0;box-shadow:none;background:transparent}
/* Vor der umrahmten Spieltreff-Karte reicht deren eigene obere Kante. */
[data-design="klar"] .hm-zeile:has(+ .hm-zeile > .hm-row.kf) > .ez-list-row{border-bottom:0}
[data-design="klar"] .hm-date,

[data-design="klar"] .hm-hero-datum,

[data-design="klar"] .hm-duty-mini{background:transparent;background-image:none;border:0;box-shadow:none;border-radius:0}
[data-design="klar"] .hm-duty-mini b{font-weight:var(--klar-fw-title)}
/* Datum in Timeline, ALS NÄCHSTES und Details hat dieselbe leichte Textrolle. */
[data-design="klar"] :is(.hm-hero-datum,.tm-event-day) > :is(b,i,u,span,small){font-weight:var(--klar-fw-date)}
[data-design="klar"] .hm-date:empty{visibility:hidden}
[data-design="klar"] .hm-hero-datum::after,

[data-design="klar"] .hm-sportbadge::after,

[data-design="klar"] .hm-pill::after,

[data-design="klar"] .hm-kf-badge::after{content:none}
[data-design="klar"] .hm-schiene,

[data-design="klar"] .fd-schiene{background:transparent;box-shadow:none;border-color:var(--klar-line)}
[data-design="klar"] .hm-fchip{font-weight:var(--klar-fw-label);box-shadow:none}
[data-design="klar"] .hm-fchip.sel{background:var(--klar-active);color:var(--klar-accent);box-shadow:none}
[data-design="klar"] .hm-pill,

[data-design="klar"] .hm-sportbadge,

[data-design="klar"] .hm-kf-badge,

[data-design="klar"] .hm-duty,

[data-design="klar"] .hm-kf-duty,

[data-design="klar"] .hm-ortpill,

[data-design="klar"] .hm-duty-pill{background:transparent;background-image:none;box-shadow:none;border:0;font-weight:var(--klar-fw-label)}
[data-design="klar"] .hm-pill,

[data-design="klar"] .hm-sportbadge b,

[data-design="klar"] .hm-kf-badge b,

[data-design="klar"] .hm-duty-mini b{font-weight:var(--klar-fw-label);color:var(--sek)}
[data-design="klar"] .hm-sportbadge b{font-size:var(--fs-eb)}
[data-design="klar"] .hm-pill.voll{color:var(--hl-text)}
/* Auf Fotos bleiben Beschriftungen lesbar: ein ruhiger, deckender Grund. */
[data-design="klar"] .hm-band-in .hm-pill,

/* Auf Fotos bleiben Beschriftungen lesbar: ein ruhiger, deckender Grund. */
[data-design="klar"] .hm-band-in .hm-kf-badge{background:var(--klar-photo-label-bg);color:var(--klar-photo-label-ink);border:var(--klar-line-width) solid var(--klar-photo-label-line)}
[data-design="klar"] .hm-band-in .hm-kf-badge b{color:var(--klar-photo-label-ink)}
[data-design="klar"] .hm-band-in .hm-pill.voll{color:var(--klar-photo-accent)}
[data-design="klar"] .hm-zahl b,

[data-design="klar"] .hm-hero-title b,

[data-design="klar"] .hm-kf-badge b,

[data-design="klar"] .hm-duell .kick b{font-weight:var(--klar-fw-title)}
[data-design="klar"] .hm-zahl b{color:var(--ink)}
[data-design="klar"] .hm-act,

[data-design="klar"] .hm-chip{background:transparent;box-shadow:none;font-weight:var(--klar-fw-label)}
[data-design="klar"] .hm-act.an,

[data-design="klar"] .hm-chip.an{border-width:var(--klar-line-width);border-color:var(--klar-accent-line);color:var(--hl-text)}
[data-design="klar"] .hm-act.aus,

[data-design="klar"] .hm-chip.aus{border-color:var(--klar-line);color:var(--sek);font-weight:var(--klar-fw-label)}
/* Fotos behalten ihre Quellen und Hoehen. Badge und Datum sitzen unter dem Bild,
   nicht auf einer kuenstlichen Materialkante. Intrinsischer Aufbau der Fotokarte. */
[data-design="klar"] .hm-hero::before{content:none}
[data-design="klar"] .hm-hero-title .hm-sportbadge{padding-left:0;padding-right:0}
/* Eine gemeinsame linke/rechte Innenkante fuer Foto-Pillen, Inhalt und Aktionen. */
[data-design="klar"] .hm-hero .hm-band-in,
[data-design="klar"] .hm-hero .hm-hero-body{padding-left:var(--row-x);padding-right:var(--row-x)}
[data-design="klar"] .hm-hero .hm-hero-oben{align-items:stretch}
[data-design="klar"] .hm-hero.tr .hm-hero-tx{display:flex;flex-direction:column}
[data-design="klar"] .hm-hero.tr .hm-hero-title .hm-sportbadge{padding-top:0;padding-bottom:0;min-height:0}
[data-design="klar"] .hm-hero .hm-hero-oben .hm-hero-datum{width:calc(var(--klar-hero-date-width) - var(--sp-3));margin-right:var(--sp-2);left:var(--sp-2);align-self:flex-start;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;padding:0;border:0;border-radius:0;position:relative}
/* Strich unabhängig vom Textblock um eine Rasterstufe nach links versetzt. */
[data-design="klar"] .hm-hero .hm-hero-oben .hm-hero-datum::before{content:"";position:absolute;top:0;bottom:0;left:calc(-1 * var(--sp-2));width:calc(var(--klar-line-width) / 2);background:var(--klar-accent);pointer-events:none}
[data-design="klar"] .hm-band{border-bottom-left-radius:0;border-bottom-right-radius:0}
[data-design="klar"] .hm-band::after{background:none}
[data-design="klar"] .hm-hero.tr .hm-hero-tx .hm-sportbadge,
[data-design="klar"] .hm-hero.tr .hm-hero-oben .hm-hero-datum,
[data-design="klar"] .hm-hero.kf .hm-kf,
[data-design="klar"] .hm-hero.kf .hm-hero-oben .hm-hero-datum,
[data-design="klar"] .hm-hero.spiel .hm-duell.pille{margin-top:0}
[data-design="klar"] .hm-duell.pille .paar{background:transparent;box-shadow:none;border:0}
[data-design="klar"] .hm-duell.pille .kick{background:transparent;box-shadow:none}
[data-design="klar"] .hm-duell .hm-name{font-weight:var(--klar-fw-row)}
[data-design="klar"] .hm-hero.tr .hm-line{color:var(--sek)}
/* Terminliste: offene Zeile nach Photoshop-Referenz, gemeinsame Inhaltsrollen. */
[data-design="klar"] .hm-flat-head{align-items:center;justify-content:space-between}
[data-design="klar"] .hm-flat-head .hm-sportbadge{padding:0;min-height:0;flex-shrink:0}
/* Trainingsetiketten teilen exakt die Rolle der kleinen Terminzeile. */
[data-design="klar"] .hm-flat-head .hm-sportbadge b,
[data-design="klar"] .hm-hero.tr .hm-hero-title .hm-sportbadge b,
[data-design="klar"] .tm-event-card[data-event-art="training"] .tm-event-meta > :is(span,small){font-size:var(--fs-eb);font-weight:var(--klar-fw-label);color:var(--sek);line-height:1;letter-spacing:1px;text-transform:uppercase}
[data-design="klar"] .hm-flat-head .hm-sportbadge .hm-sport{font-size:var(--fs-row)}
[data-design="klar"] .hm-flat-head .hm-pill.klein{margin-left:auto;padding:0;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-eb);line-height:1;text-transform:uppercase;letter-spacing:1px}
[data-design="klar"] .hm-row.tr .hm-flat-head .hm-pill.kind.klein{color:var(--klar-accent);font-size:var(--fs-eb)}
[data-design="klar"] .hm-zahl.klein b{font-size:var(--fs-event-start)}
[data-design="klar"] .hm-zahl{flex-wrap:wrap;row-gap:var(--sp-2)}
[data-design="klar"] .hm-zahl b{margin-bottom:0}
[data-design="klar"] .hm-chip{min-height:0;padding:var(--sp-3);font-size:var(--fs-body)}
[data-design="klar"] .hm-chip::after{content:"";inset:-3px 0}
[data-design="klar"] .hm-zeile:has(.ez-list-row) .hm-date:not(:empty){border-right:var(--klar-line-width) solid var(--klar-accent);padding-left:0;padding-right:var(--sp-3)}
[data-design="klar"] .hm-hero .hm-hero-datum i,
[data-design="klar"] .hm-hero .hm-hero-datum u{font-size:var(--fs-hero-date);line-height:1.2}
[data-design="klar"] .hm-date i,
[data-design="klar"] .hm-date u{font-size:var(--fs-timeline-date);line-height:1.2}
[data-design="klar"] .hm-hero .hm-hero-datum b{font-size:var(--fs-hero-day);line-height:1.2}
[data-design="klar"] .hm-date b{font-size:var(--fs-timeline-day);line-height:1.2}
/* Datumszeilen teilen eine Textmitte; Monatskuerzel ohne nachlaufenden Zeichenabstand. */
[data-design="klar"] .hm-date{display:flex;flex-direction:column;align-items:center;text-align:center}
[data-design="klar"] .hm-hero .hm-hero-datum > :is(i,b,u),
[data-design="klar"] .hm-date i,
[data-design="klar"] .hm-date b,
[data-design="klar"] .hm-date u{letter-spacing:0;text-align:center;font-weight:var(--klar-fw-timeline-date)}
[data-design="klar"] .hm-row.spiel .hm-flat-head .hm-pill{color:var(--klar-accent)}
/* Kompaktes Wappen-Duell: wiederverwendbar fuer Termin- und Spielansichten.
   Datums-/Zeitwerte sind Text, der Bogen allein ist dekorativ und animiert. */
.ez-duel{display:grid;grid-template-columns:minmax(0,1fr) var(--klar-kickoff-size) minmax(0,1fr);gap:var(--sp-3);align-items:start;margin-top:var(--sp-4);margin-bottom:var(--sp-4)}
/* Kleine Spieltagskarten: dieselben durchgehenden Spielfeldlinien wie in TEAM. */
[data-design="klar"] .hm-row.spiel .ez-duel{border-top:var(--klar-line-width) solid var(--klar-soft)}
[data-design="klar"] .hm-row.spiel:not(.follow) .ez-duel{border-bottom:var(--klar-line-width) solid var(--klar-soft)}
.ez-duel-side{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.ez-duel-crest{display:flex;align-items:center;justify-content:center;width:48px;height:52px;margin-bottom:var(--sp-3);color:var(--sek);font-size:var(--fs-sub)}
.ez-duel-crest img{width:100%;height:100%;object-fit:contain}
.ez-duel-name{font-size:var(--fs-sub);font-weight:var(--klar-fw-title);line-height:1.35;overflow-wrap:anywhere;color:var(--ink)}
.ez-duel-side small{font-size:var(--fs-mini);color:var(--sek);margin-top:var(--sp-2)}
.ez-kickoff{width:var(--klar-kickoff-size);height:var(--klar-kickoff-size);border:var(--klar-line-width) solid var(--klar-line);border-radius:50%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);isolation:isolate}
.ez-kickoff::before{content:"";position:absolute;inset:var(--sp-2);border:2px solid transparent;border-top-color:var(--klar-accent);border-right-color:var(--klar-accent-line);border-radius:50%;pointer-events:none}
.ez-kickoff>span,.ez-kickoff>small{font-size:var(--fs-mini);color:var(--sek);line-height:1.1}
.ez-kickoff strong{font-size:var(--fs-lead);font-weight:var(--klar-fw-title);line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink)}
/* Zugehoerige Termindetails erben dieselben Material- und Schriftrollen. */
[data-design="klar"].pf-wrap .pf-sheet{background:var(--klar-bg);background-image:none;box-shadow:none;border:var(--klar-line-width) solid var(--klar-line)}
[data-design="klar"] .dt-kachel{background:transparent;box-shadow:none;border-color:var(--klar-line)}
[data-design="klar"] .dt-titel,
[data-design="klar"] .dt-lead,
[data-design="klar"] .dt-kachel b{font-weight:var(--klar-fw-title)}
[data-design="klar"] .dt-kachel i,
[data-design="klar"] .dt-tx b,
[data-design="klar"] .dt-diensttitel b,
[data-design="klar"] .dt-pill,
[data-design="klar"] .pf-tun,
[data-design="klar"] .bt-wertkachel b{font-weight:var(--klar-fw-label)}
[data-design="klar"] .dt-feld,
[data-design="klar"] .dt-ortkachel,
[data-design="klar"] .dt-kopfpille,
[data-design="klar"] .dt-kopfpille.duell .in{background:var(--klar-bg);background-image:none;box-shadow:none;border:var(--klar-line-width) solid var(--klar-line)}
[data-design="klar"] .dt-band{box-shadow:none}
[data-design="klar"] .dt-kopfpille .tx b,
[data-design="klar"] .dt-kopfpille.duell .kick b{font-weight:var(--klar-fw-title)}
[data-design="klar"] .dt-feld b,
[data-design="klar"] .dt-feld i,
[data-design="klar"] .dt-kopfpille.duell .kick i,
[data-design="klar"] .dt-kopfpill{font-weight:var(--klar-fw-label)}
[data-design="klar"] .hm-duty i,
[data-design="klar"] .hm-duty-pill-item b,
[data-design="klar"] .hm-kf-duty b,
[data-design="klar"] .hm-duell .s u,
[data-design="klar"] .hm-duell .kick i,
[data-design="klar"] .hm-namen .hm-name,
[data-design="klar"] .hm-live-tl-name,
[data-design="klar"] .hm-live-tl-min,
[data-design="klar"] .hm-live-tl-note{font-weight:var(--klar-fw-label)}
[data-design="klar"] .dt-kopfpille.duell{background:transparent;border:0}
}

/* Klare Ereignisdetails: gemeinsame offene Übersicht statt einzelner Datenkarten. */
@layer zustaende{
[data-design="klar"] .ez-event-header h2{font:var(--klar-fw-title) var(--fs-title)/1.2 var(--f);letter-spacing:-.45px;text-transform:uppercase;color:var(--ink);overflow-wrap:anywhere}
[data-design="klar"] .ez-event-header p{font-size:var(--fs-sub);line-height:1.45;color:var(--sek);overflow-wrap:anywhere}
[data-design="klar"] .ez-event-photo{aspect-ratio:5/2;background-size:cover;background-position:center;border-radius:var(--r-card);border:var(--klar-line-width) solid var(--klar-line)}
[data-design="klar"] .ez-event-duel{display:grid;grid-template-columns:minmax(0,1fr) var(--klar-kickoff-size) minmax(0,1fr);gap:var(--sp-3);align-items:start}
[data-design="klar"] .ez-event-club{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);min-width:0;text-align:center;font-size:var(--fs-row);font-weight:var(--klar-fw-row);line-height:1.35;overflow-wrap:anywhere}
[data-design="klar"] .ez-event-crest{width:calc(var(--sp-8) * 2);height:calc(var(--sp-8) * 2);padding:var(--sp-3);display:flex;align-items:center;justify-content:center;border-radius:var(--r-field);background:var(--avatar-bg);color:var(--sek);font-size:var(--fs-row)}
[data-design="klar"] .ez-event-crest.mit-bild{background:transparent}
[data-design="klar"] .ez-event-crest img{display:block;width:100%;height:100%;object-fit:contain}
[data-design="klar"] .ez-event-host{font-size:var(--fs-sub);color:var(--sek);line-height:1.45}
[data-design="klar"] .ez-event-overview{border-top:var(--klar-line-width) solid var(--klar-line);border-bottom:var(--klar-line-width) solid var(--klar-line)}
[data-design="klar"] .ez-event-when{display:grid;grid-template-columns:calc(var(--sp-8) * 2 + var(--sp-5)) minmax(0,1fr);align-items:center;gap:var(--sp-6)}
[data-design="klar"] .ez-event-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1);border-right:var(--klar-line-width) solid var(--klar-accent);padding-right:var(--sp-5);text-align:center;text-transform:uppercase;line-height:1.15;color:var(--sek);font-size:var(--fs-sub);font-weight:var(--klar-fw-date)}
[data-design="klar"] .ez-event-date strong{font-size:var(--fs-zahl);font-weight:var(--klar-fw-date);color:var(--hl-text)}
[data-design="klar"] .ez-event-clock{min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
[data-design="klar"] .ez-event-label{font-size:var(--fs-eb);color:var(--sek);letter-spacing:1px;text-transform:uppercase;font-weight:var(--klar-fw-label)}
[data-design="klar"] .ez-event-time{font-size:var(--fs-event-start);font-weight:var(--klar-fw-title);line-height:1.2;color:var(--ink)}
[data-design="klar"] .ez-event-end{font-size:var(--fs-body);line-height:1.35;color:var(--sek)}
[data-design="klar"] .ez-event-meeting{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--fs-body);line-height:1.5;color:var(--sek)}
[data-design="klar"] .ez-event-meeting strong{font-weight:var(--klar-fw-row);color:var(--ink)}
[data-design="klar"] .ez-event-meeting div > span{display:block;overflow-wrap:anywhere}
[data-design="klar"] .ez-event-response-label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);font-size:var(--fs-eb);font-weight:var(--klar-fw-label);letter-spacing:1px;text-transform:uppercase;color:var(--sek)}
[data-design="klar"] .ez-event-response-label strong{font:inherit;color:var(--hl-text);text-align:right;overflow-wrap:anywhere}
[data-design="klar"] .ez-event-location{align-items:center;gap:var(--sp-4);padding:0}
[data-design="klar"] .ez-event-location .dt-tx{overflow-wrap:anywhere}
[data-design="klar"] .ez-event-detail .dt-acts .hm-chip{padding:var(--sp-3) 0;min-height:44px;box-shadow:none;background:transparent;font-size:var(--fs-body);font-weight:var(--klar-fw-row)}
[data-design="klar"] .ez-event-detail .dt-pill{min-height:44px}
[data-design="klar"] .ez-event-detail .dt-breit{flex-wrap:wrap}
[data-design="klar"] .ez-event-detail .dt-breit .dt-pill{padding-left:var(--sp-3);padding-right:var(--sp-3)}
[data-design="klar"] .ez-event-detail .dt-dienstkachel,
[data-design="klar"] .ez-event-detail .dt-abl{border:0;border-bottom:var(--klar-line-width) solid var(--klar-line);border-radius:0;background:transparent;background-image:none;box-shadow:none;padding-left:0;padding-right:0}
[data-design="klar"] .ez-event-detail .dt-abl .t b{font-weight:var(--klar-fw-row)}
[data-design="klar"] .ez-event-detail .dt-abl .t i{font-size:var(--fs-sub)}
[data-design="klar"] .ez-event-detail .dt-av{border:var(--klar-line-width) solid var(--klar-line);background:var(--avatar-bg);color:var(--sek);font-weight:var(--klar-fw-label)}
[data-design="klar"] .ez-event-detail .dt-note{border:0;border-left:var(--klar-line-width) solid var(--klar-accent);border-radius:0;background:transparent;padding:0 0 0 var(--sp-4)}
[data-design="klar"] .ez-event-detail .dt-fuss .dt-pill{border:var(--klar-line-width) solid var(--klar-line);background:transparent;color:var(--sek);font-weight:var(--klar-fw-row)}
}

@layer zustaende{
[data-design="klar"].dt .pf-grip > span{background:var(--muted)}
[data-design="klar"] .ez-event-detail .dt-pill.hl{border-width:var(--klar-line-width);border-color:var(--klar-accent-line);color:var(--hl-text)}
}

/* Spieltagskopf und Dienste folgen derselben klaren Ereignisfamilie. */
@layer zustaende{
[data-design="klar"] .ez-event-duel .ez-event-crest{height:var(--klar-kickoff-size);padding:0;background:transparent;border-radius:0}
[data-design="klar"] .ez-event-duel .ez-event-crest img{height:calc(var(--sp-8) * 2);width:calc(var(--sp-8) * 2);filter:none}
[data-design="klar"] .ez-event-duel .ez-event-club{font-size:var(--fs-sub);font-weight:var(--klar-fw-title)}
[data-design="klar"] .ez-event-duel .ez-kickoff > span{text-transform:uppercase;letter-spacing:.5px}
[data-design="klar"] .ez-event-matchdate{text-align:center;color:var(--sek);font-size:var(--fs-sub);line-height:1.45}
[data-design="klar"] .ez-event-dutygroup{display:grid;gap:var(--sp-4);border:0;padding:0}
[data-design="klar"] .ez-event-duty{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-4);text-align:left;color:var(--ink);background:var(--klar-surface-subtle);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);font:inherit;appearance:none}
[data-design="klar"] button.ez-event-duty{cursor:pointer}
[data-design="klar"] .ez-event-duty .ez-event-label{display:flex;align-items:center;gap:var(--sp-3)}
[data-design="klar"] .ez-event-duty-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 var(--fs-row);width:var(--fs-row);font-size:var(--fs-row);line-height:1}
[data-design="klar"] .ez-event-duty-copy{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
[data-design="klar"] .ez-event-duty-copy strong{padding-left:calc(var(--fs-row) + var(--sp-3));font-size:var(--fs-row);line-height:1.4;font-weight:var(--klar-fw-row);overflow-wrap:anywhere}
[data-design="klar"] .ez-event-duty.offen .ez-event-duty-copy strong{color:var(--hl-text)}
[data-design="klar"] .ez-event-duty-arrow{display:flex;align-items:center;justify-content:center;width:var(--sp-8);height:var(--sp-8);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-chip);color:var(--sek)}
[data-design="klar"] .ez-event-duty-arrow svg{width:var(--sp-5);height:var(--sp-5)}
}

/* Spielplakat: vorhandene Wappen vor einem zurückhaltenden Sportfeld.
   Die Linien sind Sportgeometrie, kein weiterer Inhaltsrahmen. */
@layer zustaende{
[data-design="klar"] .ez-match-poster{position:relative;isolation:isolate;overflow:hidden;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);background:var(--klar-surface-subtle);padding-left:var(--row-x);padding-right:var(--row-x)}
[data-design="klar"] .ez-match-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;fill:none;stroke:var(--klar-line);stroke-width:1;opacity:.3}
[data-design="klar"] .ez-match-meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);min-width:0}
[data-design="klar"] .ez-match-meta .ez-event-matchdate{font-size:var(--fs-sub);line-height:1.35;text-align:left;color:var(--sek)}
[data-design="klar"] .ez-match-meta > span{font-size:var(--fs-mini);font-weight:var(--klar-fw-label);color:var(--hl-text);text-transform:uppercase;letter-spacing:.5px;text-align:right}
[data-design="klar"] .ez-match-poster .ez-event-duel{--klar-kickoff-size:calc(var(--sp-8) * 3 + var(--sp-4));gap:var(--sp-3)}
[data-design="klar"] .ez-match-poster .ez-kickoff{background:transparent}
[data-design="klar"] .ez-match-poster .ez-kickoff:not(.ez-dual-orbit){border-color:var(--klar-accent-line)}
[data-design="klar"] .ez-match-poster .ez-kickoff strong{font-size:var(--fs-title);font-weight:var(--klar-fw-row)}
[data-design="klar"] .ez-match-poster .ez-event-crest{width:calc(var(--sp-8) * 2 + var(--sp-3))}
[data-design="klar"] .ez-match-poster .ez-event-crest img{width:100%;height:calc(var(--sp-8) * 2 + var(--sp-3))}
[data-design="klar"] .ez-match-poster .ez-event-club{font-weight:var(--klar-fw-row);color:var(--ink)}
[data-design="klar"] .ez-match-end{text-align:center;color:var(--sek);font-size:var(--fs-sub)}
}

/* REGISTER / E2: alle Cards von unten, inklusive eigener Profil-Huelle.
   Offene Listen, klare Abschnitte und ruhige Schrift. Fachkomponenten (Spielfeld,
   Foto, Wappen, Ergebnisgrafik, Signatur und PDF) behalten ihre eigene Geometrie. */
@layer zustaende{
[data-sheet-design="register"] .pf-sheet{background:var(--klar-bg)}
[data-sheet-design="register"] .pf-eb,

[data-sheet-design="register"] .ez-eb,

[data-sheet-design="register"] .hm-eb,

[data-sheet-design="register"] .fd-eb,

[data-sheet-design="register"] .mr-eb,

[data-sheet-design="register"] .tm-eb,

[data-sheet-design="register"] .tm-meb,

[data-sheet-design="register"] .tp-eb,

[data-sheet-design="register"] .dt-eb,

[data-sheet-design="register"] .dk-eb,

[data-sheet-design="register"] .kd-eb,

[data-sheet-design="register"] .vm-eb,

[data-sheet-design="register"] .bt-eb2,

[data-sheet-design="register"] .mb-eb2,

[data-sheet-design="register"] .au-eb,

[data-sheet-design="register"] .ms-kader-eb{font-weight:var(--klar-fw-label);border:0;white-space:normal}
[data-sheet-design="register"] .pf-title{font-size:var(--fs-title);font-weight:var(--klar-fw-title);letter-spacing:-.6px;text-transform:uppercase;color:var(--klar-ink)}
[data-sheet-design="register"] .pf-title::after{content:".";color:var(--klar-accent)}
[data-sheet-design="register"] .pf-sub,

[data-sheet-design="register"] .bt-unter{font-size:var(--fs-sub);font-weight:var(--klar-fw-title);color:var(--klar-sub)}
[data-sheet-design="register"] .pf-row,

[data-sheet-design="register"] .pf-trainerzeile,

[data-sheet-design="register"] .pf-nf,

[data-sheet-design="register"] .pf-note,

[data-sheet-design="register"] .pf-follow-team,

[data-sheet-design="register"] .tm-row,

[data-sheet-design="register"] .tm-men,

[data-sheet-design="register"] .dk-row,

[data-sheet-design="register"] .dk-kontaktkarte,

[data-sheet-design="register"] .bt-wertkachel,

[data-sheet-design="register"] .vm-z,

[data-sheet-design="register"] .ig-z,

[data-sheet-design="register"] .ms-kader-person,

[data-sheet-design="register"] .ms-switchzeile,

[data-sheet-design="register"] .ms-saisonort,

[data-sheet-design="register"] .tm-saisonort,


[data-sheet-design="register"] .dt-feld,

[data-sheet-design="register"] .dt-abl,

[data-sheet-design="register"] .dt-uebungkarte,

[data-sheet-design="register"] .ab-merk{background:transparent;background-image:none;box-shadow:none;border:0;border-bottom:var(--klar-line-width) solid var(--klar-line);border-radius:0;padding-left:0;padding-right:0}
[data-sheet-design="register"] .pf-row-t,

[data-sheet-design="register"] .pf-row-t.b,

[data-sheet-design="register"] .pf-me-name,

[data-sheet-design="register"] .tm-row b,

[data-sheet-design="register"] .tm-men b,

[data-sheet-design="register"] .dk-row b,

[data-sheet-design="register"] .bt-wertkachel b,

[data-sheet-design="register"] .pf-note b,

[data-sheet-design="register"] .pf-nf b,

[data-sheet-design="register"] .ms-kader-person b,

[data-sheet-design="register"] .vm-z b{font-weight:var(--klar-fw-row)}
[data-sheet-design="register"] .pf-in,

[data-sheet-design="register"] .bt-feld input,

[data-sheet-design="register"] .bt-feld select,

[data-sheet-design="register"] .mb-feld input,

[data-sheet-design="register"] .mb-feld select{background-color:transparent;background-image:none;box-shadow:none;border:0;border-bottom:var(--klar-line-width) solid var(--klar-line);border-radius:0;font-size:var(--fs-input);font-weight:var(--klar-fw-title);padding-left:0}
[data-sheet-design="register"] .pf-in:focus,

[data-sheet-design="register"] .bt-feld input:focus,

[data-sheet-design="register"] .bt-feld select:focus,

[data-sheet-design="register"] .mb-feld input:focus,

[data-sheet-design="register"] .mb-feld select:focus{border-bottom-color:var(--klar-accent)}
[data-sheet-design="register"] .pf-lab,
[data-sheet-design="register"] .au-lab,

[data-sheet-design="register"] .bt-feld i,

[data-sheet-design="register"] .mb-feld label{font-size:var(--fs-eb);font-weight:var(--klar-fw-label);color:var(--klar-sub)}
[data-sheet-design="register"] .bt-wahlz,

[data-sheet-design="register"] .mb-wahlz,

[data-sheet-design="register"] .tm-wahlz,

[data-sheet-design="register"] .tb-wahlz,

[data-sheet-design="register"] .pf-tile,

[data-sheet-design="register"] .ms-sportcard,

[data-sheet-design="register"] .dk-kachel,

[data-sheet-design="register"] .bt-info,

[data-sheet-design="register"] .pf-empty,

[data-sheet-design="register"] .bt-leerzustand,

[data-sheet-design="register"] .kd-suchz,

[data-sheet-design="register"] .bt-suchz{background:transparent;background-image:none;box-shadow:none;border-width:var(--klar-line-width)}
[data-sheet-design="register"] .pf-abbr,

[data-sheet-design="register"] .pf-tun,

[data-sheet-design="register"] .bt-haupt,

[data-sheet-design="register"] .bt-zweit,

[data-sheet-design="register"] .pf-role{font-weight:var(--klar-fw-label);box-shadow:none}
[data-sheet-design="register"] .ez-register-profile{margin-left:var(--edge);margin-right:var(--edge);padding-left:0;padding-right:0;border-top:var(--klar-line-width) solid var(--klar-soft);border-bottom:var(--klar-line-width) solid var(--klar-line)}
[data-sheet-design="register"] .ez-register-profile .pf-me-name{font-size:var(--fs-val);font-weight:var(--klar-fw-row)}
[data-sheet-design="register"] .pf-role{padding:0;border:0;background:transparent;color:var(--klar-sub);font-size:var(--fs-eb);letter-spacing:0;text-transform:none}
[data-sheet-design="register"] .pf-role + .pf-role::before{content:"\00a0\00a0·\00a0\00a0"}
[data-sheet-design="register"] .pf-body b,
[data-sheet-design="register"] .pf-body strong{font-weight:var(--klar-fw-row)}
[data-sheet-design="register"] .ms-titel{font-weight:var(--klar-fw-title)}
[data-sheet-design="register"] .pf-tile-z{font-weight:var(--klar-fw-row)}
[data-sheet-design="register"] .mb-name,
[data-sheet-design="register"] .mb-z .t,
[data-sheet-design="register"] .mb-z .wert{font-weight:var(--klar-fw-row)}
}

@layer zustaende{
[data-sheet-design="register"] .kd-pz,
[data-sheet-design="register"] .kd-tr,
[data-sheet-design="register"] .kd-wz,
[data-sheet-design="register"] .kd-wz2,
[data-sheet-design="register"] .kd-tapz,
[data-sheet-design="register"] .kd-schaltz,
[data-sheet-design="register"] .kd-sz,
[data-sheet-design="register"] .kd-merk,
[data-sheet-design="register"] .kd-vbz,
[data-sheet-design="register"] .mb-row,
[data-sheet-design="register"] .mb-merk,
[data-sheet-design="register"] .mb-z,
[data-sheet-design="register"] .tm-aufg,
[data-sheet-design="register"] .tm-merk,
[data-sheet-design="register"] .tm-trrow,
[data-sheet-design="register"] .tm-trzeile,
[data-sheet-design="register"] .tm-kachel,
[data-sheet-design="register"] .tm-zeile,
[data-sheet-design="register"] .ab-z,
[data-sheet-design="register"] .ab-wahl,
[data-sheet-design="register"] .st-z,
[data-sheet-design="register"] .dk-thema,
[data-sheet-design="register"] .dk-z2,
[data-sheet-design="register"] .vm-wz,
[data-sheet-design="register"] .spb-reportmatch{background:transparent;background-image:none;box-shadow:none;border:0;border-bottom:var(--klar-line-width) solid var(--klar-line);border-radius:0;padding-left:0;padding-right:0}
[data-sheet-design="register"] .pf-val,
[data-sheet-design="register"] .pf-tile-d,
[data-sheet-design="register"] .pf-me.kind .pf-me-tx .t,
[data-sheet-design="register"] .ms-sek,
[data-sheet-design="register"] .ms-famtitle,
[data-sheet-design="register"] .ms-famfrage,
[data-sheet-design="register"] .mb-feld i,
[data-sheet-design="register"] .mb-in i,
[data-sheet-design="register"] .kd-hwfeld i,
[data-sheet-design="register"] .dk-para,
[data-sheet-design="register"] .dk-doc-subheading,
[data-sheet-design="register"] .dk-z2 .wert,
[data-sheet-design="register"] .tm-cardmedia-label,
[data-sheet-design="register"] .dt-feld i,
[data-sheet-design="register"] .kd-wz .r,
[data-sheet-design="register"] .kd-wz2 .t,
[data-sheet-design="register"] .tm-tzeile .tag,
[data-sheet-design="register"] .ms-tzeile .tag{font-weight:var(--klar-fw-label)}
[data-sheet-design="register"] .ez-register-profile .pf-av{width:56px;height:56px;flex:0 0 56px;border-radius:var(--r-card)}
[data-sheet-design="register"] .dk-doc-head h2{font-weight:var(--klar-fw-title)}
}

@layer zustaende{
/* Ergebnisgrafiken sind Inhalt; ihre bestehende Schrift bleibt erhalten. */
[data-sheet-design="register"] .spb-reportscore > strong{font-weight:800}
[data-sheet-design="register"] .ff-stat > strong{font-weight:900}
[data-sheet-design="register"] .fd-sportresult b,
[data-sheet-design="register"] .fd-sportresult strong,
[data-sheet-design="register"] .fd-sr-fulltable b{font-weight:revert-layer}
}

@layer zustaende{
/* Offene Personenlisten behalten eine sichtbare Auswahlkante. */
[data-sheet-design="register"] .kd-tr.an,
[data-sheet-design="register"] .kd-wz2.an{border-bottom-color:var(--klar-accent)}
[data-sheet-design="register"] .kd-tr.an .who b,
[data-sheet-design="register"] .kd-wz2.an .tx b{color:var(--klar-accent)}
}
@layer zustaende{
/* Die offene Feldlinie behaelt beim Select den nativen Auswahlpfeil. */
[data-sheet-design="register"] .bt-feld select,
[data-sheet-design="register"] .mb-feld select{appearance:auto;-webkit-appearance:auto}
}

@layer zustaende{
/* Native Zeitfelder duerfen ihre Flexzeile bei schmalen Cards nicht aufweiten. */
[data-sheet-design="register"] .tm-tzeile .zeit{min-width:0}
[data-sheet-design="register"] .tm-tzeile .zeit label{min-width:0;flex:1}
[data-sheet-design="register"] .tm-tzeile input{width:100%;font-size:var(--fs-input);font-weight:var(--klar-fw-title)}
}

@layer zustaende{
/* Register: Navigation bleibt offen. Diese explizite Rolle fasst Daten,
   Auswahl oder Eingaben zusammen, ohne das alte Kachelmaterial zurueckzuholen. */
[data-sheet-design="register"] .ez-register-card{background:var(--klar-card);background-image:none;border:var(--klar-line-width) solid var(--klar-soft);border-radius:var(--r-card);box-shadow:none}
[data-sheet-design="register"] .ez-register-profile.ez-register-card{padding-left:var(--row-x);padding-right:var(--row-x)}
[data-sheet-design="register"] .pf-in.ez-register-card{padding-left:var(--row-x);padding-right:var(--row-x);border-color:var(--klar-line)}
[data-sheet-design="register"] .pf-in.ez-register-card:focus{border-color:var(--klar-accent)}
[data-sheet-design="register"] .pf-wahl.ez-register-card.on{border-color:var(--klar-accent-line)}
[data-sheet-design="register"] .pf-follow-team.ez-register-card{padding-left:var(--row-x);padding-right:var(--row-x)}
[data-sheet-design="register"] .pf-follow-team.ez-register-card.an,
[data-sheet-design="register"] .ms-sportcard.ez-register-card.an{border-color:var(--klar-accent-line)}
[data-sheet-design="register"] .pf-trainerliste.ez-register-card{padding:0 var(--row-x);gap:0}
[data-sheet-design="register"] .pf-trainerliste.ez-register-card .pf-trainerzeile:last-child{border-bottom:0}
[data-sheet-design="register"] .pf-note.ez-register-card{padding-left:var(--row-x);padding-right:var(--row-x)}
[data-sheet-design="register"] .pf-row.ez-register-card{padding-left:var(--row-x);padding-right:var(--row-x)}
[data-sheet-design="register"] .pf-code .felder b.ez-register-card.aktiv{border-color:var(--klar-accent)}
[data-sheet-design="register"] .pf-me-tx{flex:1}
}

@layer zustaende{
/* Opt-in fuer transparente Inhaltsgruppen; zuerst im Profil-Hauptmenue. */
[data-sheet-design="register"] .ez-register-card.ez-register-outline{background:transparent;border-color:var(--klar-line)}
[data-sheet-design="register"] .ez-register-list > .pf-row{width:100%}
[data-sheet-design="register"] .ez-register-list > .pf-row:last-child{border-bottom:0}
[data-sheet-design="register"] .ez-register-list > .pf-empty{background:transparent;box-shadow:none}
[data-sheet-design="register"] .ez-register-list.ez-register-card{padding-left:var(--row-x);padding-right:var(--row-x)}
}

@layer zustaende{
/* Ein gemeinsames Material fuer leere Inhalte in Hauptseiten und Sheets.
   Bestehende Header-/Gruppenvertraege besitzen weiterhin alle Aussenabstaende. */
.bt-leerzustand.bt-leerzustand,
.pf-empty.pf-empty,
.tm-leer.tm-leer,
.tp-leer.tp-leer,
.mr-empty.mr-empty,
.tm-empty.tm-empty,
.kd-warte.kd-warte:not(.hin),
.ez-empty.ez-empty{background:transparent;background-image:none;border:var(--klar-line-width) dashed var(--line-stark);border-radius:var(--r-card);box-shadow:none;box-sizing:border-box;min-width:0;overflow-wrap:anywhere}
.pf-empty.pf-empty,
.tm-leer.tm-leer,
.tp-leer.tp-leer,
.mr-empty.mr-empty,
.tm-empty.tm-empty,
.kd-warte.kd-warte:not(.hin),
.ez-empty.ez-empty{padding:var(--sp-5);font-size:var(--fs-sub);font-weight:400;line-height:1.5;color:var(--muted);text-align:center}
}

@layer zustaende{
/* Gewaehlte Profil-Variante A: dekorativer Taktgeber, kein Statusindikator. */
.ez-menu-marker{display:grid;place-items:center;flex:0 0 var(--sp-4);height:auto;align-self:stretch;color:var(--klar-accent);pointer-events:none}
.ez-menu-marker::before{content:"";display:block;width:var(--klar-line-width);height:100%;border-radius:1px;background:currentColor;opacity:1}
.ez-menu-marker-person{align-self:center}
}

@layer zustaende{
/* Vollbreite Formularaktion: transparente Konturpille wie die Terminantworten. */
.ez-outline-action{display:flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:var(--sp-3) var(--sp-5);border:var(--klar-line-width) solid var(--klar-accent-line);border-radius:var(--r-chip);background:transparent;box-shadow:none;color:var(--hl-text);font:var(--klar-fw-label) var(--fs-body) var(--f);text-align:center;cursor:pointer}
.ez-outline-action.secondary{border-color:var(--klar-line);color:var(--muted)}
.ez-outline-action.danger{border-color:var(--bad);color:var(--bad)}
.pf-confirm-check{cursor:pointer}
.pf-confirm-check input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--klar-accent)}
}
@layer zustaende{
/* Lesbare Personengruppen: vorhandenes transparentes Material, keine Aktion. */
.pf-affiliation h3{margin:0;overflow-wrap:anywhere}
.pf-affiliation-person{display:flex;align-items:center;gap:var(--sp-4);min-width:0}
.pf-affiliation-person h3{min-width:0}
.pf-affiliation-person .pf-ini{width:var(--kreis-liste);height:var(--kreis-liste)}
.pf-affiliation-teams{list-style:none;margin-right:0;margin-bottom:0;padding:0;color:var(--muted);font-size:var(--fs-sub)}
.pf-affiliation-teams li{display:flex;align-items:baseline;gap:var(--sp-3);overflow-wrap:anywhere}
.pf-affiliation-teams li > span:last-child{min-width:0}
.pf-affiliation-sport{flex:0 0 var(--sp-6);text-align:center;font-size:var(--fs-row);line-height:1}
.pf-affiliation-teams li + li{border-top:var(--klar-line-width) solid var(--klar-line)}
.mb-deletion-review .pf-av{cursor:default}
.mb-deletion-review .pf-affiliation-teams li{align-items:center}
.mb-deletion-review .pf-affiliation-teams li > span:nth-child(2){flex:1;min-width:0}
.mb-deletion-status{display:block;font-size:var(--fs-mini);color:var(--muted)}
.mb-deletion-check{display:inline-flex;align-items:center;justify-content:center;flex:0 0 var(--sp-6);width:var(--sp-6);height:var(--sp-6);color:var(--bad)}
.mb-deletion-check.ok{color:var(--ok)}
.mb-deletion-check svg{width:100%;height:100%}
}

@layer zustaende{
/* Profil: derselbe neutrale Hauch wie die Trainingskachel; Avatare ohne Akzentrahmen. */
[data-sheet-design="register"] .ez-register-profile.ez-register-card.ez-register-outline{background:var(--klar-surface-subtle)}
.scr-leiste [data-kopf="profil"].scr-ic.voll{background:var(--avatar-bg);border-color:transparent;color:var(--muted)}
}

@layer komponenten{
/* Kompakter Sport-Umschalter: derselbe Schienenbaustein mit Symbol über dem Label. */
.hm-schiene.hm-schiene-icons{grid-auto-columns:minmax(0,1fr);border-radius:var(--r-card)}
.hm-schiene-icons .hm-fchip{flex-direction:column;padding:var(--sp-3) var(--sp-2);font-size:var(--fs-mini);border-radius:var(--r-field)}
.hm-schiene-icons .hm-fchip-emoji{font-size:var(--fs-row);line-height:1}
}

@layer zustaende{
[data-sheet-design="register"] .hm-schiene-icons .hm-fchip.sel{color:var(--switch-color,var(--klar-accent))}
}

@layer zustaende{
/* Dezente Auswahlmarkierung: die gesamte Menüzeile bleibt die große Tippfläche. */
.ez-choice-check{width:var(--sp-7);height:var(--sp-7);border:var(--klar-line-width) solid var(--klar-line);border-radius:calc(var(--r-field) / 2);background:transparent;color:var(--klar-accent);box-shadow:none}
.ez-choice-check.an{border:var(--klar-line-width) solid var(--klar-accent-line);background:transparent}
.ez-choice-check svg{width:var(--sp-5);height:var(--sp-5);stroke-width:2}
}

@layer zustaende{
/* Fotokante B: eine gemeinsame opake Fläche erzeugt die runden Aussparungen. */
[data-design="klar"] .hm-hero.ez-match-hero{--klar-kickoff-size:var(--klar-match-ring-size);background:var(--klar-bg);background-image:none}
.ez-match-hero .hm-band{height:var(--klar-match-photo-height)}
.ez-match-hero-duel{display:grid;grid-template-columns:minmax(0,1fr) var(--klar-kickoff-size) minmax(0,1fr);column-gap:var(--sp-3);align-items:start;container-type:inline-size;position:relative}
.ez-match-hero-club{display:flex;flex-direction:column;align-items:center;gap:calc(var(--sp-2) + var(--sp-1));min-width:0;padding-top:calc((var(--klar-kickoff-size) - min(var(--klar-match-crest-size), (100cqw - var(--klar-kickoff-size) - 2 * var(--sp-3)) / 2)) / 2)}
.ez-match-hero-crest{display:grid;place-items:center;width:100%;max-width:var(--klar-match-crest-size);aspect-ratio:1;padding:calc(var(--sp-2) + var(--sp-1));border-radius:50%;background:var(--klar-bg);box-shadow:0 0 0 calc(var(--sp-2) + var(--sp-1)) var(--klar-bg);position:relative;flex-shrink:0;color:var(--sek)}
.ez-match-hero-crest img{display:block;width:100%;height:100%;object-fit:contain}
.ez-match-hero-name{width:max-content;max-width:calc(100% + var(--sp-5));text-align:center;font-size:var(--fs-sub);font-weight:var(--klar-fw-row);line-height:1.35;overflow-wrap:anywhere;position:relative}
.ez-match-hero .ez-kickoff{background:var(--klar-bg);border-color:var(--klar-accent-line);box-shadow:0 0 0 calc(var(--sp-3) - var(--sp-1)) var(--klar-bg);gap:var(--sp-1);text-align:center}
.ez-match-hero .ez-kickoff::before{border-width:var(--klar-line-width)}
.ez-match-hero .ez-kickoff > span{text-transform:uppercase;font-size:var(--fs-mini);letter-spacing:.3px}
.ez-match-hero .ez-kickoff strong{font-size:var(--fs-title)}
.ez-match-hero .ez-kickoff small{text-transform:uppercase;letter-spacing:.8px;font-size:var(--fs-mini)}
.ez-match-hero-info{display:grid;grid-template-columns:var(--klar-match-meet-width) minmax(0,1fr);gap:var(--sp-4);border-block:var(--klar-line-width) solid var(--klar-line)}
.ez-match-hero-info > div{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.ez-match-hero-place{border-left:var(--klar-line-width) solid var(--klar-line);padding-left:var(--sp-4)}
.ez-match-hero-label{white-space:nowrap;display:flex;align-items:center;gap:calc(var(--sp-2) + var(--sp-1));font-size:var(--fs-mini);letter-spacing:.7px;text-transform:uppercase;color:var(--sek)}
.ez-match-hero-label > span:first-child{flex:0 0 var(--fs-mini);width:var(--fs-mini);text-align:center}
.ez-match-hero-value{padding-left:calc(var(--fs-mini) + var(--sp-2) + var(--sp-1));font-size:var(--fs-body);line-height:1.45;white-space:nowrap}
.ez-match-hero-meet .ez-match-hero-label{gap:calc(var(--sp-3) + var(--sp-1))}
.ez-match-hero-meet .ez-match-hero-value{padding-left:calc(var(--fs-mini) + var(--sp-3) + var(--sp-1))}
.ez-match-hero-place .ez-match-hero-value{overflow:hidden;text-overflow:ellipsis}
.ez-match-hero-meet .ez-match-hero-value.is-time{font-variant-numeric:tabular-nums}
.ez-match-hero-value small{font-size:var(--fs-sub);color:var(--sek)}
.ez-match-hero-duty{display:flex;justify-content:flex-end}
@media(max-width:380px){[data-design="klar"] .hm-hero.ez-match-hero{--klar-kickoff-size:calc(var(--sp-8) * 3 + var(--sp-2))}.ez-match-hero-name{font-size:var(--fs-eb)}}
}

@layer zustaende{
/* Termine: vorhandene Konturkarten verwenden dieselbe dezente Fläche wie Profil. */
:is(#sh-main,.sh-ueber-inhalt)[data-screen="termine"][data-design="klar"] :is(.hm-hero,.hm-row:not(.ez-list-row):not(.tr),.hm-live-timeline-card,.ez-empty,.bt-info),
body:has(:is(#sh-main,.sh-ueber-inhalt)[data-screen="termine"]) [data-design="klar"] .ez-event-detail :is(.dt-kachel,.dt-ortkachel,.ez-empty,.bt-info){background:var(--klar-surface-subtle);background-image:none}
:is(#sh-main,.sh-ueber-inhalt)[data-screen="termine"][data-design="klar"] .hm-hero.ez-match-hero{background:var(--klar-surface-subtle-solid)}
:is(#sh-main,.sh-ueber-inhalt)[data-screen="termine"] .ez-match-hero :is(.ez-match-hero-crest,.ez-kickoff){background:var(--klar-surface-subtle-solid);box-shadow:0 0 0 calc(var(--sp-2) + var(--sp-1)) var(--klar-surface-subtle-solid)}
}

@layer zustaende{
/* APPWEIT KLAR · dieselben Rollen wie Termine und Profil. Keine lokalen Paletten. */
body[data-layout="klar"]{background:var(--klar-bg);color:var(--klar-ink)}
body[data-layout="klar"] :is(.scr-titelblock h1,.tm-teamhero h1,.ms-titel){font-size:var(--fs-title);font-weight:var(--klar-fw-title);letter-spacing:-.6px;text-transform:uppercase;color:var(--klar-ink);overflow-wrap:anywhere}
body[data-layout="klar"] .scr-titelblock h1.gelb{color:var(--klar-ink)}
body[data-layout="klar"] :is(.scr-unter,.tm-teamhero-meta,.ms-unter){font-size:var(--fs-sub);font-weight:var(--klar-fw-title);color:var(--klar-sub)}
/* Inhaltskarten: Foto-, Fach- und Statusinhalte bleiben innerhalb der gleichen Hülle. */
body[data-layout="klar"] :is(.ez-kachel,.dk-kachel,.dk-thema,.dk-kontaktkarte,.fd-post,.fd-sr-events,.fd-sr-fulltable,.ms-sportcard,.ms-switchzeile,.ms-saisonort,.ms-status,.ms-kader-person,.pr-platzkarte,.tb-stat,.tb-z,.tm-row,.tm-cardmedia-card,.tm-saisonort,.vm-kachel,.tm-teamhero-ident,.tm-termin,.tm-pz,.tm-merk,.mb-merk,.mb-wegcard,.mb-karte,.ab-speicher,.ab-merk,.tp-karte,.hb-row,.hb-clock,.spb-reportmatch,.va-card,.ttr-podium,.ttr-row){background:var(--klar-surface-subtle);background-image:none;border:var(--klar-line-width) solid var(--klar-line);box-shadow:none}
body[data-layout="klar"] :is(.ez-register-card.ez-register-outline,.pf-note,.bt-info,.bt-leerzustand,.ez-empty,.pf-empty,.tm-empty,.mr-empty,.kd-warte:not(.hin)){background:var(--klar-surface-subtle);background-image:none;box-shadow:none}
/* Listen und Navigation stehen offen. Linien nur zwischen Einträgen. */
body[data-layout="klar"] :is(.mr-row,.tm-men,.tm-manage,.mb-row,.dk-row,.ab-z,.st-z,.tm-kachel){background:transparent;background-image:none;box-shadow:none;border:0;border-radius:0;color:var(--klar-ink)}
body[data-layout="klar"] :is(.mr-row,.tm-men,.tm-manage,.mb-row,.dk-row,.ab-z,.st-z,.tm-kachel):has(+ :is(.mr-row,.tm-men,.tm-manage,.mb-row,.dk-row,.ab-z,.st-z,.tm-kachel)){border-bottom:var(--klar-line-width) solid var(--klar-line)}
body[data-layout="klar"] :is(.mr-row,.tm-men,.tm-kachel)::before{content:none}
body[data-layout="klar"] :is(.mr-row,.tm-men,.mb-row,.dk-row,.tm-kachel):active{background:var(--klar-active)}
body[data-layout="klar"] :is(.pf-row-t.kf,.mr-row .pf-row-t.kf){gap:var(--sp-3)}
body[data-layout="klar"] .pf-row-t.kf .emo{flex:0 0 var(--fs-row);width:var(--fs-row);text-align:center}

body[data-layout="klar"] :is(.mr-row,.tm-men,.tm-manage){padding-left:0;padding-right:0;min-width:0}
body[data-layout="klar"] :is(.tm-kacheln,.tm-kachel){box-shadow:none;background-image:none}
/* Typografische Hierarchie statt schwerer 700/800er Menüs. Sportergebnisse bleiben Fachgrafiken. */
body[data-layout="klar"] :is(.mr-tx b,.tm-men b,.tm-manage .tx b,.tm-kachel b,.tm-row b,.tm-trrow b,.mb-row b,.mb-z b,.dk-row b,.dk-z2 b,.ab-z b,.st-z b,.vm-z b,.tb-z b,.hb-clock b,.hb-row .pf-row-t,.ttr-name,.vc-title,.fd-name,.fd-autor,.ms-sek,.ms-famtitle){font-weight:var(--klar-fw-row)}
body[data-layout="klar"] :is(.mr-tx i,.tm-men i,.tm-manage .tx i,.tm-kachel i,.mb-row i,.dk-row i,.ab-z i,.st-z i,.vc-note){font-size:var(--fs-sub);font-weight:var(--klar-fw-title);color:var(--klar-sub)}
body[data-layout="klar"] :is(.tm-date,.tm-tzeile .tag,.ms-tzeile .tag){background:transparent;background-image:none;box-shadow:none}
body[data-layout="klar"] .tm-date :is(b,i,u){font-weight:var(--klar-fw-date)}
/* Konturaktionen wie Dabei/Absagen; Auswahl- und Warnfarben bleiben semantisch. */
body[data-layout="klar"] :is(.bt-haupt,.bt-zweit,.pf-kachelknopf,.tm-haupt,.vc-button){background:transparent;background-image:none;box-shadow:none;border:var(--klar-line-width) solid var(--klar-accent-line);color:var(--klar-accent);font-weight:var(--klar-fw-label)}
body[data-layout="klar"] :is(.bt-zweit.rot,.pf-kachelknopf.rot,.vc-button.danger){color:var(--bad);border-color:var(--bad)}
body[data-layout="klar"] :is(.bt-feld input,.bt-feld select,.bt-feld textarea,.mb-feld input,.mb-feld select,.vc-field input,.vc-field select,.ms-in,.pf-in){background-color:var(--klar-surface-subtle);background-image:none;box-shadow:none;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field);font-size:var(--fs-input);font-weight:var(--klar-fw-title);color:var(--klar-ink)}
body[data-layout="klar"] :is(.bt-feld input,.bt-feld select,.bt-feld textarea,.mb-feld input,.mb-feld select,.vc-field input,.vc-field select,.ms-in,.pf-in):focus{outline:none;box-shadow:none;border-color:var(--klar-accent)}
/* Profil- und Termine-Geometrie bleibt Referenz, kein zusätzlicher Einzug im Karteninneren. */
body[data-layout="klar"] .tm-teamhero-ident{background:var(--klar-surface-subtle-solid)}
body[data-layout="klar"] .tm-teamhero-meta{display:block}
body[data-layout="klar"] .ez-statuspill{background:var(--klar-surface-subtle);box-shadow:none;background-image:none;border:var(--klar-line-width) solid var(--klar-line);font-weight:var(--klar-fw-label)}
body[data-layout="klar"] .ez-statuspill::after{content:none}
}
@layer zustaende{
body[data-layout="klar"] :is(.bt-wahlz,.pf-tile,.mb-info,.kd-karte,.kd-merk,.tm-wert,.ms-zeitpaar label,.ms-dienstfahrer,.ms-famfall,.ms-einladung,.ms-link){background:var(--klar-surface-subtle);background-image:none;box-shadow:none;border:var(--klar-line-width) solid var(--klar-line)}
body[data-layout="klar"] :is(.ms-sportcard.an,.ms-status.aktiv,.bt-wahlz.an,.pf-tile.sel){border-color:var(--klar-accent-line)}
body[data-layout="klar"] .ms-titel::after{content:".";color:var(--klar-accent)}
}
@layer zustaende{
/* TEAM benutzt dieselben offenen Menüzeilen wie Profil, statt eines zweiten Kachelrasters. */
body[data-layout="klar"] .tm-kacheln{display:block}
body[data-layout="klar"] .tm-kacheln .tm-kachel{display:flex;align-items:center;gap:var(--sp-4);width:100%;border-radius:0}
body[data-layout="klar"] .tm-kacheln .tm-kachel .emo{font-size:var(--fs-row);line-height:1.4}
body[data-layout="klar"] :is(.mb-row,.dk-row,.ab-z,.st-z){padding-inline:0}
body[data-layout="klar"] :is(.mb-name,.mb-row .mb-name,.ttr-points,.bt-wahlz .tx b,.mb-wahlz .tx b,.tm-wahlz .tx b,.vc-timeline-card h3,.vc-court-title,.vc-appointment h3,.vc-duel b){font-weight:var(--klar-fw-row)}
body[data-layout="klar"] :is(.vc-hero h2,.vc-panel h2){font-weight:var(--klar-fw-title)}
body[data-layout="klar"] :is(.bt-feld i,.mb-feld label,.ms-lab,.vc-field label){font-weight:var(--klar-fw-label);color:var(--klar-sub)}
body[data-layout="klar"] .pr-tagchip{background:var(--klar-surface-subtle);border:var(--klar-line-width) solid var(--klar-line);color:var(--klar-sub)}
body[data-layout="klar"] .pr-tagchip :is(b,i){font-weight:var(--klar-fw-label)}
body[data-layout="klar"] .pr-tagchip.an{background:var(--klar-active);border-color:var(--klar-accent-line);color:var(--klar-accent)}
body[data-layout="klar"] .pr-tagchip.an i{color:var(--klar-accent)}
}
@layer zustaende{
/* Konturgruppen einschließlich Formularkarten teilen die sehr leichte Profilfläche. */
body[data-layout="klar"] [data-sheet-design="register"] .ez-register-card{background-color:var(--klar-surface-subtle);background-image:none;box-shadow:none}
body[data-layout="klar"] :is(.kd-pz .who b,.kd-tr .who b,.tm-trrow b,.tm-pz b,.tm-kopfz .art,.tm-kopfz .cd){font-weight:var(--klar-fw-row)}
body[data-layout="klar"] .tm-quote{background:var(--klar-surface-subtle);border:var(--klar-line-width) solid var(--klar-line)}
/* Ergebnisbeiträge: vorhandene Daten/Wappen bleiben, die alte Plakatmaterialität entfällt. */
body[data-layout="klar"] .fd-sportresult{background:var(--klar-surface-subtle);border-color:var(--klar-line);box-shadow:none;color:var(--klar-ink)}
body[data-layout="klar"] :is(.fd-sr-hero,.fd-sr-scorerhead,.fd-sr-scorer){background:transparent;background-image:none;box-shadow:none}
body[data-layout="klar"] :is(.fd-sr-hero::before,.fd-sr-hero::after){content:none}
body[data-layout="klar"] :is(.fd-sr-team b,.fd-sr-score strong,.fd-sr-end strong,.fd-sr-scorerhead b,.fd-sr-scorerhead span,.fd-sr-scorer>div>span){text-shadow:none;box-shadow:none;transform:none;color:var(--klar-ink);font-weight:var(--klar-fw-row)}
body[data-layout="klar"] :is(.fd-sr-end>span,.fd-sr-scorerhead b){background:var(--klar-surface-subtle);background-image:none;clip-path:none;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-chip);color:var(--klar-sub);box-shadow:none}
body[data-layout="klar"] :is(.fd-sr-wapleer,.fd-sr-team img){filter:none;box-shadow:none}
}

@layer zustaende{
body[data-layout="klar"] :is(.tb-z.eigen,.fd-post.pin){border-color:var(--klar-accent-line)}
body[data-layout="klar"] .tm-leer{background:var(--klar-surface-subtle);background-image:none;box-shadow:none}
}

@layer zustaende{
/* Menü-Titelzeilen teilen eine Textachse – auch Dokumente, Ablage, Team und Kader.
   Ohne Titel-Icon kein Einzug; nebenstehende Avatare gehören nicht in diese Berechnung. */
body[data-layout="klar"] :is(.kf,.tm-aufg-kopf):has(> :is(.emo,.lg)){display:flex;align-items:center;gap:var(--sp-3);min-width:0}
body[data-layout="klar"] :is(.kf,.tm-aufg-kopf) > .emo{flex:0 0 var(--fs-row);width:var(--fs-row);text-align:center}
body[data-layout="klar"] :is(.kf,.tm-aufg-kopf) + :is(i,.pf-row-s){padding-inline-start:0}
body[data-layout="klar"] :is(.kf,.tm-aufg-kopf):has(> .emo) + :is(i,.pf-row-s){padding-inline-start:calc(var(--fs-row) + var(--sp-3))}
body[data-layout="klar"] .kf:has(> .lg) + :is(i,.pf-row-s){padding-inline-start:calc(var(--sp-6) + var(--sp-3))}
body[data-layout="klar"] .kf:has(> .lg.dfb) + :is(i,.pf-row-s){padding-inline-start:calc(var(--fs-val) + var(--sp-3))}
}

@layer zustaende{
/* Vereinsbögen in großen und kleinen Spieltagskarten; ruhender Innenbereich. */
.ez-kickoff[data-match-live="1"] > span{color:var(--klar-accent)}
.ez-kickoff.ez-dual-orbit::before{content:none}
.ez-kickoff.ez-dual-orbit{border-color:transparent}
/* Gleiche reale Bahndistanz/Strichstärke wie zuvor; nur beide Radien wachsen. */
.ez-kickoff-orbits{--orbit-old-size:calc(var(--klar-kickoff-size) - 2 * var(--klar-line-width) - 2 * var(--sp-2));position:absolute;inset:calc(var(--klar-line-width) / -2);width:calc(100% + var(--klar-line-width));height:calc(100% + var(--klar-line-width));max-width:none;pointer-events:none;overflow:visible}
.ez-kickoff-orbits circle{fill:none;stroke-width:calc(var(--orbit-old-size) * .0175);stroke-dasharray:170 190;stroke-linecap:round;transform-origin:50% 50%;transform-box:view-box}
.ez-orbit-home{stroke:var(--orbit-home,var(--klar-sub))}
.ez-orbit-away{r:calc(50% - var(--orbit-old-size) * .04);stroke:var(--orbit-away,var(--klar-sub))}
}

@layer zustaende{
/* Gemeinsame Menüfläche für Mannschaft und Mehr, Rahmen wie Profil-Trainingszeiten. */
body[data-layout="klar"] .ez-menu-group{position:relative;overflow:hidden;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);background:var(--klar-surface-subtle);box-shadow:none}

/* Freigegebene Trainingskachel A: gemeinsame Kontur und Sportecken, transparente Fläche. */
body[data-layout="klar"] .hm-row.tr.ez-menu-group{background:transparent}
body[data-layout="klar"] .hm-row.tr.ez-menu-group .hm-chip{min-height:calc(var(--sp-8) + var(--sp-3))}

body[data-layout="klar"] .ez-menu-group > :is(.tm-kachel,.mr-row,.dk-row){position:relative;border:0;min-height:calc(var(--sp-8) * 2 + var(--sp-2) + var(--sp-1) * 2)}
body[data-layout="klar"] .ez-menu-group > :is(.tm-kachel,.mr-row,.dk-row) + :is(.tm-kachel,.mr-row,.dk-row)::after{content:"";position:absolute;top:0;left:calc(var(--menu-icon-offset,0px) + var(--fs-row) + var(--sp-4));right:0;height:var(--klar-line-width);background:var(--klar-line);pointer-events:none}
body[data-layout="klar"] .ez-menu-group .pf-row-tx{flex:1;min-width:0}
body[data-layout="klar"] .ez-menu-group :is(.pf-row-t,.pf-row-s){line-height:1.45}
}

@layer zustaende{
/* Titel und Untertitel 4px weiter vom Emoji, äußere Achsen bleiben bestehen. */
body[data-layout="klar"] .ez-menu-group .pf-row-t.kf,
body[data-layout="klar"] .pf-wrap .ez-menu-group .pf-row-t.kf{gap:var(--sp-4)}
body[data-layout="klar"] .ez-menu-group .kf + .pf-row-s{padding-inline-start:calc(var(--fs-row) + var(--sp-4))}
}

@layer zustaende{
/* Kurze Akzente auf der Rahmenlinie, in derselben Farbe wie gelbe Eyebrows. */
body[data-layout="klar"] .ez-menu-group{overflow:visible}
body[data-layout="klar"] .ez-menu-group::before,
body[data-layout="klar"] .ez-menu-group::after{content:"";position:absolute;width:calc(var(--r-card) + var(--sp-3));height:calc(var(--r-card) + var(--sp-3));border:0 solid var(--menu-corner-color,var(--klar-accent));pointer-events:none;z-index:1}
body[data-layout="klar"] .ez-menu-group::before{top:calc(-1 * var(--klar-line-width));left:calc(-1 * var(--klar-line-width));border-top-width:var(--klar-line-width);border-left-width:var(--klar-line-width);border-top-left-radius:var(--r-card)}
body[data-layout="klar"] .ez-menu-group::after{bottom:calc(-1 * var(--klar-line-width));right:calc(-1 * var(--klar-line-width));border-bottom-width:var(--klar-line-width);border-right-width:var(--klar-line-width);border-bottom-right-radius:var(--r-card)}
}

@layer zustaende{
/* Sportfarben folgen der aktiven Mannschaft bzw. der Mehr-Abteilung. */
body[data-layout="klar"] .ez-menu-group.sp-fuss{--menu-corner-color:var(--sp-fuss-t)}
body[data-layout="klar"] .ez-menu-group.sp-tennis{--menu-corner-color:var(--sp-tennis-t)}
body[data-layout="klar"] .ez-menu-group.sp-ttennis{--menu-corner-color:var(--sp-ttennis-t)}
body[data-layout="klar"] .ez-menu-group.sp-volley{--menu-corner-color:var(--sp-volley-t)}
body[data-layout="klar"] .ez-menu-group.sp-breit{--menu-corner-color:var(--sp-breit-t)}
}

@layer zustaende{
/* Personenbezogene Unterlagen behalten ihren Avatar vor der Text-/Emoji-Achse. */
body[data-layout="klar"] .ez-menu-group > .dk-row:has(> .dk-av){--menu-icon-offset:calc(var(--kreis-liste) + var(--sp-4))}
body[data-layout="klar"] .dk-menu-group .emo{font-size:var(--fs-row);line-height:1.4}
}

@layer zustaende{
/* Dokumentdetails: gemeinsame Hülle wie die Menüs, Lesetext bleibt fließend. */
body[data-layout="klar"] .dk-detail-group .dk-doc-head{display:flex;flex-direction:row-reverse;align-items:flex-start;justify-content:flex-end;gap:var(--sp-4)}
body[data-layout="klar"] .dk-detail-group .dk-doc-head h2{font-size:var(--fs-row);font-weight:var(--klar-fw-row);line-height:1.45}
body[data-layout="klar"] .dk-detail-group .dk-doc-head > .dk-doc-symbol{width:var(--fs-row);flex:0 0 var(--fs-row);font-size:var(--fs-row);line-height:1.45}
body[data-layout="klar"] .dk-detail-group .dk-doc-text{font-size:var(--fs-body);color:var(--klar-sub)}
body[data-layout="klar"] .dk-detail-group .dk-doc-text :is(.dk-thema,.dk-kontaktkarte){background:transparent;border:0;box-shadow:none}
body[data-layout="klar"] .dk-detail-group .dk-doc-subhead{font-weight:var(--klar-fw-row)}
body[data-layout="klar"] .dk-detail-group > .dk-z2{background:transparent;border:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
body[data-layout="klar"] .dk-detail-group > .dk-z2 + .dk-z2{border-top:var(--klar-line-width) solid var(--klar-line)}
body[data-layout="klar"] .dk-detail-group > .dk-z2 .lab{font-size:var(--fs-row);font-weight:var(--klar-fw-row);color:var(--klar-ink)}
body[data-layout="klar"] .dk-detail-group > .dk-z2 .wert{font-size:var(--fs-sub);font-weight:var(--klar-fw-title);color:var(--klar-sub);text-align:left;overflow-wrap:anywhere;max-width:100%}
}

@layer zustaende{
/* Gesamtverein in einer Zeile; vorhandene Schriftrollen für schmale Displays. */
body[data-layout="klar"] .pf-title.dk-membership-title{font-size:var(--fs-lead);white-space:nowrap;overflow-wrap:normal}
@media(max-width:360px){body[data-layout="klar"] .pf-title.dk-membership-title{font-size:var(--fs-val)}}
/* Die Gruppen bleiben auch beim Drücken transparent. Fokus bleibt sichtbar. */
body[data-layout="klar"] .ez-menu-group > :is(.tm-kachel,.mr-row,.dk-row):active{background:transparent;background-image:none;box-shadow:none}
/* Abschlussaktionen als volle Konturpille wie die Termin-Aktionen. */
body[data-layout="klar"] .dk-detail-body .dk-wegp{background:transparent;background-image:none;box-shadow:none;border:var(--klar-line-width) solid var(--bad);border-radius:var(--r-chip);font-weight:var(--klar-fw-label);width:100%}
body[data-layout="klar"] .dk-detail-body .dk-wegp.still{border-color:var(--klar-line);color:var(--klar-sub)}
}

@layer zustaende{
/* Gemeinsame Menüzeilen für Profil und die Einrichtung weiterer Mannschaften. */
body[data-layout="klar"] [data-profile-root] .pf-menu-group{gap:0}
body[data-layout="klar"] [data-profile-root] .pf-child-team .pf-menu-group{--menu-corner-color:var(--pf-team-color)}
body[data-layout="klar"] .pf-wrap .ez-menu-group.pf-menu-group .pf-menu-row,
body[data-layout="klar"] [data-profile-root] .pf-menu-group :is(.pf-follow-linked,.pf-nf,.pf-note){position:relative;background:transparent;background-image:none;box-shadow:none;border:0;border-radius:0}
body[data-layout="klar"] .pf-wrap .ez-menu-group.pf-menu-group > .pf-menu-row{gap:var(--sp-4);min-height:calc(var(--sp-8) * 2 + var(--sp-2) + var(--sp-1) * 2)}
/* Einzeilige Auswahl benötigt keine reservierte Untertitelhöhe. */
body[data-layout="klar"] .pf-wrap .ez-menu-group.pf-menu-group > .pf-follow-team:not(:has(.pf-row-s)){min-height:calc(var(--sp-8) + var(--sp-7))}
body[data-layout="klar"] .pf-wrap .ez-menu-group.pf-menu-group .pf-row-t.kf .emo{transform:none}
body[data-layout="klar"] .pf-wrap .ez-menu-group.pf-menu-group > .pf-menu-row::after,
body[data-layout="klar"] [data-profile-root] .pf-menu-group .pf-follow-linked-slot::after,
body[data-layout="klar"] [data-profile-root] .pf-page .pf-menu-group .pf-follow-linked::after{content:none}
body[data-layout="klar"] .pf-wrap .ez-menu-group.pf-menu-group > .pf-menu-row ~ .pf-menu-row::after{content:"";position:absolute;top:0;bottom:auto;left:calc(var(--fs-row) + var(--sp-4));right:0;height:var(--klar-line-width);background:var(--klar-line);pointer-events:none}
body[data-layout="klar"] .pf-wrap .ez-menu-group.pf-menu-group > .pf-menu-row:has(> :is(.pf-ini,.pf-trainerav))::after{left:calc(var(--kreis-liste) + var(--sp-4))}
body[data-layout="klar"] [data-profile-root] .pf-menu-group > :is(.pf-follow-linked-slot,.pf-nf-slot,.pf-note) + :is(.pf-follow-linked-slot,.pf-nf-slot,.pf-note){border-top:var(--klar-line-width) solid var(--klar-line)}
body[data-layout="klar"] [data-profile-root] .pf-follow-selectedbox:has(> .pf-menu-group){border:0;background:transparent;border-radius:0}
body[data-layout="klar"] [data-profile-root] .pf-menu-group .pf-trainertx{min-width:0;flex:1}
body[data-layout="klar"] [data-profile-root] .pf-menu-group .pf-trainertx :is(b,i){line-height:1.45}
}

@layer zustaende{
body[data-layout="klar"] .pf-wrap .ez-menu-group.pf-menu-group .ez-menu-marker{display:none}
}

@layer komponenten{
.mv-tabs{width:100%;box-sizing:border-box}
.mv-tabs .hm-fchip{text-transform:none}
.mv-panel{outline-offset:var(--sp-2)}
.mv-panel .mv-group{background:var(--klar-surface-subtle)}
.mv-row,.mv-player,.mv-events>li{display:flex;align-items:center;gap:var(--sp-4)}
.mv-copy{min-width:0;flex:1;overflow-wrap:anywhere}
.mv-title{font-size:var(--fs-row);font-weight:var(--klar-fw-row);color:var(--klar-ink);line-height:1.45}
.mv-sub{display:block;font-size:var(--fs-sub);font-weight:400;line-height:1.5;color:var(--klar-sub)}
.mv-icon{flex:0 0 var(--fs-row);align-self:flex-start;line-height:1.45}
.mv-section-label,.mv-source,.mv-note{font-size:var(--fs-sub);font-weight:400;line-height:1.5;color:var(--klar-sub)}
/* Rosters share the ticker's type hierarchy and the existing pill switcher. */
.mv-team-tabs{display:flex;width:auto;box-sizing:border-box}
.mv-team-tabs .hm-fchip{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;white-space:normal;gap:var(--sp-3)}
.mv-team-tabs .mv-badge{flex:none;margin:0}
.mv-team-tabs .hm-fchip>span{overflow-wrap:anywhere}
.mv-shirt{flex:0 0 var(--sp-8);height:var(--sp-8);display:grid;place-items:center;font-size:var(--fs-row);font-weight:var(--klar-fw-row);font-variant-numeric:tabular-nums;color:var(--sp-fuss-t);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field)}
.mv-bench-toggle{width:100%;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer;color:inherit}
.mv-bench-toggle:focus-visible{outline:var(--klar-line-width) solid var(--klar-accent);outline-offset:var(--sp-1)}
.mv-bench .mv-chevron{color:var(--klar-sub);font-size:var(--fs-lead)}
.mv-bench-toggle[aria-expanded="true"] .mv-chevron{transform:rotate(90deg)}
.mv-number,.mv-minute{flex:0 0 var(--sp-8);font-size:var(--fs-sub);font-variant-numeric:tabular-nums;color:var(--klar-sub)}
.mv-events{list-style:none;padding:0;margin:0}
.mv-events>li{align-items:flex-start}
.mv-events .mv-minute{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.mv-event-icon{font-size:var(--fs-row);line-height:1.3;white-space:nowrap}
.mv-event-person{font-size:var(--fs-row);line-height:1.5;color:var(--klar-ink);overflow-wrap:anywhere}
.mv-event-team{margin-top:var(--sp-1)}
.mv-events .mv-minute{font-weight:var(--klar-fw-row);color:var(--klar-accent);padding-top:var(--sp-1)}
.mv-events .mv-event-score{font-size:var(--fs-lead);font-weight:var(--klar-fw-row)}
[data-design="klar"] .mv-live-poster .ez-kickoff.ez-dual-orbit{border-color:transparent}
[data-design="klar"] .mv-live-poster .ez-kickoff[data-clock-mode="countdown"] strong{font-size:var(--fs-lead)}
.mv-live-poster .ez-kickoff strong{white-space:nowrap}
[data-design="klar"] .ez-match-poster .ez-event-club > span:last-child{width:calc(100% + var(--sp-6));max-width:none;min-width:0;white-space:normal;overflow-wrap:anywhere;text-wrap:balance;align-self:center}


.mv-event-score{font-size:var(--fs-sub);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--klar-ink)}
.mv-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-4);padding-block:var(--sp-5);font-size:var(--fs-sub);color:var(--klar-sub);text-align:center}
.mv-score strong{font-size:var(--fs-zahl);font-weight:var(--klar-fw-row);color:var(--klar-ink);white-space:nowrap}
.mv-table table{border-collapse:collapse;width:100%;font-size:var(--fs-sub);color:var(--klar-sub)}
.mv-table :is(td,th){padding:var(--sp-4) var(--sp-2);text-align:right;font-weight:400;vertical-align:middle}
.mv-table th:nth-child(2){text-align:left;overflow-wrap:anywhere}
.mv-table tbody tr + tr{border-top:var(--klar-line-width) solid var(--klar-line)}
.mv-table td{white-space:nowrap}
.mv-table thead{font-size:var(--fs-eb)}
.mv-table .mv-own{color:var(--sp-fuss-t)}
.mv-table abbr{border:0;text-decoration:none}
.mv-badge{display:inline-block;vertical-align:middle;object-fit:contain;width:var(--sp-6);height:var(--sp-6);margin-inline-end:var(--sp-3)}
.mv-source span,.mv-source a{display:block;margin-top:var(--sp-2)}
.mv-source a{color:var(--klar-accent)}
.mv-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}

@layer zustaende{
/* One match-header role for timeline and match details. */
[data-design="klar"] .hm-row.spiel .hm-flat-head :is(.hm-sportbadge b,.hm-match-league),
[data-design="klar"] .ez-match-meta > :is(.ez-event-matchdate,span){font-size:var(--fs-eb);font-weight:var(--klar-fw-label);line-height:1;letter-spacing:1px;text-transform:uppercase;color:var(--sek)}
[data-design="klar"] .ez-match-meta{flex-wrap:wrap}
[data-design="klar"] .ez-match-meta > span{margin-left:auto}
/* Equal image height within each match component; natural crest proportions. */
[data-design="klar"] .ez-duel-crest{width:100%;height:var(--klar-mini-crest-size)}
[data-design="klar"] .ez-duel-crest img{display:block;height:var(--klar-mini-crest-size);width:auto;max-width:100%;object-fit:contain}
/* Providerbilder fuellen ihre Bildflaeche aus; lokale SVGs enthalten bereits
   den 88%-Freiraum des Wappenvertrags. Beide erhalten dieselbe sichtbare Flaeche. */
[data-design="klar"] .ez-duel-crest img.ez-duel-provider{width:calc(var(--klar-mini-crest-size) * var(--klar-crest-safe-area));height:calc(var(--klar-mini-crest-size) * var(--klar-crest-safe-area));max-width:88%;flex:none}
[data-design="klar"] .ez-match-poster .ez-event-club{gap:var(--sp-2)}
[data-design="klar"] .ez-match-poster .ez-event-crest{width:100%;height:calc(var(--sp-8) * 2 + var(--sp-3));margin-top:calc((var(--klar-kickoff-size) - var(--sp-8) * 2 - var(--sp-3)) / 2)}
[data-design="klar"] .ez-match-poster .ez-event-crest img{display:block;height:calc(var(--sp-8) * 2 + var(--sp-3));width:auto;flex:none;max-width:calc(100% + var(--sp-6));object-fit:contain}
[data-design="klar"] .ez-match-hero-crest img{display:block;height:calc(var(--sp-8) * 2);width:auto;max-width:100%;object-fit:contain}
}

@layer zustaende{
/* Training · freigegebene Variante D: gemeinsame Menüflächen und Sportecken. */
[data-design="klar"] .ez-training-detail .ez-training-tabs{background:transparent}
[data-design="klar"] .ez-training-panel{min-width:0}
[data-design="klar"] .ez-training-time{display:grid;grid-template-columns:calc(var(--sp-8) + var(--sp-6)) minmax(0,1fr);align-items:center;gap:var(--sp-4)}
[data-design="klar"] .ez-training-date{font-weight:var(--klar-fw-date);display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:var(--klar-line-width) solid var(--klar-accent);font-size:var(--fs-sub);line-height:1.2;text-transform:uppercase;color:var(--sek)}
[data-design="klar"] .ez-training-date strong{font-size:var(--fs-zahl);font-weight:var(--klar-fw-date);color:var(--klar-accent)}
[data-design="klar"] .ez-training-clock{min-width:0}
[data-design="klar"] .ez-training-clock strong{font-size:var(--fs-event-start);font-weight:var(--klar-fw-row);line-height:1.3;color:var(--ink)}
[data-design="klar"] .ez-training-clock p{font-size:var(--fs-sub);line-height:1.4;color:var(--sek)}
[data-design="klar"] .ez-training-location{display:flex;align-items:flex-start;gap:var(--sp-3);border:0;background:none}
[data-design="klar"] .ez-training-location .dt-tx{min-width:0;flex:1}
[data-design="klar"] .ez-training-location .dt-tx b{font-size:var(--fs-row);font-weight:var(--klar-fw-row);line-height:1.4}
[data-design="klar"] .ez-training-location .dt-tx i{display:block;font-size:var(--fs-sub);line-height:1.4;font-style:normal;color:var(--sek)}
[data-design="klar"] .ez-training-location-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
[data-design="klar"] .ez-training-location-actions button{flex:1;white-space:nowrap;font-size:var(--fs-sub)}
[data-design="klar"] .ez-training-note{display:flex;gap:var(--sp-3);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);background:var(--klar-surface-subtle);font-size:var(--fs-sub);line-height:1.5;color:var(--sek)}
[data-design="klar"] .ez-training-note p{white-space:pre-line;overflow-wrap:anywhere}
[data-design="klar"] .ez-training-empty{border:var(--klar-line-width) dashed var(--klar-line);border-radius:var(--r-card);background:transparent;color:var(--sek);font-size:var(--fs-sub);line-height:1.5}
[data-design="klar"] .ez-training-calendar{display:grid}
[data-design="klar"] .ez-training-calendar button{width:100%}
}

@layer zustaende{
[data-design="klar"] .ez-training-member{position:relative;display:flex;align-items:center;gap:var(--sp-3)}
[data-design="klar"] .ez-training-member + .ez-training-member::before{content:"";position:absolute;top:0;left:calc(var(--kreis-liste) + var(--sp-3));right:0;border-top:var(--klar-line-width) solid var(--klar-line)}
[data-design="klar"] .ez-training-avatar{flex:0 0 var(--kreis-liste);height:var(--kreis-liste);border-radius:var(--r-field);background:var(--avatar-bg);color:var(--sek);font-size:var(--fs-sub)}
[data-design="klar"] .ez-training-member-copy{flex:1;min-width:0}
[data-design="klar"] .ez-training-member-name{display:block;font-size:var(--fs-row);font-weight:var(--klar-fw-row);line-height:1.4;overflow-wrap:anywhere}
[data-design="klar"] .ez-training-member-status{display:block;font-size:var(--fs-sub);line-height:1.4;color:var(--sek)}
[data-design="klar"] .ez-training-status-icon{flex:0 0 var(--sp-7);text-align:center;font-size:var(--fs-val);color:var(--sek)}
[data-design="klar"] .ez-training-member[data-status="zu"] .ez-training-status-icon{color:var(--ok)}
[data-design="klar"] .ez-training-member[data-status="ab"] .ez-training-status-icon{color:var(--bad)}
}

@layer zustaende{
/* Spieltreffs teilen die Übersicht und den Kader mit Training. */
[data-design="klar"] .ez-treff-info{display:flex;align-items:flex-start;gap:var(--sp-3);border-top:var(--klar-line-width) solid var(--klar-line)}
[data-design="klar"] .ez-treff-info>span{flex:0 0 var(--sp-7);text-align:center}
[data-design="klar"] .ez-treff-info>div{min-width:0}
/* Gastgeber-Wappen links über Titel und Vereinsname, mit gemeinsamer Mini-Wappenhöhe. */
[data-design="klar"] .ez-treff-host{align-items:center}
[data-design="klar"] .ez-treff-host>span{flex-basis:var(--klar-mini-crest-size);display:flex;align-items:center;justify-content:center}
[data-design="klar"] .ez-treff-host-image{display:block;height:var(--klar-mini-crest-size);width:auto;max-width:100%;object-fit:contain}

[data-design="klar"] .ez-treff-info b{font-size:var(--fs-row);font-weight:var(--klar-fw-row);line-height:1.4}
[data-design="klar"] .ez-treff-info p{font-size:var(--fs-sub);line-height:1.4;color:var(--sek);overflow-wrap:anywhere}
[data-design="klar"] .ez-treff-dutygroup{gap:0}
[data-design="klar"] .ez-treff-dutygroup .ez-event-duty{border:0;border-radius:0;background:transparent}
[data-design="klar"] .ez-treff-dutygroup .ez-event-duty+.ez-event-duty{border-top:var(--klar-line-width) solid var(--klar-line)}
[data-design="klar"] .ez-treff-dutygroup .ez-event-label{font-size:var(--fs-row);font-weight:var(--klar-fw-row);text-transform:none;letter-spacing:0;line-height:1.4;color:var(--ink)}
[data-design="klar"] .ez-treff-dutygroup .ez-event-duty-copy strong{font-size:var(--fs-sub);font-weight:400;line-height:1.4;color:var(--sek)}
}

@layer zustaende{
[data-design="klar"] .ez-duty-person{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:44px;border:0;border-radius:0;background:transparent;color:var(--ink);text-align:left;font:inherit;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
[data-design="klar"] .ez-duty-person+.ez-duty-person{border-top:var(--klar-line-width) solid var(--klar-line)}
[data-design="klar"] .ez-duty-person .dt-dienstav{flex-basis:var(--kreis-liste);width:var(--kreis-liste);height:var(--kreis-liste);border:0;border-radius:var(--r-field);font-size:var(--fs-sub)}
[data-design="klar"] .ez-duty-person .tx{flex:1;min-width:0}
[data-design="klar"] .ez-duty-person .tx b{display:block;font-size:var(--fs-row);font-weight:var(--klar-fw-row);line-height:1.4;overflow-wrap:anywhere}
[data-design="klar"] .ez-duty-person .tx i{display:block;font-size:var(--fs-sub);font-weight:400;font-style:normal;color:var(--sek);line-height:1.4;overflow-wrap:anywhere}
[data-design="klar"] .ez-duty-person .hk{display:flex;align-items:center;justify-content:center;flex:0 0 var(--sp-6);height:var(--sp-6);border:var(--klar-line-width) solid var(--klar-line);border-radius:50%;background:transparent;color:var(--klar-accent)}
[data-design="klar"] .ez-duty-person .hk.an{border-color:var(--klar-accent)}
[data-design="klar"] .ez-duty-person .hk svg{width:var(--sp-4);height:var(--sp-4)}
}

@layer zustaende{
/* League matchdays reuse the shared menu surface, type and football corners. */
body[data-layout="klar"] :is(.lg-games,.lg-choice,.lg-picker,.lg-match-picker){position:relative;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);background:var(--klar-surface-subtle);min-width:0}
.lg-switch{overflow-x:auto;max-width:100%}.lg-switch .hm-fchip{flex-shrink:0;white-space:nowrap}
.lg-round-nav{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:var(--sp-3);align-items:center}
.lg-arrow{border:0;background:transparent;color:var(--klar-sub);font:inherit;font-size:var(--fs-title);min-height:44px;border-radius:var(--r-chip)}
.lg-arrow:disabled{opacity:.3}
.lg-round-pill{display:flex;flex-direction:column;align-items:center;min-width:0;min-height:44px;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-chip);background:transparent;color:var(--klar-ink);font:inherit}
.lg-round-pill strong{font-size:var(--fs-row);font-weight:var(--klar-fw-row)}
.lg-round-pill small,.lg-result small,.lg-pick small,.lg-choice small,.lg-status{font-size:var(--fs-sub);font-weight:400;color:var(--klar-sub)}
.lg-game{display:grid;grid-template-columns:minmax(0,1fr) 80px;gap:var(--sp-3);align-items:center;width:100%;min-height:60px;background:transparent;border:0;color:var(--klar-ink);font:inherit;text-align:center}
.lg-game+.lg-game{border-top:var(--klar-line-width) solid var(--klar-soft)}
.lg-teams,.lg-scores{display:grid;grid-template-rows:var(--sp-6) var(--sp-6);gap:var(--sp-2);min-width:0}
.lg-team{display:flex;align-items:center;gap:var(--sp-3);min-width:0;text-align:left;font-size:var(--fs-sub);line-height:1.3}
.lg-badge{display:grid;place-items:center;width:var(--sp-6);height:var(--sp-6);flex:0 0 var(--sp-6)}
.lg-game .lg-crest{width:var(--sp-6);height:var(--sp-6)}
.lg-match-result{display:grid;grid-template-columns:minmax(0,1fr) var(--sp-5);gap:var(--sp-2);align-items:center}
.lg-scores{font-size:var(--fs-body);line-height:var(--sp-6);font-weight:400;text-align:right;font-variant-numeric:tabular-nums}
.lg-when{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-1);color:var(--klar-sub);font-size:var(--fs-sub);line-height:1.3}
.lg-when small{font-size:var(--fs-mini)}
.lg-when .is-live{color:var(--klar-accent)}
.lg-crest{display:block;width:32px;height:32px;object-fit:contain;flex-shrink:0}
.lg-result{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-1);min-width:0}
.lg-result strong{font-size:var(--fs-sub);font-weight:var(--klar-fw-row);white-space:nowrap}
.lg-result.is-live small{color:var(--klar-accent)}
.lg-current{display:block;margin-inline:auto}
.lg-picker label{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);color:var(--klar-sub);font-size:var(--fs-sub)}
.lg-picker select{min-width:0;max-width:65%;background:transparent;color:var(--klar-ink);font:inherit;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field)}
.lg-round-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);max-height:260px;overflow-y:auto}
.lg-pick{display:flex;flex-direction:column;gap:var(--sp-1);text-align:left;min-height:44px;background:transparent;border:0;color:var(--klar-ink);font:inherit;font-size:var(--fs-sub)}
.lg-pick.sel,.lg-pick[aria-current=true]{color:var(--klar-accent)}
body[data-layout="klar"] .lg-match-picker{max-height:280px;overflow-y:auto}
.lg-picker-meta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-eb);color:var(--klar-sub);text-align:left}
.lg-game[aria-current="true"] .lg-picker-meta{color:var(--klar-accent)}
.lg-match-picker .lg-game{row-gap:var(--sp-2)}
.lg-match-picker .lg-pick{width:100%}.lg-match-picker .lg-pick+.lg-pick{border-top:var(--klar-line-width) solid var(--klar-soft)}
.lg-choice summary{display:flex;align-items:center;gap:var(--sp-4);cursor:pointer;list-style:none;color:var(--klar-ink);font-size:var(--fs-row)}
.lg-choice summary::-webkit-details-marker{display:none}.lg-choice summary>span:nth-child(2){flex:1}.lg-choice small{display:block}
.lg-options label{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);min-height:44px;font-size:var(--fs-row);color:var(--klar-ink)}
.lg-options label+label{border-top:var(--klar-line-width) solid var(--klar-soft)}
.lg-options input{accent-color:var(--klar-accent);width:20px;height:20px;flex-shrink:0}
.lg-team-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.lg-team-choice button{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);min-height:44px;min-width:0;background:transparent;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field);color:var(--klar-sub);font:inherit;font-size:var(--fs-sub)}
.lg-team-choice button span{overflow-wrap:anywhere;min-width:0}.lg-team-choice button[aria-pressed=true]{border-color:var(--klar-accent);color:var(--klar-ink)}
.lg-status{text-align:center}
.lg-game:active,.lg-team-choice button:active,.lg-pick:active{background:transparent}
.lg-game:focus-visible,.lg-pick:focus-visible,.lg-arrow:focus-visible,.lg-round-pill:focus-visible{outline:2px solid var(--klar-accent);outline-offset:2px}
}

@layer zustaende{
/* Matchday chooser and compact match rows share the table's center and outer edges. */
.lg-board>.lg-round-nav{grid-template-columns:var(--sp-7) minmax(0,1fr) var(--sp-7);gap:var(--sp-2)}
.lg-board>.lg-round-nav>.lg-arrow{width:44px}
.lg-board>.lg-round-nav>.lg-arrow:first-child{justify-self:end}
.lg-board>.lg-round-nav>.lg-arrow:last-child{justify-self:start}
.lg-board>.lg-round-nav>.lg-round-pill{justify-content:center}
.lg-match-info{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;font-size:var(--fs-eb);font-weight:400;line-height:1.5;color:var(--klar-sub);font-variant-numeric:tabular-nums}
.lg-datetime{white-space:nowrap;font-weight:400}
.lg-time{font-size:var(--fs-sub);font-weight:400;color:var(--klar-ink)}
.lg-match-status{display:flex;flex-direction:column;text-align:center;font-size:var(--fs-mini);font-weight:400;color:var(--klar-sub)}
.lg-match-status.is-live{color:var(--klar-accent)}
}

@layer zustaende{
.lg-club-name{min-width:0;font-size:var(--fs-sub);font-weight:400;line-height:1.3;color:var(--klar-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}


@layer zustaende{
.ms-complete-fold{overflow:hidden;transition:height var(--motion-expand) var(--ease-standard)}
.ms-complete-details{border-top:var(--klar-line-width) solid var(--klar-line)}
.ms-complete-details > .pf-menu-row + .pf-menu-row{border-top:var(--klar-line-width) solid var(--klar-line)}
#ms-complete-toggle .mb-chev{transition:transform var(--motion-expand) var(--ease-standard)}
#ms-complete-toggle[aria-expanded="true"] .mb-chev{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.ms-complete-fold,#ms-complete-toggle .mb-chev{transition:none}}
}

@layer zustaende{
/* Spielort uses the shared compact location row instead of a nested info box. */
[data-design="klar"] .hm-row.spiel .hm-match-place{font-size:var(--fs-sub);line-height:1.45}
[data-design="klar"] .hm-row.spiel .hm-match-place span{white-space:normal;overflow:visible;overflow-wrap:anywhere}
}

@layer zustaende{
/* Gemeinsame dezente Kopffläche für kleine Trainings- und Spieltagskarten. */
[data-design="klar"] .hm-row:is(.tr,.spiel) .hm-flat-head{background:var(--klar-surface-subtle);border-radius:calc(var(--r-card) - var(--klar-line-width)) calc(var(--r-card) - var(--klar-line-width)) 0 0}
[data-design="klar"] .hm-row.tr .hm-flat-head{border-bottom:var(--klar-line-width) solid var(--klar-soft)}
}

@layer zustaende{
/* Spieltreff-Hero: vorhandene Wappen-Pille und Mini-Dienste, in Hero-Groesse. */
[data-design="klar"] .hm-hero-duties{border-top:var(--klar-line-width) solid var(--klar-line)}
[data-design="klar"] .hm-hero-datecol{flex-shrink:0;width:var(--klar-hero-date-width);display:flex;flex-direction:column;align-items:center}
[data-design="klar"] .hm-hero-datecol .hm-hero-duties{width:calc(100% - var(--sp-5))}
[data-design="klar"] .hm-hero-duties .hm-duty-minis{flex-direction:column;align-items:center}
[data-design="klar"] .hm-hero-duties .hm-duty-mini{width:auto;min-width:0}
[data-design="klar"] .hm-hero-duties .hm-duty-mini span{font-size:var(--sp-6)}
[data-design="klar"] .hm-hero-duties .hm-duty-mini b{font-size:var(--fs-eb)}
}

@layer zustaende{
/* Im Kartenkoerper folgt die Wappen-Pille den hellen/dunklen UI-Flaechen. */
[data-design="klar"] .hm-hero.kf .hm-kf-badge{background:var(--klar-surface-subtle);border:var(--klar-line-width) solid var(--klar-line);color:var(--sek)}
[data-design="klar"] .hm-hero.kf .hm-kf-badge b{color:var(--sek)}
}

@layer zustaende{
/* Treffzeit in den Terminkarten: nur die Uhrzeit hervorheben. */
[data-design="klar"] .hm-meeting strong{font-weight:var(--klar-fw-row);color:var(--ink)}
}

@layer zustaende{
/* Freigegebener Fotoabschluss: der Inhalt bildet die obere Rundung. */
[data-design="klar"] :is(.hm-hero.kf,.hm-hero.tr,.hm-hero.ez-match-hero,.hm-row.kf) > .hm-band{border-bottom-left-radius:0;border-bottom-right-radius:0;box-sizing:content-box}
[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){position:relative;border-radius:var(--r-card) var(--r-card) 0 0;background:var(--klar-surface-subtle-solid)}
}

@layer zustaende{
/* Variante A: die Außenkontur läuft entlang der gerundeten Fotokante weiter. */
[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)::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--r-card);border-radius:var(--r-card) var(--r-card) 0 0;pointer-events:none;border:var(--klar-line-width) solid var(--klar-line);border-bottom:0;box-sizing:border-box}
}

@layer zustaende{
/* Optional selection header within a shared menu group. */
body[data-layout="klar"] .pf-wrap .ez-menu-group.pf-menu-group > .pf-menu-row.ez-menu-group-head{background:var(--klar-surface-subtle-solid);border-radius:var(--r-card) var(--r-card) 0 0}
}

/* Fotoaktionen: einheitliche Profil-Referenz fuer alle Personenbilder.
   Der 22px-Kreis ist dekorativ; das gesamte Foto bleibt die Klickflaeche. */
@layer komponenten{
.pf-av-plus,.kd-fotostift{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;
  background:var(--field);border:1px solid var(--line);color:var(--hl-text);
  display:flex;align-items:center;justify-content:center}
.pf-av-plus svg,.kd-fotostift svg{width:13px;height:13px;display:block}
}
@layer zustaende{
/* Avatar: eigene deckende Glasfläche statt transparenter Eingabefeldfarbe. */
body[data-layout="klar"] .pf-av-plus,body[data-layout="klar"] .kd-fotostift{
 background:color-mix(in srgb,var(--klar-bg) 88%,var(--ink));
 border-color:var(--klar-line);
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 12%,transparent);
 color:var(--hl-text);
}
@supports ((backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px))){
 body[data-layout="klar"] .pf-av-plus,body[data-layout="klar"] .kd-fotostift{
  background:color-mix(in srgb,color-mix(in srgb,var(--klar-bg) 88%,var(--ink)) 90%,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
 }
}
}


@layer komponenten{
/* Am bearbeitbaren Foto ist der Status redundant; Listen behalten ihren Punkt. */
.kd-fotoknopf .kd-punkt{display:none}
}