/* ═══ v2 · termin.css — Karte von unten für einen Termin (Konzept 109a/b/c).
   Huelle, Griff und Wischen kommen aus profil.css; Meta-Zeile, Begegnung und die
   Umschalter-Chips aus home.css. Hier steht nur, was die Detailkarte selbst braucht.
   Nur Werte aus tokens.css: Leiter 2/4/8/12/16/20/24/32, Skala mini…zahl. ═══ */

/* Kopfzeile: Nachschlagen, also nur der Titel mittig (73a) */
.dt-kopf{padding:0 var(--edge)}
.dt-titel{display:block;text-align:center;font-size:var(--fs-row);font-weight:800;color:var(--ink)}
/* Girlande haengt ueber dem Wort — Spieltreff, Turnier, Kinderfest */
.dt-gar{position:relative;height:34px;margin-bottom:10px}
.dt-gar svg{position:absolute;top:0;left:0;width:100%;height:34px;pointer-events:none}

/* Erste Zeile sitzt wie in Profil 4 unter der 66er-Kopfzeile. */
.dt-body{padding:var(--sp-2) var(--edge) var(--sp-7)}
/* Meta-Zeile: Sportart-Badge links, Kind-Pille rechts — die Pillen der Timeline. */
.dt-meta{display:flex;align-items:center;gap:var(--sp-3)}
.dt-meta .hm-sportbadge{padding:4px 10px;margin-left:0;gap:6px}
.dt-meta .hm-sportbadge b{font-size:13.25px;color:var(--c)}
.dt-meta .hm-sportbadge .hm-sport{position:static;transform:none;width:17px;height:17px}
.dt-meta + .dt-top{margin-top:var(--sp-5)}
/* Kopf: Wappen links neben Titel und Unterzeile; Kind-Pille ganz rechts in der Meta-Zeile. */
.dt-meta{justify-content:space-between}
.dt-top.mit-wappen{justify-content:flex-start;align-items:center;gap:var(--sp-4)}
.dt-wap{width:44px;height:44px;object-fit:contain;flex-shrink:0;align-self:center}
/* Das Hoetmar-Wappen haengt in der Datei leicht hoch/links — derselbe Ausgleich wie in der Timeline. */
.dt-wap[src*="schoetmar"]{transform:translate(1px,2px)}
.dt-top + .dt-felder{margin-top:var(--sp-6)}

