/* webT@X - das eine Stylesheet. Spezifikation: doku/design.md, Aufbau: doku/aufbau.md.
   Alle Farben und Maße sind Tokens in :root; jede Farbe ist ein light-dark()-Paar, color-scheme
   entscheidet (System, data-thema am html). Das Glas-Rezept steht genau einmal. Keine
   Inline-Styles, keine data:-Adressen, nur der normale Bindestrich.
   Reihenfolge: Tokens, Schrift, Basis, Glas, Rahmen, Karten, Knöpfe, Felder, Belegmaske, Badges,
   Tabellen, Raster, Kennzahlen, Charts, Auswertungen, Schublade, Belegseite, Einstellungen,
   Dialog, Toast, Palette, Anmeldung, Druckansicht, Bewegung, Druck, Bruchpunkte. */

/* ------------------------------------------------------------------ Tokens */

:root {
  color-scheme: light dark;
  --dunkel: 0; /* 0 hell, 1 dunkel: für Leuchten und Glanz, die kein light-dark() können */

  /* Marke MP Media */
  --marke-schwarz: #1c1c1e;
  --marke-grau: #706d72;
  --marke-hellgrau: #c6c7c8;
  --papier: #fff; /* Druck und Rückfall für alte Browser: ohne light-dark() */
  --druckfarbe: #000;
  --logo: light-dark(var(--marke-grau), var(--marke-hellgrau));

  /* Himmel: der Grund und die Wolken darauf */
  --grund: light-dark(#e6e5e9, #121214);
  --wolke-1: light-dark(#ffffff, #2c2b31);
  --wolke-2: light-dark(#c4c2ca, #18181b);
  --wolke-3: light-dark(#d8d5de, #242229);

  /* Flächen und Glas */
  --flaeche: light-dark(#ffffff, #1f1f23);
  --glas: light-dark(rgb(255 255 255 / 55%), rgb(32 32 37 / 60%));
  --glas-stark: light-dark(rgb(255 255 255 / 84%), rgb(36 36 41 / 88%));
  --glas-leicht: light-dark(rgb(255 255 255 / 42%), rgb(255 255 255 / 5%));
  --glas-deckend: light-dark(#f9f8fa, #202024);
  --glas-dunkel: light-dark(rgb(28 28 30 / 88%), rgb(44 44 48 / 90%));
  --tinte-flaeche: light-dark(rgb(28 28 30 / 6%), rgb(255 255 255 / 8%));
  --tinte-flaeche-stark: light-dark(rgb(28 28 30 / 11%), rgb(255 255 255 / 13%));
  --vorhang: light-dark(rgb(28 28 30 / 22%), rgb(0 0 0 / 55%));
  --vorhang-leicht: light-dark(rgb(28 28 30 / 12%), rgb(0 0 0 / 40%));

  /* Ränder: Kante außen, Linien innen, Lichtkante oben */
  --rand: light-dark(rgb(255 255 255 / 85%), rgb(255 255 255 / 9%));
  --linie: light-dark(rgb(28 28 30 / 9%), rgb(255 255 255 / 9%));
  --linie-stark: light-dark(rgb(28 28 30 / 20%), rgb(255 255 255 / 20%));
  --linie-tinte: light-dark(#1c1c1e, #f2f2f4);
  --kante: light-dark(rgb(255 255 255 / 95%), rgb(255 255 255 / 7%));

  /* Text in drei Stufen */
  --text: light-dark(#1c1c1e, #f2f2f4);
  --text-2: light-dark(#4b494e, #c6c7c8);
  --text-leise: light-dark(#67646b, #9a989e);

  /* Akzent: die Tinte selbst. Fokus deckend. */
  --akzent: light-dark(#1c1c1e, #f2f2f4);
  --akzent-hover: light-dark(#323235, #ffffff);
  --akzent-text: light-dark(#ffffff, #141416);
  --auf-farbe: light-dark(#ffffff, #141416); /* Schrift auf Grün und Rot */
  --glanz: rgb(255 255 255 / 15%); /* aufgehellte Fläche auf dem Akzent */
  --toast-rand: rgb(255 255 255 / 12%);
  --toast-kante: rgb(255 255 255 / 10%);
  --toast-frist: rgb(255 255 255 / 45%);
  --kantenschatten: rgb(20 20 22 / 12%); /* Rand einer waagerecht scrollenden Tabelle */
  --schatten-innen: inset 0 1px 3px light-dark(rgb(28 28 30 / 10%), rgb(0 0 0 / 50%));
  --fokus: light-dark(#1c1c1e, #f2f2f4);
  --fokus-schein: light-dark(rgb(28 28 30 / 16%), rgb(255 255 255 / 20%));

  /* Bedeutung: nur dort, wo es etwas heißt */
  --plus: light-dark(#24663f, #7cc79a);
  --plus-flaeche: light-dark(rgb(36 102 63 / 10%), rgb(124 199 154 / 14%));
  --minus: light-dark(#a83434, #e8847a);
  --minus-flaeche: light-dark(rgb(168 52 52 / 9%), rgb(232 132 122 / 14%));
  --warnung: light-dark(#9a4607, #f0b35a);
  --warnung-flaeche: light-dark(rgb(154 70 7 / 9%), rgb(240 179 90 / 14%));

  /* Charts */
  --chart-plus: var(--plus);
  --chart-minus: var(--minus);
  --chart-1: light-dark(#1c1c1e, #f2f2f4);
  --chart-2: light-dark(#706d72, #8a878d);
  --chart-flaeche: light-dark(rgb(28 28 30 / 5%), rgb(255 255 255 / 6%));
  --chart-raster: var(--linie);
  --tipp-grund: light-dark(#1c1c1e, #f2f2f4);
  --tipp-text: light-dark(#ffffff, #141416);
  --tipp-leise: light-dark(#b9b7bc, #5e5c62);

  /* Schatten und Leuchten */
  --schatten-1: 0 1px 2px light-dark(rgb(20 20 22 / 4%), rgb(0 0 0 / 35%)), 0 12px 32px -12px light-dark(rgb(20 20 22 / 14%), rgb(0 0 0 / 55%));
  --schatten-2: 0 2px 6px light-dark(rgb(20 20 22 / 6%), rgb(0 0 0 / 40%)), 0 32px 80px -20px light-dark(rgb(20 20 22 / 30%), rgb(0 0 0 / 75%));
  --schatten-knopf: 0 1px 2px light-dark(rgb(20 20 22 / 14%), rgb(0 0 0 / 45%));
  --leuchten: 0 0 24px light-dark(transparent, rgb(242 242 244 / 22%));
  --leuchten-plus: 0 0 12px light-dark(transparent, rgb(124 199 154 / 55%));
  --leuchten-minus: 0 0 12px light-dark(transparent, rgb(232 132 122 / 55%));

  /* Schrift */
  --schrift-text: "Abel", system-ui, sans-serif;
  --schrift-titel: "Outfit", "Abel", system-ui, sans-serif;
  --gr-11: 0.6875rem;
  --gr-12: 0.75rem;
  --gr-13: 0.8125rem;
  --gr-14: 0.875rem;
  --gr-15: 0.9375rem;
  --gr-16: 1rem;
  --gr-18: 1.125rem;
  --gr-20: 1.25rem;
  --gr-24: 1.5rem;
  --gr-28: 1.75rem;
  --gr-32: 2rem;
  --gr-40: 2.5rem;

  /* Abstände, Radien, Breiten */
  --a2: 0.5rem;
  --a3: 0.75rem;
  --a4: 1rem;
  --a5: 1.5rem;
  --a6: 2rem;
  --a7: 3rem;
  --rund-s: 10px;
  --rund: 16px;
  --rund-l: 24px;
  --pille: 999px;
  --leiste-breite: 15.5rem;
  --kopf-hoehe: 4.25rem;
  --kopfleiste-hoehe: 3.5rem;
  --inhalt-breite: 96rem;
  --schublade-breite: max(31rem, 100vw / 3);
  --dialog-breite: 27rem;
  --palette-breite: 38rem;
  --unschaerfe: 24px;

  /* Bewegung */
  --dauer-kurz: 160ms;
  --dauer: 260ms;
  --dauer-lang: 420ms;
  --kurve: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kurve-feder: cubic-bezier(0.34, 1.3, 0.4, 1);
  --kurve-aus: cubic-bezier(0.4, 0, 1, 1);
}

/* Hell oder dunkel: das System entscheidet, data-thema am html erzwingt einen Modus. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) { --dunkel: 1; }
}
:root[data-thema="dunkel"] { color-scheme: dark; --dunkel: 1; }
:root[data-thema="hell"] { color-scheme: light; --dunkel: 0; }

/* ----------------------------------------------------------------- Schrift */

@font-face {
  font-family: "Abel";
  src: url("schrift/abel-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Outfit";
  src: url("schrift/outfit-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

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

*, ::before, ::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font: 400 var(--gr-16) / 1.5 var(--schrift-text);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--a4));
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--text);
  background: var(--grund);
  display: grid;
  grid-template-columns: var(--leiste-breite) minmax(0, 1fr);
  -webkit-font-smoothing: antialiased;
}

/* Der Himmel liegt fest hinter allem; das Glas darüber zeigt ihn weich. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(64rem 44rem at 6% -14%, var(--wolke-1) 0%, transparent 60%),
    radial-gradient(50rem 40rem at 104% 4%, var(--wolke-2) 0%, transparent 58%),
    radial-gradient(44rem 36rem at -8% 92%, var(--wolke-2) 0%, transparent 58%),
    radial-gradient(56rem 48rem at 58% 112%, var(--wolke-3) 0%, transparent 60%),
    radial-gradient(34rem 26rem at 66% 38%, var(--wolke-1) 0%, transparent 62%),
    linear-gradient(160deg, var(--wolke-3), var(--grund) 55%);
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--schrift-titel);
  color: var(--text);
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: var(--gr-28); font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: var(--gr-18); font-weight: 500; letter-spacing: -0.015em; }
h3 { font-size: var(--gr-15); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
h1 small, h2 small {
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: var(--gr-14);
  color: var(--text-leise);
  margin-left: var(--a2);
  letter-spacing: 0;
}
p { margin: 0; }
p + p { margin-top: var(--a3); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
strong { font-weight: 400; color: var(--text); }
small { font-size: var(--gr-13); }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
svg { display: block; }
button { font: inherit; color: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Jede Zahl in Outfit mit Tabellenziffern: Abel hat keine. */
.zahl, td.r, th.r, time, .betrag, kbd, .code, .saldo dd, .tkonto td, .achse, input.zahl, input[type="date"] {
  font-family: var(--schrift-titel);
  font-variant-numeric: tabular-nums;
  font-weight: 450;
}

kbd {
  font-size: var(--gr-12);
  font-weight: 500;
  line-height: 1;
  color: var(--text-2);
  background: var(--glas-leicht);
  border: 1px solid var(--linie-stark);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0.22rem 0.4rem;
  white-space: nowrap;
}

.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.3em; display: inline-block; }
.icon.gross { width: 1.6em; height: 1.6em; }
.icon-loader-circle { animation: drehen 1s linear infinite; }

/* Hilfsklassen */
.r { text-align: right; }
.m { text-align: center; }
.leise { color: var(--text-leise); }
.plus { color: var(--plus); }
.minus { color: var(--minus); }
.warnung { color: var(--warnung); }
.stark { color: var(--text); font-family: var(--schrift-titel); font-weight: 500; }
.ueberschrift {
  font-size: var(--gr-12);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-leise);
  line-height: 1;
}
.unsichtbar { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nur-handy { display: none; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: var(--a4); top: var(--a4); z-index: 100; padding: var(--a2) var(--a3); background: var(--flaeche); border-radius: var(--rund-s); }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: var(--rund-s); }

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

/* Das Rezept steht genau einmal; jede Glasfläche hängt sich an diesen Selektor. */
.glas, .karte, .kennzahl, .leiste, .kopf, .kopfleiste, .saldo, .suchpille, .knopf,
.wahl-liste, .schublade, .dialog, .palette, .fussleiste, .blatt {
  background: var(--glas);
  -webkit-backdrop-filter: blur(var(--unschaerfe)) saturate(150%);
  backdrop-filter: blur(var(--unschaerfe)) saturate(150%);
  border: 1px solid var(--rand);
  box-shadow: inset 0 1px 0 var(--kante), var(--schatten-1);
}

/* Schwebendes: dichter, unschärfer, tieferer Schatten */
.glas.stark, .wahl-liste, .schublade, .dialog, .palette, .fussleiste, .blatt {
  background: var(--glas-stark);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--kante), var(--schatten-2);
}

/* Deckend: Karten mit langen Tabellen tragen kein Glas (Renderlast beim Scrollen) */
.karte.deckend, .druck .karte {
  background: var(--glas-deckend);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glas, .karte, .kennzahl, .leiste, .kopf, .kopfleiste, .saldo, .suchpille, .knopf,
  .wahl-liste, .schublade, .dialog, .palette, .fussleiste, .blatt { background: var(--glas-deckend); }
  .toast { background: var(--marke-schwarz); }
}

@supports not (color: light-dark(#000, #fff)) {
  body::after {
    content: "Dieser Browser ist zu alt für webT@X. Bitte aktualisieren.";
    position: fixed;
    inset: auto 0 0 0;
    padding: 0.75rem 1rem;
    background: var(--marke-schwarz);
    color: var(--papier);
    text-align: center;
    z-index: 999;
  }
}

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

.leiste {
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: var(--a5) var(--a3) var(--a4);
  border-width: 0 1px 0 0;
  border-radius: 0;
  box-shadow: none;
  overflow-y: auto;
}

.marke {
  display: flex;
  flex-direction: column;
  gap: var(--a2);
  padding: 0 var(--a2) var(--a4);
  color: var(--logo);
}
.marke:hover { text-decoration: none; }
.logo { width: 6.5rem; height: auto; opacity: 0.9; color: var(--logo); }
.logo.klein { width: 5rem; }
.wort {
  font: 600 var(--gr-24) / 1 var(--schrift-titel);
  letter-spacing: -0.03em;
  color: var(--text);
  white-space: nowrap;
}
.wort span { color: var(--text-leise); font-weight: 400; }

.suchpille {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.6rem 0.45rem 0.85rem;
  border-radius: var(--pille);
  box-shadow: inset 0 1px 0 var(--kante), var(--schatten-knopf);
  color: var(--text-leise);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--dauer-kurz), transform var(--dauer-kurz) var(--kurve);
}
.suchpille:hover { color: var(--text); transform: translateY(-1px); text-decoration: none; }
.suchpille span { flex: 1; }
.suchpille .icon { width: 1.1rem; height: 1.1rem; }

.leiste nav { flex: 1; margin-top: var(--a4); }
.leiste nav h2, .blatt nav h2 {
  font: 400 var(--gr-12) / 1 var(--schrift-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-leise);
  margin: var(--a4) var(--a3) var(--a2);
}
.leiste nav a, .blatt nav a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--rund-s);
  color: var(--text-2);
  font-size: var(--gr-15);
  transition: background var(--dauer-kurz) var(--kurve), color var(--dauer-kurz) var(--kurve);
}
.leiste nav a .icon, .blatt nav a .icon { color: var(--text-leise); width: 1.15rem; height: 1.15rem; }
/* Zeigerzustand aller Pillen-Links und Werkzeuge */
.leiste nav a:hover, .blatt nav a:hover, .werkzeug a:hover, .werkzeug button:hover,
.blaettern a:hover, .schnellwahl a:hover, .sprungliste a:hover { background: var(--tinte-flaeche); color: var(--text); text-decoration: none; }
.leiste nav a[aria-current="page"], .blatt nav a[aria-current="page"], .sprungliste a[aria-current="true"] { background: var(--akzent); color: var(--akzent-text); box-shadow: var(--schatten-knopf); }
.leiste nav a[aria-current="page"] .icon, .blatt nav a[aria-current="page"] .icon { color: inherit; }

.leiste-fuss { border-top: 1px solid var(--linie); padding-top: var(--a3); display: grid; gap: var(--a2); }
.benutzer { display: flex; align-items: center; gap: var(--a2); margin: 0; padding: 0.35rem 0.7rem; color: var(--text-2); font-size: var(--gr-15); }
.benutzer .icon { color: var(--text-leise); }
.benutzer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.benutzer .abmelden {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0.25rem;
  color: var(--text-leise);
  cursor: pointer;
  border-radius: 8px;
  display: grid;
}
.benutzer .abmelden:hover { color: var(--text); background: var(--tinte-flaeche); }

/* Schalter hell / System / dunkel */
.schalter {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 2px;
  padding: 3px;
  border-radius: var(--pille);
  background: var(--tinte-flaeche);
  margin: 0 var(--a2);
}
.schalter button {
  background: none;
  border: 0;
  padding: 0.3rem 0.6rem;
  border-radius: var(--pille);
  color: var(--text-leise);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dauer-kurz), color var(--dauer-kurz);
}
.schalter button:hover { color: var(--text); }
.schalter button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-knopf); }
.schalter .icon { width: 1rem; height: 1rem; }
/* Derselbe Schalter mit Wort dazu (Einstellungen): dort ist Platz, und "Wie System" erklärt sich so */
.schalter.beschriftet { margin: 0; }
.schalter.beschriftet button { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.1rem; color: var(--text-2); font: 500 var(--gr-15) / 1 var(--schrift-titel); }
.schalter.beschriftet button .icon { width: 1.05rem; height: 1.05rem; color: var(--text-leise); }
.schalter.beschriftet button:hover, .schalter.beschriftet button[aria-pressed="true"] { color: var(--text); }
.schalter.beschriftet button[aria-pressed="true"] .icon { color: inherit; }

/* Kopfzeile: klebt, trägt Titel, Salden und den Hauptknopf */
.kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--kopf-hoehe);
  display: flex;
  align-items: center;
  gap: var(--a4);
  padding: 0.6rem max(var(--a6), calc((100% - var(--inhalt-breite)) / 2 + var(--a6)));
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
}
.kopf h1 { font-size: var(--gr-24); }
.kopf .titel { min-width: 0; }
.kopf .titel small { display: block; font-family: var(--schrift-text); font-size: var(--gr-13); color: var(--text-leise); margin: 0.1rem 0 0; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; justify-content: flex-end; }

.salden { display: flex; gap: var(--a2); flex-wrap: wrap; }
.saldo {
  display: flex;
  align-items: baseline;
  gap: var(--a2);
  padding: 0.4rem 0.95rem;
  border-radius: var(--pille);
  box-shadow: inset 0 1px 0 var(--kante), var(--schatten-knopf);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.saldo dt { font-size: var(--gr-12); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-leise); white-space: nowrap; }
.saldo dd { font-weight: 600; font-size: var(--gr-15); line-height: 1; color: var(--text); text-shadow: var(--leuchten); white-space: nowrap; }

.kopfleiste, .fussleiste, .seitenkopf { display: none; }

.seite { min-width: 0; }
.inhalt { padding: var(--a5) var(--a6) var(--a7); min-width: 0; max-width: var(--inhalt-breite); width: 100%; margin-inline: auto; }
.meldungen:empty { display: none; }

/* ------------------------------------------------------------------ Karten */

.karte { border-radius: var(--rund); padding: var(--a5); margin-bottom: var(--a4); min-width: 0; }
.karte > h2 { margin-bottom: var(--a4); }
.karte > h2:not(:first-child) { margin-top: var(--a5); }
.kartenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a4);
  flex-wrap: wrap;
  margin-bottom: var(--a4);
}
.kartenkopf h2 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.kartenkopf h2 .icon { color: var(--text-leise); width: 1rem; height: 1rem; align-self: center; }
.kartenkopf .rechts { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; margin-left: auto; }

.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: var(--a4); align-items: start; margin-bottom: var(--a4); }
.spalten > .karte { margin-bottom: 0; }
.spalten.zwei-eins { grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr); }
.spalten.eins-eins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spalten.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.reihe { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.reihe.rechts { justify-content: flex-end; }
.reihe.auseinander { justify-content: space-between; }
.karte > .reihe:last-child, form.karte > .reihe:last-child { margin-top: var(--a4); }
.stapel { display: grid; gap: var(--a4); }
.stapel > .karte { margin-bottom: 0; }
.kartenkopf > small { color: var(--text-leise); font-size: var(--gr-13); }
.karte .hinweis { display: flex; align-items: flex-start; gap: 0.4rem; margin-top: var(--a4); font-size: var(--gr-14); }
.karte .hinweis .icon { width: 1rem; height: 1rem; margin-top: 0.15rem; }

/* Zähler im Kopf einer Karte (Belege zur Nachprüfung): Orange ist die Farbe der Fahne, sonst nichts */
.zaehler {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.5rem;
  border-radius: var(--pille);
  background: var(--warnung-flaeche);
  color: var(--warnung);
  font: 500 var(--gr-13) / 1 var(--schrift-titel);
  font-variant-numeric: tabular-nums;
  align-self: center;
}

/* Klebender Fuß: bleibt unten im Blick, solange die Seite scrollt (Raster, Einstellungen) */
.klebfuss { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; gap: var(--a4); flex-wrap: wrap; }
.klebfuss.glas {
  position: static; /* am Desktop reicht die Seite nicht weit; am Handy klebt er über der Fußleiste */
  margin-top: var(--a4);
  justify-content: flex-end;
  gap: var(--a3);
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--a4) auto;
  padding: var(--a2) var(--a2) var(--a2) var(--a5);
  border-radius: var(--pille);
}
.klebfuss [data-aenderung] { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--gr-14); white-space: nowrap; }
.klebfuss [data-aenderung] .icon { width: 1rem; height: 1rem; }

/* Meldungen */
.meldung {
  display: flex;
  gap: var(--a2);
  align-items: flex-start;
  margin: 0 0 var(--a4);
  padding: 0.7rem 1rem;
  border-radius: var(--rund-s);
  background: var(--tinte-flaeche);
  color: var(--text-2);
  font-size: var(--gr-15);
}
.meldung .icon { margin-top: 0.1rem; }
.meldung > div { min-width: 0; }
.meldung ul { display: grid; gap: 0.15rem; margin-top: 0.35rem; }
.meldung.erfolg { background: var(--plus-flaeche); color: var(--plus); }
.meldung.fehler { background: var(--minus-flaeche); color: var(--minus); }
.meldung.warnung { background: var(--warnung-flaeche); color: var(--warnung); }

/* Leerer Zustand */
.leer-zustand {
  display: grid;
  justify-items: center;
  gap: var(--a2);
  padding: var(--a6) var(--a4);
  text-align: center;
  color: var(--text-2);
  font-size: var(--gr-15);
}
.leer-zustand .icon { width: 2rem; height: 2rem; color: var(--text-leise); }
.leer-zustand strong { font-family: var(--schrift-titel); font-weight: 500; font-size: var(--gr-16); }
.leer-zustand .knopf { margin-top: var(--a2); }

/* Ladezustand */
.skelett {
  display: block;
  height: 1em;
  border-radius: var(--rund-s);
  background: var(--tinte-flaeche);
  animation: pulsen 1.4s ease-in-out infinite;
}
.skelett + .skelett { margin-top: var(--a2); }
.skelett.kurz { width: 40%; }
.skelett.hoch { height: 2.5em; }
[aria-busy="true"] { cursor: progress; }

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

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font: 500 var(--gr-15) / 1 var(--schrift-titel);
  letter-spacing: 0.01em;
  padding: 0.62rem 1.15rem;
  border-radius: var(--pille);
  box-shadow: inset 0 1px 0 var(--kante), var(--schatten-knopf);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dauer-kurz) var(--kurve), box-shadow var(--dauer-kurz) var(--kurve), background var(--dauer-kurz), color var(--dauer-kurz);
}
.knopf:hover { text-decoration: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--kante), var(--schatten-1); }
.knopf:active { transform: translateY(0) scale(0.98); }
.knopf .icon { width: 1.05em; height: 1.05em; }
.knopf kbd {
  margin-left: 0.2rem;
  color: inherit;
  opacity: 0.75;
  border-color: transparent;
  background: var(--glanz);
  box-shadow: none;
}

.knopf.haupt { background: var(--akzent); color: var(--akzent-text); border-color: transparent; box-shadow: var(--schatten-knopf), var(--leuchten); }
.knopf.haupt:hover { background: var(--akzent-hover); }
.knopf.gefahr { background: var(--minus); color: var(--auf-farbe); border-color: transparent; box-shadow: var(--schatten-knopf); }
.knopf.gefahr:hover { filter: brightness(1.08); }
.knopf.gefahr kbd { color: var(--auf-farbe); }
.knopf.leise { background: none; border-color: transparent; box-shadow: none; color: var(--text-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.knopf.leise:hover { background: var(--tinte-flaeche); color: var(--text); box-shadow: none; }
.knopf.klein { padding: 0.42rem 0.85rem; font-size: var(--gr-14); }
.knopf.rund { padding: 0.5rem; border-radius: 50%; }
.knopf.rund .icon { width: 1.15rem; height: 1.15rem; }
.knopf[disabled], .knopf.laedt { opacity: 0.45; cursor: not-allowed; transform: none; }
.knopf[disabled]:hover, .knopf.laedt:hover { transform: none; box-shadow: inset 0 1px 0 var(--kante), var(--schatten-knopf); }
.knopf.laedt .icon:not(.icon-loader-circle) { display: none; }
.knopf .icon-loader-circle { display: none; }
.knopf.laedt .icon-loader-circle { display: inline-block; }

/* ------------------------------------------------------------------ Felder */

.feld { display: grid; gap: 0.3rem; min-width: 0; }
.feld > label, .feld > .name, .felder > label {
  font-size: var(--gr-12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-leise);
  font-family: var(--schrift-text);
}
input, select, textarea {
  font: inherit;
  font-size: var(--gr-16);
  color: var(--text);
  background: var(--glas-leicht);
  border: 1px solid var(--linie-stark);
  border-radius: var(--rund-s);
  padding: 0.55rem 0.8rem;
  min-height: 2.6rem;
  width: 100%;
  max-width: 100%;
  box-shadow: inset 0 1px 0 var(--kante);
  transition: border-color var(--dauer-kurz), box-shadow var(--dauer-kurz), background var(--dauer-kurz);
}
input:hover, select:hover, textarea:hover { border-color: var(--text-leise); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px var(--fokus-schein);
  background: var(--flaeche);
}
input.falsch, select.falsch { border-color: var(--minus); background: var(--minus-flaeche); }
input[disabled], select[disabled] { opacity: 0.5; background: var(--tinte-flaeche); }
input[readonly] { border-style: dashed; }
input[readonly]:focus { box-shadow: none; border-color: var(--linie-stark); }
input.zahl { text-align: right; }
::placeholder { color: var(--text-leise); opacity: 0.8; }
input[type="checkbox"] { width: 1.1rem; height: 1.1rem; min-height: 0; padding: 0; accent-color: var(--akzent); vertical-align: middle; flex: none; border-radius: 0.25rem; box-shadow: none; }
input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 4px var(--fokus-schein); }
select { appearance: none; -webkit-appearance: none; padding-right: 2.2rem; cursor: pointer; }
.feld .fehler { display: flex; align-items: center; gap: 0.35rem; font-size: var(--gr-13); color: var(--minus); }
.feld .fehler .icon { width: 1rem; height: 1rem; }
.mit-einheit { display: flex; align-items: center; }
.mit-einheit input { flex: 1; }
.mit-einheit .einheit, .einheit { color: var(--text-leise); margin-left: 0.4rem; font-family: var(--schrift-titel); }
.haken { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--text-2); cursor: pointer; font-size: var(--gr-16); }
.haken .icon { color: var(--text-leise); width: 1.1rem; height: 1.1rem; }

/* Passwort mit Auge: der Knopf sitzt rechts im Feld */
.passwort { position: relative; }
.passwort input { padding-right: 2.6rem; }
.passwort > button { position: absolute; right: 0.4rem; bottom: 0.45rem; background: none; border: 0; padding: 0.3rem; color: var(--text-leise); cursor: pointer; display: grid; border-radius: 8px; }
.passwort > button:hover { color: var(--text); background: var(--tinte-flaeche); }
.passwort > button .icon-eye-off, .passwort > button[aria-pressed="true"] .icon-eye { display: none; }
.passwort > button[aria-pressed="true"] .icon-eye-off { display: inline-block; }
/* Steht eine Beschriftung über dem Feld, sitzt das Auge am Feld, nicht am unteren Rand (darunter folgen Stärke und Fehler) */
.feld.passwort > button { bottom: auto; top: 1.55rem; }

/* Stärke des neuen Passworts: vier Segmente und ein Wort, Farbe nur, wo sie etwas heißt */
.staerke { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0.3rem; align-items: center; margin-top: 0.1rem; font-size: var(--gr-13); color: var(--text-leise); }
.staerke i { height: 4px; border-radius: 2px; background: var(--tinte-flaeche-stark); transition: background var(--dauer-kurz); }
.staerke span { margin-left: 0.4rem; white-space: nowrap; }
.staerke[data-stufe="0"] i:first-child, .staerke[data-stufe="1"] i:nth-child(-n+1) { background: var(--minus); }
.staerke[data-stufe="2"] i:nth-child(-n+2) { background: var(--warnung); }
.staerke[data-stufe="3"] i:nth-child(-n+3), .staerke[data-stufe="4"] i:nth-child(-n+4) { background: var(--plus); }
.staerke[data-stufe="0"] span, .staerke[data-stufe="1"] span { color: var(--minus); }
.staerke[data-stufe="2"] span { color: var(--warnung); }
.staerke[data-stufe="3"] span, .staerke[data-stufe="4"] span { color: var(--plus); }

/* Auswahlfeld mit eigenem Pfeil: der Pfeil ist ein Icon im Elternelement .auswahl */
.auswahl { position: relative; }
.auswahl > .icon, .wahl > .icon { position: absolute; right: 0.6rem; bottom: 0.72rem; width: 1.1rem; height: 1.1rem; color: var(--text-leise); pointer-events: none; }

/* Raster aus Feldern, so viele nebeneinander, wie Platz ist; .voll nimmt die ganze Zeile */
.feldraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--a4); }
.feldraster .voll { grid-column: 1 / -1; }
.feldraster.konten-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feld.auswahl > .icon { bottom: 0.72rem; }
.feld .fehler ~ .icon, .feld > .icon:has(~ .fehler) { bottom: auto; top: 1.85rem; }

/* Felder in zwei Spalten: Beschriftung links, Feld rechts (ältere Masken) */
.felder { display: grid; grid-template-columns: 11rem minmax(0, 32rem); gap: var(--a3) var(--a4); align-items: center; }
.felder > div { min-width: 0; display: flex; align-items: center; }

/* Kontoauswahl: ein Textfeld, darunter die Treffer als schwebendes Glas */
.wahl { position: relative; }
.wahl > input { padding-right: 2.2rem; }
.wahl-liste {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  padding: 0.35rem;
  max-height: 18rem;
  overflow-y: auto;
  border-radius: var(--rund-s);
  animation: auftauchen var(--dauer-kurz) var(--kurve);
}
.wahl-liste li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.45rem 0.65rem;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wahl-liste li .nr { color: var(--text-leise); min-width: 2.6rem; }
.wahl-liste li[aria-selected="true"] { background: var(--akzent); color: var(--akzent-text); }
.wahl-liste li[aria-selected="true"] .nr { color: inherit; opacity: 0.7; }
.wahl-liste li.nichts { color: var(--text-leise); cursor: default; }

/* Suche über einer Liste */
.suche { display: flex; gap: var(--a2); align-items: center; flex-wrap: wrap; }
.suche input:not(.konto):not([type="checkbox"]) { width: 17rem; }
.suche input.konto { width: 5.5rem; }
.suche select { width: auto; }
.suche .wahl { width: 20rem; }
.suche .wahl > .icon { right: auto; left: 0.7rem; }
.suche .wahl > input { padding-left: 2.3rem; padding-right: 0.8rem; border-radius: var(--pille); }

/* --------------------------------------------------------------- Belegmaske */

.maske { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); gap: var(--a5); align-items: start; }
.maske-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a4); }
.maske-felder .voll { grid-column: 1 / -1; }

