/* calendar.css — Kalender-Grid-Optik, 1:1 aus dem ERP portiert (calendar.css + kalender.css
   zusammengeführt), NACKT bereinigt: kein Sync-Sidebar, kein Teams, kein MagePickerPlus, kein
   Kategorie-Carousel. Nur echte Kalender-Optik; Formular-Controls kommen aus den Kern-Bausteinen.

   Compliance: sämtliche rohen Hex/px/rgba wurden auf cc2-Design-Tokens (core/Ui.php :root)
   umgestellt; Layout/Grid/Selektoren unverändert. */

/* ── hidden-Overrides: Elemente mit display-setzenden Klassen (mage-field/mage-btn) müssen sich
   trotzdem per [hidden] ausblenden lassen ── */
.cal-conflict-warn[hidden],
.cal-when-popover[hidden],
.cal-recur-end[hidden],
.cal-modal-overlay[hidden],
.cal-teams-link[hidden],
.cal-rem-custom[hidden],
.cal-readonly-note[hidden],
.cal-btn-delete[hidden] { display: none !important; }

/* ── Split-Layout ── */
.cal-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cal-split { display: flex; flex: 1; min-height: 0; }
/* .cal-sidebar trägt zusätzlich die Kern-Klasse .wn-sidebar (windownav) → das Fenster wird full-bleed
   und der Kern-Fenster-Audit erkennt eine bündige Kern-Sidebar. Die eigenen Werte überschreiben die
   hellen wn-sidebar-Defaults (Breite/bg/Border) — spätere Quelle gewinnt bei gleicher Spezifität. */
.wn-sidebar.cal-sidebar { width: var(--sz-280); min-width: var(--sz-280); max-width: var(--sz-280); flex-shrink: 0; background: var(--grey-900); color: var(--grey-200); border-right: none; overflow-y: auto; padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-7); }
.cal-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.cal-container { flex: 1; overflow: hidden; display: flex; flex-direction: column; background: var(--surface-2); }

/* ── Toolbar ── */
.cal-main-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-7) var(--sp-4) 0; background: var(--grey-900); color: var(--grey-200); flex-shrink: 0; }
.cal-toolbar-group { display: flex; align-items: center; gap: var(--sp-3); }
.cal-toolbar-left { gap: var(--sp-5); }
.cal-toolbar-right { gap: var(--sp-3); }

