/* GENERIERT von frontend/build_assets.py – nicht direkt bearbeiten. Quelle: frontend/css-src/ */

/* ===== tokens.css ===== */
/* Design-Tokens – übernommen aus css-tokens.md.
   Ab jetzt hier ändern, danach: python3 frontend/build_assets.py */

:root {
  --primary: #0f1948;
  --accent: #536090;
  --tertiary: #3b68df;
  --base: #f5f6fd;

  /* === Palette – alle Farben exakt (als Fläche; Schrift darauf: on-palette-n) === */
  --palette-1: #0f1948; /* = primary */
  --on-palette-1: #f9fafe;
  --palette-2: #536090; /* = accent */
  --on-palette-2: #f9fafe;
  --palette-3: #3b68df; /* = tertiary */
  --on-palette-3: #f9fafe;
  --palette-4: #f5f6fd; /* = base */
  --on-palette-4: #0e0e1b;
  --palette-5: #0e0e1b; /* = text */
  --on-palette-5: #f9fafe;

  /* iOS-Systemschrift (SF Pro auf iPhone/Mac); Satoshi/General Sans nur noch im PDF */
  --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  /* === Abstände – Start 2 px, Abstand 2 px, 10 Stufen (ansteigend) === */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 48px;
  --space-10: 64px;
  --space-xs: 2px;
  --space-sm: 4px;
  --space-md: 8px;
  --space-lg: 12px;
  --space-xl: 20px;
  --space-2xl: 32px;
  --space-section: clamp(28px, 4.6vw, 60px);

  /* === Schriftgrößen – Basis 16 px, Verhältnis 1.25, 2 Stufen kleiner, 5 größer === */
  --fs-xs: 0.8rem;
  --fs-sm: 0.894rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.563rem;
  --fs-2xl: clamp(1.563rem, 2.6vw, 1.953rem);
  --fs-3xl: clamp(1.563rem, 3.26vw, 2.441rem);
  --fs-4xl: clamp(1.678rem, 4.07vw, 3.052rem);
  --fs-h1: clamp(1.678rem, 4.07vw, 3.052rem);
  --fs-h2: clamp(1.563rem, 3.26vw, 2.441rem);
  --fs-h3: clamp(1.563rem, 2.6vw, 1.953rem);
  --fs-h4: 1.563rem;
  --heading-weight: 700;
  --heading-tracking: -0.02em;
  --label-transform: uppercase;
  --label-tracking: 0.12em;

  /* === Radien – Grundradius 5 px, 4 Stufen === */
  --radius-1: 5px;
  --radius-2: 10px;
  --radius-3: 15px;
  --radius-4: 20px;
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 15px;
  --radius-btn: 10px;
  --radius-full: 999px;

  /* === Rahmen & Schatten === */
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md: 0 2px 4px rgb(0 0 0 / 0.04), 0 12px 28px -12px rgb(0 0 0 / 0.22);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.04), 0 28px 56px -24px rgb(0 0 0 / 0.32);

  /* === Auto-derived — regenerate if you change a color === */
  --bg: #f5f6fd;
  --surface: #fbfbff;
  --surface-2: #ffffff;
  --text: #0e0e1b;
  --text-muted: #565764;
  --text-subtle: #646471;
  --border: #d0d1d9;
  --border-strong: #b1b2bc;
  --primary-hover: #1e2b5c;
  --primary-text: #0f1948;
  --on-primary: #f9fafe;
  --primary-soft: #dce6ff;
  --primary-soft-hover: #d1dbf3;
  --on-primary-soft: #3a4a7d;
  --on-primary-soft-muted: #525f84;
  --accent-hover: #404c7b;
  --accent-text: #536090;
  --on-accent: #f9fafe;
  --accent-soft: #dde5ff;
  --accent-soft-hover: #d2daf3;
  --on-accent-soft: #3e4a78;
  --on-accent-soft-muted: #555f80;
  --tertiary-hover: #2952c7;
  --tertiary-text: #3b68df;
  --on-tertiary: #f9fafe;
  --tertiary-soft: #dbe6ff;
  --tertiary-soft-hover: #d0dbf3;
  --on-tertiary-soft: #24449d;
  --on-tertiary-soft-muted: #445e99;
  --ring: #6b7697;

  /* === Extras: Footer & Status === */
  --inverse: #0e0e1b;
  --on-inverse: #f5f6fd;
  --on-inverse-muted: #a7a8b2;
  --success: #009342;
  --success-text: #008239;
  --success-soft: #d9e8e2;
  --warning: #b98400;
  --warning-text: #936800;
  --warning-soft: #ede6e0;
  --danger: #c74b43;
  --danger-text: #c0453d;
  --danger-soft: #f2dfe2;

  /* === Skala Primary === */
  --primary-50: #f2f6ff;
  --primary-100: #e1e9ff;
  --primary-200: #c6d5fe;
  --primary-300: #a9bbec;
  --primary-400: #8b9ed5;
  --primary-500: #6f82ba;
  --primary-600: #56689d;
  --primary-700: #415182;
  --primary-800: #2f3c65;
  --primary-900: #1e2848;
  --primary-950: #0f1948;

  /* === Skala Accent === */
  --accent-50: #f2f5ff;
  --accent-100: #e2e9ff;
  --accent-200: #c9d5fa;
  --accent-300: #adbae7;
  --accent-400: #8f9ecf;
  --accent-500: #7482b4;
  --accent-600: #536090;
  --accent-700: #45517d;
  --accent-800: #323c61;
  --accent-900: #212844;
  --accent-950: #111628;

  /* === Skala Tertiary === */
  --tertiary-50: #f1f6ff;
  --tertiary-100: #e0eaff;
  --tertiary-200: #c3d6ff;
  --tertiary-300: #9cbbff;
  --tertiary-400: #719cff;
  --tertiary-500: #4c7cf4;
  --tertiary-600: #3b68df;
  --tertiary-700: #2248b3;
  --tertiary-800: #15338f;
  --tertiary-900: #0a2167;
  --tertiary-950: #04113f;

  /* === Skala Neutral === */
  --neutral-50: #f5f5fb;
  --neutral-100: #e9e9f0;
  --neutral-200: #d5d5df;
  --neutral-300: #bbbbc7;
  --neutral-400: #9e9fac;
  --neutral-500: #838390;
  --neutral-600: #696976;
  --neutral-700: #53535e;
  --neutral-800: #3d3d47;
  --neutral-900: #292931;
  --neutral-950: #17171b;
}

