/* app.css - Seiten des Kerns: Kacheln der Startseite, Karten, Zeilenlisten, Anmeldung.
   Karten und Kacheln mit den Werten des bisherigen Programms (Stand 21.09.2026).
   Nur Tokens aus tokens.css. */

/* ── Kacheln der Startseite (je Modul eine) ────────────────────────── */
.bereiche-titel { margin: var(--r-2) 0 var(--r-3); font: var(--fett) var(--groesse-1)/var(--zeile-eng) var(--schrift); letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-leise); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--r-4); margin-bottom: var(--r-5); }
.kachel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-1); padding: var(--r-4) var(--r-5); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung-panel); box-shadow: var(--hebung-1); color: var(--tinte); text-decoration: none; min-width: 0; min-height: 120px; transition: box-shadow var(--dauer-kurz), border-color var(--dauer-kurz); }
a.kachel:hover { box-shadow: var(--schatten-panel); }
.kachel-titel { display: inline-flex; align-items: center; gap: var(--r-2); font-size: var(--groesse-0); letter-spacing: .06em; text-transform: uppercase; font-weight: var(--fett); color: var(--tinte-leise); }
.kachel-titel .ic { color: var(--petrol-hell); }
.kachel-wert { font: 650 var(--groesse-7)/var(--zeile-eng) var(--schrift); letter-spacing: -.02em; color: var(--tinte); font-variant-numeric: tabular-nums; }
.kachel-name { display: inline-flex; align-items: center; gap: var(--r-2); font: var(--fett) var(--groesse-5)/var(--zeile-eng) var(--schrift); color: var(--tinte); }
.kachel-name .ic { color: var(--petrol-hell); }
.kachel-unter { font-size: var(--groesse-1); color: var(--tinte-leise); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.kachel.warnt .kachel-wert { color: var(--fehler); }

/* ── Karten ────────────────────────────────────────────────────────── */
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung-panel); box-shadow: var(--schatten-panel); margin-bottom: var(--r-5); min-width: 0; overflow: hidden; }
.karte-kopf { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-3) var(--r-5); border-bottom: 1px solid var(--linie-zart); min-height: 60px; }
.karte-kopf h2 { margin: 0; font: var(--fett) var(--groesse-3)/var(--zeile-eng) var(--schrift); color: var(--tinte); }
.karte-kopf .knopf { margin-left: auto; }
.karte-koerper { padding: var(--r-4) var(--r-5); min-width: 0; }
.karte-koerper > p:first-child { margin-top: 0; }
.karte-knoepfe { display: flex; gap: var(--r-2); flex-wrap: wrap; align-items: center; }

/* ── Zeilenlisten (Module, Papierkorb, Verlauf, Betrieb) ───────────── */
.zeilen { list-style: none; margin: 0; padding: 0; }
.zeile { display: flex; align-items: center; gap: var(--r-3); min-height: var(--hoehe-zeile); padding: var(--r-2) var(--r-5); border-bottom: 1px solid var(--linie-zart); }
.zeile:last-child { border-bottom: 0; }
.zeile-symbol { width: 24px; display: inline-flex; justify-content: center; color: var(--petrol-hell); flex: 0 0 auto; }
.zeile-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.zeile-titel { font-size: var(--groesse-2); font-weight: var(--halbfett); overflow-wrap: anywhere; }
.zeile-unter { font-size: var(--groesse-1); color: var(--tinte-leise); }
.zeile.zurueck .zeile-titel { color: var(--tinte-leise); text-decoration: line-through; }
.zeile > .knopf, .zeile > .schalter, .zeile > .chip { margin-left: auto; }
.zeile > .chip { flex: 0 0 auto; }

/* ── Anmeldung ─────────────────────────────────────────────────────── */
.anmelden-seite { min-height: 100dvh; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: var(--r-5) var(--r-4); }
.anmelden-kasten { width: min(100%, 400px); background: var(--flaeche); border: 1px solid var(--linie-zart); border-radius: var(--rundung-gross); box-shadow: var(--hebung-2); padding: var(--r-6) var(--r-6) var(--r-5); }
.anmelden-logo { display: block; height: 56px; width: auto; margin: 0 auto var(--r-4); }
.anmelden-titel { margin: 0 0 var(--r-5); text-align: center; font: var(--fett) var(--groesse-6)/var(--zeile-eng) var(--schrift-kopf); color: var(--petrol); }
.anmelden-kasten .knopf { width: 100%; }
.anmelden-kasten .fehler { margin-bottom: var(--r-4); }

@media (max-width: 767px) {
  .kacheln { grid-template-columns: minmax(0, 1fr); gap: var(--r-3); }
  .kachel { padding: var(--r-3) var(--r-4); min-height: var(--treffer-min); }
  .karte-kopf, .karte-koerper, .zeile { padding-left: var(--r-4); padding-right: var(--r-4); }
  .karte { margin-bottom: var(--r-4); }
  .anmelden-kasten { padding: var(--r-5) var(--r-4); }
}

/* ══ Programm-Look (Feinschliff 05.10.2026, gilt fuers ganze Programm) ══════════════════════════════
   Klare Schrift fuer Titel und Zahlen (die verspielte Schrift nur im Gruss), weisse Panels mit feinem Rand,
   kleine kraeftige Symbole in Farbquadraten, Kacheln mit zartem Farbverlauf, Zahlen an den Eintraegen.
   Plastische Bilder (Kern.bild) nur sparsam: Boot im Gruss, Umschlaege. */
.p3d { display: block; flex: 0 0 auto; }
.f-sand { background: var(--sand-hell); } .f-salbei { background: var(--salbei); }
.f-rose { background: var(--tonerde-zart); } .f-nebel { background: var(--nebel); }

/* ── Symbol im Farbquadrat ────────────────────────────────────────── */
.symbol-quadrat { width: 30px; height: 30px; border-radius: var(--rundung-symbol); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--weiss); background: var(--sym-nebel); }
.symbol-quadrat.f-sand, .s-sand { background: var(--sym-sand); color: var(--weiss); }
.symbol-quadrat.f-salbei, .s-salbei { background: var(--sym-salbei); color: var(--weiss); }
.symbol-quadrat.f-rose, .s-rose { background: var(--sym-rose); color: var(--weiss); }
.symbol-quadrat.f-nebel, .s-nebel { background: var(--sym-nebel); color: var(--weiss); }
.anzahl { display: inline-flex; align-items: center; min-width: 22px; justify-content: center; padding: 0 var(--r-2); border-radius: var(--rundung-pille); background: var(--sand-hell); color: var(--tinte-leise); font-size: var(--groesse-0); font-weight: var(--fett); line-height: 1.7; }
.taste.hell { background: var(--sand-hell); color: var(--tinte-leise); }