/* Suche */
.cal-search-wrap { position: relative; width: var(--sz-440); max-width: 40vw; }
.cal-search-input { height: var(--sz-30); box-sizing: border-box; padding: 0 var(--sp-5); }
.cal-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--radius) var(--radius); max-height: var(--sz-240); overflow-y: auto; z-index: var(--z-popover); display: none; box-shadow: var(--shadow-md); }
.cal-search-dropdown.open { display: block; }
.cal-search-result { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; font-size: var(--fs-sm); }
.cal-search-result:hover { background: var(--grey-100); }
.cal-search-dot { width: var(--sz-8); height: var(--sz-8); border-radius: 50%; flex-shrink: 0; }
.cal-search-result-info { flex: 1; min-width: 0; }
.cal-search-result-title { font-weight: var(--fw-med); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-search-result-date { font-size: var(--fs-xs); color: var(--muted); }
.cal-search-empty { padding: var(--sp-5) var(--sp-4); font-size: var(--fs-sm); color: var(--muted); text-align: center; }

/* View-Switcher (Pillen) */
/* View-Switcher = Kern-Baustein Design::segmented (.cc-seg) — keine eigene Button-Optik mehr im Modul. */

/* ── Mini-Kalender + Monatsstrip ── */
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-mini-grid-kw { grid-template-columns: 22px repeat(7, 1fr); }
.cal-mini-kw-header { font-size: var(--fs-2xs); color: transparent; }
.cal-mini-kw { font-size: var(--fs-2xs); font-weight: var(--fw-heavy); color: color-mix(in srgb, var(--grey-200) 55%, transparent); display: flex; align-items: center; justify-content: center; border-right: 1px solid color-mix(in srgb, var(--surface) 8%, transparent); padding-right: var(--sp-1); }
.cal-mini-dayname { font-size: var(--fs-2xs); color: var(--muted); text-align: center; padding: var(--sp-1) 0; font-weight: var(--fw-bold); }
.cal-mini-day { text-align: center; font-size: var(--fs-xs); color: var(--grey-200); cursor: pointer; border-radius: 50%; width: var(--sz-28); height: var(--sz-28); display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; }
.cal-mini-day:hover { background: color-mix(in srgb, var(--surface) 6%, transparent); }
.cal-mini-day.other-month { color: color-mix(in srgb, var(--grey-200) 25%, transparent); }
.cal-mini-day.selected { box-shadow: var(--focus); }
.cal-mini-day.has-events { background: color-mix(in srgb, var(--day-bg, var(--o)) calc(var(--day-alpha, 0.5) * 100%), transparent); color: var(--surface); font-weight: var(--fw-bold); }
.cal-mini-day.today { background: var(--grey-600); color: var(--surface); box-shadow: var(--focus); }

.cal-monthstrip-wrap { position: relative; margin-bottom: var(--sp-2); }
.cal-mini-meta { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); color: color-mix(in srgb, var(--surface) 55%, transparent); letter-spacing: var(--tracking); text-transform: uppercase; padding: var(--sp-1) 0 var(--sp-2); }
.cal-mini-meta-kw { color: color-mix(in srgb, var(--surface) 40%, transparent); }
.cal-mini-strip-row { position: relative; padding: 0 var(--sp-10); }
.cal-monthstrip { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); overflow: hidden; padding: var(--sp-1) 0; }
.cal-monthstrip-item { background: transparent; border: none; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--tracking); color: color-mix(in srgb, var(--surface) 35%, transparent); cursor: pointer; border-radius: var(--radius); font-family: inherit; transition: color var(--dur-fast), font-size var(--dur-fast); }
.cal-monthstrip-item:hover { color: color-mix(in srgb, var(--surface) 70%, transparent); }
.cal-monthstrip-item.is-active { color: var(--o); font-size: var(--fs-base); font-weight: var(--fw-heavy); }
.cal-mini-strip-chev { position: absolute; top: 50%; transform: translateY(-50%); background: var(--grey-900); border: none; color: color-mix(in srgb, var(--surface) 70%, transparent); cursor: pointer; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-lg); line-height: 1; z-index: var(--z-raised); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.cal-mini-strip-chev:hover { color: var(--surface); }
.cal-mini-strip-chev.left { left: 0; }
.cal-mini-strip-chev.right { right: 0; }

/* ── Sidebar-Sektionen ── */
.cal-sidebar-title { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking); margin-bottom: var(--sp-3); }
.cal-sidebar-section-flex { flex: 1; min-height: 0; }

/* Kategorie-Pillen (Multi-Select-Filter) */
/* Kategorien als Kreis-Carousel (Kern-Baustein carousel liefert Endless-Scroll + Skalierung; die
   Kreis-Optik ist kalender-eigen). Label hebt/fadet über das vom Kern gesetzte --cc-carousel-ratio. */
.cal-cat-carousel { margin: var(--sp-7) 0 var(--sp-6); }
.cal-cat-circle { width: var(--sz-32); height: var(--sz-32); border-radius: 50%; background: transparent; border: 3px solid var(--cat-color, var(--muted)); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.cal-cat-circle:hover { filter: brightness(1.15); }
.cal-cat-circle-dot { width: var(--sz-6); height: var(--sz-6); border-radius: 50%; background: var(--cat-color); }
.cal-cat-circle-label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(calc((1 - var(--cc-carousel-ratio, 1)) * -14px)); margin-bottom: var(--sp-1); font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--grey-200); white-space: nowrap; pointer-events: none; line-height: 1; opacity: calc(1 - var(--cc-carousel-ratio, 1) * 3); }   /* nur die Beschriftung des mittleren Kreises — die Nachbarn liegen 44px daneben, ihre Namen überlagerten sich */
.cal-cat-circle.is-inactive { border-color: color-mix(in srgb, var(--surface) 18%, transparent); opacity: var(--op-dim) !important; }

