/* Tokens. Dark ist der Standard (design.md Abschnitt 8), Light über data-theme="light".
   Roboto Slab und die Grundregeln bringt seit 17.09.2026 basis.css mit, geladen VOR
   dieser Datei. Quelle ist ~/ai-workspaces/_suite, nie hier bearbeiten. */

:root {
  --bg: #0f1512; --bg-elev: #161e19; --bg-elev2: #1d2721; --line: #2a362f;
  --fg: #e8ede9; --fg-muted: #9fb0a6; --fg-dim: #7f9086;
  --accent: #71c8fe; --accent-fg: #001d30;
  --gut: #6fd39b; --neutral: #d9c46a; --achtung: #f08a7a;
  --schlaf: #8fb4ff; --training: #ffb86b; --essen: #ffd166; --gewicht: #b48cff; --blutdruck: #ff8fa3; --routine: #7fe0c8;
  --blutdruck-mittag: #f2b04a; --blutdruck-abend: #6e7ff0;
  --phase-deep: #2b5fc4; --phase-rem: #5d8ff2; --phase-light: #a9c9f7; --phase-awake: #f2b04a;
  --sleep-score: #b48cff; --sleep-hrv: #ef6f6c;
  --kcal-in: #f2b04a; --kcal-out2: #5d8ff2; --defizit: #6fd39b; --ueberschuss: #ef6f6c;
  --makro-protein: #7fe0c8; --makro-kh: #7ea6f0; --makro-fett: #e8b45c;
  --stoerer-reise: #45cfc4; --stoerer-krank: #d9c46a; --stoerer-alkohol: #ef6f6c; --stoerer-verletzt: #c58cff;
  --radius: 14px; --radius-s: 9px; --shadow: 0 6px 18px rgba(0,0,0,.35);
  --font: "Roboto Slab", Georgia, "Times New Roman", serif;
  color-scheme: dark;
  /* Die Namen, unter denen die Suite dieselben Farben kennt (basis.css). */
  --akzent: var(--accent); --akzent-hell: var(--accent); --grau: var(--fg-dim);
  --grund: var(--bg); --karte: var(--bg-elev); --text: var(--fg); --linie: var(--line);
}
:root[data-theme="light"] {
  --bg: #f4f6f4; --bg-elev: #ffffff; --bg-elev2: #eef2ef; --line: #d9e0dc;
  --fg: #16201a; --fg-muted: #4f5e56; --fg-dim: #6a776f;
  --accent: #037cb1; --accent-fg: #ffffff;
  --gut: #2c8a57; --neutral: #9a7f10; --achtung: #c8422f;
  --schlaf: #3563c9; --training: #c26a12; --essen: #a67c00; --gewicht: #7248c9; --blutdruck: #c93d5b; --routine: #178a74;
  --blutdruck-mittag: #a6720f; --blutdruck-abend: #3c46b8;
  --phase-deep: #1d4fb0; --phase-rem: #4a7ee6; --phase-light: #86b0ec; --phase-awake: #d99321;
  --sleep-score: #7248c9; --sleep-hrv: #c0392b;
  --kcal-in: #d99321; --kcal-out2: #4a7ee6; --defizit: #2c8a57; --ueberschuss: #c8422f;
  --makro-protein: #178a74; --makro-kh: #3c63c9; --makro-fett: #a6720f;
  --stoerer-reise: #0e8d85; --stoerer-krank: #9a7f10; --stoerer-alkohol: #c8422f; --stoerer-verletzt: #7248c9;
  --shadow: 0 6px 18px rgba(0,0,0,.10);
  color-scheme: light;
}

html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.45; -webkit-text-size-adjust: 100%; }
/* Die Huelle ist genau so hoch wie der Bildschirm und scrollt selbst nicht, gescrollt
   wird in #app. Grund: auf dem iPhone beschneidet iOS die position:fixed-Ebene auf
   documentElement.clientHeight, und der ist um env(safe-area-inset-top) zu klein
   (gemessen 762 bei 812 Punkten Bildschirm). Ein fixed-Element kommt an den unteren
   Bildschirmrand also gar nicht heran, auch nicht mit height. Darum haengt hier nichts
   mehr an fixed: die Huelle ist ein normales Element, Overlays liegen absolut darin.
   --hoehe kommt aus huelleHoehe(), 100dvh ist nur der Wert bis zur ersten Messung. */
body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  font-variant-numeric: tabular-nums;
  position: relative;
  height: var(--hoehe, 100dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* basis.css macht aus #app einen Flex-Container. Hier haengen die Ansichten als
   gewoehnliche Bloecke drin und gerollt wird hier, also zurueck auf den Grundzustand. */
#app {
  flex: 1;
  min-height: 0;
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Der untere Safe-Area-Abstand sass frueher am body, dort wuerde er jetzt die Huelle
     verkuerzen statt den Inhalt freizuhalten. */
  padding-bottom: env(safe-area-inset-bottom);
}
* { box-sizing: border-box; }
/* Global statt einzeln je Klasse: jede Klasse, die selbst display setzt (.btn,
   .confirm-bar, .hr-zones, ...), hat sonst dieselbe Spezifität wie [hidden] und
   gewinnt je nach Regelreihenfolge - !important macht [hidden] immer verlässlich. */
[hidden] { display: none !important; }
h1, h2, h3 { font-weight: 600; margin: 0; }
/* padding und border-radius stehen mit, weil basis.css sie auf jedem button setzt.
   Hier gibt sie jede Klasse selbst an (.btn, .iconbtn, .seg button). */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; border-radius: 0; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { font: inherit; color: var(--fg); background: var(--bg-elev2); border: 1px solid var(--line); border-radius: var(--radius-s); padding: .55rem .7rem; width: 100%; }
