/* 08-kalender-einstellungen.css — Kalender-Einstellungen (Karten, Cluster, Listen). Teil der geordneten Kaskade: in index.html in Nummern-Reihenfolge geladen; Regeln NICHT zwischen Dateien verschieben, ohne die Reihenfolge zu bedenken. */
/* ── Monatskalender: Einstellungs-Sheet (Abschnitte) ── */
.mc-set-abschnitt { margin-bottom: var(--sp-6); }
.mc-set-abschnitt:last-child { margin-bottom: 0; }

/* ════ Einstellungs-Sheet · Redesign (gruppierte Glass-Karten) ════
   Gruppen mit dezentem Versalien-Header; je Gruppe EINE Glass-Karte,
   Optionen als Hairline-getrennte Zeilen. Overflow-fest: Textspalte
   min-width:0 (Info darf umbrechen), rechte Ampel flex-shrink:0. */
.mc-settings-body { overflow-x: hidden; }

.mc-set-grp { margin-bottom: var(--sp-6); }
.mc-set-grp:last-of-type { margin-bottom: var(--sp-2); }
.mc-set-grp-titel {
  margin: 0 0 var(--sp-2) var(--sp-3);
  font-size: var(--fs-cap);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.mc-set-card {
  background: var(--card-tint);
  border: 1px solid var(--card-border-tint);
  border-radius: var(--r-md);
  box-shadow: var(--ring);
  overflow: hidden;
}
.mc-set-grp .mc-set-card + .mc-set-card { margin-top: var(--sp-3); }

/* Optionsblock = Zeile (+ optionale Unteroptionen); Hairline trennt die Blöcke */
.mc-opt-block { position: relative; border-bottom: 1px solid rgba(255,255,255,0.07); }
.mc-set-card > .mc-opt-block:last-child { border-bottom: none; }
/* aktive Option: Akzent-Streifen links als transform:scaleX-::before (compositor-
   freundlich, animierbar) statt box-shadow inset. */
.mc-opt-block::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
  border-radius: 0 2px 2px 0; background: rgb(var(--cell-glow-rgb));
  transform: scaleX(0); transform-origin: left center; opacity: 0;
  transition: transform var(--mo-4) var(--ease-spring), opacity var(--mo-2);
}
.mc-opt-block.is-an::before { transform: scaleX(1); opacity: 0.85; }