.rechnung {
  margin: 0;
  padding: var(--a4);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--glas-leicht);
  display: grid;
  gap: var(--a3);
}
.rechnung legend { padding: 0 0.4rem; margin-left: 0.5rem; }
.rechnung .feld { grid-template-columns: 1fr 9rem; align-items: center; gap: var(--a3); }
.rechnung .feld > label { text-transform: none; letter-spacing: 0; font-size: var(--gr-16); color: var(--text-2); }
.rechnung .summe {
  border-top: 1px solid var(--linie);
  padding-top: var(--a3);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem var(--a3);
  align-items: baseline;
  color: var(--text-leise);
}
.rechnung .summe strong { font: 600 var(--gr-20) / 1 var(--schrift-titel); font-variant-numeric: tabular-nums; }
.rechnung .summe .satz { grid-column: 1 / -1; font-size: var(--gr-13); }

.maske-fuss { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--a4); flex-wrap: wrap; margin-top: var(--a2); }
.maske-fuss .reihe { margin-left: auto; }

.wahl-tasten { display: flex; gap: var(--a3); color: var(--text-leise); font-size: var(--gr-13); flex-wrap: wrap; }
.wahl-tasten span { display: inline-flex; align-items: center; gap: 0.35rem; }
.maske-zu { display: none; } /* den Schließknopf der Maske gibt es nur am Handy (Bogen) */