/* ── Seitenkopf: Titel, Satz, Aktionen ────────────────────────────── */
.seite-kopf { align-items: flex-end; padding: var(--r-4) 0 var(--r-5); }
.seite-unter { font-size: var(--groesse-2); color: var(--tinte-leise); }
.gruss { display: flex; align-items: center; gap: var(--r-4); flex: 1 1 auto; min-width: 0; }
.gruss-boot { width: 52px; height: 52px; }
.gruss-titel { margin: 0; font: 650 var(--groesse-titel)/var(--zeile-eng) var(--schrift); letter-spacing: -.02em; color: var(--tinte); }
.gruss-titel .gruss-name { font-family: var(--schrift-kopf); font-weight: var(--halbfett); color: var(--petrol); letter-spacing: -.01em; }
.gruss-satz { margin: var(--r-1) 0 0; font-size: var(--groesse-3); color: var(--tinte-leise); }
.gruss-satz b { color: var(--tinte); font-weight: var(--fett); }

/* ── Kacheln ──────────────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--r-4); margin-bottom: var(--r-5); }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--r-1); min-width: 0; padding: var(--r-4); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung-panel); box-shadow: var(--hebung-1); color: var(--tinte); text-decoration: none; transition: box-shadow var(--dauer-kurz), transform var(--dauer-kurz); }
.tile.v-sand { background-image: var(--verlauf-sand); border-color: var(--rand-sand); }
.tile.v-salbei { background-image: var(--verlauf-salbei); border-color: var(--rand-salbei); }
.tile.v-rose { background-image: var(--verlauf-rose); border-color: var(--rand-rose); }
.tile.v-nebel { background-image: var(--verlauf-nebel); border-color: var(--rand-nebel); }
a.tile:hover { box-shadow: var(--schatten-panel); transform: translateY(-1px); }
.tile-kopf { display: flex; align-items: center; gap: var(--r-3); margin-bottom: var(--r-3); }
.tile-titel { font-size: var(--groesse-2); font-weight: var(--fett); color: var(--tinte); line-height: var(--zeile-eng); flex: 1 1 auto; }
.tile-pfeil { color: var(--tinte-ganz-leise); }
a.tile:hover .tile-pfeil { color: var(--petrol); }
.tile-wert { font: 650 var(--groesse-7)/var(--zeile-eng) var(--schrift); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--tinte); }
.tile-wert small { font: var(--halbfett) var(--groesse-2) var(--schrift); letter-spacing: 0; color: var(--tinte-leise); }
.tile-wert.warnt { color: var(--tonerde-text); }
.tile-hinweis { font-size: var(--groesse-1); color: var(--tinte-leise); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-hinweis.warnt { color: var(--tonerde-text); font-weight: var(--fett); }

/* ── Panels mit Listen (Startseite) ───────────────────────────────── */
.liste-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--r-4); align-items: start; }
.liste-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung-panel); box-shadow: var(--schatten-panel); overflow: hidden; min-width: 0; }
.liste-karte-kopf { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-3) var(--r-4); min-height: 58px; }
.liste-karte-titel { display: flex; align-items: center; gap: var(--r-2); min-width: 0; }
.liste-karte-titel h2 { margin: 0; font: var(--fett) var(--groesse-3)/var(--zeile-eng) var(--schrift); color: var(--tinte); }
.liste-karte-alle { margin-left: auto; display: inline-flex; align-items: center; gap: var(--r-1); min-height: 32px; padding: 0 var(--r-3); border: 1px solid var(--linie); border-radius: var(--rundung-klein); font-size: var(--groesse-1); font-weight: var(--fett); color: var(--petrol); text-decoration: none; white-space: nowrap; }
.liste-karte-alle:hover { background: var(--flaeche-leise); }
.heute-zeilen { list-style: none; margin: 0; padding: 0; }
.heute-zeile { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-3) var(--r-4); border-top: 1px solid var(--linie-zart); font-size: var(--groesse-2); }
.heute-zeile-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.heute-zeile-name { font-weight: var(--fett); }
.heute-zeile-unter { font-size: var(--groesse-1); color: var(--tinte-leise); }
.heute-zeile-betrag { font-weight: var(--fett); white-space: nowrap; }
.heute-zeile-bild { width: 34px; display: inline-flex; justify-content: center; flex: 0 0 auto; }
/* 17.10.2026: der Chip einer Zeile schrumpft nicht neben dem Knopf (Block "Claude macht heute"), die Textspalte gibt nach. */
.heute-zeile > .chip { flex: 0 0 auto; }
.initialen { width: 34px; height: 34px; border-radius: var(--rundung-mittel); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: var(--groesse-1); font-weight: var(--fett); background: var(--nebel); color: var(--petrol); }
.initialen.warnt { background: var(--fehler-flaeche); color: var(--fehler); }
.chip.heute { background: var(--tonerde-zart); color: var(--tonerde-text); font-weight: var(--fett); }
.chip.alt { background: var(--fehler-flaeche); color: var(--fehler); font-weight: var(--fett); }
.zeile-knopf { display: inline-flex; align-items: center; gap: var(--r-1); min-height: 32px; padding: 0 var(--r-3); border-radius: var(--rundung-klein); background: var(--petrol); color: var(--creme); font-size: var(--groesse-1); font-weight: var(--fett); white-space: nowrap; }
.zeile-knopf:hover { background: var(--petrol-dunkel); }
.mini-balken { display: block; height: 6px; border-radius: var(--rundung-pille); background: var(--sand-hell); box-shadow: inset 0 0 0 1px var(--rand-bedienung); overflow: hidden; margin-top: var(--r-1); }
.mini-balken span { display: block; height: 100%; border-radius: var(--rundung-pille); background: var(--petrol-hell); }
.mini-balken.knapp span { background: var(--tonerde); }

/* ── Ist sonst alles gut? Warnungen oder ein ruhiger Satz ─────────── */
.status-zeile { display: flex; align-items: center; gap: var(--r-3); margin: var(--r-4) 0 0; padding: var(--r-3) var(--r-4); border-radius: var(--rundung-gross); background: var(--flaeche); border: 1px solid var(--linie); font-size: var(--groesse-2); color: var(--tinte-leise); }
.status-zeile b { color: var(--tinte); }
.status-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-flaeche); flex: 0 0 auto; }
.warnungen { margin: var(--r-4) 0; padding: var(--r-3) var(--r-4); border-radius: var(--rundung-panel); background: var(--flaeche); border: 1px solid var(--rand-rose); box-shadow: var(--hebung-1); }
.warnungen-titel { display: flex; align-items: center; gap: var(--r-2); margin: 0 0 var(--r-1); font: var(--fett) var(--groesse-3)/var(--zeile-eng) var(--schrift); color: var(--tinte); }
.warnungen ul { list-style: none; margin: 0; padding: 0; }
.warnungen li { display: flex; align-items: center; gap: var(--r-2); font-size: var(--groesse-2); min-height: var(--treffer-min); }
.warnungen li .ic { color: var(--tonerde-text); }
.warnungen a { color: var(--tinte); text-underline-offset: 3px; }

