/* ─────────────────────────────────────────────────────────────────────────
   Apple-style calendar (Phase 1)
   Namespace: .ac-*   (apple-calendar)

   The container is hidden in Etappe 1A so we can ship the foundation and
   the new module wiring without showing a half-built UI to Marco's tenant.
   Etappe 1F flips display:none → grid and stops the legacy klassik render.

   All colors / radii / spacing come from v2 tokens (--color-primary, --t1,
   --s1 etc.) which work in both dark and light theme — see the completed
   light-mode block in src/css/45-modern-premium.css.
   ───────────────────────────────────────────────────────────────────────── */

/* Etappe 1F: Apple-Kalender ist jetzt der Default Render-Pfad. Klassik-
   Markup bleibt im DOM aber wird per CSS versteckt — andere Module
   konsumieren noch Helper aus 08-calendar.js (_custName, getAptsForDate
   etc.), deshalb laden wir das Skript weiter.

   Notfall-Rollback: ?ac=0 in der URL → body[data-ac-rollback] → wechselt
   zurück zu Klassik. Bleibt als Safety-Net falls wider Erwarten was
   nicht funktioniert in production.

   Solid background overrides the body's atmospheric gradient so the
   calendar area stays neutral and clean — Marco's "kein blauer Tint"
   ask. */
.ac-cal {
  display: grid;
  position: relative;
  grid-template-columns: 1fr;
  /* Marco's responsive ask: Container fuellt exakt den Rest des
     Viewports — kein Scroll im Kalender-Page. Calc beruecksichtigt:
       - App-Shell-Header (56 px, in --mb-shell-header-height)
       - Operator-Preview-Bar (52 px, nur aktiv in --preview-bar-h;
         Default-Var falls Variable nicht gesetzt: 0px)
       - .page-Top + Bottom Padding (12 + 16 = 28 px, siehe D)
       - 8 px Atem-Buffer
     Ohne Preview-Bar = ~88-90 % Viewport. Mit Preview-Bar 52 px kleiner.
     dvh statt vh damit Mobile-Browser-Bars korrekt mitskaliert werden;
     vh-Fallback für ältere iOS Safari. */
  height: calc(100vh - var(--mb-shell-header-height, 56px) - var(--preview-bar-h, 0px) - 36px);
  height: calc(100dvh - var(--mb-shell-header-height, 56px) - var(--preview-bar-h, 0px) - 36px);
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: transparent;  /* Card-Stil sitzt auf .ac-cal__shell, Wurzel transparent */
}
/* Kalender-Seite bekommt schlankeres Padding, damit der 90dvh-Frame
   nicht durch das Default-.page-padding (20+36px) gequetscht wird. */
