/* =============================================================================
   Mini Cafe · Fassung 2 · Speisekarte (seite-speisekarte.css)
   Nur Rollen-Variablen aus basis.css, Bausteine aus bausteine.css.
   Neu in dieser Datei: Gruppenfarben (grün = Bowls, gelb = Kaffee/Tee/Kuchen),
   .wahl (Auswahlfeld Milch/Sirup), .korb-kaffees (aufklappbare Kaffees im Warenkorb),
   .foto-folgt, .zeile-klein, .karte-allergene, .zeile--bowl, .selbst-karte, .alle-kopf, .leer-hinweis,
   .filter-hinweis, .karte-layout, .karte-korb
   ============================================================================= */

/* ---------- Gruppenfarben (2.1.3): zwei Gruppen auf einen Blick ---------- */
html {
  --kat-gruen: #14523A;        --auf-kat-gruen: #F7F2EA;          /* kräftig: Kachel, gewählter Chip */
  --kat-gruen-ruhig: #D3E2CF;  --auf-kat-gruen-ruhig: #0E3D2B;    /* ruhig: Chip, nicht gewählt */
  --kat-gold: #E3B54A;         --auf-kat-gold: #1D1D1B;
  --kat-gold-ruhig: #F4E3AE;   --auf-kat-gold-ruhig: #1D1D1B;
  --kat-ring: #1D1D1B;         /* Ring am gewählten gelben Chip */
}
html[data-look="dunkel"] {
  --kat-gruen: #2B6A51;        --auf-kat-gruen: #F0E6D3;
  --kat-gruen-ruhig: #2B6A51;  --auf-kat-gruen-ruhig: #F0E6D3;
  --kat-gold: #E9B949;         --auf-kat-gold: #070B0A;
  --kat-gold-ruhig: #E9B949;   --auf-kat-gold-ruhig: #070B0A;
}

/* ---------- Anker: klebende Leiste oben darf die Überschrift nicht verdecken ---------- */
html { scroll-padding-top: calc(var(--kopf-klebt) + var(--leiste-h, 118px) + 12px); }
.karte-layout .abschnitt { scroll-margin-top: calc(24px - var(--abstand-abschnitt)); }

.karte-spalte { min-width: 0; }
.buehne-box { margin-top: 16px; }
.buehne-box[hidden] { display: none; }
.buehne-link { display: flex; justify-content: center; margin: 4px auto 0; }

/* ---------- Kategorie-Leiste und Filter ---------- */
.seitenkopf p { font-size: 18px; }
.leiste-oben { margin-top: var(--a-4); }
.leiste-oben .chips { padding-bottom: 2px; }
.filter-hinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px;
  padding: 12px var(--rand) 0; font-size: var(--gr-klein); line-height: 1.4;
}
.filter-hinweis p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.filter-hinweis .textlink { font-size: var(--gr-klein); }
.leer-hinweis {
  margin-top: 16px; padding: 18px 20px; border-radius: var(--rund-karte);
  background: var(--flaeche); font-size: var(--gr-klein); line-height: 1.5; color: var(--text);
}
.hinweis-zeile { margin: 14px 0 12px; }
.alle-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 12px; }
.alle-kopf[hidden] { display: none; }
.alle-kopf h3 { font-size: var(--gr-titel-3); }
.alle-zahl { font-size: 14px; color: var(--text-neben); }
.abzeichen--klein { height: 24px; padding: 0 10px 0 8px; font-size: 13px; gap: 5px; margin-top: 5px; }
.abzeichen--klein .symbol { width: 13px; height: 13px; }