.mc-opt-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.mc-opt-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-opt-titel { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-opt-info { font-size: var(--fs-foot); font-weight: var(--fw-med); color: var(--text-muted); line-height: 1.35; }
.mc-ampel { flex-shrink: 0; }   /* ← Kern des Overflow-Fixes: Ampel wird nie geschoben/abgeschnitten */

/* Icon-Kachel links in Options-/Klapp-Zeilen — gleiche Sprache wie die Profil-Items. */
.mc-opt-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: var(--r-sm);
  background: rgba(var(--cell-glow-rgb), 0.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
}
.mc-opt-icon svg { width: 21px; height: 21px; }
/* iOS-Schalter in den Kalender-Einstellungen (wie Profil/Developer); ganze Zeile klickbar. */
.mc-opt-row--switch {
  cursor: pointer;
  transition: transform var(--mo-1) var(--ease-spring), background var(--mo-2) var(--ease-smooth);
}
.mc-opt-row--switch:active { transform: scale(0.985); background: rgba(255,255,255,0.04); }
/* Zahnrad-Knopf in einer Einstellungszeile (Meisterschule) → öffnet deren Fenster.
   Name stammt noch aus der entfernten WM-2026-Zeile, für die er gebaut wurde. */
.mc-wm-gear {
  flex-shrink: 0; width: 30px; height: 30px; margin-right: 6px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: var(--text-muted, #9aa3b2);
  cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.12s;
}
.mc-wm-gear svg { width: 17px; height: 17px; }
.mc-wm-gear:active { background: rgba(255,255,255,0.18); color: #fff; transform: scale(0.9); }
/* Klick-Animation: Zahnrad dreht sich kurz (per JS-Klasse neu gestartet). */
.mc-wm-gear--spin svg { animation: mc-gear-spin 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes mc-gear-spin { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
.mc-set-switch {
  width: 44px; height: 26px; flex-shrink: 0;
  border-radius: 13px;
  background: rgba(255,255,255,0.18);
  position: relative; overflow: hidden;
}
/* Track-Fill „wischt" beim Einschalten von links ein (transform:scale statt
   teurem Background-Wechsel). */
.mc-set-switch::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--btn-grad, rgb(var(--cell-glow-rgb)));
  transform: scale(0); transform-origin: left center; opacity: 0;
  transition: transform var(--mo-3) var(--ease-smooth), opacity var(--mo-2) var(--ease-smooth);
}
.mc-set-switch.an::before { transform: scale(1); opacity: 1; }
.mc-set-switch-knob {
  position: absolute; top: 3px; left: 3px; z-index: 1;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform var(--mo-3) var(--ease-spring);   /* federndes Einrasten */
  will-change: transform;
}
.mc-set-switch.an .mc-set-switch-knob { transform: translateX(18px); }
/* taktiles Drücken der ganzen Schalter-Zeile: Knob staucht kurz */
.mc-opt-row--switch:active .mc-set-switch-knob { transform: scaleX(1.12); }
.mc-opt-row--switch:active .mc-set-switch.an .mc-set-switch-knob { transform: translateX(16px) scaleX(1.12); }

/* ── Hub-Redesign: ruhige Startseite aus aufklappbaren Themen-Clustern ──────────
   Statt 7 stets offener Sektionen öffnet die Seite als kurze Liste: ein „Solo"-
   Schalter (Benachrichtigungen) + 4 zugeklappte Cluster mit Status-Zeile. Tippen
   klappt einen Cluster auf. Reduziert die wahrgenommene Dichte drastisch. */
.mc-settings-body .mc-set-card--solo { margin-bottom: var(--sp-3); }
.mc-cluster {
  background: var(--card-tint);
  border: 1px solid var(--card-border-tint);
  border-radius: var(--r-md);
  box-shadow: var(--ring);
  overflow: hidden;
}
.mc-cluster + .mc-cluster { margin-top: var(--sp-3); }
.mc-cluster-kopf {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); min-height: 60px;
  background: transparent; border: none; color: var(--text);
  font: inherit; cursor: pointer; text-align: left;
  transition: transform var(--mo-1) var(--ease-spring), background var(--mo-2) var(--ease-smooth);
}
.mc-cluster-kopf:active { transform: scale(0.985); background: rgba(255,255,255,0.05); }
/* offener Cluster: Kopf vom Inhalt durch Hairline trennen + dezent akzentuieren */
.mc-cluster.offen .mc-cluster-kopf { border-bottom: 1px solid rgba(255,255,255,0.07); }
.mc-cluster.offen { box-shadow: inset 3px 0 0 rgba(var(--cell-glow-rgb), 0.6), var(--ring); }
.mc-cluster-ico {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--r-sm);
  background: rgba(var(--cell-glow-rgb), 0.14);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
}
.mc-cluster-ico svg { width: 22px; height: 22px; }
.mc-cluster-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-cluster-titel { font-size: var(--fs-callout); font-weight: var(--fw-heavy); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-cluster-status { font-size: var(--fs-foot); font-weight: var(--fw-med); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-cluster-chevron {
  flex-shrink: 0; color: var(--text-muted); font-size: 22px; line-height: 1;
  transform-origin: 50% 50%;
  /* Spring-Bezier auf der Transition → Rotation schwingt leicht über 90° und
     settelt; spielt NUR bei echtem Zustandswechsel (nicht bei Re-Renders). */
  transition: transform var(--mo-3) var(--ease-spring-soft), color var(--mo-2);
}
.mc-cluster.offen .mc-cluster-chevron { transform: rotate(90deg); color: rgb(var(--cell-glow-rgb)); }

/* ── Cluster Auf/Zu: butterweiches Höhengleiten via grid-template-rows 0fr→1fr ──
   Der Inner-Wrapper (overflow:hidden) ist Pflicht, sonst kollabiert 0fr nicht. */
.mc-cluster-body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows var(--mo-4) var(--ease-out-quint), opacity var(--mo-2) var(--ease-smooth);
  contain: layout paint;
}
.mc-cluster.offen > .mc-cluster-body { grid-template-rows: 1fr; opacity: 1; }
.mc-cluster-body[hidden] { display: none; }
.mc-cluster-inner { overflow: hidden; min-height: 0; padding-bottom: var(--sp-2); }
/* letzte Zeile im Cluster ohne Trenn-Hairline (saubere untere Kante) */
.mc-cluster-inner > .mc-opt-block:last-child,
.mc-cluster-inner > .mc-klapp-block:last-child { border-bottom: none; }

/* Gestaffelter Zeilen-Eintritt beim Aufklappen (nur transform/opacity = GPU).
   .mc-anim-in wird beim expliziten Öffnen frisch gesetzt (mcSettings._verdrahten). */
@keyframes mcRowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mc-cluster-inner.mc-anim-in > .mc-opt-block,
.mc-cluster-inner.mc-anim-in > .mc-klapp-block,
.mc-cluster-inner.mc-anim-in > .mc-cluster-sub {
  animation: mcRowIn var(--mo-3) var(--ease-out-quint) both;
}
.mc-cluster-inner.mc-anim-in > :nth-child(1) { animation-delay: 0ms; }
.mc-cluster-inner.mc-anim-in > :nth-child(2) { animation-delay: calc(var(--mo-stagger) * 1); }
.mc-cluster-inner.mc-anim-in > :nth-child(3) { animation-delay: calc(var(--mo-stagger) * 2); }
.mc-cluster-inner.mc-anim-in > :nth-child(4) { animation-delay: calc(var(--mo-stagger) * 3); }
.mc-cluster-inner.mc-anim-in > :nth-child(n+5) { animation-delay: calc(var(--mo-stagger) * 4); }
/* leises Sub-Label, das lange Cluster (z. B. „Im Kalender") gliedert */
.mc-cluster-sub {
  padding: var(--sp-3) var(--sp-4) var(--sp-1);
  font-size: var(--fs-cap); font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text-muted);
}
.mc-cluster-sub:first-child { padding-top: var(--sp-2); }
/* Padding-Wrapper für freie Elemente (z. B. „＋ Neue Kategorie") im Cluster */
.mc-cluster-pad { padding: var(--sp-1) var(--sp-4) var(--sp-2); }
.mc-cluster-pad .mc-kat-neu-btn,
.mc-cluster-pad .mc-kat-neu { margin-top: 0; }

/* Klapp-Liste als Block (statt eigener Karte) — lebt direkt im Cluster */
.mc-klapp-block { border-bottom: 1px solid rgba(255,255,255,0.07); }
.mc-klapp-block .mc-set-evliste { padding: 0 var(--sp-4) var(--sp-2); }

.mc-set-hinweis--foot { margin-top: var(--sp-4); padding: 0 var(--sp-2); text-align: center; }

/* Eingangs-Stagger der vollen Seite: Cluster/Karten gleiten beim ÖFFNEN gestaffelt
   herein. Marker .mc-enter wird nur beim Öffnen gesetzt (mcSettings), nicht pro _render. */
@keyframes mcClusterIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.mc-settings-body.mc-enter > .mc-set-card,
.mc-settings-body.mc-enter > .mc-cluster { opacity: 0; animation: mcClusterIn var(--mo-5) var(--ease-out-quint) both; }
.mc-settings-body.mc-enter > :nth-child(1) { animation-delay: calc(var(--mo-stagger) * 2); }
.mc-settings-body.mc-enter > :nth-child(2) { animation-delay: calc(var(--mo-stagger) * 3.5); }
.mc-settings-body.mc-enter > :nth-child(3) { animation-delay: calc(var(--mo-stagger) * 5); }
.mc-settings-body.mc-enter > :nth-child(4) { animation-delay: calc(var(--mo-stagger) * 6.5); }
.mc-settings-body.mc-enter > :nth-child(5) { animation-delay: calc(var(--mo-stagger) * 8); }
.mc-settings-body.mc-enter > :nth-child(n+6) { animation-delay: calc(var(--mo-stagger) * 9.5); }


/* Unteroptionen (Stil-Chips / Wochentage / Urlaub-Detail), eingerückt unter der Zeile */
.mc-opt-sub { display: flex; flex-direction: column; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-3); min-width: 0; }
/* Aktions-Zeile (z.B. „Farbe für alle") als eigene volle Zeile in der Optionen-Karte */
.mc-opt-aktion { padding: var(--sp-3) var(--sp-4); min-width: 0; }
.mc-opt-sub .mc-stil-zeile { padding: 0; }
/* Stil-Auswahl: Mini-Kacheln mit dem echten Kalender-Markup (.mc-day/.mc-kopf/.mc-ind) —
   Antippen wählt den Stil (in place, s. mcSettings → der Rahmen gleitet hinüber). Fester
   Kachel-Rahmen, weil .mc-day seine Höhe sonst aus dem Monatsraster bezieht. Das
   Eindrücken kommt vom globalen Tipp-Gefühl (uiFx.initTapFeel), nicht von :active. */