/* Dark Mode – folgt der Systemeinstellung */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #0f1948; /* nur als Fläche – als Schrift --primary-text nutzen (1,14 : 1 auf bg) */
    --accent: #536090; /* nur als Fläche – als Schrift --accent-text nutzen (3,14 : 1 auf bg) */
    --tertiary: #3b68df; /* nur als Fläche – als Schrift --tertiary-text nutzen (3,86 : 1 auf bg) */
    --base: #0e0e1b;

    /* === Palette – alle Farben exakt (als Fläche; Schrift darauf: on-palette-n) === */
    --palette-1: #0f1948; /* = primary */
    --on-palette-1: #f9fafe;
    --palette-2: #536090; /* = accent */
    --on-palette-2: #f9fafe;
    --palette-3: #3b68df; /* = tertiary */
    --on-palette-3: #f9fafe;
    --palette-4: #f5f6fd; /* = text */
    --on-palette-4: #0e0e1b;
    --palette-5: #0e0e1b; /* = base */
    --on-palette-5: #f9fafe;

    /* === Auto-derived — regenerate if you change a color === */
    --bg: #0e0e1b;
    --surface: #171725;
    --surface-2: #1f1f2d;
    --text: #f5f6fd;
    --text-muted: #9899a4;
    --text-subtle: #898a95;
    --border: #343442;
    --border-strong: #4d4e5b;
    --primary-hover: #1e2b5c;
    --primary-text: #7386bf;
    --on-primary: #f9fafe;
    --primary-soft: #1f2743;
    --primary-soft-hover: #27304d;
    --on-primary-soft: #bfd0ff;
    --on-primary-soft-muted: #a1b0d9;
    --accent-hover: #404c7b;
    --accent-text: #7886b9;
    --on-accent: #f9fafe;
    --accent-soft: #212740;
    --accent-soft-hover: #293049;
    --on-accent-soft: #c1cfff;
    --on-accent-soft-muted: #a4b0d5;
    --tertiary-hover: #2952c7;
    --tertiary-text: #5181fb;
    --on-tertiary: #f9fafe;
    --tertiary-soft: #1a2847;
    --tertiary-soft-hover: #223151;
    --on-tertiary-soft: #bbd1ff;
    --on-tertiary-soft-muted: #92b0f1;
    --ring: #424c6f;

    /* === Extras: Footer & Status === */
    --inverse: #050510;
    --on-inverse: #f5f6fd;
    --on-inverse-muted: #a2a3ae;
    --success: #43b966;
    --success-text: #43b966;
    --success-soft: #1a2c2b;
    --warning: #ecaa0b;
    --warning-text: #ecaa0b;
    --warning-soft: #332a26;
    --danger: #f27166;
    --danger-text: #f27166;
    --danger-soft: #35212b;
  }
}

