/* ═══ v2 · team.css — Trainerhub (Mockups 49a/49b, 50a/50b, 51a, 52a–52c).
   62d: Der Kopf oben ist immer gleich hoch; Titel, Wechseln und Umschalter liegen im
   Inhalt (.scr-titel/.scr-unter aus shell.css). Nur Werte aus tokens.css. ═══ */

/* Mannschaftswahl (klappt unter dem Namen auf) */
.tm-picker{margin:var(--sp-4) var(--edge) 0;border:1px solid var(--line);border-radius:var(--r-field);overflow:hidden}
.tm-picker button{display:flex;align-items:center;gap:var(--sp-3);width:100%;background:transparent;border:0;
  border-bottom:1px solid var(--line);padding:var(--sp-4);color:var(--ink);font:600 13.25px/1.2 var(--f);text-align:left}
.tm-picker button:last-child{border-bottom:0}
.tm-picker button.sel{color:var(--hl-text);font-weight:800}
.tm-pdot{width:8px;height:8px;border-radius:99px;flex-shrink:0;background:var(--c,var(--muted))}

/* ---------- Inhalt ---------- */
.tm-body{padding:0 var(--edge) var(--sp-2)}
/* 128b: Filterreihe wie in HOME (108c) — dasselbe Bauteil, dieselbe Mechanik. */
/* 131b: Zahnrad in der Titelzeile — 32px Umriss in Vereinsgelb, 44px Trefferfeld. */
.tm-verw{position:relative;flex:0 0 auto;margin-left:auto;width:42px;height:42px;border-radius:999px;
  border:0;background:transparent;color:var(--hl-text);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.tm-verw svg{width:21px;height:21px}
.tm-verw::after{content:"";position:absolute;inset:-6px}
/* 148a: Schiene statt loser Pillen — sie sagt "drei Moeglichkeiten, eine gilt".
   Ab vier Reitern wird jeder zu schmal; dann scrollt die Schiene seitlich. */
.tm-filter{display:flex;align-items:center;gap:3px;margin-top:var(--sp-5);margin-left:var(--edge);margin-right:var(--edge);
  background:var(--field);border:1px solid var(--line);border-radius:999px;padding:3px}
.tm-filter.viele{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tm-filter.viele::-webkit-scrollbar{display:none}
.tm-fchip{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  border:0;border-radius:999px;padding:7px 10px;background:transparent;color:var(--muted);
  font:600 12.5px var(--f);white-space:nowrap;cursor:pointer}
.tm-filter.viele .tm-fchip{flex:0 0 auto;padding:7px 14px}
.tm-fchip.sel{background:var(--kachel-fest);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.3)}
[data-theme="light"] .tm-fchip.sel{box-shadow:0 1px 3px rgba(26,26,24,.12)}
.tm-eb{display:flex;align-items:baseline;gap:var(--sp-4);
  font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;
  color:var(--hl-text);margin:var(--sp-7) 0 var(--sp-4)}
.tm-eb.quiet{margin:var(--sp-7) 0 var(--sp-4)}
.tm-eb .sep{color:var(--line);margin:0 var(--sp-2)}
.tm-eb .heim{color:var(--ok)}
.tm-eb .aus{color:var(--info)}

/* Hauptblock je Reiter — einheitlicher Rahmen (wie beim Spieltreff) */
/* 146c: gefuellte Boxen gliedern den Screen in Haeppchen. Fuer lange Listen war die
   reine Haarlinie zu wenig — man las Text von oben bis unten. */
.tm-box{background:var(--kachel);border:1px solid var(--kachel-rand);border-radius:18px;
  padding:var(--sp-5);box-shadow:var(--kachel-schatten)}

/* Termin mit Datumsspalte */
/* 122a — Trainingskarte im Bild der Home-Karte: Abteilung und Countdown oben, dann die
   Uhrzeit als eine grosse gelbe Zahl, Titel klein mit Zeichen, Ort darunter. */
.tm-zahl{display:flex;align-items:baseline;gap:var(--sp-3);margin-top:var(--sp-3)}
.tm-zahl b{font-size:24px;font-weight:800;letter-spacing:-.6px;line-height:1;color:var(--hl-text)}
.tm-zahl i{font-style:normal;font-size:13.25px;color:var(--muted)}
/* Danach-Zeile: Zeichen neben dem Datum, Uhrzeit rechts in Weiss, Planen als Stift (123b) */
.tm-stift{position:relative;width:30px;height:30px;border-radius:999px;border:1px solid var(--hl);
  background:none;color:var(--hl-text);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tm-stift svg{width:15px;height:15px}
.tm-stift::after{content:"";position:absolute;inset:-7px}   /* 44px Trefferfeld */
.tm-next{display:flex;align-items:center;gap:var(--sp-4)}
.tm-cal{text-align:center;width:40px;flex-shrink:0}
.tm-cal i{display:block;font-style:normal;font-size:11.25px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.tm-cal b{display:block;font-size:24px;font-weight:800;line-height:1.05;color:var(--hl-text)}
.tm-cal u{display:block;font-size:11.25px;font-weight:800;letter-spacing:1px;color:var(--muted);text-decoration:none}
.tm-next-main{flex:1;min-width:0}
.tm-next-main .t{font-size:17px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-next-main .s{font-size:12.5px;color:var(--muted);margin-top:var(--sp-1)}

/* Knöpfe */
/* 138a: wer kommt. Ein Punkt je Kind, IMMER eine Reihe — die Punkte schrumpfen mit
   (flex:1 bis hoechstens 11px, Luecke prozentual), sie brechen nie um.
   Weiss = Inhalt (dabei), Rot = Abweichung. Keine Sportfarbe: die gehoert dem Zeitstrahl. */
/* 143b: duenne Linie im Textmass — Termin oben, wer kommt unten. 16 darueber, 16 darunter. */
/* 143b: Anwesenheit liegt IN der Karte, davor eine eingerückte Haarlinie im Textmass. */
/* 171a: Quote als Pille ueber die ganze Breite, darunter die Abgemeldeten als Pillen
   im Anstecker-Motiv (wie Wappen und Spieltreff-Badge, nur kleiner). */
.tm-quote{display:flex;align-items:center;gap:var(--sp-4);width:100%;border:0;cursor:pointer;
  background:rgba(255,255,255,.06);border-radius:999px;padding:var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5)}
.tm-quote .pf{display:flex;flex-shrink:0;color:var(--muted)}
.tm-quote .pf svg{width:15px;height:15px}
.tm-quote .q{display:inline-flex;align-items:baseline;gap:5px;flex-shrink:0}
.tm-quote .q b{font-size:13.25px;font-weight:800;color:var(--ink)}
.tm-quote.gut .q b{color:var(--ok)}
.tm-quote.mittel .q b{color:var(--hl-text)}
.tm-quote.schlecht .q b{color:var(--bad)}
.tm-quote .q i{font-style:normal;font-size:11.25px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted)}
.tm-quote .bar{display:flex;flex:1;height:5px;border-radius:99px;
  overflow:hidden;background:rgba(255,255,255,.10)}
.tm-quote .bar{background:var(--bad)}
.tm-quote .bar i{background:var(--ok)}
.tm-quote.mittel .bar i{background:var(--hl)}
.tm-quote.schlecht .bar i{background:var(--bad)}
.tm-quote.schlecht .bar{background:rgba(255,255,255,.10)}
.tm-quote.an .bar i{background:var(--hl)}
.tm-trenn{height:1px;background:var(--line);margin:var(--sp-5) 0}
/* 143b: Anwesenheit liegt IN der Karte, davor eine eingerückte Haarlinie im Textmass. */
.tm-acts{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.tm-btn{flex:1;border:1px solid var(--line);border-radius:var(--r-chip);background:transparent;color:var(--ink);
  padding:11px 0;font:700 13.25px/1 var(--f)}
.tm-btn.hl{border-color:var(--hl);color:var(--hl-text)}

/* Danach-Zeilen */
/* 146c: Termin-Kachel — Datum links, Haarlinie, Inhalt, Stift rechts. */
/* 151b: Datumsspalte links, Karte rechts — wie in HOME. */
.tm-zeile{display:flex;align-items:flex-start;gap:var(--sp-3)}
.tm-zeile + .tm-zeile{margin-top:var(--sp-3)}
.tm-zeile.weiter{margin-top:var(--sp-2)}
.tm-row{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-4);
  background:var(--kachel);border:1px solid var(--kachel-rand);border-radius:18px;
  padding:14px;box-shadow:var(--kachel-schatten)}
/* 150c: Lichtkante wie in HOME. */
.tm-row > *{position:relative;z-index:1}
.tm-date{flex-shrink:0;width:52px;text-align:center;align-self:flex-start;
  background:rgba(255,255,255,.05);border-radius:14px;padding:8px 0}
.tm-date i{font-style:normal;display:block;font-size:11.25px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.tm-date b{display:block;font-size:21px;font-weight:800;line-height:1.05;color:var(--hl-text)}
.tm-date u{display:block;text-decoration:none;font-size:11.25px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.tm-rmain{flex:1;min-width:0}
.tm-rkopf{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.tm-rkopf b{font-size:var(--fs-row);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-rkopf img{width:19px;height:19px;object-fit:contain;flex-shrink:0}
.tm-rkopf .ini{width:19px;height:19px;border-radius:6px;background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--ink);flex-shrink:0}
.tm-rmain .s,.tm-karte-body .s{display:flex;align-items:center;gap:var(--sp-3);font-size:13.25px;color:var(--muted);margin-top:var(--sp-2)}
.tm-rmain .s svg,.tm-karte-body .s svg{width:13px;height:13px;flex-shrink:0}
.tm-rmain .s span,.tm-karte-body .s span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-rmain .s + .s,.tm-karte-body .s + .s{margin-top:var(--sp-1)}
/* Hinweis-Zeile (Ferien, Zusatztraining) */
.tm-note{display:flex;align-items:center;gap:var(--sp-2);font-size:12.5px;color:var(--muted);margin-top:var(--sp-4)}
.tm-note svg{width:12px;height:12px;flex-shrink:0}

/* Verwalten */
.tm-manage{display:flex;align-items:center;gap:var(--sp-4);width:100%;margin-top:var(--sp-7);padding:var(--row-y) var(--sp-5);
  border:1px solid var(--line);border-radius:14px;background:transparent;color:var(--ink);text-align:left;font:inherit}
.tm-manage .ic{width:30px;height:30px;border-radius:10px;background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--hl-text)}
.tm-manage .ic svg{width:15px;height:15px}
.tm-manage .tx{flex:1;min-width:0}
.tm-manage .tx b{display:block;font-size:14.5px;font-weight:700}
.tm-manage .tx i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:var(--sp-1)}
.tm-manage .chev{width:15px;height:15px;color:var(--muted);flex-shrink:0}

.tm-empty{font-size:13.25px;color:var(--muted);padding:var(--sp-4) 0 var(--sp-1)}

/* ── Einrichtung beim ersten Mal (100a) ──
   Die spaeteren Schritte sind blass, bis der vorige steht — die Reihenfolge ist keine
   Willkuer: ohne Training kein Verband, ohne Verband kein Kader. */
.tm-setup{padding-top:var(--sp-2)}
.tm-eb .r{margin-left:auto;color:var(--muted)}
.tm-rule{display:flex;gap:var(--sp-2);padding:var(--sp-3) 0 var(--sp-2)}
.tm-rule i{flex:1;height:3px;border-radius:99px;background:var(--line)}
.tm-rule i.on{background:var(--hl)}
.tm-step{display:flex;align-items:center;gap:var(--sp-4);width:100%;padding:var(--row-y) 0;
  border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);text-align:left;font:inherit}
.tm-step .nr{width:30px;height:30px;border-radius:10px;background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:var(--fs-eb);font-weight:800;color:var(--muted)}
.tm-step .nr svg{width:15px;height:15px}
.tm-step .tx{flex:1;min-width:0}
.tm-step .tx b{display:block;font-size:var(--fs-row);font-weight:700}
.tm-step .tx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.tm-step .ch{flex-shrink:0;color:var(--hl-text);display:flex}
.tm-step .ch svg{width:16px;height:16px}
.tm-step.aktiv .nr{border-color:var(--hl);color:var(--hl-text)}
.tm-step.aktiv .tx b{color:var(--hl-text)}
.tm-step.fertig .nr{color:var(--ok)}
.tm-step.blass{opacity:.5}
.tm-hint{font-size:var(--fs-sub);line-height:1.55;color:var(--muted);padding-top:var(--sp-4);text-wrap:pretty}

/* ═══ 145a — Zahnrad-Menue "Mannschaft" und seine Unterkarten ═══
   Ein Verzeichnis in einer Karte von unten. Jede Zeile nennt ihren Stand; Unterpunkte
   sind eigene Karten (73a: links Zurueck, Einstellungen uebernehmen sofort). */
.tm-meb{font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;
  color:var(--hl-text);margin:var(--sp-7) 0 var(--sp-4);display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3)}
.tm-meb:first-child{margin-top:0}
.tm-meb .z{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.tm-offen{border:1px solid var(--line);border-radius:16px;padding:var(--sp-5)}
.tm-offen div{font-size:var(--fs-body);color:var(--ink)}
.tm-offen div + div{margin-top:var(--sp-4)}

.tm-men{display:flex;align-items:center;gap:var(--sp-4);width:100%;padding:var(--row-y) 0;
  background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);
  font-family:inherit;text-align:left;cursor:pointer}
.tm-men + .tm-meb{margin-top:var(--sp-7)}
.tm-men:last-of-type{border-bottom:0}
.tm-men .ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--field);
  border:1px solid var(--hl);color:var(--hl-text);display:flex;align-items:center;justify-content:center}