html[data-design="v2"] body.app-v4 #page-kalender.page {
  padding: 12px 16px 16px;
}
html[data-theme="dark"] .ac-cal,
html[data-design="v2"]:not([data-theme="light"]) .ac-cal {
  background: #0a1916;
}
@media (min-width: 768px) {
  .ac-cal {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}
.ac-cal__shell { width: 100%; min-width: 0; }

/* Hide klassik markup permanently — except in rollback mode. */
#page-kalender > [data-design-version="v2"] { display: none !important; }

body[data-ac-rollback] .ac-cal { display: none; }
body[data-ac-rollback] #page-kalender > [data-design-version="v2"] { display: revert !important; }

/* Mobile-shell !important overrides — src/css/64-mobile-app-shell.css
   forces `min-height: 44px !important` and `font-size: max(16px, 1em)`
   on EVERY <button> under html[data-design="v2"] body.app-v4. That
   inflates the apple-calendar header pills + event bars to giant sizes
   on mobile. We need higher-specificity overrides (3 class selectors
   beat the 2 class + 1 pseudo-class shell rule) and !important to win
   the !important war. */
/* Min-height override — defeats `min-height: 44px !important` from the
   app-shell on every button. Font-size is handled per-element below
   (NOT `inherit` — inheriting would walk up to body's 16px and re-
   inflate the pills, which is what kept making bars huge). */
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__bar,
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__navbtn,
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-back,
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__today,
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__viewswitch button,
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__header-actions button,
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__sheet-close,
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__search-close,
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__bottomnav button {
  min-height: 0 !important;
}
/* Also: app-shell forces font-size: max(16px,1em) on all input fields.
   The search input needs to stay at 14px to fit the compact header. */
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__search-input { font-size: 14px !important; }

/* Hide global mobile bottom-nav (.mob-bnav, z-index: 240) while a
   day-sheet is open — otherwise it overlays the sheet's footer and
   the "+ Termin hinzufügen" button is unreachable. Closing the sheet
   restores the nav. */
body.ac-sheet-open .mob-bnav { display: none !important; }

/* ── Spacing + sizing tokens local to the apple-calendar namespace.
   Defined here (not in 45-modern-premium.css) so they're discoverable
   alongside the consumers. Apple HIG: 44 × 44 px minimum tap target.
   Mobile values tuned for 360-414px viewports (typical iOS phones) so
   nothing overflows the day grid. */
.ac-cal {
  --ac-tap-min:     40px;
  --ac-day-cell:    minmax(0, 1fr);      /* mobile: shrink to fit viewport */
  --ac-today-ring:  22px;                /* iOS-Polish: down from 26px so 3 pills fit per cell */
  --ac-bar-h:       14px;
  --ac-radius:      14px;
  --ac-radius-sm:   8px;
  --ac-shadow:      0 8px 24px rgba(0,0,0,.18);
  --ac-bottomnav-h: 64px;
  --ac-sheet-r:     16px;
  --ac-gutter:      10px;
  --ac-text-day:    13px;                /* iOS-Polish: down from 15px */
  --ac-text-title:  22px;                /* iOS-Polish: down from 24px */
  --ac-text-dow:    10px;
  /* iOS Safari auto-bumps small text in landscape — opt out so 10px
     stays 10px. Otherwise the bars / dow header / pills scale up and
     overflow narrow viewports. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Phase 1 layout shell — Card-Container für den Hauptbereich.
   Border + Radius + Shadow geben dem Kalender eine eigene visuelle
   Box, konsistent mit den Sidebar-Cards (Marco's Layout-Ask). */
.ac-cal__shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  background: var(--s1, var(--surface, #ffffff));
  color: var(--t1, var(--text-primary));
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif;
  border: 1px solid var(--b1, var(--border));
  border-radius: 14px;
  box-shadow: 0 14px 42px rgba(6,40,30,.07), 0 1px 2px rgba(6,40,30,.04);
  overflow: hidden;
  min-width: 0;
}

/* ─── Header (Etappe 1B) ────────────────────────────────────────────── */
.ac-cal__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 14px var(--ac-gutter) 4px;
  min-width: 0;
}
.ac-cal__header > * { min-width: 0; }

/* Mobile: left wraps, switcher + actions stay at content width. Pills
   inside left-cluster + actions are tightened so they actually fit
   into a 360px viewport (which they previously didn't). */
@media (max-width: 767px) {
  .ac-cal__header {
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    padding: 12px 10px 6px;
  }
  .ac-cal__header-left { flex-wrap: wrap; gap: 4px; }
  .ac-cal__navbtn { width: 30px !important; height: 30px !important; font-size: 16px !important; }
  .ac-cal__today { padding: 4px 10px !important; font-size: 12px !important; min-height: 28px !important; }
  .ac-cal__viewswitch button { padding: 4px 10px !important; font-size: 11px !important; min-height: 26px !important; }
  .ac-cal__header-actions { gap: 2px !important; }
  .ac-cal__header-actions button { width: 32px !important; height: 32px !important; font-size: 17px !important; }
  .ac-cal__month-title { font-size: 22px; padding: 4px 10px 6px; }
}

.ac-cal__year-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  color: var(--np, var(--color-primary));
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 6px;
  min-height: var(--ac-tap-min);
}
.ac-cal__year-back:hover { opacity: .85; }

.ac-cal__header-actions {
  display: inline-flex;
  gap: 4px;
}
.ac-cal__header-actions button {
  appearance: none;
  background: none;
  border: 0;
  color: var(--np, var(--color-primary));
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  width: var(--ac-tap-min);
  height: var(--ac-tap-min);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ac-cal__header-actions button:hover { background: var(--color-primary-soft, rgba(14,143,131,.1)); }

.ac-cal__month-title {
  grid-column: 1 / -1;
  font-size: var(--ac-text-title);
  font-weight: 800;
  letter-spacing: -.02em;
  padding: 0 var(--ac-gutter) 8px;
  line-height: 1.1;
  color: var(--t1, var(--text-primary));
}

/* Search row (Etappe 1E) — sits in the title slot when active. Same
   grid-column so the layout doesn't reflow when toggling open/closed. */
.ac-cal__search {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--ac-gutter) 8px;
}
.ac-cal__search-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  font-size: 14px !important;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--b1, var(--border));
  background: var(--s2, rgba(255,255,255,.06));
  color: var(--t1, var(--text-primary));
  outline: none;
}
.ac-cal__search-input:focus {
  border-color: var(--np, var(--color-primary));
  box-shadow: 0 0 0 3px var(--color-primary-soft, rgba(14,143,131,.18));
}
.ac-cal__search-close {
  appearance: none;
  background: var(--s2, rgba(255,255,255,.06));
  border: 1px solid var(--b1, var(--border));
  color: var(--t1, var(--text-primary));
  font: inherit;
  font-size: 14px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ac-cal__search-close:hover { background: var(--s3, rgba(255,255,255,.10)); }
.ac-cal__header-actions button.is-active {
  background: var(--color-primary-soft, rgba(14,143,131,.18)) !important;
  color: var(--np, var(--color-primary));
}

/* Desktop polish: single-row header (Apple macOS pattern). The month
   title sits inline with year-back/Heute on the left instead of taking
   its own row underneath. Search/+ icons stay on the right and get a
   little more visual presence. */
@media (min-width: 768px) {
  .ac-cal__header {
    grid-template-columns: auto auto 1fr auto;
    padding: 18px var(--ac-gutter) 10px;
    gap: 14px;
  }
  .ac-cal__month-title {
    grid-column: 2 / 3;
    grid-row: 1;
    padding: 0;
    align-self: center;
    font-size: 26px;
  }
  .ac-cal__viewswitch { grid-column: 3; }
  .ac-cal__header-actions {
    grid-column: 4;
    gap: 6px;
  }
  .ac-cal__header-actions button {
    width: 38px;
    height: 38px;
    font-size: 19px;
    background: var(--s2, rgba(255,255,255,.06));
    border: 1px solid var(--b1, var(--border));
  }
}

/* ─── Body + Weekdays + Grid (Etappe 1B) ────────────────────────────── */
.ac-cal__body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;            /* let body shrink inside its grid parent */
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.92)),
    var(--s1, var(--surface, #ffffff));
}

.ac-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 18px;
  border-bottom: 1px solid rgba(10,60,48,.10);
  background: rgba(255,255,255,.78);
}
.ac-cal__weekday {
  text-align: center;
  font-size: var(--ac-text-dow);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--t3, var(--text-muted));
  padding: 8px 0 6px;
  min-width: 0;
}
.ac-cal__weekday--sun { color: var(--nd, #ff6b6b); }

html[data-theme="dark"] .ac-cal__body,
html[data-design="v2"]:not([data-theme="light"]) .ac-cal__body {
  background: var(--s1, #0a1916);
}
html[data-theme="dark"] .ac-cal__weekdays,
html[data-design="v2"]:not([data-theme="light"]) .ac-cal__weekdays {
  background: rgba(255,255,255,.035);
  border-bottom-color: rgba(255,255,255,.10);
}

.ac-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));   /* explicit minmax — no col can grow past 1fr */
  grid-template-rows: repeat(6, minmax(0, 1fr));      /* explicit minmax — no row can grow past 1fr */
  gap: 0;
  flex: 1;
  padding: 0 18px 18px;
  align-content: stretch;
  min-height: 0;            /* let grid shrink inside its flex parent */
  border-bottom-right-radius: 14px;
  border-bottom-left-radius: 14px;
  overflow: hidden;
}

.ac-cal__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px 8px;
  border-top: 1px solid rgba(10,60,48,.105);
  cursor: pointer;
  min-width: 0;             /* let grid-track stay 1fr instead of being content-driven */
  min-height: 0;            /* let row stay 1fr instead of expanding to content */
  overflow: hidden;         /* clip pills that don't fit — the "+N mehr" indicator absorbs the rest */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ac-cal__day:hover { background: rgba(14,143,131,.055); }