a { color: var(--accent); }
.num { font-variant-numeric: tabular-nums; }

/* Layout */
.page { max-width: 880px; margin: 0 auto; padding: 1rem; }
.topbar { display: flex; align-items: center; gap: .75rem; padding: .5rem 0 1rem; }
.topbar h1 { font-size: 1.35rem; flex: 1; }
.iconbtn { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elev2); color: var(--fg-muted); }
.iconbtn:hover, .iconbtn:focus-visible { color: var(--fg); outline: 2px solid var(--accent); outline-offset: 2px; }
.iconbtn svg, .btn svg { width: 20px; height: 20px; }
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: var(--radius-s); background: var(--bg-elev2); text-decoration: none; color: inherit; }
.btn.primary { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
.btn.danger { color: var(--achtung); }
.spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }

/* Karten */
.card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); position: relative; }
.card + .card { margin-top: 1.1rem; }
.card[data-bereich] { border-left: 4px solid var(--card-accent, var(--line)); }
.card-head { display: flex; align-items: center; gap: .6rem; }
.card-head h2 { font-size: 1.1rem; flex: 1; display: flex; align-items: center; gap: .5rem; }
.card-head .bereich-icon { width: 22px; height: 22px; color: var(--card-accent); }
.ampel { width: 10px; height: 10px; border-radius: 50%; background: var(--fg-dim); }
.ampel.gut { background: var(--gut); } .ampel.neutral { background: var(--neutral); } .ampel.achtung { background: var(--achtung); }
.summary { margin: .5rem 0 .6rem; color: var(--fg); }
/* Veraltete Analysen (22.09.2026): die Ampel auf der Dashboard-Karte bleibt sichtbar, aber
   blass, der Text der Kurzfassung wird gedämpft, und ein Chip sagt es ausdrücklich. */
.ampel.alt { opacity: .3; }
.chip.analyse-alt { background: color-mix(in srgb, var(--achtung) 20%, transparent); color: var(--achtung); }
.summary.veraltet, .analyse-voll.veraltet > .md { color: var(--fg-muted); }
/* Trendzeile der Dashboard-Karte: Zahlen aus den Daten, keine Analyse. */
.summary.trend { color: var(--fg-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
/* Die Vorwoche steht seit 1.21.6 in einer eigenen zweiten Zeile: als Klammer hinter dem
   Text brach sie am Handy mitten im Wert um. */
.summary.trend .trend-vorwoche { color: var(--fg-dim); }
/* Morgenroutine: "Ziel" ist ein ganzer Satz und "Übungen" trägt einen Zusatz. Nebeneinander
   in drei Spalten wurde daraus eine Treppe aus Einzelwörtern, deshalb dort untereinander
   mit dem Wert rechts (22.09.2026, nach einem Blick aufs Handy). */
.card[data-bereich="routine"] .kennzahlen { grid-template-columns: 1fr; gap: .35rem; }
.card[data-bereich="routine"] .kennzahl { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.card[data-bereich="routine"] .kennzahl .label { flex: 0 0 auto; }
.card[data-bereich="routine"] .kennzahl .value { font-size: 1rem; text-align: right; }
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.kennzahl .label { font-size: .78rem; color: var(--fg-dim); }
.kennzahl .value { font-size: 1.15rem; font-weight: 600; }
.meta { font-size: .78rem; color: var(--fg-dim); margin-top: .5rem; }
/* Fußzeile der Dashboard-Karte: Metazeile plus der nachrangige Analyse-Knopf (1.9.0).
   Bewusst klein und ohne Fläche, der große Knopf im Kartenkopf holt die Daten. */
.card-foot { display: flex; align-items: center; gap: .5rem; }
.card-foot .meta { flex: 1; min-width: 0; }
.card-foot .iconbtn { width: 30px; height: 30px; flex-shrink: 0; background: none; }
.card-foot .iconbtn svg { width: 16px; height: 16px; }
.fragen { margin-top: .5rem; padding: .5rem .7rem; border-radius: var(--radius-s); background: color-mix(in srgb, var(--neutral) 14%, transparent); color: var(--fg); font-size: .9rem; }
.fragen button { text-decoration: underline; padding: 0; }
.drag-handle { color: var(--fg-dim); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.card.dragging { opacity: .6; }
.card.drop-before { box-shadow: 0 -3px 0 var(--accent); } .card.drop-after { box-shadow: 0 3px 0 var(--accent); }

/* Detailseite, Listen, Formulare, Modal */
.range { display: flex; gap: .4rem; margin: .8rem 0; }
.range button { padding: .35rem .7rem; border-radius: 999px; background: var(--bg-elev2); color: var(--fg-muted); }
.range button.active { background: var(--accent); color: var(--accent-fg); }
.chart-wrap { position: relative; height: 260px; }
/* Reicht die Zeitachse weit über die Messwerte hinaus (Prognose, Zielgerade), wird der echte
   Verlauf sonst zur flachen Linie gestaucht. Das Diagramm bekommt dann seine volle Breite und
   scrollt in diesem Rahmen, statt die Seite seitlich zu ziehen. */
.chart-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
.chart-scroll > .chart-wrap { min-width: 100%; }
.list { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; padding: .5rem .6rem; border-radius: var(--radius-s); background: var(--bg-elev2); text-align: left; width: 100%; }
/* Nebentext (Datum links, Zusatzzeile unter dem Wert). Gilt überall, nicht nur in .row:
   die Nächteliste in Schlaf benutzt dieselbe Auszeichnung, ohne eine .row zu sein. */
.sub { color: var(--fg-dim); font-size: .82rem; }
details summary { cursor: pointer; color: var(--fg-muted); }
.md p { margin: .5rem 0; } .md ul, .md ol { padding-left: 1.2rem; margin: .5rem 0; } .md strong { color: var(--fg); }
.md li { margin: .15rem 0; } .md li > p { margin: .2rem 0; } .md li > ul, .md li > ol { margin: .15rem 0; }
.md > *:first-child { margin-top: 0; } .md > *:last-child { margin-bottom: 0; }
.md h3, .md h4, .md h5, .md h6 { margin: .9rem 0 .35rem; line-height: 1.25; }
.md h3 { font-size: 1.05rem; } .md h4 { font-size: .98rem; } .md h5, .md h6 { font-size: .92rem; color: var(--fg-muted); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: .9rem 0; }
.md blockquote { margin: .6rem 0; padding-left: .8rem; border-left: 3px solid var(--line); color: var(--fg-muted); }
.md code { background: var(--bg-elev2); border-radius: 4px; padding: .05rem .3rem; font-size: .88em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.md pre { margin: .6rem 0; padding: .6rem .7rem; background: var(--bg-elev2); border-radius: var(--radius-s); overflow-x: auto; }
.md pre code { background: none; padding: 0; font-size: .85em; }
/* Tabellen dürfen breiter sein als der Schirm, gescrollt wird dann seitlich im Rahmen.
   Die erste Spalte ist die Bezeichnung und bleibt einzeilig, der Rest darf umbrechen. */
/* Der Schatten an der Kante zeigt, dass seitlich noch etwas liegt. Die beiden "local"-Verläufe
   wandern mit dem Inhalt und decken ihn ab, sobald das Ende erreicht ist. */
.md-table { margin: .6rem 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--bg-elev), transparent 22px) left center / 22px 100% no-repeat,
    linear-gradient(to left, var(--bg-elev), transparent 22px) right center / 22px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.3), transparent) left center / 9px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.3), transparent) right center / 9px 100% no-repeat;
  background-attachment: local, local, scroll, scroll; }
