/* ==========================================================================
   Buchhaltung — Denis Kebap
   Gebaut nach dem DenisKebapDesign-Skill. Alle Flaechen- und Formwerte sind
   dort gemessen. Seit 14.09.2026 steht die Marke auf dem warmen Grund #f1efe7;
   was darauf liegt, wird aus ihm gerechnet und ist eine Stufe heller. Ein
   einziger Schalter traegt den Ton: --farbe-grund. Umrisskarte mit 1 px
   #dcdbc9, Schwarz #1D1C1C. Vier Radien und mehr nicht:
   14 fuer Flaechen, 11 fuer Knoepfe, 7 fuer die enge Kachel, voll gerundet
   fuer alles Kapselfoermige. Kein einziger Schlagschatten.
   Marke: Gold #a89069 ist die einzige Akzentfarbe und traegt auf hellem Grund
   nur die grosse Kaushan-Unterzeile. Montserrat 500/700, PT Sans 400/700 und
   Kaushan Script 400 liegen als Datei im Projekt (public/fonts); nichts wird
   von fremden Servern nachgeladen. Lizenz aller drei: SIL OFL 1.1.
   ========================================================================== */

/* Kaushan Script 400 */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/kaushan-script-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/kaushan-script-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat 500 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/montserrat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/montserrat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat 700 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/montserrat-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/montserrat-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* PT Sans 400 */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* PT Sans 700 */
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/pt-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/pt-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Token. Jede Flaeche stammt aus der Farbtabelle des Skills.
   ========================================================================== */