.tm-men .ic svg{width:17px;height:17px}
.tm-men .tx{flex:1;min-width:0}
.tm-men .tx b{display:block;font-size:var(--fs-row);font-weight:700}
.tm-men .tx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-men .tx i.rot{color:var(--bad)}
.tm-men .cv{flex:0 0 auto;color:var(--muted);display:flex}
.tm-men .cv svg{width:16px;height:16px}

.tm-schluss{margin-top:var(--sp-8)}
.tm-schluss .tm-btn{width:100%}
.tm-schluss .tm-fuss{margin-top:var(--sp-3)}
.tm-link{display:block;width:100%;margin-top:var(--sp-7);padding:0;background:none;border:0;
  font-family:inherit;font-size:var(--fs-body);font-weight:700;color:var(--ink);cursor:pointer}
.tm-link.rot{color:var(--bad)}
.tm-fuss{font-size:var(--fs-sub);color:var(--muted);text-wrap:pretty}

/* Umschalter in der Ortskarte */
.tm-seg{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.tm-seg button{flex:1;padding:9px 0;border-radius:999px;border:1px solid var(--line);background:none;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.tm-seg button.an{border:1.5px solid var(--hl);font-weight:700;color:var(--ink)}

/* Wertzeile mit Zaehler */
.tm-wert{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--row-y) 0;border-bottom:1px solid var(--line)}
.tm-wert:last-of-type{border-bottom:0}
.tm-wert > span{min-width:0}
.tm-wert b{display:block;font-size:var(--fs-row);font-weight:700}
.tm-wert i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.tm-zaehl{display:inline-flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.tm-zaehl button{width:30px;height:30px;border-radius:999px;border:1px solid var(--line);background:none;
  color:var(--hl-text);font-family:inherit;font-size:var(--fs-row);font-weight:700;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative}
.tm-zaehl button::after{content:"";position:absolute;inset:-7px}
.tm-zaehl b{font-size:var(--fs-val);font-weight:800;min-width:58px;text-align:center}

/* --- Neues Layout aus HOME uebernommen (Etiketten, Foto-Streifen, grosse Uhrzeit) --- */
.tm-row.kf{display:block;overflow:hidden;padding:0;border-color:transparent}
.tm-row.kf .tm-band{height:136px;border-radius:18px 18px 14px 14px;
  background:url("../../img/festival.jpg") center 46%/cover;position:relative}
.tm-row.kf .tm-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,16,.34),transparent 58%)}
.tm-band-in{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-3);padding:15px 14px 0}
.tm-row.kf .tm-band-in{padding:15px 14px 0}
.tm-row.kf .tm-rmain{padding:12px 14px 14px}
.tm-row.kf .tm-rmain > .tm-zahl:first-child{margin-top:0}
.tm-row.kf .tm-stift{position:absolute;right:10px;bottom:10px}
/* Der Ort endet vor dem Stift — sonst laeuft er darunter. */
.tm-row.kf .tm-rmain .s{padding-right:34px}
.tm-duty{display:inline-flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);
  font-size:13.25px;font-weight:700;color:var(--ink)}