/* ---------- Zeilen (Bowls, Kaffee, Tee) ---------- */
.zeile-text { display: block; min-width: 0; min-height: var(--tippen); padding: 0; text-align: left; font: inherit; color: inherit; }
.zeile-name { display: block; font: var(--gewicht-name) var(--gr-name)/1.2 var(--schrift); letter-spacing: -0.01em; }
.zeile-text .zeile-info { display: block; }
.zeile-text .abzeichen { display: inline-flex; }
a.zeile-text:hover .zeile-name { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.zeile .zeile-text { align-self: center; padding-block: 2px; }
.chip-preis { margin-left: 7px; font-weight: 500; opacity: .82; font-variant-numeric: tabular-nums; }
.zeile-anpassen { column-gap: 14px; row-gap: 8px; align-items: center; }
.zeile-anpassen[hidden] { display: none; }
.textlink--klein { font-size: 14px; }
html[data-look="dunkel"] .textlink--klein { font-size: 15px; }

/* Bowl-Zeilen: Foto rund, Größe als Auswahl im Produkt (keine zwei Produkte) */
.liste .zeile.zeile--bowl { grid-template-columns: 56px minmax(0, 1fr) var(--tippen); min-height: 76px; }
.zeile--bowl > .preis { display: none; }
.liste .zeile-bild.zeile-bild--foto { width: 56px; height: 56px; }
.zeile-bild--foto > img { width: 100%; height: 100%; object-fit: contain; }
.zeile--bowl .zeile-anpassen { margin-top: 0; }
.plus { z-index: 2; }

/* ---------- Selbst bauen: Hervorhebung in Mahdis Grün (08.11.2026) ----------
   Ganz oben, volle Breite, dunkelgrüne Karte; Text hell auf Grün (Beige-Hell auf #14523A = gut lesbar, ca. 8:1). */
.abschnitt--selbst { padding-top: var(--a-6, 24px); }
.selbst-karte {
  position: relative; display: grid; gap: 6px; padding: 26px 22px 30px; overflow: hidden;
  border-radius: var(--rund-gross); background: var(--c-gruen); color: var(--c-beige-hell);
  box-shadow: 0 10px 28px rgba(14, 61, 43, .28);
}
.selbst-karte::before {           /* helles Licht hinter den Bowls, damit sie vom Grün abheben */
  content: ""; position: absolute; right: -12%; top: -6%; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(247, 242, 234, .16), rgba(247, 242, 234, 0)); pointer-events: none;
}
.selbst-bild { position: relative; order: -1; display: grid; place-items: center; margin: 0 auto 4px; width: min(290px, 78vw); aspect-ratio: 1; }
.selbst-bild img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .3)); }
.selbst-text { position: relative; display: grid; gap: 14px; justify-items: start; }
.selbst-text h2 { color: var(--c-beige-hell); }
.selbst-text .abschnitt-satz { margin-top: 0; color: var(--c-beige-hell); opacity: .94; }
.selbst-abz { background: var(--c-gold); color: var(--c-gruen-tief); }
.selbst-zutaten { display: flex; flex-wrap: wrap; gap: 8px; }
.selbst-zutaten li { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--c-beige-hell); }
.selbst-zutaten img { width: 34px; height: 34px; object-fit: contain; }
.selbst-preis { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--gr-klein); color: rgba(247, 242, 234, .88); }
.selbst-preis b { color: var(--c-beige-hell); font-weight: var(--gewicht-preis); }
.selbst-text .knopf { margin-top: 6px; background: var(--c-beige-hell); color: var(--c-gruen); }
.selbst-text .knopf:active { background: var(--c-beige-tief); }
.selbst-text .knopf .symbol { width: 22px; height: 22px; stroke-width: 2.4; transition: transform 160ms var(--kurve-druck, ease-out); }
.selbst-knopf::after { content: ""; position: absolute; inset: 0; border-radius: var(--rund-gross); }   /* ganze Karte antippbar */
.selbst-knopf:focus-visible { outline: none; }
.selbst-knopf:focus-visible::after { outline: 3px solid var(--c-gold); outline-offset: -6px; }
@media (hover: hover) { .selbst-karte:hover .selbst-knopf .symbol { transform: translateX(4px); } }

/* ---------- Kuchen-Karten: ganze Karte antippbar ---------- */
.karte-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rund-karte); }
.karte-name a:focus-visible { outline: none; }
.karte-name a:focus-visible::after { outline: 3px solid var(--fokus); outline-offset: 2px; }
.karte-produkt .abzeichen { pointer-events: none; }
.karte-produkt.ist-aus .karte-foto img { opacity: .6; }
.karte-foto--gezeichnet .zeichnung { width: 34%; height: auto; }
html[data-look="dunkel"] .karte-produkt .zeile-info { font-size: 15px; }