:root {
  /* Marke: Gold ist die einzige Akzentfarbe. */
  --gold: #a89069;
  /* Das Schwarz der Ansicht ist #1D1C1C, nicht #000000. */
  --black: #1d1c1c;

  /* Grundflaechen. Seit 14.09.2026 steht die Marke auf dem warmen Grund.
     Ein Schalter traegt den Ton, jede Flaeche darauf wird daraus gerechnet:
     62 % Grund plus Weiss, also eine Stufe heller. Die woertliche Zeile
     darueber ist der Rueckfall fuer Browser ohne color-mix. */
  --farbe-grund: #f1efe7;
  --paper: var(--farbe-grund);
  --card: #f6f5f0;
  --card: color-mix(in srgb, var(--farbe-grund) 62%, #fff);
  --paper-2: #f6f5f0;
  --paper-2: color-mix(in srgb, var(--farbe-grund) 62%, #fff);
  --band: #e5e0d3;
  --line: #dcdbc9;
  --line-card: #dedfd4;
  --input-line: #dcdbc9;
  --field: #f6f5f0;
  --field: color-mix(in srgb, var(--farbe-grund) 62%, #fff);
  --row-hover: #edede0;
  --row-hover-line: #656060;
  --pill-line: #c6c4bb;
  --achse: #c5c5b6;
  --kapsel: #e5e4df;
  --dark-row: #363533;
  --square: #f6f5f0;
  --square: color-mix(in srgb, var(--farbe-grund) 62%, #fff);

  /* Schrift */
  --ink: #141414;
  --muted: #655c5c;
  --disabled-face: #9a9998;
  --disabled-ink: #bebdbc;
  --switch-off: #665d5e;

  /* Fussleiste und Blatt von unten: seit dem warmen Grund keine weissen
     Flaechen mehr, sondern die eine Stufe hellere Flaeche darauf. */
  --bar: #f6f5f0;
  --bar: color-mix(in srgb, var(--farbe-grund) 62%, #fff);

  /* Schrift und kleine Flaechen auf dunklem Grund tragen das Beige der Marke,
     nicht Weiss. Gemessen 14,8 : 1 auf #1D1C1C, 16,0 : 1 im Dunkel-Modus und
     18,2 : 1 auf Reinschwarz — weit ueber den geforderten 4,5. Weiss bleibt
     nur der eingebackene Logo-Ring und der QR-Code. */
  --auf-dunkel: #f1efe7;
  /* Die leise Zeile auf dunklem Grund: dasselbe Beige, nur zurueckgenommen.
     Aus dem Schalter gerechnet, damit kein zweiter Grauton entsteht. */
  --auf-dunkel-leise: color-mix(in srgb, var(--auf-dunkel) 72%, var(--black));
  /* Der Hauptknopf auf dunklem Grund beim Ueberfahren: eine Stufe heller
     als das Beige, ebenfalls gerechnet statt gesetzt. */
  --auf-dunkel-hell: color-mix(in srgb, var(--auf-dunkel) 82%, #fff);

  /* Rollen: alles laeuft auf Schwarz, Gold oder Grau hinaus. */
  --accent: #a89069;
  --accent-soft: rgba(168, 144, 105, 0.14);
  --accent-wash: rgba(168, 144, 105, 0.07);
  --signal: var(--ink);
  --danger: var(--ink);
  --moss: var(--ink);

  /* Ohne Tiefe: der Eindruck entsteht aus Linien und Rundungen. */
  --shadow: none;
  --shadow-lift: none;
  --bar-shadow: none;
  --focus-ring: 0 0 0 3px rgba(168, 144, 105, 0.55);

  /* Ein Schalter je Rolle. Drei Familien, drei Schnitte, neun Grade — und
     ausserhalb dieses Blocks steht keine Schriftart, kein Schnitt und kein
     Grad mehr. Wer einen zehnten Grad oder einen Schnitt 300/600 einfuehrt,
     bricht die Leiter. */
  --schrift-titel: 'Montserrat';      /* Ueberschriften, Knoepfe, Preise */
  --schrift-text: 'PT Sans';          /* Fliesstext, Beschreibungen */
  --schrift-gold: 'Kaushan Script';   /* nur die goldene Unterzeile */
  --sans: var(--schrift-text);
  --head: var(--schrift-titel);
  --script: var(--schrift-gold);

  --schnitt-titel: 500;               /* alles in Montserrat */
  --schnitt-text: 400;                /* PT Sans und Kaushan */
  --schnitt-stark: 700;               /* Vorstellungstitel, Hervorhebung */

  /* Grundschrift 16, alle Stufen daraus. */
  --grad-vorstellung: 2.5rem;         /* 40 — grosser Vorstellungstitel */
  --grad-seitentitel: 2rem;           /* 32 — Seitenueberschrift */
  --grad-unterzeile: 1.5rem;          /* 24 — goldene Unterzeile, Mindestwert */
  --grad-abschnitt: 1.25rem;          /* 20 — Abschnitts- und Kartentitel */
  --grad-karte: 1.0625rem;            /* 17 — Kartenueberschrift, Listentitel */
  --grad-text: 1rem;                  /* 16 — Fliesstext */
  --grad-beschreibung: 0.9375rem;     /* 15 — Beschreibung, Kategorien */
  --grad-klein: 0.8125rem;            /* 13 — Fussleiste, Versalien */
  --grad-marke: 0.6875rem;            /* 11 — Zaehlmarke an der Glocke */
  --lh-tight: 1.2;
  --lh-body: 1.5;
  --lh-prose: 1.6;

  /* Vier Radien, mehr nicht. */
  --radius: 14px;
  --radius-btn: 11px;
  --radius-tight: 7px;

  --rand: 16px;
  --karte-innen: 26px;
  /* Breite des Inhalts: die Kopfleiste, die Ansicht und die Fussleiste
     rechnen alle aus diesem einen Wert. */
  --inhalt: 1180px;
  --kapsel-breite: 85px;
  --kapsel-hoehe: 54px;
  color-scheme: light;
}

/* Dunkel ist eine Zugabe von BuchWeb (D-033), im Skill nicht vorgesehen:
   dieselbe Formensprache, nur die Flaechen kehren sich um. */
html.dark {
  --paper: #141414;
  --card: #1f1f1f;
  --paper-2: #1f1f1f;
  --band: #1f1f1f;
  --line: #292929;
  --line-card: #292929;
  --input-line: #292929;
  --field: #1a1a1a;
  --row-hover: #242424;
  --row-hover-line: #8a8a8a;
  --pill-line: #3a3a3a;
  --achse: #3a3a3a;
  --kapsel: #2a2a2a;
  --square: #242424;
  --ink: var(--auf-dunkel);
  --muted: var(--auf-dunkel-leise);
  --disabled-face: #3a3a3a;
  --disabled-ink: #8a8a8a;
  --bar: #1a1a1a;
  --accent-soft: rgba(168, 144, 105, 0.22);
  --accent-wash: rgba(168, 144, 105, 0.12);
  /* Auf dunklem Grund traegt Gold jede Groesse (5,6 : 1). */
  --signal: #a89069;
  --danger: #a89069;
  --moss: #a89069;
  color-scheme: dark;
}

/* Reines Schwarz (D-033): jede Flaeche #000 — OLED. */
html.dark.black {
  --paper: #000000;
  --paper-2: #000000;
  --card: #000000;
  --field: #000000;
  --bar: #000000;
}

html {
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--grad-text);
  font-weight: var(--schnitt-text);
  line-height: var(--lh-body);
  background: var(--paper);
  color: var(--ink);
}
html.dark body { background: var(--paper); }

button, input, select { font: inherit; }
button { cursor: pointer; }
button, .nav-btn, .ghost, .primary { min-height: 44px; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.money {
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ==========================================================================
   Sinnbilder: duenne Strichzeichnung in der Schriftfarbe.
   ========================================================================== */
.ico {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
}
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  flex: none;
}
.mark .ico { width: 1.15em; height: 1.15em; }
/* Kein Platz fuer fremde Zeichen: die Oberflaeche kennt nur ihre eigenen
   Strichsinnbilder, ein unbekanntes Zeichen bekommt das neutrale. Deshalb
   gibt es hier keine Emoji-Schriftfamilie mehr. */
.mark-text { filter: grayscale(1); }

/* ==========================================================================
   Ueberschriften
   ========================================================================== */
h1 {
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-seitentitel);
  line-height: var(--lh-tight);
  margin: 0;
}

/* Erkennungszeichen der Marke: Versalien, darunter haengt die goldene
   Schreibschrift. Auf hellem Grund traegt Gold nur hier — die Unterzeile ist
   so gross wie der Seitentitel und damit ueber 24. */
.heading {
  position: relative;
  padding-bottom: .55em;
  margin: 0;
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  text-transform: uppercase;
}
.heading > span {
  display: inline-block;
  position: relative;
}
/* Die goldene Unterzeile traegt Grad 24 als Mindestwert. Gold erreicht auf
   hellem Grund keine 3,0 : 1 — nur gross genug ist es lesbar, und was sie
   sagt, steht daneben auch in Schwarz. */
.heading-subtitle {
  font-family: var(--script);
  color: var(--gold);
  display: block;
  font-size: max(var(--grad-unterzeile), 1em);
  font-style: normal;
  font-weight: var(--schnitt-text);
  line-height: 1em;
  margin-top: -.48em;
  text-transform: none;
  position: absolute;
  top: 100%;
  left: 50%;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 767px) {
  .heading-subtitle {
    position: static;
    white-space: normal;
    /* Auch geschrumpft nie unter Grad 24. */
    font-size: max(var(--grad-unterzeile), min(1em, 8vw));
  }
  /* In der Kopfleiste bleibt sie haengend: die Titel sind kurz, und die
     Leiste soll nicht auf zwei Zeilen wachsen. */
  .topbar-title .heading-subtitle {
    position: absolute;
    white-space: nowrap;
    font-size: max(var(--grad-unterzeile), 1em);
  }
}

/* Abschnittsueberschrift in Versalien: klein, grau, weiter Buchstabenabstand. */
.eyebrow,
.mehr-group-label,
.heute-more-title,
.notify-head,
.zeit-kategorien {
  font-family: var(--head);
  font-size: var(--grad-klein);
  font-weight: var(--schnitt-titel);
  color: var(--muted);
}
.eyebrow,
.mehr-group-label,
.heute-more-title,
.notify-head {
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sub { color: var(--muted); font-size: var(--grad-beschreibung); margin: 0 0 20px; line-height: var(--lh-body); }
label { display: block; font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); margin-bottom: 8px; }
.muted { color: var(--muted); font-size: var(--grad-beschreibung); }
.empty { padding: 12px var(--karte-innen); color: var(--muted); }
/* Abstaende gehoeren ins Stilblatt, nicht in den Seitentext. Diese vier
   Klassen tragen die wenigen Sonderfaelle, die frueher als style="…" am
   Element klebten. */
.empty-anschluss { padding-top: 0; }
.panel-abgesetzt { margin-top: 16px; }
.muted-abgesetzt { margin-top: 8px; }
.liste-abgesetzt { margin-top: 12px; }
/* Keine vierte Schriftfamilie: gleich breite Ziffern reichen fuer IBAN,
   Nummer und Betrag. Die Marke kennt nur ihre drei Schriften. */
.mono {
  font-family: var(--sans);
  font-size: var(--grad-beschreibung);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: .01em;
}

.sub, .filter-note, .hint, .qr-note, .tool-hint { line-height: var(--lh-prose); }

/* ==========================================================================
   Knoepfe: 48 hoch, Radius 11. Hauptknopf volle schwarze Flaeche ohne Rahmen,
   Zweitknopf wie die Seite mit 1 px Linie, gesperrt #9a9998 auf #bebdbc.
   ========================================================================== */
.primary {
  width: 100%;
  background-color: var(--black);
  color: var(--auf-dunkel);
  border: 0;
  min-height: 48px;
  border-radius: var(--radius-btn);
  font-family: var(--head);
  font-size: var(--grad-text);
  font-weight: var(--schnitt-titel);
  padding: 10px 20px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.15s ease;
}
.primary:hover:not(:disabled),
.primary:focus-visible:not(:disabled) { background-color: var(--ink); }
html.dark .primary { background-color: var(--auf-dunkel); color: var(--black); }
html.dark .primary:hover:not(:disabled),
html.dark .primary:focus-visible:not(:disabled) { background-color: var(--auf-dunkel-hell); }
.primary:disabled {
  background-color: var(--disabled-face);
  color: var(--disabled-ink);
  cursor: wait;
}

.ghost {
  background-color: var(--paper);
  color: var(--black);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  min-height: 48px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--head);
  font-size: var(--grad-text);
  font-weight: var(--schnitt-titel);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ghost:hover:not(:disabled) { border-color: var(--black); }
.ghost:disabled {
  background-color: var(--disabled-face);
  color: var(--disabled-ink);
  border-color: var(--disabled-face);
  cursor: not-allowed;
}
html.dark .ghost { background-color: transparent; color: var(--auf-dunkel); border-color: var(--line); }
html.dark .ghost:hover:not(:disabled) { border-color: var(--auf-dunkel); }

.compact-btn {
  min-height: 36px;
  min-width: auto;
  padding: 6px 14px;
  font-size: var(--grad-beschreibung);
  flex: none;
  width: auto;
}

/* Der helle Zweitknopf der Zeitachse: 32 hoch, Radius 7, Linie #c5c5b6. */
.zweitknopf {
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--achse);
  border-radius: var(--radius-tight);
  background: var(--paper);
  color: var(--black);
  font-family: var(--head);
  font-size: var(--grad-klein);
  font-weight: var(--schnitt-titel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.zweitknopf:hover { border-color: var(--black); }
html.dark .zweitknopf { background: transparent; color: var(--auf-dunkel); }
html.dark .zweitknopf:hover { border-color: var(--auf-dunkel); }

/* Runder Knopf der Kopfleiste: 44, Flaeche #f1efe7, Strichsinnbild. */
.rund-btn {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.rund-btn .ico { width: 20px; height: 20px; }
.rund-btn:hover:not(:disabled) { background: var(--row-hover); }
.rund-btn.is-open,
.rund-btn.is-open:hover:not(:disabled) { background: var(--black); color: var(--auf-dunkel); }
html.dark .rund-btn { background: var(--card); color: var(--auf-dunkel); }
html.dark .rund-btn.is-open,
html.dark .rund-btn.is-open:hover:not(:disabled) { background: var(--auf-dunkel); color: var(--black); }
.rund-btn.is-busy .ico { animation: spin 0.8s linear infinite; }
.rund-btn:disabled { cursor: wait; }

/* Zaehlmarke: schwarzer Kreis, weisse Zahl, nie rot. */
.zaehlmarke {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--black);
  color: var(--auf-dunkel);
  font-family: var(--head);
  /* Die Zaehlmarke traegt Grad 11, nicht die 13 der Fussleiste. */
  font-size: var(--grad-marke);
  font-weight: var(--schnitt-titel);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
html.dark .zaehlmarke { background: var(--auf-dunkel); color: var(--black); }

.icon-btn {
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--black);
  text-decoration: none;
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.icon-btn .ico { width: 20px; height: 20px; }
html.dark .icon-btn { background: transparent; color: var(--auf-dunkel); }
.icon-btn:not(:disabled):hover { background: var(--row-hover); border-color: var(--black); }
html.dark .icon-btn:not(:disabled):hover { border-color: var(--auf-dunkel); }
.icon-btn:disabled { color: var(--disabled-ink); cursor: not-allowed; }

.text-btn {
  background: none;
  border: 0;
  color: var(--black);
  font-weight: var(--schnitt-titel);
  padding: 0;
  min-height: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.dark .text-btn { color: var(--gold); }

/* Abzeichen: voll gerundet, schwarz mit weisser Schrift oder beige. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  color: var(--black);
  border: 0;
  font-family: var(--head);
  font-size: var(--grad-klein);
  font-weight: var(--schnitt-titel);
  padding: 6px 12px;
  border-radius: 999px;
  min-height: 32px;
}
html.dark .badge { background: var(--square); color: var(--auf-dunkel); }

/* Schwarzes Abzeichen: hervorstechen ohne Farbe — in der Hinweis-Karte und
   an einer ueberfaelligen Listenzeile. */
.abzeichen {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--black);
  color: var(--auf-dunkel);
  font-family: var(--head);
  font-size: var(--grad-klein);
  font-weight: var(--schnitt-titel);
  line-height: 1.2;
}
html.dark .abzeichen { background: var(--auf-dunkel); color: var(--black); }
.zeit-karte .abzeichen { margin: 0 0 8px; }
td.status .abzeichen { margin-left: 6px; }

/* ==========================================================================
   Filterpillen und Reiter
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-abgesetzt { margin-bottom: 12px; }

/* Ruhend 1 px #c6c4bb, gewaehlt 2 px schwarz mit beiger Fuellung. */
.chip {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--pill-line);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-beschreibung);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.chip.active {
  background: var(--card);
  outline: 2px solid var(--black);
  outline-offset: -2px;
  border-color: transparent;
}
html.dark .chip { color: var(--auf-dunkel); }
html.dark .chip.active { outline-color: var(--auf-dunkel); }

/* Reiter: reiner Text, aktiv mit 3er Unterstrich, ruhend #655c5c. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.tab {
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: var(--grad-text);
  font-weight: var(--schnitt-text);
  padding: 8px 12px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.tab.active {
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  color: var(--black);
  box-shadow: inset 0 -3px 0 var(--black);
}
html.dark .tab.active { color: var(--auf-dunkel); box-shadow: inset 0 -3px 0 var(--auf-dunkel); }

.segment {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  max-width: 28rem;
}
.segment-btn {
  border: 1px solid var(--pill-line);
  background: transparent;
  color: var(--black);
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-beschreibung);
  min-height: 40px;
  border-radius: 999px;
  cursor: pointer;
}
.segment-btn.active {
  background: var(--card);
  outline: 2px solid var(--black);
  outline-offset: -2px;
  border-color: transparent;
}
html.dark .segment-btn { color: var(--auf-dunkel); }
html.dark .segment-btn.active { outline-color: var(--auf-dunkel); }

/* Status: offen umrandet, erledigt schwarz gefuellt, Guthaben in Gold. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--head);
  font-size: var(--grad-klein);
  font-weight: var(--schnitt-titel);
  background: var(--card);
  color: var(--black);
  white-space: nowrap;
}
.pill-open { background: transparent; color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
.pill-ok { background: var(--black); color: var(--auf-dunkel); }
/* Guthaben: beige, nicht Gold — Gold traegt auf hellem Grund nur die Unterzeile. */
.pill-credit { background: var(--card); color: var(--black); box-shadow: inset 0 0 0 1px var(--pill-line); }
html.dark .pill { background: var(--square); color: var(--auf-dunkel); }
html.dark .pill-open { background: transparent; color: var(--auf-dunkel); box-shadow: inset 0 0 0 1px var(--auf-dunkel); }
html.dark .pill-ok { background: var(--auf-dunkel); color: var(--black); }
html.dark .pill-credit { background: var(--gold); color: var(--black); }

/* ==========================================================================
   Eingabefelder
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
.field-label input,
.settings-form input:not([type="checkbox"]),
.kassa-ist-grid input,
select,
textarea,
.kurzname-input {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--input-line);
  border-radius: var(--radius-btn);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23655c5c' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  padding-right: 40px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--black);
}
html.dark input:focus, html.dark select:focus, html.dark textarea:focus { border-color: var(--auf-dunkel); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

input[type="checkbox"],
input[type="radio"],
input[type="range"] { accent-color: var(--black); }
html.dark input[type="checkbox"],
html.dark input[type="radio"],
html.dark input[type="range"] { accent-color: var(--gold); }

.field-label {
  display: block;
  margin: 0 0 14px;
  color: var(--muted);
  font-size: var(--grad-beschreibung);
}
.field-label input,
.field-label select,
.field-label textarea { display: block; margin-top: 6px; }

/* Schalter: ein schwarz mit weissem Knopf rechts, aus wie die Seite mit
   1 px Linie und Knopf #665d5e links. */
.switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 48px;
  height: 28px;
  min-height: 28px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  flex: none;
  cursor: pointer;
  padding: 0;
  accent-color: unset;
  transition: background-color 0.2s ease;
}
.switch.on,
.switch:checked { background: var(--black); border-color: var(--black); }
.switch:disabled { opacity: 0.5; cursor: not-allowed; }
.switch span,
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--switch-off);
  transition: transform 0.2s, background-color 0.2s;
  pointer-events: none;
}
button.switch::after { content: none; display: none; }
.switch.on span,
.switch:checked::after {
  transform: translateX(20px);
  background: var(--auf-dunkel);
}
html.dark .switch { background: transparent; }
html.dark .switch.on,
html.dark .switch:checked { background: var(--gold); border-color: var(--gold); }

/* ==========================================================================
   Anmeldung
   ========================================================================== */
.login-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) var(--rand) max(24px, env(safe-area-inset-bottom));
  background: var(--paper);
}
.login-card {
  width: min(440px, 100%);
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: var(--karte-innen);
  text-align: center;
}
.login-logo {
  width: 6rem;
  height: 6rem;
  object-fit: contain;
  margin: 0 auto 1rem;
  display: block;
}
.login-card h1 {
  font-size: var(--grad-vorstellung);
  font-weight: var(--schnitt-stark);
  margin: 0 0 4px;
}
.login-card h1.heading { font-weight: var(--schnitt-stark); }
.login-card .sub { margin-bottom: 1.25rem; }
.login-heading {
  font-family: var(--head);
  font-size: var(--grad-karte);
  font-weight: var(--schnitt-titel);
  margin: 0 0 8px;
}
.pin-dots {
  display: flex;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 3rem;
  margin-bottom: 8px;
}
.pin-entry { position: relative; min-width: 0; }
.pin-entry-error { font-size: var(--grad-beschreibung); }
.pin-change-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 510px;
}
.pin-rule { margin: 0 0 10px; font-size: var(--grad-beschreibung); }
.pin-entry-compact .pin-label {
  display: block;
  min-height: 3em;
  margin: 0;
  color: var(--muted);
  font-size: var(--grad-beschreibung);
  line-height: 1.4;
}
.pin-entry-compact .pin-dots { min-height: 28px; gap: 2px; flex-wrap: wrap; margin: 0 0 4px; }
.pin-entry-compact .pin-dot { width: 5px; height: 5px; }
.pin-entry-compact .pin-placeholder { font-size: var(--grad-beschreibung); }
.pin-entry-compact .pin-pad { gap: 4px; margin: 0; }
.pin-entry-compact .pin-key { height: 30px; min-height: 30px; padding: 0; font-size: var(--grad-beschreibung); }
.pin-entry-compact .pin-key .ico { width: 14px; height: 14px; }
.pin-entry-compact .pin-entry-error { min-height: 2.8em; margin: 4px 0 0; font-size: var(--grad-klein); }
.pin-placeholder { color: var(--muted); font-size: var(--grad-beschreibung); }
.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--gold);
}
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 280px;
  margin: 0 auto 8px;
}
.pin-key {
  height: 3.5rem;
  min-height: 3.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--paper);
  color: var(--black);
  font-family: var(--head);
  font-size: var(--grad-abschnitt);
  font-weight: var(--schnitt-titel);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, background-color 0.15s ease;
}
.pin-key .ico { width: 24px; height: 24px; }
html.dark .pin-key { background: transparent; color: var(--auf-dunkel); }
.pin-key:hover { background: var(--row-hover); }
.pin-key:active { transform: scale(0.96); }
.pin-key.pin-ok {
  background-color: var(--black);
  color: var(--auf-dunkel);
  border-color: var(--black);
  font-size: var(--grad-text);
}
html.dark .pin-key.pin-ok { background-color: var(--auf-dunkel); color: var(--black); border-color: var(--auf-dunkel); }
/* Muss nach der Dunkel-Regel stehen und ebenso genau sein, sonst sieht der
   gesperrte Knopf im Dunkeln aus wie ein freigegebener. */
