/* Finanzseite: Milchglas über einem warmen, unscharfen Raum. Gebucht ist fest, Prognose ist schraffiert.
   Schrift Be Vietnam Pro, selbst gehostet (CSP: nur eigene Adresse). Nur hell: die Seite lebt im Tageslicht. */

@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("schrift/be-vietnam-pro-regular.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("schrift/be-vietnam-pro-medium.woff2") format("woff2"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("schrift/be-vietnam-pro-semibold.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Tinte und Linien, warm aus dem Raum */
  --tinte: #1d1814;
  --tinte-2: #4d4239;
  --tinte-3: #665a4f;
  --linie: rgba(70, 48, 30, 0.12);
  --linie-stark: rgba(70, 48, 30, 0.3);
  --spur: rgba(70, 48, 30, 0.09);

  /* Glas */
  --glas: rgba(255, 251, 246, 0.66);
  --glas-dicht: rgba(255, 252, 248, 0.84);
  --glas-hell: rgba(255, 255, 255, 0.55);
  --glas-kante: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  --glas-schatten: 0 22px 44px -22px rgba(74, 46, 22, 0.5), 0 2px 8px rgba(74, 46, 22, 0.07);
  --unschaerfe: blur(30px) saturate(150%);

  /* Daten: die Farbe folgt der Bedeutung, nie dem Rang */
  --konto: #1d1814;
  --frei: #0c8579;
  --frei-text: #086b62;
  --steuer: #e8561f;
  --reserve: #b97d09;
  --jc: #6f4fc4;
  --minus: #cf3326;
  --warn: #e39a26;
  --warn-text: #8a5300;

  /* Gläubiger: eigene Familie aus dem Raum, damit Orange nie „Steuer“ und „Schuld“ zugleich heißt */
  --g0: #6b4226;
  --g1: #c15a33;
  --g2: #6c8857;
  --g3: #4a5e78;
  --g4: #86507a;

  --rund: 24px;
  --rund-innen: 16px;
  --aus: cubic-bezier(0.16, 1, 0.3, 1);
  --schrift: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: rgba(70, 48, 30, 0.35) transparent; }

body {
  margin: 0;
  min-height: 100vh;
  background: #d9c6ad;
  color: var(--tinte);
  font: 400 15px/1.5 var(--schrift);
  font-feature-settings: "ss01" off;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

/* Der Raum hinter dem Glas: fest stehend, damit beim Scrollen nur das Glas wandert */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("raum.webp") center / cover no-repeat;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(252, 246, 238, 0.16);
}

::selection { background: rgba(12, 133, 121, 0.24); color: var(--tinte); }

[hidden] { display: none !important; }

h1 { font-size: 18px; line-height: 1.2; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 15px; line-height: 1.3; margin: 0; font-weight: 600; letter-spacing: -0.005em; }
h3 { font-size: 13px; line-height: 1.3; margin: 22px 0 8px; font-weight: 600; color: var(--tinte-2); }

.leise { color: var(--tinte-2); }
.zusammen { white-space: nowrap; }
.klein { font-size: 12.5px; }
.minus { color: var(--minus); }
.plus { color: var(--frei-text); }
.warn-text { color: var(--warn-text); font-weight: 600; }
.leer { margin: 0; color: var(--tinte-2); font-size: 13.5px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

button { font: inherit; color: inherit; }
b, strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--frei); outline-offset: 2px; border-radius: 6px; }

/* ---------------------------------------------------------------- Glas */

.glas {
  background: var(--glas);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  border-radius: var(--rund);
  box-shadow: var(--glas-kante), var(--glas-schatten);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas { background: var(--glas-dicht); }
}

.muster { position: absolute; width: 0; height: 0; overflow: hidden; }
.sch-grund { fill: transparent; }
.sch-strich { stroke-width: 2.2; }
.sch-strich.s-tinte { stroke: var(--konto); stroke-opacity: 0.55; }
.sch-strich.s-frei { stroke: var(--frei); }
.sch-strich.s-minus { stroke: var(--minus); }
.sch-strich.s-zukunft { stroke: var(--konto); stroke-opacity: 0.1; stroke-width: 2; }
.sch-strich.s-hell { stroke: #fff; stroke-opacity: 0.5; stroke-width: 2.4; }
.sch-strich.s-jc { stroke: var(--jc); }

/* Schraffur als Fläche in HTML (Balken): diagonal wie im Grafen */
.schraffur-frei, .teil.erw, .seg-fehlt, .zl-minus, .fl-prognose, .fp-schraffur, .fp-schraffur-jc, .fp-fehlt {
  background-color: transparent;
}

/* ---------------------------------------------------------------- Knöpfe */

.randknopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--glas-hell);
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(70, 48, 30, 0.1);
  transition: background-color 0.2s var(--aus), box-shadow 0.2s var(--aus);
}
.randknopf:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(70, 48, 30, 0.14), 0 6px 16px -10px rgba(74, 46, 22, 0.5); }
.randknopf.leicht { background: transparent; box-shadow: none; color: var(--tinte-2); }
.randknopf.leicht:hover { background: var(--glas-hell); color: var(--tinte); }

.textknopf {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--frei-text);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.textknopf:hover { color: var(--tinte); }

.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.marke-zeichen { width: 30px; height: 30px; flex: none; padding: 6px; border-radius: 10px; background: var(--tinte);
  fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.punkt-zeichen { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tinte-3); }
.punkt-zeichen.rot { background: var(--minus); box-shadow: 0 0 0 3px rgba(207, 51, 38, 0.16); }
.punkt-zeichen.orange { background: var(--warn); box-shadow: 0 0 0 3px rgba(227, 154, 38, 0.2); }
.punkt-zeichen.frisch { background: var(--frei); box-shadow: 0 0 0 3px rgba(12, 133, 121, 0.18); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 6px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--tinte-2);
  white-space: nowrap;
  vertical-align: 1px;
}
.chip.ernst { background: rgba(227, 154, 38, 0.2); color: var(--warn-text); }

.farbpunkt { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: 0; }
.fp-tinte { background: var(--konto); }
.fp-frei { background: var(--frei); }
.fp-steuer { background: var(--steuer); }
.fp-reserve { background: var(--reserve); }
.fp-jc { background: var(--jc); }
.fp-fehlt { background-image: repeating-linear-gradient(135deg, var(--minus) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--minus); }
.fp-schraffur { background-image: repeating-linear-gradient(135deg, var(--steuer) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--steuer); }
.fp-schraffur-jc { background-image: repeating-linear-gradient(135deg, var(--jc) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--jc); }
.sw-0 { background: var(--g0); } .sw-1 { background: var(--g1); } .sw-2 { background: var(--g2); }
.sw-3 { background: var(--g3); } .sw-4 { background: var(--g4); }