.md table { border-collapse: collapse; width: auto; min-width: 100%; font-size: .9rem; }
.md th, .md td { border-bottom: 1px solid var(--line); padding: .35rem .7rem .35rem 0; text-align: left; vertical-align: top; min-width: 5.5rem; }
.md th:last-child, .md td:last-child { padding-right: 0; }
.md td:first-child { white-space: nowrap; }
.md th { color: var(--fg-dim); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.md tbody tr:last-child td { border-bottom: 0; }
.hint { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; margin: .3rem 0; }
.hint .typ { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg-dim); min-width: 5.5rem; padding-top: .2rem; }
/* Absolut in der Huelle, nicht fixed: siehe Kommentar beim body. inset:0 genuegt, der
   Bezugsrahmen ist die Padding-Box des body und die schliesst dessen Safe-Area-Polster
   schon ein. Ein negativer oberer Wert hat den Hintergrund um genau diese 50px zu weit
   nach oben gezogen, die Modal-Kopfzeile lag dann unter der Statusleiste. */
.modal-backdrop { position: absolute; inset: 0; overscroll-behavior: contain; touch-action: none; background: var(--bg-elev); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.modal { touch-action: pan-y; background: var(--bg-elev); width: 100%; max-width: 720px; height: 100%; left: 0; right: 0; max-height: 100%; border-radius: 0; display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
.modal-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.modal-body { padding: 1rem; overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-foot { padding: .8rem 1rem; border-top: 1px solid var(--line); display: flex; gap: .6rem; }
.toast { position: absolute; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--bg-elev2); border: 1px solid var(--line); padding: .6rem 1rem; border-radius: 999px; z-index: 60; }
.toast.error { border-color: var(--achtung); }
@media (min-width: 720px) {
  .modal-backdrop { align-items: center; background: rgba(0,0,0,.55); } .modal { border-radius: var(--radius); height: auto; max-height: 85vh; padding-top: 0; padding-bottom: 0; }
  .kennzahl .value { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* F2 */
.login-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.login-card { width: 100%; max-width: 380px; }
.login-card h1 { text-align: center; margin-bottom: 1rem; }
.login-card > form + .btn { margin-top: .6rem; }
.btn.block { width: 100%; justify-content: center; }
/* Routine-CTA (Task R8): eigener, gedämpfter Ton statt des vollflächigen --accent aus
   .btn.primary, der als breites Banner über allen Karten zu schrill wirkt. Gleicher
   Ton per color-mix wie .chip.tag-reise, nur getönter Hintergrund statt Volltonfläche. */
#cta { margin-bottom: .9rem; }
#cta .btn.primary { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.form-error { color: var(--achtung); font-size: .88rem; margin-top: .6rem; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.field label { font-size: .82rem; color: var(--fg-muted); }
.field .readonly { padding: .55rem .7rem; color: var(--fg-muted); }
.field textarea { resize: vertical; }
.form-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .2rem; }
.einstellungen .card h3 { font-size: .95rem; color: var(--fg-muted); margin: 1.1rem 0 .5rem; }
.einstellungen .card h3:first-of-type { margin-top: .3rem; }
.inline-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.inline-form input { flex: 1 1 6rem; min-width: 0; }
.row-flex { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--radius-s); background: var(--bg-elev2); }
.row-flex .grow { flex: 1; min-width: 0; }
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; background: var(--bg-elev2); padding: .6rem .7rem; border-radius: var(--radius-s); margin-top: .6rem; }
.job { padding: .6rem .7rem; border-radius: var(--radius-s); background: var(--bg-elev2); margin-top: .4rem; }
.job-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.job-head .grow { flex: 1; min-width: 8rem; }
.job-err { color: var(--achtung); font-size: .85rem; margin-top: .35rem; }
.job details { margin-top: .4rem; }
.job .logline { font-size: .82rem; color: var(--fg-muted); padding: .15rem 0; }
@media (min-width: 720px) {
  .settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .settings-form .field:has(textarea) { grid-column: 1 / -1; }
  .settings-form > .form-actions { grid-column: 1 / -1; }
}

/* F3 */
.card-head .iconbtn { width: 36px; height: 36px; }
.card-head .drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 36px; }
.card-head .drag-handle svg { width: 18px; height: 18px; }
.card.dragging .drag-handle { cursor: grabbing; }
.fragen { display: flex; flex-direction: column; gap: .25rem; }
.fragen button { display: block; width: 100%; text-align: left; }
.meta button { text-decoration: underline; padding: 0; margin-left: .2rem; }
.kennzahl .value.text { font-size: 1rem; }