/* Anstehende Termine */
.cal-upcoming-list { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.cal-up2-item { display: flex; align-items: stretch; background: color-mix(in srgb, var(--surface) 4%, transparent); border-radius: var(--radius); overflow: hidden; cursor: pointer; margin-bottom: var(--sp-2); transition: background var(--dur-fast); }
.cal-up2-item:hover { background: color-mix(in srgb, var(--surface) 8%, transparent); }
.cal-up2-date { flex-shrink: 0; width: var(--sz-48); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-3) 0; color: var(--surface); }
.cal-up2-date-num { font-size: var(--fs-lg); font-weight: var(--fw-heavy); line-height: 1; }
.cal-up2-date-mon { font-size: var(--fs-2xs); font-weight: var(--fw-bold); margin-top: var(--sp-1); letter-spacing: var(--tracking); opacity: var(--op-strong); }
.cal-up2-info { flex: 1; min-width: 0; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; justify-content: center; }
.cal-up2-title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--grey-200); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.cal-up2-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-up2-time { flex-shrink: 0; align-self: center; margin-right: var(--sp-3); font-size: var(--fs-2xs); font-weight: var(--fw-heavy); padding: var(--sp-1) var(--sp-3); border-radius: var(--radius); background: var(--ev-color); color: var(--surface); white-space: nowrap; letter-spacing: var(--tracking); }
.cal-up2-time.all-day { text-transform: uppercase; font-size: var(--fs-2xs); }
.cal-upcoming-empty { font-size: var(--fs-sm); color: var(--muted); padding: var(--sp-3) 0; }

/* Avatar (Attendee-Initialen) */
.cal-att-ini { display: inline-flex; align-items: center; justify-content: center; color: var(--surface); font-weight: var(--fw-bold); border-radius: 50%; flex-shrink: 0; }

/* ============================================================
   MONTH VIEW
   ============================================================ */
.cal-month { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cal-month-header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--grey-900); color: var(--grey-200); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--tracking); }
.cal-month-day-name { padding: var(--sp-3); text-align: center; color: color-mix(in srgb, var(--grey-200) 70%, transparent); }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); flex: 1; grid-auto-rows: 1fr; }
.cal-month-cell { border-right: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); padding: var(--sp-1) var(--sp-2); min-height: var(--sz-80); overflow: hidden; position: relative; background: var(--surface-2); transition: background var(--dur-fast); }
.cal-month-cell:nth-child(7n) { border-right: none; }
.cal-month-cell:hover { background: var(--grey-100); }
.cal-month-cell.cal-other-month { background: var(--grey-50); color: color-mix(in srgb, var(--ink) 35%, transparent); }
.cal-month-cell.cal-other-month .cal-cell-date { color: color-mix(in srgb, var(--ink) 35%, transparent); }
.cal-month-cell.cal-today { background: color-mix(in srgb, var(--o) 15%, var(--surface)); }
.cal-month-cell.cal-today:hover { background: color-mix(in srgb, var(--o) 25%, var(--surface)); }
.cal-month-cell.cal-today .cal-cell-date, .cal-month-cell.cal-today .cal-today-mark { color: var(--ink); font-weight: var(--fw-heavy); }
.cal-month-cell.cal-holiday-cell { background: color-mix(in srgb, var(--o) 15%, var(--surface)); }
.cal-cell-date { font-size: var(--fs-sm); color: var(--grey-500); margin-bottom: var(--sp-1); }
.cal-today-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--sz-24); height: var(--sz-24); border-radius: 50%; background: var(--o); color: var(--surface); font-size: var(--fs-sm); font-weight: var(--fw-heavy); }
.cal-drop-target { background: color-mix(in srgb, var(--o) 15%, var(--surface)) !important; }