/* ── Schnell eintragen ────────────────────────────────────────────── */
.schnell { display: flex; gap: var(--r-3); align-items: center; margin-top: var(--r-5); }
.schnell-feld { flex: 1 1 auto; display: flex; align-items: center; gap: var(--r-2); min-height: 38px; padding: 0 var(--r-3); border: 1px solid var(--linie); border-radius: var(--rundung-mittel); background: var(--flaeche); color: var(--tinte-ganz-leise); }
.schnell-feld:focus-within { border-color: var(--fokus); box-shadow: var(--fokus-ring); }
.schnell-eingabe { border: 0; padding: 0; min-height: 36px; box-shadow: none; background: transparent; font-size: var(--groesse-2); }
.schnell-eingabe:focus { box-shadow: none; }

/* ── Suche (Cmd/Strg + K) ─────────────────────────────────────────── */
.suche { border: 0; padding: 0; margin: 12vh auto auto; width: min(560px, calc(100vw - 32px)); border-radius: var(--rundung-panel); box-shadow: var(--hebung-3); background: var(--flaeche); color: var(--tinte); }
.suche::backdrop { background: var(--schleier); }
.suche-kopf { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-3) var(--r-4); border-bottom: 1px solid var(--linie-zart); color: var(--tinte-leise); }
.suche-eingabe { border: 0; box-shadow: none; padding: 0; font-size: var(--groesse-3); min-height: var(--treffer-min); }
.suche-eingabe:focus { box-shadow: none; }
.suche-liste { list-style: none; margin: 0; padding: var(--r-2); max-height: 50vh; overflow-y: auto; }
.suche-treffer { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-2) var(--r-3); border-radius: var(--rundung-mittel); cursor: pointer; min-height: var(--treffer-min); }
.suche-treffer.aktiv, .suche-treffer:hover { background: var(--flaeche-leise); }
.suche-text { display: flex; flex-direction: column; }
.suche-text small { color: var(--tinte-leise); font-size: var(--groesse-1); }
.suche-leer { padding: var(--r-4); color: var(--tinte-leise); }

@media (max-width: 767px) {
  .seite-titel, .gruss-titel { font-size: var(--groesse-6); }
  .gruss-boot { width: 40px; height: 40px; }
  .gruss { align-items: flex-start; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-3); }
  .tile { padding: var(--r-3); }
  .tile-wert { font-size: var(--groesse-5); }
  .liste-karten { grid-template-columns: minmax(0, 1fr); }
  .heute-zeile { flex-wrap: wrap; }
  .schnell { flex-wrap: wrap; }
  .schnell .knopf { width: 100%; min-height: var(--treffer-min); }
  .schnell-feld, .schnell-eingabe, .liste-karte-alle, .zeile-knopf { min-height: var(--treffer-min); }
}

/* ══ Grundgeruest (06.10.2026): Startseite, Heute, Einstellungen, Neu, Suche, leere Seite ═════════════ */
.laden.wartet { visibility: hidden; }
.leer-symbol { width: 56px; height: 56px; border-radius: 50%; background: var(--nebel); color: var(--petrol); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--r-2); }
.leer .leer-symbol .ic { color: var(--petrol); }
.leer-titel { margin: 0; font: var(--fett) var(--groesse-4)/var(--zeile-eng) var(--schrift); color: var(--tinte); }
.leer .knopf { margin-top: var(--r-3); }

/* ── Heute (Daily Operations Center, Abnahme 06.10.2026): Heute dran und Auf einen Blick ── */
.dran-weitere { margin-top: var(--r-2); white-space: normal; text-align: left; }
.blick-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--r-4); align-items: start; }
.blick-kachel { grid-column: 1 / -1; padding: var(--r-4) var(--r-5); transition: box-shadow var(--dauer-mittel) var(--kurve-weich); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung-schwebe); box-shadow: var(--schatten-panel); }
.blick-kachel + .blick-kachel { grid-column: auto; }
.blick-kopf { display: flex; align-items: center; gap: var(--r-3); min-height: var(--treffer-min); color: var(--tinte); text-decoration: none; font-weight: var(--fett); }
.blick-kopf .p3d { width: 40px; height: 40px; }
.blick-name { flex: 1 1 auto; }
a.blick-kopf:hover .tile-pfeil { color: var(--petrol); }
.blick-wert { margin: var(--r-3) 0 0; font: 650 var(--groesse-7)/var(--zeile-eng) var(--schrift); color: var(--tinte); }
.blick-unter { margin: var(--r-1) 0 0; font-size: var(--groesse-2); color: var(--tinte-leise); }
.blick-zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--r-2); margin: var(--r-4) 0 0; padding: var(--r-3) 0 0; border-top: 1px solid var(--linie-zart); }
.blick-zahlen div { min-width: 0; padding: var(--r-2) var(--r-3); border-radius: var(--rundung-mittel); background: var(--flaeche-leise); border-left: 3px solid var(--nebel); }
.blick-zahlen div.ok { border-left-color: var(--st-fertig); } .blick-zahlen div.warnt { border-left-color: var(--tonerde); }
.blick-zahlen div.warnt dd { color: var(--tonerde-text); }
.blick-zahlen dt { font-size: var(--groesse-1); color: var(--tinte-leise); }
.blick-zahlen dd { margin: var(--r-1) 0 0; font-weight: var(--fett); font-size: var(--groesse-3); }
.blick-liste { margin: var(--r-4) 0 0; border-top: 1px solid var(--linie-zart); padding-top: var(--r-3); }
.blick-liste summary { cursor: pointer; font-weight: var(--fett); font-size: var(--groesse-2); color: var(--petrol); min-height: var(--treffer-min); display: flex; align-items: center; }
.blick-liste ul { list-style: none; margin: var(--r-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--r-3) var(--r-5); }
.blick-liste li { display: flex; align-items: center; gap: var(--r-2); font-size: var(--groesse-2); }
.blick-liste li .p3d { width: 28px; height: 28px; flex: 0 0 auto; }
.blick-liste-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--r-1); }
/* Auf einen Blick, Variante C (18.10.2026): je Hauptbereich eine breite Karte, darin je Teil Kacheln und Liste (app/seiten/heute.js). */
.blick-karten { display: grid; gap: var(--r-4); }
.blick-karte { padding: var(--r-4) var(--r-5); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung-panel); box-shadow: var(--schatten-panel); }
.blick-karte-kopf { display: flex; align-items: center; gap: var(--r-3); min-height: var(--treffer-min); color: var(--tinte); text-decoration: none; }
.blick-karte-kopf .p3d { width: 36px; height: 36px; }
.blick-karte-name { flex: 1 1 auto; margin: 0; font-size: var(--groesse-4); font-weight: var(--fett); }
.blick-karte-wert { font-size: var(--groesse-6); color: var(--tinte); white-space: nowrap; }
.blick-teil { border-top: 1px solid var(--linie-zart); padding: var(--r-3) 0 var(--r-2); margin-top: var(--r-2); }
.blick-teil-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--r-1) var(--r-3); margin-bottom: var(--r-2); }
.blick-teil-name { margin: 0; font-size: var(--groesse-3); font-weight: var(--fett); }
.blick-teil-name a { color: var(--petrol); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--treffer-min); }
.blick-teil-satz { flex: 1 1 14rem; min-width: 0; color: var(--tinte-leise); font-size: var(--groesse-1); }
.blick-teil-oeffnen { display: inline-flex; align-items: center; gap: 2px; min-height: var(--treffer-min); font-size: var(--groesse-1); font-weight: var(--fett); color: var(--petrol); text-decoration: none; }
.blick-teil-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--r-2); }
.blick-teil-kacheln a { display: flex; flex-direction: column; gap: 2px; min-height: var(--treffer-min); padding: var(--r-2) var(--r-3); border-radius: var(--rundung-mittel);
  background: var(--flaeche-leise); color: var(--tinte); text-decoration: none; }