/* ---------------------------------------------------------------- Laden und Anmeldung */

.laden { text-align: center; color: var(--tinte-2); margin: 40vh 16px 0; }

.anmeldung { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.anmeldekarte { width: min(400px, 100%); display: grid; gap: 6px; padding: 30px 28px 28px; }
.anmelde-marke { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.anmelde-marke h1 { font-size: 22px; }
/* Nach dem Notfallcode bleiben nur Marke und Hinweis mit „Weiter“ stehen (app.js setzt die Klasse). */
.notfall-weiter { display: none; }
.anmeldekarte.notfall-modus > :not(.anmelde-marke):not(.notfall-weiter) { display: none; }
.anmeldekarte.notfall-modus > .notfall-weiter { display: block; }
.anmeldekarte label { font-size: 13px; font-weight: 500; color: var(--tinte-2); margin-top: 10px; }
.anmeldekarte input[type="password"],
.anmeldekarte input[type="text"] {
  font: inherit;
  font-size: 16px;
  color: var(--tinte);
  background: rgba(255, 255, 255, 0.78);
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(70, 48, 30, 0.16);
  border-radius: 14px;
  padding: 12px 14px;
  width: 100%;
  caret-color: var(--frei);
  transition: box-shadow 0.2s var(--aus);
}
.anmeldekarte input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--frei), 0 0 0 4px rgba(12, 133, 121, 0.14); }
.anmeldekarte #code { letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.anmeldekarte .textknopf { justify-self: start; font-size: 12.5px; }
.anmeldekarte label.haken { display: flex; gap: 10px; align-items: center; color: var(--tinte); font-size: 14px; font-weight: 400; }
.anmeldekarte label.haken input { width: 18px; height: 18px; margin: 0; accent-color: var(--frei); }
.anmeldekarte p { margin: 0; }
.anmeldekarte .leise { font-size: 13.5px; }
.fehler { color: var(--minus); font-weight: 600; font-size: 13.5px; }
.hauptknopf {
  margin-top: 12px;
  background: var(--tinte);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 13px 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(29, 24, 20, 0.7);
  transition: transform 0.2s var(--aus), box-shadow 0.2s var(--aus);
}
.hauptknopf:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(29, 24, 20, 0.75); }
.hauptknopf:disabled { opacity: 0.6; cursor: progress; transform: none; }

/* ---------------------------------------------------------------- Rahmen */

.app { max-width: 1480px; margin: 0 auto; padding: 16px 28px 48px; }

.alarm {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: flex;
  gap: 10px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 12px;
  background: var(--minus);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 14px 30px -14px rgba(207, 51, 38, 0.8);
}
.alarm .punkt-zeichen { background: #fff; box-shadow: none; }

.kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 10px 9px 12px;
  border-radius: 999px;
}
.kopf-marke { display: flex; align-items: center; gap: 10px; flex: none; }
.stand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 auto 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--glas-hell);
  color: var(--tinte-2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.stand b { color: var(--tinte); font-weight: 600; }
.stand .trenner { color: var(--tinte-3); }
.stand .export { color: var(--tinte-3); margin-left: 6px; }
.kopf-knoepfe { display: flex; gap: 6px; flex: none; }

.auffrischen-hinweis { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--tinte-2); }
.auffrischen-hinweis::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-right: 8px; }

.notfall { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 14px 18px; font-size: 14px; font-weight: 500; border-radius: var(--rund-innen); }
.notfall .punkt-zeichen { margin-top: 6px; }
.notfall code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9em; background: rgba(255, 255, 255, 0.7); padding: 1px 6px; border-radius: 6px; }

.inhalt { margin-top: 18px; }
.meldung { margin: 0 0 18px; padding: 14px 18px; }

/* Reiterwechsel: die Scheiben gleiten nacheinander scharf ins Bild. Animiert wird jede Scheibe selbst, nie ihr
   Behälter: Deckkraft oder Filter am Behälter würden der Scheibe den Raum hinter dem Glas nehmen. */
.ansicht .glas { animation: einblenden 0.6s var(--aus) both; }
.lage > .glas:nth-child(2), .toepfe > .glas:nth-child(2) { animation-delay: 0.05s; }
.lage > .glas:nth-child(3), .toepfe > .glas:nth-child(3) { animation-delay: 0.1s; }
.lage > .glas:nth-child(4) { animation-delay: 0.15s; }
.spalte-haupt > .strahl-karte { animation-delay: 0.08s; }
@keyframes einblenden {
  from { opacity: 0.3; transform: translateY(10px) scale(0.99); filter: blur(5px); }
  to { opacity: 1; transform: none; filter: none; }
}

.karten-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 4px; }