/* Event-Chip (Monat/Woche/Tag) */
.cal-ev-box { position: relative; padding: var(--sp-1) var(--sp-3); margin-bottom: var(--sp-2); background: var(--ev-color); color: var(--surface); border-radius: var(--radius); font-weight: var(--fw-med); font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-box:hover { background: color-mix(in srgb, var(--ev-color) 88%, var(--ink)); }
.cal-ev-box-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.cal-event-more { font-size: var(--fs-2xs); color: var(--muted); padding: var(--sp-0) var(--sp-2); cursor: pointer; }
.cal-event-more:hover { color: var(--o); }
.cal-holiday-box { background: var(--warn-fg); color: var(--surface); cursor: default; pointer-events: none; }

/* ============================================================
   WEEK VIEW
   ============================================================ */
.cal-week { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cal-week-header { display: flex; background: var(--grey-900); flex-shrink: 0; }
.cal-week-gutter { width: var(--sz-56); flex-shrink: 0; text-align: right; padding-right: var(--sp-3); }
.cal-week-day-col { flex: 1; text-align: center; padding: var(--sp-2) 0; }
.cal-week-day-name { font-size: var(--fs-xs); color: color-mix(in srgb, var(--grey-200) 70%, transparent); text-transform: uppercase; font-weight: var(--fw-bold); letter-spacing: var(--tracking); }
.cal-week-day-num { font-size: var(--fs-lg); font-weight: var(--fw-heavy); color: color-mix(in srgb, var(--grey-200) 85%, transparent); margin-top: var(--sp-1); }
.cal-week-day-col.cal-today-col { background: var(--grey-900); box-shadow: var(--focus); }
.cal-week-day-col.cal-today-col .cal-week-day-name { color: var(--surface); }
.cal-week-day-col.cal-today-col .cal-week-day-num { background: var(--o); color: var(--surface); font-weight: var(--fw-heavy); display: inline-block; padding: 0 var(--sp-2); border-radius: var(--radius); }
.cal-week-day-col.cal-holiday-col { background: color-mix(in srgb, var(--o) 15%, var(--surface)); }
.cal-week-holiday-label { font-size: var(--fs-2xs); color: var(--warn-fg); font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-week-allday { display: flex; border-bottom: 1px solid var(--border); min-height: var(--sz-28); flex-shrink: 0; }
.cal-allday-label { font-size: var(--fs-2xs); color: var(--muted); text-transform: uppercase; display: flex; align-items: center; justify-content: flex-end; padding-right: var(--sp-3); }
.cal-week-allday-cell { flex: 1; border-left: 1px solid var(--border); padding: var(--sp-1) var(--sp-1); }
.cal-week-body { flex: 1; overflow-y: auto; position: relative; }
.cal-week-scroll { position: relative; min-height: fit-content; }
.cal-week-row { display: flex; height: var(--sz-48); border-bottom: 1px solid var(--border); }
.cal-time-label { font-size: var(--fs-xs); color: var(--muted); display: flex; align-items: flex-start; justify-content: flex-end; padding-right: var(--sp-3); }
.cal-week-cell { flex: 1; border-left: 1px solid var(--border); position: relative; }
.cal-week-cell:hover { background: var(--grey-50); }
.cal-week-events-overlay { position: absolute; top: 0; left: 56px; right: 0; bottom: 0; pointer-events: none; }
.cal-week-event { position: absolute; border-radius: var(--radius); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); cursor: pointer; pointer-events: auto; overflow: hidden; background: var(--ev-color); color: var(--surface); z-index: var(--z-base); }
.cal-week-event:hover { z-index: var(--z-raised); box-shadow: var(--shadow-md); }
.cal-week-event-time { font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.cal-week-event-title { font-weight: var(--fw-med); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   DAY VIEW
   ============================================================ */
.cal-day { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cal-day-allday { display: flex; border-bottom: 1px solid var(--border); min-height: var(--sz-28); flex-shrink: 0; background: var(--grey-50); }
.cal-day-allday-events { flex: 1; padding: var(--sp-1) var(--sp-3); display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.cal-day-body { flex: 1; overflow-y: auto; position: relative; }
.cal-day-scroll { position: relative; min-height: fit-content; }
.cal-day-row { display: flex; height: var(--sz-48); border-bottom: 1px solid var(--border); }
.cal-day-cell { flex: 1; border-left: 1px solid var(--border); position: relative; }
.cal-day-cell:hover { background: var(--grey-50); }
.cal-day-events-overlay { position: absolute; top: 0; left: 56px; right: 8px; bottom: 0; pointer-events: none; }
.cal-day-event { position: absolute; border-radius: var(--radius); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); cursor: pointer; pointer-events: auto; overflow: hidden; background: var(--ev-color); color: var(--surface); }
.cal-day-event:hover { box-shadow: var(--shadow-md); }

/* Now-Line */
.cal-now-line { position: absolute; left: 0; right: 0; height: var(--sz-6); background: var(--danger); z-index: var(--z-raised); pointer-events: none; }
.cal-now-line::before { content: ''; position: absolute; left: -4px; top: -3px; width: var(--sz-8); height: var(--sz-8); border-radius: 50%; background: var(--danger); }
.cal-now-line-full { left: 0; width: 100%; }

/* ============================================================
   YEAR VIEW
   ============================================================ */
.cal-year { padding: var(--sp-7); overflow-y: auto; height: 100%; background: var(--surface-2); }
.cal-year-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); }
.cal-year-month { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); cursor: pointer; }
.cal-year-month:hover { border-color: var(--o); box-shadow: var(--shadow-md); }
.cal-year-month-title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--sp-3); text-align: center; }
.cal-year-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-year-day-name { font-size: var(--fs-2xs); color: var(--muted); text-align: center; padding: var(--sp-1) 0; }
.cal-year-day { text-align: center; font-size: var(--fs-2xs); color: var(--grey-600); padding: var(--sp-1) 0; position: relative; cursor: pointer; }
.cal-year-day.today { font-weight: var(--fw-heavy); color: var(--o); }
.cal-year-day.other-month { color: var(--grey-300); }
.cal-year-day.has-events::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--sz-6); height: var(--sz-6); border-radius: 50%; background: var(--dot-color, var(--o)); }