.blick-k-name { font-size: var(--groesse-1); color: var(--tinte-leise); }
.blick-k-wert { font-size: var(--groesse-4); }
.blick-teil-kacheln li.ok .blick-k-name::before, .blick-teil-kacheln li.warnt .blick-k-name::before { content: ""; display: inline-block; width: 7px; height: 7px;
  margin-right: var(--r-1); border-radius: 50%; vertical-align: middle; background: var(--st-fertig); }
.blick-teil-kacheln li.warnt .blick-k-name::before { background: var(--tonerde); }
.blick-teil-kacheln li.warnt .blick-k-wert { color: var(--tonerde-text); }
.blick-teil-listentitel { margin: var(--r-3) 0 var(--r-1); font-size: var(--groesse-0); font-weight: var(--fett); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); }
.blick-teil-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--r-2); }
.blick-teil-liste ul.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--r-5); }
.blick-teil-liste li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px var(--r-2); font-size: var(--groesse-2); }
.blick-teil-liste li > .blick-liste-text { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
.blick-teil-liste li > b { grid-column: 3; font-variant-numeric: tabular-nums; }
.blick-teil-liste li > .mini-balken { grid-column: 1 / -1; margin-top: 0; }
.blick-teil-liste li .p3d { width: 24px; height: 24px; }
@media (max-width: 767px) {
  .blick-karte { padding: var(--r-3); }
  .blick-teil-liste ul.zwei { grid-template-columns: minmax(0, 1fr); }
  .blick-teil-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.blick-liste li b { white-space: nowrap; align-self: flex-start; padding-top: 2px; }
.blick-liste li.warnt b { color: var(--tonerde-text); }

/* ── Startseite: Begruessung, Schnellzugang Heute, Deine Bereiche ──── */
.start-kopf { padding-bottom: var(--r-3); }
.start-buehne { position: relative; overflow: hidden; min-height: 300px; padding: var(--r-7) var(--r-7) calc(var(--wellen-hoehe) + var(--r-2)); border-radius: var(--rundung-buehne); color: var(--weiss); background: var(--buehne-verlauf); box-shadow: var(--schatten-buehne); }
.start-datum { display: inline-flex; align-items: center; gap: var(--r-2); margin: 0 0 var(--r-4); font: var(--fett) var(--groesse-1)/var(--zeile-eng) var(--schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--sand); }
.start-datum::before { content: ""; width: 22px; height: 1px; background: var(--sand); }
.start-buehne .start-gruss { position: relative; z-index: 1; margin: 0 0 var(--r-3); font: var(--halbfett) var(--groesse-gruss)/var(--zeile-eng) var(--schrift-kopf); letter-spacing: -.01em; color: var(--weiss); }
.start-buehne .start-gruss .gruss-name { font-family: var(--schrift-kopf); font-style: italic; font-weight: 400; color: var(--sand); }
.start-einleitung { position: relative; z-index: 1; max-width: 440px; margin: 0; font-size: var(--groesse-3); line-height: var(--zeile-weit); color: var(--weiss-leise); }
.start-boot { position: absolute; right: 70px; bottom: 46px; width: 170px; height: 170px; filter: var(--schatten-bild); animation: start-schaukeln 6s ease-in-out 3; transform-origin: 50% 80%; }
.start-funkeln { position: absolute; right: 270px; top: 40px; width: 44px; height: 44px; opacity: .95; filter: var(--glanz-funkeln); }
.start-wellen { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; }
.start-welle-1 { fill: var(--welle-1); } .start-welle-2 { fill: var(--welle-2); } .start-welle-3 { fill: var(--creme); }
@keyframes start-schaukeln { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .start-boot { animation: none; } }
.heute-karte { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--r-4); margin: calc(-1 * var(--r-8)) var(--r-6) var(--r-6); padding: var(--r-4) var(--r-5); background: var(--flaeche); border-radius: var(--rundung-schwebe); box-shadow: var(--schatten-schwebe); color: var(--tinte); text-decoration: none; transition: box-shadow var(--dauer-kurz), transform var(--dauer-kurz); }
a.heute-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten-schwebe-hover); }
.heute-karte-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.heute-karte-name { font: var(--fett) var(--groesse-4)/var(--zeile-eng) var(--schrift); }
.heute-karte-unter { font-size: var(--groesse-2); color: var(--tinte-leise); }
.heute-karte-los { display: inline-flex; align-items: center; gap: var(--r-1); flex: 0 0 auto; padding: var(--r-3) var(--r-4); border-radius: var(--rundung-pille); background: var(--petrol); color: var(--weiss); font: var(--fett) var(--groesse-2)/var(--zeile-eng) var(--schrift); white-space: nowrap; }
.start-h2 { font: var(--halbfett) var(--groesse-start-h2)/var(--zeile-eng) var(--schrift-kopf) !important; color: var(--petrol) !important; }
.start-bereiche { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--r-5); }
.bereich-karte.start-bereich { padding: 0; gap: 0; overflow: hidden; border-radius: var(--rundung-schwebe); min-height: 0; }
.start-bereich-bild { display: flex; align-items: center; justify-content: center; height: 124px; background: var(--verlauf-bereich); }
.start-bereich-bild .p3d { width: 96px; height: 96px; filter: var(--schatten-bild); transition: transform var(--dauer-kurz); }
a.start-bereich:hover .start-bereich-bild .p3d, .start-bereich-link:hover .start-bereich-bild .p3d { transform: translateY(-3px) scale(1.03); }
/* Bereichskarte mit ihren Teilen (17.10.2026): die Karte selbst ist ein Rahmen, oben der Weg zum Bereich, unten je Teil eine Zeile */
.start-bereich { transition: box-shadow var(--dauer-mittel) var(--kurve-weich), transform var(--dauer-mittel) var(--kurve-weich); }
.start-bereich:has(.start-bereich-link:hover) { transform: translateY(-2px); box-shadow: var(--hebung-hover); }
.start-bereich-link { display: flex; flex-direction: column; flex: 1 1 auto; color: var(--tinte); text-decoration: none; border-radius: inherit; }
.start-bereich-link:hover .tile-pfeil { color: var(--petrol); }
.start-bereich-text { display: flex; flex-direction: column; gap: var(--r-2); padding: var(--r-4) var(--r-5) var(--r-5); }
.start-bereich .bereich-karte-name { display: flex; align-items: center; justify-content: space-between; gap: var(--r-2); }
.bereich-karte.start-bereich.dazu { align-items: stretch; justify-content: flex-start; font-weight: normal; color: var(--tinte); }
.bereich-karte.start-bereich.dazu .start-bereich-bild { background: transparent; }
.abschnitt { margin-bottom: var(--r-5); }
.abschnitt-kopf { display: flex; align-items: center; gap: var(--r-2); margin: 0 0 var(--r-3); }
.abschnitt-kopf h2 { margin: 0; font: var(--fett) var(--groesse-3)/var(--zeile-eng) var(--schrift); color: var(--tinte); }
.abschnitt-unter { font-size: var(--groesse-1); color: var(--tinte-leise); }
.chip.bereich { background: var(--sand-hell); color: var(--tinte-leise); font-weight: var(--halbfett); }
.bereich-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--r-4); }
.bereich-karte { display: flex; flex-direction: column; gap: var(--r-3); min-width: 0; min-height: 150px; padding: var(--r-4) var(--r-5); background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rundung-panel); box-shadow: var(--schatten-panel); color: var(--tinte); text-decoration: none; transition: box-shadow var(--dauer-kurz), transform var(--dauer-kurz); }
a.bereich-karte:hover { transform: translateY(-1px); box-shadow: var(--hebung-2); }
a.bereich-karte:hover .tile-pfeil { color: var(--petrol); }
.bereich-karte-kopf { display: flex; align-items: center; gap: var(--r-3); }
.bereich-karte-name { flex: 1 1 auto; font: var(--fett) var(--groesse-3)/var(--zeile-eng) var(--schrift); }
.bereich-karte-aussage { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--r-1) var(--r-2); }
.bereich-karte-zahl { font: 650 var(--groesse-6)/var(--zeile-eng) var(--schrift); letter-spacing: -.02em; }
.bereich-karte.warnt .bereich-karte-zahl { color: var(--tonerde-text); }
.bereich-karte-unter { font-size: var(--groesse-2); color: var(--tinte-leise); }
.bereich-karte-zeilen { display: flex; flex-direction: column; margin-top: auto; border-top: 1px solid var(--linie-zart); }
.bereich-karte-zeile { display: flex; justify-content: space-between; gap: var(--r-3); padding: var(--r-2) 0 0; font-size: var(--groesse-1); color: var(--tinte-leise); }
.bereich-karte-zeile b { color: var(--tinte); text-align: right; }
.bereich-karte-zeile > span { white-space: nowrap; }   /* "Nächste Zahlung" bleibt eine Zeile, der Wert bricht um */
.bereich-karte.dazu { align-items: center; justify-content: center; gap: var(--r-2); background: transparent; border: 1px dashed var(--linie-stark); box-shadow: none; color: var(--tinte-leise); font-size: var(--groesse-2); font-weight: var(--halbfett); }
.bereich-karte.dazu:hover { background: var(--flaeche); color: var(--tinte); }
.dazu-plus { width: 36px; height: 36px; border-radius: var(--rundung-mittel); background: var(--flaeche); border: 1px solid var(--linie); display: inline-flex; align-items: center; justify-content: center; color: var(--petrol); }