.tm-duty i{font-style:normal;font-size:11.25px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--hl-text)}
/* Etikett der Sportart: Zeichen ragt links darueber, Kontur in Kachelfarbe stanzt es aus. */
.tm-sportbadge{position:relative;display:inline-flex;align-items:center;border-radius:999px;
  padding:4px 10px 4px 25px;margin-left:17px;min-height:26px;
  background:color-mix(in srgb, var(--c) 16%, transparent)}
.tm-sportbadge b{font-size:13.25px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--c)}
.tm-sportbadge .ico{position:absolute;left:-17px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;background:var(--c);
  -webkit-mask:var(--q) center/contain no-repeat;mask:var(--q) center/contain no-repeat;
  filter:drop-shadow(0 0 3px var(--kachel)) drop-shadow(0 0 3px var(--kachel))
         drop-shadow(0 0 2px var(--kachel)) drop-shadow(0 0 2px var(--kachel))
         drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.tm-sportbadge.sp-fuss{--c:var(--sp-fuss-t);--q:url("../../img/sport-fuss.svg")}
.tm-sportbadge.sp-tennis{--c:var(--sp-tennis-t);--q:url("../../img/sport-tennis.svg")}
.tm-sportbadge.sp-ttennis{--c:var(--sp-ttennis-t);--q:url("../../img/sport-ttennis.svg")}
.tm-sportbadge.sp-volley{--c:var(--sp-volley-t);--q:url("../../img/sport-volley.svg")}
.tm-sportbadge.sp-breit{--c:var(--sp-breit-t);--q:url("../../img/sport-breit.svg")}
/* Spieltreff-Etikett: Wappen bildet den linken Abschluss. */
.tm-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:#1a1a18;
  background:linear-gradient(90deg,#8fd9b6,#f5a83c,#e0533f,#8fbfe8);border-radius:999px;
  padding:0 10px 0 28px;margin-left:15px;min-height:26px}
.tm-kf-badge .wap{position:absolute;left:-22px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.tm-kf-badge .wap img{display:block;width:40px;height:40px;object-fit:contain}
/* Uhrzeit als grosse Zahl mit Unterlaengen-Ausgleich. */
.tm-zahl{display:flex;align-items:baseline;gap:var(--sp-3);margin-top:var(--sp-6)}
.tm-zahl b{font-size:21px;font-weight:800;letter-spacing:-.45px;line-height:1;margin-bottom:-4px;color:var(--hl-text)}
.tm-zahl i{font-style:normal;font-size:13.25px;line-height:1;color:var(--muted)}
.tm-zahl+.s{margin-top:var(--sp-4)}
.tm-rkopf{display:flex;align-items:flex-start;gap:var(--sp-3)}
.tm-tag{margin-left:auto;flex-shrink:0;font-size:11.25px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted);background:var(--field);border-radius:999px;padding:4px 10px}
.tm-karte-tx{flex:1;min-width:0}
/* 220a: die grosse Karte ist die Home-Karte (hm-hero) — nur der Fuss ist Trainerarbeit.
   Dabei-Leiste und Knoepfe mit demselben Mass wie Ort -> Knoepfe in HOME (16). */
.hm-hero .tm-hero-fuss{margin-top:var(--sp-5)}
.hm-hero .tm-hero-fuss .tm-acts{margin-top:var(--sp-5)}
.hm-hero .tm-hero-fuss > :first-child{margin-top:0}

/* Anwesenheit und Knoepfe liegen IN der Karte, mit demselben Polster wie der Inhalt. */
.tm-karte-fuss{padding:0 14px 14px;margin-top:var(--sp-5)}
.tm-karte-fuss .tm-quote{margin-top:0}
.tm-karte-fuss .tm-acts{margin-top:var(--sp-6)}
.tm-karte-fuss .tm-trenn{margin:0 0 var(--sp-5)}
.tm-row.kf .tm-band-in .tm-kf-badge{margin-top:-1px}

/* 169b: Kader als zwei Spalten — Kreis mit Foto oder Initialen, Vorname und Alter. */
.tm-kader{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.tm-kopf{display:flex;align-items:center;gap:var(--sp-3);min-width:0;text-align:left;
  background:var(--kachel);border:0;border-radius:14px;padding:10px;cursor:pointer;
  box-shadow:var(--kachel-schatten)}
.tm-kopf img,.tm-kopf i{width:34px;height:34px;border-radius:999px;object-fit:cover;flex-shrink:0;
  background:var(--field);border:1px solid var(--line)}
.tm-kopf i{font-style:normal;background:var(--field);border:1px solid var(--line);color:var(--ink);
  font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.tm-kopf .tx{flex:1;min-width:0}
/* 172a: Zustand als Zeichen im Kreis rechts — nur bei Abweichung. */
.tm-kopf .zu{flex-shrink:0;width:22px;height:22px;border-radius:999px;
  background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center}
.tm-kopf .zu svg{width:13px;height:13px}
.tm-kopf.verletzt .zu{color:var(--bad)}
.tm-kopf.pause .zu{color:var(--hl-text)}
.tm-kopf b{display:block;font-size:13.25px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-kopf em{display:block;font-style:normal;font-size:11.25px;color:var(--muted)}
.tm-eb .zahl{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted)}

/* 174a: die Karte von unten gibt dem Kader die Inhaltskante — vorher klebte er am Rand. */
.tm-wer{padding:0 var(--edge) var(--sp-6)}
.tm-wer-datum{font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.tm-wer .tm-eb{padding:0;margin:var(--sp-7) 0 var(--sp-4)}
.tm-wer .tm-kader{padding:0}
.tm-hinweis{font-size:13.25px;color:var(--muted);margin-top:var(--sp-6);text-wrap:pretty}
/* Trainingsbeteiligung: eine Zeile je Kind, Balken sagt die Lage. */
.tm-bet{display:flex;flex-direction:column;gap:var(--sp-4)}
.tm-betz{display:flex;align-items:center;gap:var(--sp-4)}
.tm-betz img,.tm-betz i{width:30px;height:30px;border-radius:999px;object-fit:cover;flex-shrink:0;
  background:var(--field);border:1px solid var(--line)}
.tm-betz i{display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:11.25px;font-weight:800;color:var(--ink)}
.tm-betz b{width:74px;flex-shrink:0;font-size:13.25px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-betz .bar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.10);display:flex;overflow:hidden}
.tm-betz .bar i{width:auto;height:auto;border:0;border-radius:0;background:var(--ok)}
.tm-betz .bar.mittel i{background:var(--hl)}
.tm-betz .bar.schlecht i{background:var(--bad)}
.tm-betz em{flex-shrink:0;width:38px;text-align:right;font-style:normal;font-size:12.5px;font-weight:800;color:var(--ok)}
.tm-betz em.mittel{color:var(--hl-text)}
.tm-betz em.schlecht{color:var(--bad)}

/* Weicher Wechsel im Sheet: die getippte Kachel bekommt kurz einen Rahmen in Vereinsgelb. */
.tm-wer .tm-kopf.wandert{box-shadow:0 0 0 1.5px var(--hl);transition:box-shadow .3s ease}

/* 175a: jede Einstellung eine eigene Kachel statt Zeilen mit Haarlinien. */
.tm-men.kachel{background:var(--kachel);border:0;border-radius:16px;padding:12px 14px;margin-top:var(--sp-3)}
.tm-men.kachel + .tm-meb{margin-top:var(--sp-7)}
.bt-unter{font-size:var(--fs-sub);color:var(--muted);padding:0 var(--edge);margin-top:var(--sp-1)}
/* 176a: Tagesschalter und Zeitfelder. */
.tm-tage{display:flex;gap:6px}
.tm-wtag{flex:1;border:0;border-radius:12px;padding:11px 0;cursor:pointer;
  background:var(--kachel);color:var(--muted);font:800 var(--fs-eb)/1 var(--f);letter-spacing:.5px}
.tm-wtag.an{background:var(--hl);color:var(--hl-ink)}
.tm-zeiten{display:flex;gap:var(--sp-3)}
.tm-zfeld{flex:1;background:var(--kachel);border-radius:16px;padding:14px;display:block}
.tm-zfeld i{display:block;font-style:normal;font-size:11.25px;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted)}
.tm-zfeld input{display:block;width:100%;margin-top:var(--sp-2);border:0;background:transparent;
  color:var(--ink);font:800 var(--fs-title)/1 var(--f);letter-spacing:-.6px}
.tm-zfeld input::-webkit-calendar-picker-indicator{display:none}
.tm-haupt{display:block;width:100%;margin-top:var(--sp-7);border:0;border-radius:999px;
  background:var(--hl);color:var(--hl-ink);font:800 var(--fs-body) var(--f);padding:13px 0;cursor:pointer}

/* 177c: Schalter "Je Tag eigene Zeit" und die Zeitzeilen dahinter. */
.tm-schalt{display:flex;align-items:center;gap:var(--sp-4);background:var(--kachel);
  border-radius:16px;padding:12px 14px;margin-top:var(--sp-3)}
.tm-schalt span{flex:1;min-width:0}
.tm-schalt b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--ink)}
.tm-schalt i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.tm-sw{position:relative;width:44px;height:26px;border:0;border-radius:999px;background:#33373B;flex-shrink:0;cursor:pointer}
.tm-sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:999px;background:var(--muted);transition:left .18s ease}
.tm-sw.an{background:var(--hl)}
.tm-sw.an i{left:21px;background:var(--hl-ink)}
.tm-tzeile{display:flex;align-items:center;gap:var(--sp-3);background:var(--kachel);
  border-radius:16px;padding:10px 14px;margin-top:var(--sp-3)}