/* F4 */
.page.detail > div + div { margin-top: 1.1rem; }
/* Abschnitte in den Detailkarten. h2 hat global margin 0, dadurch klebten "Defizit je Tag",
   "Protokoll", "Nächte" und "Notizen" ohne Luft am Ende des vorigen Abschnitts. Gilt für
   alle Bereiche, deshalb hier einmal zentral statt je Modul. */
.detail .card > * + h2 { margin-top: 1.6rem; }
.detail .card > h2 + * { margin-top: .6rem; }
.detail .card-head .ampel { width: 12px; height: 12px; }
.detail .topbar .bereich-icon { width: 22px; height: 22px; color: var(--card-accent); }
/* Kopfzeile der Detailseiten bleibt beim Scrollen oben stehen. Seit dem Umbau der Huelle
   ist #app der Scroller und beginnt bereits unter der Statusleiste: die frueher noetige
   Kompensation (negativer Rand ueber den Safe-Area-Abstand, derselbe Wert wieder als
   Polster) haette den Kopf um genau diese 50px aufgeblaeht. Polster jetzt wie bei
   .modal-head, damit Detailkopf und Chat-Kopf gleich hoch sind. */
.detail .topbar { position: sticky; top: 0; z-index: 20; background: var(--bg);
  margin: -1rem -1rem .6rem; padding: .8rem 1rem;
  border-bottom: 1px solid var(--line); }
.hints { margin: .5rem 0; }
/* Eigener Chevron statt des nativen Markers: der wird im geflexten older-analysis-
   Summary (siehe unten) ohnehin unterdrückt, ein einheitliches Symbol für beide
   Ebenen ("Ältere Analysen" und die einzelnen älteren Einträge) ist konsistenter. */
.detail summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; }
.detail summary::-webkit-details-marker { display: none; }
.detail summary .chevron { width: 16px; height: 16px; flex-shrink: 0; transition: transform .15s ease; transform: rotate(-90deg); }
.detail details[open] > summary .chevron { transform: rotate(0deg); }
/* Analyse-Kurzfassung auf der Detailseite (1.10.0): nur Ampel, ein Satz, Zeitstempel und
   der Weg zum Analyse-Screen. Der Link sitzt als breiter Knopf am Fuß der Karte, der
   Chevron rechts außen macht klar, dass es weitergeht. */
.analyse-kurz .meta { margin-top: .2rem; }
.analyse-link { margin-top: .7rem; }
.analyse-link svg { color: var(--fg-dim); }

/* Analyse-Screen: zwischen Zeitstempel und dem Markdown der Analyse braucht es Luft,
   sonst klebt die erste Zwischenüberschrift am Datum. */
.analyse-voll > .md { margin-top: .8rem; }

.older-analysis { margin-top: .4rem; }
.older-analysis summary .sub { min-width: 8rem; }
.older-analysis .md { margin-top: .4rem; padding-left: 1.1rem; }
.note-form { margin-top: .8rem; }
.note-form .field:has(input[type="date"]) { max-width: 12rem; }
.note-row { grid-template-columns: auto 1fr; cursor: pointer; }
.note-row:hover { background: color-mix(in srgb, var(--bg-elev2) 70%, var(--accent) 10%); }
@media (min-width: 720px) {
  .detail .kennzahlen { grid-template-columns: repeat(5, 1fr); }
}

/* F5 */
.entry-row { cursor: pointer; }
.entry-row:hover { background: color-mix(in srgb, var(--bg-elev2) 70%, var(--accent) 10%); }
.row .main { min-width: 0; }
.bp-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirm-bar { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; padding: .6rem .7rem; border-radius: var(--radius-s); background: color-mix(in srgb, var(--achtung) 14%, transparent); flex-wrap: wrap; }
.confirm-bar span { flex: 1 1 100%; font-size: .9rem; }
.chip { display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: 999px; background: var(--bg-elev2); color: var(--fg-muted); font-size: .74rem; white-space: nowrap; }
.chip.outline { background: transparent; border: 1px solid var(--line); }
/* Gruppen der Morgenroutine (design-routine-gruppen.md). .chip bringt Form und
   Radius mit, hier kommt nur der Knopfcharakter dazu. */
