/* 07-kalender.css — Monatskalender: Seite, Raster, Kennzeichen, Chips, Tages-Fenster, Termin-Editor. Teil der geordneten Kaskade: in index.html in Nummern-Reihenfolge geladen; Regeln NICHT zwischen Dateien verschieben, ohne die Reihenfolge zu bedenken. */
/* ── Dev-Monatskalender (#monthCalPage) ──
   Seite nur im Developer-Modus erreichbar (Nav-Tab ist .dev-only). Header nutzt
   den shared Liquid-Glass-Stil + die bestehenden .month-nav/.month-btn-Klassen. */
#monthCalPage {
  display: none;
  flex-direction: column;
  position: relative;
  /* Kein vertikales Scrollen auf der Kalender-Seite (wie #calendarPage):
     touch-action:none blockt nativen Browser-Scroll/Bounce/Pull-to-Refresh —
     Wischen gehört komplett mcGestures. Das Lab-Panel (.mc-lab) scrollt
     weiterhin intern (eigener Scroller unterhalb dieser Sperre). */
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
}

/* ── Native Kalender-Haptik: KEIN versehentliches Text-Markieren ──────────────
   Im Raster (Kacheln, Tageszahlen, Event-Chips) und in den Kalender-Sheets soll
   sich beim Tippen, Wischen (Monatswechsel) oder Langdrücken (Bereichsauswahl)
   NICHTS wie Text markieren lassen — wie in nativen Kalender-Apps. user-select
   wird vererbt, die Regel auf den Containern deckt also alle Kinder mit ab; iOS-
   Lang-Druck-Menü (callout) + Tap-Highlight ebenfalls aus. Eingabefelder werden
   gleich darunter wieder freigeschaltet (Titel/Notiz/Suche bleiben bearbeitbar). */
#monthCalPage,
#monthCalSettings, #mcDaySheet, #mcEditor, #mcGebListe, #mcGeburtstag,
#mcPicker, #mcColorSheet, #mcSearch,
.mc-settings-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* App-WEIT keine Text-Markierung (native-App-Gefühl): verhindert, dass ein
   Langdruck — z.B. „Produkt planen" (Halten auf der Suchleiste) — die halbe App
   wie Text markiert (Freundin-Bug 2026-07). Bisher war nur der Monatskalender-
   Teilbaum + einzelne Elemente geschützt, der restliche Body blieb selektierbar.
   Eingabefelder werden direkt darunter wieder freigeschaltet (Tippen/Markieren im
   Feld bleibt); .shop-input überschreibt bewusst zurück auf none (Long-Press-Plan). */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Eingaben bleiben überall selektier-/bearbeitbar (Editor-Titel & -Notiz,
   Benachrichtigungstext, Suche, Geburtstag, Hex-Feld …). */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