.tm-tzeile .tag{width:38px;height:38px;border-radius:12px;background:var(--field);color:var(--muted);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--fs-eb);font-weight:800}
.tm-tzeile i{font-style:normal;font-size:var(--fs-sub);color:var(--muted)}
.tm-tzeile input{width:74px;border:0;background:transparent;color:var(--ink);
  font:800 var(--fs-val) var(--f);text-align:center}
.tm-tzeile input::-webkit-calendar-picker-indicator{display:none}

/* 177c: Grundregel und Zaehler als Kacheln, nicht als Zeilen mit Linien. */
.bt-body .bt-wahl{display:flex;align-items:stretch;gap:var(--sp-4);width:100%;border:0;cursor:pointer;
  background:var(--kachel);border-radius:16px;padding:14px;margin-top:var(--sp-3);text-align:left}
.bt-body .bt-wahl .bt-wahl-tx{min-width:0}
.bt-body .bt-wahl b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--muted)}
.bt-body .bt-wahl.an b,.bt-body .bt-wahl:has(.bt-haken.an) b{color:var(--ink)}
.bt-body .bt-wahl i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.bt-body .bt-haken{flex-shrink:0;width:38px;height:38px;align-self:center;border-radius:999px;border:1.5px solid var(--muted);
  display:flex;align-items:center;justify-content:center;background:transparent;color:var(--hl-ink)}
