/* Haushaltskasse - Styles nach Design-Canvas. Mobile-first, Desktop ab 900 px. */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
}

:root {
  --bg: #F3F4F6;
  --surface: #FFFFFF;
  --border: #E3E5EA;
  --input-border: #D5D8DF;
  --divider: #EEF0F3;
  --text: #16181D;
  --text-2: #3A3F4B;
  --muted: #5B6170;
  --accent: #0E5E56;
  --accent-hover: #0A4540;
  --accent-soft: #E3F0EE;
  --inverse: #16181D;
  --on-inverse: #FFFFFF;
  --on-inverse-muted: #C9CDD6;
  --on-inverse-2: #E6E8EC;
  --segment: #E6E8EC;
  --dashed: #A9AEB9;
  --person-fahn: #2F55C4;
  --person-sanni: #F2A66B;
  --reise: #C2611F;
  --reise-soft: #FDEBDD;
  --reise-strong: #9A4A12;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --accent-text: #0E5E56;
  --on-accent: #FFFFFF;
  --strong: #16181D;
  --on-strong: #FFFFFF;
  --btn-light-bg: #FFFFFF;
  --btn-light-text: #16181D;
  --bg-transparent: rgba(243, 244, 246, 0);
  --chart-muted: #D5D8DF;
  --segment-aktiv: #FFFFFF;
  --tabbar-h: 84px;
}

/* Dunkel: eigene Stufen, gegen die dunkle Fläche geprüft (Kontrast Text >= 6:1, Marken >= 3:1).
   Die Personenfarben bleiben unterschiedlich hell (Blau dunkler als Orange). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111317;
  --surface: #1A1D23;
  --border: #2A2F38;
  --input-border: #3D4350;
  --divider: #252930;
  --text: #ECEEF2;
  --text-2: #C3C7D0;
  --muted: #9AA0AC;
  --accent: #1F7F74;
  --accent-hover: #26968A;
  --accent-text: #5CC8BA;
  --accent-soft: #173733;
  --inverse: #262A33;
  --on-inverse-muted: #A9AFBB;
  --on-inverse-2: #D5D8DF;
  --segment: #252930;
  --dashed: #5A606C;
  --person-fahn: #5B7FE6;
  --reise: #E07A3A;
  --reise-soft: #3A2416;
  --reise-strong: #F0A060;
  --danger: #F2726A;
  --danger-soft: #3A1C1A;
  --strong: #ECEEF2;
  --on-strong: #111317;
  --btn-light-bg: #ECEEF2;
  --btn-light-text: #111317;
  --bg-transparent: rgba(17, 19, 23, 0);
  --chart-muted: #4A505C;
  --segment-aktiv: #3A3F4B;
}

/* Farbwelt "Sanni": Weiß-Pink statt Grün, gilt auf Geräten, die Sanni gehören (data-farbwelt, siehe js/theme.js).
   Akzentfläche ist Sannis Wunschfarbe #F15B91BD (74 % Deckkraft). Hell wirkt sie als #F585AD, darauf ist weiße Schrift
   nicht lesbar (2,4:1), deshalb dunkle Schrift (7,5:1). Dunkel wirkt sie als #BB4A73, weiße Schrift 4,8:1.
   Pinker Text braucht hell eine dunklere Stufe (#B3305F, 5,5:1), dunkel ist es das Wunsch-Pink selbst (5,5:1).
   Text- und Personenfarben bleiben unverändert, damit Fahn und Sanni in Listen weiter unterscheidbar sind. */