html.dark .pin-key.pin-ok:disabled {
  background-color: var(--disabled-face);
  border-color: var(--disabled-face);
  color: var(--disabled-ink);
}
.pin-key.pin-ok:disabled {
  background-color: var(--disabled-face);
  border-color: var(--disabled-face);
  color: var(--disabled-ink);
  transform: none;
  cursor: not-allowed;
}
.login-forgot { text-align: center; margin-top: 12px; }
.login-forgot .text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  font-size: var(--grad-text);
}
.login-pin-notice {
  text-align: center;
  margin: 0 0 10px;
  color: var(--moss);
  font-size: var(--grad-text);
  font-weight: var(--schnitt-titel);
}
.login-pin-request { text-align: left; }
.login-pin-request .muted { text-align: left; margin: 0 0 12px; }
.login-pin-request .field-label { color: var(--muted); }
/* 16 in den Feldern (--grad-text = 1rem), sonst zoomt iOS beim Tippen heran. */
.login-pin-request input[type="email"],
.login-pin-request input[type="text"],
.login-pin-request input[type="password"] {
  font-size: var(--grad-text);
  margin: 6px 0 0;
}
.login-pin-request .primary { width: 100%; margin-top: 8px; }
.login-pin-request .ghost { width: 100%; margin-top: 8px; }

.error { color: var(--danger); margin: 0 0 12px; }
.error:empty { display: none; }

input.pin-hidden {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
.pin-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ==========================================================================
   Geruest
   ========================================================================== */
/* Eine Bedienung auf jeder Breite: oben die Kopfleiste, unten die
   Fussleiste, dazwischen die Ansicht. Die Seitenspalte ist am 14.09.2026
   ersatzlos weggefallen (Bubby) — es gibt keine zweite Spalte mehr. */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  min-height: 100dvh;
  /* Nie breiter als der Bildschirm: sonst zoomt das iPhone die Seite heraus,
     und rechts bleibt ein leerer Streifen (Bubbys Bild vom 12.09.2026). */
  overflow-x: clip;
}
.brand {
  font-family: var(--head);
  font-size: var(--grad-karte);
  font-weight: var(--schnitt-titel);
  padding: 1.25rem 0.75rem 1.1rem;
  line-height: var(--lh-tight);
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
  width: 100%;
  background: transparent;
  color: inherit;
  text-align: left;
  min-height: 44px;
  appearance: none;
  /* Kein Radius: die Marke im Kopf sitzt an einer Linie, nicht in einer
     Flaeche. Das ist kein fuenfter Radius, sondern der Ruecksetzer gegen
     die Voreinstellung des Browsers. */
  border-radius: 0;
}
.brand:hover { background: var(--row-hover); }
.brand-logo {
  width: 66px;
  height: 66px;
  object-fit: contain;
  flex: none;
}
/* Das runde Logo wird nie eingefaerbt, verzerrt oder angeschnitten; seine
   weisse Umrandung steckt in der Datei. */
.brand-logo,
.login-logo {
  object-fit: contain;
  background: transparent;
}
.brand-name {
  display: block;
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
}
.brand-mark {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--grad-beschreibung);
  font-weight: var(--schnitt-text);
}

/* Firmenkarte: beige, Radius 14, ohne Rand — wie in der Schublade. Logo und
   Firma oben, darunter wer angemeldet ist. Sie stand bis zum 14.09.2026 in
   der Seitenspalte und steht jetzt am Kopf von "Mein Bereich", hinter dem
   runden Kontoknopf rechts oben (Bubby, 14.09.2026). */
.konto-karte {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  margin: 0 0 16px;
  padding: 4px 4px 14px;
}
.konto-karte .brand {
  border-bottom: 0;
  margin-bottom: 0;
  padding: 12px 8px 6px;
  border-radius: var(--radius-btn);
}
.konto-user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}
.konto-user strong {
  font-family: var(--head);
  font-size: var(--grad-text);
  font-weight: var(--schnitt-titel);
}
.konto-user .badge { align-self: flex-start; margin-top: 6px; }

/* Die Ansicht liegt zwischen Kopf- und Fussleiste und rechnet ihren
   Seitenrand aus derselben Inhaltsbreite wie die Kopfleiste: bis 1180 der
   Seitenrand 16, darueber waechst er und haelt den Inhalt mittig. Unten
   bleibt Platz fuer die Fussleiste, auf jeder Breite. */
.main {
  padding: 4px var(--rand) calc(86px + max(env(safe-area-inset-bottom), 10px));
  padding-inline: max(var(--rand), calc((100% - var(--inhalt)) / 2));
  min-width: 0;
}

/* Kopfleiste: runde Knoepfe oben, Seitentitel gross darunter. Sie steht auf
   jeder Breite — es gibt keine zweite Bedienung mehr (Bubby, 14.09.2026).
   Ihr Seitenrand rechnet aus derselben Inhaltsbreite wie die Ansicht, damit
   Titel und Inhalt am breiten Bildschirm auf einer Linie beginnen. */
.topbar {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 30;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) var(--rand) 12px;
  padding-inline: max(var(--rand), calc((100% - var(--inhalt)) / 2));
  background: var(--paper);
}
.topbar-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.topbar-aktionen {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Die zwei Zeichen der Marke stehen zwischen Menue und Wegen: das runde Logo
   startet den Eingang (nur Admin), das Slogan-Band holt die Daten frisch.
   Beide bleiben 40 hoch — so gross wie das Logo an derselben Stelle
   (Bubby, 12.09.2026; neu verteilt 15.09.2026). */
.topbar-marke {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.topbar .brand-logo { width: 40px; height: 40px; }
.topbar .slogan-icon { height: 40px; margin: 0; }
.topbar-title {
  margin: 0;
  min-width: 0;
  font-size: var(--grad-seitentitel);
  font-weight: var(--schnitt-titel);
}
/* In der Kopfleiste steht der Titel wie auf dem Schreibtisch: Versalien und
   darunter die haengende goldene Schreibschrift. Bei 32 liegt sie ueber der
   Schwelle von 24, unter der Gold auf hellem Grund nicht mehr taugt. */
.topbar-title > span {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Die haengende Unterzeile steht ausserhalb der Zeile und darf nicht
   beschnitten werden. */
.topbar-title.has-sub > span { overflow: visible; }

/* Fussleiste: volle Breite, flach, Sinnbild ueber der Beschriftung.
   Der aktive Eintrag wird nur durch die helle Kapsel kenntlich. */
.tabbar {
  display: grid;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  grid-template-columns: repeat(var(--tab-cols, 5), minmax(0, 1fr));
  gap: 0;
  min-height: calc(62px + max(env(safe-area-inset-bottom), 10px));
  padding: 0 0 max(env(safe-area-inset-bottom), 10px);
  background: var(--bar);
  border-top: 1px solid var(--line);
}
html.kb-open .tabbar { display: none; }
.tabbar-item {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--black);
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  min-width: 0;
  padding: 0;
  cursor: pointer;
}
html.dark .tabbar-item { color: var(--auf-dunkel); }
.tabbar-kapsel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* 85 breit wie gemessen, aber nie breiter als ihr Fach: bei vier
     Eintraegen misst ein Fach 97 und die Kapsel wird 85, bei fuenf misst es
     78 und die Kapsel geht mit. Eine ueberstehende Kapsel liesse sich
     seitlich schieben. Bindend ist die Hoehe, nicht die Breite. */
  width: 100%;
  min-width: 0;
  max-width: var(--kapsel-breite);
  height: var(--kapsel-hoehe);
  border-radius: 999px;
  /* Bindend ist die Hoehe 54. Sinnbild, Abstand und Schriftzeile ergeben 40;
     die restlichen 14 verteilt das Zentrieren auf oben und unten — gemessen
     an den Buchstabenkanten sind das die 10 und 11 der Vorlage. */
  padding: 0;
  transition: background-color 0.15s ease;
}
.tabbar-item.active .tabbar-kapsel { background: var(--kapsel); }
.tabbar-ico { display: flex; }
.tabbar-ico .ico { width: 20px; height: 20px; }
/* Schrift und Sinnbild bleiben in beiden Zustaenden schwarz — kein Grau,
   kein Fettdruckwechsel, kein Gold. */
.tabbar-label {
  font-family: var(--head);
  font-size: var(--grad-klein);
  font-weight: var(--schnitt-titel);
  line-height: 1.25;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 22px);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--black);
  color: var(--auf-dunkel);
  font-family: var(--head);
  font-size: var(--grad-klein);
  font-weight: var(--schnitt-titel);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
