/* Belege — Design-System. Dunkel zuerst, heller Modus in Quittungspapier-Tönen.
   Keine externen Quellen: Systemschriften (SF Pro / New York auf iOS). */

:root, html[data-theme="dunkel"] {
  color-scheme: dark;
  --bg0: #07090C; --bg1: #0C1117;
  --surface: #111823; --surface-2: #16202D; --surface-3: #1C2836;
  --line: rgba(150, 185, 168, .13); --line-stark: rgba(150, 185, 168, .26);
  --ink: #F2F7F4; --ink-2: #9FB0A8; --ink-3: #64756D;
  --akzent: #2EE6A8; --akzent-tief: #17B583; --akzent-ink: #04120C;
  --akzent-glow: rgba(46, 230, 168, .35);
  --warn: #F5C044; --rot: #F27059; --blau: #5FA8F5; --rosa: #E58FB1;
  --lila: #A98FE5; --orange: #F09A56;
  --schatten: 0 10px 26px rgba(0, 0, 0, .38);
  --glas: rgba(12, 17, 23, .82);
}

html[data-theme="hell"] {
  color-scheme: light;
  --bg0: #EFEDE5; --bg1: #F7F5EE;
  --surface: #FFFFFF; --surface-2: #F4F2EA; --surface-3: #EAE7DC;
  --line: rgba(28, 46, 38, .12); --line-stark: rgba(28, 46, 38, .24);
  --ink: #15211B; --ink-2: #4E6057; --ink-3: #8B978F;
  --akzent: #0D9E6F; --akzent-tief: #0A845D; --akzent-ink: #FFFFFF;
  --akzent-glow: rgba(13, 158, 111, .28);
  --warn: #B07B10; --rot: #C74E38; --blau: #2D6FB8; --rosa: #B85F87;
  --lila: #7A5FB8; --orange: #C17330;
  --schatten: 0 8px 20px rgba(30, 40, 34, .12);
  --glas: rgba(247, 245, 238, .86);
}

@media (prefers-color-scheme: light) {
  html:not([data-theme]) {
    color-scheme: light;
    --bg0: #EFEDE5; --bg1: #F7F5EE;
    --surface: #FFFFFF; --surface-2: #F4F2EA; --surface-3: #EAE7DC;
    --line: rgba(28, 46, 38, .12); --line-stark: rgba(28, 46, 38, .24);
    --ink: #15211B; --ink-2: #4E6057; --ink-3: #8B978F;
    --akzent: #0D9E6F; --akzent-tief: #0A845D; --akzent-ink: #FFFFFF;
    --akzent-glow: rgba(13, 158, 111, .28);
    --warn: #B07B10; --rot: #C74E38; --blau: #2D6FB8; --rosa: #B85F87;
    --lila: #7A5FB8; --orange: #C17330;
    --schatten: 0 8px 20px rgba(30, 40, 34, .12);
    --glas: rgba(247, 245, 238, .86);
  }
}

:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --radius: 18px; --radius-s: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Eigene display-Regeln dürfen das hidden-Attribut nie übersteuern. */
[hidden] { display: none !important; }
html { overscroll-behavior-y: none; }
/* Nichts darf die Seite je horizontal aufspreizen — zu breite Inhalte
   werden abgeschnitten statt die ganze Oberfläche zu verschieben, und
   lange Wörter/Nummern/URLs brechen notfalls mitten im Wort um. */
html, body { max-width: 100%; overflow-x: clip; }
body { overflow-wrap: anywhere; }
body {
  margin: 0; background: var(--bg0); color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
body::before { /* leiser Papier-/Aurora-Schimmer hinter allem. Auf eigener
  Compositor-Ebene, sonst malt iOS ihn bei jedem Scrollen neu (Ruckeln). */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 40% at 85% -5%, var(--akzent-glow), transparent 60%),
    radial-gradient(50% 35% at -10% 100%, var(--akzent-glow), transparent 65%),
    linear-gradient(var(--bg1), var(--bg0));
  opacity: .5;
  transform: translateZ(0); will-change: transform;
}

a { color: var(--akzent); text-decoration: none; }
/* body erlaubt Umbrüche mitten im Wort (lange IBANs, URLs, Zahlenketten).
   Für Überschriften ist das falsch — dort bricht sonst „Monatsverlauf". */
h1, h2, h3, .kpi-titel, .streifen .kopf { overflow-wrap: normal; }
h1, h2, h3 { margin: 0 0 .35em; letter-spacing: -.02em; }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  font-size: 16px; /* darunter zoomt iOS ins Feld */
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 11px 13px; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-glow);
}
label { display: block; font-size: 12px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 5px 2px; }

/* Datumsfelder: iOS gibt ihnen eine starre Eigenbreite und lässt sie in
   Grid-Spalten nicht schrumpfen — sie überlappen sonst das Nachbarfeld. */
.zeile2 > div { min-width: 0; }
input[type="date"] {
  -webkit-appearance: none; appearance: none;
  min-width: 0; max-width: 100%; min-height: 46px;
  display: flex; align-items: center;
}
input[type="date"]::-webkit-date-and-time-value {
  text-align: left; margin: 0;
}

/* --- Ladeschirm beim App-Start ---------------------------------------- */
.splash { display: none; }
html.lade .splash {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 100;
  background:
    radial-gradient(70% 45% at 50% 18%, var(--akzent-glow), transparent 65%),
    var(--bg0);
  transition: opacity .5s ease, transform .5s ease;
}
html.lade .splash.weg { opacity: 0; transform: scale(1.05); pointer-events: none; }
.splash-kern { display: grid; justify-items: center; gap: 16px;
  transform: translateY(-4vh); }
.splash-icon {
  position: relative; width: 98px; height: 98px; border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 18px 50px var(--akzent-glow), 0 4px 14px rgba(0, 0, 0, .35);
  animation: splashKachel .55s cubic-bezier(.18, .9, .3, 1.2) both;
}
.splash-icon img { width: 100%; height: 100%; display: block; }
.splash-icon::after { /* Scan-Strahl läuft einmal über das Logo */
  content: ""; position: absolute; left: 0; right: 0; height: 34%; top: -40%;
  background: linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--akzent) 65%, white 10%), transparent);
  mix-blend-mode: screen;
  animation: splashBeam 1.05s .35s cubic-bezier(.4, 0, .3, 1) both;
}
.splash-wort {
  font: italic 600 30px/1 var(--serif); color: var(--ink);
  letter-spacing: -.01em;
  animation: splashWort .6s .3s cubic-bezier(.2, .8, .25, 1) both;
}
.splash-wort .punkt { color: var(--akzent); }
.splash-firma { font: 600 10.5px var(--sans); letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-3); margin-top: -6px;
  animation: splashWort .6s .42s cubic-bezier(.2, .8, .25, 1) both; }