.bt-body .bt-haken.an{border:0;background:var(--hl)}
.bt-body .bt-haken svg{width:20px;height:20px}
.bt-body .tm-wert{display:flex;align-items:center;gap:var(--sp-4);background:var(--kachel);
  border-radius:16px;padding:12px 14px;margin-top:var(--sp-3);border:0}
.bt-body .tm-wert > span:first-child{flex:1;min-width:0}
.bt-body .tm-wert b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--ink)}
.bt-body .tm-wert i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.tm-leer{font-size:var(--fs-sub);color:var(--muted);background:var(--kachel);border-radius:16px;padding:14px}

/* Abstaende wie in den anderen Karten: 24 vor der Abschnittsueberschrift, 12 danach. */
.bt-body .bt-eb2{margin:var(--sp-7) 0 var(--sp-4)}
.bt-body .bt-eb2:first-child{margin-top:0}
.bt-body .bt-wahl:first-of-type,.bt-body .tm-wert:first-of-type,
.bt-body .tm-tzeile:first-of-type,.bt-body .tm-tage,.bt-body .tm-leer{margin-top:0}
.bt-body .tm-fuss{margin-top:var(--sp-4)}
/* Tageszeile flacher — Kachel wie im Mockup, nicht wie ein Kasten. */
.tm-tzeile{padding:8px 12px;margin-top:var(--sp-3)}
.tm-tzeile .tag{width:34px;height:34px;border-radius:11px}
/* "bis" sitzt eng zwischen den Zeiten, die Felder tragen keine Extra-Breite. */
.tm-tzeile input{width:auto;min-width:0;padding:0 2px;font-size:var(--fs-val)}
.tm-tzeile label{display:flex}
.tm-tzeile i{margin:0 2px}
.tm-haupt{margin-top:var(--sp-7)}

/* Tag und Zeit als zwei Kacheln nebeneinander — die Zeile selbst traegt keine Flaeche. */
.bt-body .tm-tzeile{background:none;border-radius:0;padding:0;gap:var(--sp-3);align-items:stretch}
.bt-body .tm-tzeile .tag{width:auto;min-width:58px;height:auto;border-radius:16px;
  background:var(--kachel);color:var(--hl-text);font-size:var(--fs-val);font-weight:800;padding:12px 0}