/* Dieselbe Maske in der Schublade: ohne Karte, einspaltig, Fuß untereinander */
.schublade-maske { display: grid; gap: var(--a4); }
.schublade .maske { grid-template-columns: 1fr; gap: var(--a4); }
.schublade .maske-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.schublade .maske-fuss { margin-top: 0; flex-direction: column; align-items: stretch; gap: var(--a3); }
.schublade .maske-fuss .reihe { margin-left: 0; justify-content: flex-end; }
.schublade .wahl-tasten { display: none; }

/* ------------------------------------------------------- Badges und Zeichen */

.art {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: 500 0.78rem / 1 var(--schrift-titel);
  padding: 0.3rem 0.7rem;
  border-radius: var(--pille);
  background: var(--tinte-flaeche);
  color: var(--text-2);
  white-space: nowrap;
}
.art .icon { width: 0.95rem; height: 0.95rem; }
.art .icon.aus { display: none; }
.art.einnahme { background: var(--plus-flaeche); color: var(--plus); }
.art.ausgabe { background: var(--minus-flaeche); color: var(--minus); }

.punkt { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--text-leise); box-shadow: 0 0 0 3px var(--tinte-flaeche); flex: none; }
.punkt.einnahme { background: var(--plus); box-shadow: 0 0 0 3px var(--plus-flaeche), var(--leuchten-plus); }
.punkt.ausgabe { background: var(--minus); box-shadow: 0 0 0 3px var(--minus-flaeche), var(--leuchten-minus); }

.fahne { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--warnung); font-size: var(--gr-13); white-space: nowrap; }
.fahne .icon { width: 1rem; height: 1rem; }

.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: 500 var(--gr-13) / 1 var(--schrift-titel);
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0.55rem;
  border-radius: var(--pille);
  background: var(--tinte-flaeche);
  color: var(--text-2);
  white-space: nowrap;
}
.delta .icon { width: 0.9rem; height: 0.9rem; }
.delta.plus { background: var(--plus-flaeche); color: var(--plus); }
.delta.minus { background: var(--minus-flaeche); color: var(--minus); }

/* ---------------------------------------------------------------- Tabellen */

.tabelle { overflow-x: auto; margin: 0 calc(-1 * var(--a3)); padding: 0 var(--a3); scrollbar-width: thin; }
table { border-collapse: collapse; width: 100%; }
caption { position: absolute; left: -9999px; }
th {
  text-align: left;
  font-size: var(--gr-12);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-leise);
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--linie-stark);
  white-space: nowrap;
}
th.r { text-align: right; font-weight: 400; font-variant-numeric: normal; }
th a { display: inline-flex; align-items: center; gap: 0.3rem; color: inherit; }
th a:hover { color: var(--text); text-decoration: none; }
th a .icon { width: 0.85rem; height: 0.85rem; opacity: 0.5; transition: opacity var(--dauer-kurz); }
th a:hover .icon, th[aria-sort] a .icon { opacity: 1; }
th[aria-sort] a { color: var(--text); }
td { padding: 0.55rem 0.65rem; border-bottom: 1px solid var(--linie); vertical-align: middle; font-size: var(--gr-15); line-height: 1.4; }
td.r { font-size: var(--gr-14); }
td.betrag { font-weight: 500; color: var(--text); }
td.leise, td .leise { color: var(--text-leise); }
tbody tr { transition: background var(--dauer-kurz); }
tbody tr:hover { background: var(--glas-leicht); }
tbody tr[aria-selected="true"] { background: var(--tinte-flaeche-stark); box-shadow: inset 3px 0 0 var(--akzent); }
tbody tr.neu td { animation: einsinken var(--dauer-lang) var(--kurve); }
tbody tr:last-child td { border-bottom: 0; }
tfoot td { color: var(--text); font-family: var(--schrift-titel); font-weight: 500; border-top: 2px solid var(--linie-tinte); border-bottom: 0; padding-top: 0.7rem; }
td.leer { color: var(--text-leise); text-align: center; padding: var(--a5); }
tr.zeilenfehler td { color: var(--minus); font-family: var(--schrift-titel); font-weight: 500; padding: 0.5rem 0.4rem 0; border: 0; }

/* Belegliste: 13 Spalten, Zahlen in Outfit, Nebenspalten verschwinden unter 80 rem */
.belege td { white-space: nowrap; padding-left: 0.5rem; padding-right: 0.5rem; }
.belege th { padding-left: 0.5rem; padding-right: 0.5rem; }
.belege td.zweck { min-width: 10rem; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.belege td.z-datum, .belege td.z-soll, .belege td.z-haben, .belege td.z-id, .belege td.z-belegnr {
  font-family: var(--schrift-titel); font-variant-numeric: tabular-nums; font-weight: 450; font-size: var(--gr-14);
}
.belege tbody tr { cursor: pointer; }
.belege tbody tr:focus { outline: 0; }
.belege tbody tr:focus-visible { outline: 2px solid var(--fokus); outline-offset: -2px; border-radius: 6px; }
.belege td.zweck .fahne { margin-right: 0.35rem; vertical-align: -0.1em; }
.belege td.zweck .fahne .icon { width: 0.95rem; height: 0.95rem; }
.belege tr.leer, .belege tr.leer:hover { background: none; cursor: default; }
.belege td.leer { padding: 0; }
/* Eine neue Zeile kommt von oben herein und sinkt grün ein, eine gelöschte verblasst */
.belege tbody tr.neu { animation: zeile-herein var(--dauer-lang) var(--kurve); }
.belege tbody tr.geht { animation: ausblenden var(--dauer-kurz) var(--kurve-aus) forwards; }

.werkzeug { text-align: right; width: 4.2rem; white-space: nowrap; }
.werkzeug a, .werkzeug button {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--text-leise);
  cursor: pointer;
  opacity: 0.55;
  padding: 0;
  transition: opacity var(--dauer-kurz), background var(--dauer-kurz), color var(--dauer-kurz);
}
tbody tr:hover .werkzeug a, tbody tr:hover .werkzeug button, .werkzeug a:focus-visible, .werkzeug button:focus-visible { opacity: 1; }
.werkzeug .loeschen:hover { background: var(--minus-flaeche); color: var(--minus); }
.werkzeug .icon { width: 1.05rem; height: 1.05rem; }
/* In der Prüfliste kommt der Haken "geprüft" dazu */
.pruefliste .werkzeug { width: 6.4rem; }
.werkzeug form { display: inline; }
.werkzeug .erledigt:hover { background: var(--plus-flaeche); color: var(--plus); }
.werkzeug .laedt { opacity: 0.4; pointer-events: none; }

/* ------------------------------------------------------------------ Raster */

/* Tabellen, in denen jede Zelle ein Feld ist (Schnellbearbeitung, Kontenrahmen). Felder ohne
   Rahmen: die Zeile ist die Form, erst Zeiger und Fokus heben die Zelle heraus. */
.raster-karte .kartenkopf h2 small { white-space: normal; }
.raster-hinweis { display: none; }
.raster-filter { margin: calc(-1 * var(--a2)) 0 var(--a4); }
.raster th { padding: 0.45rem 0.35rem; }
.raster td { padding: 0.12rem 0.15rem; vertical-align: middle; }
.raster tbody tr:last-child td { border-bottom: 0; }
.raster input:not([type="checkbox"]), .raster select {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0.3rem 0.5rem;
  min-height: 2.1rem;
  border-radius: 8px;
  font-size: var(--gr-15);
  width: 100%;
  color: var(--text);
}
.raster input:not([type="checkbox"]):hover, .raster select:hover { background: var(--tinte-flaeche); border-color: transparent; }
.raster input:not([type="checkbox"]):focus, .raster select:focus {
  background: var(--flaeche);
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px var(--fokus-schein);
  position: relative;
  z-index: 1;
}
.raster input.geaendert, .raster select.geaendert { background: var(--warnung-flaeche); }
.raster input.falsch, .raster select.falsch { background: var(--minus-flaeche); border-color: var(--minus); }
.raster input.konto { width: 3.7rem; font-family: var(--schrift-titel); font-variant-numeric: tabular-nums; font-weight: 450; }
.raster input.satz { width: 3.2rem; text-align: right; font-family: var(--schrift-titel); font-variant-numeric: tabular-nums; font-weight: 450; }
.raster input.zahl { width: 5.3rem; text-align: right; font-weight: 450; }
.raster input.mittel { width: 5.2rem; }
.raster input.lang { min-width: 9rem; }
.raster input[type="date"] { width: 7.9rem; padding-right: 0.25rem; padding-left: 0.4rem; }
.raster input::placeholder { color: var(--text-leise); opacity: 0.7; }
.raster select { padding-right: 1.5rem; cursor: pointer; }
.raster .auswahl > .icon { right: 0.35rem; bottom: 0.5rem; width: 1rem; height: 1rem; }
.raster th.m, .raster td.m { text-align: center; width: 2.2rem; }
.raster th .icon, .raster td.z-nr .icon { width: 1rem; height: 1rem; color: var(--text-leise); }
.raster th.z-nr, .raster td.z-nr { width: 2.8rem; padding-left: 0.4rem; }
.raster td.z-nr { color: var(--text-leise); font-size: var(--gr-13); white-space: nowrap; }
.raster td.z-nr .zahl { font-weight: 450; }
.raster td.werkzeug { width: 2.3rem; padding: 0; text-align: center; }
.raster input[type="checkbox"] { width: 1.05rem; height: 1.05rem; min-height: 0; vertical-align: middle; }
.raster input[type="checkbox"][disabled] { opacity: 0.3; cursor: not-allowed; background: none; }

/* Geänderte Zeile: Streifen in Warnfarbe links; die geänderte Zelle trägt die Fläche dazu. */
.raster tbody tr.geaendert { box-shadow: inset 3px 0 0 var(--warnung); }
.raster tbody tr.geaendert td.z-nr { color: var(--text); }

/* Zum Löschen angehakt: Streifen in Rot, der Rest tritt zurück. */
.raster tbody tr.loeschen { box-shadow: inset 3px 0 0 var(--minus); background: var(--minus-flaeche); }
.raster tbody tr.loeschen input:not([type="checkbox"]), .raster tbody tr.loeschen select { opacity: 0.45; text-decoration: line-through; }

/* Zeile mit Fehler: Streifen in Rot, darunter der Satz dazu. */
.raster tbody tr.falsch { box-shadow: inset 3px 0 0 var(--minus); }
.raster tr.zeilenfehler td {
  padding: 0 0.5rem 0.55rem 3.2rem;
  border-bottom: 1px solid var(--linie);
  color: var(--minus);
  font: 400 var(--gr-13) / 1.4 var(--schrift-text);
  white-space: normal;
}
.raster tr.zeilenfehler td .icon { width: 1rem; height: 1rem; margin-right: 0.35rem; vertical-align: -0.2em; }
.raster tr.zeilenfehler:hover { background: none; }