/* ---------- Warenkorb-Spalte (nur Computer) ---------- */
.karte-korb { padding: 26px 26px 24px; border-radius: var(--rund-karte); background: var(--flaeche); }
.karte-korb h2 { font-size: var(--gr-titel-3); }
.korb-leer { margin-top: 14px; color: var(--text-neben); }
.korb-zeile { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0 14px; }
.korb-zeilen { margin-top: 10px; }
.korb-text { min-width: 0; }
.korb-name { font: var(--gewicht-name) 16px/1.25 var(--schrift); }
.korb-info { margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--text-neben); }
.korb-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.korb-rechts .preis { font: var(--gewicht-preis) 16px/1.2 var(--schrift); }
.korb-menge { display: flex; align-items: center; gap: 4px; }
.korb-menge .zahl { min-width: 24px; text-align: center; font-weight: 700; }
.korb-menge .rund .symbol { width: 18px; height: 18px; }
.korb-summe { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding: 16px 0 4px; font: 700 18px/1.2 var(--schrift); }
.korb-punkte { display: flex; align-items: center; gap: 10px; margin: 6px 0 18px; font-size: 15px; color: var(--text-neben); }
.korb-punkte b { color: var(--text); font-weight: 700; }
.korb-punkte .symbol { width: 20px; height: 20px; color: var(--akzent); }
.korb-hinweis { margin-top: 10px; text-align: center; font-size: 14px; color: var(--text-neben); }

/* ---------- Computer ---------- */
@media (min-width: 1024px) {
  html { scroll-padding-top: calc(var(--kopf-klebt) + var(--leiste-h, 76px) + 12px); }
  .seitenkopf { padding-top: var(--a-6); }
  .seitenkopf p { font-size: 20px; }
  .leiste-oben { margin-top: var(--a-6); }
  html[data-look] .leiste-oben { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 12px var(--rand); }
  html[data-look] .leiste-oben .chips { padding: 0; overflow: visible; flex-wrap: wrap; }
  html[data-look] .leiste-oben .filter { padding: 0; overflow: visible; flex: none; }
  .filter-hinweis { padding-top: 16px; }

  .karte-layout {
    --abstand-abschnitt: 84px;
    display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 64px; align-items: start; padding-inline: var(--rand);
  }
  .karte-layout .abschnitt { padding-inline: 0; }
  .karte-layout .buehne { margin-inline: 0; }
  .karte-korb {
    position: sticky; top: calc(var(--kopf-klebt) + var(--leiste-h, 76px) + 20px);
    margin-top: var(--abstand-abschnitt, 84px); max-height: calc(100vh - var(--kopf-klebt) - var(--leiste-h, 76px) - 44px); overflow: auto;
  }
  .karte-layout > .karte-korb { margin-top: 84px; }
  .karte-layout .raster--karten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .selbst-karte { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 28px; padding: 40px 40px; }
  .selbst-bild { order: 0; width: 300px; margin: 0; }
  .selbst-text h2 { font-size: 40px; line-height: 1.08; }
  html[data-look] .liste.liste--spalten { display: block; columns: 2; column-gap: 24px; padding: 8px 12px; }
  html[data-look="dunkel"] .liste.liste--spalten { column-gap: 56px; padding: 0; }
  .liste--spalten .zeile { min-height: 76px; break-inside: avoid; }
  [data-leiste-korb] { display: none; }
  .alle-kopf { margin-top: 44px; }
}

/* Auswahl-Chips in Bowl- und Kaffee-Zeilen über die volle Zeilenbreite (sonst brechen sie am Handy um) */
.liste .zeile > .zeile-anpassen { grid-column: 1 / -1; }