.ac-cal__day--other .ac-cal__day-num { color: var(--t4, var(--text-muted)); opacity: .55; }
.ac-cal__day--sun .ac-cal__day-num { color: var(--nd, #ff6b6b); }

.ac-cal__day-num {
  font-size: var(--ac-text-day);
  font-weight: 500;
  line-height: 1;
  color: var(--t1, var(--text-primary));
  width: var(--ac-today-ring);
  height: var(--ac-today-ring);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.ac-cal__day--today .ac-cal__day-num {
  background: var(--np, var(--color-primary));
  color: #fff;
  font-weight: 700;
}

.ac-cal__bars {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  max-width: 100%;
  min-width: 0;             /* lets children shrink below their min-content width */
  align-items: stretch;
}

/* Apple-iOS-inspired pill style: light brand-tinted background with
   dark brand text, NOT solid. Compact (15px tall), tight padding,
   truncated text. !important on the sizing properties because
   src/css/64-mobile-app-shell.css forces font-size: max(16px, 1em)
   on every button under the v2/app-v4 shell. */
.ac-cal__bar {
  height: 15px !important;
  line-height: 15px !important;
  font-size: 10px !important;
  padding: 0 4px !important;
  font-weight: 600;
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border: 0;
  text-align: left;
  display: block;           /* iOS-Polish: stop button's inline-flex default from breaking width:100% */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;   /* padding counted INSIDE the 100% width — no overflow */
  letter-spacing: -.01em;
  /* Default = future / upcoming. SOLID emerald + weisse Schrift, wie die
     Day/Week-Grid-Pills bereits sind — Marco hat zwei Iterationen mit
     38% Alpha als zu zart abgelehnt; jetzt eindeutig sichtbar. */
  background: var(--np, #0e8f83);
  color: #fff;
}
/* Explicit future-Klasse (von JS gesetzt) — hoechste Spezifitaet damit
   kein App-Shell-Override aus 62-app-relaunch.css / 64-mobile-app-shell.css
   das background wegfrisst. */
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__bar--future,
.ac-cal__bar--future {
  background: var(--np, #0e8f83) !important;
  color: #fff !important;
  font-weight: 600;
}
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__bar--past,
.ac-cal__bar--past {
  background: rgba(127,127,127,.18) !important;
  color: var(--t3, var(--text-muted)) !important;
  font-weight: 500;
}
.ac-cal__bar:hover { filter: brightness(1.06); }
.ac-cal__bar--cancelled { opacity: .5; text-decoration: line-through; background: rgba(127,127,127,.10); color: var(--t3); }

/* Search filter — dim pills that don't match the current query so the
   month layout stays stable but matching events stand out. */
.ac-cal__bar--dimmed { opacity: .12 !important; filter: grayscale(.4); }

/* ─── Desktop sidebar with mini-cal (Etappe 1E part 2) ─────────────── */
.ac-cal__sidebar { display: none; }
@media (min-width: 768px) {
  .ac-cal__sidebar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;                   /* Cards bringen eigenes Padding mit */
    background: transparent;      /* nur die Cards haben Hintergrund */
    border-right: 0;              /* kein Trennstrich mehr — Cards trennen sich selbst */
    overflow-y: auto;
    min-width: 0;
    min-height: 0;
    max-height: 100%;
    scrollbar-gutter: stable;
  }
  /* Card-Basis für alle drei Sidebar-Sektionen: Mini-Cal, KPI, Filter.
     Marco's Layout-Ask: jede Section in einer eigenen Box mit Border +
     Padding + Background statt nur Top-Border-Trenner. */
  .ac-cal__sidebar .ac-mini,
  .ac-cal__sidebar .ac-cal__kpi,
  .ac-cal__sidebar .ac-cal__filter {
    background: var(--s1, var(--surface, #ffffff));
    border: 1px solid var(--b1, var(--border));
    border-radius: 12px;
    padding: 14px 14px 16px;
    margin-top: 0 !important;     /* killt heutiges margin-top: 4px */
    border-top: 0 !important;     /* killt heutige border-top: 1px (Trennstrich) */
    box-shadow: 0 2px 8px rgba(0,0,0,.03);
    min-width: 0;
  }
}

.ac-mini { min-width: 0; }
.ac-mini__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 6px;
}
.ac-mini__nav {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--s2, rgba(255,255,255,.06));
  border: 1px solid var(--b1, var(--border));
  color: var(--np, var(--color-primary));
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ac-mini__nav:hover { background: var(--color-primary-soft, rgba(14,143,131,.12)); }
.ac-mini__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--t1, var(--text-primary));
  letter-spacing: -.01em;
}
.ac-mini__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.ac-mini__weekdays span {
  font-size: 9px;
  font-weight: 700;
  color: var(--t3, var(--text-muted));
  text-align: center;
  padding: 4px 0 2px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ac-mini__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.ac-mini__day {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  cursor: pointer;
  color: var(--t1, var(--text-primary));
  position: relative;
  min-width: 0;
  padding: 0;
}
.ac-mini__day:hover { background: var(--color-primary-soft, rgba(14,143,131,.12)); }
.ac-mini__day--other { color: var(--t4, var(--text-muted)); opacity: .55; }
.ac-mini__day--today { background: var(--np, var(--color-primary)); color: #fff; font-weight: 700; }
.ac-mini__day--has::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  width: 3px;
  height: 3px;
  background: var(--np, var(--color-primary));
  border-radius: 50%;
  transform: translateX(-50%);
}
.ac-mini__day--today.ac-mini__day--has::after { background: #fff; }

/* App-shell !important override for the mini-cal day buttons too. */
html[data-design="v2"] body.app-v4 .ac-cal .ac-mini__day,
html[data-design="v2"] body.app-v4 .ac-cal .ac-mini__nav {
  min-height: 0 !important;
}

/* Mobile day/week-view compaction. --ac-px-per-hour stays at 60 because
   the JS appointment positioning assumes 1 minute = 1 pixel (top + height
   computed in minutes) — changing px-per-hour without matching JS would
   misalign blocks vs. hour rows. Instead we shrink the hour-column width
   and typography. Vertical scroll absorbs the natural 16h × 60px height. */
@media (max-width: 767px) {
  .ac-cal__day-grid {
    grid-template-columns: 50px minmax(0, 1fr);
  }
  .ac-cal__day-grid__hour-label { font-size: 10px; padding: 2px 6px 0; }

  .ac-cal__week-grid__header,
  .ac-cal__week-grid__body {
    grid-template-columns: 42px repeat(7, minmax(0, 1fr));
  }
  .ac-cal__week-grid__dow-name { font-size: 9px; }
  .ac-cal__week-grid__dow-num { font-size: 13px; width: 22px; height: 22px; }
  .ac-cal__week-grid__apt {
    padding: 1px 3px !important;
    font-size: 9px !important;
    border-radius: 3px;
  }
  .ac-cal__week-grid__apt-time { font-size: 9px; }
}

/* ─── KPI Panel + Dienstleistungs-Filter (Etappe 2D, sidebar) ─────────
   Both panels stack beneath the mini-cal in the desktop sidebar.
   KPI updates on every render(); filter checkboxes toggle state.
   treatmentFilter (Set or null = no filter). */
.ac-cal__kpi {
  margin-top: 4px;
  padding: 12px 4px 14px;
  border-top: 1px solid var(--b1, var(--border));
}
.ac-cal__kpi-title,
.ac-cal__filter-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t3, var(--text-muted));
  margin: 0 0 8px;
}
.ac-cal__kpi-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 12.5px;
  min-width: 0;
}
.ac-cal__kpi-label { color: var(--t2, var(--text-secondary)); }
.ac-cal__kpi-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-primary-soft, rgba(14,143,131,.18));
  color: var(--np, var(--color-primary));
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: middle;
}
.ac-cal__kpi-value {
  font-weight: 700;
  color: var(--t1, var(--text-primary));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ac-cal__filter {
  margin-top: 4px;
  padding: 12px 4px 16px;
  border-top: 1px solid var(--b1, var(--border));
  max-height: clamp(190px, 30dvh, 280px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.ac-cal__filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--t1, var(--text-primary));
  min-width: 0;
}
.ac-cal__filter-item span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.ac-cal__filter-item--all {
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--b1, var(--border));
  margin-bottom: 4px;
}
.ac-cal__filter-item input[type="checkbox"] {
  accent-color: var(--np, var(--color-primary));
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Dimmed appointment states in day/week views (mirrors the month
   .ac-cal__bar--dimmed class) for the combined search+treatment filter. */
.ac-cal__day-grid__apt--dimmed,
.ac-cal__week-grid__apt--dimmed {
  opacity: .12 !important;
  filter: grayscale(.4);
}

/* Mobile: even more compact (iOS month view inspiration). Cells are
   ~48px wide on 360px viewports — tighter padding + smaller font lets
   3 truncated names sit cleanly in a row of pills. */
@media (max-width: 767px) {
  .ac-cal__weekdays { padding: 0 10px; }
  .ac-cal__grid { padding: 0 10px 10px; }
  .ac-cal__day { padding: 4px 3px 3px; }
  .ac-cal__bar {
    height: 14px !important;
    line-height: 14px !important;
    font-size: 9.5px !important;
    padding: 0 3px !important;
    border-radius: 2px;
  }
  .ac-cal__bars { gap: 1px; }
  .ac-cal__more { font-size: 8.5px; padding-left: 2px; }
}

.ac-cal__more {
  font-size: 10px;
  font-weight: 600;
  color: var(--t3, var(--text-muted));
  text-align: left;
  padding-left: 5px;
}

/* Desktop: bigger cells, more bars, full event titles, hover state */
@media (min-width: 768px) {
  .ac-cal__day {
    padding: 10px 8px 8px;
    align-items: flex-start;
  }
  .ac-cal__day-num {
    align-self: flex-start;
    font-size: 18px;
  }
  .ac-cal__bar {
    height: 18px;
    line-height: 18px;
    font-size: 11.5px;
    padding: 0 7px;
  }
  .ac-cal__bars { gap: 3px; }
}

/* ─── View-Switch segment control (visible on mobile + desktop) ─────── */
/* Was desktop-only in 1C. After the Mobile-Nav-Doppelung fix the mobile
   bottom-nav is gone — the segment control now lives in the header for
   both breakpoints so users can switch Monat/Liste from one place. */
.ac-cal__viewswitch {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  background: var(--s2, rgba(255,255,255,.06));
  border: 1px solid var(--b1, var(--border));
  border-radius: 999px;
  padding: 2px;
}
.ac-cal__viewswitch button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t3, var(--text-muted));
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 30px;
  transition: color .12s ease, background .12s ease;
}
.ac-cal__viewswitch button:hover { color: var(--t1, var(--text-primary)); }
.ac-cal__viewswitch button.is-active {
  background: linear-gradient(135deg, #0e8f83 0%, #08766e 52%, #075f59 100%);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.32),
    0 0 0 1.5px rgba(14,143,131,.42),
    0 0 18px 2px rgba(14,143,131,.38),
    0 4px 14px rgba(8,118,110,.22);
  animation: ac-viewswitch-glow 2s ease-in-out infinite;
}
@keyframes ac-viewswitch-glow {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.32),
      0 0 0 1.5px rgba(14,143,131,.42),
      0 0 18px 2px rgba(14,143,131,.38),
      0 4px 14px rgba(8,118,110,.22);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.42),
      0 0 0 1.5px rgba(14,143,131,.55),
      0 0 26px 3px rgba(14,143,131,.55),
      0 4px 16px rgba(8,118,110,.28);
  }
}
@media (min-width: 768px) {
  .ac-cal__viewswitch button { font-size: 13px; padding: 6px 16px; min-height: 32px; }
}