/* ── Einstellungen: links Themen, rechts das Formular ─────────────── */
.einst { display: grid; grid-template-columns: var(--einst-themen-breite) minmax(0, 1fr); gap: var(--r-5); align-items: start; }
.einst.nur-liste { grid-template-columns: minmax(0, 1fr); }
.einst-themen ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.einst-thema { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-2) var(--r-3); min-height: 40px; border-radius: var(--rundung-mittel); color: var(--tinte-leise); text-decoration: none; font-size: var(--groesse-2); }
.einst-thema:hover { background: var(--flaeche-leise); color: var(--tinte); }
.einst-thema.aktiv { background: var(--flaeche); color: var(--tinte); font-weight: var(--halbfett); box-shadow: var(--hebung-1); }
.einst-thema.aktiv .ic { color: var(--petrol); }
.einst-thema span:nth-child(2) { flex: 1 1 auto; }
.einst-abschnitt { font-size: var(--groesse-0); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); font-weight: var(--fett); padding: var(--r-4) var(--r-3) var(--r-1); }
.einst-inhalt { min-width: 0; }
.einst-inhalt > .reiter { margin-top: 0; }
.wahl { display: inline-flex; padding: 2px; border-radius: var(--rundung-mittel); background: var(--flaeche-leise); border: 1px solid var(--linie); flex: 0 0 auto; }
.wahl-knopf { min-height: 32px; padding: 0 var(--r-3); border-radius: var(--rundung-klein); font-size: var(--groesse-1); font-weight: var(--halbfett); color: var(--tinte-leise); }
.wahl-knopf[aria-checked="true"] { background: var(--petrol); color: var(--creme); box-shadow: var(--hebung-1); }
.wahl-karten { display: flex; flex-direction: column; gap: var(--r-2); }
.wahl-karte { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-3) var(--r-4); border: 1px solid var(--linie); border-radius: var(--rundung-gross); background: var(--flaeche); text-align: left; }
.wahl-karte:hover { border-color: var(--linie-stark); }
.wahl-karte[aria-checked="true"] { border-color: var(--petrol); box-shadow: var(--fokus-ring); }
.wahl-karte-text { display: flex; flex-direction: column; font-size: var(--groesse-2); }
.wahl-karte-text span { color: var(--tinte-leise); font-size: var(--groesse-1); }

/* ── Hilfe ────────────────────────────────────────────────────────── */
.zeile-knopf-voll { width: 100%; text-align: left; border-radius: 0; }
.zeile-knopf-voll:hover { background: var(--flaeche-leise); }
li:last-child > .zeile-knopf-voll { border-bottom: 0; }
.zeile-pfeil { color: var(--tinte-leise); display: inline-flex; }
.taste.gross { font-size: var(--groesse-1); padding: 2px var(--r-2); min-width: 52px; text-align: center; }

/* ── Neu eintragen ────────────────────────────────────────────────── */
.neu { border: 0; padding: 0; margin: 12vh auto auto; width: min(520px, calc(100vw - 32px)); border-radius: var(--rundung-panel); box-shadow: var(--hebung-3); background: var(--flaeche); color: var(--tinte); }
.neu::backdrop { background: var(--schleier); }
.neu-form { display: flex; flex-direction: column; gap: var(--r-3); padding: var(--r-3) var(--r-4) var(--r-4); }
.neu-kopf { display: flex; align-items: center; justify-content: space-between; }
.neu-kopf h2 { margin: 0; font: var(--fett) var(--groesse-4)/var(--zeile-eng) var(--schrift); }
.neu-wahl { display: flex; flex-wrap: wrap; gap: var(--r-2); }
.chip-knopf { display: inline-flex; align-items: center; gap: var(--r-1); min-height: 32px; padding: 0 var(--r-3); border-radius: var(--rundung-pille); border: 1px solid var(--linie); font-size: var(--groesse-1); color: var(--tinte-leise); }
.chip-knopf[aria-checked="true"] { background: var(--petrol); border-color: var(--petrol); color: var(--creme); }
.neu .schnell-feld { min-height: var(--treffer-min); }
.neu .schnell-eingabe { font-size: var(--groesse-3); }
.neu-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--r-3); }
.suche-gruppe { padding: var(--r-3) var(--r-3) var(--r-1); font-size: var(--groesse-0); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); font-weight: var(--fett); }
.suche-esc { cursor: pointer; }

