/* Fittsack — Gestaltung.

   Aufbau: Farben und Maße als Variablen, dann Grundlagen, Layout, Bausteine,
   Seiten, Bewegung, dunkle Fassung. Schrift ist die Systemschrift des
   Geräts - lädt sofort, sieht auf jedem Gerät heimisch aus und braucht
   keine Datei aus dem Netz. */

/* Farben, Rundungen, Schatten und Glas stehen in tokens.css. */

/* ------------------------------------------------------------ Grundlagen */

*, *::before, *::after { box-sizing: border-box; }

/* Kein Zoomen mit zwei Fingern oder Doppeltippen; Wischen bleibt. */
html { -webkit-text-size-adjust: 100%; background: var(--bg); touch-action: pan-x pan-y; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--ueber-nav) + 16px);
  min-height: 100svh;
  --grund-1: var(--mittag-1);
  --grund-2: var(--mittag-2);
}

/* Der Seitengrund ist ein Verlauf von fast Weiß in die Farbe des Bereichs:
   auf Kochen die der Mahlzeit, sonst frischgrün (data-grund, base.html). Er
   steht fest, der Inhalt rollt darüber. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--verlauf-oben) 0%, var(--grund-1) 55%, var(--grund-2) 100%);
}
body[data-grund="fruehstueck"] { --grund-1: var(--fruehstueck-1); --grund-2: var(--fruehstueck-2); }
body[data-grund="abend"]       { --grund-1: var(--abend-1);       --grund-2: var(--abend-2); }
body[data-grund="nachtisch"]   { --grund-1: var(--nachtisch-1);   --grund-2: var(--nachtisch-2); }

/* Glas: nur für das, was über etwas schwebt (GESTALTUNG.md, Formsprache). */
.glas {
  background: var(--glas);
  -webkit-backdrop-filter: var(--glas-unschaerfe);
  backdrop-filter: var(--glas-unschaerfe);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--schatten-hoch);
}

body.schlicht { padding-bottom: 0; }

h1, h2, h3 {
  font-family: var(--schrift-zahl);
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 0 0 .35rem;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: 1.6rem; letter-spacing: -.03em; }
p, li { text-wrap: pretty; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p  { margin: 0 0 .8rem; }
p:last-child { margin-bottom: 0; }
a  { color: inherit; text-decoration: none; }
strong { font-weight: 640; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
  background: var(--flaeche-3);
  padding: .1em .35em;
  border-radius: 6px;
}
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }
[hidden] { display: none !important; }

.klein   { font-size: .86rem; }
.leise   { color: var(--text-2); }
.ganzleise { color: var(--text-3); }
.mittig  { text-align: center; }
.textlink {
  color: var(--primaer);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primaer) 35%, transparent);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primaer) 45%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}

.ikon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -.3em;
}

/* ---------------------------------------------------------------- Layout */

.buehne {
  max-width: var(--inhalt-breite);
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px 24px;
}

.stapel { display: flex; flex-direction: column; gap: 14px; }

.mitte {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 0;
}
.mitte .karte { width: min(100%, 420px); }

/* Leiste unten - die Hauptnavigation auf dem Handy: vier Reiter auf einer
   Glasleiste, die über dem Inhalt schwebt. */
.tabs {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--nav-abstand) + env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: var(--nav-hoehe);
  max-width: 520px; margin-inline: auto;
  border-radius: 26px;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: .64rem;
  font-weight: 650;
  color: var(--text-2);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dauer);
}
.tab .ikon, .tab .pikto {
  width: 22px; height: 22px;
  transition: transform var(--dauer-lang) var(--kurve);
}
.tab.aktiv { color: var(--primaer); }
.tab.aktiv .ikon, .tab.aktiv .pikto { transform: translateY(-1px); }

/* Die Rezeptseite steht für sich: keine Hauptnavigation unten, und die Seite
   lässt sich nicht seitlich verschieben (die Fotoschau rollt weiter selbst). */
body:has(.rezeptseite) { --ueber-nav: calc(env(safe-area-inset-bottom, 0px) + 12px); touch-action: pan-y; }
body:has(.rezeptseite) .tabs { display: none; }
html:has(.rezeptseite), body:has(.rezeptseite) { overflow-x: clip; overscroll-behavior-x: none; }

/* Seitenleiste - erst ab Tablet/Laptop sichtbar. */
.seitenleiste { display: none; }

@media (min-width: 900px) {
  body { padding-bottom: 0; padding-left: var(--leiste-breite); }
  .tabs { display: none; }
  .seitenleiste {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--leiste-breite);
    padding: 22px 14px;
    background: var(--glas);
    -webkit-backdrop-filter: var(--glas-unschaerfe);
    backdrop-filter: var(--glas-unschaerfe);
    border-right: 1px solid var(--glas-rand);
    gap: 4px;
    overflow-y: auto;
  }
  .buehne { padding: 34px 40px 48px; }
  :root { --ueber-nav: 12px; }
  body.schlicht { padding-left: 0; }
  .marke {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 10px 18px;
    font-family: var(--schrift-zahl);
    font-weight: 750; font-size: 1.15rem; letter-spacing: -.02em;
  }
  .marke-zeichen {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: var(--primaer); color: var(--primaer-text);
    border-radius: 12px;
  }
  .marke-zeichen .ikon { width: 20px; height: 20px; }
  .navpunkt {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 12px;
    border-radius: var(--radius-rund);
    font-weight: 600;
    color: var(--text-2);
    transition: background var(--dauer), color var(--dauer);
  }
  .navpunkt .ikon { width: 20px; height: 20px; }
  .navpunkt:hover { background: var(--knopf); color: var(--text); }
  .navpunkt.aktiv { background: var(--knopf); color: var(--primaer); box-shadow: var(--schatten-klein); }
  .seitenleiste-fuss { margin-top: auto; padding: 10px 12px; }
}

/* ------------------------------------------------------------- Seitenkopf */
/* Oben der Umschalter des Reiters (wenn er Ansichten hat), darunter Titel
   und rechts runde Glasknöpfe. Ein Zurück ist ein runder Glasknopf mit ‹. */

.seitenkopf { margin-bottom: 4px; display: flex; flex-direction: column; gap: 8px; }
.seitenkopf-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.seitenkopf-titel { min-width: 0; }
.seitenkopf h1 { margin: 0; }
.seitenkopf-rechts { display: flex; gap: 6px; flex: none; }
.schulterzeile {
  font-size: .74rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primaer);
  margin-bottom: 2px;
}
.zurueck {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  color: var(--text);
  transition: background var(--dauer), color var(--dauer);
}
.zurueck .ikon { width: 20px; height: 20px; }
.kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Rundes Glas für Zeichenknöpfe im Kopf und über Fotos. */
.rundglas {
  flex: none;
  width: 40px; height: 40px;
  display: inline-grid; place-items: center;
  border-radius: 50%; padding: 0;
  color: var(--text);
  cursor: pointer;
}
.rundglas .ikon { width: 19px; height: 19px; }
.rundglas[aria-pressed="true"] { background: var(--primaer); color: var(--primaer-text); border-color: transparent; }

/* Umschalter eines Reiters (Plan | Spontan, Liste | Vorrat | Angebote …):
   eine helle Pille gleitet unter das gewählte Feld. Der Seitenwechsel
   zieht sie über view-transition-name hinüber. */
.ortwahl {
  position: relative;
  display: grid; grid-template-columns: repeat(var(--felder, 3), minmax(0, 1fr));
  align-self: flex-start;
  padding: 3px;
  border-radius: var(--radius-rund);
}
.ortwahl .schieber {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--felder, 3));
  transform: translateX(calc(var(--aktiv, 0) * 100%));
  border-radius: var(--radius-rund);
  background: var(--knopf);
  box-shadow: var(--schatten-klein);
  view-transition-name: umschalter;
}
.ortwahl a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: 30px; padding: 0 12px;
  font-size: .76rem; font-weight: 650;
  color: var(--text-2);
  white-space: nowrap;
  border-radius: var(--radius-rund);
  transition: color var(--dauer) var(--kurve);
}
.ortwahl a .ikon { width: 14px; height: 14px; }
.ortwahl a[aria-current="page"] { color: var(--text); }

/* Reiter innerhalb einer Ansicht: Text, der gewählte dunkel mit grünem
   Strich, der beim Wechsel hinübergleitet (view-transition-name). */
.reiter { display: flex; gap: 18px; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter a {
  position: relative; flex: none;
  padding: 6px 0;
  font-weight: 700; font-size: .92rem;
  color: var(--text-3);
  white-space: nowrap;
  transition: color var(--dauer) var(--kurve);
}
.reiter a[aria-current="page"] { color: var(--text); }
.reiter a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 2px; background: var(--primaer);
  view-transition-name: reiterstrich;
}

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

.karte {
  background: var(--flaeche);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--schatten-kachel), inset 0 0 0 1.5px var(--kachel-rand);
}
.karte > h2:first-child, .karte > h3:first-child { margin-bottom: .55rem; }
.karte.matt {
  background: var(--glas);
  box-shadow: inset 0 0 0 1px var(--glas-rand);
}
.karte.leer { text-align: center; padding: 32px 22px; }
.karte.leer .knopf { margin-top: 14px; }

/* Die Einladung zum Planen: Wer auf einer leeren Planseite landet, will
   genau eine Sache. Deshalb ist nicht der Knopf klickbar, sondern die ganze
   Karte - der Knopf darin sagt nur, was passiert. */
a.karte.planeinladung { padding: 40px 22px 34px; text-decoration: none; color: inherit; }
a.karte.planeinladung h2 { margin: 0 0 .4rem; }
a.karte.planeinladung p { margin: 0 auto; max-width: 30rem; }

.planeinladung-zeichen {
  width: 92px; height: 92px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border-radius: 30px;
  background: var(--primaer-hell);
  color: var(--primaer-dunkel);
}
.planeinladung-zeichen .pikto { width: 46px; height: 46px; }

.knopf.gross { padding: 13px 26px; font-size: 1rem; margin-top: 20px; }
.karte.betont {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primaer-hell) 55%, var(--flaeche)), var(--flaeche));
  box-shadow: var(--schatten-kachel), inset 0 0 0 1.5px color-mix(in srgb, var(--primaer) 40%, transparent);
}

a.karte {
  display: block;
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer);
}
@media (hover: hover) {
  a.karte:hover { transform: translateY(-1px); box-shadow: var(--schatten-hoch); }
}

.karte[data-oeffnet-formular] {
  cursor: pointer;
  transition: transform var(--dauer) var(--kurve), box-shadow var(--dauer);
}
@media (hover: hover) {
  .karte[data-oeffnet-formular]:hover { transform: translateY(-1px); box-shadow: var(--schatten-hoch); }
}

.karte-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: .7rem;
}
.karte-kopf h2, .karte-kopf h3 { margin: 0; }
.karte-kopf .zaehler, .karte-kopf .knopf { flex: none; }

.leer-zeichen {
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 22px;
  background: var(--primaer-hell);
  color: var(--primaer-dunkel);
}
.leer-zeichen .ikon { width: 30px; height: 30px; }

a.zeile-link { display: flex; }
div.zeile-link { display: flex; }
/* Die Einladzeile traegt ihre Knoepfe rechts, statt selbst zu verlinken. */
.einladzeile .knopf.rund { flex: none; }
.zeile-link {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
}
.zeile-link .zeilenzeichen {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--primaer-hell); color: var(--primaer-dunkel);
}
.zeile-link .zeilenzeichen .ikon { width: 20px; height: 20px; }
.zeile-link .zeilentext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zeile-link .gerichtpfeil { color: var(--text-3); }

/* Meldungen */
.meldung {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px;
  border-radius: 16px;
  background: var(--rot-hell);
  color: var(--rot-text);
  font-size: .94rem;
  animation: aufsteigen var(--dauer-lang) var(--kurve);
}
.meldung .ikon, .meldung .pikto { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.meldung.gut { background: var(--primaer-hell); color: var(--primaer-dunkel); }
.meldung.hinweis { background: var(--blau-hell); color: var(--blau-text); }
/* Vorschlag aus der Übersicht (Profil): Das ✕ bleibt in der Ecke; ist es
   eng, rutscht Übernehmen unter den Satz, rechtsbündig. */
.mahlzeiten-vorschlag { flex-wrap: wrap; align-items: center; margin-top: 10px; }
.mahlzeiten-vorschlag > span { flex: 1 1 12rem; }
.mahlzeiten-vorschlag .knopf { margin-left: auto; }

/* Rezeptseite nach dem Kochassistenten: nur noch dass und wann. */
.gekochtfeld {
  display: flex; gap: 14px; align-items: center;
  background: var(--primaer-hell); color: var(--primaer-dunkel);
}
.gekochtfeld .pikto { width: 36px; height: 36px; flex: none; }
.gekochtfeld h2 { margin: 0; color: inherit; }
.gekochtfeld span { font-size: .94rem; }

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

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 16px;
  background: var(--primaer);
  color: var(--primaer-text);
  box-shadow: 0 10px 22px -14px var(--primaer);
  font-weight: 700;
  font-size: .96rem;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dauer) var(--kurve), background var(--dauer),
              box-shadow var(--dauer), opacity var(--dauer);
}
.knopf:hover { background: var(--primaer-dunkel); }
.knopf:disabled { opacity: .5; cursor: default; transform: none; }
.knopf .ikon { width: 20px; height: 20px; }

.knopf.rand, .knopf.leise {
  background: var(--knopf);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.knopf.rand:hover, .knopf.leise:hover { background: var(--flaeche); }
.knopf.zart {
  background: var(--primaer-hell);
  color: var(--primaer-dunkel);
  box-shadow: none;
}
.knopf.zart:hover { background: color-mix(in srgb, var(--primaer) 22%, var(--flaeche)); }
.knopf.warn { background: var(--rot); color: #fff; box-shadow: 0 10px 22px -14px var(--rot); }
/* Ein breiter Knopf hat keinen Platz mehr, in den er wachsen könnte - auf
   schmalen Handys bricht sein Text deshalb um, statt hinauszuragen. */
.knopf.breit { width: 100%; white-space: normal; text-wrap: balance; padding-block: 6px; line-height: 1.2; }
.knopf.breit .ikon { flex: none; }
.knopf.klein-knopf { min-height: 36px; padding: 0 12px; border-radius: 12px; font-size: .84rem; }
.knopf.rund {
  width: 44px; min-height: 44px; padding: 0;
  border-radius: var(--radius-rund);
}
.knopf.laedt { position: relative; color: transparent !important; pointer-events: none; }
.knopf.laedt::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: drehen .8s linear infinite;
}
.knopf.rand.laedt::after, .knopf.leise.laedt::after {
  border-color: var(--linie-stark); border-top-color: var(--text);
}

.knopfpaar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.knopfpaar > form { display: contents; }
.knopfzeile { display: flex; gap: 10px; margin-top: 4px; }
.knopfzeile .knopf { flex: 1; }
.knopfzeile > form { display: contents; }
.knopfzeile .knopf.nur-zeichen { flex: none; width: 48px; padding: 0; }

/* Die Nachfrage nach dem Bearbeiten: was sich auf der Einkaufsliste ändert. */
.listenfrage ul { list-style: disc; padding-left: 1.2em; margin: 4px 0 12px; }
.listenfrage li + li { margin-top: 2px; }

.aktionsleiste {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
}
.aktionsleiste .knopf { flex-direction: column; gap: 4px; padding: 8px 4px; min-height: 60px; font-size: .78rem; }
.aktionsleiste form { display: contents; }

/* Speichern-Leiste, die unten kleben bleibt. */
.speicherleiste {
  position: sticky;
  bottom: calc(var(--ueber-nav) + 4px);
  z-index: 10;
  padding: 8px 0;
  margin-top: 4px;
}
.speicherleiste .knopf { box-shadow: var(--schatten-hoch); }
.speicherleiste.schlaeft { display: none; }
/* Kochen: über die ganze Breite unten in der Daumenzone, hell und frisch
   (Minz- bis Limettengrün), die Mütze vor dem Wort. */
.kochknopf {
  width: 100%; min-height: 58px; padding: 0 20px;
  border-radius: var(--radius-rund);
  background: linear-gradient(90deg, var(--kochen-1), var(--kochen-2));
  color: var(--kochen-text);
  box-shadow: var(--kochen-schatten), inset 0 0 0 1.5px var(--kochen-rand);
  font-family: var(--schrift-zahl); font-size: 1.1rem; font-weight: 750;
}
.kochknopf:hover { background: linear-gradient(90deg, var(--kochen-1), var(--kochen-2)); }
.kochknopf .ikon { width: 26px; height: 26px; }
@media (min-width: 900px) { .speicherleiste { bottom: 14px; } }

/* ------------------------------------------------------------------ Chips */

.chipreihe { display: flex; flex-wrap: wrap; gap: 8px; }
/* Statt umzubrechen in einer Zeile liegen lassen und seitlich wischen -
   für lange Auswahlen, bei denen Umbrechen nur in die Höhe geht. */
.chipreihe.leiste {
  flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px; padding: 0 16px 2px;
}
/* Bis an den Rand, aber nicht darüber: Die Seite hat 16 px Rand, ein Blatt 18 px. */
.blattinhalt .chipreihe.leiste { margin: 0 -18px; padding: 0 18px 2px; }
.chipreihe.leiste::-webkit-scrollbar { display: none; }
.chipreihe.leiste .chip { flex: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-rund);
  background: var(--knopf);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--linie);
  font-weight: 600; font-size: .86rem;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dauer), border-color var(--dauer), color var(--dauer),
              transform var(--dauer) var(--kurve);
}
.chip[aria-pressed="true"] {
  background: var(--primaer-hell);
  color: var(--primaer);
  box-shadow: inset 0 0 0 1.5px var(--primaer);
}
.chip.klein-chip { min-height: 34px; padding: 0 12px; font-size: .82rem; }
.chip.chip-plus { color: var(--text-2); box-shadow: inset 0 0 0 1.5px var(--linie-stark); background: transparent; }
.chip.chip-icon { width: 40px; padding: 0; justify-content: center; }
.chip.chip-icon.klein-chip { width: 36px; }
/* Zeichenchips (Stilwahl): eckiger, gewählt satt gefüllt. */
.chip.chip-icon { border-radius: 14px; }
.chip.chip-icon[aria-pressed="true"] { background: var(--primaer); color: var(--primaer-text); box-shadow: none; }
/* Spontan: Die dritte Stufe des Kühlschranks, „nur aus dem Vorrat" - kräftiger
   als „einbeziehen", mit Ring und einem Punkt in der Ecke. Der Punkt sitzt
   innen, weil der Chip Überstehendes abschneidet. */