.bt-body .tm-tzeile .zeit{flex:1;display:flex;align-items:center;gap:var(--sp-2);
  background:var(--kachel);border-radius:16px;padding:12px 14px}
.bt-body .tm-tzeile .zeit em{font-style:normal;font-size:var(--fs-sub);color:var(--muted)}

/* Bewegung in Karten: EINE Regel fuer alles Neue — dieselbe wie beim Seitenwechsel im
   Profil (pfReinVor). Gedrueckte Flaechen antworten ueber die Farbe, nicht ueber Wackeln. */
.bt-body .tm-tzeile.neu{animation:pfReinVor .24s ease both}
.tm-wtag,.bt-body .bt-wahl,.tm-men.kachel,.tm-haupt,.tm-zaehl button{
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.tm-wtag:active,.bt-body .bt-wahl:active,.tm-men.kachel:active{background:var(--kachel-fest)}
.tm-wtag.an:active{background:var(--hl)}
.bt-body .bt-haken{transition:background .2s ease,border-color .2s ease}
.bt-body .bt-haken svg{transition:opacity .18s ease}
.bt-body .bt-haken:not(.an) svg{opacity:0}


/* Abgemeldet ist die Ausnahme: roter Ring um die Kachel, Name tritt zurueck. */
.tm-wer .tm-kopf{transition:box-shadow .22s ease,opacity .22s ease}
.tm-wer .tm-kopf.ab{box-shadow:0 0 0 1.5px var(--bad)}
.tm-wer .tm-kopf.ab b{color:var(--muted)}

/* Unterkarten: Kopf im Inhalt wie im Profil — Zurueck-Zeile, Titel, Unterzeile. */
.pf-wrap.bt .pf-top{padding:0 var(--edge)}
.pf-wrap.bt .pf-title{padding:var(--sp-5) var(--edge) 0}
.pf-wrap.bt .bt-unter{padding:0 var(--edge);margin-top:var(--sp-1);
  font-size:var(--fs-sub);color:var(--muted)}
.pf-wrap.bt .bt-body{padding-top:var(--sp-7)}

/* Die Einstellungs-Karte hat eine Deckelhoehe wie jede andere — sie fuhr sonst bis oben. */
.pf-wrap.bt .pf-sheet{height:auto;max-height:88%}
.pf-wrap.bt .pf-body{flex:0 1 auto}


/* ═══ Spieltag planen (195b) ═══ */
.sp-plan .sp-duell{display:flex;align-items:flex-start;justify-content:center;gap:var(--sp-5);padding-top:var(--sp-6)}
/* Feld-Slots und Bank-Spieler: kein natives Touch-Scrollen beim Ziehen. */
.sp-plan .sp-slot,.sp-plan .sp-mann{touch-action:none}
/* Der Geist haengt am Finger. */
.sp-geist{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);opacity:.9}
.sp-geist .k{width:44px;height:44px;border-radius:999px;overflow:hidden;border:2px solid var(--hl);
  background:#141922;display:flex;align-items:center;justify-content:center}
.sp-geist .k img{width:100%;height:100%;object-fit:cover}
.sp-geist .k i{font-style:normal;font-size:var(--fs-eb);font-weight:800;color:var(--ink)}
.sp-plan .sp-slot.ziel::before{border-color:var(--hl);border-style:solid;box-shadow:0 0 0 4px color-mix(in srgb,var(--hl) 30%,transparent)}
.sp-plan .sp-duell .s{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);width:92px}
.sp-plan .sp-duell .w{width:52px;height:52px;border-radius:999px;background:var(--kachel);
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.sp-plan .sp-duell .w img{display:block;width:40px;height:40px;object-fit:contain}
.sp-plan .sp-duell .w .ini{font-size:var(--fs-sub);font-weight:800;color:var(--muted)}
.sp-plan .sp-duell u{text-decoration:none;font-size:var(--fs-mini);font-weight:700;color:var(--muted);text-align:center;line-height:1.25}
.sp-plan .sp-duell .kick{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--kachel);
  border-radius:16px;padding:8px 16px;margin-top:2px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.sp-plan .sp-duell .kick i{font-style:normal;font-size:var(--fs-mini);font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.sp-plan .sp-duell .kick b{font-size:var(--fs-lead);font-weight:800;letter-spacing:-.4px;line-height:1;color:var(--hl-text)}
.sp-plan .sp-chips{display:flex;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;padding-top:var(--sp-5)}
.sp-plan .sp-chips .c{background:var(--kachel);border-radius:999px;padding:7px 13px;
  font-size:var(--fs-eb);font-weight:700;color:var(--muted)}
.sp-plan .sp-chips .c.rolle{color:var(--hl-text);font-weight:800}
.sp-plan .sp-zeile{display:flex;align-items:center;gap:var(--sp-4)}
.sp-plan .sp-zeile .pf-in{flex:1;margin-top:0}
.sp-plan .sp-zeile .hint{font-size:var(--fs-sub);color:var(--muted);flex-shrink:0}
.sp-plan .sp-sys{display:flex;gap:var(--sp-3)}
.sp-plan .sp-chip{background:var(--kachel);border:0;border-radius:999px;padding:8px 14px;
  font:700 var(--fs-sub) var(--f);color:var(--muted);cursor:pointer}
.sp-plan .sp-chip.on{background:var(--hl);color:var(--hl-ink);font-weight:800}
.sp-plan .sp-feld{position:relative;height:330px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#2e7d46,#276b3c)}
.sp-plan .sp-linie{position:absolute;pointer-events:none}
.sp-plan .sp-linie.aussen{inset:10px;border:2px solid rgba(255,255,255,.5);border-radius:8px}
.sp-plan .sp-linie.raum{left:50%;top:10px;transform:translateX(-50%);width:120px;height:52px;border:2px solid rgba(255,255,255,.5);border-top:0}
.sp-plan .sp-linie.mitte{left:10px;right:10px;top:calc(50% + 20px);border-top:2px solid rgba(255,255,255,.35)}
.sp-plan .sp-linie.kreis{left:50%;top:calc(50% + 20px);transform:translate(-50%,-50%);width:52px;height:52px;border:2px solid rgba(255,255,255,.35);border-radius:999px}
.sp-plan .sp-slot{position:absolute;transform:translate(-50%,-50%);width:48px;min-height:48px;
  background:transparent;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.sp-plan .sp-slot::before{content:"";width:44px;height:44px;border-radius:999px;border:2px dashed rgba(255,255,255,.45)}
.sp-plan .sp-slot.frei::before{border-color:var(--hl);border-style:solid}
.sp-plan .sp-slot.voll::before{content:none}
.sp-plan .sp-slot .k{width:44px;height:44px;border-radius:999px;overflow:hidden;border:2px solid var(--hl);
  background:#141922;display:flex;align-items:center;justify-content:center}
.sp-plan .sp-slot .k img{width:100%;height:100%;object-fit:cover}
.sp-plan .sp-slot .k i{font-style:normal;font-size:var(--fs-eb);font-weight:800;color:var(--ink)}
.sp-plan .sp-slot u{text-decoration:none;font-size:10.5px;font-weight:700;color:#eaf6ee;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.sp-plan .sp-hinweis{font-size:var(--fs-sub);color:var(--muted);line-height:1.5;padding-top:var(--sp-1)}
.sp-plan .sp-bank{display:flex;gap:var(--sp-4);overflow-x:auto;padding-bottom:var(--sp-2)}
.sp-plan .sp-mann{flex-shrink:0;width:56px;background:transparent;border:0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.sp-plan .sp-mann .k{width:44px;height:44px;border-radius:999px;overflow:hidden;border:2px solid rgba(255,255,255,.25);
  background:var(--kachel);display:flex;align-items:center;justify-content:center}
.sp-plan .sp-mann.on .k{border-color:var(--hl)}
.sp-plan .sp-mann .k img{width:100%;height:100%;object-fit:cover}
.sp-plan .sp-mann .k i{font-style:normal;font-size:var(--fs-eb);font-weight:800;color:var(--ink)}
.sp-plan .sp-mann u{text-decoration:none;font-size:var(--fs-mini);font-weight:700;color:var(--muted)}
.sp-plan .sp-mann.on u{color:var(--ink)}
.sp-plan .sp-leer{border:1px solid var(--line);border-radius:16px;padding:14px;
  font-size:var(--fs-body);color:var(--muted)}

/* Zahnrad-Emoji in der Kopfzeile */
.tm-verw .emoji{font-style:normal;font-size:34px;line-height:1}
.tm-verw .emoji + svg{display:none}

/* Sportart-Emoji vor der Unterschrift */
.scr-unter .emoji{font-style:normal;font-size:12px;line-height:1;margin-right:2px}

/* ═══ Training planen (241a/b/c) — Karte von unten ═══ */
.tp-plan{display:block}
.tp-eb{font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;
  color:var(--hl-text);margin:var(--sp-6) 0 var(--sp-4);display:flex;align-items:center;justify-content:space-between}
.tp-plan > .tp-eb:first-child{margin-top:0}
.tp-plus{position:relative;width:26px;height:26px;border:1.5px solid var(--hl);border-radius:50%;flex-shrink:0}
.tp-plus::before,.tp-plus::after{content:"";position:absolute;left:50%;top:50%;background:var(--hl);transform:translate(-50%,-50%)}
.tp-plus::before{width:11px;height:2px}
.tp-plus::after{width:2px;height:11px}
.tp-karte{background:var(--card);border-radius:16px;overflow:hidden;margin-bottom:var(--sp-5);
  box-shadow:var(--kachel-schatten)}
.tp-bild{aspect-ratio:16/9;background:var(--kachel);overflow:hidden}
.tp-bild img,.tp-bild video{width:100%;height:100%;object-fit:cover;display:block}
.tp-unten{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 14px 0}
.tp-tx{min-width:0;flex:1}
.tp-tx b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--ink);line-height:1.2}
.tp-tx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:2px}
.tp-text{margin:var(--sp-4) 14px 0;border-top:1px solid var(--line);padding:var(--sp-4) 0 14px}
.tp-text p{font-size:var(--fs-sub);color:var(--ink);line-height:1.5;opacity:.86}
.tp-mehr{display:block;font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);
  text-transform:uppercase;color:var(--hl-text);margin-top:var(--sp-3)}
.tp-info{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:var(--edge);background:rgba(8,9,11,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:tpAuf .2s ease}
.tp-infokarte{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);width:100%;
  max-height:80%;overflow-y:auto;padding:var(--sp-6);animation:tpFenster .22s cubic-bezier(.32,1.15,.5,1)}
@keyframes tpAuf{from{opacity:0}}
@keyframes tpFenster{from{opacity:0;transform:translateY(12px) scale(.98)}}
.tp-infokopf{display:flex;align-items:flex-start;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.tp-infokopf b{flex:1;font-size:var(--fs-lead);font-weight:800;letter-spacing:-.45px;line-height:1.2}
.tp-infokopf button{width:28px;height:28px;border-radius:50%;background:var(--kachel);color:var(--muted);
  font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tp-infokarte .eb{font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;
  color:var(--hl-text);margin:var(--sp-6) 0 var(--sp-4)}
.tp-infokarte p{font-size:var(--fs-body);line-height:1.6;color:var(--ink)}
.tp-infokarte ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.tp-infokarte li{font-size:var(--fs-body);line-height:1.5;padding-left:18px;position:relative;color:var(--ink)}
.tp-infokarte li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--hl)}
/* Ablauf in der Detailansicht */
.dt-ablauf{display:flex;flex-direction:column;gap:var(--sp-3)}
.dt-abl{display:flex;align-items:center;gap:var(--sp-4);background:var(--card);border-radius:14px;
  overflow:hidden;padding-right:14px;box-shadow:var(--kachel-schatten)}
.dt-abl .b{width:78px;aspect-ratio:16/9;background:var(--kachel);flex-shrink:0;overflow:hidden}
.dt-abl .b img{width:100%;height:100%;object-fit:cover;display:block}
.dt-abl .t{min-width:0;padding:var(--sp-2) 0}
.dt-abl .t b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-abl .t i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted)}
.tp-rund{width:32px;height:32px;border:1px solid var(--line-stark);border-radius:50%;color:var(--hl-text);
  font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tp-rund.rot{color:var(--bad)}
.tp-leer{border:1px dashed var(--line-stark);border-radius:16px;padding:var(--sp-5);text-align:center;
  font-size:var(--fs-sub);color:var(--muted)}
.tp-pille{display:block;width:100%;border:1px solid var(--line-stark);border-radius:999px;padding:12px 0;
  text-align:center;font-size:var(--fs-sub);font-weight:700;color:var(--ink);margin-top:var(--sp-3)}
.tp-pille.voll{background:var(--hl);border-color:var(--hl);color:var(--hl-ink);font-weight:800;
  font-size:var(--fs-body);margin-top:var(--sp-7)}
/* Auswahl-Liste (243a mit Themenabschnitten) */
.tp-karte.wahl{display:block;width:100%;text-align:left;padding:0}
.tp-wtx{display:block;padding:var(--sp-4) 14px}
.tp-wtx b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--ink);line-height:1.2}
.tp-wtx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);line-height:1.45;margin-top:2px}
.tp-text{margin:var(--sp-4) 14px 0;border-top:1px solid var(--line);padding:var(--sp-4) 0 14px}
.tp-text p{font-size:var(--fs-sub);color:var(--ink);line-height:1.5;opacity:.86}
.tp-mehr{display:block;font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);
  text-transform:uppercase;color:var(--hl-text);margin-top:var(--sp-3)}