html.dark .tab-badge,
html.dark .chip-count { background: var(--auf-dunkel); color: var(--black); }

/* ==========================================================================
   Schubladenmenue: faehrt von links, zwei Drittel breit, Rest abgedunkelt.
   ========================================================================== */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(29, 28, 28, 0.5);
  z-index: 45;
  display: flex;
  touch-action: none;
}
.drawer {
  width: min(340px, 88%);
  max-width: 88%;
  height: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: calc(12px + env(safe-area-inset-top)) var(--rand) max(16px, env(safe-area-inset-bottom));
  animation: drawer-in 200ms ease;
}
@keyframes drawer-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; }
}
/* Kontokarte mit dem runden Logo: die dunkle Karte des Skills — #1D1C1C,
   weisse Schrift, Radius 14, ohne Rand (Bubby, 12.09.2026). Sie fuehrt
   selbst in Mein Bereich — der kuerzeste Weg zu den eigenen Daten. */
.drawer-konto {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--black);
  color: var(--auf-dunkel);
  border: 0;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  flex: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Ueberfahren hellt die dunkle Karte auf, wie eine Zeile auf Schwarz. */
.drawer-konto:hover { background: var(--dark-row); }
.drawer-konto .brand-logo { width: 56px; height: 56px; }
.drawer-konto .mehr-row-chev { margin-left: auto; color: var(--auf-dunkel); }
.drawer-konto .muted { color: var(--auf-dunkel-leise); }
/* Auf dunklem Grund setzt eine Linie die dunkle Karte ab, wie bei der Kassa. */
html.dark .drawer-konto { outline: 1px solid var(--line); outline-offset: -1px; }
html.dark.black .drawer-konto { background: var(--paper); }
.drawer-konto-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drawer-konto-copy strong { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); }
.drawer-konto-copy .badge { align-self: flex-start; margin-top: 4px; }
/* Die Liste rollt fuer sich; Kontokarte oben und Fuss unten bleiben stehen. */
.drawer-liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Die Gruppen behalten ihre Hoehe: als Flex-Kinder mit overflow hidden
   wuerden sie sonst gestaucht statt zu rollen. */
.drawer-liste > .mehr-group { flex: none; }
/* In der schmalen Schublade ruecken Sinnbild und Text zusammen, und jede
   Zeile bleibt einzeilig — sonst wird aus einer Zeile ein Absatz. */
.drawer .mehr-row {
  gap: 12px;
  padding: 10px 14px;
}
.drawer .mehr-row-icon { width: 40px; height: 40px; }
.drawer .mehr-row-icon .ico { width: 20px; height: 20px; }
.drawer .mehr-row + .mehr-row::before { left: calc(14px + 40px + 12px); }
.drawer .mehr-group-label { padding: 12px 14px 4px; }
.drawer .mehr-row-copy strong,
.drawer .mehr-row-unten .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Abmelden steht fest unten links, die Liste rollt darueber hinweg
   (Bubby, 12.09.2026). */
.drawer-fuss {
  margin-top: auto;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 12px;
}
.drawer-fuss .ghost { width: 100%; }
/* Darstellung: der Schalter der alten Seitenspalte, jetzt ueber Abmelden.
   Eine flache Zeile, kein Knopf — die Schublade traegt flache Zeilen. */
.drawer-darstellung {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--grad-beschreibung);
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.drawer-darstellung:hover { background: var(--row-hover); color: var(--ink); }
/* Traeger der zwei Markenzeichen: kein beiger Kreis wie bei den Wegen, nur
   das Zeichen selbst — mit der Hoehe eines Fingertipps darunter.
   Seit 15.09.2026 tun die beiden Verschiedenes, also duerfen sie nicht mehr
   gleich aussehen: das Logo bleibt blank wie ein Markenzeichen, das
   Slogan-Band bekommt die beige Flaeche der runden Knoepfe, weil es ein
   Bedienknopf ist. Dazwischen steht ein Haarstrich. */
.marke-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: var(--radius-tight);
  flex: 0 0 auto;
  text-decoration: none;
  cursor: pointer;
}
.marke-btn:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }
html.dark .marke-btn:focus-visible { outline-color: var(--auf-dunkel); }
.marke-btn:disabled { cursor: default; opacity: 0.4; }
/* Das Slogan-Band ist der Knopf zum Aktualisieren und traegt darum dieselbe
   beige Flaeche wie die runden Knoepfe rechts, voll gerundet. */
.marke-aktion {
  padding: 0 11px;
  border-radius: 999px;
  background: var(--card);
  transition: background-color 0.15s ease;
}
.marke-aktion:hover:not(:disabled) { background: var(--row-hover); }
/* Das Logo ohne Griff: fuer Mitarbeiter nur noch Zeichen, kein Knopf. */
.marke-zeichen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 2px;
  flex: 0 0 auto;
}
/* Der Haarstrich zwischen Marke und Bedienung: eine Linie, sonst nichts. */
.marke-strich {
  width: 1px;
  height: 22px;
  margin: 0 5px;
  background: var(--line);
  flex: 0 0 auto;
}
/* Ein Tipp dreht das Zeichen einmal um sich selbst: das Logo senkrecht,
   das Slogan-Band waagrecht. Laeuft etwas, atmet das jeweilige Zeichen —
   das Logo waehrend des Eingangs, das Band waehrend des Neuholens. */
.dreht-senkrecht img { animation: marke-senkrecht 0.52s ease-in-out; }
.dreht-waagrecht img { animation: marke-waagrecht 0.52s ease-in-out; }
.marke-btn.is-busy img { animation: marke-atmet 1.2s ease-in-out infinite; }
@keyframes marke-senkrecht {
  from { transform: rotateX(0); }
  to { transform: rotateX(360deg); }
}
@keyframes marke-waagrecht {
  from { transform: rotateY(0); }
  to { transform: rotateY(360deg); }
}
@keyframes marke-atmet {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .dreht-senkrecht img,
  .dreht-waagrecht img,
  .marke-btn.is-busy img { animation: none; }
}
.slogan-icon {
  display: block;
  width: auto;
  height: 48px;
  margin: 24px auto 8px;
}

.search-wrap {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 0 12px;
}
.search-ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  display: inline-flex;
}
.search-ico .ico { width: 20px; height: 20px; }
.search-wrap input { padding-left: 44px; }

.page-head { margin-bottom: 16px; }
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
}
.filters .tabs { margin-bottom: 0; border-bottom: 0; }
.page-head .filters { margin-bottom: 12px; }
.page-head .filter-note { margin-bottom: 0; }
.filter-note {
  color: var(--muted);
  margin: 0 0 12px;
  font-size: var(--grad-beschreibung);
  font-weight: var(--schnitt-titel);
}
.dates {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: var(--grad-beschreibung);
  font-weight: var(--schnitt-titel);
}
.dates label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.dates input { width: auto; min-height: 44px; padding: 8px 12px; }
.filters > select { width: auto; min-width: 200px; min-height: 44px; }

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px var(--karte-innen);
  border-top: 1px solid var(--line-card);
  color: var(--muted);
  font-size: var(--grad-beschreibung);
}
.pager p { margin: 0; }
.pager-actions { display: flex; gap: 8px; }
.pager .ghost { min-height: 40px; padding: 6px 14px; font-size: var(--grad-beschreibung); }

/* ==========================================================================
   Kennzahlkacheln: beige, Radius 14, ohne Linie, zwei je Zeile, 16 Abstand,
   Zahl gross und Beschriftung klein darunter, beides mittig.
   ========================================================================== */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis.kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) {
  .kpis.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kpi {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 16px 12px;
  min-height: 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  color: inherit;
  font: inherit;
  text-align: center;
}
.kpi-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  order: 2;
}
.kpi-head .mark { color: var(--muted); flex: none; }
.kpi-head .mark .ico { width: 16px; height: 16px; }
.kpi .label {
  color: var(--muted);
  font-family: var(--head);
  font-size: var(--grad-klein);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: var(--schnitt-titel);
  line-height: var(--lh-tight);
  min-width: 0;
}
.kpi .value {
  order: 1;
  font-family: var(--head);
  font-size: var(--grad-seitentitel);
  font-weight: var(--schnitt-titel);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}
.kpi-text .value { font-size: var(--grad-karte); }
.kpi .hint {
  order: 3;
  color: var(--muted);
  font-size: var(--grad-beschreibung);
  line-height: var(--lh-body);
}
.kpi.clickable { cursor: pointer; }
/* Ausgewaehlt heisst 2 rundum in Schwarz, ueberfahren 2 in #656060. */
.kpi.selected,
.kpi.picked {
  outline: 2px solid var(--black);
  outline-offset: -2px;
}
html.dark .kpi.selected,
html.dark .kpi.picked { outline-color: var(--auf-dunkel); }

/* Zweite Bauart des Skills: in Umrisskarten steht die Beschriftung oben und
   die Zahl darunter, beide linksbuendig. Fuer Kennzahlen ueber einer Liste. */
.kpis-umriss .kpi {
  background: var(--paper);
  border: 1px solid var(--line);
  align-items: flex-start;
  text-align: left;
  padding: 16px 20px;
  min-height: 0;
  gap: 2px;
}
.kpis-umriss .kpi-head { order: 1; justify-content: flex-start; }
.kpis-umriss .kpi .value { order: 2; }
.kpis-umriss .kpi .hint { order: 3; }
.kpis-umriss .kpi.selected,
.kpis-umriss .kpi.picked { background: var(--card); border-color: transparent; }
html.dark .kpis-umriss .kpi { background: transparent; }

/* Hauptkachel: die erste Box auf Heute, volle Breite, dunkle Karte. Die
   Beschriftung traegt Gold — auf Schwarz traegt Gold jede Groesse.
   Der Selektor nennt das Gitter mit, sonst gewinnt die spaetere Regel
   `.heute-grid > .kpi { color: inherit }` und die Zahl bliebe dunkel. */