.vorratsknopf { position: relative; }
/* Rezeptseite: unter „Noch feiner mit …" die Extras und der Wagen dazu. */
.extraszeile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 10px;
}
/* Rezeptseite: die Varianten am Ende und der Hinweis über den Zutaten,
   wenn eine gewählt ist. */
.variantenliste > li > form { flex: none; }
.variantehinweis {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 0 12px; padding: 8px 10px;
  border-radius: var(--radius-klein); background: var(--akzent-hell);
}
.variantehinweis .ikon { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.vorratsknopf[data-stufe="nur"] {
  background: var(--primaer);
  color: var(--primaer-text);
  box-shadow: 0 0 0 3px var(--primaer-hell);
}
.vorratsknopf[data-stufe="nur"]::after {
  content: "";
  position: absolute; top: 3px; right: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--akzent);
}
/* Spontan: Ortwahl und Vorratszeichen teilen sich die Kopfzeile, darunter
   stehen Portionen und Ernährungsstil mittig nebeneinander. */
/* Ortwahl, Vorratszeichen und Supermarkt teilen sich die Kopfzeile. Auf
   dem Handy ist dafür zu wenig Platz - dann rutscht der Markt in eine
   zweite Zeile, statt aus der Karte zu ragen. */
.kopfwerkzeuge {
  display: flex; align-items: center; flex-wrap: wrap;
  justify-content: flex-end; gap: 8px;
}
/* Bricht die Zeile um, soll das Zeichen links nicht zwischen den beiden
   Zeilen schweben, sondern neben der ersten stehen. */
.karte-kopf:has(> .kopfwerkzeuge) { align-items: flex-start; }
.karte-kopf:has(> .kopfwerkzeuge) > h2 { min-height: 36px; display: flex; align-items: center; }
/* Der Supermarkt steht oben neben Zuhause/Büro - dafür ist das Feld
   kleiner als ein normales Auswahlfeld und nur so breit wie nötig. */
.kopfwerkzeuge .marktwahl {
  width: auto; min-width: 0; max-width: 122px;
  min-height: 36px; height: 36px; padding: 0 26px 0 10px;
  font-size: 14px; background-position: right 8px center;
}
.wahlreihe, .einstellungsreihe { margin-top: 14px; }
.chipreihe.kuechenreihe { margin-top: 14px; }
.lustfeld { margin-top: 12px; }
.wahlspalte { text-align: center; }
/* Die vier Zeichen der Stilwahl in einer Reihe: dafür bekommt die Spalte
   die Breite, die der Portionenzähler übrig lässt, und die Zeichen sind
   34px statt 36px. Auf sehr schmalen Geräten bricht die Reihe um. */
.raster.zwei.wahlreihe { grid-template-columns: auto 1fr; column-gap: 8px; }
.stilwahl { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.stilwahl .chip.chip-icon.klein-chip { width: 34px; min-height: 34px; }
/* Der Aufwand-Regler bei Spontan: oben Name und Bedeutung der Stufe,
   darunter der Regler über die volle Breite. */
.aufwandwahl { margin-top: 14px; }
.aufwandkopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.aufwandwahl input[type="range"] {
  display: block; width: 100%; margin: 2px 0 0;
  accent-color: var(--primaer);
}
.aufwandwahl input[type="range"]:focus { box-shadow: none; }
.aufwandwahl input[type="range"]:focus-visible { outline: 2px solid var(--primaer); outline-offset: 3px; }
.eigene-eingabe { display: inline-flex; gap: 6px; align-items: center; width: 100%; }
.eigene-eingabe input { flex: 1; }
/* In einer Küchenreihe liegt das Feld mit in der Zeile (die wischt) und
   nimmt nur so viel Platz wie nötig. */
.chipreihe.leiste .eigene-eingabe.kuecheneingabe { flex: none; width: 260px; }

.marke-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-rund);
  font-size: .76rem; font-weight: 650; letter-spacing: .01em;
  background: var(--flaeche-3); color: var(--text-2);
  white-space: nowrap;
}
.marke-chip .ikon { width: 14px; height: 14px; }
.marke-chip.gruen { background: var(--primaer-hell); color: var(--primaer-dunkel); }
.marke-chip.gelb  { background: var(--akzent-hell); color: var(--gelb); }
.marke-chip.rot   { background: var(--rot-hell); color: var(--rot-text); }
.marke-chip.blau  { background: var(--blau-hell); color: var(--blau-text); }

/* ------------------------------------------------------------- Formulare */

.feld { display: block; margin-bottom: 14px; }
.feld:last-child { margin-bottom: 0; }
.beschriftung {
  display: block;
  font-size: .7rem; font-weight: 750;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.hilfe { display: block; font-size: .8rem; color: var(--text-3); margin: -3px 0 6px; }

input[type="text"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--radius-klein);
  background: var(--knopf);
  box-shadow: inset 0 0 0 1px var(--linie-stark);
  color: var(--text);
  font: inherit;
  font-size: 16px;               /* unter 16px zoomt iOS beim Antippen hinein */
  transition: border-color var(--dauer), box-shadow var(--dauer);
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--primaer);
}
input::placeholder { color: var(--text-3); }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23938e84' 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;
  padding-right: 40px;
}
input[type="file"] { font-size: .92rem; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600;
  padding: 8px 14px; margin-right: 10px;
  border: 0; border-radius: var(--radius-klein);
  background: var(--flaeche-3); color: var(--text);
}

.raster.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.suchfeld { position: relative; }
.suchfeld .ikon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); width: 20px; height: 20px;
}
.suchfeld input { padding-left: 42px; }

/* Zähler − 2 + */
.zaehler {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px;
  border-radius: var(--radius-rund);
  background: var(--knopf);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.zaehler button, .zaehler .zaehlerknopf {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: transparent;
  display: grid; place-items: center;
  cursor: pointer; color: var(--text);
  transition: background var(--dauer);
}
.zaehler button:hover, .zaehler .zaehlerknopf:hover { background: var(--flaeche-3); }
.zaehler button:active { background: var(--linie); }
.zaehler button .ikon, .zaehler .zaehlerknopf .ikon { width: 20px; height: 20px; }
.zaehler output {
  min-width: 40px; text-align: center;
  font-family: var(--schrift-zahl); font-weight: 700; font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
.zaehler output.mit-prozent { min-width: 64px; }
.zaehler output.mit-prozent::after { content: " %"; }
.zaehler.klein-zaehler button, .zaehler.klein-zaehler .zaehlerknopf { width: 34px; height: 34px; }
.zaehler.klein-zaehler output { font-size: 1.05rem; min-width: 32px; }

/* Schalter */
.schalter {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 0;
  cursor: pointer;
}
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter .schaltertext { display: flex; flex-direction: column; }
.schalter .schalterknopf {
  flex: none;
  width: 50px; height: 30px;
  border-radius: var(--radius-rund);
  background: var(--linie-stark);
  position: relative;
  transition: background var(--dauer-lang);
}
.schalter .schalterknopf::after {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform var(--dauer-lang) var(--kurve);
}
.schalter input:checked + .schalterknopf { background: var(--primaer); }
.schalter input:checked + .schalterknopf::after { transform: translateX(20px); }
.schalter input:focus-visible + .schalterknopf { outline: 3px solid color-mix(in srgb, var(--primaer) 45%, transparent); }

/* Haken (Einkauf, Angebote, Schritte) */
.hakenzeile {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 4px;
  cursor: pointer;
  border-radius: var(--radius-klein);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--dauer);
}
.hakenzeile:active { background: var(--flaeche-2); }
.hakenzeile input { position: absolute; opacity: 0; width: 0; height: 0; }
.haken {
  flex: none;
  width: 26px; height: 26px;
  border: 2px solid var(--linie-stark);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  transition: background var(--dauer), border-color var(--dauer), transform var(--dauer) var(--kurve);
}
.haken .ikon { width: 16px; height: 16px; stroke-width: 3; opacity: 0; transform: scale(.4); transition: opacity var(--dauer), transform var(--dauer-lang) var(--kurve); }
.hakenzeile input:checked ~ .haken { background: var(--primaer); border-color: var(--primaer); }
.hakenzeile input:checked ~ .haken .ikon { opacity: 1; transform: scale(1); }
.hakenzeile input:focus-visible ~ .haken { outline: 3px solid color-mix(in srgb, var(--primaer) 45%, transparent); }
.hakentext { flex: 1; min-width: 0; display: flex; flex-direction: column; transition: opacity var(--dauer); }
.hakenzeile.erledigt .hakentext { opacity: .5; }
.hakenzeile.erledigt .hakentext strong { text-decoration: line-through; }
/* Das Bildchen vor einer Zutat der Einkaufsliste. Die Zeile rückt dafür
   enger zusammen, damit dem Namen auf dem Handy nicht zu viel Breite fehlt. */
.einkaufszeile { gap: 10px; }
.zutatbild {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid; place-items: center;
  transition: opacity var(--dauer);
}
.zutatbild .pikto { width: 20px; height: 20px; }
.hakenzeile.erledigt .zutatbild { opacity: .5; }
.hakenpreis {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  font-weight: 600; color: var(--text-2);
}

/* ------------------------------------------------------------------ Listen */

.liste > li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--linie);
}
.liste > li:first-child { border-top: 0; padding-top: 0; }
.liste > li:last-child { padding-bottom: 0; }
.liste > li > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.liste > li > strong { flex: none; font-variant-numeric: tabular-nums; }
.liste.klein > li { padding: 8px 0; }
.liste > li.mit-knoepfen { flex-wrap: wrap; }
.liste > li.mit-knoepfen > span:first-child { flex: 1 1 150px; }
.liste > li.mit-knoepfen .knopfpaar, .liste > li.mit-knoepfen .zuordnungsform { flex: none; margin-left: auto; }

.abschnitt-titel {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 2px 6px;
}
.abschnitt-titel h2 { margin: 0; font-size: 1.05rem; }

/* Kacheln mit Zahlen */
.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kacheln > .kachel {
  background: var(--flaeche-2);
  border-radius: var(--radius-klein);
  padding: 10px 12px;
  display: flex; flex-direction: column;
}
.kacheln > .kachel .wert { font-family: var(--schrift-zahl); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.kacheln > .kachel .name { font-size: .76rem; color: var(--text-3); }

/* Balken */
.balken {
  height: 8px;
  border-radius: var(--radius-rund);
  background: var(--flaeche-3);
  overflow: hidden;
}
.balken i {
  display: block; height: 100%;
  background: var(--primaer);
  border-radius: inherit;
  transition: width var(--dauer-zeichnen) var(--kurve);
}
.balken-liste { display: flex; flex-direction: column; gap: 10px; }
.balken-zeile.drueber .balken i { background: var(--rot); }
.balken-kopf { display: flex; justify-content: space-between; font-size: .9rem; margin-bottom: 4px; }
.balken-name { font-weight: 600; }
.balken-zahl { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
/* Ein Balken laesst sich aufklappen: darunter steht, welche Zutat wie viel
   beigesteuert hat. */
details.balken-zeile > summary { cursor: pointer; list-style: none; }
details.balken-zeile > summary::-webkit-details-marker { display: none; }
.balken-pfeil { color: var(--text-3); display: inline-flex; transition: transform var(--dauer-lang) var(--kurve); }
.balken-pfeil .ikon { width: 15px; height: 15px; }
details.balken-zeile[open] .balken-pfeil { transform: rotate(90deg); }
.beitragsliste { list-style: none; margin: 8px 0 2px; padding: 0 0 0 2px; font-size: .86rem; }
.beitragsliste li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--linie);
}
.beitragsliste li:last-child { border-bottom: 0; }
.beitragsliste strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Die Reste nach dem Kochen: eine Karte, je Zutat Foto, Name und Zähler
   (Mockup „Was ist noch da?", Darstellung A). Die Zahl im Zähler ist das
   Feld selbst; bei 0 steht „aufgebraucht" in Rot und das Foto tritt zurück. */
.restliste { list-style: none; margin: 0; padding: 4px 14px; }
.restzeile { display: flex; align-items: center; gap: 12px; padding: 11px 0; }
.restzeile + .restzeile { border-top: 1px solid var(--linie); }
.restbild {
  flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  display: grid; place-items: center; transition: opacity var(--dauer);
}
.restbild .pikto { width: 24px; height: 24px; }
.restzeile .zeilentext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.restzeile .zeilentext strong { font-size: .98rem; line-height: 1.2; }
.restzeile .zeilentext .klein { font-weight: 650; font-variant-numeric: tabular-nums; }
.restzeile.leer .restbild { opacity: .5; }
.restzeile.leer [data-restwort] { color: var(--rot); }
.restzaehler { flex: none; }
.restzaehler input {
  width: 64px; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  text-align: center; -moz-appearance: textfield; appearance: textfield;
  font-family: var(--schrift-zahl); font-weight: 700; font-size: 1.1rem;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.restzaehler input::-webkit-outer-spin-button, .restzaehler input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.restzaehler input:focus { outline: none; }
.restzaehler:focus-within { box-shadow: inset 0 0 0 2px var(--primaer); }
/* Einkauf per Foto: dieselbe Zeile, mit einem Haken statt des Bildes und
   einem schmaleren Feld - sonst bliebe dem Namen auf dem Handy kaum Breite.
   Was nicht mit in den Vorrat soll, tritt zurück. */
.fotoposten { gap: 10px; }
.fotohaken { flex: none; padding: 6px 0; gap: 0; }
.fotoposten .restzaehler input { width: 52px; }
.fotoposten .zeilentext, .fotoposten .restzaehler { transition: opacity var(--dauer); }
.fotoposten:has(.fotohaken input:not(:checked)) :is(.zeilentext, .restzaehler) { opacity: .45; }
/* Zutat wählen für einen Posten, den das Modell keiner zuordnen konnte. */
.fotoposten .fotozutat { margin-top: 6px; min-height: 36px; padding: 6px 8px; }
.fotoposten .vorschlagsliste { margin: 4px 0 0; }

/* Die große Kalorienanzeige oben im Ich-Bereich. */
.tagesring {
  display: flex; align-items: center; gap: 18px;
}
.ring {
  width: 96px; height: 96px; flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--ring-farbe, var(--primaer)) calc(var(--anteil, 0) * 1%), var(--flaeche-3) 0);
  display: grid; place-items: center;
}
.ring::before {
  content: "";
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--flaeche);
  grid-area: 1 / 1;
}
.ring .ringzahl {
  grid-area: 1 / 1;
  text-align: center;
  font-family: var(--schrift-zahl);
  font-weight: 700; font-size: 1.15rem; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ring .ringzahl small { display: block; font-size: .68rem; font-weight: 600; color: var(--text-3); }
.tagesring.drueber .ring { --ring-farbe: var(--rot); }

/* --------------------------------------------------------------- Gerichte */

/* Die Gerichtkachel: das Foto oben trägt sie, darunter Titel und Werte.
   Zwei Formen - .bild breit für Plan, Spontan und Haushalt, .raster
   quadratisch für zwei nebeneinander (Kochbuch, Verlauf, Ich). Die
   Rundknöpfe liegen unten rechts aufs Bild, wie auf der Rezeptseite. */
.gerichtkarte {
  position: relative;
  background: var(--flaeche);
  border: 1px solid color-mix(in srgb, var(--linie) 70%, transparent);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--schatten);
}
.gerichtkarte.versteckt { display: none; }
.gerichtkarte-link {
  display: flex; flex-direction: column;
  color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.gerichtkarte-bild {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: var(--text-2);
}
.gerichtkarte.raster .gerichtkarte-bild { aspect-ratio: 1; }
.gerichtfoto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dauer-lang) var(--kurve);
}
/* Ein Beispielbild ist klar zu sehen, aber etwas zurückgenommen - ein
   eigenes Foto bleibt so erkennbar das kräftigere. */