/* Dark Mode – manuell per <html data-theme="dark"> */
:root[data-theme="dark"] {
  --primary: #0f1948; /* nur als Fläche – als Schrift --primary-text nutzen (1,14 : 1 auf bg) */
  --accent: #536090; /* nur als Fläche – als Schrift --accent-text nutzen (3,14 : 1 auf bg) */
  --tertiary: #3b68df; /* nur als Fläche – als Schrift --tertiary-text nutzen (3,86 : 1 auf bg) */
  --base: #0e0e1b;

  /* === Palette – alle Farben exakt (als Fläche; Schrift darauf: on-palette-n) === */
  --palette-1: #0f1948; /* = primary */
  --on-palette-1: #f9fafe;
  --palette-2: #536090; /* = accent */
  --on-palette-2: #f9fafe;
  --palette-3: #3b68df; /* = tertiary */
  --on-palette-3: #f9fafe;
  --palette-4: #f5f6fd; /* = text */
  --on-palette-4: #0e0e1b;
  --palette-5: #0e0e1b; /* = base */
  --on-palette-5: #f9fafe;

  /* === Auto-derived — regenerate if you change a color === */
  --bg: #0e0e1b;
  --surface: #171725;
  --surface-2: #1f1f2d;
  --text: #f5f6fd;
  --text-muted: #9899a4;
  --text-subtle: #898a95;
  --border: #343442;
  --border-strong: #4d4e5b;
  --primary-hover: #1e2b5c;
  --primary-text: #7386bf;
  --on-primary: #f9fafe;
  --primary-soft: #1f2743;
  --primary-soft-hover: #27304d;
  --on-primary-soft: #bfd0ff;
  --on-primary-soft-muted: #a1b0d9;
  --accent-hover: #404c7b;
  --accent-text: #7886b9;
  --on-accent: #f9fafe;
  --accent-soft: #212740;
  --accent-soft-hover: #293049;
  --on-accent-soft: #c1cfff;
  --on-accent-soft-muted: #a4b0d5;
  --tertiary-hover: #2952c7;
  --tertiary-text: #5181fb;
  --on-tertiary: #f9fafe;
  --tertiary-soft: #1a2847;
  --tertiary-soft-hover: #223151;
  --on-tertiary-soft: #bbd1ff;
  --on-tertiary-soft-muted: #92b0f1;
  --ring: #424c6f;

  /* === Extras: Footer & Status === */
  --inverse: #050510;
  --on-inverse: #f5f6fd;
  --on-inverse-muted: #a2a3ae;
  --success: #43b966;
  --success-text: #43b966;
  --success-soft: #1a2c2b;
  --warning: #ecaa0b;
  --warning-text: #ecaa0b;
  --warning-soft: #332a26;
  --danger: #f27166;
  --danger-text: #f27166;
  --danger-soft: #35212b;
}

/* ===== reset.css ===== */
/* Schlanker Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
p,
ul,
ol,
figure,
fieldset {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

fieldset {
  border: 0;
  min-width: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* ===== base.css ===== */
/* Grundlayout im iOS-Stil: Mobile-first, am PC zentriert in Handybreite.
   iOS-Maße werden aus den Tokens abgeleitet. */

:root {
  /* App-Breite am PC (Handybreite) */
  --app-width: calc(var(--space-10) * 7);

  /* iOS-Typografie: Body 17 pt, Footnote 13 pt, Large Title 34 pt */
  --ios-body: calc(var(--fs-base) * 1.0625);
  --ios-footnote: calc(var(--fs-xs) * 1.016);
  --ios-subhead: calc(var(--fs-sm) * 1.05);
  --ios-title: calc(var(--fs-xl) * 1.36);
  --ios-headline-weight: 600;

  /* iOS-Maße: Zeilenhöhe 44, Rand 16, Leistenhöhe 44/49 */
  --ios-row: calc(var(--space-8) + var(--space-5));
  --ios-inset: var(--space-6);
  --ios-bar: calc(var(--space-8) + var(--space-5));
  --ios-toolbar: calc(var(--space-9) + var(--space-1));
  --hairline: calc(var(--border-width) / 2);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);

  /* Farben (Tokens, iOS-Rollen) */
  --tint: var(--tertiary-text);
  --tint-fill: var(--tertiary);
  --separator: var(--border);
  --cell: var(--surface-2);
  --tap: var(--neutral-100);
  --fill-quiet: var(--neutral-100);
  --bar-bg: color-mix(in srgb, var(--bg) 82%, transparent);

  /* Tagesmarkierung und Ereignisse; theme.css überschreibt sie mit den
     Farben aus den Einstellungen */
  --day-selected: var(--tertiary);
  --on-day-selected: var(--on-tertiary);
  --event-urlaub: var(--success-soft);
  --event-krank: var(--warning-soft);
  --event-gleitzeit: var(--tertiary-soft);
  --event-teilgleitzeit: var(--accent-soft);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --tap: var(--border);
    --fill-quiet: var(--surface);
  }
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}

/* Solange ein Sheet offen ist, scrollt die Seite dahinter nicht */
html:has(dialog[open]) {
  overflow: hidden;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--ios-body);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* kein Doppeltipp-Zoom, kein grauer Tipp-Blitz von Safari */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.app {
  width: 100%;
  max-width: var(--app-width);
  margin: 0 auto;
  padding: 0 var(--ios-inset) calc(var(--space-9) + env(safe-area-inset-bottom));
}

.page--home .app {
  padding-bottom: calc(var(--ios-toolbar) + var(--space-8) + env(safe-area-inset-bottom));
}

a {
  color: var(--tint);
  text-decoration: none;
}