:root[data-farbwelt="sanni"] {
  --bg: #FCF4F7;
  --border: #F0DAE3;
  --input-border: #E5CAD6;
  --divider: #F7E9EF;
  --accent: #F15B91BD;
  --accent-hover: #F15B91;
  --on-accent: #16181D;
  --accent-text: #B3305F;
  --accent-soft: #FDE7EF;
  --accent-schatten: rgba(241, 91, 145, 0.35);
  --segment: #F5E3EA;
  --dashed: #D3A8BA;
  --bg-transparent: rgba(252, 244, 247, 0);
  --chart-muted: #EBD3DE;
}
:root[data-farbwelt="sanni"][data-theme="dark"] {
  --bg: #161014;
  --surface: #21181D;
  --border: #3A2B32;
  --input-border: #4E3A44;
  --divider: #2D2228;
  --muted: #A99EA4;
  --accent: #F15B91BD;
  --accent-hover: #A8406A;
  --on-accent: #FFFFFF;
  --accent-text: #F15B91;
  --accent-soft: #3B1D2A;
  --inverse: #2D2228;
  --segment: #2D2228;
  --dashed: #6A5560;
  --bg-transparent: rgba(22, 16, 20, 0);
  --chart-muted: #4E3A44;
  --segment-aktiv: #4A3540;
}
:root[data-farbwelt="sanni"] .topf-chip { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B3305F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-farbwelt="sanni"][data-theme="dark"] .topf-chip { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F15B91' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

/* Personenfarben kommen aus den Daten; ui.personStil liefert eine helle und eine dunkle Stufe */
[style*="--p-hell"] { --p: var(--p-hell); --p-text: var(--p-hell-text); }
:root[data-theme="dark"] [style*="--p-hell"] { --p: var(--p-dunkel); --p-text: var(--p-dunkel-text); }

:root[data-theme="dark"] .chip-select:not(.ist-aktiv) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239AA0AC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .chip-select.ist-aktiv { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23111317' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .topf-chip { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235CC8BA' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .tabbar__fab { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] .card--inverse { border-color: var(--border); }

/* --- Basis ------------------------------------------------------------------ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--accent-text); }
a:hover { color: var(--accent-hover); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px 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;
}

@media (max-width: 899px) { .only-desktop { display: none !important; } }
@media (min-width: 900px) { .only-mobile { display: none !important; } }

/* --- Layout ----------------------------------------------------------------- */

.view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body[data-tabbar="ja"] .view { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px); }
.view--schmal { max-width: 640px; }
.view--unterseite { padding-top: 16px; }

.topbar { display: none; }

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 10;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 8px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-around;
}

body[data-tabbar="nein"] .tabbar { display: none; }

.tabbar__link {
  min-width: 56px;
  min-height: 44px;
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.tabbar__link[aria-current="page"] { color: var(--accent-text); font-weight: 700; }

.tabbar__fab {
  width: 56px;
  height: 56px;
  margin-top: -24px;
  border-radius: 18px;
  background: var(--accent);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px var(--accent-schatten, rgba(14, 94, 86, 0.35));
}

.tabbar__fab:hover { color: var(--on-inverse); background: var(--accent-hover); }

.aktionen {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: auto -20px 0;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, var(--bg-transparent), var(--bg) 20px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (min-width: 900px) {
  .view { padding: 32px 24px 48px; gap: 24px; }
  body[data-tabbar] .view { padding-bottom: 48px; }
  .tabbar { display: none; }
  .aktionen { position: static; margin: 8px 0 0; padding: 0; background: none; }

  .topbar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
  }
}

/* --- Kopfbereiche ------------------------------------------------------------ */

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand:hover { color: var(--text); }

.brand__logo {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
}

.brand__text { display: flex; flex-direction: column; }
.brand__text strong { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.brand__text span { font-size: 13px; color: var(--muted); }

.topnav {
  flex: 1;
  display: flex;
  gap: 4px;
  justify-content: center;
}

.topnav a {
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  color: var(--text-2);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.topnav a:hover { background: var(--surface); color: var(--text); }
.topnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }

.subheader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -8px;
}

.subheader__titel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.subheader__titel h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.subheader__titel span { font-size: 13px; color: var(--muted); }
.subheader--klein .subheader__titel h1 { font-size: 18px; letter-spacing: 0; }

.dash-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-kopf__titel { display: flex; flex-direction: column; gap: 2px; }
.dash-kopf h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }

.topf-link {
  align-self: flex-start;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.monat-zeile { display: flex; align-items: center; gap: 4px; }
.monat-zeile .icon-btn { width: 36px; height: 36px; color: var(--muted); }

/* Feste Breiten, damit die Pfeile beim Blättern an derselben Stelle bleiben */
.monat-wahl { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.monat-wahl .icon-btn { flex: none; width: 36px; height: 36px; color: var(--muted); }
.monat-wahl .chip-select { flex: none; max-width: none; font-weight: 700; }
.monat-wahl__monat { width: 116px; }
.monat-wahl__heute { flex: none; font-weight: 700; }
.monat-wahl__heute[data-platzhalter] { visibility: hidden; }
.monat-wahl__jahr { width: 84px; }

.monat-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.monat-pill span { padding: 0 8px; font-size: 15px; font-weight: 700; min-width: 128px; text-align: center; }
.monat-pill .icon-btn { width: 36px; height: 36px; border-radius: 8px; }

.avatar-stapel { display: flex; }
.avatar-stapel .avatar { border: 2px solid var(--bg); }
.avatar-stapel .avatar + .avatar { margin-left: -10px; }

/* --- Bausteine ---------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card--gross { border-radius: 18px; padding: 18px; gap: 14px; }

.card--inverse {
  background: var(--inverse);
  border-color: var(--inverse);
  color: var(--on-inverse);
  border-radius: 20px;
  padding: 20px;
  gap: 14px;
}

.card__kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card__kopf h2 { font-size: 16px; font-weight: 800; }
.card__kopf a { font-size: 14px; font-weight: 700; text-decoration: none; padding: 10px 0; }

.label { font-size: 13px; font-weight: 600; color: var(--muted); }
.zahl-gross { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }

@media (min-width: 900px) {
  .card { border-radius: 20px; padding: 24px; gap: 12px; }
  .card--inverse { padding: 24px; gap: 16px; }
  .card__kopf h2 { font-size: 18px; }
  .label { font-size: 14px; }
}

.icon-btn {
  width: 44px;
  height: 44px;
  flex: none;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover { background: var(--divider); }
.icon-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }

.btn {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.btn--lg { min-height: 46px; padding: 0 20px; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--light { background: var(--btn-light-bg); color: var(--btn-light-text); }
.btn--dark { background: var(--strong); color: var(--on-strong); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--ghost:hover { background: var(--divider); }
.btn--danger { background: var(--danger); color: var(--on-inverse); }
.btn--danger-text { background: transparent; color: var(--danger); }
.btn--danger-text:hover { background: var(--danger-soft); color: var(--danger); }
.btn--block { width: 100%; min-height: 54px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.btn:disabled { opacity: 0.5; cursor: default; }

.avatar {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--p);
  color: var(--p-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.avatar--sm { width: 30px; height: 30px; font-size: 13px; }
.avatar--gross { width: 48px; height: 48px; font-size: 17px; }
/* Foto: Ring in der Personenfarbe, damit Fahn und Sanni auch mit Bild unterscheidbar bleiben */
.avatar--foto { overflow: hidden; background: var(--surface); box-shadow: 0 0 0 2px var(--p); }
.avatar--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-stapel .avatar--foto { box-shadow: 0 0 0 2px var(--p), 0 0 0 4px var(--bg); border: 0; }
.foto-zeile { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.foto-zeile strong { flex: 1; }
.foto-zeile label.btn { position: relative; }
.dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--p); display: inline-block; }
.dot--sm { width: 8px; height: 8px; }

.bar { height: 8px; border-radius: 4px; background: var(--divider); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; }
.bar--duenn { height: 6px; border-radius: 3px; }

.badge {
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.section-label {
  padding: 8px 4px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.hinweis { font-size: 13px; color: var(--muted); }
.empty { padding: 16px 0; color: var(--muted); text-align: center; font-size: 14px; }

.leer-zustand { align-items: center; text-align: center; padding: 40px 24px; gap: 12px; }
.leer-zustand h1 { font-size: 20px; font-weight: 800; }
.leer-zustand p { color: var(--muted); max-width: 36ch; }
.leer-zustand__icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--accent-soft); color: var(--accent-text);
  display: flex; align-items: center; justify-content: center;
}

/* --- Übersicht ------------------------------------------------------------- */

.saldo__kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--on-inverse-muted); }
.saldo__betrag { display: flex; flex-direction: column; gap: 2px; }
.saldo__betrag strong { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.saldo__betrag span { font-size: 15px; color: var(--on-inverse-2); }
/* Ausgleichen füllt die Zeile, Teilen bleibt schmal daneben */
.saldo__aktionen { display: flex; gap: 8px; }
.saldo__aktionen > .btn { flex: 1; }
.saldo__aktionen > .btn--teilen { flex: 0 0 auto; gap: 6px; }

.person-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.person-karte__kopf { display: flex; align-items: center; gap: 8px; }
.person-karte strong { font-size: 20px; font-weight: 800; }
/* Personen-Flächen sind Links in den Verlauf, sehen aber unverändert aus */
a.person-karte, a.wer-zeile { color: inherit; text-decoration: none; }
a.person-karte:hover, a.wer-zeile:hover { color: inherit; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.dash-split { display: flex; flex-direction: column; gap: 16px; }

.wer-zeile { display: flex; align-items: center; gap: 12px; }
.wer-zeile > span:not(.avatar) { flex: 1; font-weight: 600; }
.wer-zeile strong { font-size: 17px; font-weight: 800; }
.split-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--divider); }
.split-bar span { background: var(--p); }