.heute-grid > .kpi.kpi-hero,
.kpi.kpi-hero {
  grid-column: 1 / -1;
  background: var(--black);
  color: var(--auf-dunkel);
  align-items: flex-start;
  text-align: left;
  padding: var(--karte-innen);
  min-height: 8.5rem;
  gap: 6px;
}
.kpi.kpi-hero .kpi-head { justify-content: flex-start; }
.kpi.kpi-hero .label { color: var(--gold); }
.kpi.kpi-hero .hint { color: var(--auf-dunkel-leise); }
.kpi.kpi-hero .value { font-size: var(--grad-seitentitel); color: var(--auf-dunkel); }
.kpi.kpi-hero.kpi-text .value { font-size: var(--grad-abschnitt); }
html.dark .heute-grid > .kpi.kpi-hero { background: var(--black); color: var(--auf-dunkel); }
/* Ein Anlass heute traegt dieselbe dunkle Karte, bleibt aber eine gewoehnliche
   Kachel im Raster: halbe Breite, mittig. Nur die Form kommt zurueck, die
   Farben bleiben die der Hauptkachel. */
.heute-grid > .kpi.kpi-hero.kpi-schmal,
.kpi.kpi-hero.kpi-schmal {
  grid-column: auto;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
  min-height: 7rem;
  gap: 4px;
}
.kpi.kpi-hero.kpi-schmal .kpi-head { justify-content: center; }
.kpi.kpi-hero.kpi-schmal.kpi-text .value { font-size: var(--grad-karte); }
/* Leere Boxen treten zurueck: Umrisskarte statt beiger Flaeche. */
.heute-grid > .kpi.is-empty:not(.kpi-hero) {
  background: var(--paper);
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
html.dark .heute-grid > .kpi.is-empty:not(.kpi-hero) { background: transparent; }
/* Dunkle Karten auf dunklem Grund: eine Linie setzt sie ab. */
html.dark .kassa-hero,
html.dark .kpi.kpi-hero,
html.dark .me-hero {
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
html.dark.black .kpi.kpi-hero,
html.dark.black .me-hero { background: var(--paper); }

.heute-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.heute-grid > .kpi {
  width: 100%;
  margin: 0;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.heute-grid > .kpi:active { transform: scale(0.98); }
.heute-grid > .kpi:last-child:nth-child(odd) { grid-column: span 2; }
/* Mit der Hauptkachel voran bleibt bei gerader Zahl die letzte Box allein —
   dann wird sie breit; beim Anpassen sind alle gleich gross. */
.heute-grid:not(.customizing) > .kpi:last-child:nth-child(odd) { grid-column: auto; }
.heute-grid:not(.customizing) > .kpi:last-child:nth-child(even):not(.kpi-hero),
.heute-grid:not(.customizing) > .kpi.kpi-schmal:last-child:nth-child(even) { grid-column: span 2; }
@media (min-width: 992px) {
  .heute-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .heute-grid > .kpi:last-child:nth-child(odd) { grid-column: auto; }
  .heute-grid:not(.customizing) > .kpi:last-child:nth-child(even):not(.kpi-hero),
  .heute-grid:not(.customizing) > .kpi.kpi-schmal:last-child:nth-child(even) { grid-column: auto; }
}
.heute-grid.customizing > .kpi:active { transform: none; }
.heute-grid.customizing {
  touch-action: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.heute-grid.customizing > .kpi { padding-top: 30px; }
.kpi.is-empty .value:empty { min-height: 1.2em; }
.kpi.placeholder { opacity: 0.35; outline: 2px dashed var(--black); background: transparent; }
.kpi.ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  margin: 0;
  pointer-events: none;
  opacity: 0.95;
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 12px;
  min-height: 7rem;
}
.kpi-grip {
  position: absolute;
  top: 8px;
  right: 8px;
  color: var(--muted);
  line-height: 0;
}
.kpi-grip .ico { width: 18px; height: 18px; }
.kpi-remove,
.kpi-add {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--black);
  font-size: var(--grad-text);
  font-weight: var(--schnitt-stark);
  line-height: 1;
  display: grid;
  place-items: center;
  z-index: 1;
  padding: 0;
}
html.dark .kpi-remove,
html.dark .kpi-add { background: var(--card); color: var(--auf-dunkel); }
.kpi-add { position: static; margin-bottom: 6px; }
.kpi-add .ico { width: 16px; height: 16px; }
.kpi-more { opacity: 0.72; width: 100%; position: relative; min-height: 0; }
.page-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.page-actions-date {
  margin: 0;
  font-size: var(--grad-beschreibung);
  color: var(--muted);
  text-transform: capitalize;
}
.heute-customize-head { margin-bottom: 16px; }
.heute-customize-head .heute-set-chips { margin-bottom: 8px; }
.heute-count { margin: 0 0 4px; font-size: var(--grad-beschreibung); font-weight: var(--schnitt-titel); }
.heute-count-hint,
.heute-customize-hint { margin: 0 0 8px; font-size: var(--grad-beschreibung); }
.heute-customize-actions { display: flex; gap: 8px; }
.heute-customize-actions > * { flex: 1; width: auto; }
.heute-more { margin-top: 16px; }
.heute-more-title { margin: 0 0 8px; }
.heute-more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ==========================================================================
   Karten und Listen. Die Umrisskarte hat keine eigene Fuellung, nur ihre
   Linie; Zeilen darin trennt eine eingerueckte Linie #dedfd4.
   ========================================================================== */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.panel h2 {
  font-family: var(--head);
  font-size: var(--grad-karte);
  font-weight: var(--schnitt-titel);
  margin: 0;
  padding: 18px var(--karte-innen) 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.panel h2 .mark { color: var(--muted); }
.panel h2 .mark .ico { width: 20px; height: 20px; }
.panel-title { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.panel-head-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.panel-inner { padding: 4px var(--karte-innen) var(--karte-innen); }
.panel > .empty { padding-top: 0; }
.panel > .muted { padding: 0 var(--karte-innen) 12px; margin: 0; }
.panel > .modal-dl { margin: 0; padding: 0 var(--karte-innen) 8px; }
.panel > .text-btn { margin: 4px var(--karte-innen) 16px; }

/* ==========================================================================
   Listenzeilen. Das haeufigste Muster des Skills und ab jetzt das einzige:
   mehrere Zeilen liegen in einer Karte, getrennt durch eingerueckte
   Trennlinien — nicht durch Abstaende, nicht durch Spaltenstriche und auf
   keiner Breite durch eine Tabelle. Zeilenhoehe mindestens 72, sie waechst
   mit dem Text. Sinnbild links, Titel in Montserrat 500, Beschreibung
   darunter, Betrag und Status rechts.
   ========================================================================== */
.liste {
  display: flex;
  flex-direction: column;
}
.listenzeile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 72px;
  padding: 14px var(--karte-innen);
  width: 100%;
  text-align: left;
}
/* Die Trennlinie beginnt buendig zum Titel, nicht am Kartenrand. */
.listenzeile + .listenzeile::before {
  content: "";
  position: absolute;
  left: calc(var(--karte-innen) + 48px + 16px);
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-card);
}
.liste:not(:has(.zeile-sinnbild)) .listenzeile + .listenzeile::before {
  left: var(--karte-innen);
}

/* Die drei Zustaende unterscheiden sich durch Flaeche und Rand, nie durch
   Farbe oder Fettdruck. Ueberfahren: Flaeche, kein Rand. Ausgewaehlt:
   2 rundum in Schwarz, Radius 11, und die Trennlinien entfallen. */
.listenzeile.row-open { cursor: pointer; }
.listenzeile.row-open:hover,
.listenzeile.clickable-row:hover { background: var(--row-hover); }
.listenzeile.row-open:active { background: var(--row-hover); }
.listenzeile.is-selected {
  background: var(--card);
  border-radius: var(--radius-btn);
  outline: 2px solid var(--black);
  outline-offset: -2px;
}
html.dark .listenzeile.is-selected { outline-color: var(--auf-dunkel); }
.listenzeile.is-selected::before,
.listenzeile.is-selected + .listenzeile::before { content: none; }
/* Eine faellige oder ueberfaellige Zeile tritt durch ihre Flaeche hervor,
   nie durch Farbe — die Marke kennt kein Rot. */
.listenzeile.row-overdue,
.listenzeile.row-due-soon { background: var(--card); }

.zeile-sinnbild { display: inline-flex; flex: 0 0 auto; }
.zeile-haupt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
/* Obere Zeile: Titel links, Betrag rechts. Der Betrag gibt nie nach, der
   Titel kuerzt sich. */
.zeile-oben,
.zeile-unten {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.zeile-unten { align-items: center; }
.zeile-titel {
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-karte);
  color: var(--black);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.dark .zeile-titel { color: var(--auf-dunkel); }
.zeile-betrag {
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
  text-align: right;
  flex: 0 0 auto;
  margin-left: auto;
}
/* Untere Zeile: Beschreibung links, Abzeichen und Pfeil rechts. */
.zeile-unter {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--muted);
  font-size: var(--grad-beschreibung);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Die Nebenfelder laufen als ein Satz, durch Punkte getrennt. */
.zeile-feld + .zeile-feld::before {
  content: "·";
  margin: 0 .4em;
  color: var(--muted);
}
.zeile-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 6px;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
}
.zeile-status .pill { white-space: nowrap; }
.zeile-status .abzeichen { margin-left: 0; }
.zeile-aktionen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.zeile-aktionen .row-actions { flex-wrap: nowrap; }
/* Fuehrt die ganze Zeile weiter, braucht sie keine Knopfreihe. */
.listenzeile.row-open .row-actions .icon-btn { display: none; }
.zeile-haupt .qr-box,
.zeile-haupt .qr-note { margin-top: 8px; }

/* Sinnbild im hellen, abgerundeten Quadrat. */
.mehr-row-icon,
.list-lead,
.settings-list-icon,
.link-ico,
.person-avatar,
.mehr-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  background: var(--square);
  color: var(--black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
html.dark .mehr-row-icon,
html.dark .list-lead,
html.dark .settings-list-icon,
html.dark .link-ico,
html.dark .person-avatar,
html.dark .mehr-avatar { color: var(--auf-dunkel); }
/* Personen sind Kreise, Dinge bleiben Quadrate. */
.person-avatar { border-radius: 999px; }
.list-lead .ico,
.mehr-row-icon .ico,
.settings-list-icon .ico,
.link-ico .ico { width: 22px; height: 22px; }

.soon {
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 28px;
  color: var(--muted);
}

/* Listenzeilen liegen in einer Karte, getrennt durch eingerueckte Linien.
   Drei Zustaende: ruhend, ueberfahren (#edede0, kein Rand), ausgewaehlt
   (#f1efe7 mit 2 rundum in Schwarz, Radius 11). */
.mehr-group,
.settings-list {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.mehr-group-label {
  margin: 0;
  padding: 14px var(--karte-innen) 4px;
}
.mehr-row,
.settings-list-row,
.settings-nav-row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 72px;
  padding: 12px var(--karte-innen);
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  position: relative;
}
.mehr-row + .mehr-row::before,
.settings-list-row + .settings-list-row::before {
  content: "";
  position: absolute;
  left: calc(var(--karte-innen) + 48px + 16px);
  right: 0;
  top: 0;
  height: 1px;
  background: var(--line-card);
}
.mehr-row:hover,
.settings-list-row:hover,
.settings-nav-row:hover { background: var(--row-hover); }
.mehr-row.is-selected {
  background: var(--card);
  border-radius: var(--radius-btn);
  outline: 2px solid var(--black);
  outline-offset: -2px;
}
html.dark .mehr-row.is-selected { outline-color: var(--auf-dunkel); }
.mehr-row.is-selected::before,
.mehr-row.is-selected + .mehr-row::before { content: none; }
.mehr-row-copy,
.settings-list-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mehr-row-copy strong,
.settings-list-copy strong {
  font-family: var(--head);
  font-size: var(--grad-karte);
  font-weight: var(--schnitt-titel);
}
.mehr-row-copy .muted { font-size: var(--grad-beschreibung); }
/* Wie viele offene Posten hinter der Zeile warten: schwarz, nie farbig. Die
   Zahl steht in der zweiten Zeile, damit der Titel ganz lesbar bleibt. */
.mehr-row-unten {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.mehr-row-zahl {
  flex: 0 0 auto;
  padding: 2px 8px;
  min-height: 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.mehr-row-chev,
.chev { color: var(--muted); flex: 0 0 auto; display: inline-flex; }
.mehr-row-chev .ico,
.chev .ico { width: 20px; height: 20px; }
.settings-back { margin-bottom: 16px; }
.settings-subhead {
  margin: 0 0 16px;
  font-family: var(--head);
  font-size: var(--grad-abschnitt);
  font-weight: var(--schnitt-titel);
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-tabs { margin-bottom: 16px; }
.settings-device-block { padding: 4px var(--karte-innen) 12px; }
.settings-device-actions { padding: 4px var(--karte-innen) 8px; }
.settings-version { padding: 0 var(--karte-innen) 16px; margin: 0; }

.link-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px var(--karte-innen);
  min-height: 72px;
  text-decoration: none;
  color: inherit;
  margin-bottom: 8px;
}
.link-card:hover { background: var(--row-hover); }
.link-card > div:not(.link-ico) { flex: 1; min-width: 0; }
.link-card strong { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); }
.link-card p { margin: 2px 0 0; }
.link-chev { color: var(--muted); display: inline-flex; flex: none; }
.link-chev .ico { width: 20px; height: 20px; }
.pin-change-toggle { width: 100%; border: 0; margin: 0; text-align: left; }
.pin-change-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.pin-change-copy { flex: 1; min-width: 0; }
.pin-change-copy > span { display: block; margin: 2px 0 0; }
.pin-change-copy > .settings-ok:empty { display: none; }
.pin-change-toggle[aria-expanded="true"] .link-chev { transform: rotate(90deg); }

/* Grusskarte in Mein Bereich: dunkle Karte, runder Avatar, die zweiteilige
   Ueberschrift der Marke — HALLO und darunter der Vorname in Gold. */
.me-hero {
  background: var(--black);
  color: var(--auf-dunkel);
  border: 0;
  border-radius: var(--radius);
  padding: var(--karte-innen);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.me-hero-copy { min-width: 0; }
.me-hero-title { font-size: var(--grad-abschnitt); padding-bottom: .95em; }
.me-hero p { margin: 0; color: var(--auf-dunkel-leise); }
/* Auf der schwarzen Karte ist der Kreis die aufgehellte Flaeche des Skills. */
.me-hero .person-avatar { width: 56px; height: 56px; font-size: var(--grad-abschnitt); background: var(--dark-row); color: var(--auf-dunkel); }
html.dark .me-hero .person-avatar { background: var(--dark-row); color: var(--auf-dunkel); }

.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.person {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--karte-innen);
}
.person-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 4px; }
.person-avatar {
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  text-transform: uppercase;
}
.person h3 {
  margin: 0 0 4px;
  font-family: var(--head);
  font-size: var(--grad-karte);
  font-weight: var(--schnitt-titel);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.person-top p { margin: 0; }
.person dl { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.person dt { color: var(--muted); font-size: var(--grad-klein); text-transform: uppercase; letter-spacing: .06em; }
.person dd { margin: 2px 0 0; font-size: var(--grad-text); }
.person-actions { display: flex; gap: 8px; margin-top: 16px; }
.person-actions .ghost { flex: 1; }
.perm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line-card);
}
.perm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--grad-beschreibung);
  color: var(--ink);
  margin: 0;
  font-weight: var(--schnitt-text);
}
.perm-chip input { width: 16px; height: 16px; }
.lohn-box { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-card); }
.lohn-row { display: grid; gap: 6px; padding: 8px 0; }
.lohn-row > div { display: flex; justify-content: space-between; gap: 8px; }