/* Die neue Zeile am Ende: gestrichelte Felder, bis etwas drinsteht. */
.raster tbody tr.neu td { padding-top: 0.5rem; padding-bottom: 0.35rem; border-top: 1px dashed var(--linie-stark); }
.raster tbody tr.neu input:not([type="checkbox"]), .raster tbody tr.neu select { border: 1px dashed var(--linie-stark); background: var(--glas-leicht); }
.raster tbody tr.neu input:not([type="checkbox"]):focus, .raster tbody tr.neu select:focus { border-style: solid; border-color: var(--akzent); background: var(--flaeche); }
.raster tbody tr.neu input.geaendert, .raster tbody tr.neu select.geaendert { background: var(--warnung-flaeche); border-style: solid; }

/* Standard als Kippschalter: eine Bahn mit Knopf, angeschaltet in Tinte. */
.raster input.kippschalter {
  appearance: none;
  -webkit-appearance: none;
  width: 2.1rem;
  height: 1.2rem;
  margin: 0;
  padding: 0;
  border-radius: var(--pille);
  border: 1px solid var(--linie-stark);
  background: var(--tinte-flaeche);
  position: relative;
  cursor: pointer;
  transition: background var(--dauer-kurz), border-color var(--dauer-kurz);
}
.raster input.kippschalter::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.2rem - 6px);
  height: calc(1.2rem - 6px);
  border-radius: 50%;
  background: var(--flaeche);
  box-shadow: var(--schatten-knopf);
  transition: translate var(--dauer-kurz) var(--kurve), background var(--dauer-kurz);
}
.raster input.kippschalter:checked { background: var(--akzent); border-color: var(--akzent); }
.raster input.kippschalter:checked::after { translate: 0.9rem 0; background: var(--akzent-text); }
.raster input.kippschalter:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.raster input.kippschalter.geaendert { border-color: var(--warnung); box-shadow: 0 0 0 3px var(--warnung-flaeche); }

/* Spalten der Schnellbearbeitung und des Kontenrahmens */
.belege-raster td.s-verwendungszweck { width: 100%; min-width: 9rem; }
.belege-raster th.s-verwendungszweck { min-width: 9rem; }
.konten-raster td.s-name { width: 100%; min-width: 14rem; }
.konten-raster td.s-typ { width: 8.5rem; }
.konten-raster .auswahl { display: block; width: 8rem; }

/* Der klebende Fuß der Raster-Karte: zählt die geänderten Zeilen und trägt die Knöpfe. */
.raster-fuss {
  margin: var(--a4) calc(-1 * var(--a5)) calc(-1 * var(--a5));
  padding: var(--a3) var(--a5);
  border-top: 1px solid var(--linie);
  border-radius: 0 0 var(--rund) var(--rund);
  background: var(--glas-stark);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.raster-fuss .reihe { margin-left: auto; }
.raster-stand { color: var(--text-leise); font-size: var(--gr-14); line-height: 1.4; }
.raster-stand.aktiv { color: var(--text); }
.raster-stand b { font-family: var(--schrift-titel); font-weight: 500; font-variant-numeric: tabular-nums; }
.raster-karte .blaettern { margin-top: var(--a4); }

/* Standardkonten: Sprungpillen je Typ, darunter je Typ eine Liste; die ganze Zeile führt ins Kontenblatt */
.standard-gruppen { display: flex; gap: var(--a2); flex-wrap: wrap; margin-top: var(--a2); }
.standard-gruppen a.art { padding: 0.45rem 0.9rem; font-size: var(--gr-13); transition: transform var(--dauer-kurz) var(--kurve); }
.standard-gruppen a.art:hover { text-decoration: none; transform: translateY(-1px); }
.standard-gruppen a.art b { font-weight: 600; margin-left: 0.1rem; }
.standard-gruppe { scroll-margin-top: calc(var(--kopf-hoehe) + var(--a4)); }
.standard-gruppe .kartenkopf h2 { align-items: center; }
.standard-gruppe .kartenkopf h2 .art { margin-right: 0.35rem; }
.standard-liste tbody tr { cursor: pointer; }
.standard-liste td.z-nummer { width: 4.5rem; color: var(--text-leise); font-size: var(--gr-14); }
.standard-liste td.z-nummer .zahl { font-weight: 450; }
.standard-liste td.name a { color: var(--text); }
.standard-liste tbody tr:hover td.name a { text-decoration: underline; text-underline-offset: 0.15em; }
.standard-liste td.anzeige { color: var(--text-leise); font-size: var(--gr-14); }
.standard-liste td.satz { width: 6.5rem; font-family: var(--schrift-titel); font-variant-numeric: tabular-nums; font-weight: 450; font-size: var(--gr-14); white-space: nowrap; }
.standard-liste td.werkzeug { width: 2.6rem; }

/* Datensicherung: Liste der Sicherungen; die Dateiauswahl sieht man nur ohne Skript */
.sicherungen td.stand time { font-weight: 500; color: var(--text); white-space: nowrap; }
.sicherungen td.schritte { width: 1%; }
.sicherungen .reihe { flex-wrap: nowrap; }
form[data-hochladen] input[type="file"] { width: auto; max-width: 17rem; min-height: 0; padding: 0.35rem 0.6rem; font-size: var(--gr-14); }

/* Blättern unter einem Raster */
.blaettern { display: flex; align-items: center; gap: var(--a2); margin-top: var(--a4); color: var(--text-leise); font-size: var(--gr-14); flex-wrap: wrap; }
.blaettern a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.8rem;
  border-radius: var(--pille);
  border: 1px solid var(--rand);
  background: var(--glas-leicht);
  color: var(--text-2);
  font: 500 var(--gr-14) / 1.3 var(--schrift-titel);
}
.blaettern span { padding: 0 var(--a2); }
.blaettern-sprung { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 var(--a2); }
.blaettern-sprung label { display: inline-flex; align-items: center; gap: 0.35rem; }
.blaettern-sprung input { width: 4.2rem; min-height: 2rem; padding: 0.2rem 0.4rem; text-align: center; font-size: var(--gr-14); border-radius: 8px; }
.blaettern-sprung input::-webkit-outer-spin-button, .blaettern-sprung input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.blaettern-sprung input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.blaettern-sprung b { font-weight: 500; color: var(--text-2); }

/* Kurzliste auf der Startseite (letzte Belege, Nachprüfung): jede Zeile ist ein Link zum Beleg */
.kurzliste { display: grid; }
.kurzliste li { border-bottom: 1px solid var(--linie); }
.kurzliste li:last-child { border-bottom: 0; }
.kurzliste a, .kurzliste .zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--a3);
  align-items: center;
  padding: 0.55rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: var(--rund-s);
  color: var(--text);
  transition: background var(--dauer-kurz) var(--kurve);
}
.kurzliste a:hover { background: var(--glas-leicht); text-decoration: none; }
/* Umsätze der Bank: rechts neben dem Betrag der Knopf zum Buchen oder der Beleg */
.kurzliste .zeile { grid-template-columns: auto minmax(0, 1fr) auto 7.5rem; margin: 0; padding-inline: 0; }
.kurzliste .zeile > .knopf, .kurzliste .zeile > .art { justify-self: end; }
/* Kontoauszug: Überschrift je Monat, darunter der Saldo am Monatsende mit dem Abgleich zur Buchhaltung */
.auszug-monat { margin-top: var(--a5); }
.auszug-saldo { display: flex; align-items: baseline; justify-content: flex-end; gap: var(--a4); flex-wrap: wrap; margin: 0; padding: var(--a3) 0 0; border-top: 2px solid var(--linie-tinte); font-size: var(--gr-14); color: var(--text-2); }
.auszug-saldo b { font-size: var(--gr-16); color: var(--text); }
.auszug-saldo span:first-child { margin-right: auto; }
.auszug-saldo .icon, .kennziffer small .icon { width: 1rem; height: 1rem; margin-right: 0.25rem; }
.kurzliste .was { min-width: 0; overflow: hidden; line-height: 1.3; font-size: var(--gr-15); }
.kurzliste .was small { display: block; color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.15rem; }
.kurzliste .betrag { white-space: nowrap; font-weight: 500; }
.kurzliste .betrag.plus { color: var(--plus); }
.kurzliste .betrag.minus { color: var(--minus); }
.kurzliste .fahne .icon { width: 1.05rem; height: 1.05rem; }

/* --------------------------------------------------------------- Kennzahlen */

.kennzahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a4); margin-bottom: var(--a4); }
.kennzahl {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--a4) var(--a5);
  border-radius: var(--rund);
  color: var(--text);
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve);
}
a.kennzahl:hover { text-decoration: none; transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--kante), var(--schatten-2); }
.kennzahl .name { display: flex; align-items: center; gap: 0.45rem; }
.kennzahl .name .icon { width: 1rem; height: 1rem; }
.kennzahl .wert { font: 600 var(--gr-32) / 1.05 var(--schrift-titel); letter-spacing: -0.03em; text-shadow: var(--leuchten); }
.kennzahl .wert small { font-size: 0.55em; font-weight: 500; color: var(--text-leise); margin-left: 0.15em; letter-spacing: 0; text-shadow: none; }
.kennzahl .unten { display: flex; align-items: center; gap: 0.6rem; font-size: var(--gr-14); color: var(--text-leise); flex-wrap: wrap; }
.kennzahl .unten.einzeilig { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kennzahl .wert.datum { font-size: var(--gr-28); }
.kennzahl .funke { position: absolute; right: var(--a5); top: var(--a4); width: 5rem; height: 1.6rem; }
.funke path { fill: none; stroke: var(--chart-1); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.funke .flaeche { fill: var(--chart-1); opacity: 0.08; stroke: none; }
.funke circle { fill: var(--chart-1); }

/* ------------------------------------------------------------------- Charts */

.chart { position: relative; }
.chart svg { width: 100%; height: auto; overflow: visible; font-family: var(--schrift-text); }
.chart text { fill: var(--text-leise); font-size: 12px; }
.chart .raster { stroke: var(--chart-raster); stroke-width: 1; shape-rendering: crispEdges; }
.chart .null { stroke: var(--linie-stark); stroke-width: 1; shape-rendering: crispEdges; }
.chart .heute { stroke: var(--linie-stark); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .saeule.einnahme { fill: var(--chart-plus); }
.chart .saeule.ausgabe { fill: var(--chart-minus); }
.chart .saeule.jahr { fill: var(--chart-1); }
.chart .saeule.vorjahr { fill: var(--chart-2); opacity: 0.75; }
.chart .glanz { opacity: calc(0.55 * var(--dunkel)); }
.chart .zeiger { fill: var(--chart-flaeche); }
.chart .linie-1 { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .linie-2 { fill: none; stroke: var(--chart-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 5 5; }
.chart .flaeche-1 { fill: var(--chart-flaeche); }
.chart .punkt-1 { fill: var(--chart-1); stroke: var(--flaeche); stroke-width: 2; }
.chart .punkt-2 { fill: var(--chart-2); stroke: var(--flaeche); stroke-width: 2; }
.chart .marke { fill: var(--text); font-family: var(--schrift-titel); font-weight: 500; }
.chart .wert {
  fill: var(--text);
  font-family: var(--schrift-titel);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--glas-deckend);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.chart g[tabindex] { outline: 0; cursor: default; }
.chart g[tabindex]:hover .zeiger, .chart g[tabindex]:focus .zeiger { fill: var(--tinte-flaeche); }
.chart .saeule-gruppe { transform-box: fill-box; transform-origin: bottom; animation: wachsen var(--dauer-lang) var(--kurve) both; }
/* Linien, Flächen und Beschriftungen lassen den Zeiger zu den Gruppen durch */
.chart .flaeche-1, .chart .linie-1, .chart .linie-2, .chart .wert, .chart .achse, .chart .glanz, .chart .punkt-2, .chart .ende { pointer-events: none; }

/* Verlauf: der Punkt eines Monats erscheint erst unter dem Zeiger oder mit Fokus; beim ersten
   Aufbau zeichnet sich die Linie, Fläche, Vorjahr und Beschriftungen blenden ein */
.chart.verlauf svg { max-width: 32rem; }
.chart.verlauf .punkt-gruppe circle { opacity: 0; transition: opacity var(--dauer-kurz) var(--kurve); }
.chart.verlauf .punkt-gruppe:hover circle, .chart.verlauf .punkt-gruppe:focus circle { opacity: 1; }
.chart.verlauf .linie-1 { stroke-dasharray: 1000; animation: zeichnen 600ms var(--kurve) both; }
.chart.verlauf .flaeche-1, .chart.verlauf .linie-2, .chart.verlauf .punkt-2, .chart.verlauf .ende, .chart .wert { animation: einblenden var(--dauer) var(--kurve) 300ms both; }

/* Quartale: gewählte in Tinte, Erstattung nach unten in Grün, die Säulen wachsen nacheinander */
.chart.quartale svg { max-height: 12rem; }
.chart.quartale .saeule.erstattung { fill: var(--chart-plus); }
.chart.quartale .saeule-gruppe.unten { transform-origin: top; }
.chart.quartale g:nth-of-type(2) { animation-delay: 20ms; }
.chart.quartale g:nth-of-type(3) { animation-delay: 40ms; }
.chart.quartale g:nth-of-type(4) { animation-delay: 60ms; }
.chart.quartale g:nth-of-type(5) { animation-delay: 80ms; }
.chart.quartale g:nth-of-type(6) { animation-delay: 100ms; }
.chart.quartale g:nth-of-type(7) { animation-delay: 120ms; }
.chart.quartale g:nth-of-type(8) { animation-delay: 140ms; }

/* Tooltip: deckend, umgekehrt zum Modus, Position per setProperty(--x, --y) */
.chart-tipp {
  --x: 0px;
  --y: 0px;
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 5;
  min-width: 11rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--rund-s);
  background: var(--tipp-grund);
  color: var(--tipp-text);
  box-shadow: var(--schatten-2);
  font-size: var(--gr-13);
  pointer-events: none;
}
.chart-tipp b { display: block; font-family: var(--schrift-titel); font-weight: 500; font-size: var(--gr-14); margin-bottom: 0.25rem; }
.chart-tipp div { display: flex; justify-content: space-between; gap: var(--a4); color: var(--tipp-leise); }
.chart-tipp div span:last-child { font-family: var(--schrift-titel); font-variant-numeric: tabular-nums; font-weight: 450; color: var(--tipp-text); }
.chart-tipp .punkt { width: 0.5rem; height: 0.5rem; box-shadow: none; margin-right: 0.35rem; vertical-align: 0.05em; }

.legende { display: flex; gap: var(--a4); flex-wrap: wrap; font-size: var(--gr-13); color: var(--text-2); }
.legende span { display: inline-flex; align-items: center; gap: 0.45rem; }
.legende i { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; }
.legende i.einnahme { background: var(--chart-plus); }
.legende i.ausgabe { background: var(--chart-minus); }
.legende i.linie-1 { height: 2px; width: 1.1rem; border-radius: 1px; background: var(--chart-1); }
.legende i.linie-2 { height: 0; width: 1.1rem; border-top: 2px dashed var(--chart-2); border-radius: 0; }
.legende i.jahr { background: var(--chart-1); }
.legende i.vorjahr { background: var(--chart-2); opacity: 0.75; }
.legende i.erstattung { background: var(--chart-plus); }

/* Werte unter dem Chart am Handy (ersetzt den schwebenden Tooltip) */
.chart-werte { display: none; }

/* Balken und Doppelbalken (Breiten als SVG-Attribute) */
.balken { display: block; width: 100%; height: 6px; }
.balken .spur { fill: var(--tinte-flaeche); }
.balken .jahr { fill: var(--chart-1); }
.balken .vorjahr { fill: var(--chart-2); opacity: 0.75; }
.doppelbalken { width: 9rem; height: 0.9rem; display: block; }
.doppelbalken .jahr { fill: var(--chart-1); }
.doppelbalken .vorjahr { fill: var(--chart-2); opacity: 0.75; }

/* Zahllast: eine Zahl, darunter der Rechenweg */
.zahllast { display: grid; gap: var(--a3); }
.zahllast .held, .betrag-gross strong { font: 600 var(--gr-40) / 1 var(--schrift-titel); letter-spacing: -0.03em; text-shadow: var(--leuchten); }
.zahllast .held small { font-size: 0.45em; font-weight: 500; color: var(--text-leise); margin-left: 0.2em; text-shadow: none; }
.zahllast dl { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; color: var(--text-2); }
.zahllast dt { display: flex; align-items: center; gap: 0.45rem; }
.zahllast dt .icon { color: var(--text-leise); width: 1rem; height: 1rem; }
.zahllast dd { text-align: right; color: var(--text); }
.zahllast dl .trenner { grid-column: 1 / -1; border-top: 1px solid var(--linie); }
.zahllast .quartal { display: flex; align-items: center; justify-content: space-between; gap: var(--a2); color: var(--text-leise); font-size: var(--gr-14); flex-wrap: wrap; }
.zahllast .quartal span { display: inline-flex; align-items: center; gap: 0.35rem; }
.zahllast p:last-child { margin: 0; }

/* Jahreswahl der Startseite und die Schnellzugriffe unter der Nachprüfung */
.jahreswahl { display: flex; align-items: center; gap: var(--a3); margin-bottom: var(--a4); }
.jahreswahl .schnellwahl { margin-left: 0; }
.schnellzugriffe { margin-top: var(--a4); padding-top: var(--a4); border-top: 1px solid var(--linie); }
.schnellzugriffe h3 { margin-bottom: var(--a3); }

/* Vergleichsbalken unter dem Verlauf: Jahr gegen Vorjahr mit Beträgen */
.vergleich {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.45rem var(--a3);
  align-items: center;
  margin-top: var(--a4);
  padding-top: var(--a3);
  border-top: 1px solid var(--linie);
  font-size: var(--gr-14);
}
.vergleich .jahrname { font-family: var(--schrift-titel); font-weight: 500; color: var(--text-2); }
.vergleich .betrag { text-align: right; font-weight: 500; }
.vergleich .balken { height: 6px; }

/* ------------------------------------------------------------- Auswertungen */

.tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--pille); background: var(--tinte-flaeche); }
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: var(--pille);
  color: var(--text-2);
  font: 500 var(--gr-15) / 1.2 var(--schrift-titel);
  white-space: nowrap;
}
.tabs a .icon { width: 1rem; height: 1rem; }
.tabs a:hover { text-decoration: none; color: var(--text); }
.tabs a[aria-current="page"] { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten-knopf); }