.catbar { display: flex; flex-direction: column; gap: 8px; }
/* Kategorie-Balken als Link in den Verlauf, Aussehen unverändert */
a.catbar { color: inherit; text-decoration: none; }
a.catbar:hover .catbar__kopf span { text-decoration: underline; text-underline-offset: 3px; }
.catbar__kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.catbar__kopf span { font-weight: 600; }
.catbar__kopf strong { font-weight: 800; }
.catbars { display: flex; flex-direction: column; gap: 18px; }
.geschaefte { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.geschaeft { padding: 8px 6px; margin: 0 -6px; width: calc(100% + 12px); border: 0; border-radius: 10px; background: transparent; text-align: left; gap: 6px; }
.geschaeft:hover { background: var(--divider); }
.geschaeft .bar { display: block; }
.geschaeft__rang { color: var(--muted); font-variant-numeric: tabular-nums; }
.geschaeft__meta { font-size: 12px; color: var(--muted); }
.catbars--eng { gap: 14px; }
.catbars--eng .catbar { gap: 6px; }

@media (min-width: 900px) {
  .saldo__kopf { font-size: 14px; }
  .saldo__betrag { gap: 4px; }
  .saldo__betrag strong { font-size: 36px; }
  .saldo .btn { align-self: flex-start; border-radius: 10px; font-size: 14px; }
  .saldo__aktionen { align-self: flex-start; }
  .saldo__aktionen > .btn { flex: 0 0 auto; }
  .dash-split { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .dash-split > :first-child { flex: 999 1 560px; min-width: 0; }
  .dash-split > :last-child { flex: 1 1 320px; min-width: 0; }
  .eintrag-vorschau .entry { padding: 12px 0; gap: 14px; }
  .eintrag-vorschau .entry__icon { width: 44px; height: 44px; font-size: 13px; }
}

@media (max-width: 899px) {
  .eintrag-vorschau .entry:nth-child(n + 5) { display: none; }
}

/* --- Eintrags-Listen ----------------------------------------------------------- */

.entry-liste { display: flex; flex-direction: column; }
.entry-liste--oben .entry { border-top: 1px solid var(--divider); }
.entry-liste:not(.entry-liste--oben) .entry + .entry { border-top: 1px solid var(--divider); }

.entry {
  min-height: 44px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
}

.entry:hover { color: var(--text); }
.entry:hover .entry__text strong { text-decoration: underline; text-underline-offset: 3px; }

.entry__icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--divider);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.entry__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.entry__text strong { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry__text span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry__betrag { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.entry__betrag strong { font-size: 15px; font-weight: 800; white-space: nowrap; }
.entry__betrag span { font-size: 12px; color: var(--muted); }
.entry__rechts { display: flex; align-items: center; gap: 8px; }
.entry__rechts > strong { font-size: 15px; font-weight: 800; white-space: nowrap; }

.entry--ausgleich .entry__icon { background: var(--accent-soft); color: var(--accent-text); }
.entry--ausgleich .entry__betrag strong, .entry--ausgleich .entry__rechts strong { color: var(--muted); font-weight: 700; }

.tag-gruppe { display: flex; flex-direction: column; gap: 6px; }
.tag-gruppe__kopf { display: flex; justify-content: space-between; padding: 4px 4px 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.tag-gruppe .card { padding: 0 14px; gap: 0; }
.tag-gruppe .entry { padding: 12px 0; }

@media (min-width: 900px) {
  .entry__text span { font-size: 13px; }
  .entry__betrag strong { font-size: 16px; }
  .entry__betrag span { font-size: 13px; }
  .tag-gruppe .card { padding: 0 20px; border-radius: 16px; }
}

/* --- Formulare ---------------------------------------------------------------- */

.formular { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld__label { font-size: 13px; font-weight: 700; color: var(--text-2); }

.input {
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
}

.input:focus { outline: 2px solid var(--accent-text); outline-offset: -1px; border-color: var(--accent-text); }
.input--gestrichelt { border-style: dashed; border-color: var(--dashed); height: 46px; font-size: 15px; }
.input-zeile { display: flex; gap: 8px; }
.input-zeile .input { flex: 1; height: 44px; font-size: 15px; }
.input-zeile .btn { height: 44px; min-height: 44px; font-size: 14px; }
.zwei-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.betrag-feld { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; }
.betrag-feld label { font-size: 13px; font-weight: 600; color: var(--muted); }
.betrag-feld__zeile { display: flex; align-items: baseline; gap: 6px; }
.betrag-feld input {
  width: 6.2ch;
  max-width: 70vw;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: right;
}

.betrag-feld input::placeholder { color: var(--input-border); }
.betrag-feld input:focus { outline: none; }
.betrag-feld__zeile:focus-within { box-shadow: 0 2px 0 var(--accent-text); }
.betrag-feld__waehrung { font-size: 32px; font-weight: 800; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll {
  flex-wrap: nowrap;
  margin: 0 -20px;
  padding: 4px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll > * { flex: none; }
.chip-select { max-width: 160px; }
.chip-select--topf { font-weight: 800; }

.chip {
  position: relative;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--input-border);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
}

.chip[aria-pressed="true"] { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.chip--neu { background: transparent; color: var(--accent-text); border: 1px dashed var(--accent-text); padding: 0 14px; }
.chip--klein { height: 36px; padding: 0 14px; border-radius: 18px; font-size: 13px; }
.chip--klein::after { content: ''; position: absolute; inset: -4px 0; }
.chip--entfernbar { height: 40px; padding: 0 6px 0 14px; gap: 2px; }
.chip--entfernbar button {
  width: 30px; height: 30px; border: 0; border-radius: 15px; background: transparent;
  color: var(--muted); display: flex; align-items: center; justify-content: center;
}
.chip--entfernbar button:hover { background: var(--divider); }
.chip-select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235B6170' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.chip-select.ist-aktiv { background-color: var(--strong); border-color: var(--strong); color: var(--on-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }

.topf-chip {
  height: 36px;
  padding: 0 30px 0 14px;
  border: 0;
  border-radius: 18px;
  background-color: var(--accent-soft);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 800;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E5E56' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  max-width: 45vw;
}

.zahler-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zahler-knopf {
  height: 56px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}
.zahler-knopf[aria-pressed="true"] { border: 2px solid var(--accent-text); padding: 0 13px; }

.segment { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--segment); }
.segment button {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.segment button[aria-pressed="true"] { background: var(--segment-aktiv); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.segment--klein button { font-size: 13px; }
.segment--mini { align-self: flex-start; }
.segment--mini button { flex: none; width: 52px; height: 32px; }

.anteile { display: flex; flex-direction: column; gap: 8px; }
.anteil-zeile { display: flex; align-items: center; gap: 10px; }
.anteil-zeile > span:not(.avatar):not(.anteil-zeile__einheit) { flex: 1; font-weight: 700; }
.anteil-zeile .input { width: 120px; height: 44px; text-align: right; }
.anteil-zeile__einheit { width: 16px; color: var(--muted); font-weight: 700; }

.datum-zeile {
  position: relative;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.datum-zeile:focus-within { outline: 2px solid var(--accent-text); outline-offset: -1px; border-color: var(--accent-text); }
.datum-zeile span { font-size: 15px; font-weight: 600; }
.datum-zeile strong { font-size: 15px; font-weight: 700; }
.datum-zeile input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; }

.suche {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}
.suche:focus-within { outline: 2px solid var(--accent-text); outline-offset: -1px; border-color: var(--accent-text); }
.titel-vorschlaege:empty { display: none; }
.vorschlag { gap: 6px; }
.vorschlag span { color: var(--muted); font-weight: 600; }
.vorschlag span::before { content: '·'; margin-right: 6px; }
.btn--klein { min-height: 36px; padding: 0 12px; font-size: 14px; }
.liste-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; margin-bottom: -6px; }
.liste-kopf .btn { flex: none; color: var(--accent-text); font-weight: 700; }

/* Auswahlmodus im Verlauf */
.auswahl-zeile { display: flex; align-items: center; gap: 10px; cursor: pointer; border-radius: 10px; }
.auswahl-zeile + .auswahl-zeile { border-top: 1px solid var(--divider); }
.auswahl-zeile .entry { flex: 1; min-width: 0; pointer-events: none; }
.auswahl-zeile:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.auswahl-zeile__box {
  flex: none;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid var(--input-border);
  border-radius: 7px;
  color: transparent;
}
.auswahl-zeile.ist-gewaehlt .auswahl-zeile__box { background: var(--strong); border-color: var(--strong); color: var(--on-strong); }
.auswahl-leiste {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 11;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(22, 24, 29, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auswahl-leiste[hidden] { display: none; }
.auswahl-leiste__zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 720px; width: 100%; margin: 0 auto; }
.auswahl-leiste__zeile .btn--dark { flex: 1; }
body:has(.auswahl-leiste:not([hidden])) .view { padding-bottom: 160px; }
body:has(.auswahl-leiste:not([hidden])) .toast { bottom: 150px; }

.such-info { padding: 0 4px; font-size: 13px; color: var(--muted); }
.such-info strong { color: var(--text); }
.suche input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; color: var(--text); outline: none; }

.form-fehler { color: var(--danger); font-size: 14px; font-weight: 600; text-align: center; }
.form-fehler:empty { display: none; }

/* --- Töpfe und Reisen --------------------------------------------------------------- */

.topf-karte {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  text-align: left;
  width: 100%;
}
.topf-karte:hover { color: var(--text); border-color: var(--input-border); }
.topf-karte.ist-aktiv { border: 2px solid var(--accent-text); padding: 15px; }
.topf-karte__kopf { display: flex; align-items: center; gap: 12px; }
.topf-karte__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.topf-karte__text strong { font-size: 16px; font-weight: 800; }
.topf-karte__text span { font-size: 13px; color: var(--muted); }
.topf-karte__fuss { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.topf-karte__fuss span:first-child { color: var(--muted); }
.topf-karte__fuss span:last-child { font-weight: 700; }
.topf-karte__icon {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--divider); color: var(--muted);
}
.topf-karte__icon--alltag { background: var(--accent-soft); color: var(--accent-text); }
.topf-karte__icon--reise { background: var(--reise-soft); color: var(--reise-strong); }
.topf-karte__status { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.topf-karte .chevron { color: var(--muted); }
.topf-liste { display: grid; gap: 12px; }
.topf-karte-rahmen { position: relative; }
.topf-karte-rahmen .topf-karte__kopf { padding-right: 44px; }
.topf-karte__bearbeiten { position: absolute; top: 12px; right: 8px; z-index: 1; color: var(--muted); }
.topf-karte__bearbeiten:hover { color: var(--text); }

@media (min-width: 900px) {
  .topf-liste { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

.reise-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.reise-kopf__links { display: flex; flex-direction: column; gap: 2px; }
.reise-kopf__tag { font-size: 13px; font-weight: 700; color: var(--text-2); }
.reise-saldo {
  padding-top: 12px;
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.reise-saldo__links { display: flex; flex-direction: column; gap: 2px; }
.reise-saldo__links span { font-size: 13px; color: var(--muted); }
.reise-saldo__links strong { font-size: 15px; font-weight: 800; }
.reise-saldo__rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; color: var(--muted); }
.reise-saldo .btn { min-height: 36px; padding: 0 12px; font-size: 13px; }
.reise-raster { display: flex; flex-direction: column; gap: 14px; }

@media (min-width: 900px) {
  .reise-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; gap: 16px; }
}

.kat-zeile { display: flex; align-items: center; gap: 8px; min-height: 52px; }
.kat-zeile + .kat-zeile { border-top: 1px solid var(--divider); }
.kat-zeile .input { flex: 1; height: 44px; font-size: 15px; }
.kat-zeile__name { flex: 1; font-weight: 700; }
.kat-zeile--archiviert .kat-zeile__name { color: var(--muted); font-weight: 600; }

.einstellung { display: flex; flex-direction: column; gap: 10px; }
.bereinigen { border-color: var(--danger); }
.bereinigen .input-zeile { flex-wrap: wrap; }

.import-vorschau { display: flex; flex-direction: column; gap: 12px; }
.import-vorschau:empty { display: none; }
.import-zeile select.input { flex: 0 0 auto; width: 48%; max-width: 220px; height: 44px; padding: 0 8px 0 12px; font-size: 15px; }
.import-zeile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.import-zeile__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-zeile__text span { font-size: 13px; color: var(--muted); }
.import-fehler p, p.import-fehler { font-size: 14px; }
p.import-fehler { color: var(--danger); font-weight: 600; }
.import-gruppe { padding-top: 4px; padding-bottom: 4px; gap: 0; }
.import-gruppe summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.import-gruppe summary span { font-size: 13px; color: var(--muted); }
.import-gruppe[open] summary { border-bottom: 1px solid var(--divider); }
.import-fehler p + p { margin-top: 6px; }
section.import-fehler { border: 2px solid var(--danger); background: var(--danger-soft); }
section.import-fehler .feld__label { color: var(--danger); }
.input--datei { height: auto; padding: 10px 14px; font-size: 15px; }
.link-liste a {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.link-liste a + a { border-top: 1px solid var(--divider); }
.link-rechts { display: inline-flex; align-items: center; gap: 8px; }
.badge--warnung { background: var(--danger-soft); color: var(--danger); }
.link-liste a svg { color: var(--muted); }

/* --- Dialoge und Toast ------------------------------------------------------------------ */

.dialog {
  width: min(400px, calc(100vw - 32px));
  padding: 24px;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(22, 24, 29, 0.25);
}
.dialog::backdrop { background: rgba(22, 24, 29, 0.45); }
.dialog form { display: flex; flex-direction: column; gap: 12px; }
.dialog h2 { font-size: 18px; font-weight: 800; }
.dialog p { color: var(--text-2); }
.dialog__aktionen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.dialog .input-zeile > .feld { min-width: 0; }
.dialog input[type="date"] { min-width: 0; padding: 0 10px; font-size: 15px; }

.dialog--sheet { padding: 20px; }
.sheet-liste { display: flex; flex-direction: column; }
.sheet-option {
  min-height: 52px;
  padding: 0 4px;
  border: 0;
  border-top: 1px solid var(--divider);
  background: transparent;
  text-align: left;
  font-size: 16px;
  font-weight: 700;
}
.sheet-option--danger { color: var(--danger); }

@media (max-width: 899px) {
  .dialog--sheet {
    width: 100%;
    max-width: none;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 16px);
  z-index: 20;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--strong);
  color: var(--on-strong);
  font-weight: 700;
  font-size: 14px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast--sichtbar { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 900px) { .toast { bottom: 32px; } }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* --- Statistik ------------------------------------------------------------------- */

.kpi-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi strong { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: proportional-nums; }
.kpi span:last-child { font-size: 13px; color: var(--muted); }

.saeulen {
  position: relative;
  height: 200px;
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding-top: 22px;
  border-bottom: 1px solid var(--border);
}
.saeule {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.saeule__balken {
  width: min(24px, 70%);
  height: var(--h);
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: var(--chart-muted);
  transition: filter 0.15s;
}
.saeule.ist-aktuell .saeule__balken { background: var(--accent); }
.saeule:hover .saeule__balken, .saeule:focus-visible .saeule__balken { filter: brightness(1.12); }
.saeule__wert {
  position: absolute;
  bottom: calc(var(--h) + 4px);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
.saeulen-achse { display: flex; gap: 2px; margin-top: 6px; }
.statistik-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.statistik-filter .segment { flex: 1 1 260px; }
/* Jahr in der Zeitraum-Leiste: ‹ 2026 › als ein Segment */
.segment__jahr { flex: 1.35; min-width: 0; display: flex; align-items: center; border-radius: 9px; }
.segment__jahr.ist-aktiv { background: var(--segment-aktiv); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.segment .segment__jahr button[aria-pressed] { padding: 0 2px; background: transparent; box-shadow: none; }
.segment .segment__jahr .segment__pfeil { flex: none; width: 24px; padding: 0; display: grid; place-items: center; color: var(--muted); background: transparent; }
.segment__pfeil:disabled { opacity: 0.3; cursor: default; }
.saeulen-achse span { flex: 1; min-width: 0; text-align: center; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.durchschnitt-linie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--h);
  border-top: 1px solid var(--muted);
  pointer-events: none;
}
.durchschnitt-linie span {
  position: absolute;
  left: 0;
  bottom: 2px;
  padding: 0 4px;
  background: var(--surface);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.chart-tooltip {
  position: absolute;
  z-index: 3;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--strong);
  color: var(--on-strong);
  font-size: 12px;
  line-height: 1.3;
  pointer-events: none;
  transform: translate(-50%, -100%);
  white-space: nowrap;
}
.chart-tooltip strong { display: block; font-size: 14px; }

.kat-verlauf { display: flex; flex-direction: column; }
.kat-verlauf__zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; }
.kat-verlauf__zeile + .kat-verlauf__zeile { border-top: 1px solid var(--divider); }
.kat-verlauf__name { font-weight: 700; font-size: 14px; }
.kat-verlauf__summe { font-weight: 800; font-size: 14px; text-align: right; }
.kat-verlauf__meta { font-size: 12px; color: var(--muted); }
.mini-saeulen { grid-column: 1 / -1; height: 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 2px; }
.mini-saeulen span { flex: 0 1 24px; height: var(--h); min-height: 1px; border-radius: 2px 2px 0 0; background: var(--chart-muted); }
.mini-saeulen span.ist-aktuell { background: var(--accent); }

.tabelle-rahmen { overflow-x: auto; margin: 0 -4px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tabelle th, .tabelle td { padding: 8px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--divider); }
.tabelle th:first-child, .tabelle td:first-child { text-align: left; }
.tabelle th { font-weight: 700; color: var(--muted); }
details.tabellen-ansicht summary { cursor: pointer; font-weight: 700; color: var(--accent-text); min-height: 44px; display: flex; align-items: center; }

/* --- Stage-Streifen (nicht in Produktion) ----------------------------------------------- */
/* Rot = dev, Orange = test; dazu eine Beschriftung, damit es nicht nur an der Farbe hängt. */

html[data-stage="dev"], html[data-stage="test"] { --stage-h: 22px; }
html[data-stage="dev"] { --stage-bg: #C62828; --stage-text: #FFFFFF; --stage-label: 'DEV · lokale Entwicklung'; }
html[data-stage="test"] { --stage-bg: #F59E0B; --stage-text: #1F1300; --stage-label: 'TEST · Testumgebung'; }

html[data-stage="dev"] body, html[data-stage="test"] body { padding-top: calc(var(--stage-h) + env(safe-area-inset-top)); }
html[data-stage="dev"] body::before, html[data-stage="test"] body::before {
  content: var(--stage-label);
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  height: calc(var(--stage-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--stage-bg);
  color: var(--stage-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* --- Offline-Hinweis ------------------------------------------------------------------- */
/* Bleibt beim Scrollen oben (unter dem Stage-Streifen), nur solange offline. */

.offline-hinweis {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 16px;
  background: var(--strong);
  color: var(--on-strong);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.offline-hinweis[hidden] { display: none; }
html[data-stage="dev"] .offline-hinweis, html[data-stage="test"] .offline-hinweis { top: calc(var(--stage-h) + env(safe-area-inset-top)); }
.offline-hinweis svg { flex: none; }

/* --- Doppelte Einträge ----------------------------------------------------------------- */

.doppelt-gruppe { display: flex; flex-direction: column; gap: 4px; }
.doppelt-gruppe__kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.doppelt-gruppe__kopf strong { color: var(--text); }
.doppelt-zeile { display: flex; align-items: center; gap: 4px; }
.doppelt-zeile + .doppelt-zeile { border-top: 1px solid var(--divider); }
.doppelt-zeile .entry { flex: 1; min-width: 0; }
.doppelt-gruppe > .btn { align-self: flex-start; margin-top: 8px; }
.doppelt-zeile .entry__text span { white-space: normal; }

/* --- Neue Einträge: Punkt am Kategorie-Icon -------------------------------------------- */

.entry__icon { position: relative; }
.neu-punkt {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--surface);
}
.entry__text .neu-punkt { position: static; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: middle; box-shadow: none; }
.entry--neu .entry__text strong { font-weight: 800; }

/* --- Ersteinrichtung ------------------------------------------------------------------- */

.einrichten { gap: 20px; }
.einrichten__personen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.einrichten__person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 16px 8px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.einrichten__person[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }

/* --- Auswahl im Dialog (Radio-Liste) ---------------------------------------------------- */

.wahl-liste { border: 0; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wahl-liste label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; min-height: 44px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; }
.wahl-liste label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.wahl-liste input { margin-top: 3px; accent-color: var(--accent); }
.wahl-liste label > span { display: flex; flex-direction: column; gap: 2px; }
.wahl-liste label > span > span { font-size: 13px; color: var(--muted); }

/* --- Neuigkeiten (Changelog) ----------------------------------------------------------- */

.changelog { padding-top: 4px; padding-bottom: 4px; gap: 0; }
.changelog summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.changelog summary span { font-size: 13px; color: var(--muted); }
.changelog__inhalt { padding-bottom: 12px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.changelog__inhalt h2 { margin: 14px 0 4px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.changelog__inhalt ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.changelog__inhalt code { font-size: 12px; padding: 1px 5px; border-radius: 6px; background: var(--divider); overflow-wrap: anywhere; }
.changelog__inhalt a { color: var(--accent-text); }