.gerichtfoto.beispiel { filter: saturate(.72) brightness(1.03); }
@media (hover: hover) {
  .gerichtkarte-link:hover .gerichtfoto { transform: scale(1.03); }
}
/* Dampf über warmen Gerichten: mittig über dem Teller, er fängt keinen
   Tipp ab. Die Bewegung steht in bewegung.css. */
.dampfschwaden {
  position: absolute; left: 50%; bottom: 48%;
  width: 34%; max-width: 170px; height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  fill: none; stroke: #fff;
  stroke-linecap: round; stroke-linejoin: round;
}
.dampfschwaden .schwade-schleier { stroke-width: 7; stroke-opacity: .28; }
.dampfschwaden .schwade-kern { stroke-width: 2.6; stroke-opacity: .75; }
.gerichtkarte.raster .dampfschwaden { width: 38%; }
.gerichtkarte-zeichen { display: grid; place-items: center; }
.gerichtkarte-zeichen .pikto { width: 44px; height: 44px; }
.gerichtkarte.raster .gerichtkarte-zeichen .pikto { width: 40px; height: 40px; }
/* Oben links aufs Bild: Mahlzeit, „Alles da", die Bewertung. */
.gerichtmarke {
  position: absolute; left: 10px; top: 10px;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: var(--radius-rund);
  background: color-mix(in srgb, var(--flaeche) 90%, transparent);
  color: var(--text);
  font-size: .74rem; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: var(--schatten);
}
.gerichtmarke.gut { background: var(--primaer); color: var(--primaer-text); }
.gerichtmarke.fehlt { background: var(--akzent); color: #241503; }
.gerichtkarte.raster .gerichtmarke { left: 8px; top: 8px; max-width: calc(100% - 16px); }
.gerichtkarte-text { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 12px; }
.gerichtkarte-text strong {
  display: flex; align-items: center; gap: 6px;
  font-size: 1.02rem; font-weight: 650; line-height: 1.3;
}
.gerichtkarte.raster .gerichtkarte-text { padding: 8px 10px 10px; gap: 3px; }
.gerichtkarte.raster .gerichtkarte-text strong { font-size: .93rem; line-height: 1.25; }
/* Werte als Zeichen und Zahl statt einer Kette mit Punkten. */
.werte {
  display: flex; flex-wrap: wrap; gap: 2px 12px;
  font-size: .82rem; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.werte > span { display: inline-flex; align-items: center; gap: 4px; }
.werte .ikon { width: 14px; height: 14px; color: var(--text-3); }
.gerichtkarte.raster .werte { font-size: .76rem; gap: 1px 8px; }
/* Eine Fläche so groß wie das Bild legt die Knöpfe in dessen Ecke unten
   rechts - sie reicht selbst keinen Tipp durch, nur die Knöpfe. */
.gerichtkarte-knoepfe {
  position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: 16 / 9;
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px;
  padding: 10px;
  pointer-events: none;
}
.gerichtkarte.raster .gerichtkarte-knoepfe { aspect-ratio: 1; padding: 8px; gap: 6px; }
.gerichtkarte-knoepfe form { pointer-events: auto; }
/* Unter der Schrift statt aufs Bild (Verlauf): eine eigene Zeile am Fuß
   der Kachel, in allen Kacheln einer Reihe auf gleicher Höhe. Löschen
   links, Wieder-einkaufen in der rechten Ecke. */
.gerichtkarte.knoepfe-unten { display: flex; flex-direction: column; }
.gerichtkarte.knoepfe-unten .gerichtkarte-link { flex: 1; }
.gerichtkarte.knoepfe-unten .gerichtkarte-knoepfe {
  position: static; aspect-ratio: auto;
  justify-content: space-between;
  padding: 0 10px 10px;
  pointer-events: auto;
}
.gerichtkarte.knoepfe-unten .rundknopf { background: var(--flaeche-2); box-shadow: none; }
.gerichtkarte.knoepfe-unten .rundknopf:hover { background: var(--flaeche-3); }
.rundknopf {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--flaeche) 90%, transparent);
  color: var(--text);
  box-shadow: var(--schatten-hoch);
  display: grid; place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rundknopf .ikon { width: 19px; height: 19px; }
.rundknopf:hover { background: var(--flaeche); }
.rundknopf.an { background: var(--primaer); color: var(--primaer-text); }
.rundknopf:disabled { opacity: .5; cursor: default; }
.gerichtkarte.raster .rundknopf { width: 36px; height: 36px; }
.gerichtkarte.raster .rundknopf .ikon { width: 17px; height: 17px; }

.ton-0 { background: var(--ton-0); } .ton-1 { background: var(--ton-1); }
.ton-2 { background: var(--ton-2); } .ton-3 { background: var(--ton-3); }
.ton-4 { background: var(--ton-4); } .ton-5 { background: var(--ton-5); }
.restestern { color: var(--akzent); display: inline-flex; }
.restestern .ikon { width: 16px; height: 16px; }

/* Zwei Kacheln nebeneinander, auf breitem Schirm drei. */
.kachelraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) {
  .kachelraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Kochbuch: Gruppen, die zugeklappt ihre erste Zeile zeigen. Das <details>
   ist nur der Schalter; die Kacheln stehen daneben, damit die erste Zeile
   auch zu sichtbar bleibt. Solange gesucht oder gefiltert wird (.sucht),
   zeigt jede Gruppe alle Treffer. */
.kochbuch { gap: 6px; }
.kochbuchgruppe > .gruppenkopf > summary { padding: 10px 2px; }
.kochbuchgruppe > .gruppenkopf > summary .abschnittzeichen { width: 34px; height: 34px; }
.gruppemehr { display: flex; width: fit-content; margin: 10px auto 2px; }
.kochbuchgruppe > .gruppenkopf[open] ~ .gruppemehr,
.kochbuch.sucht .gruppemehr,
.kochbuch.sucht .gruppenkopf .pfeil { display: none; }
/* Wo es nichts aufzuklappen gibt, ist die Überschrift nur Überschrift. */
.kochbuchgruppe:is([data-anzahl="1"], [data-anzahl="2"]) .gruppemehr,
.kochbuchgruppe:is([data-anzahl="1"], [data-anzahl="2"]) .gruppenkopf .pfeil { display: none; }
.kochbuchgruppe:is([data-anzahl="1"], [data-anzahl="2"]) .gruppenkopf > summary { pointer-events: none; }
@media (max-width: 559.98px) {
  .kochbuch:not(.sucht) .gruppenkopf:not([open]) ~ .rezeptliste > .gerichtkarte:nth-child(n+3) { display: none; }
  .kochbuchgruppe > .gruppenkopf[open] ~ .rezeptliste > .gerichtkarte:nth-child(n+3) { animation: aufsteigen var(--dauer-lang) var(--kurve) both; }
}
@media (min-width: 560px) {
  .kochbuch:not(.sucht) .gruppenkopf:not([open]) ~ .rezeptliste > .gerichtkarte:nth-child(n+4) { display: none; }
  .kochbuchgruppe > .gruppenkopf[open] ~ .rezeptliste > .gerichtkarte:nth-child(n+4) { animation: aufsteigen var(--dauer-lang) var(--kurve) both; }
  .kochbuchgruppe[data-anzahl="3"] .gruppemehr,
  .kochbuchgruppe[data-anzahl="3"] .gruppenkopf .pfeil { display: none; }
  .kochbuchgruppe[data-anzahl="3"] .gruppenkopf > summary { pointer-events: none; }
}

/* Plan: die Tage als Bildreiter (GESTALTUNG.md, Plan). Jede Karte trägt
   Wochentag, Datum und rund das Abendessen; die gewählte steht hell. Die
   Reihe läuft seitlich durch alle Tage. */
.tagstreifen {
  display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
  margin: -6px -4px -8px; padding: 6px 4px 8px;
  touch-action: pan-x;
}
.tagstreifen::-webkit-scrollbar { display: none; }
.tagkarte {
  position: relative; flex: none;
  width: 48px; padding: 6px 0 7px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  border: 0; border-radius: 18px; background: transparent;
  color: var(--text-2); font: inherit;
  cursor: pointer;
  transition: background var(--dauer) var(--kurve), box-shadow var(--dauer) var(--kurve), opacity var(--dauer) var(--kurve);
}
.tk-name { font-size: .6rem; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.tk-tag {
  font-family: var(--schrift-zahl); font-size: 1.05rem; font-weight: 750; line-height: 1.15;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.tk-bild {
  width: 30px; height: 30px; margin-top: 3px;
  border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ton, var(--flaeche-3)) var(--ton-mix), var(--flaeche));
  box-shadow: inset 0 0 0 1px var(--linie);
}
.tk-bild[data-ton="gruen"] { --ton: #d4efd9; } .tk-bild[data-ton="gelb"] { --ton: #fbe7b5; }
.tk-bild[data-ton="blau"] { --ton: #dbe6fb; } .tk-bild[data-ton="rosa"] { --ton: #f9d9e4; }
.tk-bild[data-ton="sand"] { --ton: #f1e5c6; } .tk-bild[data-ton="pfirsich"] { --ton: #fbdfcc; }
.tk-bild img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: var(--foto-mischung); }
.tk-bild.leer, .tagkarte.tag-frei .tk-bild { background: transparent; box-shadow: none; border: 1.5px dashed var(--linie-stark); }
.tagkarte.tag-frei .tk-bild img { display: none; }
.tagkarte.an { background: var(--knopf); box-shadow: var(--schatten-klein); color: var(--text); }
.tagkarte.heute .tk-tag { color: var(--primaer); }
.tagkarte.tag-frei:not(.an) { opacity: .6; }
/* Punkt oben rechts: blau Büro, gelb Cheatday. */
.tagkarte.tag-buero::after, .tagkarte.tag-cheatday::after {
  content: ""; position: absolute; top: 7px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
}
.tagkarte.tag-buero::after { background: var(--blau); }
.tagkarte.tag-cheatday::after { background: var(--gelb); }

/* Je Tag: rechts die Kalorien (am Cheatday die gelbe Marke), darunter die
   Box, darunter, was für morgen vorzubereiten ist. */
.tagbox { display: flex; flex-direction: column; gap: 10px; }
.tagesinfo {
  display: flex; justify-content: flex-end; align-items: center;
  min-height: 22px; margin: -4px 6px -2px;
  font-size: .78rem; font-weight: 650; color: var(--text-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tagesinfo:empty { display: none; }
.vortag { align-items: center; }
.vortag strong { font-weight: 700; }
.hinweiszeile { align-items: center; padding: 6px 6px 6px 12px; }
.hinweiszeile > span { flex: 1; min-width: 0; }

/* Zwei Mahlzeiten: die kleine Kachel nimmt die ganze Breite. Mehr als drei
   rücken in weitere Reihen. */
.bento { grid-auto-rows: 176px; }
.bento.zwei > :nth-child(2) { grid-column: 1 / -1; }

/* Im Plan nennt jede Kachel ihre Mahlzeit: groß im Glasschild über dem
   Titel, klein als Pille oben links. Mittags am Bürotag blau mit Koffer,
   gekocht grün mit Haken. */
.platzname {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 2px;
  font-size: .64rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap;
}
.platzname .ikon { width: 12px; height: 12px; }
.platzname.buero { color: var(--blau); }
.platzname.gekocht { color: var(--primaer); }
.kachel > .platzname {
  position: absolute; z-index: 1; top: 12px; left: 14px;
  padding: 3px 8px; border-radius: var(--radius-rund);
  background: var(--knopf);
}
.kachel > .platzname.gekocht { background: var(--primaer); color: var(--primaer-text); }
/* Der Reste-Stern: braucht keine eigene Packung. */
.kachel .restestern {
  position: absolute; z-index: 1; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--knopf); color: var(--primaer);
  box-shadow: var(--schatten-klein);
}
.kachel .restestern .ikon { width: 15px; height: 15px; }

/* Der Entwurf: eine Glasleiste über der Navigation, links verwerfen,
   rechts übernehmen. */
.entscheid {
  position: fixed; z-index: 47;
  left: 14px; right: 14px; margin-inline: auto; max-width: 520px;
  bottom: calc(var(--ueber-nav) + 2px);
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 22px;
}
.entscheid > form { display: contents; }
.entscheid .knopf:not(.nur-zeichen) { flex: 1; }
.entscheid .knopf.nur-zeichen { flex: none; width: 46px; padding: 0; }
body:has(.entscheid) { padding-bottom: calc(var(--ueber-nav) + 90px); }
body:has(.entscheid) .toast { bottom: calc(var(--ueber-nav) + 76px); }
body:has(.entscheid) .rueckmeldung-knopf, body:has(.entscheid) .auftragsleiste { bottom: calc(var(--ueber-nav) + 74px); }
@media (min-width: 900px) {
  .entscheid { left: calc(var(--leiste-breite) + 16px); }
}

/* „Woche planen": je Tag ein Chip, jeder Tipp schaltet weiter - zu Hause
   grün, Büro blau, Cheatday gelb, frei blass. */
.woche-planen { gap: 16px; }
.feldblock { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.einst-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.einst-zeile .schalter { flex: 1; min-width: 12rem; padding: 6px 0; }
.tagwahl { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.tagchip {
  height: 58px; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; border-radius: 14px;
  font: inherit; font-size: .68rem; font-weight: 700;
  background: var(--primaer-hell); color: var(--primaer);
  cursor: pointer;
  transition: background var(--dauer) var(--kurve), color var(--dauer) var(--kurve);
}
.tagchip small { font-size: .6rem; font-weight: 650; opacity: .75; }
.tc-zeichen { display: grid; height: 14px; }
.tc-zeichen .ikon { grid-area: 1 / 1; width: 14px; height: 14px; opacity: 0; }
.tagchip[data-art="buero"] { background: var(--blau-hell); color: var(--blau); }
.tagchip[data-art="buero"] .tc-zeichen .ikon[data-ikon="briefcase"] { opacity: 1; }
.tagchip[data-art="cheat"] { background: var(--gelb-hell); color: var(--gelb); }
.tagchip[data-art="cheat"] .tc-zeichen .ikon[data-ikon="party-popper"] { opacity: 1; }
.tagchip[data-art="frei"] { background: var(--knopf); color: var(--text-3); box-shadow: inset 0 0 0 1px var(--linie); }
.tagchip[data-art="frei"] .tc-zeichen .ikon[data-ikon="moon"] { opacity: 1; }
#tage-zusammenfassung:empty { display: none; }
#tage-zusammenfassung { margin: 6px 0 0; color: var(--rot); }

/* Die Woche entsteht: je Tag eine Glaskachel, zwei nebeneinander. */
.kachelbau:has(> .wartekacheln[data-art="plan"]) .kachelbau-kopf h2 { display: none; }
.kachelbau .wartekacheln[data-art="plan"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kachelbau .wartekacheln[data-art="plan"] .wartekachel {
  position: relative; overflow: hidden;
  border: 0; border-radius: var(--radius-kachel-klein);
  background: var(--glas);
  box-shadow: inset 0 0 0 1.5px var(--kachel-rand);
}
.kachelbau .wartekacheln[data-art="plan"] .wartekachel[data-zustand="leer"]::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--schimmer) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: schimmern 1.1s var(--kurve) infinite;
}

.behaltenzeile {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--linie);
  cursor: pointer;
}
.behaltenzeile:first-of-type { border-top: 0; }
.behaltenzeile > span { display: flex; flex-direction: column; }

.schrittzahl {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: var(--primaer); color: #fff;
  font-size: .8rem; font-weight: 700;
  margin-right: 8px;
}

/* Mahlzeit-Einstellungen */
.mahlzeit-zeile { padding: 12px 0; border-top: 1px solid var(--linie); }
.mahlzeit-zeile:first-of-type { border-top: 0; padding-top: 4px; }
.mahlzeit-name { font-weight: 650; margin-bottom: 8px; }
.mahlzeit-achse { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.achsen-name { font-size: .8rem; font-weight: 600; color: var(--text-2); }
@media (min-width: 480px) {
  .mahlzeit-achse { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; }
}

/* ------------------------------------------------------------- Bento-Box */
/* Was gleichrangig nebeneinandersteht (die Vorschläge einer Mahlzeit, die
   Gerichte eines Tages), liegt in einer Box: eine große Kachel über die
   ganze Breite, darunter zwei kleine (GESTALTUNG.md, Raster und Kacheln). */

.box { position: relative; }
.bento {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 244px 176px;
  gap: 10px;
}
.bento > :first-child { grid-column: 1 / -1; }

/* Die Gerichtkachel: auf dem Pastellton des Gerichts, klar heller als der
   Grund. Groß ist sie randlos (das Foto füllt sie, Titel und Werte auf
   einem Glasschild), klein steht das Gericht freigestellt darüber. */
.kachel.gericht, .kachel.geist, .kachel.laedt {
  position: relative; display: block;
  min-width: 0;
  border-radius: var(--radius-kachel);
  overflow: hidden;
  color: var(--text);
  background: color-mix(in srgb, var(--ton, var(--glas)) var(--ton-mix), var(--flaeche));
  box-shadow: var(--schatten-kachel), inset 0 0 0 1.5px var(--kachel-rand);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.kachel[data-ton="gruen"]    { --ton: #d4efd9; }
.kachel[data-ton="gelb"]     { --ton: #fbe7b5; }
.kachel[data-ton="blau"]     { --ton: #dbe6fb; }
.kachel[data-ton="rosa"]     { --ton: #f9d9e4; }
.kachel[data-ton="sand"]     { --ton: #f1e5c6; }
.kachel[data-ton="grau"]     { --ton: #e6ebe4; }
.kachel[data-ton="mint"]     { --ton: #d2f0e6; }
.kachel[data-ton="lavendel"] { --ton: #e6defa; }
.kachel[data-ton="pfirsich"] { --ton: #fbdfcc; }
.kachel[data-ton="rot"]      { --ton: #f8d8d3; }

.kachelfoto {
  position: absolute; left: 8%; right: 8%; top: 4%; height: 60%;
  display: grid; place-items: center;
  /* Dunkel steht das Gericht auf einem runden Teller in seiner Farbe. */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ton) var(--teller), transparent) 68%, transparent 70%);
}
.kachelfoto img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: var(--foto-mischung);
  -webkit-mask-image: radial-gradient(closest-side, #000 var(--maske-a), transparent var(--maske-b));
  mask-image: radial-gradient(closest-side, #000 var(--maske-a), transparent var(--maske-b));
}
/* Ein eigenes Foto ist kein Studiofoto: rund wie ein Teller, ganz zu sehen. */
.kachelfoto.eigen { background: none; container-type: size; }
.kachelfoto.eigen img {
  width: min(90cqw, 90cqh); height: min(90cqw, 90cqh);
  border-radius: 50%;
  mix-blend-mode: normal;
  -webkit-mask-image: none; mask-image: none;
  box-shadow: 0 16px 34px -14px rgba(40, 30, 20, .55);
}
.kachelzeichen { color: var(--text-2); opacity: .7; }
.kachelzeichen .pikto { width: 56px; height: 56px; }

.kacheltext {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.kachel strong {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
  font-family: var(--schrift-zahl); font-size: .98rem; font-weight: 700; line-height: 1.2;
  text-wrap: balance;
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 3 3;
}
.kachel.lang strong { font-size: .9rem; }
.kachel.sehrlang strong { font-size: .84rem; }
.kachel .werte {
  display: flex; flex-wrap: nowrap; gap: 4px 11px; overflow: hidden;
  font-size: .74rem; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.kachel .werte > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kachel .werte .ikon { width: 13px; height: 13px; opacity: .8; }
.kachel:not(.gross) .werte > span:nth-child(n+3) { display: none; }

/* Groß: randlos, Text auf einem Glasschild unten links. */
.kachel.gross .kachelfoto { inset: 0; height: auto; background: none; }
.kachel.gross .kachelfoto img { -webkit-mask-image: none; mask-image: none; }
.kachel.gross .kachelfoto.eigen img { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.kachel.gross .kacheltext {
  left: 10px; right: auto; top: 10px; bottom: 10px; max-width: 66%;
  justify-content: space-between; align-items: flex-start;
}
.kachel.gross .schild {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: auto;
  padding: 10px 12px;
  border-radius: 18px;
  background: var(--glas-stark);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--glas-rand);
}
.kachel.gross strong { font-size: 1.28rem; letter-spacing: -.01em; }
.kachel.gross.lang strong { font-size: 1.1rem; }
.kachel.gross.sehrlang strong { font-size: 1rem; }
.kachel .schild { display: contents; }
.kachel.gross .schild { display: flex; }

/* Marken: auf der großen Kachel als Pillen über dem Schild, auf den
   kleinen nur das Zeichen in der Ecke. */
.kachel .marken { display: flex; flex-wrap: wrap; gap: 4px; }
.kachelmarke {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--radius-rund);
  font-size: .72rem; font-weight: 650; white-space: nowrap;
  background: var(--knopf); color: var(--text-2);
}
.kachelmarke .ikon { width: 13px; height: 13px; }
.kachelmarke.gut { background: var(--primaer); color: var(--primaer-text); }
.kachelmarke.fehlt { background: color-mix(in srgb, #1d1c19 62%, transparent); color: #fff; }
.kachelmarke.gelb { background: var(--gelb-hell); color: var(--gelb); }
.kachelecke {
  position: absolute; z-index: 1; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--knopf); box-shadow: var(--schatten-klein);
}
.kachelecke.gelb { color: var(--gelb); }
.kachelecke .ikon { width: 15px; height: 15px; }
.kachel .dampfschwaden { position: absolute; left: 50%; bottom: 46%; width: 60px; height: 50px; margin-left: -30px; }

/* Magazin (Spontan und Plan, GESTALTUNG.md): das Foto ist die ganze Kachel und
   füllt die Box bis zur Navigation. Oben links die Marken, oben rechts Zeit
   und Kalorien als Pille, unten der Titel auf einem Glasschild. Die Reihen
   richten sich nach der Höhe des Schirms, damit alle drei Gerichte über der
   Navigation Platz haben, ohne zu scrollen. */
:root { --magazin-gross: clamp(200px, 31.8svh, 300px); --magazin-klein: clamp(128px, 21.2svh, 200px); }
.bento:has(> .kachel.magazin) { grid-template-rows: var(--magazin-gross) var(--magazin-klein); grid-auto-rows: var(--magazin-klein); }
.kachel.magazin { border-radius: var(--radius-kachel-klein); }
.kachel.magazin.gross { border-radius: var(--radius-kachel); }
.kachel.magazin .kachelfoto { inset: 0; width: auto; height: auto; background: none; }
.kachel.magazin .kachelfoto img { -webkit-mask-image: none; mask-image: none; }
.kachel.magazin .kachelfoto.eigen img { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.kachel.magazin .bildzeile {
  position: absolute; z-index: 1; left: 10px; right: 10px; top: 10px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 6px;
}
.kachel.magazin .marken, .kachel.magazin .rechts { display: flex; align-items: center; gap: 4px; min-width: 0; }
.kachel.magazin .rechts { flex: none; }
.kachel.magazin .kcalpille {
  flex: none; padding: 4px 10px; border-radius: var(--radius-rund);
  font-size: .72rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--glas-stark);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--glas-rand);
}
.kachel.magazin .vpunkt { display: block; flex: none; width: 10px; height: 10px; margin: 4px 0 0 4px; border-radius: 50%; box-shadow: 0 0 0 3px var(--glas-stark); }
.kachel.magazin .vpunkt.gut { background: var(--primaer); }
.kachel.magazin .vpunkt.fehlt { background: var(--gelb); }
.kachel.magazin .kachelecke { position: static; flex: none; width: 24px; height: 24px; background: var(--gelb-hell); box-shadow: none; }
.kachel.magazin .kachelecke .ikon { width: 14px; height: 14px; }
.kachel.magazin .kachelecke.ki { background: var(--glas-stark); color: var(--primaer); }
.kachel.magazin .restestern { position: static; flex: none; width: 24px; height: 24px; }
.kachel.magazin .restestern .ikon { width: 13px; height: 13px; }
.kachel.magazin .kacheltext { display: block; left: 8px; right: auto; top: auto; bottom: 8px; max-width: calc(100% - 16px); }
.kachel.magazin.gross .kacheltext { left: 10px; bottom: 10px; max-width: calc(100% - 20px); }
.kachel.magazin .schild, .kachel.magazin.gross .schild {
  display: block; width: fit-content; max-width: 100%; margin: 0;
  padding: 7px 12px; border-radius: 16px;
  background: var(--glas-stark);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--glas-rand);
}
.kachel.magazin.gross .schild { padding: 9px 14px; border-radius: 18px; }
.kachel.magazin .schild .platzname { display: flex; margin-bottom: 1px; }

/* Leere Plätze: gestrichelt, darüber die Glaskarte, die sie füllt. */
.kachel.geist { background: transparent; box-shadow: none; border: 1.5px dashed var(--linie-stark); }
/* Die Glaskarte liegt über allen Plätzen - darum stehen sie fest. */
.bento > .kachel.geist:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
.bento > .kachel.geist:nth-child(2) { grid-area: 2 / 1; }
.bento > .kachel.geist:nth-child(3) { grid-area: 2 / 2; }
.startkarte {
  grid-row: 1 / 3; grid-column: 1 / -1;
  align-self: center; justify-self: center; z-index: 2;
  width: 88%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 18px 18px;
  border-radius: var(--radius-kachel);
  text-align: center;
}
.startkarte strong { font-size: 1.05rem; }
.startkarte .meldung { text-align: left; }
.freizeichen {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--knopf); color: var(--text-2);
}
.freizeichen .ikon, .freizeichen .pikto { width: 22px; height: 22px; }

/* Zusammenfassung dessen, was eingestellt ist: kleine Chips, ein Tipp
   holt das Blatt mit allen Feldern. */
.zusammenfassung {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 0; border: 0; background: none; text-align: left; color: inherit;
  cursor: pointer;
}
.zusammenfassung.zentriert { justify-content: center; }
.zusammenfassung > span, .zusammenfassung .marke-chip {
  padding: 3px 9px; border-radius: var(--radius-rund);
  font-size: .72rem; font-weight: 650; white-space: nowrap;
  background: var(--knopf); color: var(--text-2);
}
.zusammenfassung:empty { display: none; }
/* Spontan: Kopf, Zusammenfassung und Werkzeuge gehören zum Formular. */
.kopfformular { display: flex; flex-direction: column; gap: 10px; }

/* Werkzeuge im Kopf: was man oft umstellt, schaltet direkt. */
.werkzeuge { display: flex; gap: 6px; flex-wrap: wrap; }
.werkzeug {
  position: relative;
  height: 34px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-rund);
  font: inherit; font-size: .8rem; font-weight: 650;
  color: var(--text);
  white-space: nowrap;
  cursor: pointer;
}
.werkzeug .ikon, .werkzeug .pikto { width: 16px; height: 16px; }
.werkzeug[data-stufe="an"] { background: var(--primaer-hell); color: var(--primaer); }
.werkzeug[data-stufe="nur"] { background: var(--primaer); color: var(--primaer-text); border-color: transparent; }
.werkzeug.bueroschalter[aria-pressed="true"] { background: var(--blau-hell); color: var(--blau); }
.werkzeug select {
  appearance: none; -webkit-appearance: none;
  width: auto; min-height: 0; height: auto;
  border: 0; box-shadow: none; background: none;
  padding: 0 16px 0 0; margin-right: -16px;
  font: inherit; color: inherit;
  cursor: pointer;
}
.werkzeug select:focus { box-shadow: none; }
.werkzeug .pfeilchen { width: 13px; height: 13px; pointer-events: none; opacity: .7; }

/* Reiter der Mahlzeiten: daneben das Zeichen für „alle neu". */
.reiterzeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reiterzeile .reiter { flex: 1; min-width: 0; }
.reiter button, .reiter a.mahlzeitwahl {
  position: relative; flex: none;
  padding: 6px 0; border: 0; background: none;
  font: inherit; font-weight: 700; font-size: .92rem;
  color: var(--text-3);
  white-space: nowrap; cursor: pointer;
  border-radius: var(--radius-rund);
  transition: color var(--dauer) var(--kurve);
  touch-action: pan-y;
}
.reiter [aria-selected="true"] { color: var(--text); }
.reiter [aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 2px; background: var(--primaer);
  animation: hereinwachsen var(--dauer-lang) var(--kurve);
}
.neuknopf {
  flex: none;
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
}
.neuknopf .ikon { width: 17px; height: 17px; }
.neuknopf:disabled { opacity: .45; cursor: default; }

/* ----------------------------------------------------------------- Rezept */

/* Die Rezeptseite: oben das ganze Foto über die volle Breite, ohne Maske;
   darauf links ‹, rechts die runden Glasknöpfe. Das Blatt mit dem Rezept
   überlappt das Foto um seine Rundung, damit hinter der Ecke Foto steht
   statt Seitengrund. */
.rezeptseite { gap: 0; }
.rezeptbild {
  position: relative;
  margin: calc(-1 * max(14px, env(safe-area-inset-top))) -16px 0;
  background: color-mix(in srgb, var(--ton, var(--flaeche-3)) var(--ton-mix), var(--flaeche));
  view-transition-name: gericht;
}
.rezeptbild[data-ton="gruen"] { --ton: #d4efd9; } .rezeptbild[data-ton="gelb"] { --ton: #fbe7b5; }
.rezeptbild[data-ton="blau"] { --ton: #dbe6fb; } .rezeptbild[data-ton="rosa"] { --ton: #f9d9e4; }
.rezeptbild[data-ton="sand"] { --ton: #f1e5c6; } .rezeptbild[data-ton="pfirsich"] { --ton: #fbdfcc; }
.rezeptbild[data-ton="mint"] { --ton: #d2f0e6; } .rezeptbild[data-ton="lavendel"] { --ton: #e6defa; }
.rezeptfoto { display: block; width: 100%; height: auto; }
.rezeptzeichen {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  color: var(--text-2);
}
.rezeptzeichen-platzhalter {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: var(--foto-mischung);
}
.rezeptbild .dampfschwaden { width: 24%; bottom: 46%; }
.rezeptbild > .zurueck {
  position: absolute; z-index: 3;
  left: 14px; top: max(14px, env(safe-area-inset-top));
}
.nebenknoepfe {
  position: absolute; z-index: 3;
  right: 14px; top: max(14px, env(safe-area-inset-top));
  display: flex; gap: 8px;
}
.nebenknoepfe > form { display: contents; }
.nebenknoepfe .merkknopf.an, .nebenknoepfe [aria-pressed="true"] {
  background: var(--primaer); color: var(--primaer-text); border-color: transparent;
}
.nebenknoepfe .fotoknopf input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.nebenknoepfe .fotosenden { display: none; }
.rezeptblatt {
  position: relative; z-index: 2;
  margin: -32px -16px 0;
  padding: 20px 16px 8px;
  border-radius: 32px 32px 0 0;
  background: var(--glas-stark);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  box-shadow: 0 -10px 30px -18px rgba(28, 58, 40, .3);
}
.rezeptkopf-text h1 { font-size: 1.45rem; letter-spacing: -.02em; margin-bottom: .6rem; }
.rezeptkopf-text .chipreihe { gap: 6px; }
.rezeptnebenzeile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rezeptnebenzeile > form { display: contents; }
.rezeptnebenzeile .chip .ikon { width: 15px; height: 15px; }
/* Kochen unten in der Daumenzone; der Text darüber läuft weich aus. */
.kochleiste { padding: 8px 0 4px; }
.kochleiste .kochknopf { box-shadow: var(--kochen-schatten), inset 0 0 0 1.5px var(--kochen-rand); }
body:has(.kochleiste) .rueckmeldung-knopf { bottom: calc(var(--ueber-nav) + 78px); }
@media (min-width: 900px) {
  .rezeptbild { margin: 0; border-radius: var(--radius-kachel); overflow: hidden; }
  .rezeptbild > .zurueck, .nebenknoepfe { top: 14px; }
  .rezeptblatt { margin: -32px 0 0; border-radius: 32px; padding: 22px 22px 12px; }
}
/* Die Werte je Portion: kleine helle Kacheln zu dritt. */
.kacheln > .kachel { align-items: center; text-align: center; background: var(--knopf); border-radius: 16px; padding: 9px 4px; }

/* Der Schritt-Überblick auf der Rezeptseite - nur zum Lesen. */
.schrittueberblick { list-style: none; margin: 0; padding: 0; }
.schrittueberblick > li {
  position: relative;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid var(--linie);
  line-height: 1.45;
}
.schrittueberblick > li:first-child { border-top: 0; padding-top: 2px; }
.schrittueberblick > li:last-child { padding-bottom: 0; }
.schrittueberblick .schrittnr {
  flex: none; width: 24px; height: 24px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primaer-hell); color: var(--primaer-dunkel);
  font-family: var(--schrift-zahl); font-weight: 700; font-size: .8rem;
}

.fragknopf {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  background: var(--flaeche);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dauer), color var(--dauer), border-color var(--dauer);
}
.fragknopf .ikon { width: 16px; height: 16px; }
.fragknopf.aktiv, .fragknopf:hover { background: var(--primaer); border-color: var(--primaer); color: #fff; }

.begriff {
  border: 0; padding: 0; background: none; font: inherit; color: inherit;
  cursor: help;
  text-decoration: underline dotted var(--primaer);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
/* Die Erklär-Blase: Glas unter dem Wort, der Begriff fett in der ersten
   Zeile. Sie hängt an der Kachel bzw. Zeile mit dem Wort (rezept.js). */
.begriffblase {
  position: absolute; z-index: 3; left: 12px; right: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--glas-stark); color: var(--text);
  font-size: .9rem; font-weight: 400; line-height: 1.4; text-align: left;
  animation: blase-auf var(--dauer-lang) var(--kurve) backwards;
}
.begriffblase.ohne-auftritt { animation: none; }
/* Die Zeile mit der Blase darf nicht von den nächsten Zeilen überdeckt werden. */
.schrittueberblick > li:has(> .begriffblase) { z-index: 3; }
.begriffblase strong { display: block; margin-bottom: 2px; font-size: .84rem; font-weight: 700; }

/* Chat */
.chatverlauf {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 360px; overflow-y: auto;
  padding: 4px 0 10px;
}
.chatblase {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: .94rem; line-height: 1.45;
  white-space: pre-wrap;
  animation: aufsteigen var(--dauer-lang) var(--kurve);
}
.chatblase.frage { align-self: flex-end; background: var(--primaer); color: #fff; border-bottom-right-radius: 5px; }
.chatblase.antwort { align-self: flex-start; background: var(--flaeche-3); border-bottom-left-radius: 5px; }
.chatblase.wartet { color: var(--text-3); display: inline-flex; align-items: center; gap: 8px; }
.tippt { display: inline-flex; gap: 4px; }
.tippt i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); animation: tippen 1.2s ease-in-out infinite; }
.tippt i:nth-child(2) { animation-delay: .2s; }
.tippt i:nth-child(3) { animation-delay: .4s; }
.chatzeile { display: flex; gap: 8px; }
.chatzeile input { flex: 1; }
.chatzeile .knopf { flex: none; }

/* Bewertung */
/* Gleich breit, aber nie schmaler als die eigene Beschriftung - sonst
   bricht „War in Ordnung" auf dem Handy in zwei Zeilen. */
.bewertungsreihe { display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); gap: 6px; }
.bewertungsreihe .chip {
  flex-direction: column; gap: 6px;
  min-height: 78px; padding: 10px 4px;
  border-radius: var(--radius-klein);
  font-size: .82rem;
}
.bewertungsreihe .chip::before { display: none; }
.bewertungsreihe .chip .ikon { width: 24px; height: 24px; }
.bewertungsreihe .chip.stufe-3[aria-pressed="true"] { background: var(--primaer); border-color: var(--primaer); }
.bewertungsreihe .chip.stufe-2[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); }
.bewertungsreihe .chip.stufe-1[aria-pressed="true"] { background: var(--text-2); border-color: var(--text-2); }

/* Koch-Wizard: ein Bildschirm pro Schritt, Abschluss danach */
.kochmodus {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--bg);
  animation: einblenden var(--dauer-lang) var(--kurve);
}
body.kocht { overflow: hidden; }
body.kocht .tabs, body.kocht .seitenleiste, body.kocht .homescreen-hinweis, body.kocht .rueckmeldung-knopf, body.kocht .modusknopf { display: none; }
body.kocht .buehne { padding: 0; max-width: none; margin: 0; }
.kochfortschritt {
  height: 3px; background: var(--linie);
  margin-top: env(safe-area-inset-top);
}
.kochfortschritt span {
  display: block; height: 100%; width: 0;
  background: var(--primaer);
  transition: width var(--dauer-lang) var(--kurve);
}
.kochkopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 8px;
  max-width: var(--inhalt-breite); width: 100%; margin: 0 auto;
}
.kochzaehler { font-weight: 650; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* Laufende Timer bleiben sichtbar, egal auf welchem Bild man ist. */
.timerleiste {
  display: flex; gap: 8px;
  padding: 0 18px 8px;
  overflow-x: auto; scrollbar-width: none;
  max-width: var(--inhalt-breite); width: 100%; margin: 0 auto;
}
.timerleiste::-webkit-scrollbar { display: none; }
.timerchip {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 0 6px 0 12px;
  border: 1px solid var(--blau);
  border-radius: var(--radius-rund);
  background: var(--blau-hell); color: var(--blau-text);
  font-size: .9rem; font-weight: 620;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  animation: pulsieren 2s ease-in-out infinite;
}
.timerchip.fertig { background: var(--primaer); border-color: var(--primaer); color: #fff; animation: none; }
.timerchip-schritt { color: inherit; opacity: .75; font-weight: 500; }
.timerchip-weg {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 1.1rem; line-height: 1;
  opacity: .7;
}
.timerchip-weg:hover { background: rgba(0, 0, 0, .08); opacity: 1; }

.kochbuehne {
  flex: 1;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.kochbuehne::-webkit-scrollbar { display: none; }
.kochbild {
  flex: none; width: 100%;
  scroll-snap-align: center;
  overflow-y: auto;
}
.kochbild {
  padding: 20px max(24px, calc((100% - var(--inhalt-breite)) / 2)) 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.kochbild > * { width: 100%; }
.kochbild > .kochnummer { width: 44px; }
.kochbild > .kochnummer.fertigzeichen { width: 56px; }
.kochschritt p { font-size: 1.45rem; line-height: 1.4; margin: 0; }
.kochabschluss h1, .kochabschluss > p { margin: 0; }
.kochnummer {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primaer); color: #fff;
  font-family: var(--schrift-zahl); font-weight: 700; font-size: 1.15rem;
}
.kochnummer.fertigzeichen { width: 56px; height: 56px; }
.kochnummer.fertigzeichen .ikon { width: 26px; height: 26px; }

/* Die Zutaten, die in diesem Schritt vorkommen. */
.kochzutaten {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
}
.kochzutat {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.kochzutat-bild {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  display: grid; place-items: center;
}
.kochzutat-bild .pikto { width: 40px; height: 40px; }
.kochzutat-text {
  padding: 6px 8px 8px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: .88rem; line-height: 1.25;
  overflow-wrap: anywhere;
}
.kochzutat-text strong { font-variant-numeric: tabular-nums; }
/* Wohin eine vorbereitete Zutat kommt: gleiche Farbe und Zahl heißt
   gleiche Schüssel. Der helle Ring hebt sie vom Bild ab. */
.kochzutat { position: relative; }
.schalenmarke {
  position: absolute; top: 6px; right: 6px;
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 9px 2px 6px;
  border-radius: var(--radius-rund);
  font-family: var(--schrift-zahl); font-weight: 700; font-size: .95rem;
  box-shadow: 0 0 0 2px var(--flaeche), 0 1px 4px rgb(0 0 0 / .18);
}
.schalenmarke .ikon { width: 14px; height: 14px; }
.kochwerkzeuge { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kochfrage {
  width: auto; min-height: 48px; padding: 0 18px 0 14px;
  border-radius: var(--radius-rund);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 1rem; font-weight: 620;
}
.kochfrage .ikon { width: 20px; height: 20px; }
.kochschritt .begriffblase { font-size: 1.05rem; }
.kochbewertung { width: 100%; }
.kochabschluss .kochbewertung + .kochbewertung { margin-top: -4px; }

.kochfuss {
  display: grid; grid-template-columns: 1fr 2fr; gap: 10px;
  padding: 12px 18px max(18px, env(safe-area-inset-bottom));
  max-width: var(--inhalt-breite); width: 100%; margin: 0 auto;
}
.kochfuss .knopf { min-height: 56px; font-size: 1.05rem; }
.kochfuss .knopf[hidden] { display: none; }

/* Im Bento-Theme (Mockup, Koch-Wizard): der Grund trägt einen frischen
   Ton, jeder Schritt ist eine Kachel, die den Schirm bis über die Knöpfe
   füllt - großes Vorgangszeichen, die Nummer klein in der Ecke, kurzer
   Text größer. Zutaten stehen als Kacheln zu dritt darunter. */
.kochmodus { background: linear-gradient(180deg, var(--verlauf-oben) 0%, color-mix(in srgb, var(--mittag-1) 55%, var(--bg)) 42%, color-mix(in srgb, var(--mittag-2) 45%, var(--bg)) 100%); }
.kochkopf { gap: 12px; padding: 10px 14px 8px; }
.kochfortschritt { height: 5px; margin: max(10px, env(safe-area-inset-top)) 14px 0; border-radius: 3px; background: var(--linie-stark); overflow: hidden; }
.kochbild { gap: 10px; padding-top: 12px; }
.schrittkachel {
  position: relative; flex: 1 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 26px 18px 22px;
  border-radius: var(--radius-kachel);
  text-align: center;
  background: var(--flaeche);
  box-shadow: var(--schatten-kachel), inset 0 0 0 1.5px var(--kachel-rand);
}
.sk-nr {
  position: absolute; top: 14px; left: 18px;
  font-family: var(--schrift-zahl); font-size: 1.6rem; font-weight: 800; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.sk-nr small { margin-left: .4em; font-size: .6em; font-weight: 600; letter-spacing: 0; color: var(--text-3); }
.schrittkachel .kochzeichen { width: 132px; height: 132px; border-radius: 46px; }
.schrittkachel .kochzeichen .pikto { width: 64px; height: 64px; }
.kochschritt .schrittkachel p { font-family: var(--schrift-zahl); font-size: 1.3rem; font-weight: 600; line-height: 1.38; letter-spacing: -.01em; }
.schrittkachel[data-laenge="kurz"] p { font-size: 1.9rem !important; line-height: 1.2 !important; letter-spacing: -.02em; }
.schrittkachel[data-laenge="mittel"] p { font-size: 1.55rem !important; line-height: 1.3 !important; }
/* Mehrere Sätze: jeder eine Zeile für sich, linksbündig und etwas leichter,
   damit die Markierungen tragen - Zeiten blau wie der Timer, Hitze in
   Akzentfarbe. Lange Schritte geben dem Text Platz, das Zeichen wird kleiner. */
.schritttext { display: flex; flex-direction: column; gap: .6em; }
.kochschritt .schrittkachel .schritttext:has(p + p) { text-align: left; }
.kochschritt .schrittkachel .schritttext:has(p + p) p { font-weight: 500; }
.kochschritt .schrittkachel[data-laenge="lang"] .schritttext:has(p + p) p { font-size: 1.15rem; line-height: 1.42; }
.schritttext mark {
  padding: .02em .32em; border-radius: .45em;
  color: var(--text); font-weight: 750; white-space: nowrap;
}
.schritttext .merk-zeit { background: color-mix(in srgb, var(--blau) 20%, transparent); }
.schritttext .merk-hitze { background: color-mix(in srgb, var(--akzent) 28%, transparent); }
.schrittkachel[data-laenge="lang"] { gap: 14px; }
.schrittkachel[data-laenge="lang"] .kochzeichen { width: 84px; height: 84px; border-radius: 30px; }
.schrittkachel[data-laenge="lang"] .kochzeichen .pikto { width: 42px; height: 42px; }
.kochzutaten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kochzutat {
  align-items: center; padding: 10px 6px 12px; text-align: center;
  border: 0; border-radius: var(--radius-kachel-klein);
  background: var(--flaeche);
  box-shadow: var(--schatten-kachel), inset 0 0 0 1.5px var(--kachel-rand);
}
.kochzutat-bild { width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; }
.kochzutat-bild .pikto { width: 28px; height: 28px; }
.kochzutat-text { padding: 0; align-items: center; font-size: .76rem; color: var(--text-2); }
.kochzutat-text strong { order: -1; font-size: .92rem; font-weight: 750; color: var(--text); }

/* Die Uhr eines Schritts: eine Kachel über die volle Breite vor den
   Zutaten. Ring = Restzeit, daneben die Zeit und der Knopf (Start, Pause,
   Fertig - welches Zeichen steht, bestimmt die Klasse, timer.js setzt sie). */
.uhrkachel {
  width: 100%; border: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: var(--radius-kachel-klein);
  text-align: left; color: var(--text);
  background: var(--flaeche);
  box-shadow: var(--schatten-kachel), inset 0 0 0 1.5px var(--kachel-rand);
  cursor: pointer;
}
.uk-ring { position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center; color: var(--blau); }
.uk-kreis { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.uk-ring circle { fill: none; stroke-width: 4; }
.uk-spur { stroke: var(--blau-hell); }
.uk-rest { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.uk-ring .ikon { width: 20px; height: 20px; }
.uk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uk-text strong { font-family: var(--schrift-zahl); font-size: 1.4rem; font-weight: 750; line-height: 1.1; font-variant-numeric: tabular-nums; }
.uk-text small { font-size: .8rem; font-weight: 600; color: var(--text-2); }
.uk-knopf {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primaer); color: var(--primaer-text);
}
.uk-knopf .ikon { width: 20px; height: 20px; display: none; }
.uk-knopf .z-start { display: block; }
.uhrkachel.laeuft .uk-knopf { background: var(--flaeche-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.uhrkachel.laeuft .z-start, .uhrkachel.fertig .z-start { display: none; }
.uhrkachel.laeuft .z-pause, .uhrkachel.fertig .z-fertig { display: block; }
.uhrkachel.pausiert .uk-ring { color: var(--text-3); }
.uhrkachel.fertig { background: var(--primaer); color: var(--primaer-text); }
.uhrkachel.fertig .uk-ring, .uhrkachel.fertig .uk-text small { color: inherit; }
.uhrkachel.fertig .uk-spur { stroke: color-mix(in srgb, var(--primaer-text) 25%, transparent); }
.uhrkachel.fertig .uk-knopf { background: color-mix(in srgb, var(--primaer-text) 22%, transparent); color: inherit; }

/* Ganz unten im Schritt: was als Nächstes kommt, höchstens zwei Zeilen. */
.naechster {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 0; border-radius: var(--radius-kachel-klein);
  text-align: left; white-space: normal; color: var(--text);
  background: var(--glas);
  box-shadow: inset 0 0 0 1px var(--linie);
  cursor: pointer;
}
.nx-bild { flex: none; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; }
.nx-bild .pikto { width: 24px; height: 24px; }
.nx-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: .9rem; line-height: 1.35; color: var(--text-2); }
.nx-kopf { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.nx-text > span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.naechster > .ikon { flex: none; width: 18px; height: 18px; color: var(--text-3); }

.kochfuss { display: flex; gap: 10px; padding: 12px 16px max(30px, env(safe-area-inset-bottom)); }
.kochfuss .knopf { border-radius: var(--radius-rund); }
.kochfuss .knopf.nur-zeichen { flex: none; width: 56px; padding: 0; }
.kochfuss #koch-weiter { flex: 1; }
.timerchip { border: 0; }

/* Das Blatt mit den Rückfragen. */
.kochblatt-schatten {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(25, 22, 15, .35);
  animation: einblenden var(--dauer) var(--kurve);
}
.kochblatt {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
  max-height: 78vh; overflow-y: auto;
  padding: 6px 12px max(12px, env(safe-area-inset-bottom));
  background: var(--bg);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--schatten-hoch);
  animation: blatt-auf var(--dauer-lang) var(--kurve);
}
.kochblatt .karte { max-width: var(--inhalt-breite); margin: 0 auto; box-shadow: none; }
.kochblatt-griff {
  width: 40px; height: 4px; margin: 4px auto 10px;
  border-radius: 2px; background: var(--linie-stark);
}
.kochblatt .chatverlauf { max-height: 40vh; }
.kochblatt .chatzeile input { min-height: 48px; font-size: 1rem; }
.textknopf {
  border: 0; padding: 0; background: none; font: inherit;
  color: var(--primaer); text-decoration: underline; cursor: pointer;
}

/* ----------------------------------------------------- Einkauf & Angebote */

.einkaufskopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.einkaufskopf .kopfabschluss { flex: 1 1 100%; }
.einkaufskopf .ring { width: 64px; height: 64px; }
.einkaufskopf .ring::before { width: 48px; height: 48px; }
.einkaufskopf .ring .ringzahl { font-size: .85rem; }
/* Betrag und Stand bleiben je auf einer Zeile. Reicht die Breite neben den
   Knöpfen dafür nicht, rutschen die Knöpfe darunter. */
.einkaufskopf .einkaufstext { flex: 1; min-width: max-content; white-space: nowrap; }
.einkaufskopf .einkaufstext strong { display: block; font-size: 1.15rem; font-family: var(--schrift-zahl); }
.einkaufskopf .einkaufstext .klein { display: block; }
/* Der Korb unten: zusammengeklappt, damit Erledigtes nicht im Weg steht. */
.korb { border-top: 0; }
.korb > summary { padding: 4px 2px; }
.korb .einkaufsliste > li:first-child { border-top: 0; }
.einkaufsliste > li.wandert { opacity: 0; transition: opacity var(--dauer-lang); }
.einkaufskopf .knopf.rund + .knopf.rund { margin-left: -4px; }
/* Der Mülleimer steckt in einem Formular und steht als erster - ohne das
   hier stünde der nächste runde Knopf zu weit weg von ihm. */
.einkaufskopf .korbweg { display: contents; }
.einkaufskopf .korbweg + .knopf.rund,
.einkaufskopf .korbweg + .knopf.rund[hidden] + .knopf.rund { margin-left: -4px; }
.einkaufsliste > li, .angebotsliste > li { border-top: 1px solid var(--linie); position: relative; }
.einkaufsliste > li:first-child, .angebotsliste > li:first-child { border-top: 0; }
.angebotsliste .hakenzeile, .eigenposten .hakenzeile { padding-right: 40px; }
.zeile-entfernen { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.zeileweg {
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-3);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--dauer), color var(--dauer);
}
.zeileweg:hover { background: var(--rot-hell); color: var(--rot); }
.zeileweg .ikon { width: 18px; height: 18px; }
/* Der Buch-Knopf hinter einer Zeile fuehrt ins Rezept, aus dem sie stammt.
   Stecken mehrere dahinter, klappt die Auswahl unter der Zeile auf -
   eingerueckt bis dorthin, wo der Name steht. */
.einkaufsliste > li.rezeptposten { display: flex; flex-wrap: wrap; align-items: center; }
.einkaufsliste > li.rezeptposten > .hakenzeile { flex: 1 1 0; min-width: 0; }
.zeileweg.zumrezept, .zeile-loeschen { flex: none; }
.zeileweg.zumrezept:hover, .zeileweg.zumrezept[aria-expanded="true"] { background: var(--primaer-hell); color: var(--primaer-dunkel); }
.rezeptwahl { flex: 1 1 100%; padding: 0 4px 12px 80px; }
.rezeptwahl .chip { text-decoration: none; }
.angebotspreis { text-align: right; display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.angebotspreis s { font-size: .8rem; color: var(--text-3); }
.reglerzeile { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reglerzeile form { display: contents; }

.ampel {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 8px; background: var(--text-3); vertical-align: middle;
}
.ampel.gruen { background: var(--primaer); }
.ampel.gelb  { background: var(--gelb); }
.ampel.rot   { background: var(--rot); }

.vorschlagsliste {
  display: flex; flex-direction: column;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-hoch);
  margin: -8px 0 12px;
  overflow: hidden;
  transform-origin: top center;
  animation: aufklappen var(--dauer-lang) var(--kurve);
}
.vorschlag {
  text-align: left; padding: 11px 14px;
  border: 0; border-top: 1px solid var(--linie);
  background: transparent; cursor: pointer;
}
.vorschlag:first-child { border-top: 0; }
.vorschlag:hover { background: var(--flaeche-2); }

.zeilenpaar { display: grid; grid-template-columns: 1fr 88px 40px; gap: 8px; align-items: center; margin-bottom: 8px; }
.zeilenpaar input { min-height: 44px; }
.linkzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.linkzeile code { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 8px 10px; }
/* Einzeilig: der Link wird abgeschnitten statt umbrochen - kopiert wird
   trotzdem der ganze, die Knoepfe tragen nur ihr Zeichen. */
.linkzeile.einzeilig { flex-wrap: nowrap; }
.linkzeile.einzeilig code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.linkzeile.einzeilig .knopf.rund { flex: none; }
.zuordnungsform { display: flex; gap: 6px; flex: none; }
.zuordnungsform input { width: 140px; min-height: 40px; }

/* -------------------------------------------------------- Feed & Haushalt */

.feedkopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.kochname { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.kochname .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blau-hell); color: var(--blau-text);
  font-size: .8rem; font-weight: 700;
}
/* -------------------------------------------------- Einstellungen (Ich) */

.einstellung {
  border-top: 1px solid var(--linie);
}
.einstellung:first-of-type { border-top: 0; }
.einstellung > summary {
  list-style: none;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.einstellung > summary::-webkit-details-marker { display: none; }
.einstellung > summary .zeilenzeichen {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--flaeche-3); color: var(--text-2);
}
.einstellung > summary .zeilenzeichen .ikon { width: 19px; height: 19px; }
.einstellung > summary .zeilentext { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.einstellung > summary .zeilentext strong { font-weight: 620; }
.einstellung > summary .zeilentext .klein { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.einstellung > summary .pfeil { color: var(--text-3); transition: transform var(--dauer-lang) var(--kurve); }
.einstellung[open] > summary .pfeil { transform: rotate(90deg); }
.einstellung[open] > summary .zeilenzeichen { background: var(--primaer-hell); color: var(--primaer-dunkel); }
.einstellung-inhalt { padding: 2px 2px 18px; animation: aufsteigen var(--dauer-lang) var(--kurve); }
.einstellung-inhalt > h3 { margin-top: 14px; }
.einstellung-inhalt > h3:first-child { margin-top: 0; }

/* --------------------------------------------------------- Vorratszeile

   Jeder Eintrag im Vorrat klappt auf: oben, was er sagt (Menge, Frist),
   darunter, was man damit machen kann. Dieselbe Bewegung wie bei den
   Einstellungen, nur schmaler - hier steht kein Piktogramm davor. */

.liste > li > .vorratszeile { flex: 1 1 100%; min-width: 0; }
.vorratszeile > summary {
  list-style: none;
  display: flex; align-items: center; gap: 10px;
  padding: 2px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vorratszeile > summary::-webkit-details-marker { display: none; }
.vorratszeile > summary .zeilentext {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; line-height: 1.3;
}
.vorratszeile > summary .marke-chip { flex: none; }
/* Vorn ein Bild der Zutat, damit man den Vorrat beim Überfliegen erkennt;
   ohne Bild das Piktogramm der Einkaufsliste. */
.vorratsbild {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
  display: grid; place-items: center;
}
.vorratsbild .pikto { width: 22px; height: 22px; }
.vorratszeile > summary .pfeil {
  flex: none; color: var(--text-3);
  transition: transform var(--dauer-lang) var(--kurve);
}
.vorratszeile[open] > summary .pfeil { transform: rotate(90deg); }
.vorratszeile-inhalt {
  padding: 14px 2px 4px;
  animation: aufsteigen var(--dauer-lang) var(--kurve);
}

.wertpaar { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.wertpaar dt { color: var(--text-2); }
.wertpaar dd { margin: 0; font-weight: 600; text-align: right; }

/* ------------------------------------------------------------- Fragebogen */

.schrittanzeige { display: flex; gap: 5px; margin: 4px 0 16px; }
.schrittanzeige i { flex: 1; height: 5px; border-radius: 3px; background: var(--flaeche-3); transition: background var(--dauer-lang); }
.schrittanzeige i.erledigt { background: var(--primaer); }
.schritt { display: none; }
.schritt.sichtbar { display: flex; flex-direction: column; gap: 14px; animation: aufsteigen var(--dauer-lang) var(--kurve); }

/* ---------------------------------------------------------- Homescreen */

.homescreen-hinweis {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(var(--ueber-nav) + 4px);
  z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--toast); color: var(--toast-text);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
  animation: aufsteigen var(--dauer-lang) var(--kurve);
}
.homescreen-text { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; }
.homescreen-hinweis .knopf { flex: none; background: rgba(255, 255, 255, .15); color: inherit; }
@media (min-width: 900px) {
  .homescreen-hinweis { left: auto; right: 24px; bottom: 24px; width: 380px; }
}

/* ---------------------------------------------------------- Erklärblasen */
/* Eine Blase zeigt auf eine Stelle; die Seite ist abgedunkelt bis auf das
   Ziel. Der Schutz darunter fängt Tipps ab (tipps.js: daneben = weiter).
   Über Navigation und Homescreen-Hinweis, unter Toast und Warteschirm. */

.tippschutz { position: fixed; inset: 0; z-index: 60; }
.tipprahmen {
  position: fixed; z-index: 61; pointer-events: none;
  border-radius: var(--radius-klein);
  box-shadow: 0 0 0 3px var(--primaer), 0 0 0 200vmax rgba(0, 0, 0, .45);
}
.tippblase {
  position: fixed; z-index: 62;
  width: min(340px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px 12px;
  background: var(--toast); color: var(--toast-text);
  border-radius: var(--radius);
  box-shadow: var(--schatten-hoch);
}
.tippblase.neu { animation: aufsteigen var(--dauer-lang) var(--kurve); }
.tipppfeil {
  position: absolute; left: var(--pfeil, 50%);
  width: 14px; height: 14px; margin-left: -7px;
  background: inherit; transform: rotate(45deg);
}
.tippblase.unten .tipppfeil { top: -6px; }
.tippblase.oben .tipppfeil { bottom: -6px; }
.tippzaehler { opacity: .65; }
.tipptitel { font-size: 1rem; }
.tipptext { margin: 0; font-size: .92rem; line-height: 1.45; }
.tippknoepfe { justify-content: flex-end; margin-top: 8px; }
.tippknoepfe .knopf.leise {
  margin-right: auto;
  background: color-mix(in srgb, currentColor 14%, transparent); color: inherit;
}

/* ------------------------------------------------------- Rueckmeldung */
/* Probephase: kleiner Knopf, der nicht im Weg steht, bis man ihn braucht.
   Sitzt ueber der Tab-Leiste am rechten Rand, unter Toast und Hinweis. */

.rueckmeldung-knopf {
  position: fixed;
  right: 14px;
  bottom: calc(var(--ueber-nav) + 6px);
  z-index: 45;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius-rund);
  background: var(--glas); color: var(--text-2);
  -webkit-backdrop-filter: var(--glas-unschaerfe);
  backdrop-filter: var(--glas-unschaerfe);
  box-shadow: var(--schatten-klein);
  opacity: .8;
  cursor: pointer;
  transition: opacity var(--dauer), transform var(--dauer), color var(--dauer);
}
.rueckmeldung-knopf:hover, .rueckmeldung-knopf:focus-visible { opacity: 1; color: var(--primaer); }
.rueckmeldung-knopf .pikto { width: 22px; height: 22px; }
/* Solange der Homescreen-Hinweis steht, rueckt der Knopf darueber. */
.homescreen-hinweis:not([hidden]) ~ .rueckmeldung-knopf {
  bottom: calc(var(--ueber-nav) + 110px);
}
@media (min-width: 900px) {
  .rueckmeldung-knopf { right: 22px; bottom: 22px; }
  .homescreen-hinweis:not([hidden]) ~ .rueckmeldung-knopf { bottom: 150px; }
}

dialog.rueckmeldung {
  border: 1px solid var(--glas-rand); padding: 26px 20px 20px;
  width: min(100% - 16px, 460px);
  max-height: calc(100dvh - 64px);
  background: var(--glas-stark); color: var(--text);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  border-radius: 34px;
  box-shadow: 0 -10px 40px -10px rgba(28, 58, 40, .3);
  margin: auto auto 8px;                /* mobil: unten, mit Rand */
}
/* Der Griff oben sagt: Das lässt sich herunterziehen. */
dialog.rueckmeldung::before, dialog.ausschnittblatt::before {
  content: ""; position: absolute; top: 9px; left: 50%;
  width: 40px; height: 5px; margin-left: -20px;
  border-radius: 3px; background: var(--linie-stark);
}
dialog.rueckmeldung[open] { animation: blatt-auf var(--dauer-lang) var(--kurve); }
dialog.rueckmeldung::backdrop { background: var(--schleier); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog.rueckmeldung h2 { margin: 0 0 4px; font-size: 1.15rem; }
dialog.rueckmeldung > form > p.klein { margin: 0 0 14px; }
.rueckmeldung-seite { margin: 0 0 14px; word-break: break-all; }
.rueckmeldung-seite code { font-size: .8rem; color: var(--text-3); }
.rueckmeldung-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.rueckmeldungen .rueckmeldung-text { white-space: pre-line; margin: 4px 0 2px; }
.rueckmeldungen > li.erledigt > span:first-child { opacity: .55; }
.rueckmeldungen .marke-chip + .marke-chip { margin-left: 4px; }
.protokoll .protokoll-text { margin: 4px 0 2px; overflow-wrap: anywhere; }
.protokoll-spur > summary { cursor: pointer; margin-top: 4px; }
.protokoll-mehr > summary { cursor: pointer; padding: 10px 0 2px; }
.protokoll-spur pre {
  margin: 6px 0 0; padding: 8px 10px; overflow-x: auto;
  font-size: .75rem; line-height: 1.4; white-space: pre;
  background: var(--linie); border-radius: 8px;
}
@media (min-width: 900px) {
  dialog.rueckmeldung { margin: auto; border-radius: var(--radius); }
  dialog.rueckmeldung[open] { animation-name: aufsteigen; }
}


/* ------------------------------------------------------------------- Blatt */
/* Einstellungen, Nachfragen, Details: ein Glasblatt von unten (Geste
   „Blatt", GESTALTUNG.md). Oben der Griff, rechts ✕; der Fuß trägt die
   Aktion. app.js öffnet es über data-blatt-auf und schließt es über ✕,
   einen Tipp daneben oder Herunterziehen am Griff. */
dialog.blatt {
  border: 1px solid var(--glas-rand);
  padding: 0;
  width: min(100% - 16px, 520px);
  max-height: calc(100dvh - 64px);
  margin: auto auto 8px;
  display: none; flex-direction: column;
  overflow: hidden;
  background: var(--glas-stark); color: var(--text);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  border-radius: 34px;
  box-shadow: 0 -10px 40px -10px rgba(28, 58, 40, .3);
}
dialog.blatt[open] { display: flex; animation: blatt-auf var(--dauer-lang) var(--kurve); }
dialog.blatt::backdrop { background: var(--schleier); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.blattgriff {
  flex: none;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 18px 12px;
  touch-action: none; cursor: grab;
  border-bottom: 1px solid var(--linie);
}
.blattgriff::before {
  content: ""; align-self: center;
  width: 40px; height: 5px; border-radius: 3px;
  background: var(--linie-stark);
}
.blattkopf { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.blattkopf h2 { margin: 0; font-size: 1.2rem; }
.blattzu {
  flex: none;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--linie); color: var(--text-2);
  cursor: pointer;
}
.blattzu .ikon { width: 18px; height: 18px; }
/* Basis auto, nicht 0: Das Blatt hat nur eine Höchsthöhe. Ältere Safaris
   nehmen eine Basis von 0 dann wörtlich, und der Inhalt fällt auf null. */
.blattinhalt {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.blattfuss {
  flex: none;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--linie);
  background: var(--glas);
}
.blattfuss .knopf { width: 100%; }
.blattfuss .knopfreihe { display: flex; gap: 8px; }
.blattfuss .knopfreihe > .knopf { flex: 1; width: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.blattfuss .knopfreihe > .knopf.nur-zeichen { flex: none; width: 52px; padding: 0; }
/* Die Nachfrage: klein, ein Satz, darunter Abbrechen und die Tat. */
dialog.blatt.nachfrage { width: min(100% - 16px, 420px); }
.nachfragetext { margin: 0; font-size: .95rem; color: var(--text-2); }
@media (min-width: 900px) {
  dialog.blatt { margin: auto; }
  dialog.blatt[open] { animation-name: aufsteigen; }
}

/* Das Detailblatt zu einem Eintrag der Liste (festhalten.js, Geste
   „Festhalten"): das Bild groß, daneben Menge und Preis, darunter Hinweise. */
.detail-kopf { display: flex; gap: 16px; align-items: center; }
.detail-bild {
  flex: none; width: 104px; height: 104px; border-radius: 50%;
  object-fit: cover;
  display: grid; place-items: center;
}
.detail-bild .pikto { width: 48px; height: 48px; }
.detail-werte { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.detail-menge { font-family: var(--schrift-zahl); font-size: 1.3rem; font-weight: 750; line-height: 1.2; overflow-wrap: anywhere; }
.detail-preis { font-weight: 700; font-variant-numeric: tabular-nums; }
.detail-statt { margin-left: 4px; font-weight: 500; color: var(--text-3); }
.detail-gerichte { display: flex; flex-direction: column; gap: 6px; }
.detail-quelle { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; color: var(--text-2); }
.blattfuss .knopf.weg { color: var(--rot); }
.meldung.gelb { background: var(--akzent-hell); color: var(--gelb); }
/* Festhalten öffnet das Blatt: kein Auswahlmenü des Telefons dazwischen. */
.einkaufsliste > li, .angebotsliste > li { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

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

.toast {
  position: fixed;
  left: 50%; bottom: calc(var(--ueber-nav) + 8px);
  transform: translateX(-50%);
  z-index: 70;
  padding: 10px 16px 10px 12px;
  background: var(--toast); color: var(--toast-text);
  border-radius: var(--radius-rund);
  font-size: .88rem; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  display: flex; align-items: center; gap: 8px;
  animation: toast-auf var(--dauer-lang) var(--kurve);
  max-width: calc(100% - 32px);
}
/* Hat nicht geklappt: derselbe rote Ton wie .meldung, damit man es nicht
   fuer eine Bestaetigung haelt. */
.toast .ikon, .toast .pikto { color: var(--toast-gut); }
.toast.hinweis .ikon, .toast.hinweis .pikto { color: var(--toast-hinweis); }
.toast.fehler .ikon, .toast.fehler .pikto { color: var(--toast-fehler); }
.toast.geht { animation: toast-ab var(--dauer) var(--kurve-ab) forwards !important; }
@media (min-width: 900px) { .toast { bottom: 28px; left: calc(50% + var(--leiste-breite) / 2); } }

/* --------------------------------------------------------- Warteschirm */

.warteschirm {
  position: fixed; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 32px;
  /* Kein Weichzeichner - der ruckelt auf dem Handy (siehe Tab-Leiste);
     ein fast deckender Grund reicht, damit nichts darunter ablenkt. */
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  text-align: center;
  /* Bewusst ohne Einblenden: Safari friert Animationen ein, sobald ein
     Formular abgeschickt ist - der Schirm bliebe dann bei Deckkraft null. */
}
.warteschirm h2 { margin: 0; }
.warteschirm p { color: var(--text-2); margin: 0; }
body.wartet { overflow: hidden; }

/* Mit Kacheln wird der Schirm zur Liste: oben das Zeichen, klein, darunter
   eine Kachel je Vorschlag oder Tag. Beim Wochenplan können das mehr sein,
   als auf einen Bildschirm passen - dann rollt der Schirm. */
.warteschirm.mit-kacheln {
  justify-content: flex-start; gap: 12px;
  overflow-y: auto; padding-top: max(32px, env(safe-area-inset-top));
}
.warteschirm.mit-kacheln .wartezeichen { transform: scale(.6); margin: -14px 0; }
.warteschirm .wartesatz { font-size: .92rem; min-height: 1.3em; }
.wartekacheln {
  display: grid; gap: 10px; width: 100%; max-width: 440px; text-align: left;
}
.wartekacheln[data-art="plan"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.wartekachel {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px; min-height: 76px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.wartekachel.kommt {
  animation: aufsteigen var(--dauer-lang) var(--kurve) backwards;
  animation-delay: calc(var(--n, 0) * 90ms);
}
.wartekachel p { margin: 0; }
.wartekachel .wk-titel { font-weight: 650; color: var(--text); line-height: 1.3; padding-right: 26px; }
.wartekachel .wk-zeile { font-size: .84rem; color: var(--text-2); line-height: 1.3; }
.wartekachel .wk-info { font-size: .8rem; color: var(--text-3); }

/* Platzhalter: Balken, die nacheinander hereinwachsen und dann atmen. */
.wk-balken {
  display: block; height: 10px; border-radius: 5px; background: var(--flaeche-3);
  width: 88%; transform-origin: left center;
  animation: wachsen var(--dauer-zeichnen) var(--kurve) backwards, atmen 1.6s ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * 250ms + var(--b, 0) * 350ms),
                   calc(var(--n, 0) * 250ms + var(--b, 0) * 350ms + .9s);
}
.wk-balken:nth-of-type(2) { width: 64%; }
.wk-balken:nth-of-type(3) { width: 40%; }
.wartekachel[data-zustand="leer"] .wk-balken:first-child { height: 14px; width: 72%; }

.wartekachel[data-zustand="fertig"] { border-color: color-mix(in srgb, var(--primaer) 45%, var(--linie)); }
.wartekachel[data-zustand="fertig"]::after {
  content: "✓"; position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
  background: var(--primaer); color: var(--primaer-text);
  animation: pop var(--dauer-lang) var(--kurve) backwards;
}
.wartekachel[data-zustand="weg"] .wk-titel { color: var(--text-3); text-decoration: line-through; }

/* Solange die Kachel leer ist, fahren Gerichte durch sie hindurch (app.js:
   durchlaufen). Sie liegen randlos unter allem anderen; was darauf noch
   zu lesen sein muss (der Tag, der Schritt), steht auf einer hellen Pille.
   Ist das Gericht gefunden, blenden sie über der neuen Kachel aus. */
.wk-durchlauf {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; border-radius: inherit; pointer-events: none;
}
.wk-durchlauf img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* herein, verweilen, hinaus - das Verweilen ist die Verzögerung. */
  animation: durchfahren-herein var(--dauer-auftritt) var(--kurve) both,
             durchfahren-hinaus var(--dauer-lang) var(--kurve-ab) .95s forwards;
}
.wk-durchlauf.endet { animation: ausblenden var(--dauer) var(--kurve-ab) forwards; }
.wartekachel:has(> .wk-durchlauf) > :not(.wk-durchlauf) { position: relative; z-index: 1; }
.wartekachel:has(> .wk-durchlauf:not(.endet)) .wk-titel {
  align-self: flex-start; padding: 2px 10px;
  background: var(--glas-stark); border-radius: var(--radius-rund);
}
.kachelbau:has(> .wartekacheln[data-art="spontan"] .wk-durchlauf:not(.endet)) > .wartesatz:not(:empty) {
  justify-self: start; padding: 6px 12px 6px 8px;
  background: var(--glas-stark); border-radius: var(--radius-rund);
}

.wk-tauschen {
  align-self: flex-start; margin-top: 2px; padding: 0;
  background: none; border: 0; font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--primaer); cursor: pointer;
}
.wk-tauschen:disabled { color: var(--text-3); cursor: default; }

/* ---------------------------------------------------- Kacheln im Inhalt */
/* Dieselben Kacheln wie auf dem Warteschirm, aber mitten in der Seite -
   dort, wo das Neue gleich steht (app.js: kachelbauZeigen). Was sie
   ersetzen, ist so lange verdeckt; die Seite bleibt bedienbar. */

.kachelbau { display: flex; flex-direction: column; gap: 10px; }
.kachelbau p { margin: 0; }
.kachelbau-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.kachelbau h2 { margin: 0; font-size: 1.05rem; }
.kachelbau .wartezeit { flex: none; font-variant-numeric: tabular-nums; color: var(--text-3); }
.kachelbau .wartesatz { min-height: 1.3em; margin-top: -6px; }
.kachelbau .wartekacheln { max-width: none; }
.kachelbau.einzeln .wartekacheln { grid-template-columns: 1fr; }
.kachelbau.gescheitert .wartehinweis { color: var(--rot); }
.kachelbau.gescheitert .wartesatz { display: none; }

/* Im Bento-Theme entsteht, was kommt, in der Box selbst: Die Plätze stehen
   als schimmernde Glaskacheln da, die große zuerst, und füllen sich mit
   jedem Stand. Über ihnen steht keine Zeile, die das noch einmal sagt; der
   Schritt steht klein mit dem Kreisel in der großen Kachel. */
.kachelbau:has(> .wartekacheln[data-art="spontan"]) {
  display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 244px 176px auto;
  gap: 10px;
}
.kachelbau:has(> .wartekacheln[data-art="spontan"]) .wartekacheln { display: contents; }
.kachelbau:has(> .wartekacheln[data-art="spontan"]) .kachelbau-kopf { display: none; }
.kachelbau:has(> .wartekacheln[data-art="spontan"]) .wartekachel:first-child { grid-column: 1 / -1; grid-row: 1; }
.kachelbau:has(> .wartekacheln[data-art="spontan"]) .wartesatz {
  grid-column: 1 / -1; grid-row: 1; align-self: end; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 16px; min-height: 0;
  font-size: .84rem; font-weight: 650; color: var(--text-2);
}
/* Der Inhalt der großen Kachel steht ebenfalls unten - solange der Schritt
   darunter läuft, rückt er über ihn, statt sich mit ihm zu überlagern. */
.kachelbau:has(> .wartekacheln[data-art="spontan"]) > .wartesatz:not(:empty) + .wartekacheln > .wartekachel:first-child {
  padding-bottom: 46px;
}
.kachelbau .wartesatz:not(:empty)::before {
  content: ""; flex: none;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--linie-stark); border-top-color: var(--primaer);
  animation: drehen .8s linear infinite;
}
.kachelbau:has(> .wartekacheln[data-art="spontan"]) .kachelbau-knoepfe,
.kachelbau:has(> .wartekacheln[data-art="spontan"]) .wartehinweis { grid-column: 1 / -1; }
.kachelbau .wartekacheln[data-art="spontan"] .wartekachel,
.bento > .kachelbau .wartekachel {
  position: relative; overflow: hidden;
  justify-content: flex-end;
  padding: 16px;
  border: 0; border-radius: var(--radius-kachel);
  background: var(--glas);
  box-shadow: inset 0 0 0 1.5px var(--kachel-rand);
}
.kachelbau .wartekacheln[data-art="spontan"] .wartekachel[data-zustand="leer"]::before,
.bento > .kachelbau .wartekachel[data-zustand="leer"]::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--schimmer) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: schimmern 1.1s var(--kurve) infinite;
}
.kachelbau .wartekacheln[data-art="spontan"] .wartekachel:first-child .wk-balken { display: none; }
/* Ein einzelner Platz, der neu entsteht („Anderer Vorschlag"): die Kachel
   selbst schimmert, abbrechen geht über das ✕ in ihrer Ecke. */
.bento > .kachelbau { position: relative; min-width: 0; display: block; }
.bento > .kachelbau:first-child { grid-column: 1 / -1; }
.bento > .kachelbau .kachelbau-kopf, .bento > .kachelbau .wartesatz { display: none; }
.bento > .kachelbau .wartekacheln, .bento > .kachelbau .wartekachel { height: 100%; max-width: none; }
.bento > .kachelbau .kachelbau-knoepfe { position: absolute; top: 10px; right: 10px; z-index: 1; }
.bento > .kachelbau .kachelbau-knoepfe .knopf { min-height: 30px; padding: 0 10px; font-size: .76rem; }

/* --------------------------------------------------------- Auftragsleiste */
/* Läuft ein Kachel-Auftrag, während man anderswo ist: eine schmale Leiste
   über der Navigation, wie ein Toast, der stehen bleibt. Der Toast rückt
   solange darüber. */

.auftragsleiste {
  position: fixed; z-index: 60;
  left: 16px; right: 16px; margin-inline: auto;
  bottom: calc(var(--ueber-nav) + 4px);
  width: fit-content; max-width: min(440px, calc(100% - 112px));
  display: flex; align-items: center;
  background: var(--glas-stark); color: var(--text);
  -webkit-backdrop-filter: var(--glas-unschaerfe);
  backdrop-filter: var(--glas-unschaerfe);
  border: 1px solid var(--glas-rand);
  border-radius: 20px;
  box-shadow: var(--schatten-hoch);
}
.auftragsleiste-link {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 10px 16px;
  color: inherit; text-decoration: none;
  font-size: .9rem; font-weight: 600;
  border-radius: var(--radius-rund);
}
.auftragsleiste .pikto { width: 18px; height: 18px; }
.auftragsleiste-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auftragsleiste .wartezeit { flex: none; font-variant-numeric: tabular-nums; opacity: .65; font-weight: 500; }
.auftragsleiste-ansehen { flex: none; text-decoration: underline; text-underline-offset: 3px; }
.auftragsleiste-zu {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; margin-right: 4px; padding: 0;
  background: none; border: 0; border-radius: 50%;
  color: inherit; opacity: .75; cursor: pointer;
}
.auftragsleiste-zu .ikon { width: 18px; height: 18px; }
.auftragsleiste[data-zustand="laeuft"] .auftragsleiste-link { padding-right: 18px; }
.auftragsleiste[data-zustand="fehler"] {
  background: var(--rot-hell); color: var(--rot-text);
}
body.mit-auftragsleiste .toast { bottom: calc(var(--ueber-nav) + 62px); }
@media (min-width: 900px) {
  .auftragsleiste { bottom: 28px; left: calc(var(--leiste-breite) + 16px); }
  body.mit-auftragsleiste .toast { bottom: 86px; }
}

/* Konfetti nach dem letzten Haken */
.schnipsel {
  position: fixed; top: -12px; z-index: 90;
  width: 8px; height: 14px;
  border-radius: 2px;
  pointer-events: none;
  animation: schnipseln 2.4s ease-in forwards;
}

/* Die Abläufe selbst stehen in bewegung.css. Wer Bewegung abbestellt hat,
   bekommt jede Animation sofort an ihrem Ende stehend. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ Dunkel */

:where(:root[data-theme="dark"]) .meldung { color: var(--rot-text); }
:where(:root[data-theme="dark"]) .meldung.gut { color: #bfe6cf; }
:where(:root[data-theme="dark"]) .gekochtfeld { color: #bfe6cf; }
:where(:root[data-theme="dark"]) .meldung.hinweis { color: var(--blau-text); }
:where(:root[data-theme="dark"]) .meldung.gelb { color: #f0c98a; }
:where(:root[data-theme="dark"]) .marke-chip.gelb { color: #f0c98a; }
:where(:root[data-theme="dark"]) .marke-chip.rot  { color: #f0a9a4; }
:where(:root[data-theme="dark"]) .marke-chip.blau { color: #b9cdf0; }
:where(:root[data-theme="dark"]) .timerchip { color: #b9cdf0; }
:where(:root[data-theme="dark"]) .timerchip-weg:hover { background: rgba(255, 255, 255, .12); }
:where(:root[data-theme="dark"]) .kochblatt-schatten { background: rgba(0, 0, 0, .55); }
:where(:root[data-theme="dark"]) .kochname .avatar { color: #b9cdf0; }
:where(:root[data-theme="dark"]) .tipprahmen { box-shadow: 0 0 0 3px var(--primaer), 0 0 0 200vmax rgba(0, 0, 0, .6); }
:where(:root[data-theme="dark"]) .auftragsleiste[data-zustand="fehler"] { background: var(--rot-hell); color: #f3c1bd; }
:where(:root[data-theme="dark"]) .knopf.laedt::after { border-color: rgba(0, 0, 0, .25); border-top-color: #0e1a13; }
:where(:root[data-theme="dark"]) .schalter .schalterknopf::after { background: #e9e6df; }
:where(:root[data-theme="dark"]) .marke-zeichen { color: #0e1a13; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) .meldung { color: var(--rot-text); }
  :where(:root:not([data-theme="light"])) .meldung.gut { color: #bfe6cf; }
  :where(:root:not([data-theme="light"])) .gekochtfeld { color: #bfe6cf; }
  :where(:root:not([data-theme="light"])) .meldung.hinweis { color: var(--blau-text); }
  :where(:root:not([data-theme="light"])) .meldung.gelb { color: #f0c98a; }
  :where(:root:not([data-theme="light"])) .marke-chip.gelb { color: #f0c98a; }
  :where(:root:not([data-theme="light"])) .marke-chip.rot  { color: #f0a9a4; }
  :where(:root:not([data-theme="light"])) .marke-chip.blau { color: #b9cdf0; }
  :where(:root:not([data-theme="light"])) .timerchip { color: #b9cdf0; }
  :where(:root:not([data-theme="light"])) .timerchip-weg:hover { background: rgba(255, 255, 255, .12); }
  :where(:root:not([data-theme="light"])) .kochblatt-schatten { background: rgba(0, 0, 0, .55); }
  :where(:root:not([data-theme="light"])) .kochname .avatar { color: #b9cdf0; }
  :where(:root:not([data-theme="light"])) .tipprahmen { box-shadow: 0 0 0 3px var(--primaer), 0 0 0 200vmax rgba(0, 0, 0, .6); }
  :where(:root:not([data-theme="light"])) .auftragsleiste[data-zustand="fehler"] { background: var(--rot-hell); color: #f3c1bd; }
  :where(:root:not([data-theme="light"])) .knopf.laedt::after { border-color: rgba(0, 0, 0, .25); border-top-color: #0e1a13; }
  :where(:root:not([data-theme="light"])) .schalter .schalterknopf::after { background: #e9e6df; }
  :where(:root:not([data-theme="light"])) .marke-zeichen { color: #0e1a13; }
}

/* Untergliederung innerhalb aufgeklappter Einstellungen */
.einstellung-inhalt h2 { font-size: 1rem; margin: 16px 0 8px; }
.einstellung-inhalt > div:first-child > h2:first-child, .einstellung-inhalt > h2:first-child { margin-top: 0; }
.einstellung-inhalt .mahlzeit-zeile:first-of-type { border-top: 0; }
.einstellungen-karte { padding: 4px 18px; }

/* ------------------------------------------------ Hervorheben, Doppelgänger */

.hervorgehoben { animation: hervorheben-puls 1.6s ease-out; }
/* Eine Zutat auf der Rezeptseite, angesprungen von der Einkaufsliste: Der
   Schein braucht links und rechts etwas Luft, die Zeile selbst hat keine. */
.liste > li.hervorgehoben { margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: var(--radius-klein); }
.extraszeile.hervorgehoben { margin-left: -8px; margin-right: -8px; padding-left: 8px; border-radius: var(--radius-klein); }
/* Der Vorschlag gleicht einem schon Gekochten - darunter die Wahl, ob das
   alte noch einmal oder etwas Neues. Rückt nah an seine Kachel heran. */
/* Die Gerichte aus der Nacht auf der Spontan-Seite: je Mahlzeit eine
   leise Zwischenzeile, darunter die Karten wie bei den eigenen Vorschlägen. */
.nachtmahlzeit {
  margin: 6px 2px -2px;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-2);
}
.nachtgericht { display: flex; flex-direction: column; gap: 12px; }
.nachtgericht > .doppelgaenger { margin-top: -6px; }
.doppelgaenger {
  margin-top: -6px;
  padding: 10px 12px;
  border-radius: var(--radius-klein);
  background: var(--blau-hell);
}
.doppelgaenger p { margin: 0 0 8px; }
/* Der Vorschlag hat mehr, als heute noch in die Tagesübersicht passt. */
.tageshinweis {
  margin: -6px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-klein);
  background: var(--gelb-hell);
}
.doppelgaenger-wahl { display: flex; flex-wrap: wrap; gap: 8px; }

/* Schalterleiste: zwei oder drei Möglichkeiten nebeneinander, eine ist an.
   Zuerst für die Ortswahl bei Spontan gebaut (Zuhause oder Büro), inzwischen
   auch für den Rezept-Anbieter in der Verwaltung - deshalb der zweite,
   allgemeine Name neben dem ersten. */
.ortwahl, .schalterwahl { display: inline-flex; padding: 3px; background: var(--flaeche-3); border-radius: var(--radius-rund); flex: none; }
.ortknopf, .schalterknopf { position: relative; cursor: pointer; }
.ortknopf input, .schalterknopf input { position: absolute; opacity: 0; width: 0; height: 0; }
.ortknopf span, .schalterknopf span {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 0 11px;
  border-radius: var(--radius-rund);
  font-size: .84rem; font-weight: 600; color: var(--text-2);
  transition: background var(--dauer), color var(--dauer);
}
.ortknopf span .ikon, .schalterknopf span .ikon { width: 15px; height: 15px; }
.ortknopf input:checked + span, .schalterknopf input:checked + span { background: var(--flaeche); color: var(--text); box-shadow: var(--schatten); }
.ortknopf input:focus-visible + span, .schalterknopf input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--primaer) 45%, transparent); }

/* Die runden Knöpfe oben rechts auf dem Rezept (merkknopf, fotoknopf,
   ausschnittknopf) sind Glasknöpfe (.rundglas). */
.merkknopf, .ausschnittknopf, .fotoknopf { -webkit-tap-highlight-color: transparent; }
.merkknopf:disabled { opacity: .45; cursor: default; }
.fotoform { display: contents; }
/* Das Titelbild ist ein Knopf: angetippt zeigt es alle Fotos zum Rezept.
   Stehen mehrere da, sagt ein Abzeichen rechts über den Knöpfen, wie viele. */
.rezeptfoto-knopf {
  display: block; position: relative;
  width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
}
.fotozahl {
  position: absolute; right: 12px; bottom: 44px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-rund);
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: .8rem; font-weight: 600;
}
.fotozahl .ikon { width: 15px; height: 15px; }
.rezeptfoto-rahmen { position: relative; }
/* Unten links auf dem Foto, über dem Rand des Blatts. */
.fotovon {
  position: absolute; left: 12px; bottom: 44px;
  padding: 4px 10px;
  border-radius: var(--radius-rund);
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: .8rem; font-weight: 600; text-decoration: none;
}
.fotoschau-von { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Die Fotoschau: randlos schwarz, in beiden Farbfassungen - ein Foto
   will keinen hellen Rahmen. */
dialog.fotoschau {
  border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  background: #000; color: #fff;
  display: none; flex-direction: column;
}
dialog.fotoschau[open] { display: flex; }
dialog.fotoschau::backdrop { background: #000; }
.fotoschau-leiste {
  flex: 1; min-height: 0;
  display: flex;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-top: env(safe-area-inset-top);
}
.fotoschau-leiste::-webkit-scrollbar { display: none; }
.fotoschau-bild {
  flex: 0 0 100%; min-width: 0; margin: 0;
  scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 12px;
}
.fotoschau-bild img { max-width: 100%; max-height: calc(100% - 60px); object-fit: contain; border-radius: var(--radius-klein); }
/* Gezoomt: das Foto füllt den Schirm und folgt dem Finger. */
.fotoschau-bild img { cursor: zoom-in; transition: transform var(--dauer-lang) var(--kurve); }
.fotoschau-bild.gezoomt { overflow: hidden; }
.fotoschau-bild.gezoomt img { cursor: grab; touch-action: none; }
.fotoschau-bild.gezoomt img.verschiebt { cursor: grabbing; transition: none; }
.fotoschau-bild.gezoomt figcaption { visibility: hidden; }
.fotoschau-leiste.gezoomt { overflow-x: hidden; }
.fotoschau-bild figcaption {
  color: rgba(255, 255, 255, .8);
  display: flex; align-items: center; gap: 12px;
}
.fotoschau-bild figcaption form { margin: 0; }
.fotoschau .knopf.leise { background: rgba(255, 255, 255, .16); color: #fff; border-color: transparent; }

/* ------------------------------------------------------- Bildausschnitt */
/* Ein eigenes Foto mit Ausschnitt trägt data-ausschnitt und vier Zahlen:
   die Mitte (--ax, --ay, Anteil von Breite und Höhe des Fotos), den Zoom
   (--az) und das Seitenverhältnis (--seite). Daraus rechnet sich das Foto
   in jedem Rahmen selbst aus - breit, quadratisch oder rund: Es deckt den
   Rahmen (wie object-fit: cover), mal Zoom, die Mitte so mittig wie
   möglich; nah am Rand bleibt es am Rand stehen statt eine Lücke zu
   zeigen. Dafür muss der Rahmen ein Container mit fester Größe sein.
   Ohne data-ausschnitt gilt, was immer galt: mittig. */
img[data-ausschnitt] {
  position: absolute; right: auto; bottom: auto;
  max-width: none; object-fit: fill;
  --b: calc(var(--az) * max(100cqw, 100cqh * var(--seite)));
  width: var(--b); height: calc(var(--b) / var(--seite));
  left: clamp(100cqw - var(--b), 50cqw - var(--ax) * var(--b), 0px);
  top: clamp(100cqh - var(--b) / var(--seite), 50cqh - var(--ay) * var(--b) / var(--seite), 0px);
}
.gerichtkarte-bild:has(> img[data-ausschnitt]),
.rezeptfoto-knopf:has(> img[data-ausschnitt]),
.ausschnitt-rahmen:has(> img[data-ausschnitt]) { container-type: size; overflow: hidden; }
.rezeptfoto-knopf:has(> img[data-ausschnitt]),
.ausschnitt-rahmen:has(> img[data-ausschnitt]) { aspect-ratio: 16 / 10; }
.ausschnitt-rahmen { position: relative; overflow: hidden; }
.ausschnitt-rahmen > img { display: block; }


/* Das Blatt zum Einstellen: unten anliegend wie die Rückmeldung. */
dialog.ausschnittblatt {
  border: 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  width: min(100%, 520px); max-width: 100%;
  max-height: calc(100dvh - 24px);
  background: var(--flaeche); color: var(--text);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--schatten-hoch);
  margin: auto 0 0;
}
dialog.ausschnittblatt[open] { animation: blatt-auf var(--dauer-lang) var(--kurve); }
dialog.ausschnittblatt::backdrop { background: var(--schleier); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog.ausschnittblatt h2 { margin: 0 0 12px; font-size: 1.15rem; }
/* Die Fläche schmiegt sich ans Foto, damit die Rahmen darüber genau
   auf ihm liegen - quer füllt es die Breite, hochkant begrenzt die Höhe. */
.ausschnitt-flaeche {
  position: relative;
  width: fit-content; max-width: 100%; margin: 0 auto;
  border-radius: var(--radius-klein); overflow: hidden;
}
.ausschnitt-flaeche > img { display: block; max-width: 100%; max-height: 56dvh; width: auto; height: auto; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.ausschnitt-flaeche > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Über dem Foto, nicht über dem Theme: abgedunkelt und weiß in beiden Fassungen. */
.ausschnitt-flaeche .ausserhalb { fill: rgba(0, 0, 0, .5); }
.ausschnitt-flaeche .linie { fill: none; stroke: #fff; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ausschnitt-flaeche .linie.kreis { stroke-dasharray: 6 5; }
.ausschnitt-zoom { display: flex; align-items: center; gap: 10px; margin: 14px 0; }
.ausschnitt-zoom > .ikon { width: 20px; height: 20px; color: var(--text-2); flex: none; }
.ausschnitt-zoom input[type="range"] { flex: 1; min-width: 0; accent-color: var(--primaer); }
.ausschnitt-knoepfe { justify-content: flex-end; }
@media (min-width: 900px) {
  dialog.ausschnittblatt { margin: auto; border-radius: var(--radius); }
  dialog.ausschnittblatt[open] { animation-name: aufsteigen; }
}
.fotoschau-fuss {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
/* Die Bildschau zeigt ein einzelnes Bild so breit wie möglich - die
   Zutatenbilder sind klein gerechnet und blieben sonst briefmarkengroß. */
.bildschau { cursor: zoom-out; }
.bildschau .fotoschau-bild img { width: 100%; max-width: min(100%, 560px); height: auto; }
/* Was sich groß zeigen lässt, sagt es dem Mauszeiger. */
[data-bildschau] { cursor: zoom-in; }
img.zutatbild { object-fit: cover; }
/* Die Fotofrage am Ende des Kochens: dasselbe unsichtbare Dateifeld wie
   am Kamerazeichen, angetippt wird der Knopf. */
.kochfoto-knopf { position: relative; cursor: pointer; }
.kochfoto-knopf input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }
.kochfoto-knopf:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primaer) 45%, transparent); }
.kochfoto-vorschau {
  display: block; margin-top: 10px;
  width: 100%; max-width: 260px; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-klein);
}
/* „In den Wagen" ist ein Umschalter wie die Chips - liegt es drin, ist es
   gefüllt. */
.knopf.rand.an { background: var(--primaer); border-color: var(--primaer); color: #fff; }

/* ------------------------------------------------------ Einkauf (Bento) */
/* Die Liste als Zeilen in Regal-Kacheln, vorn rund das Bild der Zutat
   (Mockup, Einkauf A „Zeilen mit antippbaren Bildern"). */
.regal { padding: 12px 12px 6px; }
.regal .abschnittkopf { margin: 0 4px 2px; }
.regal .abschnittkopf h2 { font-size: .95rem; }
.regal .abschnittzeichen { width: 30px; height: 30px; border-radius: 10px; }
.regal .abschnittzeichen .pikto { width: 18px; height: 18px; }
.einkaufszeile .zutatbild { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.einkaufszeile .zutatbild .pikto { width: 22px; height: 22px; }
.einkaufsliste > li + li { border-top: 1px solid var(--linie); }
.einkaufskopf { border-radius: var(--radius-kachel); padding: 12px 18px 12px 12px; }
.knopfreihe { display: flex; gap: 8px; align-items: center; }
.knopfreihe.links { justify-content: flex-start; flex-wrap: wrap; }
.knopfreihe > form { display: contents; }

/* ------------------------------------------------------ Rezepte (Bento) */
/* Kochbuch und Verlauf: Reiter, je Reiter zwei Kacheln nebeneinander
   (Mockup, Rezepte C). Beim Suchen stehen alle Gruppen mit Treffern da. */
.suchblock { display: flex; flex-direction: column; }
.buchreiter { margin-top: 2px; }
.kochbuch .kochbuchgruppe { display: none; }
.kochbuch .kochbuchgruppe.an, .kochbuch.sucht .kochbuchgruppe:not([hidden]) { display: block; }
.gruppentitel { display: none; margin: 4px 6px 8px; font-size: .95rem; }
.kochbuch.sucht .gruppentitel { display: block; }
.kachelreihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 196px; gap: 10px; }
@media (min-width: 560px) { .kachelreihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kachelhuelle { position: relative; min-width: 0; }
.kachelhuelle > .kachel { height: 100%; }
.kachelhuelle.versteckt { display: none; }
.kachelknoepfe {
  position: absolute; z-index: 2; top: 8px; right: 8px;
  display: flex; gap: 6px;
}
.kachelknoepfe.links { right: auto; left: 8px; }
.kachelknoepfe .rundknopf { width: 32px; height: 32px; }
.kachelknoepfe .rundknopf .ikon { width: 16px; height: 16px; }
.kachelecke.blau { color: var(--blau); }

/* ---------------------------------------------------------- Ich (Bento) */
/* Kopf mit dem Anfangsbuchstaben im Kreis, die Einstellungen als Kacheln
   zu zweit; jede holt ihr Blatt (Mockup, Ich A). */
.ichname { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar.gross {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primaer-hell); color: var(--primaer);
  font-family: var(--schrift-zahl); font-weight: 800; font-size: 1.3rem;
}
.gruppentitel.sichtbar { display: block; margin: 6px 6px -4px; font-size: 1.05rem; }
.ich-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ich-kachel {
  min-width: 0; border: 0; text-align: left;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px;
  border-radius: 26px;
  font: inherit; color: var(--text);
  background: var(--flaeche);
  box-shadow: var(--schatten-kachel), inset 0 0 0 1.5px var(--kachel-rand);
  cursor: pointer;
}
.ich-kachel strong { font-size: .98rem; }
.ich-kurz {
  font-size: .78rem; color: var(--text-2); line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.ich-zeichen {
  width: 36px; height: 36px; margin-bottom: 4px;
  display: grid; place-items: center;
  border-radius: 12px; background: var(--primaer-hell); color: var(--primaer);
}
.ich-zeichen .pikto { width: 20px; height: 20px; }

/* Die Korbleiste über der Navigation (Mockup, Einkauf): Abgehaktes fliegt
   hinein, ein Tipp zeigt den Korb; alles drin, wird sie zu „Einkauf
   abschließen". */
.korbleiste {
  position: fixed; z-index: 46;
  left: 14px; right: 14px; margin-inline: auto; max-width: 520px;
  bottom: calc(var(--ueber-nav) + 2px);
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 22px;
}
.korbleiste > form { flex: 1; }
.korbleiste-auf {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px; border: 0; background: none;
  font: inherit; font-size: .9rem; font-weight: 650; color: var(--text);
  text-align: left; cursor: pointer;
}
.korbleiste-auf > span:nth-child(2) { flex: 1; }
.korbzeichen {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--primaer-hell); color: var(--primaer);
}
.korbzeichen .pikto { width: 20px; height: 20px; }
.korbpfeil { width: 18px; height: 18px; color: var(--text-3); }
.korbleiste:has(#kopf-abschluss:not([hidden])) .korbleiste-auf { display: none; }
body:has(.korbleiste:not([hidden])) { padding-bottom: calc(var(--ueber-nav) + 90px); }
body:has(.korbleiste:not([hidden])) .toast { bottom: calc(var(--ueber-nav) + 76px); }
body:has(.korbleiste:not([hidden])) .rueckmeldung-knopf { bottom: calc(var(--ueber-nav) + 74px); }
@media (min-width: 900px) { .korbleiste { left: calc(var(--leiste-breite) + 16px); } }
.zutatbild.fliegt { position: fixed; z-index: 80; margin: 0; pointer-events: none; }


/* ----------------------------------------------------- Hell/Dunkel-Knopf */
/* Klein und oben rechts auf jeder Seite; scrollt mit weg statt über dem
   Inhalt zu schweben. Zeigt, wohin ein Tipp umschaltet. */

.modusknopf {
  position: absolute;
  top: calc(max(14px, env(safe-area-inset-top)) + 3px);   /* Mitte auf der Höhe der 40-px-Knöpfe */
  right: 14px;
  z-index: 30;
  width: 34px; height: 34px;
  color: var(--text-2);
  opacity: .85;
}
.modusknopf:hover, .modusknopf:focus-visible { opacity: 1; color: var(--primaer); }
.modusknopf span { display: contents; }
.modusknopf .pikto { width: 19px; height: 19px; }
.modusknopf[data-modus="dunkel"] .modus-mond,
.modusknopf[data-modus="hell"] .modus-sonne { display: none; }
/* Beginnt ein Kopf gleich mit dem Titel (kein Zurück, kein Umschalter
   darüber), läuft die Zeile nicht unter den Knopf. */
.seitenkopf > :first-child:not(.kopfzeile) { padding-right: 42px; }
/* Die Foto-Knöpfe oben rechts auf dem Rezept rücken eine Stelle nach links. */
.nebenknoepfe { right: 58px; }
@media (min-width: 900px) {
  .modusknopf { top: 21px; right: 22px; }
  .seitenkopf > :first-child:not(.kopfzeile) { padding-right: 0; }
  .nebenknoepfe { right: 14px; }
}