/* Header-left wrapper holds the year-back + the new "Heute" button so the
   3-column grid still works (auto | 1fr | auto). */
.ac-cal__header-left {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ac-cal__today {
  background: var(--s2, rgba(255,255,255,.06));
  border: 1px solid var(--b1, var(--border));
  color: var(--np, var(--color-primary));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  min-height: 34px;
}
.ac-cal__today:hover { background: var(--color-primary-soft, rgba(14,143,131,.10)); }

.ac-cal__navbtn {
  appearance: none;
  background: var(--s2, rgba(255,255,255,.06));
  border: 1px solid var(--b1, var(--border));
  color: var(--np, var(--color-primary));
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ac-cal__navbtn:hover { background: var(--color-primary-soft, rgba(14,143,131,.10)); }

/* ─── Bottom-Nav RETIRED ─────────────────────────────────────────────
   On mobile the global app shell already has its own nav (Heute /
   Anfragen / Kunden / Buchungen / Mehr). Marco hatte zwei Bottom-Bars
   übereinander und der Day-Sheet Footer wurde verdeckt. View-switch
   moved into the header (above). Markup stays for backward compat with
   the 1C container but renders nothing visible. */
.ac-cal__bottomnav { display: none !important; }

/* ─── List view (Etappe 1C) ─────────────────────────────────────────── */
.ac-list {
  padding: 8px var(--ac-gutter) 24px;
  overflow-y: auto;
  height: 100%;
}
.ac-list__empty {
  padding: 80px 20px;
  text-align: center;
  color: var(--t3, var(--text-muted));
  font-size: 15px;
}
.ac-list__day { margin-bottom: 18px; }
.ac-list__day-hd {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t3, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--b1, var(--border));
  position: sticky;
  top: 0;
  background: var(--bg, var(--mb-premium-bg));
  z-index: 1;
}
.ac-list__day-hd--today { color: var(--np, var(--color-primary)); }
.ac-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ac-list__item {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--b1, var(--border));
  cursor: pointer;
  min-height: var(--ac-tap-min);
  -webkit-tap-highlight-color: transparent;
}
.ac-list__item:hover { background: var(--color-primary-soft, rgba(14,143,131,.06)); }
.ac-list__item--cancelled { opacity: .5; }
.ac-list__item--cancelled .ac-list__cust { text-decoration: line-through; }

/* Past/Future colored markers (Marco's polish ask) — same emerald-for-
   future, grey-for-past convention as the month / day / week views.
   Future keeps the vivid time chip in emerald + dark text.
   Past dims overall + greys the time, so a glance over the agenda
   immediately separates "done" from "still to come". */
