/* ─────────────────────────────────────────────────────────────
   Unser Zuhause – Design-Tokens & Komponenten
   Look „Bordeaux & Champagner“: weinrot getöntes Dunkel, Bordeaux als Akzentfläche,
   Rosé für Akzent-Text auf dunklem Grund, Champagner für Geld & Hinweise.
   Farben ändern = nur die Tokens hier anpassen.
   ───────────────────────────────────────────────────────────── */
:root {
  --fs: .85;               /* Schriftgröße insgesamt: 1 = 100 %, .85 = wirkt wie 85 % Seitengröße */
  --bg: #170E12;
  --bg-deep: #0F090B;
  --bg-bar: #1B1115;
  --surface: #24161B;
  --raised: #2F1D23;
  --line: #3B262D;
  --line-soft: #33222A;
  --dash: #4C323A;
  --check: #5C424A;

  --text: #F6EDE7;
  --muted: #BCA6AC;
  --faint: #A08990;
  --soft: #DCCBCF;

  --accent: #8E2443;        /* Bordeaux – Flächen, Buttons, Kacheln */
  --accent-text: #E8879C;   /* Rosé – Akzent als Text/Linie auf dunklem Grund */
  --accent-hover: #F0A6B6;
  --on-accent: #FFF1EC;     /* Creme auf Bordeaux */
  --accent-tint: #3A1520;
  --partner-tint: #4A1F2C;

  --butter: #E3C285;        /* Champagner */
  --butter-ink: var(--butter);   /* Zweitfarbe als Schrift (im hellen Design dunkler als als Fläche) */
  --butter-tint: #2E2419;
  --on-butter: #1F160C;
  --warn-bg: #231912;
  --warn-line: #5A4630;
  --neutral-bar: #6E5550;

  --secret: #D9B3C9;
  --secret-tint: #26141F;
  --secret-line: #4a2d3f;
  --secret-icon: #3a2133;

  --danger: #e5734f;        /* Löschen, überfällig */
  --on-danger: #1a0f0b;
  --good: #7fd1a0;          /* Rückblick: besser als zuvor */
  --bad: #f0a07a;
  --shimmer: rgba(255, 241, 236, .08);

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  --r-xl: 28px;
  --r-l: 22px;
  --r-m: 18px;
  --r-s: 14px;

  --pad: 20px;
  --gap: 18px;
  --tabbar-h: 72px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);

  color-scheme: dark;
}

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

html, body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: calc(16px * var(--fs));
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .7; }
a { color: inherit; text-decoration: none; }
code { font-size: .9em; color: var(--butter-ink); }

:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Grundgerüst ──────────────────────────────────────────── */
.app {
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: calc(28px + var(--safe-top)) var(--pad) calc(var(--tabbar-h) + var(--safe-bottom) + 24px);
}

.tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  justify-content: space-around;
  padding: 10px 8px calc(10px + var(--safe-bottom));
  background: var(--bg-bar);
  background: color-mix(in srgb, var(--bg-bar) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
  z-index: 10;
}

.tabbar__item {
  min-width: 48px;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: max(10px, calc(11px * var(--fs)));
  font-weight: 600;
  color: var(--muted);
  transition: color .15s;
}
.tabbar__item.active { color: var(--accent-text); font-weight: 700; }

/* ── Typografie & Helfer ──────────────────────────────────── */
.title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(34px * var(--fs));
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.02em;
}
.eyebrow {
  font-size: max(10px, calc(13px * var(--fs)));
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-title {
  margin: 8px 0 -6px;
  font-family: var(--font-display);
  font-size: calc(22px * var(--fs));
  font-weight: 700;
}
.section-title--small {
  font-family: var(--font-body);
  font-size: max(10px, calc(13px * var(--fs)));
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 -4px;
}
.muted { color: var(--muted); }
.small { font-size: max(10px, calc(13px * var(--fs))); }
.strong { font-size: calc(17px * var(--fs)); font-weight: 700; }
.stack { display: flex; flex-direction: column; gap: 2px; }
.gap { gap: 12px; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 12px; }
.between { justify-content: space-between; align-items: baseline; }
.center { text-align: center; }
.pad { padding: 12px 0; margin: 0; }

.loading, .empty { padding: 48px 0; text-align: center; color: var(--muted); }

/* ── Kopfzeile ────────────────────────────────────────────── */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.page-head--end { align-items: flex-end; }
.page-head__text { display: flex; flex-direction: column; gap: 6px; }

.avatars { display: flex; padding-top: 4px; }
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: grid; place-items: center;
  font-weight: 700;
}
.avatar--me { background: var(--raised); color: var(--butter-ink); }
.avatar--partner { background: var(--partner-tint); color: var(--accent-hover); margin-left: -12px; }

