/* ═══ v2 · home.css — HOME im Look von Mockup 5b ═══
   Kopf (Logo, Begruessung, bei mehreren Kindern der Umschalter) · Als-Naechstes-Karte · Timeline
   mit Datum links, Punkt in Sportartfarbe, Karte fuer Spiele ("Ticket"), flache Zeile sonst. */


/* ---------- Inhalt ---------- */
.hm-body{padding:0 var(--edge)}
/* 37b: Zeitabschnitt eroeffnet einen Block -> gelb */
.hm-eb{font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--hl-text);margin:var(--sp-7) 0 var(--sp-4)}   /* Leiter: 24 darueber, 12 darunter */

/* Meta-Zeile: SPORTART · KIND (farbige Kapitaelchen statt Pillen) */
.hm-meta{display:flex;align-items:center;gap:var(--sp-2);font-size:12.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.hm-meta .sep{color:#787d82}
.hm-meta .sp-fuss{color:var(--sp-fuss-t)}
.hm-meta .sp-tennis{color:var(--sp-tennis-t)}
.hm-meta .sp-ttennis{color:var(--sp-ttennis-t)}
.hm-meta .sp-volley{color:var(--sp-volley-t)}
.hm-meta .sp-breit{color:var(--sp-breit-t)}
.hm-meta .kind{color:var(--kind-t)}
.hm-meta .verein{color:var(--hl-text)}

/* ---------- Als-Naechstes-Karte ---------- */
/* 113c: keine Fuellung mehr — eine Flaeche im ganzen Screen. Was Karte ist, sagt die
   kraeftigere Kante (--line-stark), nicht eine zweite Ebene. */
/* 156b: zwei Zonen. Der Bildstreifen traegt die Pillen, der Inhalt sitzt darunter auf der
   Kachelflaeche — deshalb braucht keine Zeile einen Schatten und kein Schleier das Bild. */
/* 156b: zwei Zonen. Der Bildstreifen traegt die Pillen, der Inhalt sitzt darunter auf der
   Kachelflaeche — deshalb braucht keine Zeile einen Schatten und kein Schleier das Bild. */
.hm-hero{position:relative;background:var(--kachel);border:0;border-radius:20px;
  margin-top:var(--sp-7);box-shadow:var(--kachel-schatten)}
.hm-hero.tr,.hm-hero.kf,.hm-hero.spiel{overflow:hidden}
.hm-band{position:relative;height:150px;border-radius:20px 20px 16px 16px;overflow:hidden;background:var(--field)}
.hm-hero.tr .hm-band{background:url("../../img/training.jpg") center 46%/cover}
.hm-hero.kf .hm-band{background:url("../../img/festival.jpg") center 46%/cover}
.hm-hero.spiel .hm-band{background:url("../../img/spieltag.jpg") center 42%/cover}
/* Nur oben ein Hauch Dunkel, damit die Pillen sicher stehen — sonst bleibt das Bild ganz. */
.hm-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,16,.32) 0%,transparent 46%)}
.hm-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}
.hm-band-r{display:flex;align-items:center;gap:var(--sp-2);flex-shrink:0}
/* Unter dem Bild beginnt die Flaeche ohne Kunstgriff — die Rundung gehoert dem Bild. */
.hm-hero-body{padding:20px 14px 14px}
/* 165d: Inhalt links, Datumsblock rechts oben — Zahl in Vereinsgelb wie in der Timeline. */
.hm-hero-oben{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
.hm-hero-tx{flex:1;min-width:0}
.hm-hero-datum{flex-shrink:0;width:58px;text-align:center;background:rgba(255,255,255,.05);
  border-radius:14px;padding:8px 0}
.hm-hero-datum i{font-style:normal;display:block;font-size:11.25px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.hm-hero-datum b{display:block;font-size:24px;font-weight:800;line-height:1.05;letter-spacing:-.6px;color:var(--hl-text)}
.hm-hero-datum u{display:block;text-decoration:none;font-size:11.25px;font-weight:800;letter-spacing:1px;color:var(--muted)}
/* Ohne Foto behaelt der Streifen nur seine Pillenzeile: keine Hoehe, kein Bild, keine
   Rundung — die Pillen stehen dann direkt auf der Kachelflaeche. */
.hm-hero:not(.tr):not(.kf):not(.spiel) .hm-band{height:auto;border-radius:0;background:none}
.hm-hero:not(.tr):not(.kf):not(.spiel) .hm-band::after{content:none}
.hm-hero:not(.tr):not(.kf):not(.spiel) .hm-band-in{padding:var(--sp-5) var(--sp-5) 0}
.hm-hero:not(.tr):not(.kf):not(.spiel) .hm-hero-body{padding-top:var(--sp-4)}
.hm-hero.kf .hm-kf{margin-top:0;padding-bottom:0}
.hm-hero.kf .hm-kf-badge{font-size:15.75px;padding:0 12px 0 32px;margin-left:17px;min-height:30px}
.hm-hero.kf .hm-kf-badge .wap{left:-26px;width:52px;height:52px}
.hm-hero.kf .hm-kf-badge .wap img{width:47px;height:47px}
.hm-hero .hm-hero-title+.hm-line,.hm-hero.kf .hm-kf+.hm-line,.hm-hero .hm-vs+.hm-line{margin-top:var(--sp-3)}
/* Abriss-Zeile: Rolle links in Kapitaelchen, Wert rechts — wie auf einer Fahrkarte. */
.hm-band-in{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.hm-pill{display:inline-flex;align-items:center;gap:var(--sp-2);border-radius:999px;
  font-size:11.25px;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:5px 11px;flex-shrink:0}
.hm-pill.voll{background:var(--hl);color:var(--hl-ink)}
.hm-pill.kind{background:var(--kind-t);color:#10141a}
.hm-pill svg{width:12px;height:12px}
.hm-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.hm-hero-eb{font-size:12.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--hl-text)}
/* Oben das Datum, darunter der Abstand bis dahin. */
.hm-hero-cd{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-1);text-align:right}
.hm-hero-cd b{font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ink)}
.hm-hero-cd i{display:inline-flex;align-items:center;gap:var(--sp-2);font-style:normal;font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--ok)}
.hm-hero-cd svg{width:13px;height:13px;color:var(--hl-text);flex-shrink:0}
.hm-hero .hm-meta{font-size:12.5px}
/* Zeichen der Sportart links neben dem Kartentitel — dieselbe Ordnung wie in der Zeile. */
.hm-hero-title{display:flex;align-items:center;gap:var(--sp-3)}
/* 166a: Zeichen und Wort als eine Badge — Flaeche nur ein Hauch der Sportartfarbe,
   Zeichen per Maske eingefaerbt (bunt waeren es drei Gruentoene auf einem Fleck). */