/* ============================================================
   EVENT-SIDEBAR (Overlay von rechts) — self-contained
   ============================================================ */
.cal-sidebar-overlay { position: fixed; inset: 0; background: var(--scrim); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: opacity var(--dur); }
.cal-sidebar-overlay.active { opacity: 1; visibility: visible; }
.cal-event-sidebar { position: fixed; top: 0; right: calc(-1 * var(--sz-640)); width: var(--sz-640); max-width: 100%; height: 100%; background: var(--surface); box-shadow: var(--shadow-lg); z-index: var(--z-drawer); display: flex; flex-direction: column; transition: right var(--dur-slow); }
.cal-event-sidebar.open { right: 0; }
.cal-event-sidebar-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-6) var(--sp-8); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cal-event-sidebar-header h4 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); }
.cal-sidebar-body { flex: 1; overflow-y: auto; padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-1); }
.cal-sidebar-body .mage-field { margin-bottom: var(--sp-6); }
.cal-sidebar-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-6) var(--sp-8); border-top: 1px solid var(--border); flex-shrink: 0; }

/* Sichtbarkeits-Toggle-Zeile */
.cal-top-actions { display: flex; align-items: center; justify-content: flex-end; margin-bottom: var(--sp-6); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.cal-priv-toggle-wrap { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; user-select: none; }
.cal-priv-toggle-label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--grey-500); display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.cal-priv-toggle-wrap.is-public .cal-priv-toggle-label { color: var(--ok); }

/* Wiederholung: „Endet am" steht als eigenes Feld darunter (nebeneinander wurden beide Felder halb so breit
   und klebten ohne Abstand am Ort-Feld). */
.cal-recur-end { position: relative; }

/* Konflikt-Warnung */
.cal-conflict-warn { background: var(--warn-bg); border: 1px solid var(--warn); border-radius: var(--radius); padding: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-5); font-size: var(--fs-sm); color: var(--warn-fg); }