.gross-wert {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gross-wert.minus { color: var(--minus); }
.gross-wert.gut, .gross-wert.plus { color: var(--frei-text); }
.farbe-steuer { color: #b8410f; }
.farbe-reserve { color: #8a5d00; }
.farbe-jc { color: var(--jc); }
.unter-wert { margin: 2px 0 0; font-size: 13px; color: var(--tinte-2); }

/* ---------------------------------------------------------------- Überblick */

.raster {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}
.spalte-haupt, .lage { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.graf-karte { padding: 24px 26px 18px; }
.strahl-karte { padding: 22px 24px; }
.kritisch { padding: 20px 22px; }

/* Graf */
.graf-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.frei-bez { font-size: 14px; font-weight: 500; color: var(--tinte-2); }
.frei-wert {
  margin: 4px 0 0;
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.frei-wert.minus { color: var(--minus); }
.frei-unter { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 8px 0 0; font-size: 13px; color: var(--tinte-2); }
.frei-unter b { color: var(--tinte); font-variant-numeric: tabular-nums; }
.frei-unter .trenner { color: var(--tinte-3); }

.linien { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 560px; }
.linie-knopf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 7px 13px 7px 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tinte-3);
  cursor: pointer;
  min-height: 34px;
  box-shadow: inset 0 0 0 1px rgba(70, 48, 30, 0.12);
  transition: background-color 0.2s var(--aus), color 0.2s var(--aus), box-shadow 0.2s var(--aus);
}
.linie-knopf[aria-pressed="true"] { background: #fff; color: var(--tinte); box-shadow: 0 6px 14px -8px rgba(74, 46, 22, 0.55); }
.linie-knopf:hover { color: var(--tinte); }
.linie-knopf[aria-pressed="false"] .schluessel { opacity: 0.35; }
.schluessel { display: inline-block; width: 16px; height: 3px; border-radius: 2px; background: var(--tinte-3); }
.schluessel.s-konto { background: var(--konto); }
.schluessel.s-frei { background: var(--frei); }
.schluessel.s-steuer { background: var(--steuer); }
.schluessel.s-reserve { background: var(--reserve); }
.schluessel.s-jc { background: var(--jc); }

.graf { position: relative; margin-top: 10px; }
.graf svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.leer-text { fill: var(--tinte-2); font-size: 13px; }
.gitter { stroke: var(--linie); stroke-width: 1; }
.null-linie { stroke: var(--linie-stark); stroke-width: 1.3; }
.achse-text { fill: var(--tinte-3); font-size: 11.5px; font-variant-numeric: tabular-nums; font-family: var(--schrift); }
.heute-linie { stroke: var(--tinte); stroke-opacity: 0.45; stroke-width: 1.2; stroke-dasharray: 2 4; }
.heute-pille { fill: var(--tinte); }
.heute-text { fill: #fff; font-size: 11px; font-weight: 600; font-family: var(--schrift); }
.minus-zone { fill: var(--minus); fill-opacity: 0.035; }
.minus-flaeche { fill: var(--minus); fill-opacity: 0.16; }
.flaeche-ist { fill: var(--konto); fill-opacity: 0.075; }
.flaeche-prognose { fill: url(#sch-tinte); opacity: 0.4; }
.kurve { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.kurve.prognose { stroke-dasharray: 5 6; }
.k-konto { stroke: var(--konto); stroke-width: 3; }
.k-frei { stroke: var(--frei); }
.k-steuer { stroke: var(--steuer); }
.k-reserve { stroke: var(--reserve); }
.k-jc { stroke: var(--jc); }
.einzeichnen { stroke-dasharray: 1; stroke-dashoffset: 1; animation: einzeichnen 1.2s var(--aus) 0.15s forwards; }
@keyframes einzeichnen { to { stroke-dashoffset: 0; } }
.punkt { stroke: #fff; stroke-width: 2.5; }
.p-konto { fill: var(--konto); }
.p-frei { fill: var(--frei); }
.p-steuer { fill: var(--steuer); }
.p-reserve { fill: var(--reserve); }
.p-jc { fill: var(--jc); }
.tief-hof { fill: var(--minus); fill-opacity: 0.18; }
.marke-pille { fill: #fff; fill-opacity: 0.92; stroke: rgba(70, 48, 30, 0.12); }
.marke-text { fill: var(--tinte); font-size: 12px; font-weight: 600; font-family: var(--schrift); font-variant-numeric: tabular-nums; }
.fadenkreuz { stroke: var(--tinte); stroke-opacity: 0.4; stroke-width: 1; }
.treffer { fill: transparent; cursor: crosshair; outline: none; }
.treffer:focus-visible { stroke: var(--frei); stroke-width: 2; }

.ablesung {
  background: rgba(255, 253, 250, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: var(--rund-innen);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 18px 36px -18px rgba(74, 46, 22, 0.55), inset 0 0 0 1px rgba(70, 48, 30, 0.08);
}
.ablesung .ab-kopf { font-weight: 600; margin-bottom: 6px; }
.ablesung .ab-kopf span { font-weight: 400; color: var(--tinte-2); }
.ablesung ul { list-style: none; margin: 0; padding: 0; }
.ablesung .ab-werte li { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.ablesung .ab-werte b { font-variant-numeric: tabular-nums; min-width: 6.5em; text-align: right; }
.ablesung .ab-werte .name { color: var(--tinte-2); }
.ablesung .ab-buchungen { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linie); }
.ablesung .ab-buchungen .titel { color: var(--tinte-2); margin-bottom: 2px; }
.ablesung .ab-buchungen li { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.ablesung .ab-buchungen .betrag { font-variant-numeric: tabular-nums; text-align: right; min-width: 6.5em; }
.ablesung .leer { font-size: 13px; }
@media (min-width: 761px) {
  .ablesung { position: absolute; top: 0; left: 0; z-index: 3; width: 300px; pointer-events: none; }
}
@media (max-width: 760px) { .ablesung { margin-top: 10px; } }

.graf-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; font-size: 12.5px; color: var(--tinte-2); }
.leg { display: inline-flex; align-items: center; gap: 7px; }
.leg i { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.leg-fest { background: rgba(29, 24, 20, 0.16); box-shadow: inset 0 2px 0 var(--konto); }
.leg-schraffur { background-image: repeating-linear-gradient(135deg, rgba(29, 24, 20, 0.5) 0 1.5px, transparent 1.5px 5px); box-shadow: inset 0 2px 0 rgba(29, 24, 20, 0.6); }
.leg-minus { background: rgba(207, 51, 38, 0.22); }
#graf-zeitraum { margin-left: auto; }

.tabelle summary, .alle summary, .rechnung summary, .weitere summary {
  cursor: pointer;
  color: var(--tinte-2);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--glas-hell);
  box-shadow: inset 0 0 0 1px rgba(70, 48, 30, 0.1);
}
.tabelle summary::-webkit-details-marker, .alle summary::-webkit-details-marker, .rechnung summary::-webkit-details-marker,
.weitere summary::-webkit-details-marker { display: none; }
.tabelle summary::after, .alle summary::after, .rechnung summary::after, .weitere summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
details[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.tabelle summary:hover, .alle summary:hover, .rechnung summary:hover, .weitere summary:hover { background: #fff; color: var(--tinte); }
.graf-tabelle { flex-basis: 100%; }
.graf-tabelle:not([open]) { flex-basis: auto; }

.rollbar { overflow-x: auto; max-width: 100%; margin-top: 10px; }
.tabelle table { border-collapse: collapse; width: 100%; font-size: 13px; }
.tabelle th, .tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { color: var(--tinte-2); font-weight: 500; font-size: 12px; white-space: nowrap; }
.tabelle td.zahl-zelle, .tabelle th.zahl-zelle { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle td.buchungen { min-width: 16em; overflow-wrap: normal; }
.tabelle tr.heute td { background: rgba(255, 255, 255, 0.6); font-weight: 600; }
.tabelle td.betont { font-weight: 600; }

/* Aufteilung des Qonto-Stands */
.aufteilung { padding: 20px 22px; }
.aufteil-balken { position: relative; height: 18px; border-radius: 999px; background: var(--spur); overflow: hidden; margin: 14px 0 14px; }
.aufteil-balken .seg, .aufteil-balken .seg-fehlt { position: absolute; top: 0; bottom: 0; box-shadow: inset -2px 0 0 rgba(255, 250, 244, 0.9); }
.seg-steuer { background: var(--steuer); }
.seg-reserve { background: var(--reserve); }
.seg-jc { background: var(--jc); }
.seg-frei { background: var(--frei); }
.seg-fehlt { background-image: repeating-linear-gradient(135deg, var(--minus) 0 2px, rgba(207, 51, 38, 0.12) 2px 6px); }
.seg-marke { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--tinte); }
.legende-werte { margin: 0; display: grid; gap: 2px; }
.legende-werte > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; padding: 3px 0; }
.legende-werte dt { display: flex; align-items: center; color: var(--tinte-2); }
.legende-werte dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.legende-werte .fehlt dt, .legende-werte .fehlt dd { color: var(--minus); font-weight: 600; }
.legende-werte .frei-zeile dd { color: var(--frei-text); }
.neben-konto { display: flex; justify-content: space-between; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--linie); font-size: 13px; color: var(--tinte-2); }
.neben-konto b { color: var(--tinte); font-variant-numeric: tabular-nums; }

/* Engpass */
.engpass { padding: 20px 22px; }
.eng-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.eng-bez { font-size: 13px; font-weight: 500; color: var(--tinte-2); }
.eng-feld .gross-wert { font-size: 28px; margin-top: 4px; }
.eng-unter { margin: 2px 0 0; font-size: 12.5px; color: var(--tinte-2); }
.zeitleiste { position: relative; height: 12px; border-radius: 999px; background: var(--spur); overflow: hidden; margin-top: 18px; }
.zeitleiste i { position: absolute; top: 0; bottom: 0; }
.zl-gut { background: var(--frei); }
.zl-minus { background-image: repeating-linear-gradient(135deg, var(--minus) 0 2px, rgba(207, 51, 38, 0.12) 2px 6px); }
.zl-tief { width: 4px; margin-left: -2px; background: var(--tinte); border-radius: 2px; }
.zl-skala { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--tinte-3); font-variant-numeric: tabular-nums; }

/* Meilenstein */
.meilenstein { padding: 20px 22px; }
.ms-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.ring-box { position: relative; display: inline-grid; place-items: center; }
.ring { display: block; }
.ring-spur { fill: none; stroke: var(--spur); }
.ring-wert { fill: none; stroke: var(--frei); stroke-linecap: round; transition: stroke-dasharray 0.8s var(--aus); }
.k-reserve .ring-wert { stroke: var(--reserve); }
.ring-zahl { position: absolute; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ring-box.gross .ring-zahl { font-size: 24px; }
.ring-zahl small { font-size: 0.55em; font-weight: 500; margin-left: 1px; color: var(--tinte-2); }
.ms-titel { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; }
.ms-titel .stufe { display: inline-block; background: var(--tinte); color: #fff; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; margin-right: 8px; vertical-align: 2px; }
.naechster { margin-top: 14px; }
.naechster-bez { font-size: 12px; font-weight: 500; color: var(--tinte-2); }
.naechster .schritte { margin-top: 4px; }
.naechster .schritte li { border-top: 0; padding-bottom: 4px; }
.weitere { margin-top: 6px; }
.weitere .schritte { counter-reset: schritt 1; margin-top: 8px; }
.ms-satz { margin: 3px 0 0; font-size: 12.5px; color: var(--tinte-2); }
.schritte { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: schritt; }
.schritte li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--linie); font-size: 13px; counter-increment: schritt; }
.schritte li::before { content: counter(schritt); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--glas-hell); box-shadow: inset 0 0 0 1px rgba(70, 48, 30, 0.14); font-size: 11px; font-weight: 600; color: var(--tinte-2); }
.s-wann { font-size: 12px; color: var(--tinte-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 14-Tage-Strahl */
.summen-zeile { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 13px; color: var(--tinte-2); }
.summen-zeile .summe { display: inline-flex; align-items: center; white-space: nowrap; }
.summen-zeile .summe b { margin-left: 5px; color: var(--tinte); font-variant-numeric: tabular-nums; }
.summen-zeile .summe b.minus { color: var(--minus); }
.strahl { margin-top: 12px; min-height: 150px; }
.strahl svg { display: block; width: 100%; height: auto; overflow: visible; }
.strahl-null { stroke: var(--linie-stark); stroke-width: 1; }
.strahl-tag, .wf-tag { cursor: pointer; outline: none; }
.strahl-feld { fill: transparent; transition: fill 0.2s var(--aus); }
.strahl-tag:hover .strahl-feld, .strahl-tag.gewaehlt .strahl-feld,
.wf-tag:hover .strahl-feld, .wf-tag.gewaehlt .strahl-feld { fill: rgba(255, 255, 255, 0.62); }
.strahl-tag:focus-visible .strahl-feld, .wf-tag:focus-visible .strahl-feld { stroke: var(--frei); stroke-width: 2; }
.strahl-ein { fill: url(#sch-frei); stroke: var(--frei); stroke-width: 1.6; }
.strahl-aus { fill: url(#sch-tinte); stroke: var(--konto); stroke-width: 1.6; }
.strahl-rueck { fill: var(--minus); }
.strahl-wtag { fill: var(--tinte-3); font-size: 11px; font-family: var(--schrift); }
.strahl-datum { fill: var(--tinte-2); font-size: 12.5px; font-weight: 600; font-family: var(--schrift); font-variant-numeric: tabular-nums; }
.strahl-tag.heute .strahl-wtag, .strahl-tag.heute .strahl-datum,
.wf-tag.heute .strahl-wtag, .wf-tag.heute .strahl-datum { fill: var(--tinte); font-weight: 600; }
.strahl-ablesung { margin-top: 10px; padding: 12px 14px; border-radius: var(--rund-innen); background: var(--glas-hell); font-size: 13px; }
.strahl-ablesung .ab-tag { margin: 0 0 4px; font-weight: 600; }
.strahl-ablesung ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.strahl-ablesung li { display: flex; align-items: baseline; gap: 8px; }
.strahl-ablesung .name { flex: 1; min-width: 0; color: var(--tinte-2); }
.strahl-ablesung li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.strahl-ablesung .chip { margin-left: 0; }
.strahl-ablesung .alltag .name { color: var(--tinte-3); }

/* Wasserfall: heute fest, jeder weitere Tag eine schraffierte Stufe vom Stand des Vortags */
.wasserfall-karte { padding: 22px 24px; }
.wasserfall { margin-top: 10px; min-height: 260px; }
.wasserfall svg { display: block; overflow: visible; }
.wf-start { fill: var(--konto); }
.wf-ein { fill: url(#sch-frei); stroke: var(--frei); stroke-width: 1.6; }
.wf-aus { fill: url(#sch-tinte); stroke: var(--konto); stroke-width: 1.6; }
.wf-minus { fill: url(#sch-minus); stroke: var(--minus); stroke-width: 1.6; }
.wf-rueck { fill: var(--minus); }
.wf-verbinder { stroke: var(--konto); stroke-opacity: 0.35; stroke-width: 1.2; stroke-dasharray: 3 3; }
.wf-betrag { fill: var(--tinte); font-size: 11.5px; font-weight: 600; font-family: var(--schrift); font-variant-numeric: tabular-nums; }
.wf-betrag.ab { fill: var(--tinte-2); }
.wf-minus-pille { fill: var(--minus); }
.wf-minus-text { fill: #fff; font-size: 11px; font-weight: 600; font-family: var(--schrift); }

/* Kritisch */
.zaehler-zeile { display: flex; gap: 6px; margin: 0; }
.zaehl-pille { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.zaehl-pille b { font-size: 13px; }
.zaehl-pille.rot { background: var(--minus); color: #fff; }
.zaehl-pille.orange { background: var(--warn); color: #2b1a00; }
.kritisch-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.kritisch-liste li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 1px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--linie); }
.kritisch-liste li:first-child { border-top: 0; }
.kritisch-liste li.nichts { display: block; }
.kritisch-liste .punkt-zeichen { margin-top: 6px; }
.kritisch-liste .titel { font-size: 14px; font-weight: 500; line-height: 1.35; }
.kritisch-liste .betrag { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kritisch-liste .satz { grid-column: 2 / 4; margin: 0; font-size: 12.5px; color: var(--tinte-2); }
.kritisch-liste li.rot .satz { color: #a3271c; }
#kritisch-alle { margin-top: 4px; }
.hinweise-block h3 { margin-top: 18px; }
.hinweise { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--tinte-2); }
.hinweise li { padding: 2px 0; }

/* ---------------------------------------------------------------- Geldflüsse */

.fluesse { padding: 24px 26px; margin-top: 18px; }
.fluesse-liste { columns: 2 420px; column-gap: 40px; }
.fluss-tag { break-inside: avoid; }
.fluss-tag { margin-top: 18px; }
.fluss-datum { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13px; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.fluss-datum .tag-summe { margin-left: auto; padding-right: 30px; color: var(--tinte); font-weight: 600; }
.fluss-datum .tag-summe.plus { color: var(--frei-text); }
.fluss-datum .wt { display: inline-grid; place-items: center; min-width: 30px; height: 22px; border-radius: 999px; background: var(--tinte); color: #fff; font-size: 11px; }
.fluss { border-top: 1px solid var(--linie); }
.fluss-tag .fluss:first-of-type { border-top: 0; }
.fluss summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 96px minmax(72px, auto) 12px;
  gap: 12px;
  align-items: center;
  padding: 10px 6px;
  border-radius: 12px;
  font-size: 14px;
  transition: background-color 0.2s var(--aus);
}
.fluss summary:hover { background: rgba(255, 255, 255, 0.5); }
.fluss summary::-webkit-details-marker { display: none; }
.fluss summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--tinte-3); border-bottom: 1.5px solid var(--tinte-3); transform: translateY(-2px) rotate(45deg); justify-self: end; }
.fluss[open] summary::after { transform: translateY(1px) rotate(225deg); }
.fluss-marke { width: 10px; height: 10px; border-radius: 3px; background: var(--konto); }
.fluss.rein .fluss-marke { background: var(--frei); }
.fluss.rueck .fluss-marke { background: var(--minus); }
.fluss .betrag { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }
.betrag-balken { display: block; height: 8px; border-radius: 999px; background: var(--spur); overflow: hidden; }
.betrag-balken i { display: block; height: 100%; border-radius: 999px;
  background-image: repeating-linear-gradient(135deg, var(--konto) 0 1.5px, rgba(29, 24, 20, 0.12) 1.5px 4.5px); }
.fluss.rein .betrag-balken i { background-image: repeating-linear-gradient(135deg, var(--frei) 0 1.5px, rgba(12, 133, 121, 0.14) 1.5px 4.5px); }
.fluss.rueck .betrag-balken i { background: var(--minus); }
.fluss .mehr { padding: 0 6px 12px 28px; font-size: 13px; color: var(--tinte-2); }
.fluss .mehr p { margin: 2px 0 0; }

/* ---------------------------------------------------------------- Reiterleiste */

/* Am Rechner eine eigene Zeile unter dem Kopf, die beim Scrollen oben kleben bleibt: sie verdeckt im ersten Blick
   nichts. Auf dem Handy schwebt sie unten in Daumennähe. */
.reiter {
  position: sticky;
  top: 12px;
  z-index: 30;
  display: flex;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 14px auto 0;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 252, 248, 0.78);
}
.reiter a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--tinte-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s var(--aus), color 0.25s var(--aus), box-shadow 0.25s var(--aus);
}
.reiter a:hover { background: rgba(255, 255, 255, 0.6); color: var(--tinte); }
.reiter a[aria-current="page"] { background: var(--tinte); color: #fff; box-shadow: 0 10px 20px -10px rgba(29, 24, 20, 0.7); }
.zaehler { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--steuer); color: #fff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Teil 2 */

.teil2-karte { padding: 24px 26px; }
.teil2-karte + .teil2-karte { margin-top: 18px; }
.kennzahlen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.kennzahlen { gap: 12px 28px; }
.kennzahl { display: grid; gap: 1px; min-width: 0; }
.kz-bez { font-size: 12px; color: var(--tinte-2); }
.kennzahl b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kennzahl b.schraffiert-text::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 3px; vertical-align: -1px;
  background-image: repeating-linear-gradient(135deg, var(--frei) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--frei); }
.satz { font-size: 13px; color: var(--tinte-2); margin: 12px 0 0; }

/* Umsatz */
.tracker-oben { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 28px; flex-wrap: wrap; margin-top: 8px; }
.k-tracker .gross-wert { font-size: clamp(36px, 3.6vw, 50px); }
.k-tracker .kennzahlen { margin-top: 0; }
.tracker-balken { margin: 10px 0 4px; }
.klammer-zeile { position: relative; height: 30px; }
.klammer { position: absolute; bottom: 4px; height: 9px; border: 1.5px solid var(--tinte-3); border-bottom: 0; border-radius: 6px 6px 0 0; }
.klammer span { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); font-size: 12.5px; font-weight: 500; color: var(--tinte); white-space: nowrap; font-variant-numeric: tabular-nums; }
.spur { position: relative; height: 44px; background: var(--spur); border-radius: 14px; overflow: hidden; }
.spur .teil { position: absolute; top: 0; bottom: 0; }
.spur .ist { background: var(--frei); border-radius: 0 10px 10px 0; z-index: 1; }
.spur .erw { background-image: repeating-linear-gradient(135deg, var(--frei) 0 2px, rgba(12, 133, 121, 0.1) 2px 7px); border-radius: 0 10px 10px 0; }
.spur .strich { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2; }
.strich.gelb { background: var(--warn); }
.strich.rot { background: var(--minus); }
.marken { position: relative; height: 24px; font-size: 12px; color: var(--tinte-2); }
.marken .marke { position: absolute; top: 5px; transform: translateX(-100%); padding-right: 6px; white-space: nowrap; }
.marken .marke::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.marken .marke.gelb::before { background: var(--warn); }
.marken .marke.rot::before { background: var(--minus); }
.lage-satz { font-size: 14px; margin: 10px 0 16px; }
.lage-satz.vorschau { color: var(--tinte-2); }
.lage-chip { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.lage-chip.gut { background: rgba(12, 133, 121, 0.14); color: var(--frei-text); }
.lage-chip.ernst { background: rgba(227, 154, 38, 0.22); color: var(--warn-text); }
.lage-chip.kritisch { background: var(--minus); color: #fff; }
.einordnung-status { font-size: 14px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--rund-innen); background: var(--glas-hell); }
.einordnung-status.eingerechnet { color: var(--frei-text); }
.einordnung-status.zeitab { color: var(--warn-text); }
.einordnung-status.wartet::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--frei); animation: puls 1.2s ease-in-out infinite; }
@keyframes puls { 50% { opacity: 0.3; } }
.darlehen-hinweis { color: var(--warn-text); }

.warten {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.62);
  border: 0;
  border-radius: var(--rund-innen);
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(232, 86, 31, 0.35);
  transition: background-color 0.2s var(--aus);
}
.warten:hover { background: #fff; }
.warten::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--tinte-2); border-bottom: 1.5px solid var(--tinte-2); transform: translateY(-2px) rotate(45deg); }
.warten[aria-expanded="true"]::after { transform: translateY(1px) rotate(225deg); }
.warten .anzahl { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--steuer); color: #fff; font-weight: 600; font-size: 13.5px; }
.warten[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.warten.fertig { cursor: default; box-shadow: inset 0 0 0 1px rgba(12, 133, 121, 0.3); }
.warten.fertig::after { display: none; }
.warten.fertig .anzahl { background: var(--frei); }

.eingaenge.offene { background: rgba(255, 255, 255, 0.42); border-radius: 0 0 var(--rund-innen) var(--rund-innen); padding: 0 16px; }
.eingang { padding: 14px 0; border-bottom: 1px solid var(--linie); }
.eingang:last-child { border-bottom: 0; }
.eingang.markiert { background: rgba(12, 133, 121, 0.06); box-shadow: 0 0 0 16px rgba(12, 133, 121, 0.06); clip-path: inset(0 -16px); }
.ein-kopf { display: grid; grid-template-columns: 22px 54px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 14px; }
.ein-kopf input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--frei); }
.ein-kopf .datum { color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.ein-kopf .absender { font-weight: 600; }
.ein-kopf .betrag { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ein-kopf .zweck { font-size: 12px; color: var(--tinte-3); overflow-wrap: anywhere; }
.zaehlt-chip { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 0 7px; margin-left: 6px; background: rgba(255, 255, 255, 0.7); color: var(--tinte-2); }
.zaehlt-chip.ja { color: var(--frei-text); background: rgba(12, 133, 121, 0.12); }
.kats { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 86px; }
.kat {
  border: 0;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(70, 48, 30, 0.16);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-height: 32px;
  transition: background-color 0.2s var(--aus), box-shadow 0.2s var(--aus);
}
.kat:hover { background: #fff; }
.kat.vor { box-shadow: inset 0 0 0 2px var(--frei); outline: 1px dashed rgba(12, 133, 121, 0.6); outline-offset: 2px; }
.kat.an { background: var(--tinte); color: #fff; box-shadow: none; }
.kat:disabled { opacity: 0.5; cursor: wait; }
.notiz-feld { display: block; width: calc(100% - 86px); max-width: 440px; margin: 8px 0 0 86px; font: inherit; font-size: 13px; padding: 8px 12px;
  border: 0; box-shadow: inset 0 0 0 1px rgba(70, 48, 30, 0.18); border-radius: 12px; background: rgba(255, 255, 255, 0.78); color: var(--tinte); caret-color: var(--frei); }
.notiz-feld::placeholder { color: var(--tinte-3); }
.notiz-feld:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--frei); }
.darlehen-satz { margin: 6px 0 0 86px; font-size: 13px; color: var(--warn-text); font-weight: 600; }
.ein-stand { margin: 4px 0 0 86px; font-size: 13px; color: var(--tinte-2); }
.eingang.voll .ein-kopf { grid-template-columns: 54px minmax(0, 1fr) auto; }
.eingang.voll .ein-stand, .eingang.voll .kats, .eingang.voll .notiz-feld, .eingang.voll .darlehen-satz { margin-left: 64px; }
.alle { margin-top: 16px; }
.alle[open] > summary { margin-bottom: 4px; }

.sammel {
  position: sticky;
  bottom: 16px;
  z-index: 5;
  margin-top: 10px;
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 18px;
  background: rgba(255, 252, 248, 0.9);
  -webkit-backdrop-filter: var(--unschaerfe);
  backdrop-filter: var(--unschaerfe);
  box-shadow: inset 0 0 0 2px var(--frei), 0 18px 36px -18px rgba(74, 46, 22, 0.6);
}
.sammel p { margin: 0; }
.sammel-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; }
.sammel .kats, .sammel .notiz-feld { margin-left: 0; }

/* Töpfe */
.toepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.toepfe .teil2-karte + .teil2-karte { margin-top: 0; }
.toepfe .gross-wert { font-size: 38px; margin-top: 4px; }
.toepfe .karten-kopf { margin-bottom: 10px; }
.leiste-block { margin-top: 18px; }
.fortschritt-leiste { position: relative; height: 14px; border-radius: 999px; background: var(--spur); overflow: hidden; }
.fortschritt-leiste i { position: absolute; top: 0; bottom: 0; }
.fl-ist { background: var(--steuer); }
.fl-prognose { background-image: repeating-linear-gradient(135deg, var(--steuer) 0 2px, rgba(232, 86, 31, 0.1) 2px 6px); }
.leiste-legende { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 10px; font-size: 13px; color: var(--tinte-2); }
.leiste-legende span { display: inline-flex; align-items: center; }
.leiste-legende b { margin-left: 5px; color: var(--tinte); font-variant-numeric: tabular-nums; }
.reserve-leiste { position: relative; height: 14px; border-radius: 999px; background: var(--spur); overflow: hidden; }
.reserve-leiste i { position: absolute; top: 0; bottom: 0; }
.rl-wert { background: var(--reserve); }
.rl-strich { width: 2px; margin-left: -1px; background: rgba(255, 250, 244, 0.95); }
.reserve-marken { position: relative; height: 22px; font-size: 11.5px; color: var(--tinte-3); }
.reserve-marken span { position: absolute; top: 5px; transform: translateX(-100%); padding-right: 4px; white-space: nowrap; }
.angegriffen { display: flex; gap: 10px; align-items: center; margin: 14px 0 0; font-weight: 600; font-size: 13.5px; color: var(--minus); }
.jc-kurz { list-style: none; margin: 14px 0 6px; padding: 0; }
.jc-kurz li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linie); font-size: 13.5px; }
.jc-kurz b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Schulden */
.schulden-oben { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px 28px; flex-wrap: wrap; margin-top: 8px; }
.k-schulden .gross-wert { font-size: clamp(36px, 3.6vw, 50px); }
.legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--tinte-2); }
.legende-eintrag { display: inline-flex; align-items: center; }
.flaeche { margin-top: 14px; }
.flaeche svg { display: block; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.schicht { stroke: rgba(255, 250, 244, 0.9); stroke-width: 1.5; stroke-linejoin: round; }
.f-0 { fill: var(--g0); } .f-1 { fill: var(--g1); } .f-2 { fill: var(--g2); }
.f-3 { fill: var(--g3); } .f-4 { fill: var(--g4); }
.zukunft-schraffur { fill: url(#sch-hell); pointer-events: none; }
.flaeche-ablesung { min-height: 1.5em; margin: 8px 0 0; font-size: 13px; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.kurzfristig ul { list-style: none; margin: 0; padding: 0; }
.kurzfristig li { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
.kurzfristig .steckt { flex-basis: 100%; }
.kurzfristig .betrag { font-variant-numeric: tabular-nums; }
.glaeubiger { font-weight: 600; }
.zellenhinweis { display: block; min-width: 14em; }
tr.ungeklaert td { background: rgba(227, 154, 38, 0.08); }
.schulden-tabelle { min-width: 720px; }
.schulden-tabelle td.klein { min-width: 13em; }

/* Jobcenter */
.kopf-info { font-size: 12.5px; color: var(--tinte-2); background: var(--glas-hell); border-radius: 999px; padding: 4px 12px; }
.abgeleitet { display: flex; gap: 10px; align-items: center; margin: 8px 0 4px; padding: 10px 14px; border-radius: var(--rund-innen); background: var(--glas-hell); font-size: 13.5px; }
.jc-raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; margin-top: 12px; align-items: start; }
.jc-links .gross-wert, .jc-rechts .gross-wert { font-size: 38px; margin-top: 4px; }
.saeulen { margin-top: 14px; }
.saeulen .legende { margin-bottom: 8px; }
.saeulen-bild-ziel { min-height: 180px; }
.saeulen-bild { display: block; overflow: visible; }
.saeule { cursor: pointer; outline: none; }
.saeule-feld { fill: transparent; transition: fill 0.2s var(--aus); }
.saeule:hover .saeule-feld, .saeule:focus-visible .saeule-feld { fill: rgba(255, 255, 255, 0.6); }
.saeule:focus-visible .saeule-feld { stroke: var(--frei); stroke-width: 2; }
.s-anspruch { fill: var(--jc); }
.s-anspruch.zukunft { fill: url(#sch-jc); stroke: var(--jc); stroke-width: 1.6; }
.s-gezahlt { fill: var(--konto); }
.saeulen-ablesung { margin: 6px 0 0; font-size: 13px; color: var(--tinte-2); min-height: 1.5em; font-variant-numeric: tabular-nums; }
.jc-rechts .aufteil-balken { margin-top: 16px; }
.ausstieg { margin-top: 18px; }
.ausstieg-kopf { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--tinte-2); margin-bottom: 8px; }
.ausstieg-kopf b { color: var(--tinte); font-variant-numeric: tabular-nums; }
.ausstieg-leiste { position: relative; height: 10px; border-radius: 999px; background: var(--spur); overflow: hidden; }
.ausstieg-leiste i { position: absolute; top: 0; bottom: 0; background: var(--jc); border-radius: 999px; }
.jc-rechts > .leise { margin-top: 14px; }
.rechnung { margin-top: 18px; }
.bescheid { margin: 10px 0 0; }
.kette .wertzeile.summe { border-bottom-color: var(--linie-stark); }
.beleg-zeile dd { white-space: normal; text-align: right; max-width: 62%; color: var(--tinte-2); }
.rechnung-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; margin-top: 12px; }
.werte { margin: 0; }
.wertzeile { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; }
.wertzeile dt { color: var(--tinte-2); }
.wertzeile dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.wertzeile.betont dd { font-weight: 600; }
.wertzeile.summe dt, .wertzeile.summe dd { font-weight: 600; color: var(--tinte); }
.treppe .wertzeile:nth-child(-n+4) dt { padding-left: 12px; }
.jc-tabelle tr.summe td { font-weight: 600; border-bottom: 0; }
.jc-tabelle td:first-child { white-space: nowrap; overflow-wrap: normal; }

/* ---------------------------------------------------------------- Breiten */

@media (max-width: 1180px) {
  .raster { grid-template-columns: minmax(0, 1fr); }
  .lage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
  .toepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .lage { grid-template-columns: minmax(0, 1fr); }
  .toepfe { grid-template-columns: minmax(0, 1fr); }
  .jc-raster, .rechnung-raster { grid-template-columns: minmax(0, 1fr); }
  .kopf { flex-wrap: wrap; border-radius: 26px; }
  .stand { order: 3; flex-basis: 100%; margin: 0; }
  .kopf-knoepfe { margin-left: auto; }
}

/* Zwischen Handy und breitem Rechner (761 bis 900 px) passen die sechs Reiter mit Symbolen nicht in die Zeile (sie
   ragten bis 820 px über den Rand hinaus): nur die Wörter, etwas schmaler. */
@media (min-width: 761px) and (max-width: 900px) {
  .reiter .ic { display: none; }
  .reiter a { padding: 10px 14px; }
}

@media (max-width: 760px) {
  .app { padding: 10px 12px; }
  .raster, .lage { gap: 12px; }
  .graf-karte, .strahl-karte, .kritisch, .aufteilung, .engpass, .meilenstein, .teil2-karte, .fluesse { padding: 18px 16px; }
  .graf-kopf { flex-direction: column; }
  .linien { justify-content: flex-start; }
  .linie-knopf { font-size: 12px; padding: 5px 10px 5px 9px; min-height: 32px; }
  .randknopf.leicht { font-size: 12px; padding: 6px 8px; }
  .app { padding-bottom: 104px; }
  .reiter { position: fixed; top: auto; left: 8px; right: 8px; bottom: 10px; width: auto; margin: 0; justify-content: space-between; gap: 2px; padding: 5px; border-radius: 22px; }
  .reiter a { flex: 1; flex-direction: column; gap: 2px; padding: 7px 2px; font-size: 11px; letter-spacing: -0.01em; border-radius: 16px; }
  .reiter .zaehler { position: absolute; top: 2px; right: 50%; margin-right: -22px; min-width: 18px; height: 18px; font-size: 10.5px; }
  .marken { height: 44px; }
  .fluss summary { grid-template-columns: 10px minmax(0, 1fr) 48px minmax(64px, auto) 12px; gap: 8px; }
  .fluss-datum .tag-summe { padding-right: 20px; }
  .marken .marke.rot { top: 24px; }
  .sammel { bottom: 84px; }
  .kopf-knoepfe { gap: 2px; }
}

@media (max-width: 560px) {
  .kats, .ein-stand, .notiz-feld, .darlehen-satz,
  .eingang.voll .ein-stand, .eingang.voll .kats, .eingang.voll .notiz-feld, .eingang.voll .darlehen-satz { margin-left: 0; }
  .notiz-feld { width: 100%; }
  .ein-kopf { grid-template-columns: 22px 46px minmax(0, 1fr) auto; }
  .eingang.voll .ein-kopf { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .eng-felder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .eng-feld .gross-wert { font-size: 22px; }
  .sammel { padding: 6px 10px 8px; }
  .sammel .kats { flex-wrap: nowrap; overflow-x: auto; margin-top: 4px; padding-bottom: 2px; }
  .sammel .kat { flex: none; min-height: 30px; padding: 4px 10px; }
  .schulden-tabelle { min-width: 0; }
  .schulden-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .schulden-tabelle, .schulden-tabelle tbody, .schulden-tabelle tr { display: block; }
  .schulden-tabelle tr { padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .tabelle .schulden-tabelle td { display: block; border: 0; padding: 1px 0; min-width: 0; }
  .tabelle .schulden-tabelle td[data-label] { display: flex; justify-content: space-between; gap: 12px; text-align: right; white-space: normal; }
  .schulden-tabelle td[data-label]::before { content: attr(data-label); color: var(--tinte-2); text-align: left; flex: none; font-weight: 400; }
  .schulden-tabelle .zellenhinweis { min-width: 0; }
  .jc-tabelle th, .jc-tabelle td { padding: 7px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .ansicht .glas, .einzeichnen { animation: none; }
  .einzeichnen { stroke-dasharray: none; stroke-dashoffset: 0; }
  .einordnung-status.wartet::before { animation: none; }
  .ring-wert { transition: none; }
}

/* ---------------------------------------------------------------- Gemeinsamer Kopf des Leitstands */

/* Sobald kopf.js den gemeinsamen Kopf gebaut hat (app.js setzt body.kopf-geteilt), ersetzt er den eigenen Kopf. Die
   sechs Finanz-Reiter bleiben als zweite Zeile unter den Hauptreitern. Ohne kopf.js greift nichts davon. */
body.kopf-geteilt .kopf { display: none; }
body.kopf-geteilt .reiter { top: 78px; }
/* Datenstand im gemeinsamen Kopf: Bausteine der Seite, kopf.css kennt nur den Rahmen. */
.kopf-stand .trenner { color: var(--tinte-3); }
.kopf-stand .export { color: var(--tinte-3); margin-left: 6px; }
.fuss { display: flex; justify-content: center; margin: 22px 0 0; }
.fuss[hidden] { display: none; }

@media (max-width: 760px) {
  /* Am Handy schweben die Hauptreiter unten; die sechs Finanz-Reiter wandern als wischbare Zeile nach oben. */
  body.kopf-geteilt .reiter {
    position: sticky; top: 8px; bottom: auto; left: auto; right: auto; width: auto; max-width: none;
    margin: 10px 0 0; justify-content: flex-start; gap: 2px; padding: 5px; border-radius: 999px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  body.kopf-geteilt .reiter::-webkit-scrollbar { display: none; }
  body.kopf-geteilt .reiter a { flex: none; flex-direction: row; gap: 6px; padding: 9px 14px; font-size: 13.5px; border-radius: 999px; }
  body.kopf-geteilt .reiter .zaehler { position: static; margin: 0; min-width: 20px; height: 20px; font-size: 11.5px; }
}