.hm-sportbadge{position:relative;display:inline-flex;align-items:center;border-radius:999px;
  padding:5px 12px 5px 26px;margin-left:18px;min-height:26px;
  background:color-mix(in srgb, var(--c) 16%, transparent)}
.hm-sportbadge b{font-size:15.75px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--c)}
.hm-sportbadge .hm-sport{position:absolute;left:-18px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;flex-shrink:0;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))}
.hm-sportbadge.sp-fuss{--c:var(--sp-fuss-t);--q:url("../../img/sport-fuss.svg")}
.hm-sportbadge.sp-tennis{--c:var(--sp-tennis-t);--q:url("../../img/sport-tennis.svg")}
.hm-sportbadge.sp-ttennis{--c:var(--sp-ttennis-t);--q:url("../../img/sport-ttennis.svg")}
.hm-sportbadge.sp-volley{--c:var(--sp-volley-t);--q:url("../../img/sport-volley.svg")}
.hm-sportbadge.sp-breit{--c:var(--sp-breit-t);--q:url("../../img/sport-breit.svg")}
/* Kleiner in den Zeilen — dort ist die Badge Beiwerk, nicht Auftritt. */
.hm-flat-head .hm-sportbadge{padding:4px 10px;margin-left:0;gap:6px}
.hm-flat-head .hm-sportbadge b{font-size:13.25px;color:var(--c)}
.hm-flat-head .hm-sportbadge .hm-sport{position:static;transform:none;width:17px;height:17px}
.hm-hero-title b{font-size:21px;font-weight:800;letter-spacing:-.45px;line-height:1.1;color:var(--ink);min-width:0}
.hm-hero-title .hm-sportbadge b{font-size:15.75px;letter-spacing:.4px;color:var(--c)}
.hm-hero-title .hm-sportbadge{padding:5px 12px;margin-left:0;min-height:30px;gap:7px}
.hm-hero-title .hm-sportbadge .hm-sport{position:static;transform:none;width:19px;height:19px}
/* 117a — die Uhrzeit fuehrt: eine grosse Kennzahl, Farbe sagt die Bedeutung (Gelb = Marke).
   Der Titel steht dann klein darunter, nicht mehr als Kartentitel. */
.hm-zahl{display:flex;align-items:baseline;gap:var(--sp-3);margin-top:var(--sp-6)}
.hm-zahl+.hm-line{margin-top:var(--sp-4)}
.hm-zahl b{font-size:24px;font-weight:800;letter-spacing:-.6px;line-height:1;margin-bottom:-5px;color:var(--hl-text)}
.hm-zahl i{font-style:normal;font-size:13.25px;line-height:1;color:var(--muted)}
.hm-hero-title .hm-sport{width:23px;height:23px;flex-shrink:0}

/* Begegnung: Wappen \u2013 Anstoss \u2013 Wappen */
.hm-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:var(--sp-3);margin-top:var(--sp-4)}
.hm-club{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-width:0}
.hm-club img{width:56px;height:56px;object-fit:contain}
.hm-club .ini{width:48px;height:48px;border-radius:999px;background:var(--field);color:var(--muted);
  font-size:13.25px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hm-club span{font-size:12.5px;font-weight:600;color:var(--muted);text-align:center;line-height:1.25;text-wrap:pretty}
.hm-kick{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);padding-top:var(--sp-4)}
.hm-kick i{font-style:normal;font-size:11.25px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.hm-kick b{font-size:15.75px;font-weight:800;color:var(--hl-text)}
/* 120b — in der Zeile ist die Zeit Inhalt (weiss); in der Karte oben bleibt sie die eine
   gelbe Kennzahl. Das Uhr-Symbol ist ueberall gefallen. */
.hm-row.spiel .hm-kick b{color:var(--ink)}
/* 121 — Zeit eine Zeile unter dem Badge, im Aufbau der Als-Naechstes-Karte: Beginn gross
   und gelb, Ende klein daneben. In der Zeile eine Stufe kleiner als in der Karte. */
.hm-hero .hm-zahl.hm-fest-zeit b{font-size:24px;letter-spacing:-.6px;margin-bottom:-5px}
.hm-hero .hm-zahl.hm-fest-zeit i{font-size:13.25px}
.hm-row.ab .hm-fest-zeit b{color:var(--muted)}
.hm-hero .hm-vs+.hm-line{margin-top:var(--sp-4)}

/* Zusatzangaben (Ort, Dienst) */
.hm-duty{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:12.5px;font-weight:700;
  background:color-mix(in srgb, var(--hl) 14%, transparent);color:var(--hl-text);border-radius:10px;padding:6px 10px;margin-top:var(--sp-3)}
.hm-duty i{font-style:normal;font-size:11.25px;font-weight:800;letter-spacing:1px;background:var(--hl);color:var(--hl-ink);
  padding:1px 5px;border-radius:4px}

/* Rueckmeldung */
.hm-acts{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.hm-acts .hm-chip{flex:1;justify-content:center}
.hm-act{flex:1;display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:700;
  border-radius:999px;padding:8px 0;color:var(--ink);border:1.5px solid var(--hl);background:transparent}
/* Auf der offenen Flaeche war Grau zu wenig: weisse Schrift, hellere Kante — Gelb gegen
   Weiss ist Rangfolge genug. */
.hm-act.ghost{font-weight:600;color:var(--ink);border:1px solid var(--line-stark)}
/* Umschalter in Kartengroesse: gewaehlte Seite mit Rand, andere grau und tippbar. */
.hm-act{gap:var(--sp-3)}
.hm-act svg{width:15px;height:15px;flex-shrink:0}
.hm-act.an{border:1.5px solid var(--hl);color:var(--ink);background:none}
.hm-act.an svg{color:var(--hl)}
.hm-act.aus{border:1px solid var(--line-stark);color:var(--muted);font-weight:600;background:none}
.hm-act.weg{border:1.5px solid var(--bad);color:var(--bad);background:none}
/* Umschalter Dabei | Absagen (107b) — gewaehlte Seite mit Rand, andere Seite grau.
   Kein gefuellter Knopf in einer Liste; gefuellt bleibt dem einen Hauptknopf vorbehalten. */
.hm-chip{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:12.5px;font-weight:700;
  border-radius:999px;padding:6px 14px;background:transparent;position:relative}
.hm-chip svg{width:13px;height:13px;flex-shrink:0}
.hm-chip.an{border:1.5px solid var(--hl);color:var(--ink)}
.hm-chip.an svg{color:var(--hl)}
.hm-chip.aus{border:1px solid var(--line);color:var(--muted);font-weight:600}
.hm-chip.weg{border:1.5px solid var(--bad);color:var(--bad)}
.hm-chip::after{content:"";position:absolute;inset:-9px 0}   /* 44px Trefferfeld */

/* ---------- Timeline ---------- */
/* 146c: Termin-Kachel statt Zeitstrahl — Datum links, Haarlinie, Inhalt.
   Gefuellte Flaeche, damit lange Listen in Haeppchen zerfallen statt in eine Textwand. */
/* 151b: Datumsspalte links, Karte rechts — die Daten laufen in einer Flucht. */
.hm-zeile{display:flex;align-items:flex-start;gap:var(--sp-3)}
.hm-zeile + .hm-zeile{margin-top:var(--sp-4)}
.hm-zeile.weiter{margin-top:var(--sp-2)}   /* zweiter Termin am selben Tag rueckt naeher */
/* Festival-Zeile: derselbe Bau wie die Karte — Bildstreifen oben mit runder Unterkante,
   Inhalt darunter auf der Kachelflaeche. Kein Schleier, kein Textschatten. */
.hm-row.kf{overflow:hidden;padding:0}
.hm-row.kf .hm-band{height:136px;border-radius:18px 18px 14px 14px;
  background:url("../../img/festival.jpg") center 46%/cover}
.hm-row.kf .hm-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,12,16,.34),transparent 58%)}
.hm-row.kf .hm-band-in{padding:15px 14px 0}
/* Im Bild sitzt die Badge allein — Wappen und Etikett, kein Zusatzabstand. */
.hm-row.kf .hm-kf{margin-top:0}

/* Direkt unter dem Bild traegt allein das Kachelpolster den Abstand (12) — der eigene
   Vorlauf der Zeit wuerde sich sonst addieren. */
.hm-row.kf .hm-main{padding:16px 14px 14px}
.hm-row.kf .hm-main > .hm-zahl:first-child{margin-top:0}
.hm-row{position:relative;flex:1;min-width:0;
  background:var(--kachel);border:1px solid var(--kachel-rand);border-radius:18px;
  padding:14px;box-shadow:var(--kachel-schatten)}
.hm-row > *{position:relative;z-index:1}
.hm-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}
.hm-date i{font-style:normal;display:block;font-size:11.25px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.hm-date b{display:block;font-size:21px;font-weight:800;line-height:1.05;color:var(--hl-text)}
.hm-date u{display:block;text-decoration:none;font-size:11.25px;font-weight:800;letter-spacing:1px;color:var(--muted)}
.hm-main{min-width:0}
/* Abgemeldet: die ganze Kachel tritt zurueck, das Datum wird rot. */
.hm-zeile.ab .hm-date b{color:var(--bad)}   /* abgemeldet: das Datum sagt es */
.hm-zeile + .hm-eb{margin-top:var(--sp-7)}   /* 24 vor einer Abschnittsueberschrift (Leiter) */

/* Spiel als Ticket */

/* 209a — Mini-Duell: Wappen frei auf der Card, Anstoss als Text (Trainings-Anatomie). */
.hm-duell.klein{margin-top:var(--sp-5);gap:18px}   /* 16 unter der Spieltag-Badge */
.hm-duell.klein .w{width:44px;height:44px;box-shadow:none;background:transparent}
.hm-duell.klein .w img{width:44px;height:44px}
.hm-duell.klein .w .ini{width:44px;height:44px;border-radius:999px;background:var(--kachel-fest);
  font-size:12.5px;display:flex;align-items:center;justify-content:center}
.hm-duell.klein .kick{padding:0;border-radius:0;box-shadow:none;margin-top:0;background:transparent;gap:2px}
.hm-duell.klein .kick b{font-size:21px;letter-spacing:-.4px}
.hm-duell.klein + .hm-line{margin-top:var(--sp-4)}
.hm-duell.klein .w img[src*="schoetmar"]{transform:none}

/* Flache Zeile (Training, Vereinstermin) */
/* 112a — Zeichen der Sportart: in der Zeile 19px vor dem Titel, 8 Luft darueber und
   darunter, damit Titel und Zeichen atmen (Leiterstufe "eng zusammengehoerig"). */
.hm-flat-head{display:flex;align-items:flex-start;gap:var(--sp-3)}
.hm-meta+.hm-flat-head{margin-top:var(--sp-3)}
.hm-flat-head b{flex:1;font-size:17px;font-weight:700;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 119a — rechts die Uhrzeit als Spalte, an der das Auge beim Scrollen herunterlaeuft.
   In WEISS: in der Zeile ist die Zeit Inhalt, nicht Marke. Gelb bleibt der Tageszahl, der
   Abschnittsueberschrift und der Handlung — und der einen grossen Zahl in der Karte. */
.hm-flat-head .hm-pill.kind.klein,.hm-band-in .hm-pill.kind.klein{margin-left:auto;font-size:11.25px;padding:4px 10px}
.hm-row.kf .hm-band-in .hm-pill.kind.klein,.hm-row.kf .hm-band-in .hm-kf-badge{margin-top:-1px}
/* Zeit in der Zeile: dieselbe Form wie in der Karte, eine Stufe kleiner. */
.hm-zahl.klein{margin-top:var(--sp-5)}
.hm-zahl.klein b{font-size:21px;letter-spacing:-.45px;margin-bottom:-4px}
.hm-zahl.klein i{font-size:13.25px}
.hm-row.ab .hm-flat-head .zeit{color:var(--muted)}
.hm-flat-head .hm-sport{width:19px;height:19px;flex-shrink:0}
.hm-flat-head+.hm-line{margin-top:var(--sp-3)}
.hm-row.ab .hm-flat-head b{color:var(--muted)}
.hm-row.ab .hm-flat-head .hm-sport{opacity:.5}
/* Das gelbe Wasserzeichen ist entfallen: das Zeichen steht in Sportfarbe am Titel. */

/* Zustaende */
.hm-empty{padding:var(--sp-6) 0;color:var(--muted);font-size:var(--fs-body)}
.hm-note{margin:var(--sp-5) 0 0;padding:10px 12px;border-radius:var(--r-field);background:var(--field);
  border:1px solid var(--line);color:var(--muted);font-size:12.5px}

/* Unendliches Scrollen: unsichtbarer Fuehler am Ende der Timeline (loest das Nachladen aus) */
.hm-end{height:1px}

/* ---------- Kinderfestival / Turnier (Girlande, Ausrichter-Wappen, Verlaufs-Badge) ---------- */
/* Kinderfestival: Vereinsfoto als Grund. Ein Schleier darueber haelt den Inhalt lesbar —
   oben etwas duenner (das Bild darf atmen), unten dichter, wo Zeit, Ort und Knoepfe stehen.
   Kein eigener Kartenhintergrund: der Schleier IST die Flaeche. */
/* Der Weichzeichner haengt 16px ueber die Karte hinaus (sonst zieht er die Kartenfarbe
   herein) — und wird genau auf die Kartenform zurueckgeschnitten. overflow:hidden allein
   greift bei gefilterten Lagen in Safari nicht zuverlaessig. */
/* Lesbarkeit auf dem Foto, ohne es abzudunkeln: ein Hauch Schatten unter der Schrift
   (auf einer Flaeche unsichtbar, auf einem Bild entscheidend) und ein helleres Grau —
   die Nebenzeilen sind die erste, die auf einem Foto wegkippt. */
.hm-kf{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--sp-3);margin-top:var(--sp-4);min-width:0}
/* Der Wappenkreis sitzt buendig links und ist so hoch wie die Badge — dadurch ist sein
   Rund exakt ihre Rundung. Weisser Ring, damit das Wappen auf der bunten Flaeche traegt. */
.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:#1a1a18;
  background:linear-gradient(90deg,#8fd9b6,#f5a83c,#e0533f,#8fbfe8);border-radius:999px;
  padding:0 10px 0 28px;margin-left:15px;min-height:26px}
.hm-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))}
.hm-kf-badge .wap img{display:block;width:40px;height:40px;object-fit:contain}
.hm-kf-badge b{font-weight:800}

/* Uhrzeit mit Uhr-Symbol */

/* Kachel fuer Spielort */

/* Zeile mit Symbol (Uhrzeit, Ort) in der Als-Naechstes-Karte */
.hm-line{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-1);font-size:13.25px;line-height:1;color:var(--muted)}
.hm-line svg{width:13px;height:13px;flex-shrink:0}
.hm-line span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 37b: Kachel-Label immer grau — nur der WERT darf gelb sein (Dienst = Aufgabe) */
#screen-home .hm-duty i,[data-screen="home"] .hm-duty i{color:var(--muted)}

/* Filterreihe (108c) — eine seitlich wischbare Reihe: links die Art, rechts vom Strich das Kind.
   Form nach 107a: gewaehlt = gelber Rand, nicht gewaehlt = grauer Rand, nie gefuellt. */
/* 148a: Schiene statt loser Pillen. Zwei Gruppen (Art und Kind) bekommen je eine eigene
   Schiene — sie stehen nebeneinander und scrollen zusammen. */
.hm-filter{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);padding:0 var(--edge);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hm-filter::-webkit-scrollbar{display:none}
.hm-schiene{display:flex;align-items:center;gap:3px;flex:1 1 auto;min-width:0;
  background:var(--field);border:1px solid var(--line);border-radius:999px;padding:3px}
.hm-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}
.hm-schiene.viele{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hm-schiene.viele::-webkit-scrollbar{display:none}
.hm-schiene.viele .hm-fchip{flex:0 0 auto;padding:7px 14px}
.hm-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"] .hm-fchip.sel{box-shadow:0 1px 3px rgba(26,26,24,.12)}
.hm-fdot{width:6px;height:6px;border-radius:99px;flex-shrink:0}

/* Warum steht dieser Termin hier: über meine Trainerrolle. Beiwerk, deshalb grau —
   der Name des Kindes bleibt die auffälligere Angabe. */
.hm-meta .trainer{color:var(--muted);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase}

/* 191a/b — Duell des Spieltags: Wappen-Kreise + Anstoss-Kachel ragen 30px uebers Foto. */
.hm-duell{display:flex;align-items:flex-start;justify-content:center;gap:var(--sp-4)}
.hm-duell .s{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);width:auto;max-width:86px}
.hm-duell .s u{text-decoration:none;font-size:11.25px;font-weight:700;color:var(--muted);
  text-align:center;line-height:1.25}
/* Kachel auf Kreishoehe halten, Namen duerfen darunter weiterlaufen */
.hm-duell .kick{margin-top:1px}
.hm-duell .w{width:56px;height:56px;border-radius:999px;background:var(--kachel);flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.hm-duell .w img{display:block;width:46px;height:46px;object-fit:contain;object-position:center}
.hm-duell .w .ini{font-size:15.75px;font-weight:800;color:var(--muted)}
.hm-duell .kick{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--kachel);
  border-radius:14px;padding:7px 13px;margin-top:2px}
.hm-duell .kick i{font-style:normal;font-size:11.25px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.hm-duell .kick b{font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1;color:var(--hl-text)}

.hm-hero-title + .hm-line{margin-top:var(--sp-3)}

/* 192b — Spieltag: Badge + Treffen/Ort in einer Umrandungs-Kachel, exakt so hoch wie
   der Datumsblock (beide strecken sich im selben Paar). */
.hm-hero-oben.spiel{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
/* Vereinsnamen unter den Wappen in Vereinsgelb, Kapitaelchen. */
/* 207a — Fuss: Haarlinie (16 nach oben und unten), gelbe Treffen-Pille, Ort darunter. */
.hm-hero.spiel .hm-duell + .hm-fuss{margin-top:var(--sp-5)}
.hm-fuss{border-top:1px solid var(--line);padding-top:var(--sp-5);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.hm-treff{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--hl);color:var(--hl-text);
  font-size:var(--fs-eb);font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  border-radius:999px;padding:7px 14px}
.hm-treff svg{width:13px;height:13px}


/* Trainings-Badge ragt halb ins Hintergrundbild — wie das Duell am Spieltag.
   Body-Polster oben (20) + halbe Badge (15) = -35; die Badge braucht dafuer eine
   feste Flaeche statt der Toenung, sonst scheint das Foto durch. */
.hm-hero.tr .hm-hero-tx .hm-sportbadge{position:relative;z-index:2;margin-top:-35px;
  background:var(--kachel);box-shadow:0 2px 6px rgba(0,0,0,.28)}

/* Nach der hochgezogenen Badge rueckt der Inhalt (Uhrzeit, Ort) eine Stufe hoch. */
.hm-hero.tr .hm-hero-title + .hm-line{margin-top:var(--sp-2)}
.hm-hero.tr .hm-zahl + .hm-line{margin-top:var(--sp-4)}
.hm-hero.tr .hm-hero-title ~ .hm-zahl{margin-top:var(--sp-4)}

/* Weicher Dabei/Absagen-Switch: Farben und Rahmen gleiten, Druck gibt leicht nach. */
.hm-act{transition:border-color .18s ease,color .18s ease,background .18s ease}
.hm-act:active{transform:scale(.97)}

/* Training: die Datums-Card ragt wie die Badge halb ins Foto (Body-Polster 20 + halbe
   Hoehe) und traegt denselben Schatten. */
.hm-hero.tr .hm-hero-oben .hm-hero-datum{position:relative;z-index:2;margin-top:-35px;
  background:var(--kachel);box-shadow:0 2px 6px rgba(0,0,0,.28)}

/* Spieltreff: Badge (mit Wappen) und Datums-Card ragen genauso halb ins Foto;
   die Badge-Hoehe entspricht der Trainings-Pill (30). */
.hm-hero.kf .hm-kf{position:relative;z-index:2;margin-top:-35px}
.hm-hero.kf .hm-kf-badge{min-height:30px;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.hm-hero.kf .hm-kf-badge b{transform:translateY(1px)}
.hm-hero.kf .hm-kf ~ .hm-zahl,.hm-hero.kf .hm-kf + .hm-zahl{margin-top:calc(var(--sp-6) - 3px)}
.hm-hero.kf .hm-hero-oben .hm-hero-datum{position:relative;z-index:2;margin-top:-35px;
  background:var(--kachel);box-shadow:0 2px 6px rgba(0,0,0,.28)}

/* Spieltag: Duell und Datums-Card ragen wieder halb ins Foto — Kreise/Kachel mit
   fester Flaeche und Schatten, linksbuendig im Inhalt. */
/* 218a — Duell als EINE Pille (wie die Kopf-Pille der Detailansichten): Wappen bilden
   links und rechts den Abschluss auf einem eigenen runden Feld, Datum + Anstoss mittig.
   Sie ragt zur Haelfte (35px) ins Foto. */
.hm-hero.spiel .hm-duell.pille{position:relative;z-index:2;margin-top:-55px;justify-content:center}
.hm-duell.pille .in{display:inline-flex;align-items:center;gap:var(--sp-4);background:var(--kachel);
  border-radius:999px;padding:0 5px;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.hm-duell.pille .s{gap:0;max-width:none}
.hm-duell.pille .w{width:60px;height:60px;background:var(--field);box-shadow:none}
.hm-duell.pille .w img{display:block;width:50px;height:50px;object-fit:contain;object-position:center;margin:auto}
.hm-duell.pille .kick{background:transparent;box-shadow:none;border-radius:0;padding:8px 2px;margin-top:0}
.hm-duell.pille .kick b{font-size:21px;letter-spacing:-.4px}
/* Vereinsnamen exakt unter den Wappen zentriert: die Namenszeile ist so breit wie die
   Pille, die 100er-Spannen ragen 15 ueber deren Kante — ihr Zentrum liegt dann genau
   unter dem Wappenkreis (5 Polster + halber 60er-Kreis = 35). Beide Seiten Beiwerk-Grau. */
.hm-duell.pille .paar{display:inline-flex;flex-direction:column;align-items:center}
.hm-namen{align-self:stretch;display:flex;justify-content:space-between;margin:var(--sp-3) -15px 0}
.hm-namen span{width:100px;text-align:center;font-size:var(--fs-mini);font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;line-height:1.25;color:var(--muted)}
.hm-hero.spiel .hm-duell + .hm-fuss{margin-top:var(--sp-5)}

/* Das Hoetmar-SVG traegt einen eingebauten Schlagschatten links unten — der zieht die
   Boxmitte vom Schild weg. Kleiner Gegenschub, nur fuer dieses Wappen. */
.hm-duell .w img[src*="schoetmar"]{transform:translate(1px,4px)}

/* Stecknadel-Emoji statt SVG-Icon vor dem Ort */
.hm-line .emoji{font-style:normal;font-size:12px;line-height:1}

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