/* Bedienelemente wie in einer App: kein Markieren, kein Kontextmenü */
button,
a,
summary,
label,
.cal,
.toolbar,
.navbar {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

strong {
  font-weight: var(--ios-headline-weight);
}

/* Zahlen mit gleich breiten Ziffern, damit nichts springt */
.num {
  font-variant-numeric: tabular-nums;
}

.is-positive {
  color: var(--success-text);
}

.is-negative {
  color: var(--danger-text);
}

.icon {
  width: 1.2em;
  height: 1.2em;
  flex: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: calc(var(--border-width) * 2) solid var(--ring);
  outline-offset: var(--space-1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== action-sheet.css ===== */
/* Komponente: Aktionsblatt (components/confirm_sheet.html, components/event_sheet.html) */

.action-sheet {
  position: fixed;
  inset: auto 0 0;
  width: min(100%, var(--app-width));
  max-width: none;
  margin: 0 auto;
  padding: 0 var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  border: 0;
  background: none;
  overflow: visible;
  color: var(--text);
  animation: sheet-up 0.38s var(--ease-ios);
}

.action-sheet::backdrop {
  background: rgb(0 0 0 / 0.35);
  animation: fade-in 0.3s ease;
}

.action-sheet.is-closing {
  animation: sheet-down 0.25s var(--ease-ios) forwards;
}

.action-sheet.is-closing::backdrop {
  animation: fade-out 0.25s ease forwards;
}

.action-sheet__group {
  margin-bottom: var(--space-4);
  border-radius: calc(var(--radius-md) * 1.4);
  background: color-mix(in srgb, var(--cell) 92%, transparent);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  overflow: hidden;
}

.action-sheet__message {
  padding: var(--space-5) var(--ios-inset);
  color: var(--text-muted);
  font-size: var(--ios-footnote);
  text-align: center;
}

.action-sheet__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--space-9) + var(--space-3));
  border: 0;
  border-top: var(--hairline) solid var(--separator);
  background: none;
  color: var(--tint);
  font-size: calc(var(--ios-body) * 1.18);
  cursor: pointer;
  list-style: none;
}

.action-sheet__btn::-webkit-details-marker {
  display: none;
}

.action-sheet__group > .action-sheet__btn:first-child {
  border-top: 0;
}

.action-sheet__btn:active {
  background: var(--tap);
}

.action-sheet__btn--destructive {
  color: var(--danger-text);
}

.action-sheet__btn--cancel {
  font-weight: var(--ios-headline-weight);
}

.action-sheet__more[open] > summary {
  color: var(--text);
}

.action-sheet__inline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--ios-inset) var(--space-5);
  animation: unfold 0.25s var(--ease-ios);
}

.action-sheet__inline .input--plain {
  padding: var(--space-3) var(--space-4);
  border-radius: calc(var(--radius-sm) * 1.4);
  background: var(--fill-quiet);
  color: var(--text);
  text-align: left;
}

/* ===== auth.css ===== */
/* Komponente: pages/login.html, pages/login_2fa.html, pages/error.html,
   pages/totp_setup.html (QR-Code), pages/recovery_codes.html */

.subpage {
  min-height: 100dvh;
}

.auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) 0 var(--space-10);
}

/* App-Symbol (Variante A) mit iOS-Ecken */
.auth__icon {
  display: block;
  width: calc(var(--space-10) + var(--space-6));
  height: calc(var(--space-10) + var(--space-6));
  margin: 0 auto var(--space-6);
  border-radius: calc(var(--radius-md) * 2.2);
  box-shadow: var(--shadow-md);
}

.auth__title {
  margin-bottom: var(--space-3);
  font-size: var(--ios-title);
  font-weight: 700;
  text-align: center;
}

.auth__lead {
  margin-bottom: var(--space-7);
  color: var(--text-muted);
  font-size: var(--ios-subhead);
  text-align: center;
}

.auth__title + .toasts + .list,
.auth__title + .list {
  margin-top: var(--space-7);
}

.auth__foot {
  font-size: var(--ios-subhead);
  text-align: center;
}

.qr {
  width: calc(var(--space-10) * 3);
  margin: 0 auto var(--space-7);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--neutral-50);
}

.qr svg {
  width: 100%;
  height: auto;
}

.secret {
  margin-bottom: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--cell);
  font-size: var(--ios-subhead);
  letter-spacing: var(--label-tracking);
  text-align: center;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

.codes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--cell);
  font-size: var(--ios-subhead);
  letter-spacing: 0.06em;
  text-align: center;
  -webkit-user-select: all;
  user-select: all;
}

/* ===== calendar.css ===== */
/* Komponente: components/home_header.html (Monatstitel) und components/calendar.html
   Monatsraster wie im iPhone-Kalender: Wochenzeilen mit Haarlinie, Zahl oben im Kreis. */

.navbar--home {
  margin-bottom: 0;
}

.month-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.month-head__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.month-head__month {
  color: var(--tint);
}

.month-head__year {
  color: var(--text-muted);
  font-weight: 400;
}

.month-head__nav {
  display: flex;
  gap: var(--space-2);
  padding-bottom: var(--space-5);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ios-row);
  height: var(--ios-row);
  border-radius: var(--radius-full);
  color: var(--tint);
}

.icon-btn:active {
  background: var(--tap);
}

.cal {
  margin: 0 calc(var(--ios-inset) * -1) var(--space-7);
}

.cal__weekdays,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 var(--space-3);
  text-align: center;
}

.cal__weekdays {
  position: sticky;
  top: calc(var(--ios-bar) + env(safe-area-inset-top));
  z-index: 5;
  padding-block: var(--space-2) var(--space-3);
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--hairline) solid var(--separator);
}

.cal__weekday {
  font-size: var(--ios-footnote);
  font-weight: 500;
  color: var(--text);
}

.cal__weekday--free {
  color: var(--text-subtle);
}

/* Viewport für die Wischgeste: das Raster darf seitlich hinausgleiten */
.cal__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.cal__grid {
  will-change: transform;
}

.cal__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(var(--ios-row) + var(--space-5));
  padding-top: var(--space-2);
  border-top: var(--hairline) solid var(--separator);
  color: var(--text);
}

.cal__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--space-8) + var(--space-1));
  height: calc(var(--space-8) + var(--space-1));
  border-radius: var(--radius-full);
  font-size: var(--ios-body);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.15s ease, transform 0.15s var(--ease-ios);
}