.tp-info{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:var(--edge);background:rgba(8,9,11,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:tpAuf .2s ease}
.tp-infokarte{background:var(--card);border-radius:var(--r-card);box-shadow:var(--shadow);width:100%;
  max-height:80%;overflow-y:auto;padding:var(--sp-6);animation:tpFenster .22s cubic-bezier(.32,1.15,.5,1)}
@keyframes tpAuf{from{opacity:0}}
@keyframes tpFenster{from{opacity:0;transform:translateY(12px) scale(.98)}}
.tp-infokopf{display:flex;align-items:flex-start;gap:var(--sp-4);margin-bottom:var(--sp-4)}
.tp-infokopf b{flex:1;font-size:var(--fs-lead);font-weight:800;letter-spacing:-.45px;line-height:1.2}
.tp-infokopf button{width:28px;height:28px;border-radius:50%;background:var(--kachel);color:var(--muted);
  font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tp-infokarte .eb{font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;
  color:var(--hl-text);margin:var(--sp-6) 0 var(--sp-4)}
.tp-infokarte p{font-size:var(--fs-body);line-height:1.6;color:var(--ink)}
.tp-infokarte ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.tp-infokarte li{font-size:var(--fs-body);line-height:1.5;padding-left:18px;position:relative;color:var(--ink)}
.tp-infokarte li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--hl)}
/* Ablauf in der Detailansicht */
.dt-ablauf{display:flex;flex-direction:column;gap:var(--sp-3)}
.dt-abl{display:flex;align-items:center;gap:var(--sp-4);background:var(--card);border-radius:14px;
  overflow:hidden;padding-right:14px;box-shadow:var(--kachel-schatten)}
