/* =============================================================================
   Mini Cafe · Fassung 2 · seite-bowl.css — „Bowl selber bauen“
   Fassung 2: kein Lichtschein/Bogen hinter der Schüssel (4.2.1) – sie steht auf einer ruhigen Tischfläche;
   „Weiter zu …“ und „Fertig“ immer gold mit dunkler Schrift (4.3.1, 9.5.3); Fertig-Block mit Warenkorb-Knopf (9.5.4).
   Nur Rollen-Variablen aus basis.css, Bausteine aus bausteine.css. Neu hier:
   Schritt-Reihe (zugeklappt/offen), Schüssel-Etiketten, Protein-Haken, Zusammenfassung.
   Handy: Schüssel klebt oben unter dem schmalen Kopf. Computer (ab 1024 px): links groß und mitlaufend.
   ============================================================================= */

/* Infozeile gehört nicht in den Baukasten (data-infozeile="aus" am Body löscht wegen abholzeit.js den ganzen Body → hier per CSS) */
.infozeile-leiste { display: none; }
.bau { --bs: 150px; padding: 0 var(--rand) 8px; }

/* ---------- Schüssel (Handy: klebend unter dem Kopf) ---------- */
.bau-links {
  position: sticky; top: 60px; z-index: 20;
  margin-inline: calc(-1 * var(--rand)); padding: 4px var(--rand) 10px;
  background: var(--grund);
}
.bau-schuessel { position: relative; }
html[data-look] .bau .schuessel { width: var(--bs); height: var(--bs); }
/* ruhige Tischfläche statt Bogen oder Lichtschein: Fundament-Flächen, in beiden Looks gleich gebaut */
html[data-look] .bau .schuessel-feld {
  height: auto; padding: 14px 0 16px; border-radius: var(--rund-gross); background: var(--flaeche-tief);
}
html[data-look="dunkel"] .bau .schuessel-feld { background: var(--flaeche); }

.bau-etikett {
  position: absolute; z-index: 2;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 1px;
  border-radius: var(--rund-pille); background: var(--flaeche); color: var(--text);
  font: 700 13px/1.2 var(--schrift);
}
.bau-etikett--groesse { left: 12px; top: 12px; height: 28px; padding: 0 12px; }
/* laufender Preis, klein oben rechts an der Schüssel (nur Handy; am Computer steht er links in „Deine Bowl“) */
.bau-etikett--preis { right: 12px; top: 12px; height: 28px; padding: 0 12px; font-variant-numeric: tabular-nums; }
/* Handy: klein in die Ecke, damit es den Schüsselrand nicht überdeckt */
.bau-etikett--allergene { right: 6px; bottom: 6px; max-width: 96px; padding: 4px 8px 5px; border-radius: 12px; align-items: flex-end; text-align: right; font-size: 12px; line-height: 1.2; }
.bau-etikett--allergene .et-klein { font-size: 10.5px; }
.bau-etikett--allergene[hidden] { display: none; }
.et-klein { font-size: 12px; font-weight: 500; color: var(--text-neben); }
.et-offen { color: var(--text); font-weight: 600; }
html[data-look="dunkel"] .bau-etikett { background: var(--flaeche-tief); }

/* ---------- Schritte: immer nur einer sichtbar (Schrittleiste oben, Zurück/Weiter in #bau-nav) ---------- */
.bau-schritte { padding-top: 6px; }
.schritt[hidden] { display: none; }
.schritt { scroll-margin-top: 236px; }

.schritt-kopf h2 { font-size: 26px; letter-spacing: var(--sperrung-titel); }
html[data-look="dunkel"] .schritt-kopf h2 { font-size: 32px; }
.schritt-kopf h2:focus { outline: none; }
.schritt-kopf h2:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; border-radius: 8px; }
.schritt-feld { margin-top: 14px; }
.schritt-zaehler.ist-voll { background: var(--akzent); color: var(--auf-akzent); }
html[data-look="dunkel"] .schritt-zaehler.ist-voll { background: var(--gewaehlt); color: var(--auf-gewaehlt); }
.schritt-klaeren { margin-top: 10px; }
.schritt-hinweis {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 11px 14px;
  border-radius: var(--rund-feld); background: var(--flaeche-tief); color: var(--text); font: 500 15px/1.35 var(--schrift);
}
.schritt-hinweis[hidden] { display: none; }
.schritt-hinweis .symbol { width: 20px; height: 20px; margin-top: 1px; }
.schritt-hinweis.blitz { animation: bau-blitz 520ms var(--kurve-gleiten); }
@keyframes bau-blitz { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }

/* Gold-Knopf (nur Baukasten): „Weiter zu …“ und „Fertig“ – immer gold, dunkle Schrift (≈ 9 : 1), beide Looks */
.knopf--gold { background: var(--akzent); color: var(--auf-akzent); }
.knopf--gold:active { background: color-mix(in srgb, var(--akzent) 86%, #000); }
@media (hover: hover) and (pointer: fine) {
  .knopf--gold:not([aria-disabled="true"]):hover { background: color-mix(in srgb, var(--akzent) 90%, #000); }
}
/* noch nichts gewählt (Sauce, Crunch): bleibt gold umrandet und lesbar, statt grau zu verschwinden */
.knopf--gold[aria-disabled="true"] {
  background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--akzent); cursor: pointer;
}

/* Größe: zwei große Felder */
.groesse--gross button { min-height: 64px; }
.groesse--gross .groesse-name { font-size: 17px; }
.groesse--gross .preis { font-size: 16px; font-weight: 600; }
html[data-look="dunkel"] .groesse--gross button { min-height: 60px; }

/* Kacheln im Baukasten */
.kachel { cursor: pointer; }
.kachel.ist-gesperrt { cursor: not-allowed; }
.kachel-leer { width: 58px; height: 58px; display: grid; place-items: center; }
.kachel-leer .symbol { width: 40px; height: 40px; padding: 9px; border-radius: 50%; background: var(--flaeche-tief); stroke-width: 2.2; }
html[data-look="dunkel"] .kachel-leer { width: 56px; height: 56px; }
/* tu-g3 (W16): gezeichnetes Soßen-Zeichen statt X, gleiche Größe wie die PNG-Kacheln (.kachel img) */
.kachel-sosse { width: 58px; height: 58px; flex: none; display: block; overflow: visible; }
html[data-look="dunkel"] .kachel-sosse { width: 56px; height: 56px; }
.kachel[aria-pressed="true"] .kachel-leer .symbol, .kachel[aria-checked="true"] .kachel-leer .symbol { background: var(--grund-tief); color: var(--text); }
html[data-look="hell"] .kachel[aria-pressed="true"] .kachel-leer .symbol { background: var(--flaeche-tief); color: var(--text); }

/* Protein-Bühne im Baukasten */
.bau .buehne { margin-inline: 0; }
.bau .buehne:focus-visible { outline-offset: 2px; }
.protein-info { margin-top: -2px; }
.protein-info .buehne-name { font-size: 24px; }
html[data-look="dunkel"] .protein-info .buehne-name { font-size: 30px; }
.protein-knopf { margin-top: 14px; min-height: 56px; }
.symbol-klein { display: inline-flex; }
.symbol-klein .symbol { width: 20px; height: 20px; stroke-width: 3; }
.protein-haken {
  position: absolute; right: 14%; top: 12%; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  background: var(--akzent); color: var(--auf-akzent); display: none; place-items: center;
}
.protein-haken .symbol { width: 20px; height: 20px; stroke-width: 3; }
.buehne-teil.ist-gewaehlt .protein-haken { display: grid; }

/* Protein-Bühne: Zeichnung größer, Pfeile in beiden Looks unter dem Bild (nicht über den Nachbarn) */
.bau .buehne--klein .buehne-bild > img { scale: 1.5; }
html[data-look="dunkel"] .bau .buehne-pfeil--seite { display: none; }
html[data-look="dunkel"] .protein-info .buehne-wahl { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; margin-top: 4px; }
html[data-look="dunkel"] .protein-info .buehne-wahl .rund, html[data-look="dunkel"] .protein-info .buehne-zaehler { display: grid; }
html[data-look="dunkel"] .protein-info .buehne-zaehler { display: block; }

/* Übersicht: Wege danach */
.bau-fertig-danach { display: grid; gap: 10px; margin-top: 14px; }
.bau-fertig-danach[hidden] { display: none; }
.bau-neu { justify-self: center; min-height: var(--tippen); padding: 0 12px; font: 600 15px/1 var(--schrift); color: var(--text); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.bau-neu:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 8px; }

/* ---------- Zusammenfassung ---------- */
.bau-summe { margin-top: 20px; padding: 18px 18px 16px; border-radius: var(--rund-karte); background: var(--flaeche); }
.summe-titel { font-size: 22px; }
html[data-look="dunkel"] .summe-titel { font-size: 28px; }
.summe-liste { display: grid; gap: 7px; margin-top: 12px; }
.sz { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font: 500 15px/1.35 var(--schrift); }
.sz dt { color: var(--text-neben); }
.sz dd { margin: 0; overflow-wrap: anywhere; }
.sz .leer, .summe-allergene .leer { color: var(--text-neben); }
.sz .preis { font-weight: 600; color: var(--text); text-align: right; }
.summe-gesamt { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding: 12px 14px; border-radius: var(--rund-feld); background: var(--flaeche-tief); font: 700 18px/1 var(--schrift); }
.summe-allergene { margin-top: 14px; }
.summe-allergene h3 { font: 700 15px/1.2 var(--schrift); letter-spacing: 0; }
.summe-allergene ul { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; list-style: none; padding: 0; font: 500 14px/1.4 var(--schrift); }
.summe-allergene p { margin-top: 6px; font-size: 14px; }
.summe-allergene p:has(.abzeichen) { margin-top: 10px; }
.summe-punkte { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font: 500 14px/1.4 var(--schrift); color: var(--text-neben); }
.summe-punkte strong { color: var(--text); font-weight: 700; }
.summe-punkte .symbol, .summe-punkte .muenze-bild { width: 22px; height: 22px; margin-top: 1px; }

/* ---------- Einleitung und Schrittleiste ---------- */
.bau-einleitung { margin: 4px 0 12px; font: 500 16px/1.4 var(--schrift); color: var(--text-neben); }
.bau-einleitung[hidden] { display: none; }
.bau-fortschritt { margin-bottom: 16px; scroll-margin-top: 236px; }
.bau-fortschritt ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 0; padding: 0; }
.fs {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%; min-height: 44px; padding: 4px 0 2px;
  background: none; border: 0; cursor: pointer; font: 600 11px/1.1 var(--schrift); color: var(--text-neben); text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.fs:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 10px; }
.fs-strich {
  display: grid; place-items: center; width: 100%; height: 22px; border-radius: 11px; background: var(--flaeche-tief);
  font: 700 12px/1 var(--schrift); transition: background-color 160ms var(--kurve-gleiten), box-shadow 160ms var(--kurve-gleiten);
}
.fs-haken { display: none; place-items: center; }
.fs-haken .symbol { width: 14px; height: 14px; stroke-width: 3; }
.fs[data-stand="fertig"] .fs-strich { background: var(--haupt, #2f6b4f); color: #fff; }
.fs[data-stand="fertig"] .fs-nr { display: none; }
.fs[data-stand="fertig"] .fs-haken { display: grid; }
.fs[data-stand="fertig"] .fs-name { color: var(--text); }
.fs[data-stand="offen"] .fs-strich { background: transparent; box-shadow: inset 0 0 0 2px var(--text-neben); }
.fs[data-stand="jetzt"] .fs-strich { background: var(--text); color: var(--grund); }
.fs[data-stand="jetzt"] .fs-name { color: var(--text); font-weight: 800; }
.fs[data-stand="kommt"] { opacity: .55; cursor: default; }
html[data-look="dunkel"] .fs[data-stand="jetzt"] .fs-strich { background: var(--akzent); color: var(--auf-akzent); }
.schritt-stand { display: block; margin-bottom: 4px; font: 600 13px/1.2 var(--schrift); color: var(--text-neben); }

/* ---------- Übersicht „Fast fertig“ ---------- */
.sz.sz--aendern { grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; }
.sz-aendern { min-height: 44px; padding: 0 4px; font: 600 14px/1 var(--schrift); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--text); }
.sz-aendern:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 8px; }
.bau.ist-uebersicht .bau-summe.nur-computer { display: none; }
.bau-uebersicht .bau-summe { margin-top: 12px; }

/* ---------- Navigation Zurück · Preis · Weiter (Handy: fest unten) ---------- */
.bau-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--leiste-unten);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .07); padding: 10px var(--rand) calc(12px + env(safe-area-inset-bottom, 0px));
}
.bau-nav-reihe { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; }
.bau-nav .knopf { width: auto; min-height: 52px; padding: 0 14px; justify-content: center; gap: 6px; white-space: normal; text-align: center; line-height: 1.15; transition: background-color 160ms var(--kurve-gleiten), opacity 160ms var(--kurve-gleiten); }
.bau-nav .knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }
.bau-nav .knopf[aria-disabled="true"] { background: var(--flaeche-tief); color: var(--text-neben); box-shadow: none; opacity: .6; cursor: not-allowed; }
.bau-nav-preis { display: grid; margin: 0; text-align: center; font: 700 17px/1.1 var(--schrift); font-variant-numeric: tabular-nums; }
.bau-nav-gesamt { font: 500 12px/1.2 var(--schrift); color: var(--text-neben); }
.bau-nav-hinweis { margin: 0 0 8px; text-align: center; font: 500 14px/1.3 var(--schrift); color: var(--text); }
.bau-nav-hinweis[hidden] { display: none; }
.bau-nav-hinweis.blitz { animation: bau-blitz 520ms var(--kurve-gleiten); }
@media (max-width: 1023.98px) {
  body.hat-leiste { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  .bau-rechts { min-height: 58svh; }   /* kurzer Schritt: Fußzeile bleibt unter der Leiste, nicht mitten im Bild */
}

/* ---------- Computer ---------- */
@media (min-width: 1024px) {
  .bau { --bs: 290px; display: grid; grid-template-columns: minmax(420px, 480px) minmax(0, 700px); gap: 72px; align-items: start; padding-top: 24px; padding-bottom: 64px; justify-content: start; }
  .bau-links { top: calc(var(--kopf-klebt) + 20px); margin: 0; padding: 0; background: none; z-index: 1; }
  html[data-look] .bau .schuessel-feld { padding: 40px 0 44px; }
  .bau-etikett--groesse { left: 18px; top: 18px; font-size: 14px; height: 32px; padding: 0 14px; }
  .bau-etikett--allergene { right: 18px; bottom: 16px; max-width: 150px; font-size: 16px; }
  .et-klein, .bau-etikett--allergene .et-klein { font-size: 13px; }
  .bau-fertig-danach { grid-template-columns: 1fr 1fr; }
  .bau-fertig-danach .bau-neu { grid-column: 1 / -1; }
  .schritt-kopf h2 { font-size: 32px; }
  html[data-look="dunkel"] .schritt-kopf h2 { font-size: 40px; }
  .schritt-kopf p { font-size: 17px; }
  .schritt-feld { margin-top: 18px; }
  .schritt-hinweis { font-size: 16px; }
  .groesse--gross { max-width: 520px; }
  .groesse--gross button { min-height: 72px; }
  .protein-knopf { width: auto; min-width: 300px; min-height: 60px; display: flex; margin-inline: auto; padding: 0 36px; }
  .bau-summe { margin-top: 16px; padding: 18px 22px 16px; }
  .summe-titel { font-size: 24px; }
  .sz { grid-template-columns: 86px minmax(0, 1fr) auto; font-size: 16px; }
  .bau-summe.nur-computer { display: block; }
  .bau .kacheln { gap: 10px; }
  .kachel, html[data-look="dunkel"] .kachel { min-height: 132px; padding-top: 14px; font-size: 16px; }
  .kachel img, html[data-look="dunkel"] .kachel img, .kachel-leer, .kachel-sosse, html[data-look="dunkel"] .kachel-sosse { width: 68px; height: 68px; }
  .kachel-extra, html[data-look="dunkel"] .kachel-extra { font-size: 14px; }
  main > .seitenkopf p { max-width: none; }
  /* Navigation: klebt unter der rechten Spalte, ruhige Karte */
  .bau-nav { position: sticky; left: auto; right: auto; bottom: 24px; margin-top: 24px; padding: 14px 16px; border-radius: var(--rund-karte); background: var(--flaeche); box-shadow: 0 6px 24px rgba(0, 0, 0, .10); z-index: 30; }
  .bau-nav-reihe { grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; }
  .bau-nav .knopf { padding: 0 24px; }
  #bau-fortschritt { scroll-margin-top: calc(var(--kopf-klebt) + 20px); }
  .fs { font-size: 13px; }
  .bau-einleitung { font-size: 17px; }
}
@media (min-width: 1024px) and (max-height: 880px) {
  .bau { --bs: 250px; }
  html[data-look] .bau .schuessel-feld { padding: 28px 0 32px; }
  .summe-liste { gap: 4px; margin-top: 8px; }
  .summe-allergene { margin-top: 10px; }
  .summe-punkte { margin-top: 10px; }
}

/* Schritt kommt sanft herein (kurz) */
.schritt.ist-neu { animation: bau-ein 200ms ease-out; }
@keyframes bau-ein { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .schritt.ist-neu, .schritt-hinweis.blitz, .bau-nav-hinweis.blitz { animation: none; }
  .fs-strich, .bau-nav .knopf { transition: none; }
}

/* Protein ohne Foto (Tofu): ruhiger Kreis mit „Foto folgt“ statt Kreuz-Symbol (Etappe B2) */
.kachel-leer--ohne-foto {
  width: 58px; height: 58px; border-radius: 50%; background: var(--flaeche-tief); color: var(--text-leise, var(--text));
  font-size: 11px; line-height: 1.15; text-align: center; padding: 6px; box-sizing: border-box; opacity: .75;
}
@media (min-width: 700px) { .kachel-leer--ohne-foto { font-size: 12px; } }
@media (max-width: 699px) { .kachel-leer--ohne-foto { width: 68px; height: 68px; font-size: 12px; } }