/* ---------- Kategorie-Chips: grün = Bowls, gelb = Getränke + Kuchen (2.1.3) ---------- */
html[data-look] .chips .chip--gruen { background: var(--kat-gruen-ruhig); color: var(--auf-kat-gruen-ruhig); }
html[data-look] .chips .chip--gold { background: var(--kat-gold-ruhig); color: var(--auf-kat-gold-ruhig); }
html[data-look] .chips .chip--gruen[aria-current="true"] { background: var(--kat-gruen); color: var(--auf-kat-gruen); font-weight: 700; }
html[data-look] .chips .chip--gold[aria-current="true"] { background: var(--kat-gold); color: var(--auf-kat-gold); font-weight: 800; }
/* gewählt = kräftige Farbe + Ring, damit es auch ohne Farbsehen klar bleibt */
html[data-look="hell"] .chips .chip--gold[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--kat-ring); }
html[data-look="dunkel"] .chips .chip[aria-current="true"] { background: #F0E6D3; color: #0A201B; font-weight: 700; }
html[data-look="dunkel"] .chips .chip--gruen[aria-current="true"] { box-shadow: inset 0 0 0 3px var(--kat-gruen); }
html[data-look="dunkel"] .chips .chip--gold[aria-current="true"] { box-shadow: inset 0 0 0 3px var(--kat-gold); }
.chip--gruppenwechsel { margin-left: 10px; }
.chip--gruppenwechsel::before { content: ""; position: absolute; left: -11px; top: 10px; bottom: 10px; width: 1.5px; border-radius: 1px; background: var(--text-still); opacity: .55; }

/* ---------- Auswahlfelder (Milch, Sirup) ---------- */
/* kompakt: Milch und Extras (Sirup + Extra Shot) als zwei gleich große Kacheln nebeneinander (Inhaber 07.11.) */
.kaffee-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); justify-content: start; align-items: end; gap: 10px; padding-left: 0; }
.wahl { display: grid; gap: 5px; min-width: 0; }
.kaffee-wahl .wahl-feld select, .extras-knopf {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0 36px 0 14px; text-align: left;
  border: 0; border-radius: 14px; background: var(--grund); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--feld-rand); font: 600 15px/1 var(--schrift); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
  touch-action: manipulation;
}
.kaffee-wahl .wahl-feld .symbol { right: 11px; }
.extras-knopf:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.extras-knopf[aria-expanded="true"] + .symbol { transform: rotate(180deg); }
.wahl--extras { position: relative; }
.extras-panel {
  position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); min-width: 100%; width: max-content; max-width: 280px;
  display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: var(--grund);
  box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 0 0 1.5px var(--feld-rand);
}
.extras-panel[hidden] { display: none; }
.extras-gruppe { font: 600 12px/1 var(--schrift); color: var(--text-neben); padding: 8px 8px 4px; }
.extras-option {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: 600 15px/1.2 var(--schrift); text-align: left; cursor: pointer; touch-action: manipulation;
}
.extras-option:hover { background: var(--flaeche-druck); }
.extras-option .chip-preis { margin-left: auto; color: var(--text-neben); font-weight: 500; }
.extras-haken { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--feld-rand); }
.extras-option[role="checkbox"] .extras-haken { border-radius: 5px; }
.extras-option[aria-checked="true"] .extras-haken { background: var(--kat-gruen, #17543f); box-shadow: inset 0 0 0 1.5px var(--kat-gruen, #17543f), inset 0 0 0 4px var(--grund); }
.extras-option[role="checkbox"][aria-checked="true"] .extras-haken { box-shadow: none; background: var(--kat-gruen, #17543f) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.2 2.2L9.5 3.5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.wahl-label { font: 600 12.5px/1 var(--schrift); color: var(--text-neben); }
html[data-look="dunkel"] .wahl-label { font-size: 14px; font-weight: 500; }
.wahl-feld { position: relative; display: block; }
.wahl-feld select {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0 40px 0 14px;
  border: 0; border-radius: 14px; background: var(--grund); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--feld-rand); font: 600 16px/1 var(--schrift); text-overflow: ellipsis; cursor: pointer;
  touch-action: manipulation;
}
html[data-look="dunkel"] .wahl-feld select { font-weight: 500; color-scheme: dark; }
.wahl-feld select:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }
.wahl-feld .symbol { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; }

/* ---------- kleine Zeile unter dem Namen (Allergene, Foto folgt) ---------- */
.zeile-klein { display: block; margin-top: 3px; font: 500 12.5px/1.3 var(--schrift); color: var(--text-neben); }
.zeile-klein:empty { display: none; }
html[data-look="dunkel"] .zeile-klein { font-size: 14px; font-weight: 400; }
.zeile-text .abzeichen--klaeren {
  background: transparent; color: var(--text-neben); box-shadow: inset 0 0 0 1.5px var(--text-neben); font-size: 12px; height: 22px; padding: 0 9px 0 6px;
}
.zeile-text .abzeichen--klaeren .symbol { width: 13px; height: 13px; }
.zeile.ist-aus .zeile-bild, .zeile.ist-aus .zeile-bild--foto > img { opacity: .55; filter: grayscale(1); }
.zeile.ist-aus .zeile-anpassen { opacity: .6; }
.ausverkauft-marke { display: none; }
/* 10.11.2026 tu-g2: Ausverkauftes bleibt sichtbar, Text abgeschwächt (Schild steht im Namen-Link) */
.zeile.ist-aus .zeile-info, .zeile.ist-aus .zeile-klein, .karte-produkt.ist-aus .karte-allergene, .karte-produkt.ist-aus .karte-zusatz { opacity: .65; }
.zeile.ist-aus .zeile-text .abzeichen--aus { opacity: 1; }

/* ---------- Kuchen: Allergene klein unter dem Namen (2.6.3, 2.7.1) ---------- */
.karte-allergene { margin: 3px 6px 0; font: 500 12.5px/1.3 var(--schrift); color: var(--text-neben); }
html[data-look="dunkel"] .karte-allergene { margin: 3px 0 0; font-size: 14px; font-weight: 400; }
.karte-allergene + .karte-zusatz { margin-top: 2px; }
#box-kuchen .buehne-zeile { display: flex; flex-direction: column; align-items: center; }
html[data-look] #box-kuchen .buehne-zeile .allergene { display: block; order: -1; margin-bottom: 4px; font-size: 13.5px; }
html[data-look] #box-kuchen .buehne-zeile .allergene::before { content: none; }

/* ---------- Bilder neben Kaffees und Tees: ruhiges Rechteck, gut zugeschnitten (2.4.2, 2.5.2) ---------- */
.abschnitt-kopf--bild > .bogen--kaffee, .abschnitt-kopf--bild > .bogen--tee { width: 124px; height: 124px; align-self: start; }
html[data-look="dunkel"] .abschnitt-kopf--bild > .bogen--kaffee, html[data-look="dunkel"] .abschnitt-kopf--bild > .bogen--tee { width: 112px; height: 112px; border-radius: var(--rund-foto); }
@media (min-width: 1024px) {
  .abschnitt-kopf--bild > .bogen--kaffee, .abschnitt-kopf--bild > .bogen--tee,
  html[data-look="dunkel"] .abschnitt-kopf--bild > .bogen--kaffee, html[data-look="dunkel"] .abschnitt-kopf--bild > .bogen--tee { width: 190px; height: 150px; }
}

/* ---------- Warenkorb-Spalte: alle Kaffees aufklappbar (2.4.7) ---------- */
.korb-kaffees { padding: 6px 0 10px; }
.korb-kaffees-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 34px; align-items: center; gap: 10px; width: 100%; min-height: 60px;
  padding: 10px 10px 10px 14px; border-radius: 16px; background: var(--flaeche-tief); color: var(--text); text-align: left; font: inherit;
}
.korb-kaffees-titel { display: grid; gap: 3px; min-width: 0; }
.korb-kaffees-titel b { font: 700 16px/1.2 var(--schrift); }
.korb-kaffees-kurz { font-size: 13.5px; line-height: 1.3; color: var(--text-neben); }
.korb-kaffees-kopf .preis { font: var(--gewicht-preis) 16px/1.2 var(--schrift); white-space: nowrap; }
.korb-kaffees-pfeil { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grund); }
.korb-kaffees-pfeil .symbol { width: 18px; height: 18px; transition: transform var(--dauer-wechsel) var(--kurve-gleiten); }
.korb-kaffees.ist-offen .korb-kaffees-pfeil .symbol { transform: rotate(180deg); }
.korb-kaffees-liste[hidden] { display: none; }
.korb-kaffee { padding: 14px 4px 6px; }
.korb-kaffee + .korb-kaffee { border-top: 1px solid var(--flaeche-druck); margin-top: 6px; }
.korb-kaffee-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.korb-kaffee-kopf .preis { font: var(--gewicht-preis) 16px/1.2 var(--schrift); white-space: nowrap; }
.korb-kaffee-unten { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; }
.wahl--korb { flex: 1 1 140px; max-width: none; }
.korb-ohne-milch { flex: 1; font-size: 14px; color: var(--text-neben); align-self: center; }
.korb-kaffee .korb-info { margin-top: 6px; }