.cal__day:active .cal__num {
  background: var(--tap);
  transform: scale(0.92);
}

/* Wochenende und Feiertage dezent ausgegraut */
.cal__day--free {
  color: var(--text-subtle);
}

/* Ereignisse: dezente Hintergrundfarbe der Tageszelle, keine Punkte */
.cal__day--urlaub,
.cal__day--krank,
.cal__day--gleitzeit,
.cal__day--teilgleitzeit {
  background-clip: padding-box;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.cal__day--urlaub { background-color: var(--event-urlaub); }
.cal__day--krank { background-color: var(--event-krank); }
.cal__day--gleitzeit { background-color: var(--event-gleitzeit); }
.cal__day--teilgleitzeit { background-color: var(--event-teilgleitzeit); }

/* Ausgewählter Tag (beim Start: heute) */
.cal__day--selected .cal__num,
.cal__day--selected:active .cal__num {
  background: var(--day-selected);
  color: var(--on-day-selected);
  font-weight: var(--ios-headline-weight);
}

.cal__day--empty {
  pointer-events: none;
}

/* Mehrfachauswahl (js-src/select.js) */
.home.is-selecting .cal__day--selected .cal__num {
  background: none;
  color: inherit;
  font-weight: 400;
}

.home.is-selecting .cal__day:not(.cal__day--empty) .cal__num {
  box-shadow: inset 0 0 0 calc(var(--border-width) * 1.5) var(--separator);
}

.home.is-selecting .cal__day.is-picked .cal__num {
  background: var(--day-selected);
  color: var(--on-day-selected);
  font-weight: var(--ios-headline-weight);
  box-shadow: none;
  animation: pick-pop 0.25s var(--ease-ios);
}

@keyframes pick-pop {
  50% { transform: scale(1.12); }
}

/* ===== controls.css ===== */
/* Komponente: iOS-Bedienelemente – Schalter, Felder in Listenzeilen, Zeit-Chips,
   Pill-Buttons, Segmented Control, Farbfelder */

/* Schalter (UISwitch) */
.switch {
  position: relative;
  flex: none;
  width: calc(var(--space-9) + var(--space-1));
  height: calc(var(--space-8) - var(--space-1));
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--neutral-200);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

@media (prefers-color-scheme: dark) {
  .switch {
    background: var(--border-strong);
  }
}

.switch::before {
  content: "";
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  width: calc(var(--space-8) - var(--space-1) - var(--space-2));
  height: calc(var(--space-8) - var(--space-1) - var(--space-2));
  border-radius: var(--radius-full);
  background: var(--on-tertiary);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s var(--ease-ios);
}

.switch:checked {
  background: var(--success);
}

.switch:checked::before {
  transform: translateX(calc(var(--space-9) + var(--space-1) - var(--space-8) + var(--space-1)));
}

/* Eingabefeld rechts in einer Listenzeile, ohne Rahmen */
.input--plain {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--ios-body);
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
}

.input--plain:focus {
  outline: 0;
  color: var(--text);
}

.input--plain::placeholder {
  color: var(--text-subtle);
}

select.input--plain {
  flex: none;
  max-width: 62%;
  text-align-last: right;
  cursor: pointer;
}

/* Zeit-/Datums-Chip wie im iPhone-Kalender */
.time-chip {
  min-width: 0;
  padding: var(--space-2) var(--space-4);
  border: 0;
  border-radius: calc(var(--radius-sm) * 1.4);
  background: var(--fill-quiet);
  color: var(--text);
  font-size: var(--ios-body);
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.time-chip:focus {
  outline: 0;
  color: var(--tint);
}

/* Bearbeiten-Bereich in einer aufgeklappten Zeile */
.time-edit {
  display: grid;
  gap: var(--space-3);
  padding: 0 var(--ios-inset) var(--space-5);
  animation: unfold 0.25s var(--ease-ios);
}

.time-edit__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--ios-row);
}

.time-edit__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-4);
}

@keyframes unfold {
  from { opacity: 0; transform: translateY(calc(var(--space-3) * -1)); }
}

/* kleiner abgerundeter Button (Sichern, Hinzufügen) */
.pill-btn {
  min-height: calc(var(--space-8) + var(--space-1));
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--tint-fill);
  color: var(--on-tertiary);
  font-size: var(--ios-subhead);
  font-weight: var(--ios-headline-weight);
  transition: transform 0.15s var(--ease-ios), filter 0.15s ease;
}

.pill-btn:active {
  transform: scale(0.95);
  filter: brightness(0.9);
}

.pill-btn--danger {
  background: var(--danger-soft);
  color: var(--danger-text);
}

/* Segmented Control */
.segmented {
  display: flex;
  margin-bottom: var(--space-7);
  padding: var(--space-1);
  border-radius: calc(var(--radius-md) * 0.9);
  background: var(--fill-quiet);
}

.segmented__item {
  position: relative;
  flex: 1;
}