.ac-list__item--past {
  opacity: .55;
}
.ac-list__item--past .ac-list__time {
  color: var(--t3, var(--text-muted));
}
.ac-list__item--past .ac-list__cust {
  color: var(--t2, var(--text-secondary));
  font-weight: 500;
}
.ac-list__item--future .ac-list__time {
  /* keep the emerald time chip even more saturated for upcoming items */
  color: var(--np, var(--color-primary));
  font-weight: 700;
}
/* Day-header on a past day takes a similarly muted treatment so the
   user sees the visual divide between yesterday's section and today's. */
.ac-list__day-hd--past {
  color: var(--t4, var(--text-muted));
  opacity: .75;
}
.ac-list__time {
  grid-row: 1 / span 2;
  font-weight: 700;
  color: var(--np, var(--color-primary));
  font-variant-numeric: tabular-nums;
  align-self: center;
  font-size: 15px;
}
.ac-list__cust {
  font-weight: 600;
  color: var(--t1, var(--text-primary));
  font-size: 15px;
}
.ac-list__treats {
  font-size: 12.5px;
  color: var(--t3, var(--text-muted));
}

@media (min-width: 768px) {
  .ac-list { padding: 12px 24px 32px; }
  .ac-list__item { padding: 14px 6px; }
}

/* ─── Day-Sheet (mobile bottom-drawer) / Side-Panel (desktop) — Etappe 1D ─ */
/* z-index 9000 sits above the global mobile app nav (typically z 100-1000)
   so the sheet covers it while open, instead of the app nav covering the
   sheet's footer. Marco's earlier complaint was "+ Termin hinzufügen" was
   hidden behind the app nav. Backdrop stays one below the sheet. */
.ac-cal__sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.42);
  z-index: 8999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.ac-cal__sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ac-cal__sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* Solid background — the v2 token --s1 is intentionally translucent
     (.82 alpha in dark, glassy by design) but the day-sheet is a focused
     modal layer and must NOT show the dimmed grid through it. Force a
     solid color per theme. Marco flagged the see-through effect twice. */
  background: #ffffff;
  border-top: 1px solid var(--b1, var(--border));
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 48px rgba(0,0,0,.32);
  max-height: 82vh;
  z-index: 9000;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html[data-theme="dark"] .ac-cal__sheet,
html[data-design="v2"]:not([data-theme="light"]) .ac-cal__sheet {
  background: #15201d;   /* solid dark, slightly elevated vs --bg #03130F */
}
.ac-cal__sheet.is-open { transform: translateY(0); }