.dt-abl .b{width:78px;aspect-ratio:16/9;background:var(--kachel);flex-shrink:0;overflow:hidden}
.dt-abl .b img{width:100%;height:100%;object-fit:cover;display:block}
.dt-abl .t{min-width:0;padding:var(--sp-2) 0}
.dt-abl .t b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-abl .t i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted)}
.tp-rund{width:32px;height:32px;border:1px solid var(--line-stark);border-radius:50%;color:var(--hl-text);
  font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.tp-rund.rot{color:var(--bad)}
.tp-leer{border:1px dashed var(--line-stark);border-radius:16px;padding:var(--sp-5);text-align:center;
  font-size:var(--fs-sub);color:var(--muted)}
.tp-pille{display:block;width:100%;border:1px solid var(--line-stark);border-radius:999px;padding:12px 0;
  text-align:center;font-size:var(--fs-sub);font-weight:700;color:var(--ink);margin-top:var(--sp-3)}
.tp-pille.voll{background:var(--hl);border-color:var(--hl);color:var(--hl-ink);font-weight:800;
  font-size:var(--fs-body);margin-top:var(--sp-7)}
/* Auswahl-Liste */
.tp-wahlkopf{margin:var(--sp-6) 0 var(--sp-4)}
.tp-wahlkopf b{display:block;font-size:var(--fs-lead);font-weight:800;letter-spacing:-.45px}
.tp-wahlkopf i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted)}
.tp-chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:var(--sp-4);scrollbar-width:none}
.tp-chips::-webkit-scrollbar{display:none}
.tp-chip{border:1px solid var(--line-stark);border-radius:999px;padding:6px 14px;font-size:var(--fs-eb);
  font-weight:700;color:var(--muted);white-space:nowrap;flex-shrink:0}
.tp-chip.an{background:var(--hl);border-color:var(--hl);color:var(--hl-ink);font-weight:800}
.tp-zeile{display:flex;align-items:center;gap:var(--sp-4);width:100%;text-align:left;background:var(--card);
  border-radius:16px;overflow:hidden;margin-bottom:var(--sp-3);padding-right:14px;box-shadow:var(--kachel-schatten)}
.tp-zeile .b{width:92px;aspect-ratio:16/9;background:var(--kachel);flex-shrink:0;overflow:hidden}
.tp-zeile .b img{width:100%;height:100%;object-fit:cover;display:block}
.tp-zeile .t{min-width:0;padding:var(--sp-2) 0}
.tp-zeile .t b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-zeile .t i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted)}