.segmented__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented__item span {
  display: block;
  padding: var(--space-2);
  border-radius: calc(var(--radius-sm) * 1.4);
  font-size: var(--ios-subhead);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.segmented__item input:checked + span {
  background: var(--cell);
  box-shadow: var(--shadow-sm), 0 0 0 var(--hairline) var(--separator);
  font-weight: var(--ios-headline-weight);
}

/* Farbfeld (input type=color) als runder Kreis */
.color-well {
  flex: none;
  width: calc(var(--space-8) - var(--space-2));
  height: calc(var(--space-8) - var(--space-2));
  padding: 0;
  border: var(--hairline) solid var(--separator);
  border-radius: var(--radius-full);
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.color-well::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-well::-webkit-color-swatch {
  border: 0;
  border-radius: var(--radius-full);
}

.file-input {
  min-width: 0;
  max-width: 60%;
  font-size: var(--ios-subhead);
  color: var(--text-muted);
}

/* Farbpunkt für Ereignisse */
.event-dot {
  display: inline-block;
  flex: none;
  width: var(--space-5);
  height: var(--space-5);
  margin-right: var(--space-4);
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 var(--hairline) var(--separator);
}

.event-dot--urlaub { background: var(--event-urlaub); }
.event-dot--krank { background: var(--event-krank); }
.event-dot--gleitzeit { background: var(--event-gleitzeit); }
.event-dot--teilgleitzeit { background: var(--event-teilgleitzeit); }

/* ===== list.css ===== */
/* Komponente: gruppierte iOS-Liste (.list) mit Abschnittsüberschriften und -fußzeilen
   Zeilen 44 pt, Trennlinien ab dem Text eingerückt, Tipp-Hervorhebung statt Hover. */

.list {
  display: block;
  margin-bottom: var(--space-7);
  border-radius: var(--radius-md);
  background: var(--cell);
  overflow: hidden;
}

.section-header + .list,
.section-header + form > .list:first-of-type {
  margin-top: 0;
}

.list__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  min-height: var(--ios-row);
  padding: var(--space-3) var(--ios-inset);
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--ios-body);
  text-align: left;
  list-style: none;
}

/* Trennlinie zwischen Zeilen, eingerückt wie bei iOS */
.list > li + li > .list__row::before,
.list > li + li.list__row::before,
.list > li + li > details > summary::before,
.list > li + li > .swipe-row__content::before,
.list > .list__row + .list__row::before,
.list > input + .list__row::before,
.list > li + li > form > .list__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--ios-inset);
  right: 0;
  border-top: var(--hairline) solid var(--separator);
}

.list > input[type="hidden"] + input[type="hidden"] + .list__row::before,
.list > input[type="hidden"]:first-child + .list__row::before {
  content: none;
}

.list__row--link,
.list__row--button {
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.list__row--link:active,
.list__row--button:active {
  background: var(--tap);
  transition: none;
}

.list__row--tint,
.list__label--tint {
  color: var(--tint);
}

.list__row--danger {
  color: var(--danger-text);
}

.list__row--center {
  justify-content: center;
  text-align: center;
}

.list__row--center .list__label {
  flex: none;
}

.list__label {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-1);
}

.list__label--row {
  flex-direction: row;
  align-items: center;
}

.list__label--strong,
.list__value--strong {
  font-weight: var(--ios-headline-weight);
}

.list__label--muted {
  color: var(--text-muted);
}

.list__note {
  font-size: var(--ios-footnote);
  color: var(--text-muted);
}

.list__value {
  flex: none;
  text-align: right;
  color: var(--text);
}

.list__value--muted {
  color: var(--text-muted);
}

.list__chevron {
  display: inline-flex;
  margin-right: calc(var(--space-3) * -1);
  color: var(--text-subtle);
}

.list__chevron .icon {
  width: 1em;
  height: 1em;
}

.list__check {
  display: inline-flex;
  color: var(--tint);
}

.section-header {
  margin: 0 0 var(--space-3);
  padding: 0 var(--ios-inset);
  font-size: var(--ios-footnote);
  font-weight: 400;
  color: var(--text-muted);
  text-transform: var(--label-transform);
  letter-spacing: 0.02em;
}

.section-footer {
  margin: calc(var(--space-7) * -1 + var(--space-3)) 0 var(--space-7);
  padding: 0 var(--ios-inset);
  font-size: var(--ios-footnote);
  color: var(--text-muted);
  line-height: 1.35;
}

/* Fußzeile ohne Liste davor (z. B. ganz oben) */
.navbar + .large-title + .toasts + .section-footer,
.large-title + .section-footer {
  margin-top: 0;
}

/* Summary auf der Startseite */
.summary .list__value {
  font-weight: var(--ios-headline-weight);
}

/* Profilzeile in den Einstellungen */
.profile-row {
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--space-9) + var(--space-3));
  height: calc(var(--space-9) + var(--space-3));
  border-radius: var(--radius-full);
  background: linear-gradient(160deg, var(--tertiary-400), var(--tertiary-700));
  color: var(--on-tertiary);
  font-size: var(--fs-xl);
  font-weight: var(--ios-headline-weight);
}

/* details/summary als aufklappbare Zeile */
.list summary {
  list-style: none;
}

.list summary::-webkit-details-marker {
  display: none;
}

.list__value.is-positive {
  color: var(--success-text);
}

.list__value.is-negative {
  color: var(--danger-text);
}

/* ===== navbar.css ===== */
/* Komponente: Navigationsleiste und großer Titel (components/ui.html, components/home_header.html)
   Durchscheinend mit Unschärfe; der kleine Titel erscheint, sobald der große
   Titel hinausgescrollt ist (js-src/nav.js setzt .navbar--scrolled). */

.navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: calc(var(--ios-bar) + env(safe-area-inset-top));
  margin: 0 calc(var(--ios-inset) * -1);
  padding: env(safe-area-inset-top) var(--space-4) 0;
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--hairline) solid transparent;
  transition: border-color 0.2s ease;
}

.navbar--scrolled {
  border-bottom-color: var(--separator);
}

.navbar__side {
  display: flex;
  align-items: center;
  min-width: 0;
}

.navbar__side--right {
  justify-content: flex-end;
}

.navbar__title {
  font-weight: var(--ios-headline-weight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(var(--space-2));
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar--scrolled .navbar__title {
  opacity: 1;
  transform: none;
}

.navbar__back,
.navbar__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--ios-row);
  padding: 0 var(--space-2);
  border: 0;
  background: none;
  color: var(--tint);
  font-size: var(--ios-body);
  white-space: nowrap;
}

.navbar__back .icon {
  width: 1.45em;
  height: 1.45em;
  margin-left: calc(var(--space-3) * -1);
}

.navbar__action--strong,
.navbar__action[form] {
  font-weight: var(--ios-headline-weight);
}

.navbar__back:active,
.navbar__action:active {
  opacity: 0.4;
}

.large-title {
  padding: var(--space-1) 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--ios-title);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* ===== sheet.css ===== */
/* Komponente: components/sheet.html und components/day_sheet.html – Bottom Sheet
   Gleitet von unten herein; js-src/sheet.js schließt animiert (.is-closing)
   und verschiebt das Panel beim Ziehen nach unten. */

.sheet {
  position: fixed;
  inset: auto 0 0;
  width: min(100%, var(--app-width));
  max-width: none;
  max-height: none;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
  color: var(--text);
}

.sheet::backdrop {
  background: rgb(0 0 0 / 0.35);
  animation: fade-in 0.3s ease;
}

.sheet.is-closing::backdrop {
  animation: fade-out 0.25s ease forwards;
}

.sheet__panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - var(--space-9) - env(safe-area-inset-top));
  border-radius: calc(var(--radius-md) * 1.4) calc(var(--radius-md) * 1.4) 0 0;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  animation: sheet-up 0.42s var(--ease-ios);
  will-change: transform;
}

.sheet.is-closing .sheet__panel {
  animation: sheet-down 0.28s var(--ease-ios) forwards;
}

.sheet__grabber {
  flex: none;
  width: calc(var(--space-8) + var(--space-1));
  height: var(--space-2);
  margin: var(--space-3) auto var(--space-1);
  border-radius: var(--radius-full);
  background: var(--border-strong);
  touch-action: none;
}

.sheet__body {
  flex: 1;
  min-height: 0;
  padding: 0 var(--ios-inset) calc(var(--space-8) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--ios-bar);
  margin: 0 calc(var(--ios-inset) * -1);
  padding: 0 var(--space-4);
  background: var(--bg);
  touch-action: none;
}

.sheet-head__title {
  font-size: var(--ios-body);
  font-weight: var(--ios-headline-weight);
}

.sheet-head__side--right {
  justify-self: end;
}

.sheet-sub {
  margin-bottom: var(--space-6);
  color: var(--text-muted);
  font-size: var(--ios-footnote);
  text-align: center;
}

@keyframes sheet-up {
  from { transform: translateY(100%); }
}

@keyframes sheet-down {
  to { transform: translateY(100%); }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

/* ===== swipe-row.css ===== */
/* Komponente: Zeile mit Wischen-zum-Löschen (js-src/swipe-row.js)
   Der Inhalt wird nach links geschoben, dahinter liegt der rote Löschen-Button. */

.swipe-row {
  position: relative;
  overflow: hidden;
  list-style: none;
}

.swipe-row > form:not(.time-edit) {
  display: none;
}

.swipe-row__actions {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
}

.swipe-row__delete {
  width: calc(var(--space-10) + var(--space-6));
  border: 0;
  background: var(--danger);
  color: var(--on-tertiary);
  font-size: var(--ios-body);
}

.swipe-row__content {
  position: relative;
  display: block;
  background: var(--cell);
  touch-action: pan-y;
}

.swipe-row__content.is-settling {
  transition: transform 0.3s var(--ease-ios);
}

/* Inhalt, der selbst eine Listenzeile ist (z. B. Verlauf der Arbeitszeit) */
.swipe-row__content.list__row {
  display: flex;
}

/* ===== timer.css ===== */
/* Komponente: components/timer.html – Start/Stop oberhalb des Kalenders */

.timer {
  margin-bottom: var(--space-6);
}

.timer__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.timer__btn {
  width: 100%;
  min-height: calc(var(--space-9) + var(--space-3));
  border: 0;
  border-radius: calc(var(--radius-md) * 1.4);
  font-size: var(--ios-body);
  font-weight: var(--ios-headline-weight);
  color: var(--on-tertiary);
  transition: transform 0.2s var(--ease-ios), opacity 0.2s ease, filter 0.2s ease;
}

.timer__btn:active:not(:disabled) {
  transform: scale(0.96);
  filter: brightness(0.92);
}

.timer__btn:disabled {
  background: var(--fill-quiet);
  color: var(--text-subtle);
  cursor: default;
}

.timer__btn--start:not(:disabled) {
  background: var(--success);
}

.timer__btn--stop:not(:disabled) {
  background: var(--danger);
}

.timer__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--ios-row);
  color: var(--text-muted);
  font-size: var(--ios-subhead);
  text-align: center;
}