/* ==========================================================================
   Formulare
   ========================================================================== */
.settings-form {
  padding: 4px var(--karte-innen) 8px;
  display: grid;
  gap: 4px;
}
.tool-row, .flag-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-card);
  margin: 0;
  font-size: var(--grad-text);
  font-weight: var(--schnitt-text);
}
.tool-row:last-child, .flag-row:last-child { border-bottom: 0; }
.tool-row p, .flag-row p { margin: 4px 0 0; color: var(--muted); font-size: var(--grad-beschreibung); }
.flag-row > div:first-child { flex: 1; min-width: 0; }
.flag-row strong { font-family: var(--head); font-weight: var(--schnitt-titel); }
.flag-block { padding: 4px var(--karte-innen) 8px; }
.settings-form .flag-block { padding-left: 0; padding-right: 0; }
.flag-row input[type="checkbox"]:not(.switch) {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 2px;
}
.flag-row .state {
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-beschreibung);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.notify-hint { padding: 4px 0 8px; margin: 0; }
.panel > .notify-hint { padding: 0 var(--karte-innen) 12px; }
.notify-event { align-items: center; gap: 16px; }
.notify-head { padding-bottom: 4px; }
.notify-pair { display: flex; gap: 14px; flex: none; align-items: center; }
.notify-head .notify-pair { gap: 14px; min-width: 112px; justify-content: space-between; }
.notify-sw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 48px;
  font-size: var(--grad-klein);
  font-weight: var(--schnitt-titel);
  color: var(--muted);
  cursor: pointer;
  margin: 0;
}
.notify-sw .state { min-height: 28px; }
.notify-sw.notify-none { width: 48px; cursor: default; text-align: center; }
.notify-sw.notify-none .state { display: flex; align-items: center; min-height: 28px; }
.form-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
  align-items: stretch;
}
/* Schliesst ohne eigenen Vorabstand an den Text darueber an. */
.form-actions-anschluss { padding-top: 0; }
.form-actions .primary,
.form-actions .ghost { width: 100%; }
.panel > .form-actions { padding: 8px var(--karte-innen) var(--karte-innen); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row .field-label { min-width: 0; }
.settings-ok { margin: 0 var(--karte-innen) 12px; color: var(--moss); font-weight: var(--schnitt-titel); }
.panel > .error { margin: 0 var(--karte-innen) 12px; }
.stb-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 0 var(--karte-innen) var(--karte-innen);
}
.stb-stats div {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 12px;
}
.stb-stats span { display: block; color: var(--muted); font-size: var(--grad-beschreibung); }
.stb-stats strong { display: block; margin-top: 4px; font-family: var(--head); font-weight: var(--schnitt-titel); }

.auto-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 var(--karte-innen) 12px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--card);
  font-size: var(--grad-beschreibung);
  font-weight: var(--schnitt-titel);
}
.auto-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--muted);
}
.auto-status-paused .auto-status-dot { background: var(--muted); }
.auto-status-bad { outline: 2px solid var(--black); outline-offset: -2px; }
.auto-status-bad .auto-status-dot { background: var(--black); }
.auto-status-meta { color: var(--muted); font-weight: var(--schnitt-titel); }
html.dark .auto-status-bad { outline-color: var(--auf-dunkel); }
html.dark .auto-status-bad .auto-status-dot { background: var(--auf-dunkel); }

.ingest-notice { margin: 0 0 12px; }
.tool-hint {
  margin: 0 var(--karte-innen) 12px;
  padding: 12px;
  color: var(--muted);
  font-size: var(--grad-text);
}
.tool-hint-blocked {
  color: var(--ink);
  background: var(--card);
  border-radius: var(--radius);
}
.jobs-notice { margin: 0 var(--karte-innen) 12px; font-weight: var(--schnitt-titel); font-size: var(--grad-text); }
.jobs-notice-ok { color: var(--moss); }
.jobs-notice-error { color: var(--danger); }
.jobs-notice-warn { color: var(--black); }
html.dark .jobs-notice-warn { color: var(--auf-dunkel); }
.jobs-notice-running { color: var(--muted); }
.main > .jobs-notice.ingest-notice { margin: 0 0 12px; }
.kurznamen-liste { padding: 0 var(--karte-innen) 16px; }
.kurzname-input { min-width: 120px; min-height: 40px; padding: 6px 10px; }

/* ==========================================================================
   Blaetter und Dialoge. Blatt von unten und Fussleiste waren bis zum
   14.09.2026 die zwei grossen Flaechen, die weiss sein durften. Seit dem
   warmen Grund tragen beide die daraus gerechnete Flaeche.
   ========================================================================== */
.sheet-scrim,
.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(29, 28, 28, 0.5);
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--rand);
  touch-action: none;
}
.sheet-scrim { z-index: 45; }
.sheet,
.modal {
  background: var(--bar);
  border: 0;
  border-radius: var(--radius);
  width: min(460px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: var(--karte-innen);
  touch-action: pan-y;
}
.sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: min(90vh, 860px);
}
.sheet.sheet-wide { width: min(720px, 100%); height: min(92vh, 860px); }
.sheet-handle { display: none; flex: none; }
.sheet-head { flex: none; }
.sheet-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.sheet-close { flex: 0 0 auto; }
body.sheet-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet { animation: none !important; }
  .icon-btn { transition: none; }
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.modal-head h2 { margin: 4px 0 0; font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-titel); }
.modal-head .eyebrow { margin: 4px 0 0; }
.modal-amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.modal-amounts > div {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 12px;
}
.modal-amounts p { margin: 0; }
.modal-amounts .money { font-family: var(--head); font-size: var(--grad-abschnitt); font-weight: var(--schnitt-titel); margin: 4px 0 0; }
.modal-dl { margin: 0 0 16px; }
.modal-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-card);
}
.modal-dl > div:last-child { border-bottom: 0; }
.modal-dl dt { color: var(--muted); }
.modal-dl dd { margin: 0; text-align: right; }
.modal-dl > div:has(.invoice-artikel) { display: block; }
.modal-dl dd.invoice-artikel {
  text-align: left;
  margin-top: 6px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.modal .primary,
.sheet .primary { margin-top: 4px; }
.assign-block { margin: 0 0 16px; }
.assign-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.modal-actions .primary { width: 100%; margin-top: 0; }
.logout-modal { text-align: center; }
.logout-modal h2 {
  margin: 4px 0 16px;
  font-family: var(--head);
  font-size: var(--grad-abschnitt);
  font-weight: var(--schnitt-titel);
}
.logout-modal .modal-actions .ghost { width: 100%; }

/* ==========================================================================
   Benachrichtigungen an einer senkrechten Zeitachse, das Neueste zuerst.
   Punkt auf der Achse, Datum und Kategorien darueber, darunter eine beige
   Karte ohne Linie mit hoechstens einem hellen Zweitknopf.
   ========================================================================== */
.zeitachse {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zeit-eintrag {
  position: relative;
  padding-left: 55px;
  padding-bottom: 52px;
}
.zeit-eintrag::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 8px;
  bottom: 0;
  width: 2px;
  background: var(--achse);
}
.zeit-eintrag:last-child { padding-bottom: 8px; }
.zeit-eintrag:last-child::before { display: none; }
.zeit-punkt {
  position: absolute;
  left: 20px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--black);
}
html.dark .zeit-punkt { background: var(--auf-dunkel); }
.zeit-kopf { margin-bottom: 10px; }
.zeit-datum {
  margin: 0;
  font-family: var(--head);
  font-size: var(--grad-karte);
  font-weight: var(--schnitt-titel);
  color: var(--black);
  line-height: var(--lh-tight);
}
html.dark .zeit-datum { color: var(--auf-dunkel); }
.zeit-kategorien { margin: 4px 0 0; font-size: var(--grad-beschreibung); }
.zeit-karte {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 24px;
}
/* Auf dem Telefon fuellt die Karte die Breite bis zum rechten Rand — die 369
   der 440er Vorlage sind genau das. Am Schreibtisch bleibt sie lesbar breit. */