@media (max-width: 767px) {
  .einst { grid-template-columns: minmax(0, 1fr); }
  .einst-thema { min-height: var(--treffer-min); background: var(--flaeche); border: 1px solid var(--linie-zart); }
  .einst-pfeil { display: inline-flex; color: var(--tinte-leise); }
  .bereich-karten { grid-template-columns: minmax(0, 1fr); }
  .start-buehne { min-height: 0; padding: var(--r-6) var(--r-5) var(--wellen-hoehe); border-radius: var(--rundung-schwebe); }
  .start-buehne .start-gruss { font-size: var(--groesse-gruss-handy); }
  .start-boot { right: 14px; bottom: 40px; width: 104px; height: 104px; }
  .start-funkeln { display: none; }
  .heute-karte { margin: calc(-1 * var(--r-7)) var(--r-3) var(--r-5); padding: var(--r-4); gap: var(--r-3); flex-wrap: wrap; }
  .heute-karte .p3d { width: 44px; height: 44px; }
  .heute-karte-text { flex: 1 1 calc(100% - 60px); }
  .heute-karte-los { width: 100%; justify-content: center; }
  .bereich-karte { min-height: 0; }
  /* Handy (17.10.2026): Bereichskarten als Zeile mit kleinem Bild statt hoher Bildkoepfe; weniger Rollen bis zum Inhalt */
  .start-bereich-link { flex-direction: row; align-items: stretch; }
  .start-bereich-bild { width: 88px; height: auto; flex: 0 0 88px; }
  .start-bereich-bild .p3d { width: 60px; height: 60px; }
  .start-bereich-text { padding: var(--r-3) var(--r-4); }
  .wahl-knopf, .chip-knopf, .wahl-karte, .zeile-knopf-voll, .suche-esc { min-height: var(--treffer-min); }
  .zeile:has(.wahl) { flex-wrap: wrap; }
  .neu { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: calc(100dvh - var(--sicher-oben) - var(--r-4)); border-radius: var(--rundung-leiste) var(--rundung-leiste) 0 0; padding-bottom: var(--sicher-unten); }
}