.timer__status strong {
  color: var(--text);
}

/* pulsierender Punkt bei laufender Erfassung */
.timer__dot,
.live-dot {
  display: inline-block;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--success);
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  50% { opacity: 0.3; }
}

/* ===== toast.css ===== */
/* Komponente: components/flashes.html – Toasts oben, blenden sich selbst aus */

.toasts {
  position: fixed;
  top: calc(env(safe-area-inset-top) + var(--space-4));
  left: 50%;
  z-index: 100;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  width: min(calc(100% - var(--space-8)), calc(var(--app-width) - var(--space-8)));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  padding: var(--space-4) var(--space-7);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--cell) 92%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg), 0 0 0 var(--hairline) var(--separator);
  color: var(--text);
  font-size: var(--ios-subhead);
  font-weight: 500;
  text-align: center;
  animation: toast-life 3.2s var(--ease-ios) forwards;
}

.toast--success::before {
  content: "✓ ";
  color: var(--success-text);
  font-weight: 700;
}

.toast--error {
  color: var(--danger-text);
  animation-duration: 5s;
}

.toast--info {
  animation-duration: 4.5s;
}

@keyframes toast-life {
  0% { opacity: 0; transform: translateY(-120%) scale(0.9); }
  8% { opacity: 1; transform: none; }
  88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-60%) scale(0.95); }
}

/* Im Sheet unten statt oben, damit der Kopf frei bleibt */
.sheet .toasts {
  top: auto;
  bottom: calc(env(safe-area-inset-bottom) + var(--space-6));
}

/* ===== toolbar.css ===== */
/* Komponente: components/toolbar.html – Werkzeugleiste unten wie im iPhone-Kalender */

.toolbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 30;
  width: min(100%, var(--app-width));
  transform: translateX(-50%);
  padding: 0 var(--space-5) env(safe-area-inset-bottom);
  background: var(--bar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: var(--hairline) solid var(--separator);
}

.toolbar__set {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--ios-toolbar);
}

.toolbar__set > :first-child {
  justify-self: start;
}

.toolbar__set > :last-child {
  justify-self: end;
}

.toolbar__set--select {
  display: none;
}

.home.is-selecting .toolbar__set--normal {
  display: none;
}

.home.is-selecting .toolbar__set--select {
  display: grid;
  animation: bar-in 0.25s var(--ease-ios);
}

.toolbar__btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--ios-row);
  padding: 0 var(--space-3);
  border: 0;
  background: none;
  color: var(--tint);
  font-size: var(--ios-body);
}

.toolbar__btn:active:not(:disabled) {
  opacity: 0.4;
}

.toolbar__btn:disabled {
  color: var(--text-subtle);
}

.toolbar__btn--strong {
  font-weight: var(--ios-headline-weight);
}

.toolbar__btn--icon .icon {
  width: 1.45em;
  height: 1.45em;
}

.toolbar__count {
  font-size: var(--ios-subhead);
  font-weight: var(--ios-headline-weight);
}

@keyframes bar-in {
  from { opacity: 0; transform: translateY(var(--space-3)); }
}

/* ===== transitions.css ===== */
/* Komponente: Seitenwechsel und Monatswechsel (js-src/nav.js, js-src/swipe.js)
   Seitenwechsel über View Transitions: data-nav="push" schiebt die neue Seite
   von rechts herein, data-nav="back" schiebt die aktuelle nach rechts hinaus. */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html[data-nav="push"]::view-transition-old(root) {
  animation: vt-push-old 0.42s var(--ease-ios) both;
}

html[data-nav="push"]::view-transition-new(root) {
  animation: vt-push-new 0.42s var(--ease-ios) both;
  box-shadow: var(--shadow-lg);
}

html[data-nav="back"]::view-transition-old(root) {
  z-index: 1;
  animation: vt-back-old 0.38s var(--ease-ios) both;
  box-shadow: var(--shadow-lg);
}

html[data-nav="back"]::view-transition-new(root) {
  animation: vt-back-new 0.38s var(--ease-ios) both;
}

@keyframes vt-push-old {
  to { transform: translateX(-30%); filter: brightness(0.92); }
}

@keyframes vt-push-new {
  from { transform: translateX(100%); }
}

@keyframes vt-back-old {
  to { transform: translateX(100%); }
}

@keyframes vt-back-new {
  from { transform: translateX(-30%); filter: brightness(0.92); }
}

/* Monatswechsel: neues Raster gleitet aus der Wischrichtung herein */
.cal-enter-next {
  animation: cal-in-next 0.36s var(--ease-ios);
}

.cal-enter-prev {
  animation: cal-in-prev 0.36s var(--ease-ios);
}

.cal-settle {
  transition: transform 0.3s var(--ease-ios), opacity 0.3s ease;
}

@keyframes cal-in-next {
  from { transform: translateX(40%); opacity: 0; }
}

@keyframes cal-in-prev {
  from { transform: translateX(-40%); opacity: 0; }
}

/* HTMX: kein Inline-Style, Ladeanzeige über Klassen */
.htmx-indicator {
  opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}