@media (min-width: 992px) {
  .zeit-karte { max-width: 560px; }
}
.zeit-karte + .zeit-karte { margin-top: 8px; }
.zeit-filter { margin: 0 0 20px; }
.zeit-titel {
  margin: 0 0 6px;
  font-family: var(--head);
  font-size: var(--grad-abschnitt);
  font-weight: var(--schnitt-titel);
  line-height: var(--lh-tight);
}
.zeit-text {
  margin: 0 0 16px;
  font-size: var(--grad-text);
  color: var(--ink);
  line-height: var(--lh-body);
}

/* ==========================================================================
   Kassa: dunkle Karte mit weisser Schrift.
   ========================================================================== */
.kassa-hero {
  background: var(--black);
  color: var(--auf-dunkel);
  border: 0;
  border-radius: var(--radius);
  padding: var(--karte-innen);
  margin-bottom: 16px;
}
html.dark.black .kassa-hero { background: var(--paper); outline: 1px solid var(--line); outline-offset: -1px; }
.kassa-hero h2 {
  color: var(--gold);
  margin: 0;
  font-family: var(--head);
  font-size: var(--grad-karte);
  font-weight: var(--schnitt-titel);
  display: flex;
  align-items: center;
  gap: 8px;
}
.kassa-hero-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.kassa-hero .tabs { margin: 0; border-bottom: 0; }
.kassa-hero .tab { color: var(--auf-dunkel-leise); min-height: 36px; padding: 6px 10px; }
.kassa-hero .tab.active { color: var(--auf-dunkel); box-shadow: inset 0 -3px 0 var(--auf-dunkel); }
.kassa-hero-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 12px;
  font-size: var(--grad-klein);
  margin-bottom: 6px;
}
.kassa-hero-meta > span:last-child { text-align: right; }
.kassa-hero-meta .mark .ico { width: 16px; height: 16px; }
.kassa-hero-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.kassa-hero-total .money {
  font-size: var(--grad-seitentitel);
  font-weight: var(--schnitt-titel);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: var(--lh-tight);
}
.kassa-hero-amounts {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--grad-klein);
  margin-top: 6px;
}
/* Umsaetze: dieselbe dunkle Kopfkarte, darin die drei Summen. Beschriftung
   ueber dem Betrag, sonst bricht "Neusiedl € 150,00" auf 390 mitten um. */
.umsatz-hero .kassa-hero-meta > span { display: flex; flex-direction: column; gap: 2px; }
.umsatz-hero .kassa-hero-ort { display: inline-flex; align-items: center; gap: 4px; }
.umsatz-hero .kassa-hero-meta strong { font-size: var(--grad-karte); font-weight: var(--schnitt-titel); white-space: nowrap; }
.umsatz-hero .kassa-hero-meta > span:last-child { align-items: flex-end; }
.umsatz-hero .kassa-hero-total { align-items: center; }
.umsatz-hero .kassa-hero-amounts { color: var(--auf-dunkel-leise); }
.ratio-bar {
  height: 8px;
  background: var(--dark-row);
  border-radius: 999px;
  margin: 10px 0 0;
  overflow: hidden;
  display: flex;
}
/* Der Anteil ist ein Messwert und kommt als Schalter aus der Ansicht,
   nicht als Gestaltungswert im Seitentext. */
.ratio-bar > span { display: block; height: 100%; width: var(--anteil, 0%); background: var(--gold); }
.ratio-bar > em { display: block; height: 100%; flex: 1; background: var(--auf-dunkel); font-style: normal; }
.kassa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 992px) {
  .kassa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.kassa-line, .kassa-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px var(--karte-innen);
  font-size: var(--grad-text);
}
.kassa-total {
  border-top: 1px solid var(--line-card);
  margin-top: 8px;
  padding-top: 12px;
  padding-bottom: 16px;
  font-weight: var(--schnitt-titel);
}
.kassa-total .money { font-weight: var(--schnitt-titel); }
.kassa-col { padding-bottom: 8px; }
.kassa-col h2 { padding-bottom: 12px; }
.money-in { color: var(--moss); }
.money-out { color: var(--danger); }
.kassa-ist-panel { margin-top: 16px; }
.kassa-ist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 var(--karte-innen) 12px; }
.kassa-ist-deltas { padding: 0 var(--karte-innen) 16px; }
.kassa-ist-deltas p { margin: 0 0 6px; }
.kassa-delta-ok { color: var(--moss); }
.kassa-delta-plus { color: var(--moss); }
.kassa-delta-minus { color: var(--danger); }

/* ==========================================================================
   Steuer
   ========================================================================== */
.tax-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (min-width: 992px) {
  .tax-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Zahlentabelle: eng gesetzt, damit drei Karten nebeneinander passen. Mit
   der naechstgroesseren Stufe braucht "Abgaben" 392 in einer 360er Karte und
   wird rechts abgeschnitten. */
/* Zahlenliste: dieselbe Listenzeile, nur mit zwei Betraegen rechts. Die
   Kopfzeile darueber sagt, welcher Zeitraum welche Spalte ist — eine
   Versalien-Abschnittsueberschrift, keine Tabellenkopfzeile. */
.zeilen-kopf {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px var(--karte-innen) 0;
}
.zeilen-kopf-feld {
  width: 6.5rem;
  text-align: right;
  font-family: var(--head);
  font-size: var(--grad-klein);
  font-weight: var(--schnitt-titel);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.liste-zahlen .listenzeile { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
.liste-zahlen .listenzeile + .listenzeile::before { left: var(--karte-innen); }
/* In der schmalen Zahlenkarte darf die Bezeichnung umbrechen statt zu
   Stummeln zu werden - die Zeile waechst mit dem Text, das ist erlaubt. */
.liste-zahlen .zeile-titel {
  font-size: var(--grad-text);
  white-space: normal;
  overflow: visible;
  line-height: var(--lh-tight);
}
/* Zwei Zahlen je Zeile, beide in derselben Spaltenbreite wie die Kopfzeile
   darueber - sonst laesst sich Monat nicht gegen Jahr lesen. */
.liste-zahlen .zeile-oben { gap: 8px; }
.liste-zahlen .zeile-betrag {
  width: 6.5rem;
  flex: 0 0 auto;
  margin-left: 0;
}
.liste-zahlen .zeile-betrag:first-of-type { margin-left: auto; }
/* Drei Spalten statt zwei: Soll, Haben und Unterschied sind Stueckzahlen,
   keine Betraege - sie brauchen viel weniger Platz als eine Geldspalte. */
.zeilen-kopf-drei .zeilen-kopf-feld,
.liste-zahlen.liste-drei .zeile-betrag { width: 4.6rem; }

/* Umsaetze: die zwei Ladenspalten stehen auf jeder Breite, Neusiedl und
   Bruck nebeneinander. Ohne Eurozeichen passen beide auch am Telefon in eine
   Zeile. Was darunter liegt - Bar, Karte, die zwei Steuersaetze - kommt beim
   Antippen und steht am Telefon untereinander. */
.umsatz-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 16px;
  margin: 6px 0 0;
}
.umsatz-detail > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.umsatz-detail dt {
  color: var(--muted);
  font-size: var(--grad-beschreibung);
}
.umsatz-detail dd {
  margin: 0;
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-beschreibung);
  white-space: nowrap;
}

/* ==========================================================================
   Getraenke: zwei Ladenkarten nebeneinander. Oben je Laden nur noch Schaden
   gesamt und letzte Woche, darunter die Sorten mit drei Spalten. Am
   Schreibtisch stehen beide Sortenlisten nebeneinander, am Telefon passen
   zwei nicht nebeneinander - dort steht die Liste des angetippten Ladens
   ueber die volle Breite.
   ========================================================================== */
.laden-paar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin-bottom: 16px;
}
.laden-paar > .panel { margin-bottom: 0; }
.laden-zahlen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 0 var(--karte-innen) 12px;
}
.laden-zahlen > div { min-width: 0; }
.laden-zahlen dd {
  margin: 0;
  font-family: var(--head);
  font-weight: var(--schnitt-titel);
  font-size: var(--grad-abschnitt);
  font-variant-numeric: tabular-nums;
  color: var(--black);
}
html.dark .laden-zahlen dd { color: var(--auf-dunkel); }
.laden-auf { margin: 4px var(--karte-innen) var(--karte-innen); width: calc(100% - 2 * var(--karte-innen)); }
/* Am Telefon steht die Sortenliste unter beiden Ladenkarten, ueber die
   volle Breite - und behaelt deshalb den normalen Innenabstand. */
.laden-sorten { grid-column: 1 / -1; }
@media (min-width: 992px) {
  /* Beide Listen stehen nebeneinander, die Taste braucht niemand mehr. */
  .laden-sorten { grid-column: auto; }
  .laden-auf { display: none; }
}
.tax-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding: 8px var(--karte-innen) 16px;
}
.tax-bar {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  color: var(--muted);
  font-size: var(--grad-klein);
}
.tax-bar-fill {
  width: 100%;
  /* Die Hoehe ist der gemessene Monatswert, gereicht als Schalter. */
  height: var(--hoehe, 0px);
  min-height: 4px;
  border-radius: var(--radius-tight) var(--radius-tight) 0 0;
  background: var(--card);
}
/* Der gewaehlte Monat ist schwarz; Gold auf hellem Grund nur in der Unterzeile. */
.tax-bar.active .tax-bar-fill { background: var(--black); }
html.dark .tax-bar-fill { background: var(--square); }
html.dark .tax-bar.active .tax-bar-fill { background: var(--gold); }
.tax-bar.active { color: var(--black); font-weight: var(--schnitt-titel); }
html.dark .tax-bar.active { color: var(--auf-dunkel); }