.zeitraum { display: flex; align-items: flex-end; gap: var(--a4); flex-wrap: wrap; }
.zeitraum .feld { width: 11rem; }
.zeitraum .feld.konto { width: 16rem; }
.schnellwahl { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-left: auto; align-self: center; }
.schnellwahl a {
  padding: 0.32rem 0.8rem;
  border-radius: var(--pille);
  border: 1px solid var(--rand);
  background: var(--glas-leicht);
  color: var(--text-2);
  font: 500 var(--gr-14) / 1.3 var(--schrift-titel);
  transition: background var(--dauer-kurz), color var(--dauer-kurz);
}
.schnellwahl a[aria-current="true"] { background: var(--akzent); border-color: transparent; color: var(--akzent-text); box-shadow: var(--schatten-knopf); }
/* Zeiträume in Gruppen je Jahr: die Jahrespille, daneben Q1 bis Q4 in einem Segment */
.schnellwahl .gruppe { display: inline-flex; gap: 0.2rem; align-items: center; padding: 0.2rem; border-radius: var(--pille); background: var(--tinte-flaeche); }
.schnellwahl .gruppe a { border-color: transparent; background: none; }
.schnellwahl .gruppe a:first-child { background: var(--glas-leicht); border-color: var(--rand); }
.schnellwahl .gruppe a:hover { background: var(--tinte-flaeche-stark); }
.schnellwahl .gruppe a[aria-current="true"] { background: var(--akzent); color: var(--akzent-text); }

/* Die Zeitraumkarte über jeder Auswertung: Felder links, Schnellwahl rechts */
.zeitraum-karte { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--a4) var(--a5); }
.zeitraum-karte .zeitraum { flex: 0 1 auto; }
.zeitraum-karte .schnellwahl { margin-left: auto; align-self: flex-end; gap: var(--a3); }

/* Sprungleiste des Kontenblatts: zeigt das Konto, das gerade oben steht, die Pfeile springen zum
   Nachbarn. Beim Scrollen hängt sie bündig unter der Kopfzeile (.klebt setzt das Skript). */
.sprungleiste {
  position: sticky;
  top: var(--kopf-hoehe);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--a2);
  padding: 0.4rem 0.5rem;
  margin-bottom: var(--a4);
  border-radius: var(--rund);
}
.sprungleiste.klebt { border-radius: 0 0 var(--rund) var(--rund); border-top-color: transparent; background: var(--glas-deckend); }
.sprungleiste .knopf.rund { padding: 0.4rem; }
.sprung-ort { display: flex; align-items: baseline; gap: 0.5rem; flex: 1; min-width: 0; margin: 0 var(--a2); font: 500 var(--gr-16) / 1.3 var(--schrift-titel); white-space: nowrap; }
.sprung-ort .zahl { color: var(--text-leise); font-weight: 450; }
.sprung-ort strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.sprung-ort small { color: var(--text-leise); font: 400 var(--gr-13) / 1.3 var(--schrift-text); }

/* Die Liste aller Konten der Seite: Popover des Browsers in der Mitte, Konten in Spalten */
.sprungliste { width: min(62rem, calc(100vw - 2 * var(--a4))); max-height: min(72dvh, 44rem); padding: var(--a5); border-radius: var(--rund-l); color: var(--text); overflow-y: auto; }
.sprungliste:popover-open { animation: dialog-auf var(--dauer-lang) var(--kurve-feder); }
.sprungliste::backdrop { background: var(--vorhang-leicht); }
.sprungliste h2 { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: var(--a4); }
.sprungliste ul { columns: 17rem; column-gap: var(--a3); }
.sprungliste li { break-inside: avoid; padding-bottom: 0.15rem; }
.sprungliste a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--rund-s);
  color: var(--text-2);
  font: 500 var(--gr-14) / 1.3 var(--schrift-titel);
  transition: background var(--dauer-kurz), color var(--dauer-kurz);
}
.sprungliste a .zahl { color: var(--text-leise); min-width: 2.4rem; }
.sprungliste a[aria-current="true"] .zahl { color: inherit; opacity: 0.75; }

/* Kontenblatt: Karte je Konto mit Saldo im Kopf, Belegnummer als Link in die Schublade */
.blatt-konto { scroll-margin-top: 3.25rem; }
.blatt-konto .kartenkopf h2 .zahl { font-weight: 450; }
.blatt-saldo { display: inline-flex; align-items: baseline; gap: 0.6rem; margin: 0; }
.blatt-saldo b { font: 600 var(--gr-18) / 1 var(--schrift-titel); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.blatt-tabelle td.z-datum, .blatt-tabelle td.z-nr { font: 450 var(--gr-14) / 1.4 var(--schrift-titel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.blatt-tabelle td.z-nr a { color: var(--text-2); border-bottom: 1px dotted var(--linie-stark); }
.blatt-tabelle td.z-nr a:hover { color: var(--text); text-decoration: none; border-bottom-color: var(--text); }
.blatt-tabelle td.zweck { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontrollsumme > span:first-child small { text-transform: none; letter-spacing: 0; margin-left: var(--a2); }

/* Voranmeldung: vier Felder mit Kennzahl */
.kennziffern { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a4); }
.kennziffer { padding: var(--a4); border-radius: var(--rund-s); border: 1px solid var(--linie); background: var(--glas-leicht); display: grid; gap: 0.3rem; align-content: start; }
.kennziffer > span { font-size: var(--gr-14); color: var(--text-leise); display: flex; justify-content: space-between; gap: var(--a2); align-items: center; }
.kennziffer b { font: 600 var(--gr-24) / 1.1 var(--schrift-titel); color: var(--text); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kennziffer small { color: var(--text-leise); }
.kennziffern.frei { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-bottom: var(--a4); }
.voranmeldung .kennziffer b { font-size: var(--gr-28); letter-spacing: -0.02em; line-height: 1.05; }
.voranmeldung .kennziffer b small { font-size: 0.5em; font-weight: 500; color: var(--text-leise); }

.ergebnis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a4);
  flex-wrap: wrap;
  margin-top: var(--a4);
  padding-top: var(--a4);
  border-top: 2px solid var(--linie-tinte);
}
.ergebnis > span:first-child { font-size: var(--gr-12); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-leise); display: inline-flex; align-items: center; gap: 0.5rem; }
.ergebnis strong { font: 600 var(--gr-32) / 1 var(--schrift-titel); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-shadow: var(--leuchten); }
.karte.ergebnis { margin-top: 0; padding-top: var(--a5); border-top-width: 1px; border-top-color: var(--rand); }

/* EÜR: Vorjahr leise, Differenz und Veränderung in einer Zelle, Doppelbalken rechts */
.euer td.balken-zelle { width: 9.5rem; }
.euer th.vorjahr, .euer td.vorjahr { color: var(--text-leise); }
.euer tr.nur-vorjahr td.betrag { color: var(--text-leise); font-weight: 450; }
.euer td.differenz > div { display: flex; justify-content: flex-end; align-items: center; gap: var(--a3); white-space: nowrap; }
.euer td.differenz .delta, .euer td.differenz .leise { min-width: 5rem; justify-content: center; text-align: center; }
.euer td.differenz .leise { display: inline-block; }
.euer td:first-child a { display: inline-flex; gap: 0.4rem; align-items: baseline; flex-wrap: wrap; }
.euer td:first-child a:hover { text-decoration: underline; color: var(--text); }
.euer td:first-child a:hover .zahl { color: var(--text); }

/* Ergebnis der EÜR: Gewinn oder Verlust groß, rechts das Vorjahr mit Delta */
.ergebnis-karte { display: flex; align-items: center; justify-content: space-between; gap: var(--a4) var(--a6); flex-wrap: wrap; }
.ergebnis-wert { display: grid; gap: 0.6rem; }
.ergebnis-wert .ueberschrift { display: inline-flex; align-items: center; gap: 0.5rem; }
.ergebnis-wert .ueberschrift .icon { width: 1rem; height: 1rem; }
.ergebnis-wert strong { font: 600 var(--gr-32) / 1 var(--schrift-titel); letter-spacing: -0.02em; text-shadow: var(--leuchten); }
.ergebnis-wert strong small { font-size: 0.5em; font-weight: 500; color: var(--text-leise); text-shadow: none; }
.ergebnis-vorjahr { display: grid; gap: 0.4rem; justify-items: end; text-align: right; font-size: var(--gr-14); }
.ergebnis-vorjahr .vergleich { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0; border: 0; }
.ergebnis-vorjahr .zahl { font-size: var(--gr-18); font-weight: 500; color: var(--text); }

/* ------------------------------------------------------------------- KI */

/* Das Overlay jeder Anfrage an die KI: Logo, Fortschritt, Zeit und der Weg der Anfrage */
.ki-overlay { width: min(34rem, 100%); border-radius: var(--rund-l); padding: var(--a5); color: var(--text); animation: dialog-auf var(--dauer-lang) var(--kurve-feder); }
.ki-overlay::backdrop { background: var(--vorhang); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ki-kopf { display: flex; align-items: center; gap: var(--a4); margin-bottom: var(--a4); }
.ki-kopf h2 { font-size: var(--gr-20); font-weight: 600; }
.ki-kopf p { color: var(--text-2); margin: 0.15rem 0 0; font-size: var(--gr-15); }
/* Das Zeichen von OpenAI ist schwarz; auf der weißen Scheibe trägt es in hell und dunkel. */
.ki-logo { flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--papier); box-shadow: var(--schatten-1); animation: ki-puls 1.6s var(--kurve) infinite; }
.ki-overlay.fertig .ki-logo, .ki-overlay.fehler .ki-logo { animation: none; }
.ki-balken { height: 0.45rem; border-radius: var(--pille); background: var(--tinte-flaeche); overflow: hidden; }
.ki-balken i { display: block; height: 100%; width: var(--fortschritt, 0%); border-radius: inherit; background: var(--akzent); transition: width 150ms linear; }
.ki-overlay.fertig .ki-balken i { background: var(--plus); }
.ki-overlay.fehler .ki-balken i { background: var(--minus); }
.ki-stand { display: flex; justify-content: space-between; align-items: baseline; gap: var(--a3); margin: var(--a2) 0 var(--a4); font-size: var(--gr-14); color: var(--text-2); }
.ki-stand b { font-size: var(--gr-16); color: var(--text); white-space: nowrap; }
.ki-overlay.fehler .ki-stand span { color: var(--minus); }
.ki-weg { display: grid; gap: 0; margin-bottom: var(--a4); }
.ki-weg li { position: relative; display: grid; gap: 0.1rem; padding: 0 0 var(--a3) 1.6rem; }
.ki-weg li::before { content: ""; position: absolute; left: 0.25rem; top: 0.35rem; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--akzent); }
.ki-weg li:not(:last-child)::after { content: ""; position: absolute; left: 0.5rem; top: 1rem; bottom: 0; width: 2px; background: var(--linie-stark); }
.ki-weg li:last-child { padding-bottom: 0; }
.ki-weg b { font: 500 var(--gr-15) / 1.3 var(--schrift-titel); }
.ki-weg small { color: var(--text-leise); font-size: var(--gr-13); overflow-wrap: anywhere; }
@keyframes ki-puls { 50% { transform: scale(1.08); box-shadow: var(--schatten-2); } }

/* Unter dem Hinweis zum Umsatz: der Knopf zur KI und ihre Antwort */
.ki-zeile { display: flex; align-items: center; gap: var(--a3); flex-wrap: wrap; margin: calc(-1 * var(--a2)) 0 var(--a4); }
.ki-antwort { display: flex; align-items: baseline; gap: var(--a2); flex-wrap: wrap; flex: 1; min-width: 16rem; margin: 0; padding: 0.55rem 0.9rem; border-radius: var(--rund-s); background: var(--tinte-flaeche); font-size: var(--gr-15); color: var(--text-2); }
.ki-antwort strong { font-family: var(--schrift-titel); font-weight: 500; color: var(--text); }