.monthcal-body {
  flex: 1;
  min-height: 0;
  /* KEIN Scrollen mehr: der Monat füllt die Seite exakt (Raster unten).
     overflow-x versteckt die Nachbar-Panes des Drag-Karussells. */
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  /* Alle --mc-*-Variablen setzt mcSettings (Kachel-Layout-Panel, 0,1-px-genau);
     horizontales Padding liegt in den Panes (s.u.) — sonst lugen die
     Nachbarmonate in Ruhe seitlich in den Padding-Bereich rein. */
  padding: var(--mc-pad-top, 16px) 0 var(--mc-pad-bottom, 12px);
}
/* Drag-Karussell: 3 Panes nebeneinander, Track folgt dem Finger (mcGestures). */
.mc-track {
  display: flex;
  width: 300%;
  height: 100%;
  transform: translateX(-33.3333%);
  will-change: transform;
}
.mc-track > .monthcal-grid {
  width: 33.3333%;
  flex: none;
  padding: 0 var(--mc-pad-x, 16px);
}
.monthcal-grid {
  display: grid;
  /* minmax(0,1fr): lange Chip-Titel dürfen die Spalten NICHT aufblähen
     (min-content einer 1fr-Spur wächst sonst mit dem breitesten Inhalt). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* Seitenfüllend: Kopfzeile auto, die 5 Wochen teilen sich die RESTHÖHE —
     ein Monat füllt die Seite von oben bis unten (kein Scroll, keine Lücke).
     Monate, die 6 Wochen bräuchten, geben ihre erste Woche an den Vormonat
     ab (Logik in mcGrid.renderMonthInto). */
  grid-template-rows: auto repeat(5, 1fr);
  height: 100%;
  gap: var(--mc-gap, 6px);
  transform: translate(var(--mc-shift-x, 0px), var(--mc-shift-y, 0px));
}
.mc-head {
  text-align: center;
  font-size: 12px;
  font-weight: var(--fw-heavy);
  color: var(--text-muted, #9aa3b2);
  letter-spacing: var(--ls-snug);
  padding: 4px 0 6px;
}
.mc-day {
  /* Vertikal langgezogene Kacheln — Zahl oben, Ereignis-Chips darunter.
     Höhe kommt aus den 1fr-Rasterzeilen (seitenfüllend), min-height:0 lässt
     die Zellen sauber in ihre Zeile schrumpfen. */
  min-height: 0;
  min-width: 0;   /* hartes Clipping statt Spalten-Aufblähen bei langen Titeln */
  display: flex; flex-direction: column; align-items: stretch;
  /* sichtbar statt hidden: Mehrtages-Balken + Eintrags-Bereich > 100%
     (Layout-Lab) dürfen über die Kachel hinausragen. */
  overflow: visible;
  /* seitlich nur 1px: Pillen sollen fast bündig mit der Kachel abschließen
     (User-Wunsch „hauchdünne Abtrennung") — Zahl/Kürzel haben ihren eigenen
     Innenabstand über .mc-kopf. */
  padding: 7px 1px 3px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text, #fff);
  font-size: 14px;
  font-weight: var(--fw-bold);
}
/* Zahnrad im Monats-Header: eigener Knopf NEBEN dem ‹›-Paar (bewusst NICHT
   .month-btn — dessen first/last-of-type-Order-Regeln würden sonst kippen). */
.mc-settings-btn {
  order: 4;
  width: 40px; height: 38px;
  margin-left: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.16);
  color: var(--text);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.18s;
}
.mc-settings-btn:active {
  background: rgba(var(--cell-glow-rgb), 0.30);
  border-color: rgba(var(--cell-glow-rgb), 0.45);
  transform: scale(0.93);
}
/* Kompaktere Kopf-Buttons im Monatskalender → mehr Platz für den (einheitlichen)
   Monatstitel. Mit 5 Buttons (Dev: inkl. Lab) blieben bei 40px nur ~62px für den
   Titel → ALLE Monate auf 11px gedrückt. 26px geben ~21px her (gemessen am echten
   Kopf). Nur im Monatskalender-Kopf (Scope), Essen-Kopf unberührt. */
.monthcal-header { padding-left: 14px; padding-right: 14px; }
.monthcal-header .mc-settings-btn { width: 26px; height: 30px; margin-left: 5px; }
/* Heute-Button: wie .header-today-btn bei „Essen" — bewusst sehr transparent,
   damit der wandernde Header-Glow durch den Button durchscheint und ihn
   „erreicht"/färbt; Border + Akzent-Icon halten ihn erkennbar. */