/* ==========================================================================
   Diagramme und Preisentwicklung
   ========================================================================== */
/* Die Zeichenflaeche behaelt ihr Seitenverhaeltnis, damit die Achsenschrift
   auf keiner Breite verzogen wird. */
.chart-wrap {
  position: relative;
  aspect-ratio: 64 / 28;
  max-height: 280px;
  margin: 16px var(--karte-innen);
}
.chart-wrap-preis { height: 320px; }
.chart-panel h2 { padding: 18px var(--karte-innen) 0; margin: 0; }

/* Die Monatsbalken zeichnet die Seite selbst — kein fremder Baukasten, kein
   fremder Server. Flaeche, Linie und Schrift kommen aus denselben Schaltern
   wie der Rest der Ansicht. */
.chart-svg { display: block; width: 100%; height: 100%; }
.chart-gitter {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* Auf hellem Grund laufen die Balken schwarz: Gold traegt hier nichts.
   Auf dunklem Grund tragen sie das Beige der Marke. */
.chart-balken { fill: var(--black); }
html.dark .chart-balken { fill: var(--auf-dunkel); }
.chart-achse {
  fill: var(--muted);
  font-family: var(--head);
  font-size: var(--grad-klein);
  font-weight: var(--schnitt-titel);
}
.chart-achse-y { text-anchor: end; }
.chart-achse-x { text-anchor: middle; }
.chart-unavailable {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  margin: 0;
  color: var(--muted);
  font-size: var(--grad-beschreibung);
}
.preis-suggest { display: grid; gap: 4px; margin-top: 10px; max-height: 280px; overflow: auto; }
.preis-suggest-item, .preis-overview button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  min-height: 72px;
  border-radius: var(--radius-btn);
  border: 0;
  background: transparent;
  color: inherit;
}
.preis-suggest-item strong { font-family: var(--head); font-size: var(--grad-karte); font-weight: var(--schnitt-titel); }
.preis-suggest-item:hover, .preis-overview button:hover { background: var(--row-hover); }
.preis-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px var(--karte-innen) 0;
}
.preis-detail-head h3 {
  margin: 0;
  font-family: var(--head);
  font-size: var(--grad-abschnitt);
  font-weight: var(--schnitt-titel);
  display: flex;
  align-items: center;
  gap: 8px;
}
.preis-detail-head p { margin: 4px 0 0; }
.preis-alarme { padding: 8px var(--karte-innen) 0; }
.preis-alarm {
  font-size: var(--grad-beschreibung);
  margin: 4px 0;
  padding: 8px 12px;
  border-radius: var(--radius-btn);
  background: var(--card);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.preis-alarm .ico { width: 16px; height: 16px; }
.preis-overview { display: grid; gap: 4px; margin-top: 10px; max-height: 360px; overflow: auto; }
.preis-overview p { margin: 6px 0 0; }

.birthday-panel { margin-bottom: 16px; }
.birthday-list { list-style: none; margin: 0; padding: 0 var(--karte-innen) 16px; }
.birthday-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-card);
}
.birthday-list li:last-child { border-bottom: 0; }
.birthday-today { background: var(--card); border-radius: var(--radius-btn); padding-left: 12px !important; margin-left: -12px; }

/* ==========================================================================
   Zeilenaktionen, QR, Faelligkeit
   ========================================================================== */
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.row-actions .icon-btn { width: 36px; min-width: 36px; min-height: 36px; height: 36px; }
.row-actions .icon-btn .ico { width: 18px; height: 18px; }
/* Der Pfeil einer Listenzeile: nur auf dem Telefon, wo die Zeile selbst weiterfuehrt. */
/* Der Pfeil steht rechts, wenn die Zeile weiterfuehrt - auf jeder Breite
   gleich, weil die Liste auf jeder Breite dieselbe ist. */
.row-chev {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}
.row-chev .ico { width: 20px; height: 20px; }
tr.row-open { cursor: pointer; }
.qr-box { margin-top: 8px; text-align: center; }
/* Der QR-Code bleibt weiss, damit ihn jede Banking-App liest. */
.qr-box img {
  display: block;
  margin: 0 auto 6px;
  background: #fff;
  border-radius: var(--radius-tight);
  padding: 6px;
}
.qr-box p { margin: 0 0 4px; }
.qr-box-lg { margin-top: 16px; }
.qr-note { margin: 10px 0 0; color: var(--muted); font-size: var(--grad-beschreibung); }
tr.row-overdue td, tr.row-due-soon td { background: var(--card); }
.due-hint { font-size: var(--grad-beschreibung); color: var(--danger); margin-left: 6px; }
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: var(--row-hover); }

/* D-030: Alterszeichen — nur wenn Zahlen veraltet sind oder das Laden fehlschlug. */
.freshbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--card);
  color: var(--muted);
  font-size: var(--grad-beschreibung);
  font-weight: var(--schnitt-titel);
}
.freshbar .mark { line-height: 1; }
.freshbar.is-warn { color: var(--black); outline: 2px solid var(--black); outline-offset: -2px; }
html.dark .freshbar.is-warn { color: var(--auf-dunkel); outline-color: var(--auf-dunkel); }

.boot-card {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  padding: 2rem 2.25rem;
  display: grid;
  place-items: center;
  gap: 16px;
}
.boot-spin {
  width: 3.5rem;
  height: 3.5rem;
  border: 4px solid var(--gold);
  border-top-color: transparent;
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pill-line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ==========================================================================
   Leere Zustaende: eine Papiertuete, so wie der Kunde sie im Laden bekommt.
   Weicher Beutel, zwei Henkelboegen, Strichzeichnung. Gold nur am Henkel.
   ========================================================================== */
.leer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px var(--rand);
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: var(--grad-text);
}
.leer-tuete { display: block; width: 56px; height: 56px; flex: none; }
.leer-tuete .beutel {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.leer-tuete .henkel {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.leer p { margin: 0; }

/* Nur auf Geraeten mit Maus: Fuellung und Linie, keine Bewegung. */
@media (hover: hover) {
  .chip:hover { border-color: var(--black); }
  .kpi.clickable:hover { outline: 2px solid var(--row-hover-line); outline-offset: -2px; }
  .tab:hover { color: var(--black); }
  .tabbar-item:hover .tabbar-kapsel { background: var(--row-hover); }
  html.dark .tab:hover { color: var(--auf-dunkel); }
}

/* ==========================================================================
   Handy (bis 991 px): Kopf- und Fussleiste stehen auf jeder Breite; hier
   ruecken nur die Inhalte enger zusammen.
   ========================================================================== */
@media (max-width: 991px) {
  .kpis.kpis-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.kpis-3 > :last-child { grid-column: 1 / -1; }
  /* Zwei Kacheln auf 390: ein langer Betrag braucht die naechstkleinere
     Stufe, sonst bricht er mitten in der Zahl um. */
  .kpi .value { font-size: var(--grad-abschnitt); }
  .kpi-text .value { font-size: var(--grad-text); }
  /* Die Hauptkachel hat die ganze Breite und behaelt deshalb ihre Groesse. */
  .kpi.kpi-hero .value { font-size: var(--grad-seitentitel); }
  .kpi.kpi-hero.kpi-text .value { font-size: var(--grad-karte); }
  .kpi.kpi-hero.kpi-schmal.kpi-text .value { font-size: var(--grad-text); }

  .search-wrap { margin-bottom: 12px; }
  .page-head { margin-bottom: 16px; }
  /* Filterpillen in einer Reihe, seitlich wischbar. Ohne Ueberhang an den
     Rand — sonst laesst sich die ganze Seite seitlich schieben. */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips > * { flex: none; }
  /* Dasselbe fuer die Reiter: eine Zeile, wischbar — nie ein Umbruch. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex: none; }
  .filters { flex-direction: column; align-items: stretch; gap: 12px; }
  .filters .tabs { width: 100%; }
  .filters > select { width: 100%; }
  .dates {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    gap: 8px;
  }
  .dates input { min-width: 0; margin-left: 0; width: 100%; min-height: 48px; }
  .dates label { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
  .settings-tabs { display: none; }
  .kassa-hero-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; }
  .kassa-hero-total { grid-column: 1 / -1; order: -1; margin-bottom: 4px; }

  /* Die Liste ist auf jeder Breite dieselbe. Auf dem Telefon fallen nur die
     Nebenfelder weg, die erst am grossen Bildschirm Platz haben. */
  .listenzeile { gap: 12px; }
  .zeile-unter .zeile-feld-breit { display: none; }
  .zeile-oben, .zeile-unten { gap: 8px; }
  .zeile-status .pill { font-size: var(--grad-klein); }

  .zeilen-kopf-feld,
  .liste-zahlen .zeile-betrag { width: 5.2rem; font-size: var(--grad-klein); }
  /* Stueckzahlen brauchen keine Geldspalte: so bleibt neben Soll, Haben und
     Unterschied genug Platz fuer den Sortennamen. */
  .zeilen-kopf-drei .zeilen-kopf-feld,
  .liste-zahlen.liste-drei .zeile-betrag { width: 3.4rem; }
  /* Eine Zeile je Tag, auch hier: Datum, Neusiedl, Bruck. Verborgen wird
     nichts mehr - aufgeklappt stehen die Einzelbetraege untereinander. */
  .umsatz-detail { grid-template-columns: minmax(0, 1fr); }
  /* In der halb so breiten Ladenkarte waere der volle Innenabstand fast die
     halbe Breite - und die zwei Schadenzahlen stehen untereinander. */
  .laden-kopf { --karte-innen: 16px; }
  .laden-zahlen { grid-template-columns: minmax(0, 1fr); }
  /* Zwei Sortenlisten passen hier nicht nebeneinander: es steht die des
     angetippten Ladens. Ausgewaehlt heisst 2 in Schwarz, nie eine Farbe. */
  .laden-sorten:not(.ist-offen) { display: none; }
  .laden-kopf.ist-offen { outline: 2px solid var(--black); outline-offset: -2px; }
  html.dark .laden-kopf.ist-offen { outline-color: var(--auf-dunkel); }

  .form-row, .stb-stats { grid-template-columns: 1fr 1fr; }
  .kassa-ist-grid { grid-template-columns: 1fr; }
  .zeit-eintrag { padding-left: 55px; }

  /* Blatt von unten: weisse Flaeche, oben beide Ecken mit Radius 14. */
  .sheet-scrim { align-items: end; justify-items: stretch; padding: 0; }
  .sheet {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: 0 var(--rand) calc(16px + env(safe-area-inset-bottom));
    animation: sheet-up 200ms ease;
  }
  .sheet-handle {
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: var(--pill-line);
  }
  .sheet-head { padding: 12px 4px 8px; margin-bottom: 0; }
  .sheet-body { padding: 0 4px 8px; }
  .sheet.sheet-wide { height: min(92dvh, 860px); max-height: 92dvh; }
  .sheet.sheet-wide .sheet-head { padding: 12px 4px 8px; margin-bottom: 0; flex: none; }
}