/* --------------------------------------------------------- Schublade (Beleg) */

.schublade-vorhang { position: fixed; inset: 0; z-index: 49; background: var(--vorhang-leicht); animation: einblenden var(--dauer) var(--kurve); }
.schublade {
  position: fixed;
  z-index: 50;
  top: var(--a3);
  right: var(--a3);
  bottom: var(--a3);
  width: min(var(--schublade-breite), calc(100vw - 2 * var(--a3)));
  display: flex;
  flex-direction: column;
  border-radius: var(--rund-l);
  animation: schublade-auf var(--dauer-lang) var(--kurve);
  overflow: hidden;
}
.schublade.geht, .schublade.geht + .schublade-vorhang, .schublade-vorhang.geht { animation: ausblenden var(--dauer-kurz) var(--kurve-aus) forwards; }
.schublade-kopf { display: flex; align-items: center; gap: var(--a3); padding: var(--a4) var(--a5); border-bottom: 1px solid var(--linie); }
.schublade-kopf h2 { font-size: var(--gr-18); font-weight: 600; display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; }
.schublade-kopf h2 .icon { color: var(--text-leise); align-self: center; }
.schublade-kopf .rechts { margin-left: auto; display: flex; gap: 0.15rem; }
.schublade-inhalt { padding: var(--a5); overflow-y: auto; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--a5); align-content: start; }
.schublade-fuss { display: flex; align-items: center; gap: var(--a2); padding: var(--a4) var(--a5); border-top: 1px solid var(--linie); }
.schublade-fuss .wahl-tasten { margin-left: auto; }

.betrag-gross { display: flex; align-items: baseline; gap: var(--a3); flex-wrap: wrap; }
.betrag-gross .art { margin-left: auto; }

.belegdaten { display: grid; grid-template-columns: auto 1fr; gap: 0.45rem var(--a4); font-size: var(--gr-15); }
.belegdaten dt { color: var(--text-leise); display: flex; align-items: center; gap: 0.4rem; }
.belegdaten dt .icon { width: 1rem; height: 1rem; }
.belegdaten dd { min-width: 0; overflow-wrap: anywhere; }
.belegdaten form { display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap; }
.belegdaten dd.zahl { font-size: var(--gr-15); }
.beleg-abschnitt h3.ueberschrift { margin-bottom: var(--a3); }

/* T-Konten: Decke und Steg des T in Tinte. Soll links, Haben rechts, jede Seite stapelt ihre
   Konten; reicht die Breite nicht für zwei ganze Kontonamen, stehen die Seiten untereinander. */
.tkonten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--a4); align-items: start; }
.tseite { display: grid; gap: var(--a4); min-width: 0; }
.tkonto { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--gr-14); }
.tkonto caption {
  position: static;
  text-align: left;
  font: 500 var(--gr-14) / 1.3 var(--schrift-titel);
  color: var(--text);
  padding: 0 0 0.35rem;
  overflow-wrap: anywhere;
}
.tkonto caption small { color: var(--text-leise); font-weight: 450; font-family: var(--schrift-titel); font-variant-numeric: tabular-nums; margin-right: 0.4rem; }
.tkonto th { font-size: var(--gr-11); letter-spacing: 0.1em; padding: 0.4rem 0.5rem 0.2rem; border-top: 2px solid var(--linie-tinte); border-bottom: 0; text-align: left; }
.tkonto th:last-child { text-align: right; }
.tkonto th:first-child, .tkonto td:first-child { border-right: 2px solid var(--linie-tinte); }
.tkonto td { padding: 0.2rem 0.5rem 0.5rem; border-bottom: 0; font-size: var(--gr-14); color: var(--text); min-height: 2rem; }
.tkonto td:last-child { text-align: right; }
.tkonto tr:hover { background: none; }

.sprungziele { display: flex; gap: var(--a2); flex-wrap: wrap; }

/* Belegkarte auf /belege/<nr> ohne Skript: derselbe Inhalt wie in der Schublade */
.beleg-karte .beleg-inhalt { display: grid; gap: var(--a5); max-width: 42rem; }
.beleg-karte .beleg-zurueck { margin-top: var(--a5); }
.beleg-karte .beleg-zurueck a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-2); }

/* ------------------------------------------------------------------ Dialog */

/* Der Vorhang: als Element (.vorhang) oder als ::backdrop eines nativen dialog */
.vorhang {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--vorhang);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  display: grid;
  place-items: center;
  padding: var(--a4);
  animation: einblenden var(--dauer) var(--kurve);
}
dialog::backdrop {
  background: var(--vorhang);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  animation: einblenden var(--dauer) var(--kurve);
}
dialog { color: var(--text); padding: 0; margin: auto; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); }
dialog.geht { animation: ausblenden var(--dauer-kurz) var(--kurve-aus) forwards; }
dialog.geht::backdrop { animation: ausblenden var(--dauer-kurz) var(--kurve-aus) forwards; }

.dialog {
  width: min(var(--dialog-breite), 100%);
  border-radius: var(--rund-l);
  padding: var(--a5);
  animation: dialog-auf var(--dauer-lang) var(--kurve-feder);
  transform-origin: 50% 60%;
}
.dialog .zeichen {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--minus-flaeche);
  color: var(--minus);
  margin-bottom: var(--a4);
  box-shadow: var(--leuchten-minus);
  animation: wackeln 900ms var(--kurve) 200ms;
}
.dialog .zeichen.ruhig { background: var(--tinte-flaeche); color: var(--text-2); box-shadow: none; animation: none; }
.dialog .zeichen .icon { width: 1.5rem; height: 1.5rem; }
.dialog h2 { font-size: var(--gr-20); font-weight: 600; margin-bottom: var(--a2); }
.dialog p { color: var(--text-2); }
.dialog .belegzeile {
  margin: var(--a4) 0;
  padding: var(--a3) var(--a4);
  border-radius: var(--rund-s);
  background: var(--tinte-flaeche);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem var(--a3);
  align-items: center;
}
.dialog .belegzeile strong { font-family: var(--schrift-titel); font-weight: 500; grid-column: 1; }
.dialog .belegzeile .leise { grid-column: 1; font-size: var(--gr-14); }
.dialog .belegzeile .betrag { font: 600 var(--gr-18) / 1.2 var(--schrift-titel); font-variant-numeric: tabular-nums; grid-column: 2; grid-row: 1 / 3; white-space: nowrap; }
.dialog .reihe { justify-content: flex-end; margin-top: var(--a4); }

/* Hilfe mit allen Kürzeln: Gruppen nebeneinander, so viele, wie der breite Dialog fasst */
.dialog.breit { width: min(56rem, 100%); }
.kuerzel { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem var(--a4); align-items: center; margin: var(--a4) 0 0; font-size: var(--gr-15); color: var(--text-2); }
.kuerzel dt { display: flex; gap: 0.25rem; white-space: nowrap; }
.kuerzel-gruppen { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: var(--a5) var(--a6); margin-top: var(--a5); }
.kuerzel-gruppe h3 { margin-bottom: var(--a3); }
.kuerzel-gruppe .kuerzel { margin-top: 0; }

/* ------------------------------------------------------------------- Toast */

.toast-stapel {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: var(--a5);
  translate: -50% 0;
  display: grid;
  gap: var(--a2);
  width: max-content;
  max-width: calc(100vw - 2rem);
}
.toast-stapel:empty { display: none; }
.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--a3);
  padding: 0.65rem 0.75rem 0.65rem 0.85rem;
  min-width: 22rem;
  max-width: 100%;
  background: var(--glas-dunkel);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid var(--toast-rand);
  border-radius: var(--rund);
  box-shadow: inset 0 1px 0 var(--toast-kante), var(--schatten-2);
  animation: toast-auf var(--dauer-lang) var(--kurve-feder);
  overflow: hidden;
}
.toast.geht { animation: ausblenden var(--dauer-kurz) var(--kurve-aus) forwards; }
/* Der Toast ist in beiden Modi dunkel. Sein Inhalt bekommt das dunkle Schema, damit die Tokens
   dort ihre dunklen Werte liefern; der Grund selbst folgt dem Modus der Seite (--glas-dunkel). */
.toast > * { color-scheme: dark; color: var(--text); }
.toast .zeichen { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--plus-flaeche); color: var(--plus); flex: none; }
.toast .zeichen .icon { width: 1.1rem; height: 1.1rem; }
.toast.geloescht .zeichen, .toast.fehler .zeichen { background: var(--minus-flaeche); color: var(--minus); }
.toast.hinweis .zeichen { background: var(--tinte-flaeche-stark); color: var(--text); }
.toast .text { flex: 1; min-width: 0; line-height: 1.3; }
.toast .text strong { display: block; font-family: var(--schrift-titel); font-weight: 500; color: var(--akzent-hover); font-size: var(--gr-15); }
.toast .text small { color: var(--text-leise); }
.toast .knopf {
  flex: none;
  background: var(--tinte-flaeche-stark);
  border-color: var(--linie-stark);
  color: var(--akzent-hover);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.toast .knopf:hover { background: var(--linie-stark); }
.toast .schliessen { flex: none; background: none; border: 0; color: var(--text-leise); padding: 0.3rem; display: grid; cursor: pointer; border-radius: 8px; }
.toast .schliessen:hover { background: var(--tinte-flaeche-stark); color: var(--akzent-hover); }
.toast .frist { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--toast-frist); transform-origin: left; animation: ablaufen var(--frist, 8s) linear forwards; }
.toast:hover .frist, .toast:focus-within .frist { animation-play-state: paused; }

/* ---------------------------------------------------------- Befehlspalette */

dialog.palette { margin: 12vh auto auto; }
dialog.palette::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.palette {
  width: min(var(--palette-breite), 100%);
  border-radius: var(--rund-l);
  overflow: hidden;
  animation: dialog-auf var(--dauer) var(--kurve);
}
.palette-suche { display: flex; align-items: center; gap: var(--a3); padding: var(--a3) var(--a4); border-bottom: 1px solid var(--linie); }
.palette-suche .icon { color: var(--text-leise); width: 1.3rem; height: 1.3rem; }
.palette-suche input { border: 0; background: none; box-shadow: none; font: 400 var(--gr-20) / 1.3 var(--schrift-titel); padding: 0.3rem 0; min-height: 0; }
.palette-suche input:focus { box-shadow: none; background: none; }
.palette-liste { max-height: 31rem; overflow-y: auto; padding: var(--a2); }
.palette-liste h3 { font: 400 var(--gr-12) / 1 var(--schrift-text); text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-leise); margin: var(--a3) var(--a3) var(--a2); }
.palette-liste li { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.75rem; border-radius: var(--rund-s); color: var(--text-2); cursor: pointer; }
.palette-liste li .icon { color: var(--text-leise); }
.palette-liste li .nr { color: var(--text-leise); }
.palette-liste li .zusatz { margin-left: auto; color: var(--text-leise); font-size: var(--gr-13); white-space: nowrap; }
.palette-liste li .zusatz + kbd, .palette-liste li kbd:only-of-type { margin-left: auto; }
.palette-liste li .zusatz + kbd { margin-left: 0.5rem; }
.palette-liste li b { font-family: var(--schrift-titel); font-weight: 500; color: var(--text); }
.palette-liste li[aria-selected="true"] { background: var(--akzent); color: var(--akzent-text); }
.palette-liste li[aria-selected="true"] .icon, .palette-liste li[aria-selected="true"] .nr, .palette-liste li[aria-selected="true"] .zusatz, .palette-liste li[aria-selected="true"] b { color: inherit; opacity: 0.8; }
.palette-liste li[aria-selected="true"] kbd { color: inherit; border-color: transparent; background: var(--glanz); }
.palette-liste .leer-zustand { padding: var(--a5) var(--a4); }
.palette-fuss { display: flex; gap: var(--a4); padding: var(--a2) var(--a4); border-top: 1px solid var(--linie); color: var(--text-leise); font-size: var(--gr-13); }
.palette-fuss span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* --------------------------------------------------------------- Anmeldung */

body.leer { display: block; padding: var(--a6) var(--a4); }
.anmeldung { max-width: 56rem; margin: 6vh auto 0; display: grid; justify-items: center; }
.anmeldung-kopf { display: flex; flex-direction: column; align-items: center; gap: var(--a3); margin-bottom: var(--a6); color: var(--logo); }
.anmeldung-kopf .logo { width: 9rem; }
.anmeldung-kopf .wort { font-size: var(--gr-32); }
.schritt { padding: var(--a6); margin: 0; border-radius: var(--rund-l); width: 100%; max-width: 26rem; }
.schritt .stufe { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: var(--a3); }
.schritt .stufe i {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 500 var(--gr-12) / 1 var(--schrift-titel);
  font-style: normal;
  background: var(--akzent);
  color: var(--akzent-text);
}
.schritt h1 { font-size: var(--gr-24); margin-bottom: var(--a2); }
.schritt > p { margin-bottom: var(--a4); color: var(--text-2); }
.schritt > p.meldung { margin-bottom: var(--a4); }
.schritt form { display: grid; gap: var(--a4); }
.schritt .knopf.haupt { margin-top: var(--a2); width: 100%; padding-top: 0.8rem; padding-bottom: 0.8rem; font-size: var(--gr-16); }
.schritt .nebenbei { display: flex; justify-content: space-between; margin-top: var(--a4); }
.schritt .nebenbei button { background: none; border: 0; padding: 0; color: var(--text-leise); cursor: pointer; }
.schritt .nebenbei button:hover { color: var(--text); text-decoration: underline; }
.schritt.hinweis { display: grid; justify-items: center; text-align: center; gap: var(--a3); }
.schritt.hinweis .icon.gross { width: 2rem; height: 2rem; color: var(--text-leise); }
.schritt.hinweis h1, .schritt.hinweis > p { margin: 0; }
.schritt.hinweis .knopf { width: auto; margin-top: var(--a2); }
.anmeldung-fuss { margin-top: var(--a5); display: flex; justify-content: center; align-items: center; gap: 0.4rem; font-size: var(--gr-14); color: var(--text-leise); }

/* Der Anmeldecode: ein Feld für den Server; das Skript legt sechs Ziffernfelder darüber. */
input.code { font: 600 var(--gr-32) / 1.2 var(--schrift-titel); letter-spacing: 0.45em; text-align: center; padding: 0.6rem 0 0.6rem 0.45em; font-variant-numeric: tabular-nums; text-shadow: var(--leuchten); }
input.code.verdeckt { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; border: 0; overflow: hidden; }
.code-felder { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; }
.code-felder input {
  font: 600 var(--gr-32) / 1 var(--schrift-titel);
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0.5rem 0;
  min-height: 3.6rem;
  text-shadow: var(--leuchten);
  caret-color: transparent;
}
.code-felder input:nth-child(4) { margin-left: 0.3rem; }
.code-felder input:nth-child(3) { margin-right: 0.3rem; }

