/* ============================================================
   kalender.css — Kalender (Note 1, 09.11.2026, Bausitzung A)
   Ein Bildschirm am Handy: Kopf mit „Woche | Monat“, Monat blättern, Raster, eine Zeile Legende,
   der Hauptknopf unten. Grau heißt „noch nicht geplant“, Farbe nur, wo geplant wurde.
   Lädt nach flow.css und bausteine.css und gilt nur unter .kl-seite (bzw. für den Umschalter .dp-ansicht).
   ============================================================ */

/* „Woche | Monat“ als ein Schalter mit zwei Hälften (auch auf dem Dienstplan) */
#inhalt .dp-ansicht { display: inline-flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--text) 7%, transparent); overflow: visible; }
#inhalt .dp-ansicht .ab-chip { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text); font-weight: 600; }
#inhalt .dp-ansicht .ab-chip.aktiv { background: var(--flow-karte); color: var(--text); box-shadow: 0 1px 3px color-mix(in srgb, var(--schatten) 60%, transparent); }

/* Kopf: Titel links, Schalter rechts in einer Zeile — auch am Handy */
.kl-seite .kl-kopf { flex-wrap: nowrap; align-items: center; margin-bottom: 12px; }
.kl-seite .kl-kopf .bs-kopf-text { flex: 1 1 auto; }
.kl-seite .kl-kopf .bs-kopf-rechts { flex: none; }
#inhalt .kl-seite .kl-kopf .seiten-satz { font-weight: 600; color: var(--text); }

/* Monat blättern: ‹ November 2026 › in einer Zeile */
.kl-leiste { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.kl-leiste .kl-monatsname { flex: 1; text-align: center; font-size: 1.15rem; }
.kl-leiste .dp-pfeil { flex: none; }
.kl-leiste .kl-blaettern { width: auto; min-width: 44px; padding: 0 14px; border-radius: 26px; white-space: nowrap; font-size: 1rem; font-weight: 600; }
.kl-leiste .dp-heute { flex: none; min-height: 44px; display: inline-flex; align-items: center; }

/* Mein Standort | Alle */
.kl-wahl { display: flex; gap: 0; padding: 3px; margin: 0 0 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.kl-wahl-knopf { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 600; }
.kl-wahl-knopf.aktiv { background: var(--flow-karte); box-shadow: 0 1px 3px color-mix(in srgb, var(--schatten) 60%, transparent); }

/* Grau = noch nicht geplant: eine ruhige Fläche ohne Zeichen */
.kl-seite .kl-punkt.offen-plan { border: 0; width: 10px; height: 10px; background: color-mix(in srgb, var(--text) 22%, transparent); }
#inhalt .kl-seite .kl-zelle.offen-plan { background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid transparent; }
.kl-seite .kl-tag.vorbei .kl-zelle, .kl-seite .kl-tag.vorbei .kl-datum { opacity: .55; }

/* Legende: eine Zeile, vier Wörter */
.kl-seite .kl-legende { gap: 4px 14px; margin: 10px 0 0; font-size: .85rem; }
.kl-legende-teil { display: inline-flex; align-items: center; gap: 6px; }

/* Am Handy: der Monat als Raster in einen Bildschirm */
@media (max-width: 720px) {
  .kl-seite .kl-kopf h1 { font-size: 1.6rem; }
  .kl-seite .kl-monat { gap: 5px; margin: 0; }
  .kl-seite .kl-monat-tag { min-height: 46px; gap: 3px; border-radius: 12px; border: 1px solid var(--rand); background: var(--flow-karte); }
  .kl-seite .kl-monat-tag.offen-plan { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: transparent; color: var(--text-leise); }
  .kl-seite .kl-monat-tag.offen-plan .kl-punkt { visibility: hidden; }
  .kl-seite .kl-monat-tag.zu { border: 0; background: transparent; }
  .kl-seite .kl-monat-tag.vorbei { opacity: .55; }
  .kl-seite .kl-monat-tag.heute { opacity: 1; border: 2px solid var(--akzent); }
  .kl-seite .kl-monat-tag.rot { background: color-mix(in srgb, var(--rot) 12%, var(--flow-karte)); }
  .kl-seite .kl-monat-tag.achtung { background: color-mix(in srgb, var(--orange) 10%, var(--flow-karte)); }
  .kl-seite .bs-hauptknopf { margin-top: 12px; }
}