/* ── Heute erweitert (Mission Abschnitt 3, Bild neu3-14): Kacheln, Schnellknoepfe, Start und Stopp, Tag abschliessen ── */
.heute-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--r-3); margin: 0 0 var(--r-4); }
/* Wie viele Kacheln in einer Reihe (17.10.2026): nie eine einzelne Kachel allein in der letzten Reihe. heute.js setzt n<Anzahl>. */
.heute-kacheln.n4, .heute-kacheln.n7, .heute-kacheln.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.heute-kacheln.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.heute-kacheln.n6, .heute-kacheln.n9 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.heute-kacheln.n7 > :last-child { grid-column: span 2; }
.heute-kacheln.n10 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.heute-kachel { position: relative; display: flex; flex-direction: column; gap: var(--r-1); padding: var(--r-3) var(--r-4); border-radius: var(--rundung-panel); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-panel); color: var(--tinte); text-decoration: none; overflow: hidden; }
.heute-kachel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--kf); }
.heute-kachel { transition: box-shadow var(--dauer-mittel) var(--kurve-weich), transform var(--dauer-mittel) var(--kurve-weich); }
a.heute-kachel:hover { box-shadow: var(--hebung-hover); transform: translateY(-2px); }
.heute-kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, var(--kf-zart, transparent) 0%, transparent 55%); opacity: .55; pointer-events: none; }
.heute-kachel > * { position: relative; z-index: 1; }
.heute-kachel.warnt { border-color: var(--rand-rose); }
.heute-kachel.warnt .heute-kachel-wert { color: var(--tonerde-text); }
/* Kennzahlen als Kacheln in den Bereichen (Kern.kennzahlen): gleiche Kachel, eigener Raster ohne einzelne Kachel am Ende */
.kz-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--r-3); margin: 0 0 var(--r-5); }
.kz-reihe.n4, .kz-reihe.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kz-reihe.n3, .kz-reihe.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kz-reihe.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kz-reihe.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kz .heute-kachel-wert { font-size: var(--groesse-6); }
.kz-status { display: inline-flex; align-items: center; gap: var(--r-1); margin-top: var(--r-1); font-size: var(--groesse-1); font-weight: var(--fett); }
.kz-punkt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.kz-status.ok { color: var(--st-fertig-text); } .kz-status.warnt { color: var(--tonerde-text); } .kz-status.info { color: var(--tinte-leise); }
.kz-balken, .heute-kachel-balken { display: block; height: 6px; margin-top: var(--r-2); border-radius: var(--rundung-pille); background: var(--sand-hell); box-shadow: inset 0 0 0 1px var(--rand-bedienung); overflow: hidden; }
.kz-balken span, .heute-kachel-balken span { display: block; height: 100%; border-radius: var(--rundung-pille); background: var(--kf); }
.k-offen { --kf-zart: var(--st-offen-zart); } .k-arbeit { --kf-zart: var(--st-arbeit-zart); } .k-wartet { --kf-zart: var(--st-wartet-zart); }
.k-fertig { --kf-zart: var(--st-fertig-zart); } .k-petrol { --kf-zart: var(--nebel); } .k-tonerde { --kf-zart: var(--tonerde-zart); }
/* Arten in "Heute dran": eigene Farbe je Art, das Wort steht immer im Chip */
.chip.art-einnahme { background: var(--art-einnahme-zart); color: var(--art-einnahme-text); font-weight: var(--fett); }
.chip.art-pflege { background: var(--art-pflege-zart); color: var(--art-pflege-text); font-weight: var(--fett); }
.chip.art-termin { background: var(--art-termin-zart); color: var(--art-termin-text); font-weight: var(--fett); }
.chip.art-geld { background: var(--art-geld-zart); color: var(--art-geld-text); font-weight: var(--fett); }
.chip.art-aufgabe { background: var(--art-aufgabe-zart); color: var(--art-aufgabe-text); font-weight: var(--fett); }
.chip.art-info { background: var(--flaeche-leise); color: var(--tinte-leise); font-weight: var(--fett); }
.heute-kachel-titel { display: flex; align-items: center; gap: var(--r-2); font-size: var(--groesse-0); font-weight: var(--fett); letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-leise); }
.heute-kachel-symbol { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--rundung); background: var(--kf); color: var(--weiss); }
.heute-kachel-pfeil { margin-left: auto; color: var(--kf-text); display: inline-flex; }
.heute-kachel-wert { font: var(--fett) var(--groesse-6)/var(--zeile-eng) var(--schrift); margin-top: var(--r-1); }
.heute-kachel-unter { font-size: var(--groesse-1); color: var(--tinte-leise); }
.k-offen { --kf: var(--st-offen-tief); --kf-text: var(--st-offen-text); }
.k-arbeit { --kf: var(--st-arbeit-tief); --kf-text: var(--st-arbeit-text); }
.k-wartet { --kf: var(--st-wartet-tief); --kf-text: var(--st-wartet-text); }
.k-fertig { --kf: var(--st-fertig-tief); --kf-text: var(--st-fertig-text); }
.k-petrol { --kf: var(--petrol); --kf-text: var(--petrol); }
.k-tonerde { --kf: var(--tonerde-dunkel); --kf-text: var(--tonerde-text); }
.schnell-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); margin: 0 0 var(--r-5); }
/* Tageskarten der Bereiche unter den Schnellknoepfen (14.10.2026, etwa der Tag nach BaZi) */
.heute-tageskarte { margin: 0 0 var(--r-5); }
.heute-tageskarte:empty { display: none; }
/* Ideen 1 bis 6 (14.10.2026): als Naechstes, Heute geschafft, Blick auf morgen */
.chip.naechstes { background: var(--st-arbeit-zart); color: var(--st-arbeit-text); font-weight: var(--fett); border-color: transparent; }
.heute-geschafft { margin-top: var(--r-3); padding: var(--r-3) var(--r-4); border-radius: var(--rundung-panel); background: var(--flaeche); border: 1px solid var(--linie); }
.heute-geschafft summary { display: flex; align-items: center; gap: var(--r-2); font-weight: var(--fett); cursor: pointer; min-height: 44px; color: var(--st-fertig-text, var(--tinte)); }
.heute-geschafft ul { list-style: none; margin: var(--r-2) 0 0; padding: 0; display: grid; gap: var(--r-1); color: var(--tinte-leise); }
.heute-geschafft li { display: flex; gap: var(--r-3); }
.heute-geschafft-zeit { min-width: 3.2em; }
.heute-morgen { display: flex; align-items: center; gap: var(--r-3); margin-top: var(--r-3); padding: var(--r-3) var(--r-4); border-radius: var(--rundung-panel); background: var(--flaeche); border: 1px solid var(--linie); }
.heute-morgen p { margin: 0; }
.schnell-leiste-titel { font-size: var(--groesse-0); font-weight: var(--fett); letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-leise); margin-right: var(--r-1); }
.schnell-knopf { display: inline-flex; align-items: center; gap: var(--r-2); min-height: var(--hoehe-bedien); padding: 0 var(--r-3) 0 var(--r-2); border-radius: var(--rundung-pille); background: var(--flaeche); border: 1px solid var(--linie-stark); font: var(--fett) var(--groesse-2) var(--schrift); color: var(--tinte); box-shadow: var(--hebung-1); cursor: pointer; }
.schnell-knopf:hover { background: var(--flaeche-leise); }
.schnell-knopf-symbol { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--rundung-pille); background: var(--kf); color: var(--weiss); }
.schnell-knopf .taste { margin-left: var(--r-1); }
.heute-zeile-name:is(a) { display: inline-flex; align-items: center; min-height: 24px; color: var(--tinte); text-decoration: none; }
.heute-zeile-name:is(a):hover { text-decoration: underline; }
.heute-zeile.laeuft { background: var(--st-arbeit-zart); }
.zeile-knopf.start { background: var(--flaeche); color: var(--petrol); border: 1px solid var(--linie-stark); }
.zeile-knopf.start:hover { background: var(--flaeche-leise); }
.zeile-knopf.stopp { background: var(--st-arbeit-tief); color: var(--weiss); }
.zeile-knopf.stopp:hover { background: var(--st-arbeit-text); }
.zeile-knopf.gelesen { background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie-stark); }
.zeile-knopf.gelesen:hover { background: var(--flaeche-leise); }
.zeile-knoepfe { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--r-2); }
.chip.laeuft { background: var(--st-arbeit-zart); color: var(--st-arbeit-text); border-color: transparent; }
/* 17.10.2026: Stand eines Helfers im Daily (Block ueber "Heute dran"): fertig und wartet auf die Nutzerin, oder eine Frage an sie. */
.chip.fertig { background: var(--st-fertig-zart); color: var(--st-fertig-text); border-color: transparent; font-weight: var(--fett); }
.chip.warnt { background: var(--warnung-flaeche); color: var(--warnung); border-color: transparent; font-weight: var(--fett); }
.blick-kacheln.zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.blick-kacheln.zwei > .blick-kachel { grid-column: auto; }
/* Drei Bereiche (14.10.2026): der erste ueber die ganze Breite, die anderen zwei halb und halb darunter */
.blick-kacheln.drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .blick-kacheln.drei { grid-template-columns: minmax(0, 1fr); } }
.blick-kacheln.drei > .blick-kachel:first-child { grid-column: 1 / -1; }
/* Fuenf und mehr Karten (17.10.2026): zwei Spalten; bei ungerader Zahl geht die erste ueber die ganze Breite */
.blick-kacheln.viele { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.blick-kacheln.viele > .blick-kachel { grid-column: auto; }
.blick-kacheln.viele.ungerade > .blick-kachel:first-child { grid-column: 1 / -1; }
@media (max-width: 760px) { .blick-kacheln.viele { grid-template-columns: minmax(0, 1fr); } }
.blick-kacheln.zwei, .blick-kacheln.drei, .blick-kacheln.vier { align-items: stretch; }
.blick-liste-text > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Vier Karten (seit 17.10.2026 mit Body Control): zwei mal zwei, am Handy untereinander */
.blick-kacheln.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blick-kacheln.vier > .blick-kachel { grid-column: auto; }
@media (max-width: 760px) { .blick-kacheln.vier { grid-template-columns: minmax(0, 1fr); } }
.abschluss-zeile { display: flex; align-items: center; gap: var(--r-3); padding: var(--r-3) var(--r-4); margin-top: var(--r-2); border-radius: var(--rundung-panel); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten-panel); }
.abschluss-zeile p { margin: 0; flex: 1 1 auto; }
.abschluss-zeile .knopf { flex: 0 0 auto; }
.kopf-timer { display: inline-flex; align-items: center; gap: var(--r-2); max-width: 280px; min-height: 38px; padding: 0 var(--r-3); border-radius: var(--rundung-pille); background: var(--st-arbeit-tief); color: var(--weiss); font: var(--fett) var(--groesse-1) var(--schrift); border: 0; cursor: pointer; }
.kopf-timer:hover { background: var(--st-arbeit-text); }
.kopf-timer-zeit { font-variant-numeric: tabular-nums; }
.kopf-timer-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf-timer-mehr { flex: none; padding: 0 var(--r-1); border-radius: var(--rundung-pille); background: var(--flaeche); color: var(--tinte); font-size: var(--groesse-1); font-weight: var(--fett); }
.sprech-knopf { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--rundung-pille); background: var(--tonerde-zart); color: var(--tonerde-text); border: 0; cursor: pointer; }
.sprech-knopf.an { background: var(--tonerde-dunkel); color: var(--weiss); }
@media (max-width: 767px) {
  /* Handy (17.10.2026): alle Kacheln sichtbar, zwei Spalten statt eines Wischstreifens; eine einzelne letzte Kachel geht ueber beide */
  .heute-kacheln, .heute-kacheln[class*=" n"], .kz-reihe, .kz-reihe[class*=" n"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-2); }
  .heute-kacheln > :last-child:nth-child(odd), .kz-reihe > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .heute-kachel { padding: var(--r-3); }
  .heute-kachel-wert, .kz .heute-kachel-wert { font-size: var(--groesse-5); }
  .schnell-knopf, .zeile-knopf.start, .zeile-knopf.stopp, .zeile-knopf.gelesen, .sprech-knopf { min-height: var(--treffer-min); }
  .sprech-knopf { width: var(--treffer-min); }
  .kopf-timer { min-height: var(--treffer-min); max-width: 160px; }
  .heute-zeile-name:is(a) { display: flex; align-items: center; min-height: var(--treffer-min); }
  .schnell-knopf .taste { display: none; }
  body.mit-timer .marke-name { display: none; }
  .abschluss-zeile { flex-wrap: wrap; }
}
a.zeile-knopf { text-decoration: none; }
.blick-zustand { align-self: flex-start; min-height: 20px; font-size: var(--groesse-0); }