.splash-strich {
  width: 74px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--akzent), transparent)
    var(--surface-2);
  background-size: 60% 100%; background-repeat: no-repeat;
  animation: splashStrich 1.1s .45s ease-in-out infinite,
             splashWort .6s .45s both;
}
@keyframes splashKachel {
  from { opacity: 0; transform: scale(.72) translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes splashBeam { from { top: -40%; } to { top: 108%; } }
@keyframes splashWort {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes splashStrich {
  0% { background-position: -80% 0; }
  100% { background-position: 190% 0; }
}
/* Solange der Ladeschirm steht, warten die Karten darunter — sie blenden
   erst ein, wenn er weggezogen ist. */
html.lade:not(:has(.splash.weg)) main > * { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html.lade .splash { display: none; }
}

/* --- Gerüst ---------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  background: var(--glas); backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font: italic 600 22px/1 var(--serif); color: var(--ink);
  letter-spacing: -.01em; display: flex; align-items: center; gap: 9px;
}
.wordmark .punkt { color: var(--akzent); }
.wordmark img { width: 28px; height: 28px; border-radius: 7px; }
.wm-firma { font: 600 9.5px var(--sans); font-style: normal;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; margin-left: 4px; padding-left: 12px;
  border-left: 1px solid var(--line-stark); align-self: center;
  transform: translateY(1px); }
@media (max-width: 430px) { .wm-firma { display: none; } }
.desknav { display: flex; gap: 4px; margin-left: auto; }
.desknav a {
  color: var(--ink-2); padding: 8px 13px; border-radius: 999px; font-size: 15px;
}
.desknav a.aktiv { color: var(--ink); background: var(--surface-2); }
.theme-knopf {
  margin-left: 8px; background: none; border: 1px solid var(--line);
  border-radius: 999px; width: 36px; height: 36px; cursor: pointer;
  color: var(--ink-2); display: grid; place-items: center; font-size: 16px;
}

main {
  max-width: 780px; margin: 0 auto;
  padding: 20px 18px calc(110px + env(safe-area-inset-bottom));
}

.tabbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  grid-template-columns: repeat(5, 1fr);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  background: var(--glas); backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-top: 1px solid var(--line);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 48px; justify-content: center;
  color: var(--ink-3); font-size: 10.5px; letter-spacing: .04em;
}
.tabbar a.aktiv { color: var(--akzent); }
.tabbar svg { width: 23px; height: 23px; }
.tab-scan { transform: translateY(-16px); }
.tab-scan .fab {
  width: 58px; height: 58px; border-radius: 50%;
  background: linear-gradient(150deg, var(--akzent), var(--akzent-tief));
  display: grid; place-items: center; color: var(--akzent-ink);
  box-shadow: 0 10px 26px var(--akzent-glow), 0 2px 6px rgba(0,0,0,.3);
}
.tab-scan .fab svg { width: 27px; height: 27px; }
.tab-scan span { color: var(--ink-3); }

@media (max-width: 860px) {
  .desknav { display: none; }
  .tabbar { display: grid; }
}

/* --- Karten & Kacheln ------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
  box-shadow: var(--schatten);
}
.hero { padding: 26px 20px 22px; position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: auto -30% -60% auto;
  width: 75%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--akzent-glow), transparent 70%);
  pointer-events: none;
}
.hero-titel { font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px; }
.hero-figure {
  font: 700 clamp(40px, 13vw, 64px)/1 var(--sans);
  letter-spacing: -.03em; color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.hero-sub { color: var(--ink-2); margin-top: 6px; font-size: 15px; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 13px 15px;
}
.stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.stat b { display: block; font-size: 24px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--ink-3); }

/* --- Ausgaben-Statistik ------------------------------------------------ */
.ausgabe-zeile { margin-bottom: 13px; }
.ausgabe-kopf { display: flex; justify-content: space-between; gap: 10px;
  font-size: 14px; margin-bottom: 5px; align-items: baseline; }
.ausgabe-kopf small { color: var(--ink-3); font-size: 11.5px; }
.ausgabe-kopf b { font-variant-numeric: tabular-nums; white-space: nowrap;
  flex: none; max-width: 62%; overflow: hidden; text-overflow: ellipsis; }
/* Original-Beträge bei Fremdwährungs-Kategorien: eigene Zeile, darf
   umbrechen — lange Währungsketten sprengen sonst die Seitenbreite. */
.ausgabe-orig { font-size: 12px; color: var(--ink-3); margin: -3px 0 5px;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ausgabe-balken { height: 8px; border-radius: 999px;
  background: var(--surface-2); overflow: hidden; }
.ausgabe-balken i { display: block; height: 100%; width: var(--w, 0%);
  border-radius: 999px; transform-origin: left;
  background: var(--ink-3); }
.ausgabe-balken i.tanken { background: var(--orange); }
.ausgabe-balken i.ware { background: var(--blau); }
.ausgabe-balken i.werbung { background: var(--rosa); }
.ausgabe-balken i.software { background: var(--lila); }
.ausgabe-balken i.spesen { background: var(--warn); }
.ausgabe-balken i.privat { background: var(--ink-3); }
.ausgabe-balken i.sonst { background: color-mix(in srgb, var(--ink-3) 75%, var(--akzent)); }
.trend { display: flex; gap: 8px; align-items: flex-end; height: 82px;
  margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); }
.trend-saeule { flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.trend-saeule i { display: block; width: 100%; max-width: 46px;
  border-radius: 7px 7px 2px 2px; height: max(var(--h, 0%), 4%);
  background: linear-gradient(180deg, var(--akzent),
    color-mix(in srgb, var(--akzent) 45%, var(--surface-3)));
  transform-origin: bottom; }
.trend-saeule span { font-size: 10px; letter-spacing: .06em;
  color: var(--ink-3); text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .ausgabe-balken i { animation: balkenAuf .65s cubic-bezier(.2, .8, .25, 1) backwards; }
  .trend-saeule i { animation: balkenHoch .55s cubic-bezier(.2, .8, .25, 1) backwards; }
}
@keyframes balkenAuf { from { transform: scaleX(0); } }
@keyframes balkenHoch { from { transform: scaleY(0); } }

/* --- Schnellansicht + Mehrfachauswahl (Beleg-Liste) -------------------- */
.sheet-griff { width: 40px; height: 4px; border-radius: 999px;
  background: var(--line); margin: 2px auto 12px; }
.sheet-kopfzeile { display: flex; gap: 14px; align-items: flex-start; }
.sheet-thumb { width: 92px; height: 118px; object-fit: cover;
  object-position: top; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; flex: none; display: block; }
.sheet-fakten { min-width: 0; }
.sheet-fakten h3 { margin: 2px 0 4px; font-size: 17px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.sheet-fakten .ki-satz { margin: 3px 0 0; }
.sheet-zahl { font: 700 24px/1.15 var(--sans); margin: 0 0 2px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sheet-hinweis { margin: 12px 0 0; display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  cursor: pointer; }
.sheet-hinweis.offen { -webkit-line-clamp: unset; }
.sheet-aktionen { display: grid; gap: 9px; margin-top: 16px; }

/* Checkbox auf jeder Karte — grosszügige Tippfläche, kleiner Kreis.
   Nur die Belege-Liste hat Checkboxen; Karten ohne (Startseite
   „Zuletzt erfasst") behalten das 3-Spalten-Raster. */
.beleg-karte:has(.wahl) { grid-template-columns: auto 38px 1fr auto; }
.wahl { width: 40px; height: 44px; margin: -8px -4px -8px -12px;
  display: grid; place-items: center; flex: none; cursor: pointer; }
.wahl::before { content: ""; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line); box-sizing: border-box;
  transition: border-color .15s, background .15s, transform .15s; }
.wahl:active::before { transform: scale(.88); }
.beleg-karte.gewaehlt { border-color: var(--akzent); }
.beleg-karte.gewaehlt .wahl::before, .alle-wahl.gewaehlt .wahl::before {
  border-color: var(--akzent);
  background: var(--akzent) center / 13px no-repeat
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8.5 6.5 12 13 4.5" fill="none" stroke="%23062018" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.alle-wahl { display: inline-flex; align-items: center; gap: 4px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
  margin: 2px 0 4px; user-select: none; -webkit-user-select: none; }
.alle-wahl .wahl { margin: -8px 0; }

.aktions-balken { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg1); border: 1px solid var(--line);
  border-radius: 16px; padding: 10px 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.aktions-balken[hidden] { display: none !important; }
.aktions-balken span { font-size: 13.5px; color: var(--ink-2);
  white-space: nowrap; }
.aktions-balken .btn { padding: 9px 14px; font-size: 14px;
  white-space: nowrap; }

/* --- Live-Scanner ------------------------------------------------------ */
.scanner-start { position: fixed; inset: 0; z-index: 60; display: grid;
  place-items: center; background: color-mix(in srgb, var(--bg0) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scanner-start .btn { font-size: 17px; padding: 18px 26px; }

dialog.scanner { border: 0; padding: 0; margin: 0; width: 100vw;
  height: 100dvh; max-width: none; max-height: none; background: #000; }
dialog.scanner:not([open]) { display: none; }
dialog.scanner::backdrop { background: #000; }
.sc-buehne { position: relative; width: 100%; height: 100%; overflow: hidden; }
.sc-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.sc-overlay { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; }
.sc-oben { position: absolute; top: 0; left: 0; right: 0;
  padding: calc(14px + env(safe-area-inset-top)) 16px 12px;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(rgba(0,0,0,.55), transparent); }
.sc-hinweis { flex: 1; text-align: center; color: #fff;
  font: 600 14.5px/1.3 var(--sans); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.sc-zu, .sc-blitz { width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(20,24,28,.55);
  color: #fff; font-size: 17px; cursor: pointer; flex: none;
  display: grid; place-items: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sc-blitz.an { background: var(--akzent); color: #062018;
  border-color: var(--akzent); }
.sc-autopille { position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(66px + env(safe-area-inset-top)); z-index: 2;
  padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(20,24,28,.55); color: #fff; font: 700 12.5px var(--sans);
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sc-autopille.an { background: var(--akzent); color: #062018;
  border-color: var(--akzent); box-shadow: 0 6px 24px rgba(46,230,168,.35); }
.sc-unten { position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 22px calc(22px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.sc-thumb { justify-self: start; position: relative; width: 52px; height: 66px;
  border-radius: 10px; border: 2px solid #fff; overflow: visible;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover;
  border-radius: 8px; display: block; }
.sc-thumb .sc-zaehler { position: absolute; top: -9px; right: -9px;
  min-width: 24px; height: 24px; border-radius: 50%; background: var(--akzent);
  color: #062018; font: 700 12.5px/24px var(--sans); text-align: center; }
.sc-thumb.pling { animation: zaehlerPling .4s cubic-bezier(.2,.85,.3,1.4); }
@keyframes zaehlerPling { 0% { transform: scale(.5); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.sc-schuss { width: 72px; height: 72px; border-radius: 50%; cursor: pointer;
  border: 4px solid #fff; background: none; display: grid;
  place-items: center; }
.sc-schuss i { width: 56px; height: 56px; border-radius: 50%;
  background: #fff; transition: transform .12s; }
.sc-schuss:active i { transform: scale(.82); }
.sc-fertig { justify-self: end; padding: 12px 20px; border-radius: 999px;
  border: 0; background: var(--akzent); color: #062018;
  font: 700 15px var(--sans); cursor: pointer;
  box-shadow: 0 8px 26px rgba(46,230,168,.4); }
/* Scan-Linie während der Verarbeitung */
.sc-buehne.verarbeitet::after { content: ""; position: absolute; left: 6%;
  right: 6%; top: 0; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--akzent), transparent);
  box-shadow: 0 0 18px var(--akzent);
  animation: scanLinie .9s ease-in-out infinite alternate; }
@keyframes scanLinie { from { top: 18%; } to { top: 78%; } }
@media (prefers-reduced-motion: reduce) {
  .sc-buehne.verarbeitet::after { animation: none; display: none; }
  .sc-thumb.pling { animation: none; }
}
.sc-ring { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px;
  transform: translate(-50%, -50%); pointer-events: none; }
.sc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-blitzlicht { position: absolute; inset: 0; background: #fff; opacity: 0;
  pointer-events: none; }
.sc-blitzlicht.zuck { animation: blitzZuck .26s ease-out; }
@keyframes blitzZuck { 0% { opacity: .85; } 100% { opacity: 0; } }

/* --- Anleitungs-Sheets (natives <dialog>) ------------------------------ */
dialog.sheet {
  margin: auto auto 0; width: 100%; max-width: 560px;
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 22px 22px 0 0; padding: 0;
  background: var(--bg1); color: var(--ink);
  max-height: 86dvh; overflow: hidden;
  display: flex; flex-direction: column;
}
dialog.sheet:not([open]) { display: none; }
dialog.sheet::backdrop { background: rgba(4, 8, 10, .58);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) {
  dialog.sheet[open] { animation: sheetHoch .38s cubic-bezier(.2, .85, .3, 1) both; }
}
@keyframes sheetHoch { from { transform: translateY(55%); opacity: .3; } }
@media (min-width: 861px) {
  dialog.sheet { margin: auto; border-radius: 20px;
    border-bottom: 1px solid var(--line); }
}
.sheet-kopf { display: flex; justify-content: space-between;
  align-items: center; gap: 10px; padding: 15px 18px 12px;
  border-bottom: 1px solid var(--line); flex: none; }
.sheet-kopf h3 { margin: 0; }
.sheet-zu { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 50%; width: 32px; height: 32px; font-size: 15px;
  color: var(--ink-2); cursor: pointer; flex: none;
  display: grid; place-items: center; }
.sheet-inhalt { padding: 14px 18px calc(22px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain; }
.sheet-inhalt h4 { margin: 14px 0 4px; font-size: 14px; }
.schritte { list-style: none; counter-reset: schritt; margin: 4px 0 8px;
  padding: 0; }
.schritte li { counter-increment: schritt; display: flex; gap: 12px;
  padding: 10px 0; font-size: 14.5px; line-height: 1.5;
  color: var(--ink-2); border-bottom: 1px solid var(--line);
  align-items: flex-start; }
.schritte li:last-child { border-bottom: none; }
.schritte li::before { content: counter(schritt); flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--akzent) 16%, transparent);
  color: var(--akzent); font-weight: 700; font-size: 13px;
  display: grid; place-items: center; margin-top: 1px; }
.schritte b, .sheet-inhalt b { color: var(--ink); }
.schritte code { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 6px; font: 12.5px var(--mono); }

/* --- Drag & Drop (Desktop) --------------------------------------------- */
.scan-buehne { transition: border-color .2s ease, background .2s ease,
  transform .2s ease; }
.scan-buehne.drag {
  border-color: var(--akzent); border-style: solid;
  background: color-mix(in srgb, var(--akzent) 9%, var(--surface));
  transform: scale(1.012);
}
.nur-desktop { display: none; }
@media (min-width: 861px) { .nur-desktop { display: block; } }

/* --- Beleg-Listen ------------------------------------------------------ */
.monats-titel {
  font: italic 600 19px/1.2 var(--serif); color: var(--ink);
  margin: 22px 2px 10px; display: flex; align-items: baseline; gap: 10px;
}
.monats-titel small { font: 500 12px var(--sans); color: var(--ink-3);
  letter-spacing: .06em; }

.beleg-karte {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 10px;
  align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 9px;
  color: var(--ink); transition: transform .15s ease, border-color .15s ease;
}
.beleg-karte:active { transform: scale(.985); }
.beleg-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--surface-2); display: grid; place-items: center;
  font-size: 18px; border: 1px solid var(--line);
}
.beleg-mitte { min-width: 0; padding-right: 4px; }
.beleg-haendler { display: block; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-size: 15.5px; }
.beleg-meta { font-size: 12.5px; color: var(--ink-3); display: flex;
  gap: 6px; align-items: center; flex-wrap: wrap; }
.beleg-betrag { text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.beleg-betrag small { display: block; font-weight: 500; font-size: 11px;
  color: var(--ink-3); letter-spacing: .04em; }

/* Kategorie: Farbe + Form + Wort (nie nur Farbe) */
.dot { width: 9px; height: 9px; display: inline-block; flex: none; }
.dot.tanken   { background: var(--orange); transform: rotate(45deg); }
.dot.ware     { background: var(--blau); border-radius: 2px; }
.dot.werbung  { background: var(--rosa); border-radius: 50%; }
.dot.software { background: var(--lila); border-radius: 2px 50% 2px 50%; }
.dot.spesen   { background: var(--warn); border-radius: 50% 50% 0 50%; }
.dot.privat   { background: var(--ink-3); border-radius: 50%; }
.dot.sonst    { background: repeating-linear-gradient(45deg, var(--ink-3) 0 2px,
  transparent 2px 4px); border: 1px solid var(--ink-3); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-2); background: var(--surface-2); white-space: nowrap;
}
.chip.neu, .chip.analysiert { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.chip.hochgeladen { color: var(--akzent); border-color: color-mix(in srgb, var(--akzent) 40%, transparent); }
.chip.uebergeben { color: var(--blau); border-color: color-mix(in srgb, var(--blau) 40%, transparent); }
.chip.fehler { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 45%, transparent); }
.chip.ignoriert { color: var(--ink-3); border-color: color-mix(in srgb, var(--ink-3) 40%, transparent); }
.chip.niedrig { color: var(--rot); }
/* Was gerade dazukam. Eine alte Rechnung landet in der nach Belegdatum
   sortierten Liste weit unten — ohne Markierung hält man sie für verschwunden. */
.chip.frisch-erfasst { color: var(--akzent-tief);
  border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
  background: color-mix(in srgb, var(--akzent) 12%, var(--surface-2)); }

.filter-zeile { display: flex; gap: 8px; overflow-x: auto; padding: 2px;
  margin-bottom: 6px; scrollbar-width: none; }
.filter-zeile::-webkit-scrollbar { display: none; }
.filter-zeile a {
  flex: none; font-size: 13px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface);
}
.filter-zeile a.aktiv { background: var(--akzent); color: var(--akzent-ink);
  border-color: transparent; font-weight: 600; }

/* --- Knöpfe ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(150deg, var(--akzent), var(--akzent-tief));
  color: var(--akzent-ink); font-weight: 700; letter-spacing: .01em;
  border: none; border-radius: 14px; padding: 13px 20px; cursor: pointer;
  width: 100%; min-height: 48px;
  box-shadow: 0 8px 22px var(--akzent-glow);
  transition: transform .12s ease, box-shadow .2s ease;
}
.btn:disabled { opacity: .55; box-shadow: none; }
.btn.leise {
  background: var(--surface-2); color: var(--ink); box-shadow: none;
  border: 1px solid var(--line); font-weight: 600;
}
.btn.gefahr { background: none; border: 1px solid color-mix(in srgb, var(--rot) 50%, transparent);
  color: var(--rot); box-shadow: none; }

/* --- Scan-Seite -------------------------------------------------------- */
.scan-buehne {
  border: 1.5px dashed var(--line-stark); border-radius: var(--radius);
  padding: 34px 20px; text-align: center; background: var(--surface);
  position: relative; overflow: hidden;
}
.scan-buehne img.leer { width: 130px; height: 130px; border-radius: 22px;
  margin-bottom: 12px; opacity: .9; }
.scan-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
}
.scan-item .kopf { display: flex; gap: 12px; padding: 13px 15px;
  align-items: center; }
.scan-thumb { width: 52px; height: 52px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2);
  flex: none; }
.scan-status { font-size: 13px; color: var(--ink-2); }

.scan-lauf { position: relative; }
.scan-lauf::after { /* Scan-Beam über dem Thumbnail während der Analyse */
  content: ""; position: absolute; left: 0; right: 0; height: 30%;
  top: 0; border-radius: 10px;
  background: linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--akzent) 55%, transparent), transparent);
  animation: beam 1.4s ease-in-out infinite;
}
@keyframes beam { 0%,100% { top: -10%; } 50% { top: 80%; } }

.ergebnis { border-top: 1px solid var(--line); padding: 15px;
  display: grid; gap: 11px; }
.ergebnis .zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ki-satz { font-size: 13.5px; color: var(--ink-2); font-style: italic; }
.ki-satz.warnung { color: var(--warn); font-style: normal; }

.haken {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 8px;
  background: color-mix(in srgb, var(--akzent) 18%, transparent);
  display: grid; place-items: center;
}
.haken svg { width: 30px; height: 30px; stroke: var(--akzent);
  stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: haken .5s .1s ease forwards; }
@keyframes haken { to { stroke-dashoffset: 0; } }

/* Sammelaktion für die Massenverarbeitung: schwebt über der Tab-Leiste.
   Wichtig: display:flex würde das hidden-Attribut übersteuern — die Leiste
   wäre sonst von Anfang an leer sichtbar. */
.aktionsleiste[hidden] { display: none; }
.aktionsleiste {
  position: fixed; left: 12px; right: 12px; z-index: 45;
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex; gap: 10px;
  animation: kartenAn .35s cubic-bezier(.2,.8,.25,1) backwards;
}
.aktionsleiste .btn { box-shadow: 0 12px 30px var(--akzent-glow),
  0 4px 10px rgba(0,0,0,.35); }
@media (min-width: 861px) {
  .aktionsleiste { left: 50%; right: auto; transform: translateX(-50%);
    width: min(560px, calc(100vw - 40px)); bottom: 22px; }
}

/* --- Maskottchen: "Jetzt übernehme ich" -------------------------------- */
.maskottchen {
  position: fixed; right: 10px; z-index: 46;
  bottom: calc(158px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 6px;
  pointer-events: none;
  transform: translateY(46px) scale(.55); opacity: 0;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.35), opacity .28s ease;
}
@media (min-width: 861px) { .maskottchen { bottom: 96px; right: 22px; } }
.maskottchen.da { transform: none; opacity: 1; }
.maskottchen img { width: 86px; height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .35)); }
.maskottchen.arbeitet img { animation: maskWippen 1.5s ease-in-out infinite; }
.maskottchen.faengt img { animation: maskHuepf .5s cubic-bezier(.2, .9, .3, 1.4); }
.blase {
  max-width: 210px; margin-bottom: 58px;
  background: var(--surface-3); border: 1px solid var(--line-stark);
  border-radius: 14px 14px 4px 14px; padding: 8px 12px;
  font-size: 13px; line-height: 1.35; color: var(--ink);
  box-shadow: var(--schatten); transform-origin: bottom right;
}
.blase.neu { animation: blaseAuf .3s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes maskWippen {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg) translateY(-4px); }
}
@keyframes maskHuepf {
  0% { transform: scale(1); }
  40% { transform: scale(1.18) translateY(-9px) rotate(-4deg); }
  100% { transform: scale(1); }
}
@keyframes blaseAuf { from { transform: scale(.5); opacity: 0; } }
.flug-beleg { position: fixed; z-index: 47; object-fit: cover;
  border-radius: 10px; pointer-events: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) {
  .maskottchen, .flug-beleg { display: none; }
}

/* --- Login ------------------------------------------------------------- */
.login-body { display: grid; place-items: end center; min-height: 100dvh;
  background: #07090C url("/static/login-bg.webp") center/cover no-repeat; }
.login-body::before { content: ""; position: fixed; inset: 0;
  background: linear-gradient(180deg, rgba(7,9,12,.25) 0%, rgba(7,9,12,.0) 35%,
    rgba(7,9,12,.72) 78%, rgba(7,9,12,.92) 100%); }
.login-karte {
  position: relative; width: min(430px, calc(100vw - 28px));
  margin-bottom: max(26px, env(safe-area-inset-bottom));
  background: rgba(12, 17, 23, .74); backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(150, 185, 168, .18); border-radius: 26px;
  padding: 26px 24px calc(20px + env(safe-area-inset-bottom) * .3);
  color: #F2F7F4;
  animation: karteHoch .6s cubic-bezier(.2,.8,.25,1) both;
}
.login-karte .wordmark { font-size: 30px; margin-bottom: 2px; color: #F2F7F4; }
.login-karte p.unter { color: #9FB0A8; margin: 0 0 18px; font-size: 14.5px; }
.login-karte label { color: #7d8d85; }
.login-karte input { background: rgba(22, 32, 45, .8);
  border-color: rgba(150,185,168,.2); color: #F2F7F4; }
.login-fehler { background: color-mix(in srgb, var(--rot) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--rot) 45%, transparent);
  color: #ffb3a4; border-radius: 12px; padding: 10px 13px;
  font-size: 14px; margin-bottom: 13px; }
@keyframes karteHoch { from { transform: translateY(26px); opacity: 0; }
  to { transform: none; opacity: 1; } }

/* --- Detail / Tabellen -------------------------------------------------- */
.feld-liste { display: grid; gap: 12px; }
.feld-liste .zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.beleg-bild { width: 100%; border-radius: var(--radius); border: 1px solid
  var(--line); background: var(--surface-2); }

/* --- Datei ersetzen: Leiste unter dem Beleg und frühere Fassungen ------ */
.datei-leiste { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 12px; margin: 10px 2px 0; }
.datei-leiste p { flex: 1 1 150px; }
/* .btn ist sonst 100 % breit — hier ein Nebenknopf, sonst quetscht er den
   Satz daneben auf einen Buchstaben pro Zeile. */
.datei-leiste .btn { width: auto; flex: 0 0 auto; padding: 10px 14px;
  font-size: 13.5px; min-height: 44px; white-space: nowrap; }
.fassungen { margin: 10px 2px 0; }
.fassungen summary { font-size: 13px; color: var(--ink-3); cursor: pointer;
  list-style: none; }
.fassungen summary::-webkit-details-marker { display: none; }
.fassungen summary::before { content: "▸ "; }
.fassungen[open] summary::before { content: "▾ "; }
.fassungs-band { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0 2px;
  -webkit-overflow-scrolling: touch; }
.fassungs-band a { flex: none; width: 92px; text-decoration: none;
  color: var(--ink-3); font-size: 11px; line-height: 1.35; }
.fassungs-band img { width: 92px; height: 118px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); display: block; margin-bottom: 4px;
  /* Eine abgelöste Fassung ist Archiv, kein Beleg — sie soll nicht mit der
     aktuellen um Aufmerksamkeit streiten. */
  opacity: .62; filter: grayscale(.35); }
.fassungs-band a:hover img, .fassungs-band a:focus img { opacity: 1;
  filter: none; }
/* Ein Schalter mit Fliesstext — kein Feldtitel. Ohne diese Rücknahme
   stünde der ganze Satz in Versalien mit Sperrschrift da (globales label). */
.schalter-zeile { display: flex; gap: 10px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.45; color: var(--ink-2); cursor: pointer;
  text-transform: none; letter-spacing: normal; margin: 0; }
.schalter-zeile input { width: auto; flex: none; margin-top: 2px;
  accent-color: var(--akzent); transform: scale(1.15); }
.proto { list-style: none; margin: 0; padding: 0; }
.proto li { display: flex; gap: 10px; padding: 9px 2px; font-size: 13.5px;
  border-bottom: 1px solid var(--line); color: var(--ink-2); }
.proto li:last-child { border-bottom: none; }
.proto time { color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; }

.monat-zeile { display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.monat-zeile:last-child { border-bottom: none; }
.monat-zeile b { font-variant-numeric: tabular-nums; }

/* --- Suchfeld über der Belegliste -------------------------------------- */
.suche { position: relative; display: block; margin: 0 0 14px; }
.suche input {
  padding-left: 42px; padding-right: 42px; height: 48px;
  background: var(--surface); border-radius: 14px;
}
/* Safaris eigenes Kreuz sitzt unter unserem und räumt nur das Feld, nicht
   die Suche — es soll gar nicht erst auftauchen. */
.suche input::-webkit-search-cancel-button { -webkit-appearance: none; }
.suche-lupe { position: absolute; left: 14px; top: 50%; margin-top: -9px;
  width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.suche-lupe svg { width: 18px; height: 18px; display: block; }
.suche-weg { position: absolute; right: 8px; top: 50%; margin-top: -16px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 999px; color: var(--ink-2); text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 13px; line-height: 1; }
.suche-weg:hover { color: var(--ink); }

.leer-hinweis { text-align: center; color: var(--ink-3); padding: 34px 10px; }
.leer-hinweis small { display: inline-block; max-width: 34em; margin: 8px 0;
  font-size: 12.5px; line-height: 1.5; }
.leer-hinweis img { width: 120px; height: 120px; border-radius: 20px;
  margin-bottom: 10px; opacity: .85; }

.meldung { background: color-mix(in srgb, var(--akzent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
  border-radius: 12px; padding: 10px 13px; font-size: 14px; margin-bottom: 13px; }
.meldung.fehler { background: color-mix(in srgb, var(--rot) 13%, transparent);
  border-color: color-mix(in srgb, var(--rot) 45%, transparent);
  color: var(--rot); }

/* --- Hover (nur echte Mäuse, nicht Touch) ------------------------------ */
@media (hover: hover) and (pointer: fine) {
  .beleg-karte, .btn, .stat, .filter-zeile a, .desknav a, .chip,
  .theme-knopf, .sheet-zu, .trend-saeule i, .beleg-icon {
    transition: transform .18s ease, border-color .18s ease,
      box-shadow .22s ease, background .18s ease, color .18s ease,
      filter .18s ease;
  }
  .beleg-karte:hover { transform: translateY(-2px);
    border-color: var(--line-stark);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
  .beleg-karte:hover .beleg-icon { transform: scale(1.08) rotate(-3deg); }
  .btn:hover { transform: translateY(-1px);
    box-shadow: 0 12px 30px var(--akzent-glow); filter: brightness(1.06); }
  .btn.leise:hover, .btn.gefahr:hover { box-shadow: none;
    border-color: var(--line-stark); background: var(--surface-3);
    filter: none; }
  .btn.gefahr:hover { background: color-mix(in srgb, var(--rot) 12%, transparent); }
  .stat:hover { transform: translateY(-2px); border-color: var(--line-stark); }
  .desknav a:hover { color: var(--ink); background: var(--surface-2); }
  .filter-zeile a:hover { border-color: var(--akzent); color: var(--ink); }
  a.chip:hover { border-color: var(--akzent); transform: translateY(-1px); }
  .theme-knopf:hover { color: var(--ink); border-color: var(--line-stark);
    transform: rotate(180deg); }
  .sheet-zu:hover { color: var(--ink); border-color: var(--line-stark);
    transform: rotate(90deg); }
  .wordmark:hover img { transform: rotate(-6deg) scale(1.06);
    transition: transform .25s cubic-bezier(.2, .8, .3, 1.4); }
  .wordmark:hover .punkt { display: inline-block;
    animation: punktHuepf .45s cubic-bezier(.3, 1.6, .4, 1); }
  .ausgabe-zeile:hover .ausgabe-balken i { filter: brightness(1.18); }
  .trend-saeule:hover i { filter: brightness(1.2); transform: scaleY(1.04); }
  .monats-titel a:hover, .proto a:hover { text-decoration: underline; }
}
@keyframes punktHuepf { 30% { transform: translateY(-5px); }
  60% { transform: translateY(1px); } }

/* --- Bewegung (abschaltbar) -------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .topbar { view-transition-name: topbar; }
  .tabbar { view-transition-name: tabbar; }
  /* Einblendung nur für die ersten Karten — lange Listen komplett zu
     animieren ruckelt auf dem iPhone. */
  main > .card:nth-child(-n+9), main > .beleg-karte:nth-child(-n+9),
  main > .stats:nth-child(-n+9), .scan-item {
    animation: kartenAn .38s cubic-bezier(.2, .8, .25, 1) backwards;
  }
  main > *:nth-child(2) { animation-delay: .04s; }
  main > *:nth-child(3) { animation-delay: .08s; }
  main > *:nth-child(4) { animation-delay: .12s; }
  .btn:active { transform: scale(.965); }
  .hero-figure { animation: zahlAn .6s .1s cubic-bezier(.2,.8,.25,1) backwards; }
}
@keyframes kartenAn { from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; } }
@keyframes zahlAn { from { opacity: 0; transform: translateY(8px) scale(.97); }
  to { opacity: 1; transform: none; } }

/* ======================================================================
   Finanz-Dashboard
   Bausteine für die Übersichtsseite. Diagramme sind reines Inline-SVG bzw.
   CSS — die App lädt bewusst keine fremden Bibliotheken (siehe CSP).
   Alle Werte kommen fertig gerechnet aus Python und stehen immer auch als
   Text daneben; kein Diagramm trägt hier allein eine Aussage.
   ====================================================================== */

/* Die Übersicht darf breiter sein als der Rest der App: am Schreibtisch
   nebeneinander, am iPhone unverändert einspaltig. */
main.weit { max-width: 1180px; }

.dash { display: grid; gap: 14px; }
@media (min-width: 900px) {
  .dash { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .dash > * { grid-column: span 12; margin-bottom: 0; }
  .dash > .sp4 { grid-column: span 4; }
  .dash > .sp6 { grid-column: span 6; }
  .dash > .sp8 { grid-column: span 8; }
  .dash > .sp5 { grid-column: span 5; }
  .dash > .sp7 { grid-column: span 7; }
}

/* --- Kopfzeile: Begrüssung, Zeitraum, Frische ------------------------- */
.gruss { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 2px 2px 14px; }
.gruss h1 { font: italic 600 clamp(22px, 6vw, 30px)/1.15 var(--serif);
  margin: 0; letter-spacing: -.01em; }
.gruss h1 .punkt { color: var(--akzent); }
.gruss-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 4px;
  display: flex; align-items: center; gap: 6px; }
.frisch { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-glow); }
.frisch.alt { background: var(--warn); box-shadow: 0 0 0 3px
  color-mix(in srgb, var(--warn) 30%, transparent); }
.frisch.tot { background: var(--rot); box-shadow: 0 0 0 3px
  color-mix(in srgb, var(--rot) 30%, transparent); }
.frisch.neu { background: var(--ink-3); box-shadow: 0 0 0 3px
  color-mix(in srgb, var(--ink-3) 26%, transparent); }

/* Segmentwahl (Heute · 7 Tage · Monat · Jahr) — eine gemeinsame Hülle,
   damit es wie ein Schalter wirkt und nicht wie vier Knöpfe. */
.segment { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
  max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segment::-webkit-scrollbar { display: none; }
.segment a { flex: none; font-size: 13px; font-weight: 500; padding: 7px 14px;
  border-radius: 999px; color: var(--ink-2); white-space: nowrap;
  transition: background .18s ease, color .18s ease; }
.segment a.aktiv { background: var(--akzent-tief); color: var(--akzent-ink);
  font-weight: 650; }

/* --- Delta-Pillen ------------------------------------------------------ */
.delta { display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 12px; font-weight: 650; letter-spacing: .01em;
  padding: 4px 9px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); }
/* Die Textfarbe wird zum Thema hin gemischt: --ink ist hell im Dunkelmodus
   und dunkel im Hellmodus. Ohne das lag die grüne Pille im Hellmodus bei
   2.98:1 und damit unter dem Lesbarkeitsminimum. */
.delta.hoch { color: color-mix(in srgb, var(--akzent) 72%, var(--ink));
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
  border-color: color-mix(in srgb, var(--akzent) 34%, transparent); }
.delta.runter { color: color-mix(in srgb, var(--rot) 72%, var(--ink));
  background: color-mix(in srgb, var(--rot) 12%, transparent);
  border-color: color-mix(in srgb, var(--rot) 34%, transparent); }
.delta svg { width: 12px; height: 12px; }

/* --- Kennzahlen-Karte -------------------------------------------------- */
.kpi { display: flex; flex-direction: column; gap: 10px; }
.kpi-kopf { display: flex; align-items: center; gap: 9px; }
.kpi-chip { width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; background: var(--surface-2);
  color: var(--ink-2); }
.kpi-chip svg { width: 16px; height: 16px; }
.kpi-chip.gut { color: var(--akzent);
  background: color-mix(in srgb, var(--akzent) 14%, var(--surface-2)); }
.kpi-chip.schlecht { color: var(--rot);
  background: color-mix(in srgb, var(--rot) 14%, var(--surface-2)); }
.kpi-titel { font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  margin-right: auto; }
.kpi-figur { font: 700 clamp(28px, 7.5vw, 38px)/1 var(--sans);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 1px; }
.kpi-figur .waehr { font-size: .45em; font-weight: 600; color: var(--ink-3);
  letter-spacing: .04em; margin-right: 5px; }
.kpi-figur .cent { font-size: .55em; font-weight: 600; color: var(--ink-3); }
.kpi-sub { font-size: 13px; color: var(--ink-3); margin: -2px 0 0; }
.kpi-sub b { color: var(--ink-2); font-weight: 600;
  font-variant-numeric: tabular-nums; }

/* --- Held: die eine Zahl ----------------------------------------------- */
.held-figur { font: 700 clamp(42px, 13vw, 68px)/1 var(--sans);
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 2px; margin: 2px 0 0; }
.held-figur.gut { color: var(--akzent); }
.held-figur.schlecht { color: var(--rot); }
.held-figur .waehr { font-size: .34em; font-weight: 600; color: var(--ink-3);
  letter-spacing: .04em; margin-right: 7px; }
.held-figur .cent { font-size: .42em; font-weight: 600; opacity: .55; }
.held-satz { color: var(--ink-2); font-size: 15px; margin: 8px 0 0;
  max-width: 46ch; }

/* --- Wasserfall: Umsatz minus Kosten gleich Profit --------------------- */
.wasserfall { margin: 16px 0 0; }
.wf-balken { display: flex; height: 26px; border-radius: 8px; overflow: hidden;
  background: var(--surface-2); gap: 2px; }
.wf-balken i { display: block; width: var(--w, 0%); min-width: 3px;
  transform-origin: left; background: var(--ink-3); }
.wf-balken i.umsatz   { background: var(--akzent); }
.wf-balken i.media    { background: var(--rosa); }
.wf-balken i.ware     { background: var(--blau); }
.wf-balken i.gebuehr  { background: var(--orange); }
.wf-balken i.agentur  { background: var(--lila); }
.wf-balken i.software { background: var(--warn); }
.wf-balken i.dienst   { background: color-mix(in srgb, var(--blau) 55%, var(--ink-3)); }
.wf-balken i.lohn     { background: color-mix(in srgb, var(--rosa) 55%, var(--ink-3)); }
.wf-balken i.mwst     { background: color-mix(in srgb, var(--warn) 45%, var(--ink-3)); }
.wf-balken i.betrieb  { background: var(--ink-3); }
.wf-balken i.rest     { background: color-mix(in srgb, var(--akzent) 32%, var(--surface-3)); }
.wf-balken i.fehl     { background: var(--rot); }
@media (prefers-reduced-motion: no-preference) {
  .wf-balken i { animation: balkenAuf .6s cubic-bezier(.2, .8, .25, 1) backwards; }
}
/* Marke, bis wohin der Umsatz reicht. Steht nur da, wenn die Kosten ihn
   übersteigen — dann ist der Balkenrest sichtbar ungedeckt. */
.wf-huelle { position: relative; }
.wf-marke { position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: var(--ink); left: var(--x); border-radius: 2px; }
.wf-marke::after { content: attr(data-text); position: absolute; top: -17px;
  left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 10.5px; letter-spacing: .06em; color: var(--ink-2); }

.wf-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0;
  font-size: 12.5px; color: var(--ink-2); }
.wf-legende span { display: inline-flex; align-items: center; gap: 6px; }
.wf-legende b { color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums; }

/* Farbpunkt für Legenden aller Art */
/* Acht Kostenkörbe, acht unterscheidbare Töne. Smaragd und Rot bleiben
   für Ergebnis und Verlust reserviert und tauchen hier nicht auf. */
.punkt-farbe { width: 9px; height: 9px; border-radius: 3px; flex: none;
  background: var(--ink-3); }
.punkt-farbe.umsatz   { background: var(--akzent); }
.punkt-farbe.media    { background: var(--rosa); }
.punkt-farbe.ware     { background: var(--blau); }
.punkt-farbe.gebuehr  { background: var(--orange); }
.punkt-farbe.agentur  { background: var(--lila); }
.punkt-farbe.software { background: var(--warn); }
.punkt-farbe.dienst   { background: color-mix(in srgb, var(--blau) 55%, var(--ink-3)); }
.punkt-farbe.lohn     { background: color-mix(in srgb, var(--rosa) 55%, var(--ink-3)); }
.punkt-farbe.mwst     { background: color-mix(in srgb, var(--warn) 45%, var(--ink-3)); }
.punkt-farbe.betrieb  { background: var(--ink-3); }
.punkt-farbe.rest     { background: color-mix(in srgb, var(--akzent) 32%, var(--surface-3)); }
.punkt-farbe.fehl     { background: var(--rot); }

/* --- Monatsverlauf: Säulen mit Profit-Linie ---------------------------- */
.verlauf { position: relative; margin-top: 14px; }
.verlauf-flaeche { position: relative; height: 168px; }
.verlauf-saeulen { position: absolute; inset: 0; display: flex; gap: 6px;
  align-items: flex-end; }
.verlauf-saeulen button { flex: 1; height: 100%; padding: 0; border: none;
  background: none; cursor: pointer; display: flex; flex-direction: column;
  justify-content: flex-end; min-width: 0; }
.verlauf-saeulen i { display: block; width: 100%; border-radius: 7px 7px 3px 3px;
  height: max(var(--h, 0%), 3%); transform-origin: bottom;
  background: color-mix(in srgb, var(--ink-3) 80%, var(--ink));
  transition: background .2s ease; }
.verlauf-saeulen button.aktiv i,
.verlauf-saeulen button:hover i { background: linear-gradient(180deg,
  var(--akzent), color-mix(in srgb, var(--akzent) 40%, var(--surface-3))); }
@media (prefers-reduced-motion: no-preference) {
  .verlauf-saeulen i { animation: balkenHoch .55s cubic-bezier(.2, .8, .25, 1) backwards; }
}
/* Abschnitte, für die noch keine Umsatzzahlen vorliegen: schraffiert statt
   gefüllt. Eine leere Säule würde „kein Umsatz" behaupten, dabei fehlen nur
   die Daten. */
.verlauf-saeulen button.unvoll i,
.verlauf-saeulen button.unvoll:hover i {
  background: repeating-linear-gradient(135deg, var(--surface-3) 0 5px,
    transparent 5px 10px);
  border: 1px dashed var(--line-stark); border-bottom: none;
}
/* Eine Zahl, die auf lückenhaften Daten steht, darf nicht aussehen wie eine
   sichere — aber auch nicht unleserlich werden. Gedämpfte Textfarbe plus
   gepunktete Unterstreichung statt Deckkraft (die lag bei 2.1:1). */

/* Profit-Linie liegt als SVG über den Säulen und fängt keine Klicks ab. */
.verlauf-linie { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; }
.verlauf-linie path { fill: none; stroke: var(--warn); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 5;
  opacity: .85; }
.verlauf-linie circle { fill: var(--warn); }
.verlauf-achse { display: flex; gap: 6px; margin-top: 8px; }
.verlauf-achse span { flex: 1; text-align: center; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  min-width: 0; overflow: hidden; }
.verlauf-achse span.aktiv { color: var(--akzent); font-weight: 650; }

/* Werte-Karte über dem Diagramm (statt Hover-Tooltip: immer sichtbar,
   damit es am iPhone ohne Zeiger funktioniert). */
.verlauf-wert { display: flex; flex-wrap: wrap; gap: 4px 18px;
  padding: 11px 13px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid var(--line); margin-bottom: 12px; font-size: 13px; }
.verlauf-wert .monat { font-weight: 650; margin-right: auto; }
.verlauf-wert span { display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2); }
.verlauf-wert b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* --- Ring (Kostenaufteilung) ------------------------------------------ */
.ring-reihe { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ring { width: 148px; height: 148px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 15; stroke-linecap: butt;
  stroke: var(--ink-3); }
.ring .bahn { stroke: var(--surface-2); }
/* Segmentfarben spiegeln die Legendenpunkte — dieselbe Zuordnung wie
   .punkt-farbe, sonst zeigen Ring und Legende verschiedene Sachen. */
.ring circle.media    { stroke: var(--rosa); }
.ring circle.ware     { stroke: var(--blau); }
.ring circle.gebuehr  { stroke: var(--orange); }
.ring circle.agentur  { stroke: var(--lila); }
.ring circle.software { stroke: var(--warn); }
.ring circle.dienst   { stroke: color-mix(in srgb, var(--blau) 55%, var(--ink-3)); }
.ring circle.lohn     { stroke: color-mix(in srgb, var(--rosa) 55%, var(--ink-3)); }
.ring circle.mwst     { stroke: color-mix(in srgb, var(--warn) 45%, var(--ink-3)); }
.ring circle.betrieb  { stroke: var(--ink-3); }
.ring circle.rest     { stroke: color-mix(in srgb, var(--akzent) 32%, var(--surface-3)); }
.ring-mitte { position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; pointer-events: none; }
.ring-huelle { position: relative; width: 148px; height: 148px; flex: none; }
.ring-zahl { font: 700 20px/1.1 var(--sans); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.ring-label { font-size: 11px; color: var(--ink-3); letter-spacing: .07em;
  text-transform: uppercase; margin-top: 2px; }
.ring-legende { flex: 1; min-width: 190px; display: grid; gap: 9px; }
.ring-legende div { display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; }
.ring-legende .name { margin-right: auto; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ring-legende b { font-variant-numeric: tabular-nums; white-space: nowrap;
  flex: none; }
.ring-legende small { color: var(--ink-3); font-size: 11.5px;
  width: 42px; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Sparkline --------------------------------------------------------- */
.funke { display: block; width: 100%; height: 34px; overflow: visible; }
.funke.gross { height: 62px; margin-top: auto; }
@media (min-width: 900px) { .funke.gross { height: 104px; } }
.funke path.linie { fill: none; stroke: var(--akzent); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.funke path.flaeche { fill: url(#funkeVerlauf); stroke: none; }
.funke.rot path.linie { stroke: var(--rot); }
.funke circle { fill: var(--akzent); }
.funke.rot circle { fill: var(--rot); }

/* --- Kennzahlen-Streifen (kompakt, mit Haarlinien) --------------------- */
.streifen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; margin-bottom: 14px; }
@media (min-width: 700px) { .streifen { grid-template-columns: repeat(4, 1fr); } }
.streifen > div { padding: 14px 16px; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); min-width: 0; }
.streifen > div:last-child { border-right: none; }
@media (min-width: 700px) { .streifen > div { border-bottom: none; } }
.streifen .kopf { font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px; }
.streifen .wert { font: 700 21px/1.1 var(--sans); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.streifen .fuss { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

/* --- Bewegungen (zweizeilig) ------------------------------------------ */
.bewegung { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px;
  align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line);
  color: var(--ink); }
.bewegung:last-child { border-bottom: none; }
.bewegung-icon { width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: var(--surface-2);
  font-size: 15px; }
.bewegung-mitte { min-width: 0; display: block; }
/* display:block ist Pflicht: text-overflow greift bei inline-Elementen nicht,
   und dann schiebt sich ein langer Händlername über den Betrag. */
.bewegung-titel { display: block; font-size: 14.5px; font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bewegung-sub { display: block; font-size: 12px; color: var(--ink-3);
  margin-top: 1px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bewegung-betrag { text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 600; white-space: nowrap; }
.bewegung-betrag.raus { color: var(--rot); }
.bewegung-betrag.rein { color: var(--akzent); }
.bewegung-betrag small { display: block; font-weight: 500; font-size: 11px;
  color: var(--ink-3); margin-top: 2px; }

/* Letzte Zeile weich auslaufen lassen: „hier geht es weiter". */
.maske-unten { -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
  mask-image: linear-gradient(180deg, #000 72%, transparent); }

/* --- Datenquellen: wie frisch ist die grosse Zahl? -------------------- */
.quelle { display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px; }
.quelle:last-child { border-bottom: none; }
.quelle .name { font-weight: 550; }
.quelle .wann { color: var(--ink-3); font-size: 12px; margin-top: 1px; }
.quelle .zahl { font-variant-numeric: tabular-nums; color: var(--ink-2);
  font-size: 12.5px; text-align: right; }

/* --- Hinweis, wenn eine Quelle fehlt ---------------------------------- */
.luecke { --ton: var(--warn);
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px;
  border-radius: 12px; font-size: 13px; color: var(--ink-2);
  background: color-mix(in srgb, var(--ton) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--ton) 26%, transparent); }
.luecke svg { width: 17px; height: 17px; flex: none; color: var(--ton);
  margin-top: 1px; }

/* --- Bank: Kontoauszug gegen Belege ------------------------------------ */
/* Eine Zeile je Buchung, aufklappbar. <details> statt eigenem Aufklapp-
   Skript: funktioniert ohne JavaScript, ist von Haus aus bedienbar und
   überlebt jeden Neustart der Seite. */

.zg-summe { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px;
  font-size: 13.5px; color: var(--ink-2); }
.zg-summe b { color: var(--ink); font-variant-numeric: tabular-nums; }

.zg { border-bottom: 1px solid var(--line); }
.zg:last-of-type { border-bottom: none; }
.zg[open] { background: var(--surface-2); border-radius: var(--radius-s);
  margin: 4px -8px; padding: 0 8px; border-bottom-color: transparent; }

.zg-kopf { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px;
  align-items: center; padding: 11px 0; cursor: pointer; list-style: none; }
.zg-kopf::-webkit-details-marker { display: none; }
.zg-tag { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.zg-mitte { min-width: 0; }
.zg-titel { display: block; font-weight: 550; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-sub { display: block; color: var(--ink-3); font-size: 12px; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zg-rechts { text-align: right; white-space: nowrap; }
.zg-betrag { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.zg-betrag.raus { color: var(--rot); }
.zg-betrag.rein { color: var(--akzent); }
.zg-orig { display: block; font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }

.zg-chip { display: inline-block; font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px;
  border-radius: 6px; background: var(--surface-3); color: var(--ink-2);
  vertical-align: 1px; }
.zg-status { display: block; font-size: 11px; margin-top: 2px; font-weight: 600; }
.zg-status.ok { color: var(--akzent); }
.zg-status.vorschlag { color: var(--warn); }
.zg-status.neutral { color: var(--ink-3); }

.zg-koerper { padding: 2px 0 14px 66px; }
@media (max-width: 560px) { .zg-koerper { padding-left: 0; } }
.zg-zweck { font-size: 12.5px; color: var(--ink-2); margin: 0 0 10px;
  line-height: 1.5; word-break: break-word; }
.zg-teile { border-left: 2px solid var(--line-stark); padding-left: 10px;
  margin-bottom: 10px; }
.zg-teile div { display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--ink-2); padding: 3px 0; }
.zg-teile b { color: var(--ink); font-variant-numeric: tabular-nums; }

.zg-treffer { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; font-size: 13px; padding: 9px 11px;
  border-radius: var(--radius-s); margin-bottom: 10px;
  background: var(--surface-3); }
.zg-treffer.ok { background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.zg-treffer.vorschlag { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.zg-treffer em { color: var(--ink-3); font-style: normal; font-size: 12px; }

.zg-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.winzig { width: auto; min-height: 34px; padding: 7px 13px; font-size: 13px;
  border-radius: 10px; box-shadow: none; }

.zg-kandidaten { margin-top: 10px; display: grid; gap: 6px; }
.zg-kandidat { display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-stark);
  border-radius: var(--radius-s); padding: 9px 12px; color: inherit;
  font: inherit; }
.zg-kandidat:hover { border-color: var(--akzent); }
.zg-kand-name { display: block; font-weight: 550; font-size: 13.5px; }
.zg-kand-sub { display: block; font-size: 12px; color: var(--ink-2);
  font-variant-numeric: tabular-nums; }
.zg-kand-grund { display: block; font-size: 11px; color: var(--ink-3);
  margin-top: 2px; }

/* --- Menü: alle Bereiche ----------------------------------------------- */
/* Die untere Leiste trägt fünf Plätze, die Zeile oben sechs — alles andere
   wäre unauffindbar. Hier steht deshalb wirklich jeder Bereich, mit einem
   Satz dazu, damit man auch nach Wochen noch weiss, was dahintersteckt.
   <dialog> statt eigenem Aufklapp-Skript: Escape schliesst, der Hintergrund
   ist von Haus aus gesperrt, und der Fokus bleibt drin. */

/* Hintergrund nicht mitscrollen, solange das Menü offen ist. */
html:has(.menue[open]) { overflow: hidden; }

.menue-knopf {
  margin-left: 8px; background: none; border: 1px solid var(--line);
  border-radius: 999px; width: 36px; height: 36px; cursor: pointer;
  color: var(--ink-2); display: grid; place-items: center; flex: none;
}
.menue-knopf svg { width: 19px; height: 19px; }
.menue-knopf:hover { color: var(--ink); border-color: var(--line-stark); }
/* Am Handy rückt das Menü an den Rand, die Zeile oben ist dort ohnehin weg. */
@media (max-width: 860px) { /* Hintergrund nicht mitscrollen, solange das Menü offen ist. */
html:has(.menue[open]) { overflow: hidden; }

.menue-knopf { margin-left: auto; } }

.menue[open] {
  display: flex; flex-direction: column;
  border: none; padding: 0; color: var(--ink); background: var(--bg1);
  width: min(400px, 100%); max-width: 100%;
  height: 100dvh; max-height: 100dvh;
  margin: 0 0 0 auto;                 /* rechts andocken statt mittig */
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 50px rgba(0, 0, 0, .28);
  animation: menue-rein .22s cubic-bezier(.22, .8, .3, 1);
}
.menue::backdrop {
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
@keyframes menue-rein { from { transform: translateX(22px); opacity: 0; } }

.menue-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 18px 14px;
  border-bottom: 1px solid var(--line); flex: none;
  font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}
.menue-zu {
  background: none; border: none; cursor: pointer; color: var(--ink-2);
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 999px; margin: -6px -8px -6px 0;
}
.menue-zu svg { width: 18px; height: 18px; }
.menue-zu:hover { background: var(--surface-2); color: var(--ink); }

.menue-liste {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 8px 10px calc(18px + env(safe-area-inset-bottom));
}
.menue-liste a {
  display: grid; grid-template-columns: 38px 1fr auto; gap: 12px;
  align-items: center; padding: 12px 10px; border-radius: var(--radius-s);
  color: var(--ink);
}
.menue-liste a:hover { background: var(--surface-2); }
.menue-liste a.aktiv { background: var(--surface-2); }
.menue-liste a.aktiv .menue-icon {
  background: var(--akzent); color: var(--akzent-ink);
  border-color: transparent;
}
.menue-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid;
  place-items: center; background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line);
}
.menue-icon svg { width: 19px; height: 19px; }
.menue-text { min-width: 0; }
.menue-text b { display: block; font-weight: 600; font-size: 15px; }
.menue-text small {
  display: block; color: var(--ink-3); font-size: 12px; line-height: 1.45;
  margin-top: 2px;
}
.menue-pfeil { color: var(--ink-3); font-size: 20px; }

/* Am Handy von unten statt von rechts — das ist dort der gewohnte Weg. */
@media (max-width: 560px) {
  .menue[open] {
    width: 100%; height: auto; max-height: 88dvh; margin: auto 0 0;
    border-left: none; border-top: 1px solid var(--line);
    border-radius: 22px 22px 0 0;
    animation: menue-hoch .24s cubic-bezier(.22, .8, .3, 1);
  }
  .menue-kopf { padding-top: 16px; }
  @keyframes menue-hoch { from { transform: translateY(26px); opacity: 0; } }
}

/* --- Fixkosten (/fixkosten) -------------------------------------------- */
/* Eine Farbe je Gruppe — für Punkte, Legende und die gestapelten Säulen. */
.fk-ki { background: var(--rosa); }
.fk-software { background: var(--warn); }
.fk-dienst { background: var(--blau); }
.fk-agentur { background: var(--lila); }
.fk-weitere { background: var(--ink-3); }
.fk-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 3px;
  flex: none; margin-right: 7px; vertical-align: 1px; }
.zg-tag .fk-punkt { margin: 0 0 0 4px; }

.fk-leise { color: var(--ink-3); font-size: 12.5px; }
.fk-leise em { color: var(--warn); font-style: normal; font-weight: 600; }
.fk-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0;
  font-size: 12.5px; color: var(--ink-2); }
.fk-legende span { display: inline-flex; align-items: center; }
.fk-legende b { color: var(--ink); font-weight: 600; margin-left: 5px;
  font-variant-numeric: tabular-nums; }

.fk-gruppe-kopf { display: flex; justify-content: space-between;
  align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fk-gruppe-kopf h3 { margin: 0 0 4px; display: flex; align-items: center; }
.fk-gruppe-summe { font-weight: 700; font-variant-numeric: tabular-nums; }
.fk-gruppe-summe small { font-weight: 500; color: var(--ink-3); font-size: 12px; }

/* Eine Zahlung je Zeile: Datum · Betrag · Art. */
.fk .zg-teile b { white-space: nowrap; }
.fk-posten { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px;
  align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 13px; }
.fk-posten:last-of-type { border-bottom: none; }
.fk-posten.nicht { opacity: .62; }
.fk-posten-mitte { min-width: 0; }
.fk-posten-mitte b { font-variant-numeric: tabular-nums; }
/* 16 px Schrift, sonst zoomt iOS beim Antippen ins Feld. */
.fk-wahl, .fk-steuer select { width: auto; max-width: 100%; padding: 6px 8px;
  font-size: 16px; }
@media (max-width: 560px) {
  .fk-posten { grid-template-columns: 1fr auto; }
  .fk-posten > .zg-tag { grid-column: 1 / -1; }
}

/* Steuerung eines Anbieters. Bewusst kein <label>: das ist global in
   Versalien gesetzt (siehe README „Zwei Fallen im Design-System"). */
.fk-steuer { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-top: 14px; }
.fk-steuer select, .fk-steuer input { width: 100%; }
.fk-feld { display: block; font-size: 11.5px; color: var(--ink-3);
  margin: 0 0 4px 2px; }

.fk-pruef { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-2); }
.fk-pruef:last-child { border-bottom: none; }

/* Säulen je Monat, nach Gruppe gestapelt. Die Zahl steht immer darüber —
   kein Diagramm trägt hier allein eine Aussage. */
.fk-saeulen { display: flex; gap: 6px; align-items: flex-end; height: 170px;
  margin: 16px 0 6px; }
.fk-saeule { flex: 1; min-width: 0; height: 100%; display: flex;
  flex-direction: column; justify-content: flex-end; align-items: stretch; }
.fk-saeule .wert { font-size: 10.5px; color: var(--ink-3); text-align: center;
  margin-bottom: 4px; font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fk-stapel { display: flex; flex-direction: column-reverse; height: var(--h, 0%);
  min-height: 3px; border-radius: 7px 7px 3px 3px; overflow: hidden;
  background: var(--surface-3); }
.fk-stapel i { display: block; height: var(--a, 0%); flex: none; }
.fk-saeule.laufend .fk-stapel { opacity: .5; }
.fk-saeule .lbl { font-size: 11px; color: var(--ink-3); text-align: center;
  margin-top: 6px; }

.fk-tabelle { overflow-x: auto; margin-top: 10px; }
.fk-tabelle table { width: 100%; border-collapse: collapse; font-size: 12.5px;
  font-variant-numeric: tabular-nums; }
.fk-tabelle th, .fk-tabelle td { text-align: right; padding: 6px 8px;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.fk-tabelle th:first-child, .fk-tabelle td:first-child { text-align: left; }
.fk-tabelle th { color: var(--ink-3); font-weight: 600; font-size: 11.5px; }

.fk-weiteres { border-bottom: 1px solid var(--line); padding: 4px 0; }
.fk-weiteres:last-child { border-bottom: none; }
.fk-weiteres > summary { cursor: pointer; padding: 10px 0; font-weight: 600;
  font-size: 14px; color: var(--ink-2); }

/* --- KI-Produktion (/ki) ------------------------------------------------- */
.ki-higgsfield { background: var(--orange); }
.ki-knightvision { background: var(--lila); }
.ki-elevenlabs { background: var(--blau); }
.ki-hostinger { background: var(--rosa); }
.ki-topf { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.ki-topf-kopf { font-weight: 600; font-size: 14px; margin-bottom: 8px;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ki-streifen { margin-bottom: 10px; }
.ki-streifen .fuss em { color: var(--warn); font-style: normal; font-weight: 600; }
/* 30 Tage auf Handybreite: schmale Lücken, sonst bleibt für die Säulen
   nichts übrig. */
.ki-tage { gap: 2px; height: 130px; }
.ki-tage .lbl { font-size: 10px; min-height: 13px; }

/* Prognose-Linie (Jan, 9.10.2026): grün = bezahlt, grau gestrichelt =
   Prognose bis Monatsende. Linien im Feld 0..100 mit non-scaling-stroke,
   Beschriftung als HTML darüber — sonst verzerrt die Schrift. */
.ki-legende-linien { font-size: 12px; color: var(--ink-3); display: inline-flex;
  align-items: center; gap: 6px; }
.ki-legende-linien i { display: inline-block; width: 18px; height: 0;
  border-top: 2.5px solid var(--ink-2); margin-left: 8px; }
.ki-legende-linien i.prognose { border-top: 2px dashed var(--ink-3); }
.ki-prognose { position: relative; height: 200px; margin: 22px 8px 0 46px; }
.ki-prognose svg { position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; }
.ki-prognose .raster { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.ki-prognose .heute { stroke: var(--akzent); stroke-width: 1; opacity: .55; }
.ki-prognose .flaeche { fill: url(#kiVerlauf); stroke: none; }
.ki-prognose .bezahlt { fill: none; stroke: var(--akzent); stroke-width: 2.4;
  stroke-linejoin: round; stroke-linecap: round; }
.ki-prognose .prognose { fill: none; stroke: var(--ink-3); stroke-width: 2;
  stroke-dasharray: 6 5; }
.ki-y { position: absolute; left: -46px; width: 38px; text-align: right;
  font-size: 11px; color: var(--ink-3); transform: translateY(-50%);
  font-variant-numeric: tabular-nums; }
.ki-punkt { position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: var(--akzent); border: 2px solid var(--surface);
  box-shadow: 0 0 0 4px var(--akzent-glow); transform: translate(-50%, -50%); }
.ki-pille { position: absolute; z-index: 1; transform: translate(10px, -50%);
  font: 600 12px/1 var(--mono); padding: 5px 8px; border-radius: 6px;
  background: var(--akzent); color: var(--akzent-ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.ki-pille.links { transform: translate(calc(-100% - 10px), -50%); }
.ki-x { position: relative; height: 18px; margin: 8px 8px 0 46px;
  font-size: 11px; color: var(--ink-3); }
.ki-x span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ki-x span.erster { transform: none; }
.ki-x .heute { color: var(--akzent); font-weight: 600; }
.ki-kennzahlen { margin: 16px 0 0; }

/* Je Tool eine Farbe und sein Logo (Jan, 9.10.2026): Karten, Linien und
   Schilder tragen dieselbe Farbe, damit man auf einen Blick sieht, was
   welches Tool kostet. */
.ki-farbe-higgsfield { --farbe: var(--orange); }
.ki-farbe-knightvision { --farbe: var(--lila); }
.ki-farbe-elevenlabs { --farbe: var(--blau); }
.ki-farbe-hostinger { --farbe: var(--rosa); }
.ki-logo { width: 20px; height: 20px; border-radius: 6px; object-fit: cover;
  vertical-align: -5px; margin-right: 7px; background: var(--surface-2);
  box-shadow: 0 0 0 1.5px var(--farbe, var(--line-stark)); }
.ki-logo.gross { width: 30px; height: 30px; border-radius: 9px;
  vertical-align: middle; margin-right: 11px; box-shadow: 0 0 0 2px var(--farbe); }
.ki-karte { border-top: 3px solid var(--farbe);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--farbe) 11%, var(--surface)) 0, var(--surface) 150px); }
.ki-karte .zg-teile { border-left-color: var(--farbe); }
.ki-karte .ki-topf { border-top-color: color-mix(in srgb, var(--farbe) 30%, var(--line)); }
.fk-tabelle th .ki-logo { width: 16px; height: 16px; border-radius: 4px;
  vertical-align: -3px; margin-right: 5px; }
/* Wertschilder stehen rechts neben dem Diagramm — dafür Platz lassen. */
.ki-prognose, .ki-x { margin-right: 84px; }
.ki-prognose .linie-anbieter { fill: none; stroke: var(--farbe); stroke-width: 1.8;
  stroke-linejoin: round; stroke-linecap: round; }
.ki-prognose .prognose-anbieter { fill: none; stroke: var(--farbe); stroke-width: 1.5;
  stroke-dasharray: 4 4; opacity: .85; }
.ki-punkt.klein { width: 8px; height: 8px; background: var(--farbe);
  border-width: 1.5px; box-shadow: none; }
.ki-pille.ende { left: calc(100% + 8px); transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; }
.ki-pille.ende .ki-logo { width: 14px; height: 14px; border-radius: 4px; margin: 0;
  vertical-align: 0; box-shadow: none; }
.ki-pille.ende.gesamt { background: var(--surface-3); color: var(--ink);
  border: 1px dashed var(--akzent); }
.ki-pille.ende.anbieter { background: var(--surface); color: var(--ink);
  border: 1px solid var(--farbe); }

/* Fixkosten: arbeitet ein Freelancer noch für Jan? (9.10.2026) Ein Schalter
   direkt in der Zeile — „nicht mehr" nimmt ihn aus den Fixkosten. */
.fk-arbeitet { grid-column: 2 / -1; justify-self: start; margin-top: -4px;
  display: inline-flex; border: 1px solid var(--line-stark);
  border-radius: 999px; overflow: hidden; }
.fk-arbeitet button { font: 600 11.5px/1 var(--sans); padding: 6px 10px; border: 0;
  background: transparent; color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.fk-arbeitet button.an { background: var(--surface-3); color: var(--ink); }
.fk-arbeitet button.an:first-child { background: color-mix(in srgb, var(--akzent) 22%, var(--surface));
  color: var(--ink); }

/* Lohnausweis: Angaben-Formular */
.la-form label { display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--ink-2); }
/* Klappbox ohne Datumsspalte (Hinweise, Angaben) — sonst landet der Titel
   in der 56px-Spalte und wird abgeschnitten. */
.zg-kopf.ohne-tag { grid-template-columns: 1fr auto; }
.zg-kopf.ohne-tag + .zg-koerper { padding-left: 0; }