#mcTodayBtn {
  background: rgba(var(--cell-glow-rgb), 0.08);
  border-color: rgba(var(--cell-glow-rgb), 0.22);
  color: var(--text-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
#mcTodayBtn:active {
  background: rgba(var(--cell-glow-rgb), 0.20);
  border-color: rgba(var(--cell-glow-rgb), 0.38);
}
#mcTodayBtn svg { opacity: 0.90; }
.mc-settings-body {
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  color: var(--text-muted, #9aa3b2);
  font-size: var(--fs-body);
  font-weight: var(--fw-med);
  line-height: 1.55;
}
/* Gedimmte Nachbarmonats-Tage: NICHT die ganze Zelle per opacity dimmen —
   halbtransparente Balken-Segmente überlappen an den Brücken und werden
   fleckig. Stattdessen: Kopf (Zahl/Indikatoren) per opacity, Chips per
   filter — die bleiben DECKEND, Mehrtages-Balken durchgehend einheitlich. */
.mc-day--other .mc-kopf { opacity: 0.32; }
/* Einzel-Chips im Nachbarmonat dimmen; durchgehende Balken NICHT (die regeln ihren
   Nachbarmonat-Teil exakt per ::after-Overlay, sonst würde der aktuelle-Monat-Teil
   eines vom Vormonat kommenden Balkens fälschlich mit abgedunkelt). */
.mc-day--other .mc-chips > .mc-chip:not(.mc-chip--bar-voll) { filter: brightness(0.45) saturate(0.75); }
/* Tap-Puls: mcGestures setzt die Klasse beim Antippen einer Kachel und
   entfernt sie nach animationend — kurzes Eindrücken mit federndem Rücklauf. */
.mc-day--tap { animation: mc-day-tap 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mc-day-tap {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.mc-day--today {
  /* Dezenter, GLEICHMÄSSIGER Blau-Tint statt des hellen Radial-Flecks oben links
     — der saß genau hinter dem ersten Chip und ließ dessen Ereignis größer/anders
     wirken als an anderen Tagen. Heute bleibt klar markiert über Rahmen, Außen-Glow
     und den gefüllten Zahlen-Kreis; die Ereignisse sehen jetzt überall gleich aus. */
  background: linear-gradient(135deg, rgba(var(--cell-glow-rgb), 0.18) 0%, rgba(var(--cell-glow-rgb), 0.07) 100%);
  border-color: rgba(var(--cell-glow-rgb), 0.55);
  box-shadow: 0 0 14px -2px rgba(var(--cell-glow-rgb), 0.45);
  font-weight: var(--fw-heavy);
}
/* Kachel-Kopf: Zahl links, rechts optional das Arbeitszyklus-Kürzel (T/N). */
.mc-kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 5px;
  flex-shrink: 0;
}
.mc-num { text-align: left; font-size: var(--mc-font, 14px); line-height: 1.4; }
/* Erster + letzter Tag eines Monats: kleiner schlichter Gelb-Gold-Kreis um die
   Zahl. Größe in em → skaliert mit der Lab-Schriftgröße (--mc-font); negative
   Ränder ziehen den Kreis aufs Zeilenmaß zurück, damit der Kachel-Kopf nicht
   höher wird und die Zahl an ihrer Position bleibt. */
.mc-num--gold {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.65em; height: 1.65em;
  margin: -0.125em 0 -0.125em -0.33em;
  border-radius: 50%;
  border: 1.5px solid rgba(235, 195, 80, 0.95);
}
/* Heutige Zahl deutlich hervorheben: gefüllter Akzent-Kreis mit weißer Zahl
   (gleiche Geometrie wie der Gold-Kreis → der Kopf wird nicht höher). Höhere
   Spezifität als .mc-num--gold, gewinnt also auch wenn heute = Monatsrand ist. */
.mc-day--today .mc-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.65em; height: 1.65em;
  margin: -0.125em 0 -0.125em -0.33em;
  border: none;
  border-radius: 50%;
  background: rgb(var(--cell-glow-rgb, 2,132,199));
  color: #fff;
  font-weight: var(--fw-heavy);
  box-shadow: 0 1px 7px -1px rgba(var(--cell-glow-rgb, 2,132,199), 0.85);
}
.mc-kuerzel {
  font-size: calc(var(--mc-font, 14px) * 0.72);
  font-weight: var(--fw-heavy);
  color: rgba(var(--cell-glow-rgb, 2,132,199), 0.95);
  letter-spacing: 0.04em;
}
/* ── Kachel-Indikatoren (Einstellungen → Anzeige) ──
   Arbeitszyklus T/N, Gehalt €, Essen 🍴 — je in drei Stilen:
   kuerzel = farbiger Buchstabe, punkt = farbiger Punkt, badge = Mini-Pill. */
.mc-kopf-re { display: flex; align-items: center; gap: 3px; }
.mc-ind { font-weight: var(--fw-heavy); letter-spacing: 0.04em; line-height: 1.2; }
.mc-ind--kuerzel { font-size: calc(var(--mc-font, 14px) * 0.72); }
.mc-ind--punkt   { font-size: calc(var(--mc-font, 14px) * 0.55); line-height: 1; }
.mc-ind--badge {
  font-size: calc(var(--mc-font, 14px) * 0.58);
  padding: 1px 4px;
  border-radius: 6px;
}
.mc-ind--t     { color: rgba(var(--cell-glow-rgb, 2,132,199), 0.95); }
.mc-ind--n     { color: #9a8cf0; }
.mc-ind--geld  { color: #ebc350; }
.mc-ind--essen { color: #43c97e; }
.mc-ind--am    { color: #f08bb1; }
/* Zeitumstellung: Kreis-Pfeil-Icon neben der Tageszahl (skaliert mit der Tages-
   zahl-Schrift, kräftiger Indigo). Die Kachel bekommt zusätzlich eine Outline +
   Glow wie der Heute-Marker (in Indigo) → der Tag ist klar als „da ist was" erkennbar. */
.mc-ind--zeit  {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--mc-font, 14px) * 1.18); height: calc(var(--mc-font, 14px) * 1.18);
  border-radius: 50%; color: #eef0ff;
  background: rgba(129, 140, 248, 0.40);
  box-shadow: inset 0 0 0 1.2px rgba(180, 188, 255, 0.7), 0 1px 3px rgba(0,0,0,0.35);
}
.mc-ind--zeit svg { width: 68%; height: 68%; display: block; stroke-width: 2.6; }
.mc-day--zeit {
  border-color: rgba(129, 140, 248, 0.65);
  box-shadow: 0 0 14px -2px rgba(129, 140, 248, 0.5), inset 0 0 0 1px rgba(129, 140, 248, 0.35);
}
.mc-ind--badge.mc-ind--t     { background: rgba(var(--cell-glow-rgb), 0.18); border: 1px solid rgba(var(--cell-glow-rgb), 0.40); }
.mc-ind--badge.mc-ind--n     { background: rgba(122,104,238,0.16);  border: 1px solid rgba(122,104,238,0.40); }
.mc-ind--badge.mc-ind--geld  { background: rgba(235,195,80,0.14);   border: 1px solid rgba(235,195,80,0.45); }
.mc-ind--badge.mc-ind--essen { background: rgba(67,201,126,0.14);   border: 1px solid rgba(67,201,126,0.40); }
.mc-ind--badge.mc-ind--am    { background: rgba(240,139,177,0.14);  border: 1px solid rgba(240,139,177,0.42); }
.mc-am-tage { flex-wrap: wrap; }

/* ── Arbeitszyklus-Stil „Ecke": Glas-Pille (Sonne/Mond + Kürzel) in der OBEREN
   RECHTEN Kachel-Ecke — leicht EINGERÜCKT und voll gerundet (999px) statt bündig:
   .mc-day hat overflow:visible (Mehrtages-Balken), eine randbündige Pille würde
   also NICHT an der Kachelrundung beschnitten und ragte über Rand/Rundung hinaus
   (v500-Bug). Eingerückt kollidiert sie nie mit Rand, Heute-Glow oder Geb-Ring.
   T = Akzentblau (--cell-glow-rgb), N = Lila (wie mc-ind--n). Skaliert über
   --mc-font mit dem Kachel-Layout-Panel. pointer-events:none → Tap trifft
   weiterhin die Kachel (Tages-Sheet). position:relative auf .mc-day ist gefahrlos:
   einziges direktes absolutes Kind ist diese Pille (.mc-day-more & Co. ankern an
   .mc-chips, das selbst relative ist). */
.mc-day { position: relative; }
.mc-eckpill {
  position: absolute; top: 3px; right: 3px; z-index: 3;
  display: inline-flex; align-items: center; gap: 2.5px;
  font-size: calc(var(--mc-font, 14px) * 0.54);
  font-weight: var(--fw-heavy); letter-spacing: 0.04em; line-height: 1;
  padding: 2px 5px 2px 4px;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  pointer-events: none;
}
.mc-eckpill svg {
  width: calc(var(--mc-font, 14px) * 0.64);
  height: calc(var(--mc-font, 14px) * 0.64);
  display: block; flex-shrink: 0;
}
/* Geburtstags-Tag: Eckpille etwas weiter nach innen, damit sie klar INNERHALB des
   2px-Geburtstagsrings sitzt und ihn nicht mehr berührt (der Pillen-Anker ist sonst
   fix bei 3px → nur die Größe verkleinern reicht dafür nicht). */
.mc-day--geburtstag .mc-eckpill { top: 5px; right: 5px; }
.mc-eckpill--t {
  background: rgba(var(--cell-glow-rgb, 2,132,199), 0.18);
  border: 1px solid rgba(var(--cell-glow-rgb, 2,132,199), 0.48);
  color: color-mix(in srgb, rgb(var(--cell-glow-rgb, 2,132,199)) 55%, white);
}
.mc-eckpill--n {
  background: rgba(154,140,240,0.16);
  border: 1px solid rgba(154,140,240,0.46);
  color: #bcb0ff;
}


/* Stil-Auswahl-Zeile im Anzeige-Panel (Einstellungen) */
.mc-stil-zeile { display: flex; gap: 8px; padding: 2px 14px 12px; }

/* ── Monatskalender: Ereignis-Chips in den Kacheln ──
   Es werden IMMER alle Einträge gezeigt (kein "+N"-Sammel-Chip); overflow
   bleibt sichtbar, damit Mehrtages-Balken über den Kachel-Zwischenraum zur
   Nachbarzelle durchlaufen können (Brücken via negativem margin-right). */
.mc-chips {
  display: flex; flex-direction: column;
  gap: 2px;
  margin-top: 3px;
  min-height: 0;
  overflow: visible;
  position: relative;
  z-index: 2;
}
/* „+N"-Hinweis, wenn an einem Tag mehr Ereignisse sind als Zeilen passen: kompakte
   Pille unten rechts ÜBER dem letzten sichtbaren Chip. pointer-events:none → der
   Tap geht an die Kachel (Tages-Sheet zeigt dann ALLE Ereignisse). */
.mc-day-more {
  position: absolute; right: 1px; bottom: 0;
  font-size: 8px; font-weight: var(--fw-bold); line-height: 1;
  padding: 1px 3px; border-radius: 4px;
  background: rgba(10,14,20,0.72); color: #fff;
  letter-spacing: 0.2px;
  pointer-events: none; z-index: 5;
}
.mc-chip {
  background: var(--chip, #4a90e2);
  color: #fff;
  font-size: var(--mc-chip-font, 8.5px);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  padding: 2px 4px;
  border-radius: 5px;
  /* clip statt ellipsis: lange Wörter laufen so weit wie möglich aus,
     OHNE „…" (User-Wunsch) */
  white-space: nowrap; overflow: hidden; text-overflow: clip;
  flex-shrink: 0;
}
.mc-chip--more { background: rgba(255,255,255,0.16); color: var(--text-muted, #9aa3b2); }
/* Editor-Schalter „Text zentrieren": Chip-Text mittig statt linksbündig. text-align
   vererbt in die mehrzeiligen Kinder (.mc-ml-zeit/.mc-ml-rest) und zentriert auch
   den Balken-Text (.mc-bar-txt) im gestreckten Mehrtages-Balken. */
.mc-chip--center { text-align: center; }
/* Zweifarbige Ereignisse: harter 50/50-Diagonal-Split (Farbe 1 → Farbe 2) */
.mc-chip--duo {
  background: linear-gradient(135deg, var(--chip) 0%, var(--chip) 50%, var(--chip2, var(--chip)) 50%, var(--chip2, var(--chip)) 100%);
}
/* Platzhalter-Slot: hält die Höhe, damit Mehrtages-Balken in allen Zellen
   derselben Woche auf gleicher Höhe liegen. */
.mc-chip--leer { visibility: hidden; }
/* Mehrzeilig (Editor-Auswahl „Zeilen im Kalender" = 2 oder 3): der Chip belegt
   genau so viele normale Chip-Zeilen wie gewählt und bricht seinen Text um, statt
   ihn nach einer Zeile zu beschneiden. Die exakte Höhe kommt INLINE aus mcGrid
   (n× Chip-Höhe + (n−1)× Zeilen-Gap), damit darunterliegende Chips UND Mehrtages-
   Balken in Nachbartagen auf gleicher Slot-Höhe bleiben (die reservierten Folge-
   Slots werden in mcGrid bewusst NICHT als eigenes Element gerendert). */
.mc-chip--ml {
  display: flex; flex-direction: column; justify-content: center;
  white-space: normal;
  overflow: hidden;
  word-break: break-word;
}
/* Titel mit führender Uhrzeit („13:30 Friseur") wird gestapelt: Uhrzeit allein
   in Zeile 1 (einzeilig, wie normale Chips), der Rest darf über die übrigen
   reservierten Zeilen umbrechen. */
.mc-chip--ml .mc-ml-zeit {
  display: block; line-height: 1.3; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: clip;
  font-variant-numeric: tabular-nums;
}
.mc-chip--ml .mc-ml-rest {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--ml-rest-lines, 1);
  overflow: hidden;
  line-height: 1.3; max-width: 100%; min-width: 0;
}
/* (Die „Zeilen im Kalender"-Pillen nutzen jetzt das einheitliche Segment-Control
   .mc-seg / .mc-seg-opt — siehe „Editor-Politur (mcEditor)" weiter unten.) */
/* Mehrtages-Balken: EIN gestrecktes Element (.mc-chip--bar-voll, Regel am
   Dateiende) — die früheren Brücken-Segmente sind Geschichte. */

/* Markierung während der Bereichsauswahl (mcSelect) */
.mc-day--sel {
  border-color: rgba(var(--cell-glow-rgb), 0.65);
  box-shadow: inset 0 0 0 2px rgba(var(--cell-glow-rgb), 0.55), 0 0 12px -3px rgba(var(--cell-glow-rgb), 0.5);
  background: linear-gradient(135deg, rgba(var(--cell-glow-rgb), 0.26) 0%, rgba(var(--cell-glow-rgb), 0.10) 100%);
}

/* Hinweis-Banner der Bereichsauswahl */
.mc-range-hint {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 var(--sp-3) var(--sp-2);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, rgba(var(--cell-glow-rgb), 0.22), rgba(var(--cell-glow-rgb), 0.10));
  border: 1px solid rgba(var(--cell-glow-rgb), 0.45);
  color: var(--text);
  font-size: var(--fs-foot);
  font-weight: var(--fw-bold);
}
.mc-range-hint[hidden] { display: none; }
.mc-range-hint button {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  font-size: var(--fs-foot);
  font-weight: var(--fw-bold);
  cursor: pointer;
}

/* ── Monatskalender: Tages-Sheet ── */
.mc-sheet-actions { display: flex; align-items: center; gap: 10px; }
.mc-add-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--cell-glow-rgb), 0.32), rgba(var(--cell-glow-rgb), 0.14));
  border: 1px solid rgba(var(--cell-glow-rgb), 0.5);
  color: var(--text);
  font-size: 17px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.mc-add-btn:active { transform: scale(0.92); background: rgba(var(--cell-glow-rgb), 0.4); }
/* ✓-Speichern im Editor-Kopf — App-Akzentfarbe (wie .mc-add-btn, etwas kräftiger) */
.mc-save-mini {
  background: linear-gradient(135deg, rgba(var(--cell-glow-rgb), 0.5), rgba(var(--cell-glow-rgb), 0.26));
  border-color: rgba(var(--cell-glow-rgb), 0.7);
  color: var(--text);
  box-shadow: 0 0 14px -6px rgba(var(--cell-glow-rgb), 0.8);
}
.mc-save-mini:active { background: rgba(var(--cell-glow-rgb), 0.5); }
/* Editor-Kopf ohne Überschrift: ✕ links, ✓ rechts — beide mit federnder
   Klick-Animation (Release schwingt durch den Spring-Easing leicht zurück). */
.mc-editor-kopf .weekplan-close,
.mc-editor-kopf .mc-save-mini {
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s;
}
.mc-editor-kopf .weekplan-close:active,
.mc-editor-kopf .mc-save-mini:active { transform: scale(0.82); }
.mc-day-body {
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  min-height: 160px;
}
.mc-day-leer {
  color: var(--text-muted, #9aa3b2);
  font-size: var(--fs-body);
  font-weight: var(--fw-med);
  padding: var(--sp-4) 0;
  text-align: center;
}
.mc-ev-row {
  display: flex; align-items: stretch; gap: 10px;
  padding: 5px 0;
  cursor: pointer;
}
.mc-ev-time {
  width: 62px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 2px;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--text);
}
.mc-ev-time .mc-ev-bis { color: var(--text-muted, #9aa3b2); font-weight: var(--fw-med); }
.mc-ev-time .mc-ev-ganztags { font-size: 11px; color: var(--text-muted, #9aa3b2); }
.mc-ev-bar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--chip, #4a90e2);
  border-radius: 11px;
  padding: 11px 13px;
  color: #fff;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}
.mc-ev-haupt { display: flex; align-items: center; gap: 7px; min-width: 0; }
.mc-ev-titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Zeitumstellungs-Info-Zeile: langer Erklärtext darf auf 2 Zeilen umbrechen
   (lesbar statt abgeschnitten); nicht klickbar (kein Editor). */
.mc-ev-row--info { cursor: default; }
.mc-ev-row--info .mc-ev-haupt { align-items: flex-start; }
.mc-ev-row--info .mc-ev-titel {
  white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  line-height: 1.28;
}
/* Reha-Termine im Tages-Sheet als echte 2-Zeiler: Behandlungsname oben, Behandler·Ort
   darunter — statt nebeneinander, wo der lange Name zu „Reh…" abgeschnitten wurde.
   .mc-ev-haupt (sonst flex-row/center) wird hier zur Spalte über die volle Breite. */
.mc-ev-bar--2z .mc-ev-haupt { flex: 1; min-width: 0; flex-direction: column; align-items: stretch; gap: 1px; }
.mc-ev-bar--2z .mc-ev-titel {
  white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.mc-ev-bar--2z .mc-ev-alter {
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.88em;
}
.mc-ev-bar .mc-geb-icon { flex-shrink: 0; width: 1.15em; height: 1.15em; }
.mc-ev-wdh { flex-shrink: 0; opacity: 0.85; font-size: 14px; }

/* Tages-Sheet: Arbeitszyklus-Zeile (Tag-/Nachtschicht) — Glas-Optik wie die
   Eck-Pille (T = Akzentblau, N = Lila) statt solider Chip-Farbe; Sonne/Mond-Icon
   vor dem Titel. Zeile ist mc-ev-row--info (nicht klickbar, kein Editor). Steht
   NACH der .mc-ev-bar-Basisregel → background/color-Override gewinnt die Kaskade. */
.mc-ev-bar--schicht { justify-content: flex-start; }
.mc-ev-bar--schicht svg {
  width: 1.1em; height: 1.1em; flex-shrink: 0; display: block;
}
.mc-ev-bar--schicht-t {
  background: rgba(var(--cell-glow-rgb, 2,132,199), 0.18);
  border: 1px solid rgba(var(--cell-glow-rgb, 2,132,199), 0.48);
  color: color-mix(in srgb, rgb(var(--cell-glow-rgb, 2,132,199)) 55%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.mc-ev-bar--schicht-n {
  background: rgba(154,140,240,0.16);
  border: 1px solid rgba(154,140,240,0.46);
  color: #bcb0ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/* ── Monatskalender: Ereignis-Editor ── */
.mc-editor-body { padding: var(--sp-3) var(--sp-4) var(--sp-5); }
.mc-form { display: flex; flex-direction: column; gap: 9px; }
.mc-input {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 12px;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-med);
  padding: 8px 11px;
  min-width: 0;
  color-scheme: dark;
}
/* Sanfter Akzent-Glow beim Antippen/Fokussieren der Eingabezeilen */
.mc-input { transition: border-color 0.18s, box-shadow 0.18s; }
.mc-input:focus {
  outline: none;
  border-color: rgba(var(--cell-glow-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--cell-glow-rgb), 0.16),
              0 0 16px -4px rgba(var(--cell-glow-rgb), 0.6);
}
.mc-input--titel { font-size: var(--fs-head); font-weight: var(--fw-bold); padding: 10px 13px; }
.mc-notiz { resize: vertical; min-height: 44px; }
.mc-zeit { flex-shrink: 0; }
.mc-zahl { width: 86px; text-align: center; }
.mc-einheit { color: var(--text-muted, #9aa3b2); font-size: var(--fs-foot); font-weight: var(--fw-bold); align-self: center; }
.mc-form-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.mc-form-row > span:first-child { flex-shrink: 0; }
/* Sammel-Zeile „Zeitraum" (öffnet den kombinierten Start/Ende-Picker) */
.mc-zeitraum-row { width: 100%; background: none; border: none; cursor: pointer; }
.mc-zr-wert {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--text); font-weight: var(--fw-med); font-size: var(--fs-callout);
}
/* Datum (oben) + Uhrzeit (darunter) gestapelt, rechtsbündig vor dem Pfeil */
.mc-zr-lines { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; }
.mc-zr-txt {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.mc-zr-zeit { font-size: var(--fs-body); color: var(--text-muted, #9aa3b2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mc-zr-pfeil { flex-shrink: 0; color: var(--text-muted, #9aa3b2); font-size: 18px; }
.mc-dt { display: flex; gap: 8px; min-width: 0; }
.mc-form-block { display: flex; flex-direction: column; gap: 9px; }
.mc-form-label { font-size: var(--fs-foot); font-weight: var(--fw-heavy); color: var(--text-muted, #9aa3b2); letter-spacing: var(--ls-snug); text-transform: uppercase; }
.mc-wdh-extra { display: flex; flex-direction: column; gap: 9px; }
.mc-wdh-extra[hidden] { display: none; }

/* iOS-artiger Schalter (Ganztägig) */
.mc-switch { position: relative; width: 42px; height: 25px; flex-shrink: 0; }
.mc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.mc-switch-knob {
  position: absolute; inset: 0;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.16);
  transition: background var(--mo-2) var(--ease-smooth),
              border-color var(--mo-2) var(--ease-smooth),
              box-shadow var(--mo-2) var(--ease-smooth);
}
.mc-switch-knob::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  /* width mit-animiert für das Dehnen beim Drücken (s. unten) */
  transition: transform var(--mo-3) var(--ease-spring-soft),
              width var(--mo-2) var(--ease-out-quint);
}
.mc-switch input:checked + .mc-switch-knob {
  background: rgba(var(--cell-glow-rgb), 0.55);
  border-color: rgba(var(--cell-glow-rgb), 0.65);
  box-shadow: 0 0 12px -3px rgba(var(--cell-glow-rgb), 0.7);
}
.mc-switch input:checked + .mc-switch-knob::after { transform: translateX(17px); }

/* Beim Drücken dehnt sich der Knopf leicht in die Länge und zieht sich beim
   Loslassen wieder zusammen — die Geste bekommt dadurch Gewicht. Im
   eingeschalteten Zustand wächst er nach LINKS (Versatz 17px → 13px), sonst
   liefe er über den rechten Rand hinaus: 2 + 13 + 23 = 38px Innenbreite. */
.mc-switch input:active + .mc-switch-knob::after { width: 23px; }
.mc-switch input:checked:active + .mc-switch-knob::after { width: 23px; transform: translateX(13px); }

/* Farb-Auswahl */
.mc-colors { display: flex; gap: 9px; flex-wrap: wrap; }
.mc-swatch {
  width: 31px; height: 31px;
  border-radius: 50%;
  background: var(--chip);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
}
.mc-swatch:active { transform: scale(0.9); }
.mc-swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.25), 0 0 10px -2px var(--chip); }

/* Wochentag-Auswahl (wöchentliche Muster) */
.mc-wdays { display: flex; gap: 6px; }
.mc-wdays[hidden] { display: none; }
.mc-wday {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  color: var(--text);
  font-size: var(--fs-foot);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.mc-wday.an {
  background: rgba(var(--cell-glow-rgb), 0.32);
  border-color: rgba(var(--cell-glow-rgb), 0.55);
}

/* Zyklus-Wiederholung (überarbeitet): Rhythmus-Felder + Live-Vorschau */
.mc-wdays-wrap[hidden] { display: none; }
.mc-form-row[hidden] { display: none; }   /* sonst überstimmt display:flex das hidden-Attribut */
.mc-form-sub { font-size: var(--fs-foot); color: var(--text-muted); margin-bottom: 6px; font-weight: var(--fw-med); }
.mc-zyk-rhythmus { display: flex; gap: 10px; }
.mc-zyk-feld {
  flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 10px; border-radius: 12px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
}
.mc-zyk-cap { font-size: var(--fs-foot); font-weight: var(--fw-bold); color: var(--text); }
.mc-zyk-start { width: 100%; margin-top: 12px; background: none; border: none; cursor: pointer; padding: 0; color: var(--text); }
.mc-zyk-vorschau { margin-top: 13px; }
.mc-zyk-legende { display: flex; align-items: center; gap: 6px; font-size: var(--fs-foot); color: var(--text-muted); margin-bottom: 7px; }
.mc-zyk-leg { width: 13px; height: 13px; border-radius: 4px; display: inline-block; background: rgba(255,255,255,0.10); }
.mc-zyk-leg.an { background: var(--chip, #4a90e2); }
.mc-zyk-tage { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.mc-zyk-tag {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 0; border-radius: 7px; min-width: 0;
  background: rgba(255,255,255,0.05); color: var(--text-muted);
}
.mc-zyk-tag.an { background: var(--chip, #4a90e2); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.28); }
.mc-zyk-wt { font-size: 8px; opacity: 0.8; line-height: 1; }
.mc-zyk-dn { font-size: 11px; font-weight: var(--fw-bold); line-height: 1; }

/* Kategorie-Zuordnung (③): Editor-Chip-Punkt + Einträge-Liste in den Einstellungen */
.mc-kat-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }
.mc-kat-eintraege { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.mc-kat-eintrag { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,0.05); }
.mc-kat-eintrag-txt { flex: 1; min-width: 0; font-size: var(--fs-foot); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-kat-add { width: 100%; padding: 9px 12px; border-radius: 10px; background: rgba(var(--cell-glow-rgb), 0.16); border: 1px dashed rgba(var(--cell-glow-rgb), 0.5); color: var(--text); font-size: var(--fs-foot); font-weight: var(--fw-bold); cursor: pointer; }

.mc-bereich-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(var(--cell-glow-rgb), 0.20), rgba(var(--cell-glow-rgb), 0.08));
  border: 1px solid rgba(var(--cell-glow-rgb), 0.4);
  color: var(--text);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: transform 0.12s, background 0.15s;
}
.mc-bereich-btn:active { transform: scale(0.97); background: rgba(var(--cell-glow-rgb), 0.3); }

.mc-mini-btn {
  flex-shrink: 0;
  min-width: 38px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text);
  font-size: var(--fs-foot);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.mc-mini-btn:active { background: rgba(255,255,255,0.16); }

.mc-editor-actions { display: flex; gap: 10px; margin-top: 2px; }
.mc-save-btn {
  flex: 1;
  padding: 11px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, rgba(var(--cell-glow-rgb), 0.55), rgba(var(--cell-glow-rgb), 0.32));
  border: 1px solid rgba(var(--cell-glow-rgb), 0.65);
  color: #fff;
  font-size: var(--fs-body);
  font-weight: var(--fw-heavy);
  cursor: pointer;
  transition: transform 0.12s;
}
.mc-save-btn:active { transform: scale(0.97); }
.mc-del-btn {
  padding: 11px 18px;
  border-radius: var(--r-pill);
  background: rgba(231, 76, 60, 0.16);
  border: 1px solid rgba(231, 76, 60, 0.45);
  color: #ff8a7a;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.mc-del-btn:active { background: rgba(231, 76, 60, 0.28); }