/*
 * NoFat Web - Gestaltungssystem, Teil 2: Bausteine.
 *
 * Jeder Baustein ist eine Klasse, die ueberall gleich aussieht und sich ueberall gleich anfuehlt:
 * Karte, Listenzeile, Chip, Knopf, Feld, Bodenblatt, Dialog, Einblendung, Fortschrittsring, Balken,
 * Kennzahlenkachel, Segmentumschalter, leerer Zustand.
 *
 * Regeln:
 *   - Keine eingebetteten Stile in den Vorlagen: Alles, was ein Bereich braucht, steht hier.
 *   - Keine Farbwerte im Bereich - immer die Variablen aus grundlagen.css.
 *   - Bedienziele sind mindestens 44 px hoch.
 *
 * Am Ende stehen die Bausteine der aelteren Bereiche (z. B. .zutat, .plan-zelle, .geraeteliste).
 * Sie bleiben gueltig, bis die Bereiche ihre Vorlagen umgestellt haben.
 */

/* ==========================================================================================
   1. Karte
   ========================================================================================== */
.karte {
    background: var(--flaeche-1);
    border: 1px solid var(--kontur-fein);
    border-radius: var(--radius-karte);
    box-shadow: var(--schatten-1);
    padding: var(--abstand);
    margin: 0 0 var(--abstand);
}
.karte-breit { max-width: none; }
.karte-schmal { max-width: 26rem; margin-left: auto; margin-right: auto; }
.karte-gefahr { border-color: var(--fehler); background: var(--fehler-behaelter); color: var(--auf-fehler-behaelter); }
.karte-gefahr .warnung { color: var(--auf-fehler-behaelter); }
.karte-gefahr a { color: var(--auf-fehler-behaelter); }
.karte-hervor { border-color: var(--haupt); background: var(--haupt-behaelter); color: var(--auf-haupt-behaelter); }
.karte-hervor a { color: var(--auf-haupt-behaelter); }
.karte-kopf { display: flex; align-items: center; gap: var(--abstand-klein); margin-bottom: var(--abstand-klein); }
.karte-kopf h2, .karte-kopf h3 { margin: 0; }
.karte-kopf .knopf { margin-left: auto; }
.karte-titel-zeile { display: flex; align-items: baseline; gap: var(--abstand-klein); flex-wrap: wrap; }
.karte-titel-zeile .klein { margin-left: auto; }

/* Kennzahlenkacheln: Zahlen des Tages, vier nebeneinander, sobald Platz ist. */
.kachel-reihe {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-klein);
    margin: 0 0 var(--abstand);
}
@container (min-width: 30rem) {
    .kachel-reihe { grid-template-columns: repeat(4, 1fr); }
}
.kachel {
    background: var(--flaeche-1);
    border: 1px solid var(--kontur-fein);
    border-radius: var(--radius-gross);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 84px;
}
.kachel-zeichen { color: var(--haupt); display: flex; }
.kachel-zeichen .zeichen { width: 20px; height: 20px; }
.kachel-wert { font-size: var(--schrift-4); font-weight: 600; line-height: 1.15; }
.kachel-einheit { font-size: var(--schrift-klein); font-weight: 400; color: var(--gedaempft); }
.kachel-text { font-size: var(--schrift-klein); color: var(--gedaempft); }

/* ==========================================================================================
   2. Listen und Zeilen
   ========================================================================================== */
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.liste > li + li { border-top: 1px solid var(--kontur-fein); }

.zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    min-height: 56px;
}
.zeile-zeichen {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-feld);
    background: var(--flaeche-3);
    color: var(--text);
}
.zeile-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.zeile-haupt { font-weight: 500; }
.zeile-haupt a { text-decoration: none; }
.zeile-haupt a:hover { text-decoration: underline; }
.zeile-neben { font-size: var(--schrift-klein); color: var(--gedaempft); }
.zeile-aktion { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: var(--abstand-klein); }
.zeile-links { padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }

/* Ein Kaestchen mit Beschriftung - fuer "abgehakt" und Einwilligungen. */
.prueffeld {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-weight: 400;
    font-size: var(--schrift-text);
    min-height: 44px;
    padding: 8px 0;
    cursor: pointer;
}
.prueffeld input[type="checkbox"] {
    width: 24px; height: 24px;
    min-height: 24px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--haupt);
}