/* ── Pills & Chips ────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: max(10px, calc(12px * var(--fs))); font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill--on-accent { background: rgba(255, 241, 236, .16); font-size: max(10px, calc(13px * var(--fs))); font-weight: 600; }
.pill--butter { background: var(--butter); color: var(--on-butter); }
.pill--live { background: var(--butter-tint); color: var(--butter-ink); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.link-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: max(10px, calc(13px * var(--fs))); font-weight: 700;
  color: var(--butter-ink);
  background: var(--butter-tint);
  padding: 7px 10px;
  border-radius: 999px;
}

/* ── Karten ───────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: 16px;
}
.card--row { display: flex; align-items: center; gap: 14px; text-align: left; }
.card--list { padding: 4px 16px; }
.card--dashed { background: transparent; border: 1.5px dashed var(--dash); color: var(--muted); }
.card--warn { background: var(--warn-bg); border: 1.5px solid var(--warn-line); color: var(--text); }
.card--warn .icon { color: var(--butter-ink); flex-shrink: 0; }

.tile-icon {
  width: 48px; height: 48px;
  border-radius: 16px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.tile-icon--butter { background: var(--butter-tint); color: var(--butter-ink); }

/* ── Countdown ────────────────────────────────────────────── */
.hero {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-xl);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.hero__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hero__label { font-size: max(10px, calc(13px * var(--fs))); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hero__count { display: flex; align-items: baseline; gap: 10px; }
.hero__days {
  font-family: var(--font-display);
  font-size: calc(96px * var(--fs)); font-weight: 800;
  line-height: .85; letter-spacing: -.04em;
}
.hero__unit { font-size: calc(18px * var(--fs)); font-weight: 700; line-height: 1.2; }
.hero__foot { font-size: calc(14px * var(--fs)); font-weight: 600; }

.mini-row { display: flex; gap: 10px; }
.mini {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.mini__days { font-family: var(--font-display); font-size: calc(26px * var(--fs)); font-weight: 700; color: var(--butter-ink); }
.mini__label { font-size: max(10px, calc(13px * var(--fs))); color: var(--muted); }

/* ── Liebes-Button ────────────────────────────────────────── */
.love {
  width: 100%;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px 14px 14px;
  border-radius: 26px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  text-align: left;
  transition: background .2s, border-color .2s, transform .1s;
}
.love:active { transform: scale(.98); }
.love--sent { background: var(--accent-tint); border-color: var(--accent-text); }
.love__heart {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.love--sent .love__heart { animation: beat .6s ease-in-out 2; }
.love__text { display: flex; flex-direction: column; gap: 3px; }
.love__title { font-family: var(--font-display); font-size: calc(20px * var(--fs)); font-weight: 700; }
.love__sub { font-size: max(10px, calc(13px * var(--fs))); color: var(--muted); }

@keyframes beat {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.15); }
  60% { transform: scale(.96); }
}

/* ── Aufgaben ─────────────────────────────────────────────── */
.task { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.task + .task { border-top: 1px solid var(--line-soft); }
.task--button { width: 100%; padding-inline: 14px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.task--button:hover { background: var(--surface-2, rgba(0,0,0,.04)); }
.task__title { font-size: calc(16px * var(--fs)); font-weight: 600; }
.line--link { width: 100%; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.task__side { display: inline-flex; align-items: center; gap: 6px; flex: none; }
/* Kosten: auf dem Handy bekommt der Text die ganze Breite, Betrag und Knöpfe stehen darunter */
@media (max-width: 560px) {
  .task--cost { flex-wrap: wrap; align-items: flex-start; }
  .task--cost > .stack { flex: 1 1 calc(100% - 52px); min-width: 0; }
  .task--cost .task__side { flex: 1 1 100%; justify-content: space-between; padding-left: 50px; }
}
.task__title--done { text-decoration: line-through; color: var(--faint); }

.check {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--check);
  background: transparent;
  display: grid; place-items: center;
  padding: 0;
  flex-shrink: 0;
  color: var(--on-accent);
  position: relative;
}
.check::after { content: ""; position: absolute; inset: -8px; } /* größere Trefferfläche */
.check--done { background: var(--accent); border-color: var(--accent); }

/* ── Geld ─────────────────────────────────────────────────── */
.money { font-family: var(--font-display); font-size: calc(34px * var(--fs)); font-weight: 700; letter-spacing: -.02em; }
.money--plus { color: var(--butter-ink); }
.money--minus { color: var(--accent-text); }

.split-bar { display: flex; height: 10px; gap: 3px; border-radius: 999px; overflow: hidden; }
.split-bar__fixed { background: var(--accent-text); }
.split-bar__var { background: var(--neutral-bar); }
.split-bar__rest { background: var(--butter); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: max(10px, calc(12px * var(--fs))); color: var(--muted); }

/* ── Einkauf ──────────────────────────────────────────────── */
.add-row { display: flex; gap: 10px; margin: 0; }
.add-row > .icon-btn { align-self: flex-start; }
/* Eingabezeile in zwei Zeilen: oben der Text mit dem Plus-Knopf, darunter Optionen (Person, Gruppe, Datum), die bei Platzmangel umbrechen */
.add-row--wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.add-row--wrap .add-row__text { grid-column: 1; min-width: 0; }
.add-row--wrap > .btn, .add-row--wrap > .icon-btn { grid-column: 2; grid-row: 1; align-self: start; width: 52px; height: 52px; padding: 0; border-radius: var(--r-m); }
.add-row--wrap .add-row__suggest { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.add-row__suggest .chip { align-items: center; gap: 4px; }
.add-row--wrap .add-row__more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.add-row--wrap .add-row__more .field--mini { flex: 1 1 9rem; min-width: 0; gap: 4px; }
.add-row--wrap .add-row__more .field--wide { flex-basis: 100%; }
.add-row__hint { flex: 1 1 100%; margin: 0; }
.field--mini .field__label { font-size: max(10px, calc(11px * var(--fs))); }

.input {
  flex: 1; min-width: 0;
  height: 52px;
  padding: 0 16px;
  border-radius: var(--r-m);
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-size: 16px; /* verhindert Zoom auf iOS; am Desktop siehe unten */
  outline: none;
  transition: border-color .15s;
}
.input::placeholder { color: var(--faint); }
.input:focus { border-color: var(--accent-text); }

.icon-btn {
  width: 52px; height: 52px;
  border-radius: var(--r-m);
  border: none;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.icon-btn--accent { background: var(--accent); color: var(--on-accent); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile {
  aspect-ratio: 1;
  border-radius: var(--r-l);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px;
  text-align: center;
  transition: transform .1s;
}
.tile:active { transform: scale(.95); }
.tile-wrap { position: relative; }
.tile-wrap > .tile { width: 100%; }
.tile__edit { position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; border: none; background: rgba(0,0,0,.22); color: var(--on-accent); opacity: 0; transition: opacity .12s; }
.tile-wrap:hover .tile__edit, .tile__edit:focus-visible { opacity: 1; }
/* Auf dem Touchscreen gibt es kein Darüberfahren: der Stift ist immer sichtbar und groß genug zum Tippen (sonst ginge der Tipp auf die Kachel durch und hakt ab) */
@media (hover: none) and (pointer: coarse) { .tile__edit { opacity: 1; width: 36px; height: 36px; } }
.tile--open { background: var(--accent); color: var(--on-accent); border: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.tile--recent { background: var(--surface); color: var(--soft); border: 1px solid var(--line); }
.grocery-icon { width: 44px; height: 44px; display: grid; place-items: center; }
.grocery-icon__letter { font-family: var(--font-display); font-size: calc(32px * var(--fs)); font-weight: 800; line-height: 1; }
.tile--open .grocery-icon { color: var(--on-accent); }
.tile--recent .grocery-icon { color: var(--faint); }
.tile__name { font-size: calc(14px * var(--fs)); font-weight: 700; line-height: 1.15; }
.tile__qty { font-size: max(10px, calc(12px * var(--fs))); font-weight: 600; opacity: .9; min-height: 15px; }

/* ── Hinweis-Banner ───────────────────────────────────────── */
.banner {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--r-m);
  background: var(--butter-tint);
  border: 1.5px solid var(--warn-line);
  color: var(--text);
  font-size: calc(14px * var(--fs));
}
.banner .icon { color: var(--butter-ink); flex-shrink: 0; }

/* ── Login ────────────────────────────────────────────────── */
.app--auth { display: grid; place-items: center; min-height: 100dvh; padding: var(--pad); }
.login { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.login form { width: 100%; }
.login .field { text-align: left; }
.login a { text-align: center; }
.login__mark {
  object-fit: cover;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  margin-bottom: 8px;
}
.login form { margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: max(10px, calc(13px * var(--fs))); font-weight: 600; color: var(--muted); }
.error { margin: 0; color: var(--accent-hover); font-size: calc(14px * var(--fs)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;   /* Symbol und Text mittig auf einer Linie */
  min-height: 52px;
  border-radius: var(--r-m);
  border: none;
  font-size: calc(16px * var(--fs)); font-weight: 700;
}
.btn--accent { background: var(--accent); color: var(--on-accent); }

/* ── Ladeanzeige & Fehler ─────────────────────────────────── */
.boot { min-height: 100dvh; display: grid; place-items: center; background: var(--bg); }
.boot__logo {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  animation: beat 1.2s ease-in-out infinite;
}

#blazor-error-ui {
  display: none;
  position: fixed; left: 12px; right: 12px; bottom: calc(84px + var(--safe-bottom));
  padding: 12px 16px;
  border-radius: var(--r-s);
  background: var(--accent); color: var(--on-accent);
  font-weight: 600;
  z-index: 100;
}
#blazor-error-ui .reload { text-decoration: underline; margin-left: 8px; }
#blazor-error-ui .dismiss { float: right; cursor: pointer; font-size: calc(20px * var(--fs)); line-height: 1; }

/* ── Startseite: Spalten ──────────────────────────────────── */
.dash { display: flex; flex-direction: column; gap: var(--gap); }
.widget { margin: 0; }
.head-actions { display: flex; align-items: center; gap: 12px; }
.avatar--small { width: 34px; height: 34px; font-size: calc(14px * var(--fs)); }
.avatar--small.avatar--partner { margin-left: -10px; }

/* ── Seitenleiste (nur Tablet & Desktop) ─────────────────── */
.sidebar { display: none; }

@media (min-width: 768px) {
  :root { --pad: clamp(24px, 4vw, 48px); --gap: 20px; }

  .app {
    max-width: none;
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
  }
  .app.app--auth { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 18px 18px;
    background: var(--bg-bar);
    border-right: 1px solid var(--line-soft);
  }
  .sidebar__brand {
    display: flex; align-items: center; gap: 12px;
    padding: 0 10px;
    font-family: var(--font-display);
    font-size: calc(20px * var(--fs)); font-weight: 700;
  }
  .sidebar__logo {
    object-fit: cover;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--accent); color: var(--on-accent);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
  .sidebar__item {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--r-s);
    color: var(--muted);
    font-weight: 600;
    transition: background .15s, color .15s;
  }
  .sidebar__item:hover { background: var(--surface); color: var(--text); }
  .sidebar__item.active { background: var(--accent-tint); color: var(--accent-text); font-weight: 700; }
  .sidebar__foot {
    flex: none;
    margin-top: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 14px 10px 0;
    border-top: 1px solid var(--line-soft);
  }

  .tabbar { display: none; }
  .mobile-only { display: none; }

  .screen {
    width: 100%;
    max-width: 1180px;
    padding: 36px var(--pad) 48px;
  }
  .title { font-size: calc(40px * var(--fs)); }

  /* Startseite zweispaltig: Widgets laufen spaltenweise von oben nach unten */
  .dash { display: block; column-count: 2; column-gap: var(--gap); }
  .dash > .widget, .dash > * { break-inside: avoid; margin-bottom: var(--gap); }
  .hero__days { font-size: calc(112px * var(--fs)); }

  /* Mehr Kacheln pro Reihe */
  .tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

  #blazor-error-ui { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
}

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

/* ── Seiten: Essen, Finanzen, Wünsche ────────────────────── */
.split { display: flex; flex-direction: column; gap: var(--gap); }

.stepper { display: flex; gap: 8px; }
.icon-btn--ghost { background: var(--surface); border: 1px solid var(--line); width: 44px; height: 44px; border-radius: 14px; color: var(--soft); }
.icon-btn--bare { background: transparent; border: none; width: 40px; height: 40px; border-radius: 12px; color: var(--faint); }
.icon-btn--bare:hover { color: var(--accent-hover); }
.icon-btn--small { width: 44px; height: 44px; border-radius: 14px; }
.input--small { height: 44px; border-radius: 14px; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
input[type="date"].input { min-width: 0; }

.btn--ghost { background: transparent; border: 1.5px solid var(--line); color: var(--soft); padding: 0 18px; }
.btn--small { min-height: 40px; padding: 0 14px; font-size: calc(14px * var(--fs)); border-radius: 14px; }
.link-btn { white-space: nowrap; background: none; border: none; padding: 6px 0; color: var(--accent-text); font-weight: 700; font-size: calc(14px * var(--fs)); display: inline-flex; align-items: center; gap: 6px; min-height: 36px; }
.link-btn--left { align-self: flex-start; }
.link-btn--wrap { white-space: normal; text-align: left; }

/* Umschalter */
.seg { display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.seg button { flex: 1 0 auto; padding: 0 12px; min-height: 40px; border: none; background: transparent; border-radius: 12px; color: var(--muted); font-weight: 700; font-size: calc(14px * var(--fs)); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button.on { background: var(--accent); color: var(--on-accent); }
.seg--small { align-self: flex-start; }
.seg--small button { min-height: 32px; font-size: calc(13px * var(--fs)); }
.seg button.on--secret { background: var(--secret-tint); color: var(--secret); box-shadow: inset 0 0 0 1.5px var(--secret); }
.seg--small button { min-height: 36px; }

/* Essensplan */
.day { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 0; background: none; border: none; text-align: left; color: inherit; }
.day + .day { border-top: 1px solid var(--line-soft); }
/* Ziehen (js/dragday.js): keine Textauswahl/Lupe beim Halten, Geisterbild folgt dem Finger, Zieltag wird hervorgehoben */
.day[data-meal-from] { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.day--dragging { opacity: .35; }
.day--drop { outline: 2px dashed var(--accent); outline-offset: -2px; border-radius: var(--r-m); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.day-ghost { position: fixed; z-index: 60; pointer-events: none; margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 10px 28px rgba(0,0,0,.35); transform: scale(1.02); }
body.is-dragging, body.is-dragging * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.day-hint { margin: 0 0 4px; }
.day__date { width: 44px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border-radius: 14px; color: var(--muted); }
.day__wd { font-size: max(10px, calc(11px * var(--fs))); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.day__num { font-family: var(--font-display); font-size: calc(20px * var(--fs)); font-weight: 700; color: var(--text); }
.day--today .day__date { background: var(--accent); color: var(--on-accent); }
.day--today .day__num { color: var(--on-accent); }
.day--open .strong { color: var(--accent-hover); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 8px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--soft); font-weight: 700; font-size: calc(14px * var(--fs)); text-align: left; }
.chip__sub { font-size: max(10px, calc(11px * var(--fs))); font-weight: 600; color: var(--faint); }

/* Formulare */
.sec-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sec-check__row { display: flex; align-items: center; gap: 12px; }
.sec-check__row > .icon { flex: none; color: var(--accent-text, var(--accent)); }
.sec-check__row--open > .icon { color: var(--danger, #b3261e); }
.check-row { display: flex; align-items: center; gap: 10px; font-size: calc(14px * var(--fs)); color: var(--soft); min-height: 44px; }
.check-row input { flex: none; width: 22px; height: 22px; accent-color: var(--accent); }

/* Listenzeilen */
.line { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.line + .line { border-top: 1px solid var(--line-soft); }
.amount { font-family: var(--font-display); font-weight: 700; font-size: calc(17px * var(--fs)); white-space: nowrap; }
.amount--plus { color: var(--butter-ink); }
.kv { display: flex; justify-content: space-between; font-size: calc(14px * var(--fs)); color: var(--muted); }
.kv strong { color: var(--text); }
.pill--tiny { font-size: max(10px, calc(10px * var(--fs))); padding: 2px 7px; margin-left: 4px; }
.pill--late { color: var(--danger, #e5734f); border-color: currentColor; font-weight: 700; }
.warn-text { color: var(--butter-ink); font-weight: 600; }

.add-row--inline { padding: 10px 0 12px; border-top: 1px solid var(--line-soft); }

/* Jahresdiagramm */
.bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 180px; }
.bars__col { display: flex; flex-direction: column; height: 100%; gap: 6px; }
.bars__pair { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.bar { width: 40%; max-width: 14px; border-radius: 4px 4px 0 0; min-height: 2px; }
.bar--in { background: var(--butter); }
.bar--out { background: var(--accent-text); }
.bars__label { font-size: max(10px, calc(10px * var(--fs))); text-align: center; color: var(--faint); }
.bars__col--now .bars__label { color: var(--text); font-weight: 700; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.swatch--in { background: var(--butter); }
.swatch--out { background: var(--accent-text); }

/* Geheimbereich */
.card--secret { background: var(--secret-tint); border-color: var(--secret-line); }
.tile-icon--secret { background: var(--secret-icon); color: var(--secret); }

@media (min-width: 768px) {
  .split { flex-direction: row; align-items: flex-start; }
  .split > * { flex: 1 1 0; min-width: 0; }
  .split > :first-child { flex-grow: 1.3; }
  .split--even > :first-child { flex-grow: 1; }   /* gleich breite Spalten (z. B. Haushalt) */
  .bars { height: 260px; gap: 12px; }
  .bar { max-width: 22px; }
}

/* Blazor setzt den Fokus nach der Navigation auf die Überschrift – ohne Rahmen */
h1:focus { outline: none; }
.field .input { flex: none; }

/* Sehr breite Bildschirme: Startseite dreispaltig (nur diese Seite wird breiter) */
@media (min-width: 1500px) {
  .screen:has(> .dash) { max-width: 1520px; }
  .dash { column-count: 3; }
}

/* iPad hochkant: Seitenleiste ja, aber Inhalt einspaltig – zwei Spalten erst auf breiten Bildschirmen */
@media (min-width: 768px) and (max-width: 1099px) {
  .dash { column-count: 1; }
  .split { flex-direction: column; align-items: stretch; }
  .hero__days { font-size: calc(96px * var(--fs)); }
}

.tile-icon--small { width: 40px; height: 40px; border-radius: 13px; }
.input--file { height: auto; padding: 12px 14px; font-size: calc(14px * var(--fs)); }
.input--file::file-selector-button { margin-right: 12px; padding: 8px 12px; border: none; border-radius: 10px; background: var(--raised); color: var(--text); font: inherit; font-weight: 700; }

/* Notizen, Suche, Auswertung */
.chip--static { cursor: default; flex-direction: row; padding: 6px 12px; font-size: max(10px, calc(13px * var(--fs))); }
.task--tight { padding: 6px 0; display: flex; align-items: center; gap: 12px; }
.line--tight { padding: 4px 0; }
.note-body { white-space: pre-wrap; color: var(--soft); }
.input--area-s { min-height: 72px !important; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--gap); align-items: start; }
.input--area { height: auto; min-height: 140px; padding: 12px 16px; line-height: 1.45; resize: vertical; font-family: inherit; }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.note-card { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); color: inherit; }
.note-card--open { border-color: var(--accent-text); }
.note-card__title { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.note-card__preview { color: var(--muted); font-size: calc(14px * var(--fs)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-wrap; }
.hit { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.hit + .hit { border-top: 1px solid var(--line-soft); }
.hit__type { min-width: 84px; font-size: max(10px, calc(11px * var(--fs))); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--butter-ink); }
mark { background: var(--butter); color: var(--on-butter); border-radius: 3px; padding: 0 2px; }

.cat-row { padding: 12px 0; display: flex; flex-direction: column; gap: 8px; width: 100%; background: none; border: none; text-align: left; color: inherit; }
.cat-row + .cat-row { border-top: 1px solid var(--line-soft); }
.cat-row__top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.meter { position: relative; height: 10px; border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.meter__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--accent-text); }
.meter__fill--warn { background: var(--butter); }
.meter__fill--over { background: var(--accent); }
.delta--up { color: var(--accent-hover); }
.delta--down { color: var(--butter-ink); }
.import-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.import-row + .import-row { border-top: 1px solid var(--line-soft); }
.import-row select.input { height: 40px; font-size: calc(14px * var(--fs)); max-width: 150px; }
.seg--four button { font-size: max(10px, calc(13px * var(--fs))); padding: 0 4px; }
.bars--short { height: 110px; }

/* ── Administration: Protokoll ───────────────────────────── */
.logitem { display: flex; flex-direction: column; }
.logrow {
  width: 100%; display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 10px 12px; text-align: left; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--neutral-bar);
  border-radius: var(--r-l);
}
.logrow--3 { border-left-color: var(--butter-ink); }
.logrow--4, .logrow--5 { border-left-color: var(--accent-text); }
.logrow__top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.logrow__msg { font-size: calc(14px * var(--fs)); font-weight: 600; word-break: break-word; }
.logdetail { padding: 12px; background: var(--bg-bar); border: 1px solid var(--line-soft); border-radius: 0 0 var(--r-l) var(--r-l); }
.logpre {
  margin: 0; padding: 10px; max-height: 360px; overflow: auto;
  font-size: max(10px, calc(12px * var(--fs))); line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  background: var(--bg-deep); border-radius: 12px; color: var(--soft);
}
.logbreak { word-break: break-all; text-align: right; }

/* Bearbeiten-Blatt (z. B. Einkaufsliste) */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 40; }
.sheet {
  position: fixed; z-index: 41; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--surface); box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
}
@media (min-width: 900px) { .sheet { bottom: auto; top: 50%; transform: translate(-50%, -50%); } }
/* Rückfrage liegt über allen anderen Blättern */
.sheet-backdrop--confirm { z-index: 60; }
.sheet--confirm { z-index: 61; }
.chip--on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pill--prio-1 { background: var(--butter-tint); color: var(--butter-ink); }
.pill--prio-2 { background: var(--accent-tint); color: var(--accent-hover); }
.pill--cat { background: var(--surface); color: var(--soft); border: 1px solid var(--line); }

/* Countdown auf der Startseite: schlanke Liste statt großer Fläche */
.cd-list { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.cd-row { display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.cd-list .eyebrow + .cd-row { border-top: none; }
.cd-row__title { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-row__date { font-size: max(10px, calc(13px * var(--fs))); color: var(--muted); white-space: nowrap; }
.cd-row__days { font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--soft); min-width: 6.5em; text-align: right; white-space: nowrap; }
.cd-row--next .cd-row__title, .cd-row--next .cd-row__days { color: var(--accent-text); }
.cd-list__foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: max(10px, calc(13px * var(--fs))); font-weight: 600; color: var(--muted); }
@media (max-width: 420px) { .cd-row { grid-template-columns: 1fr auto; } .cd-row__date { display: none; } }

/* Startseite: Das steht an, Diese Woche, Projekte */
.attn { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-color: var(--warn-line); background: var(--warn-bg); }
.attn__row { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: inherit; border-top: 1px solid var(--line-soft); }
.attn .eyebrow + .attn__row { border-top: none; }
.attn__dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: var(--butter); }
.attn__row--2 .attn__dot { background: var(--accent-text); }
.proj { color: inherit; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.proj:first-of-type { border-top: none; }

/* Startseite: kompaktere Karten (Liebes-Button, Prognose) */
.love { gap: 12px; padding: 8px 14px 8px 8px; border-radius: 22px; }
.love__heart { width: 40px; height: 40px; }
.love__title { font-size: calc(16px * var(--fs)); }
.love__sub { font-size: max(10px, calc(12px * var(--fs))); }
.love__text { gap: 1px; }
.fc { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; color: inherit; }
.fc__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fc--empty { flex-direction: row; gap: 10px; padding: 10px 16px; }
.money--small { font-size: calc(22px * var(--fs)); }
.split-bar--thin { height: 6px; }
.legend--small { gap: 10px; font-size: max(10px, calc(11px * var(--fs))); }

.phone-copy { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }

/* Menü: Gruppen in der Seitenleiste */
.sidebar__group {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; margin-top: 10px; padding: 6px 14px;
  background: none; border: none; color: var(--faint);
  font-size: max(10px, calc(12px * var(--fs))); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: left;
}
.sidebar__group:hover { color: var(--muted); }
.sidebar__item--sub { padding-left: 22px; }
.sidebar__item--quiet { font-size: max(10px, calc(13px * var(--fs))); color: var(--faint); }
.sidebar__spacer { flex: 1; min-height: 10px; }

.line--tap { cursor: pointer; }
.line--btn { width: 100%; background: none; border: 0; color: inherit; text-align: left; font: inherit; cursor: pointer; }

/* In der iPhone-App: Navigation macht die native Tab-Leiste */
.in-app .tabbar, .in-app .sidebar { display: none !important; }
.in-app .app { display: block; }
/* Die native Leiste schwebt über der Web-Ansicht: Inhalt, Blätter und der Plus-Knopf müssen darüber enden */
.in-app { --native-bar: 96px; }
.in-app .screen { padding-bottom: calc(var(--native-bar) + 24px); }
.in-app .sheet { bottom: calc(var(--native-bar) + 16px); max-height: calc(100dvh - var(--native-bar) - 72px); }
.in-app .fab { bottom: calc(var(--native-bar) + 16px); }

.row--wrap { flex-wrap: wrap; }

/* Größere Tippflächen (mind. 44 px) */
.check::after { content: ""; position: absolute; inset: -9px; }
label:has(> input[type=checkbox]) { min-height: 44px; display: flex; align-items: center; gap: 10px; }
label > input[type=checkbox] { flex: none; width: 22px; height: 22px; accent-color: var(--accent); }
.input--small { flex-shrink: 0; min-height: 44px; }

/* Diagramme (SVG) */
.donut { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.donut__legend { min-width: 0; }
.donut__legend li > .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut__legend li > strong, .donut__legend li > .small { white-space: nowrap; }
@media (min-width: 420px) { .donut { flex-direction: row; flex-wrap: wrap; justify-content: center; } .donut__legend { flex: 1 1 170px; width: auto; } }
.donut__svg { width: 150px; height: 150px; flex: none; }
.donut__track { fill: none; stroke: var(--raised); stroke-width: 14; }
.donut__seg { fill: none; stroke-width: 14; stroke-linecap: butt; }
.donut__big { fill: var(--text); font: 700 13px var(--font-display); }
.donut__small { fill: var(--muted); font: 500 8px var(--font-body); }
.donut__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; font-size: calc(14px * var(--fs)); }
.donut__legend li { display: flex; align-items: center; gap: 6px; }
.linechart { width: 100%; height: auto; overflow: visible; }
.linechart__path { fill: none; stroke: var(--accent-text); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.linechart__area { fill: var(--accent-text); opacity: .14; }
.linechart__dot { fill: var(--accent-text); }
.linechart__zero { stroke: var(--dash); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.linechart__label { fill: var(--faint); font: 500 8px var(--font-body); }

/* Zeilen mit mehreren Bedienelementen: auf dem Handy zweizeilig, damit nichts abgeschnitten wird */
.stack--rows { gap: 8px; }
.seg--wrap { flex-wrap: wrap; overflow-x: visible; }
.profile-tabs { margin-bottom: 16px; }
.profile-tabs button { flex: 1 1 30%; }   /* sechs Bereiche in zwei Reihen, alle sichtbar */
.profile-section { max-width: 760px; }

.menu-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 2px 4px; padding: 6px 0; }
.menu-row + .menu-row { border-top: 1px solid var(--line-soft); }
.menu-row .check-row { grid-column: 1 / -1; }
.menu-row__group { min-width: 0; width: 100%; }
@media (min-width: 560px) {
  .menu-row { grid-template-columns: 1fr 11rem auto auto; }
  .menu-row .check-row { grid-column: auto; }
}

/* Aufgaben: Etiketten stehen in der Zeile mit Frist/Zuständigkeit und brechen bei Platzmangel um */
.task__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.task__sub .pill { margin-left: 0; }

.reveal { scroll-margin-top: 16px; }

/* Aufgaben: ganze Textfläche ist antippbar (öffnet das Bearbeiten-Blatt) */
.task__main { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.task__main:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 6px; }

/* ── Kalender ─────────────────────────────────────────────── */
:root { --k-event: #E8879C; --k-deadline: #E09A6B; --k-bill: #8AA4D6; --k-task: #E3C285; --k-meal: #8FB8A8; --k-waste: #B9A27A; }
.dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.dot--event { background: var(--k-event); }
.dot--deadline { background: var(--k-deadline); }
.dot--bill { background: var(--k-bill); }
.dot--task { background: var(--k-task); }
.dot--meal { background: var(--k-meal); }
.dot--waste { background: var(--k-waste); }

.cal { padding: 12px; }
.cal__weekdays, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal__weekdays span { text-align: center; padding: 2px 0 8px; font-size: max(10px, calc(11px * var(--fs))); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.cal__day {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 56px; padding: 9px 2px 6px;
  border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.cal__day:hover { background: var(--raised); }
.cal__day:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 1px; }
.cal__num { font-size: calc(15px * var(--fs)); font-weight: 700; line-height: 1; }
.cal__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 7px; }
.cal__day--out { opacity: .45; }
.cal__day--today { border-color: var(--accent-text); }
.cal__day--today .cal__num { color: var(--accent-text); }
.cal__day--sel, .cal__day--sel:hover { background: var(--accent); border-color: var(--accent); }
.cal__day--sel .cal__num { color: var(--on-accent); }
.cal__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0 4px; list-style: none; font-size: max(10px, calc(13px * var(--fs))); color: var(--muted); }
.cal__legend li { display: inline-flex; align-items: center; gap: 6px; }
.cal-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: inherit; text-decoration: none; }
.cal-item + .cal-item { border-top: 1px solid var(--line-soft); }
.cal-item > .dot { width: 10px; height: 10px; }
@media (min-width: 1100px) { .cal__day { min-height: 72px; } }

.week-shop { padding: 10px 0 12px; border-top: 1px solid var(--line-soft); gap: 4px; }

/* Nur auf schmalen Bildschirmen (dort liegen die Buchungen unter den Diagrammen) */
@media (min-width: 1100px) { .only-narrow { display: none; } }

.wish-star { color: var(--butter-ink); margin-right: 6px; }

/* ── Skeleton-Screens: Platzhalter in der Form des Inhalts, solange geladen wird ── */
.skel { position: relative; display: block; overflow: hidden; background: var(--raised); border-radius: 8px; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--shimmer), transparent);
  transform: translateX(-100%);
  animation: skel-shimmer 1.5s ease-in-out infinite;
}
@keyframes skel-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }
.skel--eyebrow { height: 11px; width: 96px; }
.skel--title { height: 18px; }
.skel--line { height: 12px; }
.skel--hero { height: 34px; width: 70%; max-width: 420px; border-radius: 10px; }
.skel--money { height: 34px; width: 55%; max-width: 260px; border-radius: 10px; }
.skel--bar { height: 10px; border-radius: 999px; }
.skel--block { height: 150px; border-radius: 16px; }
.skel--input { height: 52px; border-radius: var(--r-m); }
.skel--circle { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.skel--tile { aspect-ratio: 1 / .9; border-radius: var(--r-l); }
.skel--day { min-height: 56px; border-radius: 14px; }
.skel-head { display: flex; flex-direction: column; gap: 10px; }

/* Eingabefelder: auf Touch-Geräten 16px (sonst zoomt iOS beim Antippen hinein), am Desktop mit der übrigen Schrift skaliert */
@media (hover: hover) and (pointer: fine) { .input { font-size: calc(16px * var(--fs)); } }

/* ── Finanzen: Rechnung, Planung, Schnellbuchen ───────────── */
.ledger { display: flex; flex-direction: column; gap: 6px; }
.ledger__row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.ledger__row strong { color: var(--text); font-weight: 700; }
.ledger__row--total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--text); font-weight: 700; }

.open-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.open-row + .open-row { border-top: 1px solid var(--line-soft); }
.open-row__date { flex: none; width: 40px; text-align: center; line-height: 1.1; }
.open-row__day { display: block; font-family: var(--font-display); font-weight: 700; font-size: calc(19px * var(--fs)); }
.open-row__wd { display: block; font-size: max(10px, calc(11px * var(--fs))); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.open-row__date--late .open-row__day, .open-row__date--late .open-row__wd { color: var(--butter-ink); }

.plan-row { display: flex; flex-direction: column; gap: 7px; width: 100%; padding: 12px 0; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.plan-row + .plan-row { border-top: 1px solid var(--line-soft); }
.plan-row:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 8px; }
.plan-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.plan-row--now .plan-row__head .strong { color: var(--accent-text); }
.plan-row__parts { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-row__parts .pill { margin-left: 0; }

.fab {
  position: fixed; z-index: 30; right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px);
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.fab:active { transform: scale(.96); }
@media (min-width: 768px) { .fab { right: 28px; bottom: 28px; } }

.shop-rows { display: flex; flex-direction: column; gap: 6px; }
.shop-row-wrap { display: flex; align-items: center; gap: 4px; }
.shop-row-wrap > .shop-row { flex: 1; min-width: 0; width: auto; }
.shop-row__edit { flex: none; color: var(--faint); }
.shop-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 8px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: inherit; text-align: left; font-weight: 600; font-size: calc(16px * var(--fs)); }
/* Wie die Kacheln: auf dem iPhone sonst Textauswahl/Lupe beim langen Drücken (Bearbeiten) und Verzögerung beim Tippen */
.shop-row { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: pointer; }
.shop-row:active { transform: scale(.98); }
.shop-row__box { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); }
.shop-row__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chip--small { flex-direction: row; padding: 7px 13px; font-size: max(10px, calc(13px * var(--fs))); }
.input--big { height: 60px; font-size: 24px; font-weight: 700; font-family: var(--font-display); }
.tools summary { cursor: pointer; font-weight: 700; color: var(--soft); list-style: none; display: flex; align-items: center; gap: 8px; }
.tools summary::-webkit-details-marker { display: none; }
.tools summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.tools[open] summary { margin-bottom: 12px; }
.tools[open] summary::after { content: "▴"; }

.ledger__row strong.money--plus { color: var(--butter-ink); }
.ledger__row strong.money--minus { color: var(--accent-text); }

/* Einkauf: farbige Illustrationen auf einem hellen Rund (wie ein Aufkleber auf der Kachel) */
.grocery-art { width: 54px; height: 54px; border-radius: 50%; background: #FBE6CB; display: grid; place-items: center; flex: none; box-shadow: inset 0 -3px 0 rgba(122, 79, 46, .12); }
.grocery-art svg { width: 40px; height: 40px; display: block; }
.tile--recent .grocery-art { opacity: .9; }
@media (max-width: 380px) { .grocery-art { width: 46px; height: 46px; } .grocery-art svg { width: 34px; height: 34px; } }

.tile__name { overflow-wrap: anywhere; hyphens: auto; max-width: 100%; }

/* Schritte (Unteraufgaben) unter einer Aufgabe */
.steps { display: flex; flex-direction: column; gap: 2px; padding: 0 14px 10px 54px; }
.steps__row { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: calc(14px * var(--fs)); color: var(--soft); cursor: pointer; }
.steps__row input { flex: none; width: 18px; height: 18px; accent-color: var(--accent); }
.steps__row--done span { text-decoration: line-through; color: var(--muted); }
.steps__edit { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.steps__edit .steps__row { flex: 1; }

textarea.input { font: inherit; resize: vertical; }

/* Link als Knopf (z. B. "Bei … anmelden"): mittig, nicht in die Höhe gezogen, wenn die Spalte neben einem höheren Formular steht */
a.btn { display: flex; align-items: center; justify-content: center; gap: 8px; flex: none; text-align: center; text-decoration: none; padding: 0 18px; }

/* ── Heute: für den Blick um halb sechs (große Schrift, unabhängig von der Seitenverkleinerung) ── */
.today { display: flex; flex-direction: column; gap: 20px; font-size: 20px; line-height: 1.35; }
.today__head { display: flex; flex-direction: column; gap: 14px; }
.today__title { margin: 0; font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -.01em; }
.today__date { margin: 4px 0 0; font-size: 20px; font-weight: 600; color: var(--muted); }
.today .seg button { min-height: 54px; font-size: 18px; }
.today__facts { display: flex; flex-direction: column; gap: 12px; }
.today__fact { background: var(--warn-bg); border: 2px solid var(--warn-line); border-radius: var(--r-m); padding: 18px 18px; }
.today__fact-main { display: block; font-size: 26px; line-height: 1.2; font-weight: 800; }
.today__fact-sub { display: block; margin-top: 8px; font-size: 16px; color: var(--muted); }
.today__weather { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.today__weather svg { flex: none; color: var(--accent-text); }
.today__weather-main { display: block; font-size: 26px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.today__weather-sub { display: block; font-size: 16px; color: var(--muted); }
.today__list { display: flex; flex-direction: column; gap: 10px; }
.today__row { --k: var(--accent-text); display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 14px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--k); border-radius: var(--r-m); color: var(--text); text-decoration: none; }
.today__row--bill, .today__row--deadline { --k: var(--warn-line); }
.today__row--meal { --k: var(--muted); }
.today__row--phone { --k: var(--k-event); }   /* Handy-Kalender wie in „Woche“ */
.today__kind { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.today__kind b { color: var(--k); font-variant-numeric: tabular-nums; }
.today__text { font-size: 20px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.today__sub { font-size: 15px; color: var(--muted); }
.today__bills summary { cursor: pointer; list-style: none; }
.today__bills summary::-webkit-details-marker { display: none; }
.today__bills ul { list-style: none; margin: 6px 0 0; padding: 0 4px; }
.today__bills li a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 16px; }
.today__bills li small { color: var(--muted); white-space: nowrap; }
.today__empty { margin: 0; padding: 20px 4px; font-size: 20px; font-weight: 700; color: var(--soft, var(--text)); }
.today__shop { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 18px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 22px; }
.today__home { align-self: flex-start; padding: 14px 4px; min-height: 48px; font-size: 18px; color: var(--accent-text); }

/* Woche */
.week-day { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.week-day__title { margin: 0; font-size: 18px; font-weight: 800; }
.week-day__holiday { color: var(--butter-ink); }
.week-day--holiday .week-day__title { color: var(--butter-ink); }
.week-day__none { font-weight: 500; color: var(--muted); }
.week-day__row { --k: var(--accent-text); display: flex; flex-direction: column; padding: 6px 0 6px 12px; border-left: 4px solid var(--k); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--text); text-decoration: none; overflow-wrap: anywhere; cursor: pointer; list-style: none; }
.week-day__row--bill, .week-day__row--deadline { --k: var(--warn-line); }
.week-day__row--meal { --k: var(--muted); }
.week-day__row--phone { --k: var(--k-event); }
.week-day__row small { font-size: 14px; font-weight: 500; color: var(--muted); }
.week-day .today__bills summary::-webkit-details-marker { display: none; }

/* ── Jahresrückblick ── */
.review { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.review__kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.review__kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.review__kpi strong { font-size: calc(26px * var(--fs)); line-height: 1.1; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--accent-text); }
.review__kpi span { font-size: calc(13px * var(--fs)); color: var(--muted); line-height: 1.25; }
.review__card { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.review__card--hero { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.review__big { font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.review__card:not(.review__card--hero) .review__big { color: var(--accent-text); }
.review__label { font-size: calc(16px * var(--fs)); font-weight: 600; }
.review__sub { font-size: calc(14px * var(--fs)); color: var(--muted); }
.review__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.review__list a { color: inherit; text-decoration: none; }
.review__bars { list-style: none; margin: 10px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.review__bars li { display: grid; grid-template-columns: minmax(70px, 28%) 1fr auto; gap: 10px; align-items: center; font-size: calc(14px * var(--fs)); }
.review__bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.review__bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent-text); }

/* Zusammenfassungs-Karte (Überblick → Details) */
.karte { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.karte--dim { opacity: .6; }
.karte__head { display: flex; align-items: center; gap: 8px; }
.karte__title { flex: 1; min-width: 0; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.karte__toggle { flex: none; width: 44px; height: 44px; margin: -8px -8px -8px 0; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 12px; cursor: pointer; }
.karte__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 16px; font-size: 16px; }
.karte__metric { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.karte__metric strong { overflow-wrap: anywhere; }
.karte__label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.karte__marks { flex: none; display: flex; gap: 8px; color: var(--muted); }
.karte__actions { padding-top: 10px; border-top: 1px solid var(--line); }
.aktionen { display: flex; flex-wrap: wrap; gap: 8px; }
.aktionen__btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 auto; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--soft); font: inherit; font-size: max(13px, calc(14px * var(--fs))); font-weight: 700; text-decoration: none; cursor: pointer; }
.aktionen--icons .aktionen__btn { flex: 1 1 0; min-width: 44px; padding: 0; }
.aktionen__btn:hover { color: var(--accent-hover); border-color: var(--accent-hover); }
.aktionen__btn--danger:hover { color: var(--danger, #b3261e); border-color: var(--danger, #b3261e); }
.aktionen--ask { flex-direction: column; align-items: stretch; gap: 10px; }
.aktionen__ask { font-weight: 700; }
.aktionen__row { display: flex; gap: 10px; flex-wrap: wrap; }
.karte__details { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 15px; }

/* Desktop: mehr in die Breite statt in die Tiefe */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.week-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 768px) {
  .week-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
  .today { max-width: 960px; }
  .today__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; align-items: start; }
  .today__list > .today__bills { grid-column: 1 / -1; }
  .today__facts { flex-direction: row; flex-wrap: wrap; }
  .today__facts > * { flex: 1 1 260px; }
}

.bucket > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.bucket > summary::-webkit-details-marker { display: none; }
.bucket > summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
.bucket[open] > summary::after { content: "▴"; }
.bucket[open] > summary { margin-bottom: 8px; }

/* Startseite: klappbare Widget-Hüllen und „Heute“-Zeile */
.huelle { display: flex; flex-direction: column; gap: 8px; }
.huelle__head { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.huelle__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.huelle__sum { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.huelle__head .icon { margin-left: auto; color: var(--muted); flex: none; }
.start-today { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--accent-text); border-radius: var(--r-m); color: var(--text); text-decoration: none; }
.start-today__title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.start-today__text { font-size: 18px; font-weight: 700; line-height: 1.3; }

.aufklapper { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 12px; cursor: pointer; }
.row-details { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 6px; }

/* Jahresrückblick: Monatssäulen */
.review__card--wide { grid-column: 1 / -1; }
.mbars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 150px; margin-top: 6px; }
.mbars__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.mbars__stack { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.mbars__bar { flex: 1; max-width: 22px; min-height: 2px; border-radius: 5px 5px 2px 2px; background: var(--accent-text); }
.mbars__bar--second { background: var(--neutral-bar, #6b5a60); opacity: .75; }
.mbars__label { font-size: calc(11px * var(--fs)); color: var(--muted); }
.mbars__legend { display: flex; gap: 16px; font-size: calc(13px * var(--fs)); color: var(--muted); }
.mbars__dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--accent-text); margin-right: 6px; }
.mbars__dot--second { background: var(--neutral-bar, #6b5a60); opacity: .75; }

.review__delta { font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--muted); }
.review__delta--good { color: var(--good); }
.review__delta--bad { color: var(--bad); }

.review__masonry { column-width: 320px; column-gap: 14px; margin-top: 14px; }
.review__masonry > .review__card { break-inside: avoid; margin-bottom: 14px; }

/* Jahresrückblick: Reise-Zeitstrahl, Planungs-Heatmap, Verteilungsbalken */
.tline { position: relative; height: 18px; border-radius: 999px; background: var(--line); margin-top: 4px; overflow: hidden; }
.tline__seg { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent-text); min-width: 6px; }
.tline__months { display: grid; grid-template-columns: repeat(12, 1fr); font-size: calc(11px * var(--fs)); color: var(--muted); text-align: center; }
.heat { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin: 6px 0 2px; }
.heat__cell { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--line); }
.heat__cell--on { background: var(--accent-text); }
.heat__cell--future { background: transparent; border: 1px solid var(--line); }
.heat__cell--blank { background: transparent; }
.pbar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; }
.pbar__seg { min-width: 4px; }
.pbar__seg--0 { background: #E8879C; } .pbar__seg--1 { background: #E3C285; } .pbar__seg--2 { background: #8FB8A8; } .pbar__seg--3 { background: #8AA4D6; }

.review__card .donut { flex-direction: column; align-items: stretch; gap: 10px; }
.review__card .donut__svg { max-width: 170px; align-self: center; }

/* Rückgängig-Leiste nach dem Löschen */
.undo-bar { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 14px); width: min(92vw, 420px); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: var(--r-m); background: var(--raised, #2a1b21); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
@media (min-width: 900px) { .undo-bar { bottom: 24px; } }

/* ── Bewegung ───────────────────────────────────────────────
   Seiten und Karten gleiten gestaffelt ein, Säulen, Balken und Ringe wachsen, Antippen federt, Blätter schieben sich hoch.
   Nur ohne „Bewegung reduzieren“. Zahlen zählen über js/fx.js hoch. */
.ring { position: relative; width: 112px; height: 112px; flex: none; }
.ring svg { display: block; width: 100%; height: 100%; }
.ring__track { fill: none; stroke: var(--raised); stroke-width: 12; }
.ring__arc { fill: none; stroke: var(--accent-text); stroke-width: 12; stroke-linecap: round; }
.ring--mini { width: 60px; height: 60px; }
.ring--mini .ring__center strong { font-size: calc(14px * var(--fs)); }
.ring--mini .ring__arc, .ring--mini .ring__track { stroke-width: 14; }
.task-sum { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.ring--warn .ring__arc { stroke: var(--butter-ink); }
.ring--over .ring__arc { stroke: var(--accent); }
.ring__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 0; }
.ring__center strong { font-size: calc(22px * var(--fs)); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ring__center small { font-size: calc(11px * var(--fs)); color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes fx-rise { from { opacity: 0; translate: 0 16px; scale: .985; } }
  @keyframes fx-fade { from { opacity: 0; } }
  @keyframes fx-sheet { from { opacity: 0; translate: 0 34px; } }
  @keyframes fx-grow-y { from { transform: scaleY(0); } }
  @keyframes fx-grow-x { from { transform: scaleX(0); } }
  @keyframes fx-ring { from { stroke-dasharray: 0 289.03; } }
  @keyframes fx-donut { from { stroke-dasharray: 0 289.03; } }
  @keyframes fx-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }

  /* Staffelung: die ersten Kinder eines Bereichs erscheinen nacheinander (höchstens acht Stufen) */
  :is(.screen, .stack, .split, .dash, .review, .review__masonry) > :nth-child(1) { --i: 0; }
  :is(.screen, .stack, .split, .dash, .review, .review__masonry) > :nth-child(2) { --i: 1; }
  :is(.screen, .stack, .split, .dash, .review, .review__masonry) > :nth-child(3) { --i: 2; }
  :is(.screen, .stack, .split, .dash, .review, .review__masonry) > :nth-child(4) { --i: 3; }
  :is(.screen, .stack, .split, .dash, .review, .review__masonry) > :nth-child(5) { --i: 4; }
  :is(.screen, .stack, .split, .dash, .review, .review__masonry) > :nth-child(6) { --i: 5; }
  :is(.screen, .stack, .split, .dash, .review, .review__masonry) > :nth-child(7) { --i: 6; }
  :is(.screen, .stack, .split, .dash, .review, .review__masonry) > :nth-child(n+8) { --i: 7; }

  /* Ebene 1: direkte Kinder der Seite (Kopf, Karten, Umschalter …); Behälter und feste Elemente (Knopf, Blatt, Leiste) ausgenommen */
  .screen > *:not(.stack):not(.split):not(.dash):not(.review):not(.review__masonry):not(.fab):not(.sheet):not(.sheet-backdrop):not(.undo-bar),
  /* Ebene 2: Karten in den Behältern der Seite */
  .screen > :is(.stack, .split, .dash, .review, .review__masonry) > *:not(.fab):not(.sheet):not(.sheet-backdrop):not(.undo-bar):not(.stack) {
    animation: fx-rise .6s cubic-bezier(.2, .8, .2, 1) backwards;
    animation-delay: calc(min(var(--i, 0), 7) * 60ms);
  }
  /* Ebene 3: Spalten nebeneinander (z. B. Haushalt, Finanzen): ihre Karten laufen ebenfalls gestaffelt ein */
  .screen > .split > .stack > * { animation: fx-rise .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc((var(--i, 0) + 1) * 60ms); }

  /* Blätter und Meldungen */
  .sheet { animation: fx-sheet .38s cubic-bezier(.2, .8, .2, 1) backwards; }
  .sheet-backdrop { animation: fx-fade .25s ease backwards; }
  .undo-bar { animation: fx-sheet .38s cubic-bezier(.2, .8, .2, 1) backwards; }

  /* Diagramme wachsen */
  .mbars__bar { transform-origin: bottom; animation: fx-grow-y .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--col, 0) * 45ms + 150ms); }
  .meter__fill, .review__bar > span, .pbar__seg, .tline__seg { transform-origin: left center; animation: fx-grow-x .9s cubic-bezier(.2, .8, .2, 1) backwards .2s; }
  .donut__seg { animation: fx-donut 1.1s cubic-bezier(.2, .8, .2, 1) backwards .15s; }
  .ring__arc { animation: fx-ring 1.1s cubic-bezier(.2, .8, .2, 1) backwards .15s; }
  .heat__cell--on { animation: fx-fade .8s ease backwards .3s; }

  /* Rückmeldung beim Antippen */
  .check:active { transform: scale(.88); }
  .tabbar__item.active svg { animation: fx-pop .42s cubic-bezier(.3, 1.6, .5, 1); }
  .btn, .chip, .icon-btn, .card--row, .tabbar__item, .link-btn { transition: transform .12s ease, background .2s, border-color .2s, color .15s, opacity .2s; }
  .btn:active, .chip:active, .icon-btn:active, .card--row:active, .tabbar__item:active { transform: scale(.96); }
  @media (hover: hover) and (pointer: fine) {
    a.card--row, button.card--row { transition: translate .2s ease, transform .12s ease, border-color .2s, background .2s; }
    a.card--row:hover, button.card--row:hover { translate: 0 -2px; border-color: var(--accent-text); }
  }
}

/* ── Seitenübergang (js/navfx.js) ───────────────────────────
   Nur der Inhalt (.screen) bewegt sich; Tab-Leiste und Seitenleiste bleiben stehen. Richtung: data-nav="forward|back" am <html>. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes vt-out-forward { to { opacity: 0; transform: translateX(-36px) scale(.985); filter: blur(3px); } }
  @keyframes vt-in-forward { from { opacity: 0; transform: translateX(44px) scale(.985); filter: blur(3px); } }
  @keyframes vt-out-back { to { opacity: 0; transform: translateX(36px) scale(.985); filter: blur(3px); } }
  @keyframes vt-in-back { from { opacity: 0; transform: translateX(-44px) scale(.985); filter: blur(3px); } }

  ::view-transition-group(root) { animation-duration: 0s; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-group(tabbar), ::view-transition-group(sidebar) { animation-duration: 0s; }
  ::view-transition-old(tabbar), ::view-transition-old(sidebar) { display: none; }
  ::view-transition-new(tabbar), ::view-transition-new(sidebar) { animation: none; }

  ::view-transition-group(screen) { animation-duration: 0s; }
  ::view-transition-old(screen) { animation: vt-out-forward .22s cubic-bezier(.4, 0, 1, 1) both; mix-blend-mode: normal; }
  ::view-transition-new(screen) { animation: vt-in-forward .42s cubic-bezier(.2, .8, .2, 1) .06s both; mix-blend-mode: normal; }
  html[data-nav="back"]::view-transition-old(screen) { animation-name: vt-out-back; }
  html[data-nav="back"]::view-transition-new(screen) { animation-name: vt-in-back; }
}

/* ── Weitere Bewegungen (Anregungen von codeandchill.store) ───────────────
   Herz springt beim Senden, Zahlen „springen“ beim Ändern, das Logo schwebt, ein Lichtglanz läuft über den nächsten Termin,
   der Rückgängig-Balken zeigt die verbleibende Zeit. Alles nur ohne „Bewegung reduzieren“. */
@media (prefers-reduced-motion: no-preference) {
  :root { --ease-land: cubic-bezier(.22, 1, .36, 1); }
  @keyframes fx-like { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-6deg); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }
  @keyframes fx-count { 0% { transform: scale(.4); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
  @keyframes fx-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes fx-glint { from { translate: -130% 0; } to { translate: 440% 0; } }
  @keyframes fx-timer { to { transform: scaleX(0); } }

  /* Liebes-Button: erst ein Pop mit Überschwinger, dann der Herzschlag */
  .love--sent .love__heart { animation: fx-like .45s var(--ease-land), beat .6s ease-in-out .45s 2; }

  /* Zahl, die beim Ändern springt: das Element mit @key anlegen, dann startet die Animation bei jedem neuen Wert */
  .count-pop { display: inline-block; animation: fx-count .42s var(--ease-land); }

  /* Schweben: das Logo auf der Anmeldeseite */
  .login__mark { animation: fx-drift 6.5s ease-in-out infinite; }

  /* Lichtglanz über dem nächsten Termin, alle paar Sekunden */
  .cd-row--next { position: relative; overflow: hidden; }
  .cd-row--next::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 28%; pointer-events: none;
    background: linear-gradient(100deg, transparent, var(--shimmer), transparent);
    animation: fx-glint 6s var(--ease-land) 1.5s infinite;
  }

  /* Rückgängig-Balken: dünne Linie, die in den 10 Sekunden schrumpft */
  .undo-bar { overflow: hidden; }
  .undo-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent-text); transform-origin: left; animation: fx-timer 10s linear forwards; }
}

/* Liste mit eigenem Scrollbereich: höchstens fünf Zeilen sichtbar, der Rest scrollt (z. B. Tonnen bei der Müllabfuhr) */
.scroll-5 { max-height: 15.5rem; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 4px; padding-right: 6px; scrollbar-width: thin; border-radius: var(--r-s, 10px); }
.scroll-5 > .check-row { min-height: 2.9rem; flex: 0 0 auto; }

.pill--ok { background: var(--accent-tint, rgba(255,255,255,.08)); color: var(--accent-text); border: 1px solid var(--accent-text); }

/* Dokumente: Zeile mit Kopf (Name, Herunterladen, Pfeil), Ablauf-Hinweis und aufklappbaren Details samt Aktionen */
.doc { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.doc + .doc { border-top: 1px solid var(--line-soft); }
.doc__main { display: flex; align-items: center; gap: 12px; }
.doc__title { overflow-wrap: anywhere; }
.doc__expiry { align-self: flex-start; margin-left: 52px; }
.doc__details { display: flex; flex-direction: column; gap: 6px; margin-left: 52px; padding: 10px 12px; border-radius: 14px; background: var(--surface); font-size: calc(14px * var(--fs)); }
.doc__details .kv { display: flex; justify-content: space-between; gap: 12px; }
.doc__details .kv > :last-child { text-align: right; overflow-wrap: anywhere; }
.doc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; }
.doc__delete { margin-left: auto; color: var(--danger, #e5734f); }
.btn--danger { background: var(--danger); border: 0; color: var(--on-danger); font-weight: 700; padding: 0 18px; }
.doc__confirm { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; border: 1.5px solid var(--danger, #e5734f); background: var(--surface); }

/* Desktop & Tablet: Formulare zum Entsperren nicht über die ganze Breite ziehen */
@media (min-width: 768px) { .vault-gate { max-width: 560px; } }

/* Seitenleiste: Fuß führt zum Profil; auf niedrigen Fenstern kompakter, damit mehr Einträge ohne Scrollen sichtbar sind */
.sidebar__me { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; border-radius: 12px; color: inherit; }
.sidebar__me:hover .sidebar__names, .sidebar__me.active .sidebar__names { color: var(--text); }
.sidebar__names { overflow: hidden; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .sidebar__nav { scrollbar-width: thin; mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent); padding-bottom: 14px; }
}
@media (min-width: 768px) and (max-height: 1000px) {
  .sidebar { gap: 10px; padding-top: 16px; }
  .sidebar__item { min-height: 36px; }
  .sidebar__item--quiet { min-height: 30px; }
  .sidebar__group { margin-top: 4px; padding-top: 4px; padding-bottom: 4px; }
}

/* Dokumente: „Läuft bald ab“ – Titel und Datum links, Aktion rechts (bricht auf schmalen Bildschirmen nicht mehr um) */
.expiry-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 6px 0; }
.expiry-row + .expiry-row { border-top: 1px solid var(--line-soft); }

/* Zeile ohne Symbol (z. B. Dauerposten): Details bündig links */
.doc--flat .doc__details { margin-left: 0; }
.doc--flat .doc__main { align-items: flex-start; }

/* Aufgabenbereiche (Gruppen): Farbpunkt, Farbwahl, Zeilen */
.area-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--faint); vertical-align: baseline; }
.task--area { border-left: 4px solid var(--area, transparent); padding-left: 10px; }
.area-row { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.area-edit, .area-add { padding-top: 10px; border-top: 1px solid var(--line-soft); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; color: var(--muted); font-weight: 800; display: grid; place-items: center; }
.swatch--none { background: transparent; border-color: var(--line); }
.swatch--on { outline: 3px solid var(--text); outline-offset: 2px; }
.karte__title--btn { background: none; border: 0; padding: 0; font: inherit; font-size: 18px; font-weight: 800; text-align: left; cursor: pointer; }
.line__actions { display: flex; flex: none; }
.line__actions .icon-btn { width: 36px; height: 44px; }
.doc__open { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.doc__details--sheet { margin-left: 0; }
.eyebrow--icon { display: inline-flex; align-items: center; gap: 6px; }
.week-day__text { display: inline-flex; align-items: flex-start; gap: 8px; }
.week-day__text .icon { flex: none; margin-top: 3px; color: var(--muted); }
.cal__legend .icon { color: var(--muted); vertical-align: -2px; }
.pill .icon { vertical-align: -2px; }
.chip .icon { flex: none; vertical-align: -2px; }
/* Chip mit Symbol und Text: nebeneinander, mittig auf einer Linie (nur die zweizeiligen Chips mit Untertitel bleiben gestapelt) */
.chip:not(:has(.chip__sub)) { flex-direction: row; align-items: center; justify-content: center; gap: 6px; }
/* Vier Reiter (Finanzen): Symbol über dem Text, damit nichts abgeschnitten wird */
.seg--four button { flex: 1 1 0; flex-direction: column; gap: 2px; min-height: 52px; padding: 4px 2px; }

/* Blätter: lassen sich scrollen, ohne die Seite dahinter mitzuziehen; die Aktionszeile (Speichern/Abbrechen) bleibt unten sichtbar */
.sheet { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.sheet-backdrop { touch-action: none; overscroll-behavior: contain; }
.sheet:has(> .row:last-child) { padding-bottom: 0; }
.sheet > .row:last-child { position: sticky; bottom: 0; z-index: 2; margin: 4px -16px 0; padding: 12px 16px 16px; background: var(--surface); border-top: 1px solid var(--line-soft); }
/* In der App beginnt die Web-Ansicht schon unter der nativen Kopfleiste: oben nur einen kleinen Rand lassen */
.in-app .sheet { max-height: calc(100dvh - var(--native-bar) - 32px); }

/* Diese Woche (Startseite): Wochenstreifen und Agenda */
.wk { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.wk-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.wk-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 0 7px; border-radius: 14px; border: 1px solid var(--line-soft); }
.wk-cell small { font-size: max(10px, calc(11px * var(--fs))); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wk-cell b { font-size: calc(17px * var(--fs)); line-height: 1.2; }
.wk-cell--empty { opacity: .5; }
.wk-cell--today { background: var(--accent); border-color: var(--accent); }
.wk-cell--today small, .wk-cell--today b { color: var(--on-accent); }
.wk-dots { display: flex; gap: 3px; height: 6px; margin-top: 3px; }
.wk-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--k, var(--accent-text)); }
.wk-cell--today .wk-dot { background: var(--on-accent); opacity: .9; }
.wk-dot--event, .wk-item--event { --k: var(--k-event); }
.wk-dot--task, .wk-item--task { --k: var(--k-task); }
.wk-dot--meal, .wk-item--meal { --k: var(--k-meal); }
.wk-dot--bill, .wk-item--bill, .wk-dot--payment, .wk-item--payment { --k: var(--k-bill); }
.wk-dot--deadline, .wk-item--deadline { --k: var(--k-deadline); }

.wk-day { display: flex; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.wk-date { flex: none; width: 56px; align-self: flex-start; display: flex; flex-direction: column; align-items: center; padding: 7px 0 6px; border-radius: 14px; background: var(--raised); }
.wk-date small { font-size: max(10px, calc(11px * var(--fs))); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wk-date b { font-size: calc(22px * var(--fs)); line-height: 1.15; }
.wk-date--today { background: var(--accent-tint); }
.wk-date--today small, .wk-date--today b { color: var(--accent-text); }
.wk-items { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wk-item { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px 8px 4px; border-radius: 12px; color: inherit;
  background: var(--raised); background: color-mix(in srgb, var(--k, var(--accent-text)) 9%, transparent); }
.wk-item::before { content: ""; position: absolute; left: 6px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--k, var(--accent-text)); }
.wk-lead { flex: none; width: 3.3em; margin-left: 12px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; color: var(--k, var(--accent-text)); }
.wk-lead b { font-size: calc(14px * var(--fs)); color: var(--text); }
.wk-lead small { font-size: max(10px, calc(11px * var(--fs))); color: var(--muted); }
.wk-text { min-width: 0; font-weight: 600; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Hinweisleiste: Änderungen ohne Netz warten auf das Senden */
.offline-banner { position: sticky; top: 8px; z-index: 25; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 10px 14px; border-radius: 14px; background: var(--accent-tint); border: 1px solid var(--accent-text); font-weight: 600; }
.offline-banner--ok { background: var(--surface); border-color: var(--k-meal); }

/* Farbwahl (Profil → Darstellung) */
.theme-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.theme-swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); color: var(--soft); cursor: pointer; }
.theme-swatch--on { border-color: var(--accent-text); color: var(--text); box-shadow: 0 0 0 1px var(--accent-text); }
.theme-swatch__dot { width: 40px; height: 40px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .35); }
.theme-swatch__name { font-size: max(10px, calc(12.5px * var(--fs))); font-weight: 700; }
.theme-swatch__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* Mehr: Zeilen einer Gruppe in einer Karte, getrennt durch dünne Linien */
.menu-list { padding: 0 14px; }
.menu-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: inherit; text-decoration: none; min-height: 56px; }
.menu-row + .menu-row { border-top: 1px solid var(--line); }
.menu-row > .icon:last-child { color: var(--faint); flex-shrink: 0; }
.menu-row:active { opacity: .7; }

/* Ganze Zeile antippbar (öffnet die Bearbeitung); Knöpfe in der Zeile stoppen das Klicken */
.clickable { cursor: pointer; }

/* Dokumente am Desktop: Aktionsknöpfe rechts neben dem Eintrag, wie bei den anderen Listen */
@media (min-width: 768px) {
    .doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center; }
    .doc > * { grid-column: 1 / -1; }
    .doc > .doc__main, .doc > .doc__expiry { grid-column: 1; }
    .doc > .doc__actions { grid-column: 2; grid-row: 1 / span 2; padding-top: 0; flex-wrap: nowrap; }
    .doc > .doc__actions .aktionen { flex-wrap: nowrap; }
    .doc > .doc__actions .aktionen__btn { flex: none; width: 44px; }
}

/* Symbol im Fließtext (Zeile ohne Flex): auf Textmitte statt auf der Grundlinie; in Flex-Containern ohne Wirkung */
.icon { vertical-align: -0.2em; }

/* Kopfzeile der Reiter (Überschrift links, Aktionen rechts); auf schmalen Geräten rutschen die Aktionen in eine eigene Zeile */
.tabhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.tabhead > .eyebrow { white-space: nowrap; }
.tabhead > :last-child { margin-left: auto; }
.btn--small { white-space: nowrap; }
.empty-note { margin: 0; padding: 28px 16px; text-align: center; color: var(--muted); }

/* Eintrag mit Titel und Aktionen in einer Zeile; die Angaben darunter nutzen die ganze Breite */
.task--split { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; column-gap: 0; row-gap: 2px; align-items: start; }
.task--split > .stack { display: contents; }
.task--split > .stack > * { grid-column: 1 / -1; }
.task--split > .stack > :first-child { grid-column: 1; grid-row: 1; align-self: center; }
.task--split > .icon-btn { grid-row: 1; }
.task--split > .icon-btn:nth-of-type(1) { grid-column: 2; }
.task--split > .icon-btn:nth-of-type(2) { grid-column: 3; }
.task--split > .icon-btn:nth-of-type(3) { grid-column: 4; }

/* Master-Detail: Die ganze Karte ist anklickbar (Titel als Link über die Fläche gespannt), Aktionen bleiben darüber bedienbar. */
.karte__title::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-m); }
.karte__actions, .karte__toggle { position: relative; z-index: 1; }

/* App (schmal): schlanke Karte, alles Weitere steht im Detail. Desktop: alle Angaben auf einmal. */
@media (max-width: 767px) {
    .karte__metric--more { display: none; }
    /* Dichte Kartenliste (Gerichte): kleinere Schrift und Abstände, Kennzahlen nebeneinander in einer Zeile */
    .karten--dicht { gap: 8px; }
    .karten--dicht .karte { gap: 4px; padding: 10px 14px; }
    .karten--dicht .karte__title { font-size: 16px; }
    .karten--dicht .karte__metrics { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; }
    .karten--dicht .karte__metric { flex-direction: row; align-items: baseline; gap: 5px; }
    .karten--dicht .karte__label { font-size: 11px; }
}

/* Reiterleiste (Reise, Projekt): App = nur Symbole, alle nebeneinander; wird es zu eng, wischbar */
.reiter { position: sticky; top: calc(var(--safe-top) + 4px); z-index: 20; margin: 0 calc(var(--pad) * -1); padding: 4px 0; background: var(--bg); }
.reiter__list { --rand: 12px; display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  padding: 2px var(--rand); scroll-padding: 0 var(--rand);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--rand), #000 calc(100% - var(--rand)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--rand), #000 calc(100% - var(--rand)), transparent); }
.reiter__list::-webkit-scrollbar { display: none; }
.reiter__tab { flex: 1 0 40px; max-width: 72px; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); font: inherit; cursor: pointer; }
.reiter__aktiv { margin: -4px 0 0; text-align: center; font-size: max(13px, calc(13px * var(--fs))); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.reiter__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reiter__tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (hover: hover) { .reiter__tab:not(.on):hover { color: var(--accent-hover); border-color: var(--accent-hover); } }
.reiter__tab:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }

/* Desktop: eine ruhige Zeile, Symbol neben dem Text, kein Wischen nötig */
@media (min-width: 768px) {
  .reiter { position: static; margin: 0; padding: 0; background: none; }
  .reiter__list { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; gap: 4px; }
  .reiter__tab { flex: none; max-width: none; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; font-size: calc(14px * var(--fs)); font-weight: 700; }
  .reiter__aktiv { display: none; }
  .reiter__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .reiter__tab.on { background: var(--accent); color: var(--on-accent); }
}