/* Schieber: Das Karo muss ins markierte Feld. Das Skript setzt nur --griff-x und --ziel-x. */
.schieber { --griff-x: 0px; --ziel-x: 0px; user-select: none; -webkit-user-select: none; display: grid; gap: 0.45rem; }
.schieber-bahn {
  position: relative;
  overflow: hidden;
  height: 3.4rem;
  border-radius: 14px;
  background: var(--tinte-flaeche);
  box-shadow: var(--schatten-innen);
  display: flex;
  align-items: center;
  touch-action: none;
}
.schieber-bahn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--griff-x) + 1.8rem); background: var(--tinte-flaeche); }
.schieber-ziel {
  position: absolute;
  left: calc(5px - 0.3rem);
  top: 50%;
  width: 3.3rem;
  height: 3.3rem;
  margin-top: -1.65rem;
  transform: translateX(var(--ziel-x));
  border: 2px dashed var(--text-leise);
  border-radius: 13px;
  background: var(--glas-leicht);
  transition: border-color var(--dauer-kurz), background var(--dauer-kurz);
}
.schieber.trifft .schieber-ziel { border: 2px solid var(--plus); background: var(--plus-flaeche); }
.schieber-griff {
  position: relative;
  z-index: 1;
  transform: translateX(var(--griff-x));
  width: 2.7rem;
  height: 2.7rem;
  margin-left: 5px;
  flex: none;
  border: 0;
  border-radius: 11px;
  background: var(--akzent);
  color: var(--akzent-text);
  cursor: grab;
  display: grid;
  place-items: center;
  box-shadow: var(--schatten-knopf);
  transition: transform 0s, box-shadow var(--dauer-kurz), background var(--dauer-kurz);
}
.schieber-griff .icon { width: 1.2rem; height: 1.2rem; grid-area: 1 / 1; }
.schieber-griff .icon-check, .schieber.fertig .schieber-griff .icon-arrow-right { display: none; }
.schieber.fertig .schieber-griff .icon-check { display: block; }
.schieber.zieht .schieber-griff { cursor: grabbing; box-shadow: var(--schatten-1); }
.schieber-text { margin: 0; font-size: var(--gr-13); color: var(--text-leise); text-align: center; }
.schieber.fertig .schieber-bahn::before { background: var(--plus-flaeche); }
.schieber.fertig .schieber-ziel { display: none; }
.schieber.fertig .schieber-griff { background: var(--plus); color: var(--auf-farbe); cursor: default; box-shadow: var(--leuchten-plus); }
.schieber.fertig .schieber-text { color: var(--plus); }
.schieber + .knopf.haupt { animation: auftauchen var(--dauer) var(--kurve); }

/* Druckansicht der EÜR: schmal und mittig, Kopf zweispaltig mit Logo, Betrieb und Zeitraum.
   Kontenblatt und Mehrwertsteuer tragen denselben Kopf (.druckkopf), der nur im Druck erscheint. */
.druck { max-width: 48rem; margin: 0 auto; }
.druck > header { margin-bottom: var(--a5); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a3) var(--a5); align-items: start; }
.druck > header .reihe { grid-column: 1 / -1; margin-top: 0; }
.druck .euer .balken-zelle { display: none; }
.druck-logo { width: 9.5rem; height: auto; margin-bottom: var(--a3); }
.druckkopf { display: none; }
.druckkopf-marke { display: grid; gap: 0.3rem; }
.druckkopf-marke h1 { font-size: var(--gr-24); }
.druckkopf-betrieb { text-align: right; font-size: var(--gr-15); display: grid; gap: 0.15rem; }
.auswertung-kopf { margin-bottom: var(--a4); }

/* ---------------------------------------------------------------- Bewegung */