/* Gastgeber-Zeile mit Verlaufs-Pille (wie in der Timeline) */
.dt-fest{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-4)}
.dt-fest img{width:46px;height:46px;object-fit:contain;flex-shrink:0}
.dt-ini{width:46px;height:46px;border-radius:999px;background:var(--field);border:1px solid var(--line);
  color:var(--muted);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dt-badge{font-size:12.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#1a1a18;
  background:linear-gradient(90deg,#8fd9b6,#f5a83c,#e0533f,#8fbfe8);border-radius:999px;padding:7px 15px}

/* Titel und Unterzeile der Karte */
.dt-lead{font-size:var(--fs-lead);font-weight:800;letter-spacing:-.45px;color:var(--ink);margin-top:var(--sp-6);line-height:1.15}
.dt-sub{font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}

/* Kachel: Werte gehoeren zusammen — Rand und Radius, KEINE eigene Flaeche */
.dt-kachel{display:flex;border:1px solid var(--line);border-radius:16px;margin-top:var(--sp-6)}
.dt-kachel > div{flex:1;min-width:0;padding:var(--sp-4) 0;text-align:center}
.dt-kachel i{font-style:normal;display:block;font-size:var(--fs-mini);font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:var(--muted)}
.dt-kachel b{display:block;font-size:var(--fs-val);font-weight:700;color:var(--ink);margin-top:var(--sp-1)}
.dt-kachel b.gelb{color:var(--hl-text)}
.dt-tr{width:1px;background:var(--line);margin:var(--sp-4) 0;flex-shrink:0}

/* Abschnittsueberschrift: immer Vereinsgelb, 24 darueber, 12 darunter */
.dt-eb{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)}

/* Teilnahme: der Umschalter aus 107b, ueber die ganze Breite */
.dt-acts{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.dt-acts .hm-chip{flex:1;justify-content:center;padding:9px 0;font-size:var(--fs-body)}
.dt-acts .hm-chip svg{width:14px;height:14px}

/* Zeile: Titel plus Unterzeile, rechts eine Handlung */
.dt-zeile{display:flex;align-items:center;gap:var(--sp-4);padding:var(--row-y) 0;border-bottom:1px solid var(--line)}
.dt-tx{flex:1;min-width:0}
.dt-tx b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--ink)}
.dt-tx i{font-style:normal;display:block;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.dt-tx i.gelb{color:var(--hl-text)}
.dt-av{width:42px;height:42px;border-radius:999px;background:var(--field);border:1px solid var(--line);
  color:var(--muted);font-size:var(--fs-eb);font-weight:800;letter-spacing:1px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dt-av.ich{background:var(--hl);border-color:var(--hl);color:var(--hl-ink)}

/* Ort: Symbolkachel oben an der ersten Textzeile, nicht mittig */
.dt-ort{display:flex;align-items:flex-start;gap:var(--sp-4);margin-top:var(--sp-4)}
.dt-ic{width:30px;height:30px;border-radius:10px;background:var(--field);border:1px solid var(--hl);
  color:var(--hl-text);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dt-ic svg{width:15px;height:15px}
.dt-ic{font-size:15px;line-height:1}
.dt-rundic{font-size:17px;line-height:1}
.dt-breit{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.dt-breit .dt-pill{flex:1;text-align:center}

/* Knopfleiter 107a: gelber Rand = Handlung am Element · grauer Rand = Nebenweg · rot = abgeben */
.dt-pill{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border:1px solid var(--line);border-radius:999px;background:transparent;
  padding:8px 16px;color:var(--muted);font:600 var(--fs-body)/1.2 var(--f);text-decoration:none}
.dt-pill.hl{border:1.5px solid var(--hl);color:var(--ink);font-weight:700}
.dt-pill.rot{border:1.5px solid var(--bad);color:var(--bad);font-weight:700}
.dt-zeile .dt-pill{padding:6px 14px;font-size:var(--fs-eb);font-weight:700}

/* Hinweis der Trainer: Kachel mit Rand, Text und Herkunft */
.dt-note{border:1px solid var(--line);border-radius:16px;padding:var(--sp-4);margin-top:var(--sp-4)}
.dt-note-tx{font-size:var(--fs-body);line-height:1.55;color:var(--ink);text-wrap:pretty}
.dt-note-von{font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-3)}

/* Kalender als Kachel-Pille ueber die volle Breite (wie 210a). */
.dt-fuss{display:flex;margin-top:var(--sp-7)}
.dt-fuss .dt-pill{flex:1;background:var(--kachel);border:0;padding:13px 0;
  font-weight:700;color:var(--hl-text)}
.dt-fuss .dt-pill:active{background:var(--kachel-fest)}

/* ── 210a: Trainings-Detail im Karten-Konzept ──────────────────────────────── */
/* Kopf: Titel + Unterzeile links (wie jede Card), Datumsblock rechts. */
/* Meta-Zeile und Datumsblock in einer Flucht, der Titel folgt mit 16 (Gruppe). */
.dt-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.dt-kopfzeile .hm-meta{margin:0}
.dt-kopfzeile + .dt-top{margin-top:var(--sp-5)}
.dt-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
.dt-top-tx{min-width:0}
.dt-top-tx b{display:block;font-size:var(--fs-lead);font-weight:800;letter-spacing:-.45px;color:var(--ink)}
.dt-top-tx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.dt-datum{flex-shrink:0;background:var(--kachel);border-radius:12px;padding:7px 12px;
  display:flex;flex-direction:column;align-items:center;gap:1px}
.dt-datum i{font-style:normal;font-size:var(--fs-mini);font-weight:800;letter-spacing:1px;color:var(--muted)}
.dt-datum b{font-size:var(--fs-val);font-weight:700;line-height:1;color:var(--hl-text)}
/* Datenfelder: Beginn/Ende als zwei Kacheln, Beginn in Gelb. */
.dt-felder{display:flex;gap:var(--sp-3);margin-top:var(--sp-6)}
.dt-felder + .dt-felder{margin-top:var(--sp-3)}   /* Datum -> Beginn/Ende: ein Datenblock */
.dt-feld{flex:1;min-width:0;background:var(--kachel);border-radius:16px;padding:12px 14px}
.dt-feld i{font-style:normal;display:block;font-size:var(--fs-mini);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.dt-feld b{display:block;font-size:var(--fs-val);font-weight:700;color:var(--ink);margin-top:var(--sp-1)}
.dt-feld b.gelb{color:var(--hl-text)}
.dt-feld i.gelb{color:var(--hl-text)}
/* Heim/Gast: standardmaessig exakt 50/50 (flex-basis 0). Passt ein Name nicht, haelt
   min-width:max-content seine Kachel auf Namensbreite — die andere gibt den Platz her,
   nichts bricht um. */
.dt-felder.paar .dt-feld{min-width:max-content}
.dt-felder.paar .dt-feld b{white-space:nowrap}
/* Tippbare Zeilen-Kachel (Ort): Symbol-Kreis, Titel + Unterzeile, stiller Pfeil. */
button.dt-zeile{width:100%;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.dt-zeile.tipp{background:var(--kachel);border:0;border-radius:16px;padding:10px 14px}
.dt-zeile.tipp:active{background:var(--kachel-fest)}
.dt-rundic{width:38px;height:38px;border-radius:999px;background:color-mix(in srgb,var(--hl) 12%,transparent);
  color:var(--hl-text);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dt-rundic svg{width:17px;height:17px}
.dt-chev{color:var(--muted);flex-shrink:0}
.dt-chev svg{width:15px;height:15px;display:block}
/* Ortseite: Kartenausschnitt in der Kachelrundung, Adresse als Erklaerzeile (4). */
.dt-map{border-radius:16px;overflow:hidden;margin-top:var(--sp-6);background:var(--kachel)}
.dt-map iframe{display:block;width:100%;height:280px;border:0}
/* Ort-Kachel im Bauplan der Timeline-Cards: Karte oben, Ortszeile unten auf der Flaeche.
   Google liefert das Embed nur hell — der Filter dreht es in die Nacht (invertiert und
   zurueckgefaerbt), damit es zur App passt. */
.dt-ortkachel{background:var(--kachel);border-radius:16px;overflow:hidden}
.dt-map.klein{margin-top:0;border-radius:16px 16px 12px 12px}
.dt-map.klein iframe{height:170px}
.dt-ortzeile{display:flex;align-items:center;gap:var(--sp-4);padding:12px 14px}
.dt-ortzeile .dt-rundic{width:auto;height:auto;background:none;border-radius:0}
.dt-ortzeile .dt-tx b{font-size:var(--fs-row)}
.dt-map-sub{font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-2)}
.dt-breit{margin-top:var(--sp-5)}

/* Spieltreff-Kopf: "Gastgeber:" traegt Gewicht, Rest der Zeile bleibt Beiwerk. */
.dt-fettwort{text-decoration:none;font-weight:700;color:var(--muted)}
/* Pillen in der Kopfzeile der Karte — dekorativ, exakt im Mass der Zurueck/Weiter-Pillen. */
.dt .pf-fest.pillen{pointer-events:none}
.dt-kopfpill{display:inline-flex;align-items:center;font:800 var(--fs-sub)/1 var(--f);
  letter-spacing:.4px;text-transform:uppercase;padding:9px 15px;border-radius:999px;
  border:1px solid transparent;background:var(--hl);color:var(--hl-ink)}
.dt-kopfpill.sp-fuss{--c:var(--sp-fuss-t)}
.dt-kopfpill.sp-tennis{--c:var(--sp-tennis-t)}
.dt-kopfpill.sp-ttennis{--c:var(--sp-ttennis-t)}
.dt-kopfpill.sp-volley{--c:var(--sp-volley-t)}
.dt-kopfpill.sp-breit{--c:var(--sp-breit-t)}
.dt-kopfpill.kind{background:var(--kind-t);color:#10141a}
.dt-kopfpill.kf{color:#1a1a18;background:linear-gradient(90deg,#8fd9b6,#f5a83c,#e0533f,#8fbfe8)}
.dt-kopfpill[class*="sp-"]{background:var(--c);color:#10141a}

/* 217a — Foto randlos bis in die Kopfzeile: das Band beginnt unter dem 66er-Griff
   (negative Oberkante), Griff und Kopf-Pillen liegen im Bild. */
.dt.hat-band .pf-grip{position:absolute;top:0;left:0;right:0}
/* Fester Foto-Kopf: nur das Band belegt Hoehe; die Kopf-Pille haengt darueber hinaus
   und schwebt ueber dem Inhalt — der scrollt unter ihr her und verschwindet erst
   unter der Unterkante des Bildes. */
.dt-kopffest{flex:0 0 auto;position:relative;z-index:2;height:168px}
.dt-band{position:relative;z-index:1;height:168px;
  border-radius:26px 26px 16px 16px;background:var(--field);box-shadow:0 3px 8px rgba(0,0,0,.32)}
.dt-kopffest .dt-kopfpille{position:absolute;left:var(--edge);bottom:-30px;margin:0;z-index:2}
/* Startlage des Inhalts: unterhalb der haengenden Pille (30 Ueberhang + 24) */
.dt-kopffest + .pf-body{padding-top:54px}
.dt-kopffest + .pf-body .dt-body{padding-top:0}
.dt-kopffest + .pf-body .dt-body > .dt-felder:first-child{margin-top:0}
.dt-band.training{background:url("../../img/training.jpg") center 46%/cover}
.dt-band.treff{background:url("../../img/festival.jpg") center 40%/cover}
.dt-kopfpille .w.feld{background:var(--field)}
.dt-kopfpille .w .ini{font-style:normal;font-size:var(--fs-eb);font-weight:800;letter-spacing:1px;color:var(--muted)}
.dt-band::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(10,12,16,.52),rgba(10,12,16,.18) 40%,transparent 62%)}
.dt .pf-grip,.dt .pf-fest{z-index:3}
.dt .pf-grip > span{background:rgba(255,255,255,.62);box-shadow:none}
/* Kapsel um den Griff: dunkler Ausschnitt, damit er auf dem Foto sichtbar bleibt */
.dt.hat-band .pf-grip::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:64px;height:20px;border-radius:999px;
  background:rgba(10,12,16,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dt-band + .dt-body{padding-top:0}
/* EINE Pille: Wappenkreis bildet den linken Abschluss, Titel (Stufe lead) + Unterzeile
   rechts darin — ragt zur Haelfte (30px) ins Bild wie die Pillen der Als-Naechstes-Card. */
.dt-kopfpille{position:relative;z-index:2;display:inline-flex;align-items:center;gap:var(--sp-2);
  max-width:calc(100% - 2 * var(--edge));margin:0 var(--edge);
  background:var(--kachel);border-radius:999px;padding:0 18px 0 0;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.dt-kopfpille .w{width:60px;height:60px;border-radius:999px;margin-left:4px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dt-kopfpille .w img{width:52px;height:52px;object-fit:contain}
.dt-kopfpille .w img[src*="schoetmar"]{transform:translate(1px,2px)}
.dt-kopfpille .tx{min-width:0;padding:var(--sp-3) 0}
.dt-kopfpille .tx b{display:block;font-size:var(--fs-lead);font-weight:800;letter-spacing:-.45px;color:var(--ink)}
.dt-kopfpille .tx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1)}
.dt-kopfpille + .dt-felder{margin-top:var(--sp-6)}

/* 218a — Spieltag: das Duell als EINE Pille, mittig im Bildabschluss. Wappen links und
   rechts auf eigenem rundem Feld, Datum + Anstoss in der Mitte; die Vereinsnamen sitzen
   exakt unter den Wappen (100er-Spannen ragen 15 ueber die Pillenkante: Zentrum =
   5 Polster + halber 60er-Kreis = 35). Pille haengt 35 ins Bild (Top 168 - 35 = 133). */
.dt-band.spiel{background:url("../../img/spieltag.jpg") center 42%/cover}
.dt-kopffest .dt-kopfpille.duell{left:50%;transform:translateX(-50%);bottom:auto;top:133px;width:max-content;
  flex-direction:column;align-items:center;background:transparent;box-shadow:none;padding:0;margin:0;max-width:none}
.dt-kopfpille.duell .in{display:inline-flex;align-items:center;gap:var(--sp-7);background:var(--kachel);
  border-radius:999px;padding:0 5px;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.dt-kopfpille.duell .kick{padding-left:var(--sp-2);padding-right:var(--sp-2)}
.dt-kopfpille.duell .w{margin-left:0;background:var(--field)}
.dt-kopfpille.duell .w img{width:50px;height:50px}
.dt-kopfpille.duell .kick{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--sp-3) 2px}
.dt-kopfpille.duell .kick i{font-style:normal;font-size:var(--fs-mini);font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.dt-kopfpille.duell .kick b{font-size:21px;font-weight:800;letter-spacing:-.4px;line-height:1;color:var(--hl-text)}
/* Startlage des Inhalts unter der haengenden Pille: 35 Ueberhang + 24 */
.dt-kopffest.duell + .pf-body{padding-top:59px}