/* Hinweis-Abzeichen dürfen umbrechen (sonst ragen sie am Handy über den Rand) */
.hinweis-zeile .abzeichen { max-width: 100%; height: auto; min-height: 26px; padding-block: 5px; white-space: normal; line-height: 1.3; border-radius: 14px; }
.hinweis-zeile .abzeichen .symbol { flex: none; }

/* Kaffee-Zeilen: feine Trennlinie und etwas Luft, wenn Auswahlfelder darunter stehen */
.zeile--kaffee + .zeile--kaffee { border-top: 1px solid var(--flaeche-druck); }
html[data-look="dunkel"] .zeile--kaffee + .zeile--kaffee { border-top-color: rgba(240, 230, 211, .14); margin-top: 0; }
.zeile--kaffee { padding-bottom: 14px; }
@media (min-width: 1024px) {
  /* Bühne endet am Spaltenrand: Nachbarn blenden weich aus statt hart abgeschnitten zu sein */
  .karte-layout .buehne { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
}

/* =============================================================================
   NEU 03.11.2026: Matcha, Kalte Getränke, Bowl-Zutaten + Wahl, Signature
   ============================================================================= */

/* kleine Zeile direkt unter einer Überschrift (Kaffee-Hinweis, Matcha „Warm oder kalt“) */
.abschnitt-klein { margin-top: 6px; font: 600 14px/1.35 var(--schrift); color: var(--text-neben); }
.abschnitt-klein[hidden] { display: none; }
html[data-look="dunkel"] .abschnitt-klein { font-weight: 500; font-size: 15px; }
@media (min-width: 1024px) { .abschnitt-klein { font-size: 16px; } }
.abschnitt-klein + .abschnitt-satz { margin-top: 10px; }

/* Getränke ohne Produktseite: Name ist normaler Text */
.zeile--getraenk .zeile-info { margin-top: 3px; }
.zeile--getraenk .zeile-klein { margin-top: 3px; }
.zeile--getraenk .abzeichen--klaeren { margin-top: 5px; }

/* Unterüberschrift im Abschnitt Kalte Getränke (gleiche Art wie „Alle Bowls“) */
.alle-kopf--unter { margin-top: 24px; }

/* Signature: gold, klein, gut lesbar hell und dunkel (Gold-Fläche mit schwarzer Schrift) */
.abzeichen--signature { background: var(--akzent); color: var(--auf-akzent); font-weight: 700; letter-spacing: .01em; }
html[data-look="dunkel"] .abzeichen--signature { font-weight: 700; }
.abzeichen--signature .symbol { width: 13px; height: 13px; }

/* Bowls: Wahl (Soße + Crunch) klein unter den Zutaten */
.zeile-wahl { color: var(--text); font-weight: 600; }
html[data-look="dunkel"] .zeile-wahl { color: var(--text-neben); font-weight: 500; }
.zeile-wahl .abzeichen--klaeren { margin: 0 0 0 4px; vertical-align: middle; }
.buehne-wahlzeile { margin: 6px auto 0; max-width: 330px; font: 600 14px/1.4 var(--schrift); color: var(--text-neben); }
.buehne-wahlzeile:empty { display: none; }
.buehne-wahlzeile .abzeichen--klaeren { margin: 4px 0 0 4px; vertical-align: middle; background: transparent; color: var(--text-neben); box-shadow: inset 0 0 0 1.5px var(--text-neben); font-size: 12px; height: 22px; padding: 0 9px 0 6px; }
.buehne-wahlzeile .abzeichen--klaeren .symbol { width: 13px; height: 13px; }
html[data-look="dunkel"] .buehne-wahlzeile { max-width: 24em; margin-top: 6px; font-size: 15px; font-weight: 500; }
@media (min-width: 1024px) {
  .buehne-wahlzeile { max-width: none; font-size: 16px; }
  html[data-look="dunkel"] .buehne-wahlzeile { max-width: 40em; font-size: 16px; }
}

/* Computer: sieben Kategorie-Chips + Filter sollen auch bei 1280 px in eine Reihe passen (vorher fünf Chips) */
@media (min-width: 1024px) {
  html[data-look] .leiste-oben .chips { gap: 6px; }
  html[data-look] .leiste-oben .chips .chip { padding: 0 15px 0 11px; }
}
/* Kopf mit Foto (Matcha hat keine Hinweis-Zeile dazwischen): etwas Luft zur Liste */
#matcha .abschnitt-kopf { margin-bottom: 16px; }
@media (min-width: 1024px) {
  html[data-look="dunkel"] .leiste-oben .chips .chip { padding: 0 13px 0 10px; }
}

/* =====================================================================================
   Etappe A1 (06.11.2026, W1/W5): Speisekarte im Vordergrund
   · Handy: Reiter + Filter-Knopf in EINER Zeile (die großen Wegweiser-Kacheln sind weg, OFFEN 1)
   · „vegan / ohne Nüsse“ stecken in einem Knopf „Filter“ mit kleinem Aufklapp-Feld
   · Computer: „schlanke Zeile“ – sobald die Reiter kleben, schrumpfen Kopf und Reiter
     (html.karte-schlank, gesetzt in seite-speisekarte.js). Nur Verschieben + Innenabstand,
     die Höhe im Fluss bleibt gleich, darum springt der Inhalt beim Umschalten nicht.
   ===================================================================================== */
.leiste-marke { height: 0; }
.leiste-oben .filter { position: relative; }
.filter-knopf { gap: 6px; }
.filter-knopf.aktiv { background: var(--gewaehlt); color: var(--auf-gewaehlt); }
.filter-zahl {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 2px;
  border-radius: 10px; background: var(--akzent); color: var(--auf-akzent); font: 800 12px/1 var(--schrift);
}
.filter-zahl[hidden] { display: none; }
.filter-feld {
  position: absolute; right: var(--rand); top: calc(100% + 12px); z-index: 35;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  min-width: 210px; padding: 14px 14px 16px;
  border-radius: 20px; background: var(--grund);
  box-shadow: 0 12px 32px rgba(7, 11, 10, .16), 0 0 0 1px rgba(7, 11, 10, .06);
}
.filter-feld[hidden] { display: none; }
.filter-feld .filter-name { margin: 0 0 2px 2px; }
.filter-feld .chip { justify-content: flex-start; }

/* Handy + Tablet: eine Zeile, Reiter wischbar, Filter-Knopf fest rechts */
@media (max-width: 1023.98px) {
  html[data-look] .leiste-oben { display: flex; align-items: center; gap: 4px; padding: 8px 0; }
  html[data-look] .leiste-oben .chips {
    flex: 1 1 auto; min-width: 0; padding-right: 14px; padding-bottom: 0;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  html[data-look] .leiste-oben .filter { flex: none; padding: 0 var(--rand) 0 0; overflow: visible; }
  /* nur das Regler-Zeichen (Name bleibt für Vorleser im aria-label), damit mehr Reiter sichtbar sind */
  .filter-knopf { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .filter-knopf .filter-wort { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .filter-knopf .filter-zahl { position: absolute; top: -4px; right: -6px; margin: 0; }
}

/* Computer: schlanke Zeile */
@media (min-width: 1024px) {
  html { scroll-padding-top: 106px; }   /* Sprünge landen im schlanken Zustand: 50 + 44 + 12 */
  .filter-feld { right: 0; top: calc(100% + 16px); }
  .kopf--voll, html[data-look] .leiste-oben { transition: transform 220ms var(--kurve-gleiten), padding 220ms var(--kurve-gleiten); }
  .kopf--voll .kopf-logo svg, .kopf--voll .bestellen, .kopf--voll .rund, .leiste-oben .chips .chip {
    transition: height 220ms var(--kurve-gleiten), width 220ms var(--kurve-gleiten), padding 220ms var(--kurve-gleiten), font-size 220ms var(--kurve-gleiten),
                background-color var(--dauer-wechsel, 200ms), color var(--dauer-wechsel, 200ms);
  }
  html.karte-schlank .kopf--voll { padding-top: 46px; transform: translateY(-46px); }   /* sichtbar 0–50 px */
  html.karte-schlank .kopf--voll .kopf-logo { min-height: 0; }
  html.karte-schlank .kopf--voll .kopf-logo svg { height: 30px; }
  html.karte-schlank .kopf--voll .kopf-nav a { padding: 8px 0; font-size: 16px; }
  html.karte-schlank .kopf--voll .sprache, html.karte-schlank .kopf--voll .sprache a { height: 38px; font-size: 15px; }
  html.karte-schlank .kopf--voll .rund { width: 38px; height: 38px; }
  html.karte-schlank .kopf--voll .bestellen { height: 40px; padding: 0 24px 0 28px; font-size: 16px; }
  /* Reiter: sichtbar 50–94 px (Leiste klebt bei 96 px und rückt 70 px hoch, Inhalt sitzt unten) */
  html.karte-schlank[data-look] .leiste-oben { padding-top: 28px; padding-bottom: 4px; transform: translateY(-70px); }
  html.karte-schlank[data-look] .leiste-oben .chips { flex-wrap: nowrap; overflow-x: auto; min-width: 0; }
  html.karte-schlank[data-look] .leiste-oben .chips .chip { height: 36px; padding: 0 14px 0 10px; }
  html.karte-schlank .karte-korb { top: 114px; max-height: calc(100vh - 138px); }
}
@media (prefers-reduced-motion: reduce) {
  .kopf--voll, html[data-look] .leiste-oben, .kopf--voll *, .leiste-oben .chip { transition: none !important; }
}

/* =====================================================================================
   Etappe A2 (06.11.2026, W2/W30/W3/W4/W5): Anfang kurz + warm mit echten Fotos
   · Titel, ein warmer Satz, EINE leise Zeile „Bezahlt wird bei der Abholung“ (kein gelbes Schild),
     rechts drei echte Fotos von Mahdi (keine Cartoons, die gehören zu den Getränke-Reitern)
   · Lücke zwischen Reitern und „Bowls“ klein (Computer ≤ 40 px, Handy kurz)
   · Zahlungssatz steht zusätzlich im Warenkorb-Kasten (auch wenn er leer ist)
   ===================================================================================== */
.seitenkopf--karte { display: flex; flex-direction: column; gap: 16px; }
.seitenkopf--karte .sk-text { min-width: 0; }
.seitenkopf--karte .sk-satz { margin-top: 6px; max-width: 30em; }
.seitenkopf .sk-leise { margin-top: 8px; font: 600 14px/1.35 var(--schrift); color: var(--text-neben); }
.sk-fotos { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sk-foto { flex: 1 1 0; min-width: 0; height: 88px; overflow: hidden; border-radius: 18px; background: var(--flaeche-tief); }
.sk-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-foto--bowl { background: var(--flaeche); }
.sk-foto--bowl img { object-fit: contain; padding: 4px; }
.korb-hinweis--links { margin-top: 12px; text-align: left; }
/* erste Gruppe rückt dicht an die Reiter (Handy) */
.karte-layout #bowls { padding-top: 20px; scroll-margin-top: 0; }

@media (min-width: 1024px) {
  .seitenkopf--karte { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .sk-fotos { flex: none; gap: 14px; }
  .sk-foto { flex: none; height: 118px; border-radius: 22px; }
  .sk-foto--bowl, .sk-foto--kuchen { width: 118px; }
  .sk-foto--matcha { width: 94px; }
  .seitenkopf .sk-leise { font-size: 15px; }
  /* Lücke Reiter → „Bowls“ ≤ 40 px, Warenkorb-Kasten bleibt mit der Überschrift auf einer Höhe */
  .karte-layout #bowls { padding-top: 24px; }
  .karte-layout > .karte-korb { margin-top: 24px; }
}

/* =====================================================================================
   Etappe A3 (07.11.2026, W10): Reiter mit den Kachelbildern der Startseite (bilder/wegweiser/<id>.webp)
   · Bild 28 px im Reiter (schlanke Leiste bleibt <= 96 px), „Eigene Bowl“ = Bowl-Bild + kleines Plus-Abzeichen
   · Sirup steht direkt als Feld an der Karte, „+ Extra Shot“ ist ein kleiner Schalter daneben (kein „Extras“ mehr)
   ===================================================================================== */
.chips .chip-bild { position: relative; flex: none; display: inline-grid; width: 28px; height: 28px; margin: -2px 0; }
.chips .chip-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chips .chip-bild--plus::after {
  content: "+"; position: absolute; right: -5px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center; background: var(--akzent, #1f5c3d); color: var(--auf-akzent, #fff);
  font: 800 13px/1 var(--schrift); box-shadow: 0 0 0 1.5px #fff;
}
html.karte-schlank[data-look] .leiste-oben .chips .chip-bild { width: 26px; height: 26px; }

/* =====================================================================================
   Abnahme Z-1 (07.11.2026, W1/W5/W10): Handy-Leiste zeigt mehr Reiter, man erkennt das Wischen
   · Bild 24 px, Schrift 14 px, enger Innenabstand und Abstand, Filter-Knopf 40 px und weiter rechts
   · mindestens drei Reiter ganz sichtbar, der vierte guckt unter dem weichen Rand hervor
   · Leiste bleibt 56 px hoch (Grenze 64 px), Computer und Tablet unverändert
   ===================================================================================== */
@media (max-width: 599.98px) {
  html[data-look] .leiste-oben { gap: 0; }
  html[data-look] .leiste-oben .chips { gap: 5px; padding-left: 12px; padding-right: 6px; scroll-padding-left: 12px; }
  html[data-look] .leiste-oben .chips .chip { height: 40px; padding: 0 9px 0 6px; gap: 4px; font-size: 14px; }
  html[data-look] .leiste-oben .chips .chip-bild { width: 24px; height: 24px; margin: -2px 0; }
  html[data-look] .leiste-oben .chips .chip--gruppenwechsel { margin-left: 7px; }
  html[data-look] .leiste-oben .chips .chip--gruppenwechsel::before { left: -7px; top: 9px; bottom: 9px; }
  html[data-look] .leiste-oben .filter { padding: 0 10px 0 0; }
  .filter-knopf { width: 40px; height: 40px; }
}

/* 10.11.2026 G2: Hinweis nur für Screenreader (Kuchen-Karte) */
.sk-nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }