/* ===========================================================================
   Mein Kalender (Agenda: Trainings, Spiele, Turniere, Hallendienste)
   ---------------------------------------------------------------------------
   Spezifikation: docs/specs/mein-kalender.md

   Nur .mk-*-Klassen: keine :root-Variablen, keine nackten Element-Regeln.
   Farben aus den vorhandenen Variablen, damit Hell und Dunkel mitschalten.
   Die Art wird durch Randfarbe UND Beschriftung gezeigt, nie nur durch Farbe.
   =========================================================================== */

.mk .ad-sec { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
/* Knoepfe oben rechts. Als Link gelten a:visited und a:hover (Textfarbe, Blau) mit hoeherer Spezifitaet als .so-btn,
   darum stehen die Farben hier ausdruecklich: dunkle Schrift auf Gelb, auch im dunklen Design. */
.mk-kopfknoepfe { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.mk .mk-kopfknoepfe .so-btn { text-transform: none; letter-spacing: normal; }
.mk .mk-kopfknoepfe a.so-btn, .mk .mk-kopfknoepfe a.so-btn:visited, .mk .mk-kopfknoepfe a.so-btn:hover, .mk .mk-kopfknoepfe a.so-btn:focus-visible { color: var(--tigers-black); }
.mk .mk-kopfknoepfe a.so-btn i { color: inherit; }
.mk .mk-kopfknoepfe a.so-btn-ghost, .mk .mk-kopfknoepfe a.so-btn-ghost:visited, .mk .mk-kopfknoepfe a.so-btn-ghost:hover, .mk .mk-kopfknoepfe a.so-btn-ghost:focus-visible { color: rgb(var(--ink)); }

.mk-filter { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.mk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-chip { font-size: 0.8rem; font-weight: 700; padding: 6px 12px; min-height: 32px; display: inline-flex; align-items: center;
    border-radius: 999px; border: 1px solid var(--glass-22); background: transparent; color: inherit; text-decoration: none; }
.mk-chip.on { background: var(--tigers-yellow-06); border-color: var(--tigers-yellow-35); }
.mk-chip.on::before { content: "\2713"; margin-right: 6px; font-weight: 900; }

.mk-tag { font-size: 0.95rem; font-weight: 900; margin: 20px 0 8px; }
.mk-heute { padding-left: 10px; border-left: 4px solid var(--tigers-yellow); }

.mk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.mk-karte { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start;
    padding: 10px 14px; border: 1px solid var(--glass-22); border-left: 5px solid var(--glass-60); border-radius: 12px; background: var(--glass-06); }
.mk-spiel, .mk-spieltag { border-left-color: var(--tigers-yellow); }
.mk-turnier { border-left-color: var(--tigers-yellow); border-left-style: dashed; }
.mk-dienst { border-left-color: var(--glass-60); border-left-style: dotted; }
.mk-sonstiges { border-left-style: double; }

/* Spiele sind groesser als Trainings (Gegner, Treffpunkt, Karten-Link direkt dabei). */
.mk-gross { padding: 14px 16px; background: var(--tigers-yellow-06); border-color: var(--tigers-yellow-35); border-left-color: var(--tigers-yellow); }
.mk-gross .mk-titel { font-size: 1.1rem; }

.mk-zeit { display: flex; flex-direction: column; line-height: 1.15; }
.mk-zeit b { font-size: 1.15rem; font-weight: 900; }
.mk-zeit small { font-size: 0.7rem; color: var(--glass-60); }

/* Titel: Symbol (Art) oder Marke Heim/Auswaerts, dann der Text. Jede Angabe steht nur einmal. */
.mk-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 0.95rem; font-weight: 800; overflow-wrap: anywhere; }
.mk-titel > i { width: 1.1em; text-align: center; color: var(--glass-60); }
.mk-ha { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; }
.mk-ha-heim { background: var(--tigers-yellow); color: var(--tigers-black); }
.mk-ha-ausw { background: var(--glass-22); border: 1px solid var(--glass-60); }
.mk-unter { font-size: 0.8rem; color: var(--glass-60); margin-top: 1px; }

/* Ort in zwei Zeilen: Hallenname, darunter Strasse und Ort in leiserer Schrift. */
.mk-ort { display: flex; gap: 8px; margin-top: 6px; font-size: 0.85rem; line-height: 1.35; }
.mk-ort > i { margin-top: 0.2em; color: var(--glass-60); }
.mk-ort b { font-weight: 700; }
.mk-adr { display: block; font-size: 0.8rem; color: var(--glass-60); overflow-wrap: anywhere; }

.mk-zeile { font-size: 0.82rem; margin-top: 4px; overflow-wrap: anywhere; }
.mk-zeile a { font-size: inherit; }
.mk-zeile i { width: 1.1em; text-align: center; color: var(--glass-60); }
.mk-notiz { font-size: 0.8rem; margin-top: 6px; color: var(--glass-60); overflow-wrap: anywhere; }

/* Fusszeile: Route als Knopf, daneben Abmelden. Mindestens 36 px hoch zum Antippen. */
.mk-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.mk-fuss .abw-termin { margin: 0; }
.mk-route { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; font-size: 0.8rem; font-weight: 700;
    border: 1px solid var(--glass-22); border-radius: 8px; color: inherit; text-decoration: none; }
.mk-route:hover { border-color: var(--glass-60); }

.mk-marke { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 8px; margin: 3px 4px 0 0; }
.mk-marke-verlegt { background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-border); }
.mk-marke-abgesagt { background: var(--err-bg); color: var(--err-text); border: 1px solid var(--err-border); }

.mk-abgesagt { opacity: 0.75; }
.mk-abgesagt .mk-titeltext, .mk-abgesagt .mk-ort, .mk-abgesagt .mk-zeile { text-decoration: line-through; }
.mk-vorbei { opacity: 0.7; }

.mk-aktionen { display: flex; flex-direction: column; gap: 6px; }
.mk-aktionen .so-btn { justify-content: flex-start; white-space: nowrap; }

.mk-leer { margin: 28px 0; padding: 22px; text-align: center; border: 1px dashed var(--glass-22); border-radius: 12px; font-weight: 700; }
.mk-leer i { display: block; font-size: 1.8rem; margin-bottom: 8px; color: var(--glass-60); }
.mk-mehr { margin: 18px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Zahlen "13 | 14 zugesagt" (Verwalter): Knopf wie in der Hallenbelegung, hier ausserhalb von .hb-grid eigens gestaltet. */
.mk-fuss .hb-anw { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; font: inherit; font-size: 0.8rem; font-weight: 700;
    border: 1px solid var(--glass-22); border-radius: 8px; background: var(--glass-08); color: rgb(var(--ink)); cursor: pointer; }
.mk-fuss .hb-anw:hover { border-color: var(--glass-60); }
.mk-fuss .hb-anw-text { font-weight: 400; color: var(--glass-60); }
.mk-filter2 { margin: 8px 0 0; }

/* Handy: Zeit oben, Aktionen unter dem Inhalt, kein seitliches Scrollen. */
@media (max-width: 600px) {
    .mk-karte { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .mk-zeit { flex-direction: row; align-items: baseline; gap: 8px; }
    .mk-aktionen { flex-direction: row; flex-wrap: wrap; }
}