.ac-cal__sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--b2, rgba(167,243,208,.22));
  border-radius: 2px;
  margin: 10px auto 6px;
  cursor: grab;
}
.ac-cal__sheet-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 18px 12px;
  border-bottom: 1px solid var(--b1, var(--border));
}
.ac-cal__sheet-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--t1, var(--text-primary));
  letter-spacing: -.01em;
  margin: 0;
}
.ac-cal__sheet-close {
  background: var(--s2, rgba(255,255,255,.06));
  border: 0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  color: var(--t1, var(--text-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ac-cal__sheet-close:hover { background: var(--s3, rgba(255,255,255,.10)); }

.ac-cal__sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 18px 12px;
}
.ac-cal__sheet-empty {
  padding: 40px 16px 28px;
  text-align: center;
  color: var(--t3, var(--text-muted));
  font-size: 14.5px;
}
.ac-cal__sheet-foot {
  padding: 12px 18px max(12px, env(safe-area-inset-bottom, 12px));
  border-top: 1px solid var(--b1, var(--border));
}
/* Hoechste Spezifitaet (html + body Layer + .ac-cal + .ac-cal__sheet-foot
   + button) + !important auf background, damit kein App-Shell-Override
   in 62-app-relaunch.css / 64-mobile-app-shell.css / 38-skin.css den
   Petrol-Verlauf wegfrisst. Marco hat das mehrfach reklamiert — diese
   Regel ist defensiv gehaertet. */
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__sheet-foot button,
.ac-cal__sheet-foot button {
  width: 100%;
  min-height: var(--ac-tap-min);
  /* App-Branding-Petrol-Verlauf (3-Stop emerald → türkis-mint), identisch
     mit allen anderen Primary-CTAs der App. Quelle: --rl-gradient aus
     62-app-relaunch.css. Fallback ist visuell exakt der gleiche Verlauf,
     damit Cache- oder Lade-Reihenfolgen-Probleme niemals den falschen
     Verlauf zeigen. */
  background: var(--rl-gradient, linear-gradient(135deg, #08766e 0%, #0e8f83 46%, #38c8b5 100%)) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  letter-spacing: -.01em;
  box-shadow: 0 4px 14px rgba(14,143,131,.3) !important;
  transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__sheet-foot button:hover,
.ac-cal__sheet-foot button:hover {
  /* Background bleibt im Branding-Verlauf — nur leichte Brightness-
     Erhöhung wie .btn-p:hover (filter:brightness). Kein Verlaufswechsel. */
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(14,143,131,.45) !important;
}
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__sheet-foot button:active,
.ac-cal__sheet-foot button:active {
  transform: translateY(0);
  filter: brightness(.98);
  box-shadow: 0 2px 8px rgba(14,143,131,.25) !important;
}

/* Desktop: turn the sheet into a side panel on the right. Same content,
   different layout — no backdrop, slide in from the right.
   position: absolute (not fixed) so the panel is bounded by .ac-cal
   (position: relative) and never escapes into the global app-shell
   header. Without this the panel covered the workspace logo, "Test"
   chip, and Einstellungen icon (Marco's bug report). */
@media (min-width: 768px) {
  .ac-cal__sheet {
    position: absolute;
    top: 0; bottom: 0;
    left: auto;
    right: 0;
    width: min(380px, 38vw);
    max-height: none;
    border-radius: 0;
    border-left: 1px solid var(--b1, var(--border));
    border-top: 0;
    transform: translateX(100%);
    box-shadow: -16px 0 48px rgba(0,0,0,.22);
    padding-bottom: 0;
    /* On desktop the panel sits inside .ac-cal — keep z above the header
       segment-control and search/+ icons so they don't bleed through. */
    z-index: 30;
  }
  .ac-cal__sheet.is-open { transform: translateX(0); }
  .ac-cal__sheet-handle { display: none; }
  .ac-cal__sheet-backdrop { display: none; }
  .ac-cal__sheet-hd { padding: 16px 22px 14px; }
  .ac-cal__sheet-body { padding: 8px 22px 16px; }
  .ac-cal__sheet-foot { padding: 16px 22px; }
}

/* Day-cell long-press visual feedback. user-select:none on day cells only
   (not the sheet/list) so press-and-hold doesn't pop a selection menu. */
.ac-cal__day { user-select: none; }
.ac-cal__day.is-pressing { background: var(--color-primary-soft, rgba(14,143,131,.16)); }

/* Touch-action: allow vertical scroll, prevent horizontal browser nav so
   swipe-to-change-month doesn't trigger iOS Safari's swipe-back gesture
   when it's a clean horizontal swipe. transform: translateZ(0) primes the
   GPU layer so the JS-driven translateX swipe stays buttery on iOS. */
.ac-cal__grid {
  touch-action: pan-y;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ─── Day-View (Etappe 2A) ─────────────────────────────────────────────
   Hour column on the left, body column with absolutely-positioned
   appointment blocks. 1 minute = 1 px so a 60-min appointment is
   exactly --ac-px-per-hour (60px) tall. Window 06:00–22:00 by default. */
.ac-cal__day-grid {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  height: 100%;
  overflow-y: auto;
  min-height: 0;
  --ac-px-per-hour: 60px;
  background: var(--bg, var(--mb-premium-bg));
}
@media (min-width: 768px) {
  .ac-cal__day-grid {
    grid-template-columns: 70px minmax(0, 1fr);
  }
}
.ac-cal__day-grid__hours {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--b1, var(--border));
}
.ac-cal__day-grid__hour-label {
  height: var(--ac-px-per-hour);
  padding: 2px 8px 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--t3, var(--text-muted));
  text-align: right;
  letter-spacing: .02em;
  flex-shrink: 0;
  position: relative;
  top: -7px;
}
.ac-cal__day-grid__body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ac-cal__day-grid__hour-row {
  height: var(--ac-px-per-hour);
  border-top: 1px solid var(--b1, var(--border));
  flex-shrink: 0;
}
.ac-cal__day-grid__apt {
  position: absolute;
  left: 6px;
  right: 6px;
  background: var(--np, var(--color-primary)) !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 4px 8px !important;
  font-size: 11.5px !important;
  font-weight: 600;
  line-height: 1.3 !important;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(14,143,131,.20);
  box-sizing: border-box;
}
.ac-cal__day-grid__apt:hover { filter: brightness(1.06); }
.ac-cal__day-grid__apt-time {
  font-size: 10.5px;
  font-weight: 700;
  opacity: .85;
  letter-spacing: -.01em;
}
.ac-cal__day-grid__apt-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-cal__day-grid__apt-treats {
  font-size: 10.5px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-cal__day-grid__apt--past {
  background: rgba(127,127,127,.15) !important;
  color: var(--t3, var(--text-muted)) !important;
  box-shadow: none;
}
.ac-cal__day-grid__apt--cancelled {
  opacity: .5;
  text-decoration: line-through;
  background: rgba(127,127,127,.15) !important;
  color: var(--t3, var(--text-muted)) !important;
  box-shadow: none;
}
.ac-cal__day-grid__now {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--nd, #ff6b6b);
  z-index: 3;
  pointer-events: none;
}
.ac-cal__day-grid__now::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  background: var(--nd, #ff6b6b);
  border-radius: 50%;
}

/* App-shell override for day-view appointment buttons */
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__day-grid__apt {
  min-height: 0 !important;
}

/* ─── Week-View (Etappe 2B) ───────────────────────────────────────────
   Header row: weekday name + day number (sticky top). Body: 7-column
   grid where each column behaves like a slim day-view. Shares the
   --ac-px-per-hour token with day-view for vertical consistency. */
.ac-cal__week-grid {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  overflow-y: auto;
  min-height: 0;
  --ac-px-per-hour: 60px;
  background: var(--bg, var(--mb-premium-bg));
}
.ac-cal__week-grid__header {
  display: grid;
  grid-template-columns: 70px repeat(7, minmax(0, 1fr));
  position: sticky;
  top: 0;
  background: var(--bg, var(--mb-premium-bg));
  z-index: 4;
  border-bottom: 1px solid var(--b1, var(--border));
}
.ac-cal__week-grid__hours-spacer { border-right: 1px solid var(--b1, var(--border)); }
.ac-cal__week-grid__dow {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 4px 10px;
  border-right: 1px solid var(--b1, var(--border));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font: inherit;
}
.ac-cal__week-grid__dow:last-child { border-right: 0; }
.ac-cal__week-grid__dow:hover { background: var(--color-primary-soft, rgba(14,143,131,.06)); }
.ac-cal__week-grid__dow-name {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t3, var(--text-muted));
}
.ac-cal__week-grid__dow-num {
  font-size: 16px;
  font-weight: 600;
  color: var(--t1, var(--text-primary));
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
}
.ac-cal__week-grid__dow--sun .ac-cal__week-grid__dow-num,
.ac-cal__week-grid__dow--sun .ac-cal__week-grid__dow-name {
  color: var(--nd, #ff6b6b);
}
.ac-cal__week-grid__dow--today .ac-cal__week-grid__dow-num {
  background: var(--np, var(--color-primary));
  color: #fff !important;
  font-weight: 700;
}

.ac-cal__week-grid__body {
  display: grid;
  grid-template-columns: 70px repeat(7, minmax(0, 1fr));
  min-height: 0;
}
.ac-cal__week-grid__hours {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--b1, var(--border));
}
.ac-cal__week-grid__col {
  position: relative;
  border-right: 1px solid var(--b1, var(--border));
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ac-cal__week-grid__col:last-child { border-right: 0; }
.ac-cal__week-grid__hour-row {
  height: var(--ac-px-per-hour);
  border-top: 1px solid var(--b1, var(--border));
  flex-shrink: 0;
}

.ac-cal__week-grid__apt {
  position: absolute;
  left: 2px;
  right: 2px;
  background: var(--np, var(--color-primary)) !important;
  color: #fff !important;
  border-radius: 4px;
  padding: 2px 5px !important;
  font-size: 10px !important;
  font-weight: 600;
  line-height: 1.2 !important;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(14,143,131,.18);
  box-sizing: border-box;
}
.ac-cal__week-grid__apt:hover { filter: brightness(1.06); }
.ac-cal__week-grid__apt-time { font-size: 9.5px; font-weight: 700; opacity: .85; letter-spacing: -.01em; }
.ac-cal__week-grid__apt-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-cal__week-grid__apt--past {
  background: rgba(127,127,127,.15) !important;
  color: var(--t3, var(--text-muted)) !important;
  box-shadow: none;
}
.ac-cal__week-grid__apt--cancelled {
  opacity: .5;
  text-decoration: line-through;
  background: rgba(127,127,127,.15) !important;
  color: var(--t3, var(--text-muted)) !important;
  box-shadow: none;
}

html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__week-grid__apt,
html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__week-grid__dow {
  min-height: 0 !important;
}

/* ─── Year-View (Etappe 2C) ────────────────────────────────────────────
   12 mini-months in a grid: 4×3 on desktop, 2×6 on mobile. Each card is
   a clickable button that switches to month-view for that month. Today
   gets a filled emerald circle in its mini-grid. */
.ac-cal__year-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 16px var(--ac-gutter);
  height: 100%;
  overflow-y: auto;
  align-content: start;
  background: var(--bg, var(--mb-premium-bg));
  min-height: 0;
}
@media (max-width: 767px) {
  .ac-cal__year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
  }
}

.ac-cal__year-month {
  appearance: none;
  background: var(--s1, var(--surface-elevated));
  border: 1px solid var(--b1, var(--border));
  border-radius: 12px;
  padding: 12px 10px 10px !important;
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
  min-width: 0;
}
.ac-cal__year-month:hover {
  border-color: var(--np, var(--color-primary));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14,143,131,.12);
}
.ac-cal__year-month--current {
  border-color: var(--np, var(--color-primary));
  box-shadow: 0 0 0 1px var(--np, var(--color-primary));
}

.ac-cal__year-month-hd {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--t1, var(--text-primary));
  letter-spacing: -.01em;
}
.ac-cal__year-month--current .ac-cal__year-month-hd { color: var(--np, var(--color-primary)); }

.ac-cal__year-month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.ac-cal__year-month-weekdays span {
  font-size: 8px;
  font-weight: 700;
  color: var(--t4, var(--text-muted));
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 0 2px;
}

.ac-cal__year-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.ac-cal__year-day {
  font-size: 9.5px;
  text-align: center;
  color: var(--t1, var(--text-primary));
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ac-cal__year-day--other { color: var(--t4, var(--text-muted)); opacity: .35; }
.ac-cal__year-day--sun   { color: var(--nd, #ff6b6b); }
.ac-cal__year-day--today {
  background: var(--np, var(--color-primary));
  color: #fff !important;
  font-weight: 700;
  border-radius: 50%;
}

html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-month {
  min-height: 0 !important;
}

/* Mobile year-view hardening: the month cards are real buttons, so broad
   mobile touch-target rules can collapse the card while the mini grid keeps
   flowing. Keep the 2-column overview, but reserve enough vertical room for
   the full 6-week month grid. */
@media (max-width: 767px) {
  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px 10px calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    min-height: 100% !important;
    align-content: start !important;
    overflow-y: auto !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-month {
    min-height: 158px !important;
    height: auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding: 10px 8px 8px !important;
    gap: 5px !important;
    border-radius: 11px !important;
    align-items: stretch !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-month-hd {
    font-size: 13px !important;
    line-height: 1.12 !important;
    margin: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-month-weekdays,
  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-month-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-month-weekdays {
    gap: 0 !important;
    margin-top: 1px !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-month-weekdays span {
    min-width: 0 !important;
    padding: 0 0 2px !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    letter-spacing: .03em !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-month-grid {
    grid-auto-rows: 15px !important;
    gap: 1px 0 !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-day {
    width: 100% !important;
    height: 15px !important;
    min-height: 15px !important;
    aspect-ratio: auto !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__viewswitch button.is-active {
    background: linear-gradient(135deg, #0e8f83 0%, #08766e 52%, #075f59 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.32),
      0 0 0 1.5px rgba(14,143,131,.42),
      0 0 18px 2px rgba(14,143,131,.34),
      0 4px 14px rgba(8,118,110,.22)
    !important;
  }
}

@media (max-width: 374px) {
  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-grid {
    grid-template-columns: 1fr !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__year-month {
    min-height: 166px !important;
  }
}

/* ─── Drag & Drop visual feedback ─────────────────────────────────────
   Pills are draggable on desktop (HTML5 native). The bar shows a grab
   cursor; while being dragged it fades. The drop-target day cell gets
   a dashed emerald outline so the user sees exactly where the drop will
   land. Mobile users keep the existing long-press → modal → change-date
   flow because HTML5 drag is unreliable on touch. */
.ac-cal__bar { cursor: grab; }
.ac-cal__bar:active { cursor: grabbing; }
.ac-cal__bar--dragging {
  opacity: .45 !important;
  cursor: grabbing !important;
}
.ac-cal__day--drop-target {
  background: var(--color-primary-soft, rgba(14,143,131,.14)) !important;
  outline: 2px dashed var(--np, var(--color-primary));
  outline-offset: -3px;
  border-radius: 4px;
}

/* Day/Week-View drop targets (Phase 3 — 15-min snap drag). The column
   gets a soft emerald wash + emerald right-edge; the drop indicator is
   a 2-px emerald line + a floating time label so the user sees exactly
   which slot the appointment lands at. */
.ac-cal__week-grid__col--drop-target {
  background: var(--color-primary-soft, rgba(14,143,131,.10)) !important;
  box-shadow: inset 0 0 0 1px var(--np, var(--color-primary));
}
.ac-cal__drop-indicator {
  position: absolute;
  left: 2px;
  right: 2px;
  height: 2px;
  background: var(--np, var(--color-primary));
  z-index: 6;
  pointer-events: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(14,143,131,.22);
}
.ac-cal__drop-indicator::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  background: var(--np, var(--color-primary));
  border-radius: 50%;
}
.ac-cal__drop-indicator__time {
  position: absolute;
  left: -56px;
  top: -10px;
  font-size: 10px;
  font-weight: 700;
  background: var(--np, var(--color-primary));
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: -.01em;
}
/* Week-view drop indicator has less horizontal room — keep the time
   chip inside the column on the right side instead of jutting off left. */
.ac-cal__week-grid__col .ac-cal__drop-indicator__time {
  left: auto;
  right: 4px;
  top: -16px;
}

/* ─── Day-View Routes-Sektion (Phase 3C-2) ──────────────────────────────
   Wrapper übernimmt das Scrolling, day-grid verliert sein eigenes
   overflow-y:auto und bekommt eine min-height auf das ungescrollte
   content (16 h × 60 px). Routes-Section ist ein 280-px-Block direkt
   unter dem Stunden-Grid. */
.ac-cal__day-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.ac-cal__day-wrap > .ac-cal__day-grid {
  flex: 0 0 auto;
  height: auto;
  overflow-y: visible;
  min-height: 960px;      /* (DAY_END_HOUR-DAY_START_HOUR) × --ac-px-per-hour */
}
.ac-cal__routes {
  flex: 0 0 auto;
  padding: 18px var(--ac-gutter) 22px;
  border-top: 1px solid var(--b1, var(--border));
  background: var(--s1, var(--surface));
}
.ac-cal__routes__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.ac-cal__routes__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--t1, var(--text-primary));
  letter-spacing: -.01em;
}
.ac-cal__routes__kpi {
  font-size: 13px;
  font-weight: 700;
  color: var(--np, var(--color-primary));
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.ac-cal__routes__map {
  width: 100%;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--b1, var(--border));
  background: var(--s2, var(--surface-elevated));
}
.ac-cal__routes__status {
  margin-top: 8px;
  font-size: 12px;
  color: var(--t3, var(--text-muted));
  min-height: 16px;
  letter-spacing: -.005em;
}
.ac-cal__routes__pin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--np, #0e8f83);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  cursor: default;
}
.ac-cal__routes__pin--hb {
  background: linear-gradient(135deg, #08766e, #0e8f83);
  font-size: 10px;
  letter-spacing: -.02em;
}
@media (max-width: 767px) {
  .ac-cal__routes { padding: 14px 12px 18px; }
  .ac-cal__routes__map { height: 220px; }
}
/* Mapbox-Defaults: Logo + Attribution kleiner halten, damit der 280-px
   Block visuell sauber bleibt. */
.ac-cal__routes__map .mapboxgl-ctrl-bottom-left,
.ac-cal__routes__map .mapboxgl-ctrl-bottom-right { transform: scale(.85); transform-origin: bottom left; }

/* Phase 3A — Realtime-Konflikt-Highlight. Wenn ein anderer User/Device
   einen Termin angelegt oder verschoben hat, fires 34-calendar-plus.js
   ein mb:cal:realtime-touch Event; 71-apple-calendar.js findet alle Pills
   mit der ID + addiert .ac-cal__apt--flash für ~3 s. Drei Pulse:
   sofort opak emerald Glow, faded out. position: relative + z-index 4
   damit der Glow nicht von Nachbar-Pills überlagert wird. */
@keyframes ac-flash-pulse {
  0% {
    box-shadow:
      0 0 0 0 rgba(14,143,131,0),
      0 0 0 0 rgba(56,200,181,0);
  }
  15% {
    box-shadow:
      0 0 0 5px rgba(14,143,131,.55),
      0 0 18px 4px rgba(56,200,181,.45);
  }
  60% {
    box-shadow:
      0 0 0 3px rgba(14,143,131,.28),
      0 0 12px 2px rgba(56,200,181,.18);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(14,143,131,0),
      0 0 0 0 rgba(56,200,181,0);
  }
}
.ac-cal__bar.ac-cal__apt--flash,
.ac-cal__day-grid__apt.ac-cal__apt--flash,
.ac-cal__week-grid__apt.ac-cal__apt--flash,
.ac-list__item.ac-cal__apt--flash {
  animation: ac-flash-pulse 3s ease-out;
  position: relative;
  z-index: 4;
}

/* Hover-to-create indicator (Day/Week). Visually distinct from the
   drag drop-indicator: dashed emerald line + a "+" chip that hints
   clicking creates a new appointment at that exact slot. pointer-events
   stays none so the indicator never swallows the click that triggers
   the create-modal. */
.ac-cal__hover-indicator {
  position: absolute;
  left: 2px;
  right: 2px;
  height: 0;
  border-top: 2px dashed var(--np, var(--color-primary));
  z-index: 5;
  pointer-events: none;
  opacity: .85;
}
.ac-cal__hover-indicator__time {
  position: absolute;
  left: -56px;
  top: -10px;
  font-size: 10px;
  font-weight: 700;
  background: var(--np, var(--color-primary));
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.ac-cal__hover-indicator__plus {
  position: absolute;
  right: 6px;
  top: -10px;
  font-size: 10px;
  font-weight: 700;
  background: var(--color-primary-soft, rgba(14,143,131,.18));
  color: var(--np, var(--color-primary));
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: -.01em;
  border: 1px solid rgba(14,143,131,.3);
}
.ac-cal__week-grid__col .ac-cal__hover-indicator__time {
  left: auto;
  right: 4px;
  top: -16px;
}
/* Week columns are too narrow for the "+ Neuer Termin" chip — hide it
   there; the time chip alone still communicates intent. */
.ac-cal__week-grid__col .ac-cal__hover-indicator__plus { display: none; }
/* Cursor hint: empty slots in day/week-view feel clickable. The pill
   element overrides this back to "grab" via its draggable styling. */
.ac-cal__day-grid__body,
.ac-cal__week-grid__col { cursor: copy; }
.ac-cal__day-grid__body [data-ac-apt],
.ac-cal__week-grid__col [data-ac-apt] { cursor: grab; }

/* ── Desktop overrides — wider tap targets, sidebar layout. */
@media (min-width: 768px) {
  .ac-cal {
    --ac-day-cell: minmax(96px, 1fr);
    --ac-text-title: 32px;
    --ac-gutter: 20px;
  }
}

/* ── Light-mode adjustments. Tokens already swap via 45-modern-premium.css
   but the calendar has a couple of surfaces (today-ring, event-bar shadow)
   that read better with a tuned alpha in light mode. */
html[data-theme="light"] .ac-cal {
  --ac-shadow: 0 6px 18px rgba(6,40,30,.10);
}

/* Mobile calendar toolbar polish: calm rows, one segmented control and
   branded primary actions. Placed late so it wins over older compact-header
   and generic app-shell button overrides. */
@media (max-width: 767px) {
  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-auto-rows: auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px 8px !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__header-left {
    grid-column: 1 !important;
    grid-row: 1 !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;
    gap: 7px !important;
    justify-self: end !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__month-title,
  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__search {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    padding: 0 2px 2px !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__month-title {
    font-size: 24px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__search {
    gap: 8px !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__search-input {
    height: 42px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.86) !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__viewswitch {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 3px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(7,95,89,.16) !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.82), rgba(238,248,246,.76)),
      rgba(14,143,131,.07) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 8px 18px rgba(6,40,30,.07) !important;
    overflow: visible !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__viewswitch button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(24,49,43,.78) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__viewswitch button.is-active {
    background: linear-gradient(135deg, #0e8f83 0%, #08766e 52%, #075f59 100%) !important;
    color: #ffffff !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.32),
      0 0 0 1.5px rgba(14,143,131,.42),
      0 0 18px 2px rgba(14,143,131,.38),
      0 4px 14px rgba(8,118,110,.22)
    !important;
    animation: ac-viewswitch-glow 2s ease-in-out infinite !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__navbtn,
  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__today {
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    border-color: rgba(7,95,89,.14) !important;
    background: rgba(255,255,255,.82) !important;
    box-shadow: 0 4px 12px rgba(6,40,30,.06) !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__navbtn {
    width: 40px !important;
    font-size: 20px !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__today {
    padding: 0 13px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__header-actions button {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 15px !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    background: linear-gradient(135deg, #0e8f83 0%, #08766e 52%, #075f59 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(14,143,131,.22), inset 0 1px 0 rgba(255,255,255,.38) !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__header-actions button svg,
  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__header-actions button * {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
  }

  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__header-actions button:hover,
  html[data-design="v2"] body.app-v4 .ac-cal .ac-cal__header-actions button.is-active {
    filter: brightness(1.04) !important;
    background: linear-gradient(135deg, #13a094 0%, #08766e 50%, #064f4a 100%) !important;
  }
}