/* When-Trigger + Popover (Datum/Zeit) */
.cal-when-trigger { display: flex; align-items: center; gap: var(--sp-3); width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); cursor: pointer; font-size: var(--fs-base); color: var(--ink); text-align: left; transition: border-color var(--dur-fast); }
.cal-when-trigger:hover { border-color: var(--ink); }
.cal-when-trigger .cal-when-text { flex: 1; }
.cal-when-chev { font-size: var(--fs-xs); opacity: var(--op-muted); }
.cal-when-popover { position: relative; margin-top: var(--sp-2); background: var(--surface); border: 1px solid var(--grey-300); border-radius: var(--radius); padding: var(--sp-5); box-shadow: var(--shadow-md); z-index: var(--z-popover); width: 100%; box-sizing: border-box; }
.cal-recur-end .cal-when-popover { position: absolute; top: 100%; left: 0; right: 0; margin-top: var(--sp-1); z-index: var(--z-popover); }
.cal-wp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.cal-wp-title { font-size: var(--fs-base); font-weight: var(--fw-heavy); color: var(--ink); }
.cal-wp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-0); margin-bottom: var(--sp-4); }
.cal-wp-dn { font-size: var(--fs-2xs); color: var(--muted); text-align: center; padding: var(--sp-1) 0; font-weight: var(--fw-heavy); text-transform: uppercase; }
.cal-wp-day { text-align: center; padding: var(--sp-2) 0; font-size: var(--fs-sm); color: var(--ink); cursor: pointer; border-radius: var(--radius); user-select: none; }
.cal-wp-day:hover { background: var(--grey-100); }
.cal-wp-day.other-month { color: var(--grey-300); }
.cal-wp-day.today { font-weight: var(--fw-heavy); color: var(--o); }
.cal-wp-day.selected, .cal-wp-day.range-start, .cal-wp-day.range-end { background: var(--o); color: var(--surface); font-weight: var(--fw-heavy); }
.cal-wp-day.in-range { background: color-mix(in srgb, var(--o) 15%, var(--surface)); color: var(--ink); }
.cal-wp-times { display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.cal-wp-times label { font-size: var(--fs-xs); color: var(--grey-500); }
.cal-wp-times input { width: var(--sz-100); }
.cal-wp-times-spacer { flex: 1; }
.cal-wp-foot > :first-child { margin-right: auto; }
.cal-wp-foot { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Attendees */
.cal-attendee-add { display: flex; gap: var(--sp-2); align-items: center; }
.cal-attendee-add .cal-att-name { flex: 0 0 40%; }
.cal-attendee-add .cal-att-email { flex: 1; }
.cal-attendee-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.cal-attendee-row { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1); background: var(--grey-100); border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--ink); }
.cal-attendee-row .cal-att-ini { width: var(--sz-20); height: var(--sz-20); font-size: var(--fs-2xs); }
.cal-attendee-remove { cursor: pointer; color: var(--muted); font-size: var(--fs-md); padding: 0 var(--sp-1); line-height: 1; }
.cal-attendee-remove:hover { color: var(--danger-fg); }

/* ============================================================
   KATEGORIE-MODAL
   ============================================================ */