/* ==========================================================================================
   3. Chips und Segmentumschalter
   ========================================================================================== */
.chip-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-klein);
    margin: 0;
}
.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--kontur);
    border-radius: var(--radius-chip);
    background: var(--flaeche-1);
    color: var(--text);
    font-size: var(--schrift-klein);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--bewegung-hinaus), border-color var(--bewegung-hinaus), transform var(--bewegung-hinaus);
}
.chip:active { transform: scale(.97); }
.chip:hover { background: var(--flaeche-3); }
/* Das eigentliche Bedienelement bleibt im Baum, ist aber unsichtbar: Tastatur und Vorlesen
   arbeiten damit weiter. Der Fokusring kommt ueber :has() auf den Chip. */
.chip-eingabe {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0;
    pointer-events: none;
}
.chip:has(.chip-eingabe:focus-visible) { outline: 3px solid var(--haupt); outline-offset: 2px; }
.chip:has(.chip-eingabe:checked) {
    background: var(--haupt-behaelter);
    border-color: var(--haupt-behaelter);
    color: var(--auf-haupt-behaelter);
    font-weight: 700;
}
.chip:has(.chip-eingabe:checked) .zeichen { color: var(--auf-haupt-behaelter); }
.chip-zeichen { display: inline-flex; }
.chip-zeichen .zeichen { width: 18px; height: 18px; }
.chip-hilfe { font-size: var(--schrift-fein); color: var(--gedaempft); font-weight: 400; }

/* Segmentumschalter: zwei bis vier gleichwertige Wege, einer gilt. */
.segment {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--flaeche-3);
    border-radius: var(--radius-rund);
    margin: 0 0 var(--abstand-klein);
    container-type: inline-size;
}
.segment-eintrag {
    position: relative;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 10px;
    border-radius: var(--radius-rund);
    color: var(--gedaempft);
    font-size: var(--schrift-klein);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: background var(--bewegung-hinaus), color var(--bewegung-hinaus);
}
.segment-eingabe { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.segment-eintrag:has(.segment-eingabe:checked),
.segment-eintrag[aria-current] {
    background: var(--flaeche-1);
    color: var(--haupt);
    font-weight: 700;
    box-shadow: var(--schatten-1);
}
.segment-eintrag:has(.segment-eingabe:focus-visible) { outline: 3px solid var(--haupt); outline-offset: 2px; }

/* ==========================================================================================
   4. Knoepfe
   ========================================================================================== */
.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 11px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-rund);
    background: var(--haupt);
    color: var(--auf-haupt);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--bewegung-hinaus), transform var(--bewegung-hinaus), box-shadow var(--bewegung-hinaus);
}
.knopf:hover { box-shadow: var(--schatten-1); }
.knopf:active { transform: scale(.97); }
.knopf .zeichen { width: 20px; height: 20px; }

.knopf-leise { background: transparent; color: var(--haupt); border-color: var(--kontur); }
.knopf-leise:hover { background: var(--flaeche-3); }
.knopf-gefahr { background: var(--fehler); color: var(--auf-fehler); }
.knopf-gefahr-leise { background: transparent; color: var(--fehler); border-color: var(--fehler); }
.knopf-gefahr-leise:hover { background: var(--fehler-behaelter); }
.knopf-voll { width: 100%; margin-top: 10px; }
.knopf-klein { min-height: 36px; padding: 6px 14px; font-size: var(--schrift-klein); }
/* Knopf, der nur ein Zeichen zeigt (z. B. das Plus in einer Ueberschrift): quadratisch und ruhig,
   die Trefferflaeche bleibt trotzdem fingerfreundlich. */
.knopf-nur-zeichen { padding: 6px 10px; min-width: 40px; justify-content: center; }
.knopf-gross { min-height: 52px; padding: 14px 24px; font-size: 1.0625rem; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: .5; cursor: default; box-shadow: none; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.knopfreihe .knopf { margin-top: 0; }

/* Nur ein Zeichen: rund, mindestens 44 px. */
.knopf-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-rund);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background var(--bewegung-hinaus), transform var(--bewegung-hinaus);
}
.knopf-symbol:hover { background: var(--flaeche-3); }
.knopf-symbol:active { transform: scale(.92); }
.knopf-symbol .zeichen { width: 24px; height: 24px; }