.group-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.group-chip { cursor: pointer; border: 1px solid var(--line); background: transparent; font-family: inherit; }
.group-chip.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.card-head .group-chip { margin-left: .5rem; color: var(--routine); }
/* Zeile unter dem Übungstitel (1.21.15): Chip oder Status links, die Knöpfe rechts. */
.routine-card .card-tools { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
.routine-card .card-tools .chip { margin-right: auto; }
.routine-card .card-tools .group-chip { color: var(--routine); }
.routine-card .card-tools .iconbtn { width: 36px; height: 36px; }
/* Luft zwischen der Schrittzeile (12 Wdh. rechts, ...) und der ausklappbaren Anleitung,
   die klebten sonst aneinander. Der aufgeklappte Text bekommt denselben Abstand (1.21.16). */
.routine-card details { margin-top: .9rem; }
.routine-card details > summary + * { margin-top: .5rem; }
.wx-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin: .8rem 0; }
.wx-tile { border: 2px solid var(--line); border-radius: var(--radius-s); padding: .5rem .3rem; text-align: center; background: var(--bg-elev2); }
.wx-tile.optimal { border-color: var(--gut); }
.wx-tile.borderline { border-color: var(--neutral); }
.wx-tile.bad { border-color: var(--achtung); }
.wx-day { font-weight: 600; font-size: .8rem; }
/* Ellipsis statt Ausblenden auf schmalen Screens: der Text bleibt über den (auf dem
   Tile ohnehin vorhandenen) title/aria-label erreichbar, verschwindet aber nicht
   komplett wie ein display:none es täte. */