/* ── Einstellungen (Gesamtdurchsicht 17.10.2026) ─────────────────────── */
.zeile.tief { padding-left: calc(var(--r-5) + var(--r-6)); background: var(--flaeche-leise); }
.zeile-teil { font-weight: var(--halbfett); color: var(--petrol); }
.einst-thema.tief { margin-left: var(--r-5); }
.betrieb-zeile { align-items: flex-start; padding-top: var(--r-3); padding-bottom: var(--r-3); }
.betrieb-zeile .zeile-titel { display: flex; align-items: center; gap: var(--r-2); flex-wrap: wrap; }
.betrieb-zeile .zeile-unter { margin-top: var(--r-1); font-size: var(--groesse-2); color: var(--tinte); }
.betrieb-roh { margin-top: var(--r-2); font-size: var(--groesse-1); color: var(--tinte-leise); }
.betrieb-roh summary { cursor: pointer; min-height: 24px; display: inline-flex; align-items: center; color: var(--petrol); font-weight: var(--halbfett); }
.betrieb-roh p { margin: var(--r-1) 0 0; overflow-wrap: anywhere; }
.einst-satz { margin: 0; }
@media (max-width: 767px) { .zeile.tief { padding-left: var(--r-6); } .betrieb-roh summary { min-height: var(--treffer-min); } }
/* Verlauf und Papierkorb nach Tagen (17.10.2026) */
.reiter-inhalt .seite-kopf.klein .seite-titel { display: none; }
.reiter-inhalt .seite-kopf.klein { padding-bottom: var(--r-3); }
.tag-gruppe + .tag-gruppe { border-top: 1px solid var(--linie); }
.tag-titel { position: sticky; top: 0; z-index: 1; margin: 0; padding: var(--r-2) var(--r-5); background: var(--flaeche-leise); font: var(--fett) var(--groesse-0)/var(--zeile-eng) var(--schrift); letter-spacing: .07em; text-transform: uppercase; color: var(--tinte-leise); }
.zeile-name { font-weight: var(--fett); }
.zeile-unter .chip { min-height: 20px; font-size: var(--groesse-0); }
.karte-kopf .anzahl { margin-left: var(--r-1); }
@media (max-width: 767px) { .tag-titel { padding-left: var(--r-4); } }
/* Daily: der Tag in kurzen Zeilen (17.10.2026) */
.tag-saetze { list-style: none; margin: var(--r-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--r-1) var(--r-5); font-size: var(--groesse-2); color: var(--tinte-leise); }
.tag-saetze li { position: relative; padding-left: var(--r-4); }
.tag-saetze li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--tonerde); }
.tag-saetze b { color: var(--tinte); font-weight: var(--fett); }
.passwort-feld { display: flex; gap: var(--r-2); align-items: center; }
.passwort-feld .eingabe { flex: 1 1 auto; }
.passwort-auge { flex: 0 0 auto; }
/* Kennzahl-Kacheln bei wenig Platz (320 px, groesserer Textabstand): Titel darf umbrechen, der Pfeil bleibt in der Kachel */
/* Pfeil bleibt in der Titelzeile rechts, der Titel bricht bei Bedarf in sich um (17.10.2026) */
.heute-kachel-titel { min-width: 0; align-items: flex-start; }
.heute-kachel-titel > span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; hyphens: none; padding-top: var(--r-1); }
.heute-kachel-titel .heute-kachel-pfeil { padding-top: var(--r-1); }
/* Gleiche Hoehe je Reihe, die Zahl steht in jeder Kachel an derselben Stelle */
.heute-kacheln, .kz-reihe { align-items: stretch; }
.heute-kachel-titel { min-height: 2.4em; }
/* "Noch mal ansehen" bei erledigten Schritten: als ruhiger Knopf erkennbar */
.knopf.sekundaer.ruhig { color: var(--tinte-leise); border-color: var(--linie); }
.knopf.sekundaer.ruhig:hover { color: var(--tinte); border-color: var(--linie-stark); }

/* Runde 3 (17.10.2026) */
@media (max-width: 767px) {
  .zeile { flex-wrap: wrap; }
  .zeile > .zeile-text { flex: 1 1 160px; min-width: 0; }
  .wahl { flex-wrap: wrap; }
  .zeile:has(.wahl) > .wahl { flex: 1 1 100%; }
  /* Heute dran am Handy: Bild und Text in der ersten Reihe, Art, Betrag und Knopf darunter */
  .heute-zeile-text { flex: 1 1 calc(100% - 3.5rem); }
  .heute-zeile > .chip, .heute-zeile > .heute-zeile-betrag, .heute-zeile > .zeile-knopf, .heute-zeile > .zeile-knoepfe, .heute-zeile > .knopf { margin-left: auto; }
}
.start-bereiche { align-items: start; }
.heute-geschafft summary { min-height: var(--treffer-min); }
.heute-geschafft { padding-top: var(--r-1); padding-bottom: var(--r-1); }
.dran-weitere { text-decoration: underline; text-underline-offset: 3px; color: var(--petrol); }
.zeile-teil { font-weight: var(--normal); color: var(--tinte-leise); }
.zeile-teil::first-line { font-weight: var(--fett); }
.blick-liste li { max-width: 32rem; }
.wahl-karte[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--petrol); background: var(--flaeche-leise); }
.karte > form.karte-koerper .karte-knoepfe { margin-top: var(--r-2); }
.passwort-laenge { font-size: var(--groesse-1); color: var(--tinte-leise); }