.cal-modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--overlay); display: flex; align-items: center; justify-content: center; }
.cal-modal { background: var(--surface); width: var(--sz-440); max-width: 95%; border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.cal-cat-modal-width { width: var(--sz-440); }
.cal-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-6) var(--sp-8); border-bottom: 1px solid var(--border); background: var(--grey-50); }
.cal-modal-title { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); }
.cal-modal-body { padding: 0; }
.cal-cat-modal-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-7); border-bottom: 1px solid var(--border); }
.cal-cat-modal-item:hover { background: var(--grey-50); }
.cal-cat-modal-color { width: var(--sz-20); height: var(--sz-20); border-radius: 50%; flex-shrink: 0; border: 2px solid transparent; }
.cal-cat-modal-color-pick { cursor: pointer; border: 2px solid color-mix(in srgb, var(--ink) 15%, transparent); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast); position: relative; }
.cal-cat-modal-color-pick:hover { transform: scale(1.15); border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.cal-cat-modal-name { flex: 1; font-size: var(--fs-base); color: var(--ink); outline: none; }
.cal-cat-modal-item.is-system .cal-cat-modal-name { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.cal-cat-modal-sys { font-size: var(--fs-2xs); font-weight: var(--fw-heavy); color: var(--grey-500); background: var(--grey-200); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius); text-transform: uppercase; letter-spacing: var(--tracking); }
.cal-cat-modal-delete { cursor: pointer; color: var(--muted); font-size: var(--fs-lg); line-height: 1; }
.cal-cat-modal-delete:hover { color: var(--danger-fg); }
.cal-cat-modal-empty { padding: var(--sp-7) var(--sp-8); font-size: var(--fs-base); color: var(--muted); text-align: center; }
.cal-cat-modal-footer { padding: var(--sp-5) var(--sp-8); border-top: 1px solid var(--border); }
.cal-cat-modal-input-row { display: flex; gap: var(--sp-3); align-items: center; }
.cal-cat-modal-input-row .form-control { flex: 1; }
.cal-cat-color-options { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.cal-cat-color-opt { width: var(--sz-24); height: var(--sz-24); border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.cal-cat-color-opt:hover { border-color: var(--muted); }
.cal-cat-color-opt.selected { border-color: var(--ink); box-shadow: var(--focus); }
.cal-cat-modal-popover { position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface); border: 1px solid var(--grey-300); border-radius: var(--radius); padding: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-1); width: var(--sz-200); box-shadow: var(--shadow-md); z-index: var(--z-popover); }
.cal-cat-modal-popover .cal-cat-color-opt { width: var(--sz-22); height: var(--sz-22); }

/* ============================================================
   DASHBOARD-WIDGET — reiches Dual-Panel (1:1 aus dem ERP portiert, tokenisiert).
   Links: Datum/Uhr + heutige Termine (Creme). Rechts: dunkles Monatsraster mit
   Multi-Day-Event-Balken, Single-Event-Kreisen, Feiertags-Punkt, Heute weiß.
   ============================================================ */
.cal-widget[data-widget-id] { width: var(--sz-560); background: var(--grey-800); color: var(--surface); overflow: hidden; }
.cal-wg-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-5); background: var(--grey-900); border-bottom: 1px solid var(--shadow-line); cursor: move; }
.cal-wg-title { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--grey-200); }
.cal-wg-open.ac-btn-action { background: transparent; color: var(--grey-400); }
.cal-wg-open.ac-btn-action:hover { background: color-mix(in srgb, var(--surface) 10%, transparent); color: var(--surface); }
.cal-wg-split { display: grid; grid-template-columns: minmax(var(--sz-160), 38%) 1fr; }

/* LINKS: Datum/Uhr + heutige Termine (Creme) */
.cal-wg-left { background: var(--surface-2); color: var(--ink); padding: var(--sp-7) var(--sp-6) var(--sp-5); display: flex; flex-direction: column; min-height: 0; }
.cal-wg-kw { font-size: var(--fs-2xs); font-weight: var(--fw-heavy); letter-spacing: var(--tracking); color: var(--o); }
.cal-wg-weekday { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-1); }
.cal-wg-clock { font-size: var(--fs-xxl); font-weight: var(--fw-heavy); color: var(--ink); line-height: 1; }
.cal-wg-date { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); margin-bottom: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.cal-wg-tasks-head { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3); }
.cal-wg-tasks { display: flex; flex-direction: column; gap: var(--sp-2); overflow-y: auto; }
.cal-wg-task { display: flex; align-items: center; gap: var(--sp-3); }
.cal-wg-task-time { display: inline-flex; align-items: center; justify-content: center; min-width: var(--sz-48); padding: var(--sp-1) var(--sp-3); background: var(--ev-color, var(--o)); color: var(--surface); font-size: var(--fs-2xs); font-weight: var(--fw-bold); border-radius: var(--radius); flex-shrink: 0; }
.cal-wg-task-title { font-size: var(--fs-xs); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-wg-empty { font-size: var(--fs-xs); color: var(--muted); padding: var(--sp-3) 0; }

/* RECHTS: dunkles Monatsraster */
.cal-wg-right { background: var(--grey-900); padding: var(--sp-5); display: flex; flex-direction: column; }
.cal-wg-month { text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-heavy); letter-spacing: var(--tracking); color: var(--surface); margin-bottom: var(--sp-3); }
.cal-wg-grid { display: flex; flex-direction: column; gap: var(--sp-0); }
.cal-wg-row { display: grid; grid-template-columns: var(--sz-24) repeat(7, 1fr); align-items: center; }
.cal-wg-dowrow { padding-bottom: var(--sp-1); }
.cal-wg-kwcell { grid-column: 1; grid-row: 1; font-size: var(--fs-2xs); color: var(--grey-500); font-weight: var(--fw-bold); text-align: center; }
.cal-wg-dowcell { font-size: var(--fs-2xs); color: var(--grey-500); text-transform: uppercase; text-align: center; font-weight: var(--fw-bold); letter-spacing: var(--tracking); }
.cal-wg-cell { grid-row: 1; display: flex; align-items: center; justify-content: center; min-height: var(--sz-28); font-size: var(--fs-xs); color: var(--grey-200); position: relative; border-radius: var(--radius); z-index: var(--z-raised); }
.cal-wg-other { color: var(--grey-600); }
.cal-wg-sun { color: var(--grey-400); }
.cal-wg-num { line-height: 1; position: relative; }
.cal-wg-today .cal-wg-num { background: var(--surface); color: var(--grey-900); width: var(--sz-24); height: var(--sz-24); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); font-weight: var(--fw-heavy); }
.cal-wg-single .cal-wg-num { background: var(--ev-color, var(--o)); color: var(--surface); width: var(--sz-24); height: var(--sz-24); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); font-weight: var(--fw-heavy); }
.cal-wg-today.cal-wg-single .cal-wg-num { background: var(--surface); color: var(--grey-900); box-shadow: var(--focus); }
.cal-wg-inev { color: var(--surface); font-weight: var(--fw-bold); }
.cal-wg-holdot { position: absolute; bottom: var(--sp-0); left: 50%; transform: translateX(-50%); width: var(--sz-6); height: var(--sz-6); border-radius: 50%; background: var(--danger); }
.cal-wg-bar { grid-row: 1; height: var(--sz-22); border-radius: var(--radius); align-self: center; background: var(--ev-color, var(--o)); opacity: var(--op-strong); z-index: var(--z-base); }