.wx-sum { font-size: .68rem; color: var(--fg-dim); margin: .15rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wx-temp, .wx-rain, .wx-wind { font-size: .72rem; color: var(--fg-muted); }
.cal-list { margin-top: .6rem; }
.cal-row { display: flex; gap: .6rem; padding: .3rem 0; font-size: .86rem; }
.cal-row .sub { min-width: 6.5rem; flex-shrink: 0; }
.activity-row { align-items: start; }
.activity-row .main > div:first-child { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.activity-row.expandable { cursor: pointer; }
/* Knopf in einer Zeile: kleiner und ohne eigene Fläche, die Zeile selbst ist schon eine.
   flex-shrink, weil die Zeile ein Grid ist und die Spalte sonst mit dem Icon wächst. */
.row-action { width: 32px; height: 32px; background: none; flex-shrink: 0; }
.row-action svg { width: 18px; height: 18px; }
.hr-zones { display: flex; flex-direction: column; gap: .2rem; margin-top: .5rem; }
.hr-zone { position: relative; height: 18px; border-radius: 4px; background: var(--bg-elev2); overflow: hidden; }
.hr-zone::before { content: ""; position: absolute; inset: 0; width: var(--w, 0%); background: var(--training); opacity: .55; }
.hr-zone span { position: relative; font-size: .7rem; padding-left: .4rem; line-height: 18px; }
/* Bahn-Splits Schwimmen: sieben schmale Spalten, auf dem Telefon horizontal scrollbar
   statt umbrechend, damit die Zeilen untereinander vergleichbar bleiben. */
.laps-wrap { margin-top: .5rem; overflow-x: auto; }
.laps { border-collapse: collapse; font-size: .7rem; width: 100%; min-width: 340px; }
.laps th, .laps td { padding: .2rem .35rem; white-space: nowrap; }
.laps th { text-align: left; color: var(--fg-dim); font-weight: 400; border-bottom: 1px solid var(--bg-elev2); }
.laps td.num, .laps th:not(:first-child) { text-align: right; }
.laps tbody tr:nth-child(even) { background: var(--bg-elev2); }
@media (max-width: 480px) {
  .wx-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; }
  .wx-tile { padding: .4rem .15rem; }
}

/* F6 */
.chat-thread { display: flex; flex-direction: column; gap: .7rem; }
.chat-msg { display: flex; flex-direction: column; max-width: 88%; }
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.claude { align-self: flex-start; align-items: flex-start; }
/* max-width und min-width halten die Sprechblase an der Breite der Nachricht fest. Ohne sie
   zieht eine breite Tabelle die Blase auf ihre Mindestbreite (die Blase ist ein Flex-Element
   mit width:auto, also fit-content, und fit-content ist nie kleiner als min-content). Dann
   scrollt das ganze Chatfenster seitlich statt der Tabelle in ihrem Rahmen (.md-table). */
.chat-bubble { border-radius: var(--radius-s); padding: .55rem .75rem; max-width: 100%; min-width: 0; }
.chat-bubble.user { background: var(--bg-elev2); }
.chat-bubble.claude { background: transparent; padding-left: 0; padding-right: 0; }
.chat-bubble.claude.pending { display: flex; align-items: center; gap: .5rem; color: var(--fg-muted); padding-left: 0; }
.chat-bubble.claude.pending svg { width: 18px; height: 18px; }
.chat-bubble.claude.error { color: var(--achtung); padding-left: 0; }
.chat-bubble .md { margin: 0; }
.chat-bubble .md > *:first-child { margin-top: 0; }
.chat-bubble .md > *:last-child { margin-bottom: 0; }
.chat-retry { margin-top: .4rem; }
.chat-retry:disabled { opacity: .5; }
.chat-ts { font-size: .7rem; color: var(--fg-dim); margin-top: .2rem; }
.chat-options { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.chat-options .btn { border-radius: 999px; padding: .4rem .9rem; }
.version-line { text-align: center; margin-top: 1.5rem; }
.version-line button { text-decoration: underline; padding: 0; margin-left: .3rem; }
.chat-footwrap { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
.chat-footwrap .confirm-bar { margin-top: 0; }
.chat-foot { display: flex; gap: .6rem; align-items: flex-end; width: 100%; }
.chat-foot textarea {
  flex: 1; resize: none; line-height: 1.35; max-height: calc(1.35em * 5 + 1.2rem); overflow-y: auto;
}
.chat-foot .iconbtn { flex-shrink: 0; }

/* R8 */
.chip-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
.routine-card.finished { opacity: .55; }
.routine-card.finished .card-head h2 { text-decoration: line-through; text-decoration-color: var(--fg-dim); }
/* Teaser des Routine-Vorschlags (1.11.0). Ein ungesehener Vorschlag trägt den Akzentrand
   und einen Punkt am Titel, ein schon geöffneter ist ruhig. Damit ist auf einen Blick klar,
   ob seit dem letzten Hinsehen etwas dazugekommen ist. */
.vorschlag-teaser .card-head .bereich-icon { width: 20px; height: 20px; color: var(--routine); }
.vorschlag-teaser .summary { margin-bottom: 0; }
.vorschlag-teaser.neu { border-color: var(--routine); }
.vorschlag-teaser.neu .card-head h2::after { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--routine); flex-shrink: 0; }
.sub.veraltet { color: var(--achtung); }
.diff-groups { display: flex; flex-direction: column; gap: 1rem; margin: 1.2rem 0; }
.diff-group h3 { font-size: .8rem; color: var(--fg-muted); margin: 0 0 .4rem; text-transform: uppercase; letter-spacing: .04em; }
.diff-group .list { margin-top: 0; gap: .2rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0; }
.chip.removable { display: inline-flex; align-items: center; gap: .3rem; padding-right: .3rem; }
.chip.removable button { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; color: inherit; }
.chip.removable svg { width: 13px; height: 13px; }
.goal-form { margin-top: .8rem; }
/* Kein umschließendes .card mehr um die Übungsliste (Task-R8-Review Punkt 7c): die
   Abschnitte (Vorschlag, Liste, "Neue Übung", Ziel/Einschränkungen, Entfernte Übungen)
   sind direkte Kinder von .routine-page, Abstand analog zu .page.detail > div + div. */
.routine-page > * + * { margin-top: .9rem; }

/* Bühne (laufende Übung) */
.routine-card.stage { border-left: 4px solid var(--routine); text-align: center; }
.stage-body { padding: 1.1rem 0 .6rem; transition: opacity .2s ease; }
.routine-card.stage.rest .stage-body { opacity: .6; }
.stage-label { font-size: 1.05rem; color: var(--fg-muted); }
.stage-value { font-size: 2.6rem; font-weight: 600; margin-top: .2rem; }
.stage.paused .stage-value { opacity: .6; }
.stage-progress { margin-top: .5rem; }
.stage-body.pulse { animation: routine-pulse .6s ease; }
@keyframes routine-pulse { 0% { opacity: .3; transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
.stage-controls { display: flex; justify-content: center; gap: .9rem; margin-top: .8rem; }
.iconbtn.big { width: 58px; height: 58px; }
.iconbtn.big svg { width: 26px; height: 26px; }
.iconbtn.primary { background: var(--accent); color: var(--accent-fg); }
@media (prefers-reduced-motion: reduce) { .stage-body.pulse { animation: none; } }

/* Strichfiguren (design-routine-figuren.md, Abschnitt 5): SVG aus static/lib/figur.js, die
   Farben kommen von hier. Bildzeile der Karte links bewegt, rechts die Standbilder. */
.figur { display: block; width: 100%; max-width: 100%; height: auto; background: var(--bg-elev2); border-radius: var(--radius-s); }
.figur .glied, .figur .rumpf { fill: none; stroke: var(--fg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.figur .glied.hinten { stroke-opacity: .35; }
.figur .glied.aktiv { stroke: var(--routine); }
.figur .kopf { fill: var(--bg-elev2); stroke: var(--fg); stroke-width: 3; }
.figur .boden { stroke: var(--line); stroke-width: 2; }
.figur .wand { stroke: var(--line); stroke-width: 3; }
.figur .band { stroke: var(--routine); stroke-width: 2; stroke-dasharray: 3 2; }
.figur .hantel { stroke: var(--fg-muted); stroke-width: 4; stroke-linecap: round; }
.bild-zeile { display: grid; grid-template-columns: 1.6fr 1fr; gap: .6rem; margin: .6rem 0 .8rem; }
.standbilder { display: grid; gap: .4rem; align-content: start; }
.standbilder.viele { grid-template-columns: 1fr 1fr; }
.standbilder figure { margin: 0; min-width: 0; }
.standbilder figcaption { font-size: .7rem; color: var(--fg-dim); margin-top: .15rem; }
.bewegt { position: relative; min-width: 0; align-self: start; }
.bewegt .tag { position: absolute; left: .5rem; bottom: .4rem; padding: .1rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--fg-muted); font-size: .72rem; }
.stage-figur { margin: .6rem auto 0; max-width: 440px; text-align: left; }
@media (max-width: 440px) {
  .bild-zeile { grid-template-columns: 1fr; }
  .standbilder, .standbilder.viele { grid-template-columns: repeat(3, 1fr); }
}

/* Schlaf (Stufe 3): Chart und Nächte */
.chart-wrap.sleep { height: 300px; }
/* Eine Nacht sieht zugeklappt aus wie eine Zeile in Gewicht, Blutdruck und Training
   (.row in lib/ui.js): abgerundete Fläche, links das Datum gedimmt, in der Mitte Wert und
   Nebenzeile, rechts der Chevron. Aufklappbar bleibt sie trotzdem. */
.nights { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.night { background: var(--bg-elev2); border-radius: var(--radius-s); }
.night summary { cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: .6rem;
  align-items: center; padding: .5rem .6rem; border-radius: var(--radius-s); list-style: none; }
.night summary::-webkit-details-marker { display: none; }
.night-date { min-width: 4.8rem; }
.night-main { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.night-badges { display: inline-flex; gap: .5rem; }
.night-meta { margin-top: 0; }
.night summary .chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--fg-dim);
  transition: transform .15s ease; transform: rotate(-90deg); }
.night[open] > summary .chevron { transform: rotate(0deg); }
.score { display: inline-block; min-width: 2.4rem; text-align: center; border-radius: 6px; padding: .05rem .4rem; font-weight: 700; font-size: .86rem; background: var(--bg-elev2); color: var(--fg-muted); }
.score.gut { background: color-mix(in srgb, var(--gut) 22%, transparent); color: var(--gut); }
.score.neutral { background: color-mix(in srgb, var(--neutral) 22%, transparent); color: var(--neutral); }
.score.achtung { background: color-mix(in srgb, var(--achtung) 22%, transparent); color: var(--achtung); }
.night-body { padding: .2rem .6rem .7rem; font-size: .9rem; display: flex; flex-direction: column; gap: .4rem; }
.night-body .meta { margin-top: 0; }
.phases { display: flex; flex-wrap: wrap; gap: .3rem .9rem; color: var(--fg-muted); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.dot.deep { background: var(--phase-deep); } .dot.rem { background: var(--phase-rem); }
.dot.light { background: var(--phase-light); } .dot.awake { background: var(--phase-awake); }
.night-body .chip-row { margin-top: 0; }
.chip.tag-alkohol { background: color-mix(in srgb, var(--achtung) 22%, transparent); color: var(--achtung); }
.chip.tag-lifestyle { background: color-mix(in srgb, var(--neutral) 22%, transparent); color: var(--neutral); }
.chip.tag-training { background: color-mix(in srgb, var(--gut) 22%, transparent); color: var(--gut); }
.chip.tag-reise { background: color-mix(in srgb, var(--schlaf) 22%, transparent); color: var(--schlaf); }
.night-note { padding: .35rem .6rem; background: var(--bg-elev2); border-radius: var(--radius-s); border-left: 3px solid var(--line); font-size: .86rem; }

/* Essen (Stufe 2): Bilanztabelle und Protokoll */
.chart-wrap.essen { height: 300px; }
.bilanz-wrap { overflow-x: auto; }
.bilanz { border-collapse: collapse; width: 100%; font-size: .9rem; }
.bilanz th, .bilanz td { padding: .35rem .3rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bilanz th { color: var(--fg-dim); font-weight: 500; font-size: .78rem; }
.bilanz th:first-child, .bilanz td:first-child { text-align: left; }
.bilanz tr:last-child td { border-bottom: 0; }
.bilanz tr.incomplete td { color: var(--fg-dim); }
.bilanz td.pos { color: var(--gut); } .bilanz td.neg { color: var(--achtung); }
.protokoll { display: flex; flex-direction: column; }
.tag { border-bottom: 1px solid var(--line); }
.tag:last-child { border-bottom: 0; }
/* Datumszeile des Tages: eigene abgerundete Fläche, damit der Störerton (st) nur hier
   liegt und nicht hinter den Einträgen. Padding gilt auch ohne Störer, sonst würden
   getönte und ungetönte Tage unterschiedlich breit einrücken. */
.tag summary { cursor: pointer; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .45rem .6rem; border-radius: var(--radius-s); list-style: none; }
.tag summary::-webkit-details-marker { display: none; }
.tag .tag-date { font-weight: 600; min-width: 6.2rem; }
.tag .tag-meta { color: var(--fg-muted); font-size: .86rem; flex: 1; }
/* Makrobalken: eigene Zeile unter Datum und Metazeile, deshalb flex-basis 100%.
   Vorbild für den Aufbau ist .hr-zone. Bei Teilabdeckung dimmt .makro-bars.teil. */
.makro-bars { flex: 1 0 100%; display: flex; flex-direction: column; gap: .18rem; margin-top: .1rem; }
.makro-bars.teil { opacity: .5; }
.pbar { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--fg-muted); }
.pbar .pbar-label { min-width: 1.4rem; color: var(--fg-dim); }
.pbar .pbar-track { position: relative; flex: 1; height: 14px; border-radius: 4px; background: var(--bg-elev2); overflow: hidden; }
.pbar .pbar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 0%); background: var(--ton); opacity: .75; }
.pbar .pbar-over { position: absolute; top: 0; bottom: 0; left: var(--fill, 0%); width: var(--over, 0%); background: var(--ueberschuss); opacity: .7; }
.pbar .pbar-tick { position: absolute; top: 0; bottom: 0; left: var(--tick, 100%); width: 1px; background: var(--fg-dim); }
.pbar .pbar-num { min-width: 5.2rem; text-align: right; font-variant-numeric: tabular-nums; }
.tag .list { margin: .35rem 0 .7rem; }
/* Seit 1.21.2: Name ganz links über die volle Breite, rechts kcal oben und die Uhrzeit
   darunter in der Ecke. Vorher stand die Zeit in einer eigenen Spalte ganz links und
   nahm dem Namen 3,4rem weg. */
.food { grid-template-columns: 1fr auto; align-items: start; }
.food .food-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.food .kcal { white-space: nowrap; font-variant-numeric: tabular-nums; }
.food .food-zeit { white-space: nowrap; font-size: .78rem; color: var(--fg-dim);
  font-variant-numeric: tabular-nums; }
.food .reason { font-size: .82rem; color: var(--fg-dim); margin-top: .15rem; }
.food.flagged { box-shadow: inset 3px 0 0 var(--achtung); }
.food .chip.flag { margin-left: .4rem; background: color-mix(in srgb, var(--achtung) 22%, transparent); color: var(--achtung); font-size: .7rem; }
/* Nährwerte (design-naehrwerte.md, Abschnitt 7): Zeile unter den Makrobalken, Qualitätszeichen
   vor dem Text, Posten als eigener Block unter der Zeile, Wochenbilanz als Tabelle. */
.naehrwert-zeile { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .74rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.naehrwert-zeile.teil { opacity: .5; }
.naehrwert-zeile .warn { color: var(--achtung); }
/* Eintrag als <details>: die Zeile ist die Zusammenfassung, der aufgeklappte Teil trägt
   Makros, Mikros, Posten und die Knöpfe. Aufgeklappt wird per Gerät gemerkt (essen:auf). */
.food-details > summary { list-style: none; cursor: pointer; padding: 0; }
.food-details > summary::-webkit-details-marker { display: none; }
.food-details[open] > summary .row { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.food-detail { padding: .45rem .6rem .55rem; font-size: .78rem; color: var(--fg-dim); background: var(--bg-elev2);
  border-radius: 0 0 var(--radius-s) var(--radius-s); display: flex; flex-direction: column; gap: .22rem; }
.food-detail .food-makros { color: var(--fg); font-variant-numeric: tabular-nums; }
.food-detail .food-mikro { font-variant-numeric: tabular-nums; }
.food-detail .food-hinweis { color: var(--neutral); }
.food-detail .food-knoepfe { display: flex; gap: .4rem; margin-top: .25rem; }
.food-detail .food-knoepfe .chip { cursor: pointer; font-family: inherit; }
/* Aufklappbare Abschnitte (Defizit je Tag, Nährstoffe): h2 in der Zusammenfassung, Chevron davor. */
.aufklapp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem; }
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary h2 { margin: 0; }
.aufklapp > summary + * { margin-top: .6rem; }
.detail .card > * + .aufklapp { margin-top: 1.6rem; }
.naehrstoffe .group-chips { margin-bottom: .6rem; }
.naehrstoffe-tabelle td:nth-child(2), .naehrstoffe-tabelle td:nth-child(3) { text-align: right; white-space: nowrap; }
.naehrstoffe-tabelle tr.unbekannt td { color: var(--fg-dim); }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--fg-dim); }
.status-dot.ok { background: var(--gut); }
.status-dot.zu_wenig, .status-dot.zu_viel { background: var(--achtung); }

/* Störer (Reise, Krank, Alkohol, Verletzt) aus dem Garmin-Gesundheitsprotokoll: Tage, die
   die Messwerte erklärbar verzerren. Im Chart zeichnet lib/stoerer.js Bänder auf das Canvas,
   in Tabellen und Listen setzt tint() den Verlauf je Zeile. Der Legendenblock ist ein
   einziger Schalter für alles, die Klasse stoerer-off an der Karte nimmt die Tönung
   wieder heraus. */
.stoerer-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin: .5rem 0 .1rem; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 999px; font-size: .76rem; color: var(--fg-muted); }
.stoerer-legend .st-title { color: var(--fg-dim); }
.stoerer-legend .st-item { display: inline-flex; align-items: center; gap: .3rem; }
.stoerer-legend .st-swatch { width: 10px; height: 10px; border-radius: 3px; }
.stoerer-legend[aria-pressed="false"] { opacity: .55; }
.stoerer-legend[aria-pressed="false"] .st-swatch { background: var(--fg-dim) !important; }
.stoerer-off .st { background-image: none !important; }

/* Schnellerfassung Essen (design-essen-eingabe.md): Textfeld mit Mikrofon, Datum und
   Uhrzeit, darunter die Vorschläge. Ein Tipp auf einen Vorschlag trägt sofort ein, die
   Zeile ist deshalb ein Knopf über die volle Breite. Lange Mahlzeitentexte (Claude
   formuliert ausführlich) werden auf zwei Zeilen begrenzt. */
.schnell .chat-foot { margin-bottom: .8rem; }
.schnell-wann { display: flex; gap: .6rem; }
.schnell-wann .field { flex: 1; }
.schnell-liste { margin-top: .4rem; display: flex; flex-direction: column; gap: .3rem; }
.schnell-gruppe { font-size: .78rem; color: var(--fg-dim); margin: .8rem 0 .1rem; }
.schnell-gruppe:first-child { margin-top: .4rem; }
.schnell-vorschlag { display: flex; gap: .6rem; align-items: flex-start; width: 100%; text-align: left; padding: .55rem .6rem; border-radius: var(--radius-s); background: var(--bg-elev2); }
.schnell-vorschlag:disabled { opacity: .5; }
.schnell-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.schnell-text .titel { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.schnell-text .sub { font-size: .76rem; color: var(--fg-dim); }
.schnell-vorschlag .zahl { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg-muted); font-size: .88rem; }