@keyframes auftauchen { from { opacity: 0; translate: 0 -4px; } }
@keyframes einblenden { from { opacity: 0; } }
@keyframes ausblenden { to { opacity: 0; } }
@keyframes dialog-auf { from { opacity: 0; transform: scale(0.94) translateY(10px); } }
@keyframes schublade-auf { from { opacity: 0; transform: translateX(2rem); } }
@keyframes schublade-hoch { from { opacity: 0; transform: translateY(2rem); } }
@keyframes toast-auf { from { opacity: 0; transform: translateY(1.5rem) scale(0.96); } }
@keyframes ablaufen { to { transform: scaleX(0); } }
@keyframes drehen { to { rotate: 360deg; } }
@keyframes einsinken { from { background: var(--plus-flaeche); } to { background: transparent; } }
@keyframes wackeln { 0%, 100% { rotate: 0deg; } 20% { rotate: -8deg; } 40% { rotate: 7deg; } 60% { rotate: -4deg; } 80% { rotate: 2deg; } }
@keyframes wachsen { from { transform: scaleY(0); } }
@keyframes pulsen { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes seite-auf { from { opacity: 0; translate: 0 8px; } }
@keyframes seite-ab { to { opacity: 0; } }
@keyframes zeile-herein { from { opacity: 0; translate: 0 -0.5rem; } }
@keyframes zeichnen { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }

/* Seitenübergang: Der Rahmen bleibt stehen, nur der Inhalt wechselt. */
@view-transition { navigation: auto; }
main { view-transition-name: inhalt; }
::view-transition-old(inhalt) { animation: seite-ab var(--dauer-kurz) ease-in both; }
::view-transition-new(inhalt) { animation: seite-auf var(--dauer) var(--kurve) both; }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after, ::backdrop { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .toast .frist { display: none; }
  /* Ohne Bewegung auch keine Verzögerung, sonst fehlen Säulen und Beschriftung kurz */
  .chart .saeule-gruppe, .chart .linie-1, .chart .flaeche-1, .chart .linie-2, .chart .punkt-2, .chart .ende, .chart .wert { animation-delay: 0ms !important; }
}

/* ------------------------------------------------------------- Bruchpunkte */

/* Ab 90 rem passt das Raster ohne Scrollen, dann klebt sein Tabellenkopf unter der Kopfzeile. */
@media (min-width: 90rem) {
  .raster-karte .tabelle { overflow: visible; }
  .raster thead th { position: sticky; top: var(--kopf-hoehe); z-index: 2; background: var(--glas-deckend); }
}

/* Die SVG-Schrift der Charts skaliert mit der Karte; die Größe je Breite hält sie lesbar. */
@media (max-width: 90rem) {
  .chart.monate text, .chart.verlauf text { font-size: 14px; }
  .kennzahl .funke { width: 3.5rem; }
}

@media (max-width: 80rem) {
  .nebensache { display: none; }
  .belege td.zweck { max-width: 16rem; }
  .spalten.drei.start-unten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .start-unten .karte.verlauf { grid-column: 1 / -1; }
  .chart.verlauf text { font-size: 10px; }
}

@media (max-width: 64rem) {
  .kennzahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spalten.zwei-eins, .spalten.eins-eins, .spalten.drei { grid-template-columns: 1fr; }
  .maske { grid-template-columns: 1fr; }
  .kennziffern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .felder { grid-template-columns: 1fr; gap: 0.3rem; }
  .felder > label:not(:first-child) { margin-top: var(--a3); }
  .feldraster.konten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belegdaten { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .belegdaten dt { margin-top: 0.6rem; }
  .belegdaten dt:first-child { margin-top: 0; }
  .spalten.drei.start-unten { grid-template-columns: 1fr; }
  .chart.monate text { font-size: 16px; }
  .kopf { padding: 0.6rem var(--a5); }
  .inhalt { padding: var(--a5) var(--a5) var(--a7); }
}

/* ------------------------------------------------------------------- Handy */

@media screen and (max-width: 52rem) {
  body { display: block; }
  .leiste, .kopf { display: none; }
  .nur-handy { display: initial; }
  .inhalt { padding: calc(var(--kopfleiste-hoehe) + env(safe-area-inset-top) + var(--a4)) var(--a4) calc(6.5rem + env(safe-area-inset-bottom)); }
  html { scroll-padding-top: calc(var(--kopfleiste-hoehe) + var(--a4)); }
  .seitenkopf { display: block; margin-bottom: var(--a4); }
  .seitenkopf h1 { font-size: var(--gr-24); margin-bottom: var(--a3); }
  .salden { display: grid; grid-template-columns: 1fr 1fr; }
  .saldo { justify-content: space-between; padding: 0.35rem 0.75rem; }
  .saldo dt { font-size: var(--gr-11); letter-spacing: 0.06em; }
  .saldo dd { font-size: var(--gr-14); }
  .wahl-tasten, .knopf kbd, .kennzahl .funke, .suchpille kbd { display: none; }
  input, select, textarea { font-size: 16px; }

  /* Kopfleiste oben: Wortmarke und Suche */
  .kopfleiste {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    min-height: var(--kopfleiste-hoehe);
    display: flex;
    align-items: center;
    gap: var(--a3);
    padding: 0.5rem var(--a4);
    padding-top: calc(0.5rem + env(safe-area-inset-top));
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: 0 1px 0 var(--linie);
  }
  .kopfleiste .marke { flex-direction: row; padding: 0; }
  .kopfleiste .wort { font-size: var(--gr-20); }
  .kopfleiste .rund { margin-left: auto; }

  /* Fußleiste unten: fünf Ziele, Daumen-nah, Buchen erhoben */
  .fussleiste {
    position: fixed;
    z-index: 30;
    left: var(--a3);
    right: var(--a3);
    bottom: calc(var(--a3) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0.35rem;
    border-radius: 22px;
  }
  .fussleiste > a, .fussleiste > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.45rem 0.2rem;
    min-height: 2.75rem;
    border: 0;
    background: none;
    border-radius: 16px;
    color: var(--text-leise);
    font: 500 var(--gr-11) / 1 var(--schrift-titel);
    letter-spacing: 0.03em;
    cursor: pointer;
  }
  .fussleiste > a .icon, .fussleiste > button .icon { width: 1.35rem; height: 1.35rem; }
  .fussleiste > [aria-current="page"] { background: var(--akzent); color: var(--akzent-text); }
  .fussleiste > a:hover { text-decoration: none; }
  .fussleiste a.buchen i {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-top: -1.4rem;
    border-radius: 50%;
    background: var(--akzent);
    color: var(--akzent-text);
    box-shadow: var(--schatten-2), var(--leuchten);
  }
  .fussleiste a.buchen .icon { width: 1.5rem; height: 1.5rem; }

  /* Blatt von unten (Auswerten, Mehr): ein natives Popover über der Fußleiste */
  .blatt:popover-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-height: 85dvh;
    overflow-y: auto;
    padding: var(--a5) var(--a4) calc(var(--a4) + env(safe-area-inset-bottom));
    border-radius: var(--rund-l) var(--rund-l) 0 0;
    border-width: 1px 0 0;
    color: var(--text);
    animation: schublade-hoch var(--dauer-lang) var(--kurve);
  }
  .blatt::backdrop { background: var(--vorhang); animation: einblenden var(--dauer) var(--kurve); }
  /* Griff oben an allem, was von unten kommt */
  .blatt::before, .schublade::before, .bogen::before { content: ""; position: absolute; top: 0.5rem; left: 50%; width: 2.5rem; height: 4px; margin-left: -1.25rem; border-radius: 2px; background: var(--linie-stark); }
  .blatt nav h2:first-child { margin-top: 0; }
  .blatt nav a { padding: 0.7rem 0.8rem; min-height: 2.75rem; font-size: var(--gr-16); }
  .blatt-fuss { border-top: 1px solid var(--linie); margin-top: var(--a4); padding-top: var(--a4); display: grid; gap: var(--a3); justify-items: start; }
  .blatt-fuss .benutzer { width: 100%; }
  .blatt-fuss .logo { margin: var(--a2) 0 0 0.7rem; }

  .karte { padding: var(--a4); }
  .kennzahlen { gap: var(--a3); }
  .kennzahl { padding: var(--a3) var(--a4); }
  .kennzahl .wert { font-size: 1.625rem; }
  .kartenkopf { gap: var(--a3); }
  .suche { width: 100%; }
  .suche input:not(.konto):not([type="checkbox"]) { width: auto; flex: 1 1 10rem; }
  .suche .wahl { width: 100%; flex: 1; }
  .maske-felder { grid-template-columns: 1fr; }
  .maske-fuss { flex-direction: column; align-items: stretch; }
  .maske-fuss .reihe { margin-left: 0; }
  .maske-fuss .reihe .knopf { flex: 1; }
  .schnellwahl { margin-left: 0; }
  .zeitraum .feld, .zeitraum .feld.konto { width: calc(50% - var(--a2)); }
  .zeitraum .knopf { width: 100%; }
  .tabs { display: flex; width: 100%; overflow-x: auto; }
  .tabs a { padding: 0.4rem 0.7rem; font-size: var(--gr-14); flex: 1; justify-content: center; }
  .tabs a .icon { display: none; }
  .chart text { font-size: 22px; }
  .chart-tipp { display: none; }
  .chart-werte { display: flex; gap: var(--a4); justify-content: space-between; margin-top: var(--a3); font-size: var(--gr-13); color: var(--text-leise); }
  .chart-werte b { display: block; color: var(--text); font-family: var(--schrift-titel); font-weight: 500; font-variant-numeric: tabular-nums; }
  .euer td.balken-zelle, .euer .vorjahr, .blatt-tabelle .nebensache { display: none; }
  .zahllast .held { font-size: var(--gr-32); }
  .betrag-gross strong { font-size: var(--gr-32); }
  .ergebnis strong { font-size: var(--gr-28); }
  .kennziffern { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Tabellen scrollen waagerecht, mit Schatten an den Kanten als Hinweis auf mehr */
  .tabelle {
    margin: 0 calc(-1 * var(--a4));
    padding: 0 var(--a4);
    background:
      linear-gradient(to right, var(--glas-deckend) 30%, transparent) left / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--glas-deckend) 30%, transparent) right / 2.5rem 100% no-repeat local,
      linear-gradient(to right, var(--kantenschatten), transparent) left / 0.9rem 100% no-repeat scroll,
      linear-gradient(to left, var(--kantenschatten), transparent) right / 0.9rem 100% no-repeat scroll;
  }

  /* Am Handy oben, unter der Kopfleiste: Unten lägen sie über der Fußleiste und über klebenden Knöpfen. */
  .toast-stapel { left: var(--a4); right: var(--a4); translate: 0 0; top: calc(4.4rem + env(safe-area-inset-top)); bottom: auto; width: auto; max-width: none; }
  .toast { min-width: 0; flex-wrap: wrap; row-gap: var(--a2); }
  .toast .text { flex: 1 1 12rem; }
  .toast .knopf { margin-left: auto; }
  .toast .schliessen { display: none; }

  .schublade {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--rund-l) var(--rund-l) 0 0;
    animation-name: schublade-hoch;
  }
  .schublade-kopf { padding: var(--a5) var(--a4) var(--a3); }
  .schublade-inhalt { padding: var(--a4); gap: var(--a4); }
  .schublade-fuss { padding: var(--a3) var(--a4) calc(var(--a3) + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .schublade-fuss .knopf { flex: 1; }
  dialog.palette { margin: 8vh auto auto; max-width: calc(100vw - 2 * var(--a4)); }
  .palette-liste { max-height: 60dvh; }
  .palette-fuss { display: none; }
  .anmeldung { margin-top: var(--a4); }
  .schritt { padding: var(--a5); }
  .code-felder { gap: 0.35rem; }
  .code-felder input { font-size: var(--gr-28); min-height: 3.2rem; }

  /* Belegliste wird zu Zeilenkarten: Punkt, Datum und Nummer, Zweck, Betrag, Konten. */
  .belege thead { display: none; }
  .belege, .belege tbody { display: block; }
  .belege tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "punkt datum betrag" "punkt zweck betrag" "punkt konten konten";
    column-gap: var(--a3);
    row-gap: 0.1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--linie);
    align-items: center;
  }
  .belege tr:last-child { border-bottom: 0; }
  .belege tbody tr[aria-selected="true"] { box-shadow: none; }
  .belege td { display: block; padding: 0; border: 0; white-space: normal; }
  .belege td.z-punkt { grid-area: punkt; }
  .belege td.z-datum, .blatt-tabelle td.z-datum { grid-area: datum; font-size: var(--gr-13); color: var(--text-leise); }
  .belege td.z-datum .nr::before { content: " · Nr. "; }
  .belege td.zweck, .blatt-tabelle td.zweck { grid-area: zweck; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
  .belege td.z-betrag { grid-area: betrag; font-size: 1.0625rem; font-weight: 500; text-align: right; }
  .belege td.z-konten { grid-area: konten; font-size: var(--gr-13); color: var(--text-leise); text-align: left; display: block; }
  .belege td.z-id, .belege td.z-soll, .belege td.z-haben, .belege td.z-mwst, .belege td.z-netto, .belege td.z-vst, .belege td.z-ust, .belege td.z-belegnr, .belege td.werkzeug { display: none; }
  .belege tr.leer { display: block; padding: 0; }
  /* In der Prüfliste bleibt der Haken erreichbar: unten rechts in der Zeilenkarte; Bearbeiten und Löschen gehen über die Schublade */
  .pruefliste tr { grid-template-areas: "punkt datum betrag" "punkt zweck betrag" "punkt konten werkzeug"; }
  .pruefliste td.werkzeug { display: flex; grid-area: werkzeug; justify-content: flex-end; width: auto; }
  .pruefliste td.werkzeug a { display: none; }
  .pruefliste td.werkzeug .erledigt { width: 2.75rem; height: 2.75rem; opacity: 1; background: var(--plus-flaeche); color: var(--plus); border-radius: 50%; }
  .pruefliste td.werkzeug .icon { width: 1.2rem; height: 1.2rem; }

  /* Die Belegmaske ist ein Bogen von unten über dem Knopf Buchen; main verliert dabei seinen
     Stapelkontext (view-transition-name), sonst läge der Bogen unter Fußleiste und Vorhang. */
  main.inhalt:has(> .bogen:target), main.inhalt:has(> .bogen.offen) { view-transition-name: none; }
  .bogen {
    display: none;
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    max-height: 92dvh;
    overflow-y: auto;
    padding: var(--a5) var(--a4) calc(var(--a4) + env(safe-area-inset-bottom));
    border-radius: var(--rund-l) var(--rund-l) 0 0;
    border-width: 1px 0 0;
    background: var(--glas-stark);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    backdrop-filter: blur(32px) saturate(160%);
    box-shadow: inset 0 1px 0 var(--kante), var(--schatten-2), 0 0 0 100vmax var(--vorhang-leicht);
    animation: schublade-hoch var(--dauer-lang) var(--kurve);
  }
  .bogen:target, .bogen.offen { display: block; }
  .bogen:focus, .bogen:focus-visible { outline: 0; }
  .bogen .kartenkopf { flex-wrap: nowrap; align-items: flex-start; }
  .bogen .kartenkopf h2 small { display: block; margin: 0.2rem 0 0; }
  .bogen .maske-zu { display: inline-flex; flex: none; margin-left: auto; }
  .bogen-vorhang { position: fixed; inset: 0; z-index: 49; }
  .schublade .maske-felder { grid-template-columns: 1fr; }
  .beleg-karte .rechts { width: 100%; }
  .beleg-karte .rechts .knopf { flex: 1; }

  /* Startseite: Jahreswahl umbrechen, Kurzlisten ohne Rand, Werte unter dem Chart umbrechen */
  .jahreswahl { flex-wrap: wrap; }
  .kennzahl .wert.datum { font-size: 1.375rem; }
  .chart.verlauf text { font-size: 13px; }
  .chart .chart-werte { flex-wrap: wrap; }
  .chart .chart-werte span { flex: 1 1 auto; }
  .kurzliste a, .kurzliste .zeile { margin: 0; padding: 0.55rem 0; }
  .kurzliste .zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .kurzliste .zeile > .knopf, .kurzliste .zeile > .art { grid-column: 2 / -1; }
  .schnellzugriffe .reihe .knopf { flex: 1 1 auto; justify-content: center; }

  /* Auswertungen: Kontofeld volle Breite, kein Drucken, Sprungleiste unter der Kopfleiste */
  .auswertung-kopf .knopf { display: none; }
  .zeitraum .feld.konto { width: 100%; }
  .zeitraum-karte .schnellwahl { margin-left: 0; width: 100%; }
  .sprungleiste { top: calc(var(--kopfleiste-hoehe) + env(safe-area-inset-top)); }
  .sprung-ort small, .sprungleiste [popovertarget] span, .sprungleiste [popovertarget] .icon-chevrons-up-down { display: none; }
  .sprungleiste [popovertarget] { padding: 0.5rem; }
  .blatt-konto .kartenkopf { align-items: flex-start; }
  .blatt-saldo { margin-left: auto; }
  .voranmeldung .kennziffer b { font-size: var(--gr-24); }
  .euer td, .euer th { padding-left: 0.4rem; padding-right: 0.4rem; }
  .euer td:first-child, .euer th:first-child { padding-left: 0; }
  .euer td.differenz, .euer th.differenz { padding-right: 0; }
  .euer td.differenz > div { flex-direction: column; align-items: flex-end; gap: 0.25rem; }
  .euer td.differenz .delta, .euer td.differenz .leise { min-width: 0; }
  .ergebnis-wert strong { font-size: var(--gr-28); }
  .ergebnis-vorjahr { justify-items: start; text-align: left; }
  .druck > header, .druckkopf-betrieb { grid-template-columns: 1fr; text-align: left; }

  /* Kontenblatt als Karten je Buchung: Datum und Nummer, Zweck, Soll und Haben, Saldo rechts */
  .blatt-tabelle thead { display: none; }
  .blatt-tabelle, .blatt-tabelle tbody, .blatt-tabelle tfoot { display: block; }
  .blatt-tabelle tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "datum nr saldo" "zweck zweck saldo" "soll haben saldo";
    column-gap: 0.35rem;
    row-gap: 0.1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--linie);
    align-items: center;
  }
  .blatt-tabelle tbody tr:last-child { border-bottom: 0; }
  .blatt-tabelle td { display: block; padding: 0; border: 0; white-space: normal; text-align: left; }
  .blatt-tabelle td.z-nr { grid-area: nr; font-size: var(--gr-13); color: var(--text-leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .blatt-tabelle td.z-nr::before { content: "· Nr. "; }
  .blatt-tabelle td.z-nr a { border-bottom: 0; color: var(--text-leise); }
  .blatt-tabelle td.z-soll, .blatt-tabelle td.z-haben { font-size: var(--gr-13); color: var(--text-leise); }
  .blatt-tabelle td.z-soll { grid-area: soll; }
  .blatt-tabelle td.z-haben { grid-area: haben; }
  .blatt-tabelle td.z-soll::before { content: "Soll "; font-family: var(--schrift-text); }
  .blatt-tabelle td.z-haben::before { content: "Haben "; font-family: var(--schrift-text); }
  .blatt-tabelle td.z-saldo { grid-area: saldo; font-size: 1.0625rem; font-weight: 500; text-align: right; align-self: center; }
  .blatt-tabelle td.z-betrag { display: none; }
  .blatt-tabelle tfoot tr { border-top: 2px solid var(--linie-tinte); border-bottom: 0; margin-top: 0.25rem; grid-template-areas: "zweck zweck saldo" "soll haben saldo"; }
  .blatt-tabelle tfoot td { border-top: 0; padding-top: 0; }
  .blatt-tabelle tfoot td.z-summe { grid-area: zweck; }

  /* Raster: Hinweis sichtbar, Felder 16 px, Fuß über der Fußleiste */
  .raster-hinweis { display: flex; }
  .raster input:not([type="checkbox"]), .raster select { font-size: 16px; min-height: 2.5rem; }
  .raster input.konto { width: 4.6rem; }
  .raster input.zahl { width: 6.4rem; }
  .raster input[type="date"] { width: 9.4rem; }
  .raster-fuss { bottom: calc(4.6rem + env(safe-area-inset-bottom)); margin: var(--a4) calc(-1 * var(--a4)) calc(-1 * var(--a4)); padding: var(--a3) var(--a4); gap: var(--a3); }
  .raster-fuss .reihe { margin-left: 0; width: 100%; }
  .raster-fuss .reihe .knopf.haupt { flex: 1; }
  .raster-filter { margin-top: 0; }
  .blaettern-sprung { margin: 0; }

  /* Standardkonten als Zeilenkarten: Nummer und Name, darunter der Anzeigename, rechts der Satz */
  .standard-gruppen a.art { padding: 0.5rem 0.8rem; }
  .standard-liste thead { display: none; }
  .standard-liste, .standard-liste tbody { display: block; }
  .standard-liste tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "nr name satz" "nr anzeige satz";
    column-gap: var(--a3);
    row-gap: 0.1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--linie);
    align-items: center;
  }
  .standard-liste tr:last-child { border-bottom: 0; }
  .standard-liste td { display: block; padding: 0; border: 0; }
  .standard-liste td.z-nummer { grid-area: nr; width: auto; min-width: 2.8rem; text-align: left; }
  .standard-liste td.name { grid-area: name; color: var(--text); }
  .standard-liste td.anzeige { grid-area: anzeige; display: block; font-size: var(--gr-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .standard-liste td.satz { grid-area: satz; width: auto; }
  .standard-liste td.werkzeug { display: none; }

  /* Sicherungen als Zeilenkarten: Stand und Anlass, darunter Inhalt und Größe, dann die Knöpfe */
  .sicherungen thead { display: none; }
  .sicherungen, .sicherungen tbody { display: block; }
  .sicherungen tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "stand anlass" "umfang groesse" "schritte schritte";
    gap: 0.3rem var(--a3);
    padding: var(--a3) 0;
    border-bottom: 1px solid var(--linie);
    align-items: center;
  }
  .sicherungen tr:last-child { border-bottom: 0; }
  .sicherungen td { display: block; padding: 0; border: 0; }
  .sicherungen td.stand { grid-area: stand; }
  .sicherungen td.anlass { grid-area: anlass; justify-self: end; }
  .sicherungen td.umfang { grid-area: umfang; color: var(--text-2); }
  .sicherungen td.groesse { grid-area: groesse; }
  .sicherungen td.schritte { grid-area: schritte; width: auto; margin-top: var(--a2); }
  .sicherungen .reihe { flex-wrap: wrap; justify-content: flex-start; }

  /* Einstellungen: feste Konten untereinander, Schalter volle Breite, Fuß über der Fußleiste */
  .feldraster.konten-raster { grid-template-columns: 1fr; }
  .klebfuss.glas { position: sticky; bottom: calc(5.8rem + env(safe-area-inset-bottom)); width: 100%; padding: var(--a2) var(--a2) var(--a2) var(--a4); gap: var(--a2); }
  .klebfuss.glas .knopf.haupt { flex: 1; }
  .klebfuss [data-aenderung] { flex-basis: 100%; }
  .schalter.beschriftet { display: grid; grid-auto-columns: 1fr; width: 100%; }
  .schalter.beschriftet button { padding: 0.6rem 0.4rem; font-size: var(--gr-14); }
}

@media screen and (max-width: 30rem) {
  .kennzahl .wert { font-size: var(--gr-24); }
  .schritt { padding: var(--a4); }
  .anmeldung { margin-top: 0; }
  body.leer { padding: var(--a4) var(--a2); }
  .schnellwahl a { padding: 0.32rem 0.65rem; }
}

/* ------------------------------------------------------------------- Druck */
/* Steht am Ende, damit der Druck auch die Regeln der Bruchpunkte schlägt (ein A4-Blatt ist schmal). */

@media print {
  body { display: block; background: var(--papier); color: var(--druckfarbe); }
  body.leer { padding: 0; }
  body::before, .leiste, .kopf, .fussleiste, .kopfleiste, .seitenkopf, .toast-stapel, .werkzeug, .schnellwahl, .suche,
  .knopf, .blaettern, .meldungen, .auswertung-kopf, .zeitraum-karte, .sprungleiste, .klebfuss, .schalter, .staerke,
  .nicht-drucken, .nebensache, form[data-beleg] { display: none !important; }
  .inhalt, .druck { padding: 0; max-width: none; }
  .karte, .druck .karte, .kennzahl { box-shadow: none; border: 0; border-radius: 0; background: none; padding: 0; margin-bottom: var(--a5); }
  .kennzahl, .chart-karte, .ergebnis-karte, .karte.ergebnis, tr { break-inside: avoid; }
  .kartenkopf { break-after: avoid; }
  thead { display: table-header-group; }
  th { border-bottom: 2px solid var(--druckfarbe); }
  tfoot td { border-top-color: var(--druckfarbe); }
  a { text-decoration: none; }
  .druckkopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a3) var(--a5); align-items: start; margin-bottom: var(--a5); }
  .druck-logo { width: 4cm; margin-bottom: 0.5rem; }
  .blatt-tabelle td.z-nr a { border-bottom: 0; }
  .delta { background: none; padding: 0; }
  .ergebnis-karte, .karte.ergebnis { border-top: 2px solid var(--druckfarbe); padding-top: var(--a4); }
  /* Tabellen passen auf das Blatt: Text bricht um, nichts wird am Rand abgeschnitten. */
  .tabelle { overflow: visible; margin: 0; padding: 0; }
  table { width: 100%; font-size: 9.5pt; }
  th, td { padding-left: 0.3rem; padding-right: 0.3rem; }
  td.zweck, .belege td.zweck, .blatt-tabelle td.zweck { white-space: normal; overflow: visible; max-width: none; min-width: 0; }
  @page {
    margin: 18mm 18mm 20mm;
    /* Seitenzahl unten rechts: Chromium kann das ab Version 131, andere Browser lassen sie weg. */
    @bottom-right { content: "Seite " counter(page) " von " counter(pages); font: 9pt Abel, sans-serif; }
  }
}