.mc-stil-vorschau {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column;
  gap: 8px;
}
.mc-stil-vk {
  display: flex; flex-direction: column; align-items: stretch; gap: 5px;
  min-width: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mc-stil-vk .mc-stil-vk-tag {
  height: 54px; position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 0.22s var(--ease-smooth, ease-out), box-shadow 0.22s var(--ease-smooth, ease-out);
}
.mc-stil-vk.an .mc-stil-vk-tag {
  border-color: rgba(var(--cell-glow-rgb), 0.65);
  box-shadow: 0 0 12px -4px rgba(var(--cell-glow-rgb), 0.7);
}
.mc-stil-vk-name {
  font-size: 11.5px; font-weight: var(--fw-bold); color: var(--text-muted, #9aa3b2); text-align: center;
  transition: color 0.22s var(--ease-smooth, ease-out);
}
.mc-stil-vk.an .mc-stil-vk-name { color: var(--text); }
.mc-opt-sub .mc-urlaub-range { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.mc-opt-sub .mc-urlaub-range .mc-pick-btn { flex: 1 1 0; min-width: 0; }

/* Klapp-Listen-Karte: Kopf overflow-robust (Titel schrumpft, rechte Controls fix) */
.mc-set-card--klapp { /* nutzt .mc-set-card-Look, kein Extra-Padding */ }
.mc-klapp-kopf {
  width: 100%; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: transparent; border: none; color: var(--text);
  font: inherit; font-size: var(--fs-body); font-weight: var(--fw-heavy);
  cursor: pointer; text-align: left;
}
.mc-klapp-titel { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-klapp-kopf .mc-set-klapp-chevron,
.mc-klapp-kopf .mc-set-anzahl,
.mc-klapp-kopf .mc-add-btn { flex-shrink: 0; }
.mc-set-card--klapp .mc-set-evliste { padding: 0 var(--sp-4) var(--sp-1); }
.mc-set-kopf {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  font-size: var(--fs-t3);
  font-weight: var(--fw-heavy);
  color: var(--text);
}
.mc-set-hinweis { font-size: var(--fs-foot); color: var(--text-muted, #9aa3b2); margin-bottom: 8px; }
.mc-set-leer { color: var(--text-muted, #9aa3b2); font-size: var(--fs-body); padding: var(--sp-2) 0; }
.mc-set-ev {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
}
.mc-set-ev:last-child { border-bottom: none; }
.mc-set-dot { width: 13px; height: 13px; border-radius: 50%; background: var(--chip, #4a90e2); flex-shrink: 0; }
.mc-set-ev-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.mc-set-ev-titel { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-set-ev-info { font-size: var(--fs-foot); color: var(--text-muted, #9aa3b2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-set-del {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(231, 76, 60, 0.14);
  border: 1px solid rgba(231, 76, 60, 0.35);
  color: #ff8a7a;
  font-size: 12px;
  cursor: pointer;
}
.mc-set-del:active { background: rgba(231, 76, 60, 0.28); }
.mc-num-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.stats-body {
  contain: layout paint;   /* FPS: Scroll-Reflow/Repaint auf den Kind-Baum begrenzen */
  /* Horizontaler Padding identisch zum Header-Margin (12px) damit Cards
     mit dem Header exakt fluchten. Oben mehr Luft für den Glass-Glow. */
  padding: var(--sp-4) var(--sp-3);
  padding-bottom: max(100px, calc(40px + env(safe-area-inset-bottom))); /* Platz unter dem letzten Card für die Bottom-Nav (+ Safe-Area) */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* Stats-Cards: Liquid-Glass passend zu den Headern.
   Linear-Gradient als Basis (skaliert mit Card-Größe → sieht in kleinen UND
   großen Cards identisch verlauf-mäßig aus) plus kleiner Pixel-Radial-Akzent
   in der Ecke für den Glow-Punkt. */
.stats-card {
  background:
    /* Kleiner intensiver Akzent-Glow in der oberen-linken Ecke (Pixel-Größe
       damit er in kleinen Cards nicht die ganze Fläche überdeckt) */
    radial-gradient(circle 180px at 0% 0%, rgba(var(--cell-glow-rgb), 0.32) 0%, transparent 100%),
    /* Subtiler Spot-Glow in der unteren-rechten Ecke für Tiefe */
    radial-gradient(circle 140px at 100% 100%, rgba(var(--cell-glow-rgb), 0.18) 0%, transparent 100%),
    /* Durchgehender linearer Verlauf in Theme-Farbe — sorgt dafür dass die
       gesamte Card-Fläche tinted ist, auch in kleinen Cards */
    linear-gradient(135deg,
      rgba(var(--cell-glow-rgb), 0.18) 0%,
      rgba(var(--cell-glow-rgb), 0.07) 50%,
      rgba(var(--cell-glow-rgb), 0.03) 100%),
    /* Glass-Highlight für die Frosted-Optik */
    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.10);
  border-radius: 22px;
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
  backdrop-filter: blur(calc(11px * var(--glass-mult) * var(--glass-scroll, 1))) saturate(160%);
  -webkit-backdrop-filter: blur(calc(11px * var(--glass-mult) * var(--glass-scroll, 1))) saturate(160%);
  box-shadow:
    0 12px 32px -16px rgba(0,0,0,0.40),
    0 2px 8px -2px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.12);
  isolation: isolate;
}
.stats-card-title {
  font-size: 10px;
  font-weight: var(--fw-heavy);
  color: var(--text);
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sektionen innerhalb der gemeinsamen .stats-card */
.stats-section {
  /* keine eigene margin/padding — Sektionen sind direkte Children der Card,
     der Card-Padding (sp-5) regelt die Außenabstände */
}

/* Trenn-Linie zwischen den Sektionen: weicher Gradient der zur Mitte hin
   intensiver wird, zu den Rändern transparent ausläuft → wirkt wie ein
   eleganter "Pinch" statt einer harten Linie. */
.stats-section-divider {
  height: 1px;
  margin: var(--sp-5) 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.16) 20%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.16) 80%,
    transparent 100%);
}
/* Icon im Titel — subtiler, weniger dominant */
.stats-card-title svg {
  opacity: 0.85;
}
.stat-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: var(--sp-3);
}
.stat-row:last-child { border-bottom: none; padding-bottom: 2px; }
.stat-row:first-of-type { padding-top: 2px; }
.stat-meal {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: var(--ls-snug);
  /* Lange Gerichtsnamen sauber abschneiden */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}