form.inline { display: inline; margin: 0; }
.knopf-text { background: none; border: 0; padding: 0; color: var(--haupt); font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* Aktionen unten: am Handy immer erreichbar, waehrend das Formular laeuft. */
.aktionsleiste {
    position: sticky;
    bottom: calc(var(--hoehe-leiste) + var(--rand-unten) + 8px);
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-klein);
    align-items: center;
    margin: var(--abstand) calc(-1 * var(--abstand)) calc(-1 * var(--abstand));
    padding: var(--abstand-klein) var(--abstand);
    background: var(--flaeche-2);
    border-top: 1px solid var(--kontur-fein);
    border-radius: 0 0 var(--radius-karte) var(--radius-karte);
}
.aktionsleiste .knopf { flex: 1 1 auto; }
.aktionsleiste .knopf-leise, .aktionsleiste .knopf-gefahr-leise { flex: 0 0 auto; }

/* ==========================================================================================
   5. Formulare und Felder
   ========================================================================================== */
.formular { display: flex; flex-direction: column; gap: var(--abstand); margin-top: var(--abstand-klein); }
.formular .formular { gap: var(--abstand-klein); margin-top: 0; }

.feld { display: flex; flex-direction: column; gap: 6px; }
/* Ein ausgeblendeter Block bleibt ausgeblendet, auch wenn er sonst Flex ist (z. B. [data-plan-rezept]). */
[hidden] { display: none !important; }
fieldset.feld { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.feld > legend { padding: 0; }
.feld > label,
.feld-beschriftung { font-size: var(--schrift-klein); font-weight: 600; color: var(--text); }
.pflicht { color: var(--fehler); font-weight: 700; margin-left: 2px; }
.feld-hilfe { font-size: var(--schrift-klein); color: var(--gedaempft); }
.feld-fehler { font-size: var(--schrift-klein); color: var(--fehler); font-weight: 500; display: flex; gap: 6px; align-items: flex-start; }
.feld-fehler .zeichen { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.feld-einheit { font-size: var(--schrift-klein); color: var(--gedaempft); }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], input[type="tel"], input[type="url"],
input[type="time"], select, textarea {
    width: 100%;
    /* 16 px verhindern, dass iPhone und Android beim Antippen in das Feld hineinzoomen. */
    font-size: var(--schrift-text);
    font-family: inherit;
    color: var(--text);
    background: var(--flaeche-2);
    border: 1px solid var(--kontur);
    border-radius: var(--radius-feld);
    padding: 12px 14px;
    min-height: 48px;
    transition: border-color var(--bewegung-hinaus), background var(--bewegung-hinaus);
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }

/*
 * Datums-, Zeit- und Auswahlfelder zeichnet der Browser selbst (Kalenderblatt, Uhr, Pfeil). Ihre
 * Farben nimmt er dabei aus dem color-scheme des Elements, nicht aus `color` - im ausdruecklich
 * dunklen Erscheinungsbild stand der Wert sonst dunkel auf dunkler Flaeche (Android Chrome).
 * `inherit` uebernimmt das color-scheme von :root, das hell, dunkel und System bereits setzt.
 */
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], input[type="week"], select {
    color: var(--text);
    color-scheme: inherit;
}
select { appearance: none; background-image: none; padding-right: 40px;
    /* Der Pfeil ist ein eigenes Zeichen im Hintergrund - kein Fremdbild, keine Schrift. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2379766c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
}
:root[data-theme="dunkel"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23938f85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
input::placeholder, textarea::placeholder { color: var(--gedaempft); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: var(--text); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--haupt); }

/* Fehler direkt am Feld: Der Rahmen faerbt sich, sobald ein Fehlerhinweis darunter steht. */
.feld:has(.feld-fehler) input, .feld:has(.feld-fehler) select, .feld:has(.feld-fehler) textarea {
    border-color: var(--fehler);
    background: var(--fehler-behaelter);
    color: var(--auf-fehler-behaelter);
}
.feld:has(.feld-fehler) > label { color: var(--fehler); }

.feldpaar { display: grid; grid-template-columns: 1fr; gap: var(--abstand); }
@media (min-width: 30rem) { .feldpaar { grid-template-columns: 1fr 1fr; gap: var(--abstand); } }
.feldpaar-drei { display: grid; grid-template-columns: 1fr; gap: var(--abstand); }
@media (min-width: 34rem) { .feldpaar-drei { grid-template-columns: repeat(3, 1fr); } }

/* Seltenes einklappen - alles, was nicht jeder braucht, verschwindet hinter dem Zusammenklapper. */
details.klapper {
    border: 1px solid var(--kontur-fein);
    border-radius: var(--radius-gross);
    background: var(--flaeche-1);
    margin: 0 0 var(--abstand);
    overflow: hidden;
}
details.klapper > summary {
    display: flex;
    align-items: center;
    gap: var(--abstand-klein);
    min-height: 52px;
    padding: 12px var(--abstand);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
details.klapper > summary::-webkit-details-marker { display: none; }
details.klapper > summary .zeichen:last-child { margin-left: auto; transition: transform var(--bewegung-hinaus); }
details.klapper[open] > summary { border-bottom: 1px solid var(--kontur-fein); background: var(--flaeche-2); }
details.klapper[open] > summary .zeichen:last-child { transform: rotate(180deg); }
details.klapper > .klapper-inhalt { padding: var(--abstand); }
.klapper-hinweis { font-size: var(--schrift-klein); color: var(--gedaempft); font-weight: 400; }
.klapper-gefahr { border-color: var(--fehler); }
.klapper-gefahr > summary { color: var(--fehler); }
.klapper-gefahr > summary .zeichen { color: var(--fehler); }

/* Deutlich abgesetzt: hebt sich vom Rest ab, ohne zu schreien (z. B. Abmelden). */
.karte-absetzung { border-style: dashed; border-color: var(--kontur); background: var(--flaeche); }

/* Passwortstaerke (wird von app.js gefuellt) */
.staerke { margin: 6px 0 2px; }
.staerke-balken { height: 6px; background: var(--flaeche-3); border-radius: var(--radius-rund); overflow: hidden; }
.staerke-balken span { display: block; height: 100%; width: 15%; background: var(--fehler); transition: width var(--bewegung-hinaus), background var(--bewegung-hinaus); }
.staerke-text { font-size: var(--schrift-fein); color: var(--gedaempft); }
.staerke[data-stufe="2"] .staerke-balken span { width: 40%; background: var(--zweit); }
.staerke[data-stufe="3"] .staerke-balken span { width: 70%; background: #7fa21b; }
.staerke[data-stufe="4"] .staerke-balken span { width: 100%; background: var(--haupt); }

/* ==========================================================================================
   6. Meldungen, Fehlerlisten, Hinweise
   ========================================================================================== */
.meldung {
    border-radius: var(--radius-feld);
    padding: 12px 14px;
    margin: 0 0 12px;
    border: 1px solid transparent;
    font-size: var(--schrift-klein);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.meldung .zeichen { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.meldung-erfolg { background: var(--haupt-behaelter); color: var(--auf-haupt-behaelter); border-color: var(--haupt); }
.meldung-hinweis { background: var(--flaeche-3); color: var(--text); }
.meldung-warnung { background: var(--zweit-behaelter); color: var(--auf-zweit-behaelter); }
.meldung-fehler { background: var(--fehler-behaelter); color: var(--auf-fehler-behaelter); border-color: var(--fehler); }

.fehlerliste {
    background: var(--fehler-behaelter);
    color: var(--auf-fehler-behaelter);
    border: 1px solid var(--fehler);
    border-radius: var(--radius-feld);
    padding: 12px 14px 12px 16px;
    margin: 0 0 var(--abstand);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fehlerliste li { margin-left: 1rem; }

/* ==========================================================================================
   7. Bodenblatt und Dialog
   ========================================================================================== */
datalist, dialog { font-family: inherit; }

.blatt {
    /* Bodenblatt: von unten, volle Breite, oben deutlich gerundet. */
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: min(var(--breite-inhalt), 100%);
    max-height: 88dvh;
    margin: 0 auto;
    padding: 0 0 var(--rand-unten);
    border: 0;
    border-radius: var(--radius-blatt) var(--radius-blatt) 0 0;
    background: var(--flaeche-2);
    color: var(--text);
    box-shadow: var(--schatten-3);
    overflow: hidden auto;
    overscroll-behavior: contain;
}
.blatt[open] { animation: blatt-hinein var(--bewegung-hinein); }
.blatt::backdrop { background: rgba(0, 0, 0, .45); }
.blatt[open]::backdrop { animation: schleier-hinein var(--bewegung-hinein); }
.blatt-griff {
    width: 44px; height: 4px;
    margin: 10px auto 4px;
    border-radius: var(--radius-rund);
    background: var(--kontur-fein);
}
.blatt-inhalt { padding: 0 var(--abstand) var(--abstand); }
.blatt-titel { font-size: var(--schrift-3); margin: 4px 0 var(--abstand-klein); }
.blatt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.blatt-liste li + li { border-top: 1px solid var(--kontur-fein); }
.blatt-eintrag {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 4px;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-feld);
}
.blatt-eintrag:hover { background: var(--flaeche-3); }
.blatt-eintrag[aria-current] { color: var(--haupt); font-weight: 700; }
.blatt-eintrag .zeichen { width: 22px; height: 22px; color: var(--haupt); }
.blatt-eintrag-text { flex: 1 1 auto; }
.blatt-fuss { margin-top: var(--abstand); padding-top: var(--abstand); border-top: 1px solid var(--kontur-fein); display: flex; flex-direction: column; gap: var(--abstand-klein); }

.dialog {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(30rem, calc(100% - 2 * var(--abstand)));
    height: fit-content;
    max-height: 85dvh;
    padding: var(--abstand);
    border: 1px solid var(--kontur-fein);
    border-radius: var(--radius-gross);
    background: var(--flaeche-1);
    color: var(--text);
    box-shadow: var(--schatten-2);
    overflow: auto;
}
.dialog[open] { animation: dialog-hinein var(--bewegung-hinein); }
.dialog::backdrop { background: rgba(0, 0, 0, .45); }
.dialog h2 { margin-top: 0; font-size: var(--schrift-3); }
.dialog-aktionen { display: flex; flex-wrap: wrap; gap: var(--abstand-klein); margin-top: var(--abstand); }
.dialog-aktionen .knopf { flex: 1 1 auto; }
.dialog-text { color: var(--gedaempft); font-size: var(--schrift-klein); }

@keyframes blatt-hinein { from { transform: translateY(6%); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes dialog-hinein { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes schleier-hinein { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================================
   8. Einblendungen (Toasts)
   ========================================================================================== */
.toasts {
    /* popover="manual": liegt ueber allem, auch ueber einem offenen Dialog.
       Der Platz ist unter der Kopfzeile: Dort verdeckt eine Meldung weder die untere Leiste noch
       die klebende Aktionsleiste eines Formulars. */
    position: fixed;
    inset: auto 0 auto 0;
    top: calc(var(--rand-oben) + var(--hoehe-kopf) + 8px);
    width: min(var(--breite-inhalt), calc(100% - 2 * var(--abstand)));
    margin: 0 auto;
    padding: 0 var(--abstand);
    border: 0;
    background: transparent;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-klein);
    pointer-events: none;
}
.toasts[popover]:not(:popover-open) { display: none; }
.toasts:popover-open { display: flex; }
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-feld);
    background: var(--text);
    color: var(--grund);
    box-shadow: var(--schatten-2);
    font-size: var(--schrift-klein);
    animation: toast-hinein var(--bewegung-hinein);
}
.toast .zeichen { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.toast-text { flex: 1 1 auto; }
.toast-schliessen { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-rund); }
.toast-schliessen:hover { background: rgba(255, 255, 255, .18); }
.toast-erfolg { background: var(--haupt); color: var(--auf-haupt); }
.toast-fehler { background: var(--fehler); color: var(--auf-fehler); }
.toast-warnung { background: var(--zweit-behaelter); color: var(--auf-zweit-behaelter); }
.toast-hinweis { background: var(--text); color: var(--grund); }
.toast[hidden] { display: none; }
@keyframes toast-hinein { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-width: 60rem) {
    .aktionsleiste { bottom: 8px; }
}

/* ==========================================================================================
   9. Fortschritt: Ring und Balken
   ========================================================================================== */
.ring-block { display: flex; align-items: center; gap: var(--abstand); flex-wrap: wrap; }
.ring { width: 132px; height: 132px; flex: 0 0 auto; }
.ring-spur { stroke: var(--flaeche-4); }
.ring-spur, .ring-wert { fill: none; stroke-width: 12; }
.ring-wert { stroke: var(--haupt); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ring-wert-ueber { stroke: var(--fehler); }
.ring-mitte { fill: var(--text); font-size: 30px; font-weight: 600; text-anchor: middle; }
.ring-mitte-klein { fill: var(--gedaempft); font-size: 12px; text-anchor: middle; }
.ring-angaben { flex: 1 1 12rem; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ring-rest { font-size: var(--schrift-3); font-weight: 600; }
.ring-zeile { display: flex; justify-content: space-between; gap: 10px; font-size: var(--schrift-klein); color: var(--gedaempft); }

.balken-reihe { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.balken { display: flex; flex-direction: column; gap: 4px; }
.balken-kopf { display: flex; justify-content: space-between; gap: 10px; font-size: var(--schrift-klein); }
.balken-name { font-weight: 500; }
.balken-wert { color: var(--gedaempft); }
.balken-spur { height: 8px; border-radius: var(--radius-rund); background: var(--flaeche-4); overflow: hidden; }
/* Der Balken ist ein Rechteck in einem SVG - die Breite kommt als Attribut, nicht als Stil. */
.balken-svg { display: block; width: 100%; height: 8px; }
.balken-fuellung { fill: var(--haupt); }
.balken-fuellung-1 { fill: var(--haupt); }
.balken-fuellung-2 { fill: var(--zweit); }
.balken-fuellung-3 { fill: var(--akzent); }
.balken-fuellung-4 { fill: var(--kontur); }

/* ==========================================================================================
   10. Leerer Zustand: nie "leer", sondern ein Startpunkt
   ========================================================================================== */
.leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--abstand-klein);
    padding: var(--abstand-gross) var(--abstand);
}
.leer-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: var(--radius-gross);
    background: var(--haupt-behaelter);
    color: var(--auf-haupt-behaelter);
}
.leer-zeichen .zeichen { width: 32px; height: 32px; }
.leer-titel { font-size: var(--schrift-4); font-weight: 600; margin: 0; }
.leer-text { color: var(--gedaempft); margin: 0; max-width: 30rem; }
.leer-aktion { display: flex; flex-wrap: wrap; gap: var(--abstand-klein); justify-content: center; margin-top: var(--abstand-klein); }

/* Schnellzugriffe der Uebersicht: gleiche Groesse, gleiches Gewicht. */
.schnellwege { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--abstand-klein); }
@media (min-width: 30rem) { .schnellwege { grid-template-columns: repeat(4, 1fr); } }
.schnellweg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    min-height: 76px;
    border: 1px solid var(--kontur-fein);
    border-radius: var(--radius-gross);
    background: var(--flaeche-1);
    color: var(--text);
    text-decoration: none;
    font-size: var(--schrift-klein);
    font-weight: 500;
    transition: background var(--bewegung-hinaus), transform var(--bewegung-hinaus);
}
.schnellweg:hover { background: var(--flaeche-3); }
.schnellweg:active { transform: scale(.98); }
.schnellweg .zeichen { width: 22px; height: 22px; color: var(--haupt); }

/* ==========================================================================================
   11. Zeichen
   ========================================================================================== */
.zeichen { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; vertical-align: middle; }
.zeichen-gross { width: 32px; height: 32px; }
.zeichen-klein { width: 18px; height: 18px; }

/* ==========================================================================================
   12. Bereiche (aeltere Bausteine, bleiben gueltig)
   Die Bereiche stellen ihre Vorlagen spaeter um; bis dahin sehen diese Klassen ordentlich aus.
   ========================================================================================== */
.datenliste { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: .5rem 0; }
.datenliste dt { color: var(--gedaempft); font-size: var(--schrift-klein); }
.datenliste dd { margin: 0; }
.datenliste-zeile { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--kontur-fein); padding-top: 10px; margin-top: 12px; }

.geraeteliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.geraeteliste li { display: flex; flex-direction: column; gap: 4px; border-left: 3px solid var(--kontur-fein); padding-left: 10px; }
.geraet { font-size: var(--schrift-text); word-break: break-word; }

.merkmale { margin: .5rem 0; padding-left: 1.1rem; }
.merkmale li { margin-bottom: .4rem; }

.zutat {
    border: 1px solid var(--kontur-fein);
    border-radius: var(--radius-feld);
    padding: 12px;
    margin: 8px 0;
    background: var(--flaeche-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.zutat-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.zutat-nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--haupt-behaelter);
    color: var(--auf-haupt-behaelter);
    font-size: var(--schrift-klein);
    font-weight: 700;
}
.zutat-weg { min-height: 36px; padding: 6px 12px; font-size: var(--schrift-klein); }

.plan-zelle {
    border: 1px solid var(--kontur-fein);
    border-radius: var(--radius-gross);
    padding: 12px;
    margin: 10px 0;
    background: var(--flaeche-2);
}
.plan-zelle h3 { font-size: var(--schrift-text); margin: 0 0 6px; font-weight: 600; }

/* ==========================================================================================
   13. Wochenraster (Wochenplan)
   Vier Mahlzeiten als Zeilen, sieben Tage als Spalten, erste Spalte als Beschriftung -
   nach dem Vorbild der Android-App (WeekPlanScreen). Das Raster laesst sich waagerecht schieben,
   die Beschriftungsspalte bleibt beim Schieben stehen.
   ========================================================================================== */
.raster-rahmen {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--kontur-fein);
    border-radius: var(--radius-gross);
    background: var(--flaeche-1);
    margin: 0 0 var(--abstand-klein);
}
/* Feste Mindestbreite: Das Raster wird seitlich geschoben, statt die Namen zu zerquetschen. */
table.raster { border-collapse: collapse; min-width: 42rem; }
.raster-titel { text-align: left; font-size: var(--schrift-klein); color: var(--gedaempft); padding: 8px 10px 4px; }
.raster-spalte-label { width: 4.5rem; }   /* feste Breite der Beschriftungsspalte (wie WeekPlanLabelWidth) */
.raster-spalte-tag { width: 5.25rem; }    /* feste Breite je Tag */
.raster th, .raster td { padding: 2px; vertical-align: top; }
.raster-label {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--flaeche-1);
    text-align: left;
    font-size: var(--schrift-fein);
    font-weight: 600;
    line-height: 1.15;
    color: var(--gedaempft);
    vertical-align: middle;
    padding: 4px 6px;
}
.raster-tag {
    display: block;
    min-height: 44px;
    padding: 13px 2px;
    text-align: center;
    font-size: var(--schrift-fein);
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-chip);
    background: var(--flaeche-2);
}
.raster-tag-aktiv { background: var(--haupt-behaelter); color: var(--auf-haupt-behaelter); }
.raster-kcal td { text-align: center; font-size: var(--schrift-fein); color: var(--gedaempft); padding-bottom: 6px; }
.raster-kcal .raster-label { text-align: left; }
.raster-summe td, .raster-summe .raster-label { padding-top: 6px; padding-bottom: 10px; font-weight: 600; color: var(--text); }
.raster-summe td { text-align: center; }
.raster-summe .zelle-menge { display: block; }