/* FOOTER */
.cal-wg-foot { background: var(--grey-900); border-top: 1px solid var(--shadow-line); padding: var(--sp-3) var(--sp-5); text-align: center; }
.cal-wg-foot a { color: var(--o); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-decoration: none; }
.cal-wg-foot a:hover { color: var(--o-h); }


/* ───── Teilnehmer (CRM-Picker + externe Adresse), Erinnerungen, Teams, Synchronisation ───── */
.cal-att-picker { margin-bottom: var(--sp-3); }
.cal-attendee-add .cal-att-email { flex: 1; }
.cal-attendee-add .cal-att-name { flex: 0 0 38%; }
.cal-att-kind { color: var(--muted); font-size: var(--fs-xs); }
.cal-att-status { font-size: var(--fs-xs); }
.cal-att-accepted { color: var(--ok); }
.cal-att-declined { color: var(--danger); }
.cal-att-tentative { color: var(--warn-fg); }
.cal-inline-toggle { display: inline-flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; }
.cal-reminder-list { margin-top: 0; margin-bottom: var(--sp-3); }
.cal-reminder-row .bi-bell { color: var(--o); }
.cal-reminder-add { display: flex; align-items: center; gap: var(--sp-2); }
.cal-reminder-add .cal-rem-preset { flex: 1; }
.cal-rem-custom { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cal-rem-custom .form-control, .cal-rem-custom .mage-input { width: var(--sz-80); }
.cal-top-actions { justify-content: space-between; gap: var(--sp-3); }
.cal-teams-btn[aria-pressed="true"] { background: var(--info); color: var(--surface); border-color: var(--info); }
.cal-teams-btn[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--info) 85%, var(--ink)); color: var(--surface); }
.cal-teams-link { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-6); background: color-mix(in srgb, var(--info) 10%, var(--surface)); border-left: 3px solid var(--info); border-radius: var(--radius); }
.cal-teams-link .bi-camera-video-fill { color: var(--info); }
.cal-teams-anchor { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-readonly .cal-sidebar-body { opacity: var(--op-half); }
.cal-readonly .cal-sidebar-body .cal-attendee-remove, .cal-readonly .cal-att-picker, .cal-readonly .cal-attendee-add, .cal-readonly .cal-reminder-add, .cal-readonly .cal-inline-toggle { display: none; }
.cal-sync .cc-input-row { align-items: center; }
.cal-steps { margin: 0; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.cal-copied { color: var(--ok); }
.cal-teams-test { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cal-teams-test-result { color: var(--muted); font-size: var(--fs-sm); }