/* Eine Zelle: antippbar, mit dem geplanten Eintrag oder einem "+".
   Gefuellte Zellen sind ruhig (Flaeche), leere noch ruhiger - die Rahmenfarbe bleibt der Auswahl. */
.zelle {
    display: block;
    min-height: 44px;
    padding: 4px;
    border-radius: var(--radius-chip);
    background: var(--flaeche-3);
    color: var(--text);
    text-decoration: none;
    text-align: center;
}
.zelle-leer { background: var(--flaeche-2); color: var(--gedaempft); }
.zelle-plus { display: block; font-size: 1rem; line-height: 36px; }
.zelle-eintrag { display: block; margin-bottom: 2px; }
.zelle-name {
    display: block;
    font-size: var(--schrift-fein);
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.zelle-menge { display: block; font-size: var(--schrift-fein); color: var(--gedaempft); }

/* Der geoeffnete Tag: eine Zeile je Mahlzeit (Mahlzeit + Eintraege + Aktion). */
.tag-eintrag { display: block; font-size: var(--schrift-klein); font-weight: 400; color: var(--gedaempft); }

/* Allergen-Hinweis: Zeichen und Text, ueberall gleich (Rezeptliste, Zelle, Raster, Vorschau). */
.allergen {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--warn-flaeche);
    color: var(--warn-text);
    border-radius: var(--radius-chip);
    padding: 2px 8px;
    font-size: var(--schrift-fein);
    font-weight: 600;
    max-width: 100%;
}
.allergen .zeichen { flex: 0 0 auto; }
.allergen-text { overflow-wrap: anywhere; }

.grafik-rahmen { color: var(--haupt); margin: 6px 0; overflow-x: auto; }
.grafik { display: block; min-width: 320px; }

.zubereitung { white-space: normal; }