/* =====================================================================================
   Vorlage 34 Eissalon · Eistheke
   Aufbau dieser Datei:
   1  Grundlagen, Knöpfe, Fächer (Farbe je Abschnitt)
   2  Kopf und feste Leiste mit Preisschild-Zungen
   3  Erster Bildschirm: Vitrine, Becher, Preisschild
   4  Von der Milch zur Kugel (klebender Abschnitt, Ebenen der Eismaschine)
   5  Sorten, Zahlen, Stimmen
   6  Torten, Zeiten, Anfahrt, Jobs, Fuß
   7  Auftritte (.rein), Bewegungsstufen, Handy
   Bewegt werden nur transform und opacity. Jede Ebene, die sich beim Scrollen bewegt, ist klein.
   ===================================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-bottom: var(--leiste); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  padding-bottom: calc(var(--leiste) + env(safe-area-inset-bottom, 0px));
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--blaubeer-tief);
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.02em; font-weight: 800; }
h1 { font-size: clamp(2.1rem, 1.2rem + 3vw, 3.5rem); font-weight: 900; }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.8rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--f-text, #fff); outline-offset: 3px; }
.sprung { position: absolute; left: 12px; top: -60px; z-index: 80; padding: 10px 16px; border-radius: 10px; background: #fff; color: #1b1950; font-weight: 800; }
.sprung:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lies { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.behaelter { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.klein { font-size: 14px; color: var(--f-leise); }
.textlink { font-weight: 800; text-underline-offset: 4px; }

/* ---------- 1 · Fächer: jede Sorte ein Abschnitt ---------- */
.fach {
  position: relative;
  padding: clamp(36px, 5vw, 68px) 0 clamp(34px, 5vw, 60px);
  background: var(--f-bg);
  color: var(--f-text);
}
.fach--erdbeere {
  --f-bg: var(--erdbeere); --f-text: #3a0f24; --f-leise: #62233e; --f-akzent: var(--erdbeere-tief); --f-on: #fff;
}
.fach--blaubeer {
  --f-bg: var(--blaubeer); --f-text: #fff; --f-leise: #cfccff; --f-akzent: var(--karamell); --f-on: #2a1d00;
}
.fach--vanille {
  --f-bg: var(--vanille); --f-text: #3a2a10; --f-leise: #5e4519; --f-akzent: var(--schoko); --f-on: #fff;
}
.fach--zitrone {
  --f-bg: var(--zitrone); --f-text: #2a2100; --f-leise: #4f4000; --f-akzent: var(--blaubeer); --f-on: #fff;
}
.fach--minze {
  --f-bg: var(--minze); --f-text: #07372d; --f-leise: #0d4a3c; --f-akzent: var(--minze-tief); --f-on: #fff;
}
.fach--schoko {
  --f-bg: var(--schoko); --f-text: #fff1e0; --f-leise: #f0d6b8; --f-akzent: var(--karamell); --f-on: #2a1d00;
}
.fach--himbeere {
  --f-bg: var(--erdbeere-tief); --f-text: #fff; --f-leise: #fff; --f-akzent: #fff; --f-on: #3a0f24;
}
.abschnitt-kopf { max-width: 740px; margin-bottom: clamp(22px, 3.4vw, 40px); }
.abschnitt-kopf h2 { margin-bottom: 14px; }
.lead { font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); line-height: 1.5; color: var(--f-leise); max-width: 62ch; margin-bottom: 0; }
.marke { display: inline-flex; align-items: center; margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--f-leise); }
.marke::before { content: ""; width: .85em; height: .85em; margin-right: .65em; border-radius: 50%; background: currentColor; }

/* Regalboden zwischen den Fächern: Edelstahl mit einer Reihe kleiner Kugeln */
.regal { position: relative; height: clamp(34px, 4.4vw, 62px); background: var(--von); overflow: hidden; }
.regal svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Knöpfe: rund, mit hartem Schatten wie ein Waffelrand */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 10px 24px; border: 0; border-radius: var(--radius-rund);
  background: var(--f-akzent); color: var(--f-on);
  font: inherit; font-weight: 800; font-size: 16px; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .26);
  transition: transform .12s ease, box-shadow .12s ease;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgba(0, 0, 0, .26); }
.knopf:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .26); }
.knopf svg { width: 20px; height: 20px; flex: none; }
.knopf--hell { background: #fff; color: #3a0f24; }
.knopf--karamell { background: var(--karamell); color: #2a1d00; }

/* ---------- 2 · Kopf ---------- */
.kopf { background: var(--erdbeere); color: var(--text); }
.kopf-innen { display: flex; align-items: center; gap: 16px; max-width: var(--breite); min-height: var(--kopf); margin: 0 auto; padding: 8px 20px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.logo-marke { width: 30px; height: auto; flex: none; }
.logo-text { display: grid; line-height: 1.1; }
.logo-text strong { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.logo-text small { font-size: 12px; font-weight: 700; color: var(--muted); }
.kopf-offen { margin: 0 0 0 auto; }
.pille { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; color: #3a0f24; font-size: 14px; font-weight: 700; }
.pille::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #9a8a92; }
.pille.ist-offen::before { background: #12a37f; }
.pille.ist-zu::before { background: #d1255b; }
.kopf-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--text); color: #fff; font-weight: 800; text-decoration: none; white-space: nowrap; }
.kopf-tel-lbl { font-weight: 600; opacity: .9; }

/* ---------- Leiste unten: Zungen ---------- */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  height: calc(var(--leiste) + env(safe-area-inset-bottom, 0px));
  padding: 8px max(14px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  background: linear-gradient(#f8fafc 0, #c3ccd5 18%, #8d99a6 100%);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .28), inset 0 2px 0 #fff;
}
.zungen { display: flex; flex: 1; justify-content: center; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.zungen li { display: flex; }
.zunge {
  --z-bg: #fff; --z-text: #1b1950;
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 48px; padding: 6px 18px 0;
  background: var(--z-bg); color: var(--z-text);
  font-weight: 800; font-size: 14.5px; text-decoration: none; white-space: nowrap;
  clip-path: polygon(0 11px, 11px 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition: transform .2s ease;
}
.zunge::before { content: ""; position: absolute; top: 5px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: rgba(0, 0, 0, .28); }
.zunge:hover { transform: translateY(-4px); }
.zunge[aria-current="true"] { transform: translateY(-7px); }
.zunge:focus-visible { outline: 0; box-shadow: inset 0 0 0 3px #1b1950, inset 0 0 0 5px #fff; }
.zunge--erdbeere { --z-bg: #ffc3d3; --z-text: #3a0f24; }
.zunge--blaubeer { --z-bg: #2b2977; --z-text: #fff; }
.zunge--vanille { --z-bg: #fff0b8; --z-text: #3a2a10; }
.zunge--minze { --z-bg: #a6efd6; --z-text: #07372d; }
.zunge--schoko { --z-bg: #3f2418; --z-text: #fff1e0; }
.zunge--himbeere { --z-bg: #d1255b; --z-text: #fff; }
.zunge .kurz { display: none; }
.anruf { display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 48px; padding: 0 20px; border-radius: 999px; background: #2b2977; color: #fff; font-weight: 800; font-size: 15px; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.anruf svg { width: 20px; height: 20px; flex: none; }
.anruf b { font-weight: 900; }
.anruf-kurz { display: none; }
.anruf:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------- 3 · Erster Bildschirm ---------- */
#becher { padding-top: clamp(8px, 2vw, 22px); position: relative; }
.becher-kopf { margin-bottom: clamp(12px, 2vw, 20px); }
.becher-kopf .lead { max-width: none; }
.becher-kopf h1 { margin-bottom: 8px; }
.becher-raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(20px, 3.4vw, 44px); align-items: start; }
.schritte-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; font-weight: 700; font-size: 15px; }
.schritte-hinweis .sch { display: inline-flex; align-items: center; gap: 8px; }
.schritte-hinweis .nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: #fff; font-size: 13px; font-weight: 800; }

.glas {
  position: relative; overflow: hidden;
  padding: 18px 14px 8px;
  border: 3px solid #fff; border-radius: 28px 28px 6px 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .42));
  box-shadow: 0 14px 30px rgba(58, 15, 36, .2), inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.glas::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(112deg, transparent 0 28%, rgba(255, 255, 255, .6) 32%, rgba(255, 255, 255, .12) 38%, transparent 42% 100%); }
.glas::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18%; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-140%); opacity: 0; }
.schalen { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
.regalkante { height: 16px; margin: 0 0 18px; border-radius: 0 0 12px 12px; background: linear-gradient(#f8fafc, #b6c1cc 55%, #7f8c99); box-shadow: 0 8px 14px rgba(58, 15, 36, .22); }

.schale {
  position: relative; display: grid; justify-items: center; gap: 0;
  min-height: 44px; padding: 4px 2px 0; border: 0; border-radius: 16px; background: none;
  font: inherit; color: #3a0f24; cursor: pointer;
  transition: transform .16s ease;
}
.schale:hover { transform: translateY(-4px); }
.schale:active, .schale.tipp { transform: translateY(2px) scale(.96); }
.schale:focus-visible { outline: 3px solid #3a0f24; outline-offset: 1px; }
.schale-bild { display: block; width: 100%; height: auto; overflow: visible; }
.schild { position: relative; display: grid; justify-items: center; margin-top: -8px; padding: 3px 10px 4px; border-radius: 9px; background: #fff; box-shadow: 0 2px 0 rgba(58, 15, 36, .2); line-height: 1.15; }
.schild-name { font-size: clamp(11.5px, 1vw + 8px, 15px); font-weight: 800; color: #3a0f24; }
.schild-art { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #62233e; }
.zaehler { position: absolute; top: 0; right: 6%; display: none; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: #3a0f24; color: #fff; font-size: 14px; font-weight: 900; box-shadow: 0 0 0 3px #fff; }
.schale.hat .zaehler { display: grid; animation: pop .3s cubic-bezier(.3, 1.6, .5, 1); }

.optionen { display: grid; gap: 8px; }
.opt { min-width: 0; margin: 0; padding: 0; border: 0; }
.opt-name { flex: none; width: 92px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--f-leise); line-height: 1.2; }
.optionen .opt { display: flex; align-items: center; gap: 4px 12px; }
.opt legend { padding: 0; margin-bottom: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--f-leise); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-block; }
.chip input, .torte-karte input { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.chip, .chip span { cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 15px;
  border: 2px solid transparent; border-radius: 999px; background: rgba(255, 255, 255, .72); color: var(--f-text);
  font-weight: 700; font-size: 15px; line-height: 1.2; box-shadow: 0 2px 0 rgba(0, 0, 0, .14);
  transition: background .15s, color .15s;
}
.chip input:checked + span { background: var(--f-text); color: var(--f-bg); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.chip input:focus-visible + span { outline: 3px solid var(--f-akzent); outline-offset: 2px; }
.fach--minze .chip input:focus-visible + span, .fach--erdbeere .chip input:focus-visible + span { outline-color: var(--f-text); }
.chip small { font-size: 12.5px; font-weight: 600; opacity: .9; }
.chip-icon { width: 24px; height: 24px; flex: none; }
.punkt { display: inline-block; width: 15px; height: 15px; flex: none; border-radius: 50%; }
.punkt--bunt { background: conic-gradient(#ff4d79, #ffd93b, #35c9a0, #5b6bff, #ff4d79); }

.theke { display: grid; justify-items: center; gap: 10px; align-content: start; }
.becher-buehne { position: relative; width: min(100%, 300px); aspect-ratio: 320 / 420; }
.becher-buehne::before { content: ""; position: absolute; left: 50%; top: 8%; width: 94%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, .5) 74%, rgba(255, 255, 255, 0) 76%); }
#becher-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#becher-svg .b-waffel, #becher-svg .b-becher, #becher-svg .b-schale { display: none; }
#becher-svg[data-behaelter="waffel"] .b-waffel, #becher-svg[data-behaelter="becher"] .b-becher, #becher-svg[data-behaelter="schale"] .b-schale { display: inline; }
.kg { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.kg-in { transform-box: fill-box; transform-origin: 50% 100%; }
.kg.neu .kg-in { animation: fall .75s cubic-bezier(.4, 0, .7, 1) both; }
.kg.geht .kg-in { animation: geht .24s ease-in forwards; }
.belag { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.belag.leer { display: none; }
.b-sosse, .b-streusel, .b-sahne { display: none; }
.belag.hat-sosse .b-sosse, .belag.hat-bunt .b-bunt, .belag.hat-nuss .b-nuss, .belag.hat-sahne .b-sahne { display: inline; animation: erscheint .4s ease both; }
@keyframes fall {
  0% { transform: translateY(var(--fall, -250px)); opacity: 0; }
  14% { opacity: 1; }
  56% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  68% { transform: translateY(0) scale(1.13, .85); }
  82% { transform: translateY(-7px) scale(.97, 1.05); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes geht { to { transform: scale(.3); opacity: 0; } }
@keyframes erscheint { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { transform: scale(.3); } to { transform: scale(1); } }

.leer-hinweis { position: absolute; left: 50%; top: 34%; z-index: 1; display: grid; place-items: center; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px dashed rgba(58, 15, 36, .5); border-radius: 50%; text-align: center; font-weight: 800; font-size: 15px; line-height: 1.25; color: #62233e; }
.leer-hinweis[hidden] { display: none; }
.finger { position: absolute; left: 0; top: 0; z-index: 8; width: 46px; height: 46px; margin: -12px 0 0 -14px; visibility: hidden; pointer-events: none; transition: transform .55s cubic-bezier(.3, .8, .3, 1), visibility 0s .25s; }
.finger.sichtbar { visibility: visible; transition: transform .55s cubic-bezier(.3, .8, .3, 1); }
.finger svg { display: block; width: 100%; height: 100%; transform: scale(0); transition: transform .22s ease; }
.finger.sichtbar svg { transform: scale(1); }
.finger.sichtbar.drueckt svg { transform: scale(.8); }

.preisschild { position: relative; width: min(100%, 340px); padding: 30px 22px 16px; border-radius: 20px; background: #fff; text-align: center; box-shadow: 0 10px 24px rgba(58, 15, 36, .2); }
.preisschild::before { content: ""; position: absolute; top: 11px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: var(--erdbeere); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3); }
.preis-lbl { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #62233e; }
.preis { margin: 0; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 900; line-height: 1.05; letter-spacing: -.03em; color: var(--erdbeere-tief); font-variant-numeric: tabular-nums; }
.preis .eur { font-size: .55em; font-weight: 800; margin-right: .1em; }
.kcal { margin: 0 0 8px; font-weight: 700; font-size: 15px; color: #3a0f24; }
.inhalt { min-height: 3.1em; margin: 0; font-size: 15px; line-height: 1.4; color: #3a0f24; }
.aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.beispiel { margin: 0; padding: 7px 14px; border-radius: 12px; background: rgba(255, 255, 255, .78); font-size: 14px; font-weight: 700; color: #3a0f24; text-align: center; max-width: 340px; }
.beispiel[hidden] { display: none; }
.nur-ohne-js { display: none; margin: 0; font-weight: 700; max-width: 340px; }
html:not(.js) .nur-ohne-js { display: block; }
html:not(.js) .beispiel, html:not(.js) .optionen, html:not(.js) .schritte-hinweis, html:not(.js) .aktionen { display: none; }
html:not(.js) .schale { pointer-events: none; }

/* ---------- 4 · Von der Milch zur Kugel ---------- */
.mk-raster { display: grid; grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.mk-text { display: grid; gap: 14px; align-content: center; min-width: 0; }
.mk-schritte { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mk-schritt {
  position: relative; padding: 20px 22px 18px 74px; border: 2px solid rgba(207, 204, 255, .35); border-radius: 24px;
  background: rgba(255, 255, 255, .09);
}
.mk-schritt h3 { margin-bottom: 6px; color: #fff; }
.mk-schritt p { margin: 0 0 .6em; color: #e8e6ff; font-size: 16.5px; }
.mk-schritt p:last-child { margin-bottom: 0; }
.mk-schritt .textlink { color: var(--karamell); }
.mk-nr { position: absolute; left: 18px; top: 18px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--karamell); color: #2a1d00; font-size: 20px; font-weight: 900; }
.mk-zaehler, .mk-messung, .mk-leiste { display: none; }
.mk-szene { display: grid; place-items: center; min-width: 0; }
.mk-buehne { position: relative; width: min(100%, 880px); aspect-ratio: 800 / 620; container-type: inline-size; }
.mk-basis { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mk-l { position: absolute; left: calc(var(--x) / 800 * 100%); top: calc(var(--y) / 620 * 100%); width: calc(var(--w) / 800 * 100%); height: calc(var(--h) / 620 * 100%); overflow: visible; pointer-events: none; }
/* Grundstellung = fertiger Becher (so steht es ohne JavaScript und bei „starr“ da) */
.mk-tuer { border-radius: 50%; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 18px rgba(0, 0, 0, .55); }
.mk-tuer > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-mix > * { position: absolute; inset: 0; }
.mk-mix { transform: translateY(45%); }
.mk-milch { background: linear-gradient(#fffdf6 0 2%, #fbf3e2 2% 100%); }
.mk-farbe { background: linear-gradient(#ffa8c3, #ff7ea5 70%); opacity: 1; }
.mk-frost {
  opacity: 1;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .95) 0 2px, transparent 3px) 0 0 / 22px 22px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .8) 0 1.6px, transparent 2.6px) 6px 9px / 17px 17px,
    linear-gradient(rgba(255, 255, 255, .26), rgba(255, 255, 255, .08));
}
.mk-ruehrer { transform-origin: 50% 50%; }
.mk-glut { visibility: hidden; background: radial-gradient(circle at 50% 100%, rgba(255, 138, 61, .9), rgba(255, 138, 61, 0) 64%); }
.mk-anzeige { display: flex; align-items: center; justify-content: center; font-size: 5.6cqw; line-height: 1; font-weight: 700; color: #7dffb4; text-shadow: 0 0 .6em rgba(125, 255, 180, .5); font-variant-numeric: tabular-nums; }
.mk-anzeige.heiss { color: #ffa45c; text-shadow: 0 0 .6em rgba(255, 164, 92, .55); }
.mk-anzeige.kalt { color: #8fe1ff; text-shadow: 0 0 .6em rgba(143, 225, 255, .55); }
.mk-einheit { font-size: .58em; margin-left: .25em; opacity: .85; }
.mk-lampe { visibility: hidden; }
#mk-lampe-kuehlen { visibility: visible; }
.mk-kanne { transform-origin: 67.5% 5.6%; }
.mk-strahl { background: linear-gradient(90deg, #f1ede4, #fff, #f1ede4); border-radius: 4px; transform-origin: 50% 0; transform: scaleY(0); }
.mk-zutat { visibility: hidden; }
.mk-dampf { visibility: hidden; background: radial-gradient(circle, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 68%); border-radius: 50%; }
.mk-hebel { transform-origin: 11.9% 50%; }
.mk-band { background: linear-gradient(90deg, #ff7ea5, #ffc0d3 45%, #ff7ea5); border-radius: 0 0 7px 7px; transform-origin: 50% 0; transform: scaleY(0); }
.mk-haufen { transform-origin: 50% 100%; transform: scale(.6); }
.mk-werkzeug { visibility: hidden; transform-origin: 26% 74%; }
.mk-ball { transform: translate(694.2%, -113.6%); }
.mk-ball-belag { opacity: 1; }

/* ---------- 5 · Sorten, Zahlen, Stimmen ---------- */
.sorten-raster { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(20px, 3.6vw, 48px); align-items: start; }
.sorten-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sorte { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border: 2px solid #fff; border-radius: 22px; background: rgba(255, 255, 255, .7); }
.sorte svg { width: 74px; height: auto; }
.sorte h3 { margin-bottom: 2px; font-size: 19px; }
.sorte p { margin: 0; font-size: 15px; line-height: 1.4; }
.sorte-daten { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 7px !important; }
.sorte-daten span { padding: 2px 9px; border-radius: 999px; background: var(--vanille); border: 1.5px solid rgba(58, 42, 16, .3); font-size: 12px; font-weight: 700; color: #3a2a10; }
.preise { padding: 22px 20px 18px; border-radius: 24px; background: var(--schoko); color: #fff1e0; box-shadow: 0 14px 28px rgba(63, 36, 24, .3); }
.preise h3 { margin-bottom: 14px; font-size: 1.5rem; }
.preis-schilder { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.preis-schild { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 10px 36px; border-radius: 10px; background: #fff6e4; color: #3f2418; rotate: var(--dreh, 0deg); font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.preis-schild::before { content: ""; position: absolute; left: 13px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: var(--schoko); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.preis-schild strong { flex: none; font-size: 17px; font-weight: 900; color: #b81d4d; font-variant-numeric: tabular-nums; }
.preise .klein { margin: 0; color: #f0d6b8; }

.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin: 0 0 clamp(30px, 4vw, 48px); padding: 0; list-style: none; }
.zahl-kugel { position: relative; display: grid; place-content: center; justify-items: center; aspect-ratio: 1; padding: 10px; border-radius: 50%; text-align: center; box-shadow: inset -10px -14px 22px rgba(0, 0, 0, .14), inset 8px 10px 18px rgba(255, 255, 255, .35), 0 12px 0 -4px rgba(0, 0, 0, .12); }
.zahl-kugel:nth-child(1) { background: #ff7ea5; color: #3a0f24; }
.zahl-kugel:nth-child(2) { background: #7fe0bd; color: #07372d; }
.zahl-kugel:nth-child(3) { background: #6f58d6; color: #fff; }
.zahl-kugel:nth-child(4) { background: #ffb347; color: #3a2000; }
.zahl-wert { display: block; font-size: clamp(1.9rem, 1rem + 3.4vw, 3.6rem); line-height: 1; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.zahl-kugel span { margin-top: 6px; font-size: clamp(12.5px, .6vw + 9px, 16px); font-weight: 700; line-height: 1.25; max-width: 11ch; }

.bons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0 0 clamp(30px, 4vw, 48px); padding: 0; list-style: none; }
.bon {
  padding: 20px 22px 30px; background: #fff; color: #2a2100; rotate: var(--dreh, 0deg);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
}
.bon-kopf { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px dashed #cdbf7c; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5d4d00; }
.bon blockquote { margin: 0 0 14px; }
.bon blockquote p { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 600; }
.bon-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding-top: 10px; border-top: 2px dashed #cdbf7c; font-weight: 800; font-size: 14.5px; }
.kugeln-bewertung svg { display: block; width: 120px; height: auto; }
.referenzen h3 { margin-bottom: 14px; }
.referenzen ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; padding: 0; list-style: none; }
.referenzen li { padding: 14px 16px; border-radius: 16px; background: var(--blaubeer); color: #fff; }
.referenzen strong { display: block; font-size: 16px; line-height: 1.25; }
.referenzen li span { font-size: 14px; color: #cfccff; }

/* ---------- 6 · Torten, Zeiten, Anfahrt, Jobs, Fuß ---------- */
.torten-form { display: grid; gap: 26px; }
.torten-wahl { margin: 0; padding: 0; border: 0; min-width: 0; }
.torten-wahl legend, .torten-felder .opt legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--f-leise); }
.torten-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.torte-karte { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 14px 12px 16px; border-radius: 24px; background: rgba(255, 255, 255, .6); text-align: center; cursor: pointer; transition: transform .2s ease, background .2s; }
.torte-rahmen { display: block; width: 100%; max-width: 250px; padding: 6px; border-radius: 20px; }
.torte-rahmen svg { display: block; width: 100%; height: auto; }
.torte-karte input:checked + .torte-rahmen { box-shadow: 0 0 0 4px var(--minze-tief); background: #fff; }
.torte-karte:has(input:checked) { transform: translateY(-4px); background: #fff; }
.torte-karte input:focus-visible + .torte-rahmen { outline: 3px solid #07372d; outline-offset: 4px; }
.torte-name { font-size: 19px; font-weight: 800; }
.torte-karte small { font-size: 14px; color: var(--f-leise); font-weight: 600; }
.torten-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 4vw, 56px); align-items: start; }
.torten-links, .torten-rechts { display: grid; gap: 18px; min-width: 0; align-content: start; }
.chips--stapel .chip span { width: 100%; justify-content: space-between; }
.feld { min-width: 0; }
.feld-lbl { margin-top: 6px; }
.feld label:not(.haken) { display: block; margin-bottom: 4px; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--f-leise); }
.feld input:not([type="checkbox"]), .feld select, .feld textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid rgba(0, 0, 0, .28); border-radius: 12px; background: #fff; font: inherit; font-size: 17px; color: #1d1d1d; }
.feld textarea { resize: vertical; }
.feld input:disabled { opacity: .55; }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.haken { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--f-text); }
.haken span { min-width: 0; }
.haken input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--f-akzent); }
.haken small { font-size: 13px; font-weight: 700; }
.torten-summe { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-radius: 18px; background: #fff; color: #07372d; }
.torten-zeile { margin: 0; font-weight: 700; }
.torten-preis { margin: 0; font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; color: var(--minze-tief); white-space: nowrap; font-variant-numeric: tabular-nums; }
.torten-preis .eur { font-size: .55em; margin-right: .1em; }
.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.formular-meldung { margin: 0; font-weight: 800; }

.zeiten-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3.6vw, 48px); align-items: start; }
.zeiten-karte { padding: 24px; border: 2px solid rgba(255, 241, 224, .28); border-radius: 26px; background: rgba(255, 255, 255, .07); }
.heute { margin: 0 0 18px; font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.saison { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; height: 108px; margin-bottom: 20px; }
.saison span { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.saison i { display: block; width: 100%; border-radius: 8px 8px 3px 3px; transform-origin: 50% 100%; }
.saison b { margin-top: 6px; font-size: 13px; font-weight: 800; }
.s-zu i { height: 14%; background: rgba(255, 241, 224, .3); }
.s-mitte i { height: 56%; background: var(--karamell); }
.s-haupt i { height: 100%; background: #ff8fb2; }
.saison .s-jetzt i { box-shadow: 0 0 0 3px #fff; }
.saison .s-jetzt b { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.saison .s-jetzt::after { content: ""; position: absolute; top: -2px; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
.zeiten-liste { margin: 0 0 20px; }
.zeiten-liste > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 12px 10px; border-top: 1px solid rgba(255, 241, 224, .25); }
.zeiten-liste > div.ist-heute { background: rgba(255, 184, 77, .18); border-radius: 12px; border-top-color: transparent; }
.zeiten-liste dt { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.zeiten-liste dd { margin: 0; font-weight: 800; }
.s-haupt-punkt { background: #ff8fb2; } .s-mitte-punkt { background: var(--karamell); } .s-zu-punkt { background: rgba(255, 241, 224, .45); }
.telefon-gross { margin: 0; }
.karte-bild { margin: 0 0 16px; }
.karte-bild svg { display: block; width: 100%; height: auto; border-radius: 18px; }
.karte-bild figcaption { margin-top: 8px; font-size: 14px; color: var(--f-leise); }
.route { transition: stroke-dashoffset 1.8s ease; }
.anfahrt-liste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anfahrt-liste strong { display: inline-block; min-width: 7.2em; color: var(--karamell); }

.stellen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0 0 clamp(30px, 4vw, 48px); padding: 0 6px; list-style: none; }
.stelle { position: relative; padding: 34px 22px 22px; border-radius: 22px; background: #fff; color: #3a0f24; rotate: var(--dreh, 0deg); box-shadow: 0 14px 26px rgba(58, 15, 36, .28); }
.stelle::before { content: ""; position: absolute; top: 12px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--erdbeere-tief); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
.stelle-art { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #a8173f; }
.stelle h3 { margin-bottom: 10px; }
.stelle p { font-size: 16px; }
.stelle-daten { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 600; }
.stelle-daten li { position: relative; padding-left: 26px; }
.stelle-daten li::before { content: ""; position: absolute; left: 3px; top: .38em; width: 10px; height: 6px; border-left: 3px solid var(--minze-tief); border-bottom: 3px solid var(--minze-tief); transform: rotate(-45deg); }
.bewerben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 52px); align-items: start; }
.bewerben-schritte h3 { margin-bottom: 14px; font-size: 1.6rem; }
.schritte-liste { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.schritte-liste li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; font-size: 17px; }
.schritte-liste b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #3a0f24; font-size: 20px; font-weight: 900; }
.job-form { padding: 22px; border-radius: 24px; background: #fff; color: #3a0f24; --f-leise: #62233e; --f-text: #3a0f24; --f-akzent: var(--erdbeere-tief); --f-on: #fff; }
.job-form .feld { margin-bottom: 14px; }
.job-form .feld-paar .feld { margin-bottom: 14px; }
.job-form .klein { margin: 12px 0 0; }
.job-form .knopf--hell { background: var(--erdbeere-tief); color: #fff; }
.job-form a { color: #a8173f; }
.torten-form a { color: #07372d; }

.fuss { background: var(--blaubeer-tief); color: #e6e4ff; }
.fuss-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-top: 48px; padding-bottom: 22px; }
.fuss p, .fuss address { margin: 0 0 .7em; font-style: normal; }
.fuss a { color: #fff; text-underline-offset: 3px; }
.fuss-logo { font-size: 1.4rem; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.fuss-links { display: flex; gap: 18px; }
.fuss-demo { font-size: 13px; color: #b9b6ee; }
.fuss-zeile { width: 100%; max-width: none; margin: 0; padding: 22px 20px 26px; text-align: center; font-size: 13px; color: #b9b6ee; }
.fuss-zeile a { color: #d6d3ff; }

/* ---------- Bildplatzhalter ---------- */
.bild-platzhalter { display: grid; align-content: end; margin: 0; min-height: 200px; border: 3px dashed currentColor; border-radius: 22px; background: rgba(255, 255, 255, .2); }
.bild-team { margin-top: 24px; min-height: 230px; color: #fff; background: rgba(255, 255, 255, .14); }
.bild-platzhalter figcaption { margin: 14px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .95); color: #1d1d1d; font-size: 13px; font-weight: 700; line-height: 1.35; }

/* ---------- Klebender Abschnitt: nur wenn JavaScript ihn einschaltet (html.milch-an) ---------- */
html.milch-an .mk-huelle { height: calc(var(--mk-schritte, 6) * 100vh); }
html.milch-an .mk-karte { position: sticky; top: 0; display: flex; align-items: center; height: 100vh; padding-bottom: var(--leiste); overflow: hidden; }
html.milch-an .mk-raster { width: 100%; }
html.milch-an .mk-buehne { width: min(100%, calc((100vh - var(--leiste) - 36px) * 800 / 620), 880px); }
html.milch-an .mk-schritte { display: grid; }
html.milch-an .mk-schritt { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease, visibility 0s .3s; }
html.milch-an .mk-schritt.ist-aktiv { visibility: visible; opacity: 1; transform: none; transition: opacity .3s ease, transform .3s ease; }
html.milch-an .mk-zaehler { display: block; margin: 0; font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--karamell); }
html.milch-an .mk-messung { position: relative; display: block; }
.mk-messung-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #cfccff; }
.mk-messung-kopf strong { font-size: 1.5rem; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }
.mk-kurve { display: block; width: 100%; height: 64px; overflow: visible; }
.mk-kurve path { vector-effect: non-scaling-stroke; }
#mk-kurve { stroke: var(--karamell); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mk-null { stroke: rgba(207, 204, 255, .45); stroke-width: 1.5; stroke-dasharray: 4 5; }
.mk-punkt { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--karamell); }
html.milch-an .mk-leiste { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-leiste li { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(207, 204, 255, .5); font-size: 13px; font-weight: 800; color: #cfccff; transition: background .2s, color .2s; }
.mk-leiste li.ist-aktiv { background: var(--karamell); border-color: var(--karamell); color: #2a1d00; }
html.milch-an .mk-glut, html.milch-an .mk-lampe, html.milch-an .mk-zutat, html.milch-an .mk-dampf, html.milch-an .mk-werkzeug { visibility: visible; opacity: 0; }
html.milch-an #mk-lampe-kuehlen { opacity: 1; }
html.milch-an .mk-l, html.milch-an .mk-mix, html.milch-an .mk-ruehrer, html.milch-an .mk-ball { will-change: transform, opacity; }
html.milch-an .mk-tuer { will-change: auto; }

/* ---------- 7 · Auftritte: eine kleine Bewegung je Abschnitt, einmal, höchstens 600 ms ---------- */
.rein-an .rein { opacity: 0; transform: translateY(26px); }
.rein-an .rein.ist-da { opacity: 1; transform: none; transition: opacity .5s ease, transform .58s cubic-bezier(.2, .9, .3, 1.15); transition-delay: calc(var(--i, 0) * 70ms); }
.rein-an .sorte:not(.ist-da) { transform: translateY(-34px) scale(.92); }
.rein-an .preis-schild:not(.ist-da) { transform: translateY(-18px) rotate(-5deg); transform-origin: 8% 0; }
.rein-an .zahl-kugel:not(.ist-da) { transform: scale(.4); }
.rein-an .bon:not(.ist-da) { transform: translateY(30px) rotate(3deg); }
.rein-an .torte-karte:not(.ist-da) { transform: translateY(34px) scale(.94); }
.rein-an .stelle:not(.ist-da) { transform: scale(1.07); }
.rein-an .karte-bild:not(.ist-da) .route { stroke-dashoffset: 1; }
.rein-an .saison.rein { opacity: 1; transform: none; }
.rein-an .saison:not(.ist-da) i { transform: scaleY(0); }
.rein-an .saison.ist-da i { transition: transform .55s cubic-bezier(.2, .9, .3, 1.1); transition-delay: calc(var(--i, 0) * 40ms); }
.rein-an .zeiten-karte, .rein-an .bewerben { transition: none; }

/* Stufe „dynamisch“: ein Glanzstreifen läuft über das Vitrinenglas, solange es im Bild ist */
html[data-bewegung="dynamisch"] .glas.im-bild::after { animation: glanz 7s ease-in-out infinite; }
@keyframes glanz { 0% { transform: translateX(-140%); opacity: 0; } 8% { opacity: 1; } 40% { transform: translateX(640%); opacity: 1; } 48% { opacity: 0; } 100% { transform: translateX(640%); opacity: 0; } }

/* Stufe „starr“ und „Bewegung reduzieren“: nichts bewegt sich von selbst */
html[data-bewegung="starr"] *, html[data-bewegung="starr"] *::before, html[data-bewegung="starr"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Ruhige Fassung am großen Bildschirm: die Maschine bleibt neben den Schritten stehen (reines CSS) */
@media (min-width: 981px) { html:not(.milch-an) .mk-szene { position: sticky; top: 24px; align-self: start; } }

/* ---------- Handy und schmale Fenster ---------- */
@media (max-width: 1080px) {
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
  .referenzen ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bons { gap: 16px; }
}
@media (max-width: 980px) {
  .sorten-raster, .zeiten-raster, .bewerben, .mk-raster { grid-template-columns: minmax(0, 1fr); }
  .stellen { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .bons { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .torten-karten { gap: 10px; }
  .torten-felder { grid-template-columns: minmax(0, 1fr); }
  .fuss-raster { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  html.milch-an .mk-raster { grid-template-rows: auto auto; gap: 8px; }
  html.milch-an .mk-szene { order: -1; }
  html.milch-an .mk-karte { align-items: flex-start; padding-top: 10px; }
  html.milch-an .mk-buehne { width: min(100%, calc((100vh - var(--leiste) - 250px) * 800 / 620), 560px); }
  html.milch-an .mk-schritt { padding: 14px 16px 14px 62px; }
  html.milch-an .mk-schritt p { font-size: 15.5px; margin-bottom: .4em; }
  html.milch-an .mk-nr { left: 12px; top: 12px; width: 38px; height: 38px; font-size: 18px; }
  html.milch-an .mk-kurve, html.milch-an .mk-punkt { display: none; }
  html.milch-an .mk-messung-kopf { margin: 0; }
  html.milch-an .mk-leiste { justify-content: center; }
  html.milch-an .mk-zaehler { text-align: center; }
  .mk-szene { order: -1; }
}
@media (max-width: 880px) {
  .becher-raster { grid-template-columns: minmax(0, 1fr); }
  .vitrine { display: contents; }
  .becher-kopf { order: 0; margin-bottom: 4px; }
  .theke { order: 1; position: sticky; top: 0; z-index: 20; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); justify-items: stretch; align-items: center; gap: 2px 12px; margin: 0 -20px; padding: 6px 20px 8px; background: var(--erdbeere); box-shadow: 0 10px 14px -10px rgba(58, 15, 36, .45); }
  .becher-buehne { grid-row: 1 / span 3; width: 100%; }
  .preisschild { width: 100%; padding: 22px 10px 8px; border-radius: 16px; box-shadow: 0 6px 14px rgba(58, 15, 36, .18); }
  .preisschild::before { top: 7px; width: 11px; height: 11px; margin-left: -5.5px; }
  .preis-lbl { display: none; }
  .preis { font-size: 2rem; }
  .inhalt { min-height: 0; font-size: 12.5px; line-height: 1.3; }
  .kcal { margin-bottom: 2px; font-size: 13px; }
  .aktionen { justify-content: flex-start; }
  .aktionen { gap: 8px; }
  .aktionen .knopf { min-height: 44px; padding: 6px 14px; font-size: 14.5px; }
  .beispiel, .nur-ohne-js { grid-column: 1 / -1; max-width: none; padding: 4px 10px; font-size: 12.5px; }
  .schritte-hinweis { font-size: 13.5px; gap: 4px 12px; }
  .leer-hinweis { width: 66%; font-size: 11px; border-width: 2px; }
  .schritte-hinweis { order: 2; margin-top: 8px; }
  .glas { order: 3; }
  .regalkante { order: 4; margin-bottom: 4px; }
  .optionen { order: 5; }
  .becher-kopf h1 { font-size: 2.1rem; }
}
@media (max-width: 720px) {
  .optionen .opt { display: block; }
  .opt-name { display: block; width: auto; margin-bottom: 4px; }
  .kopf-offen { display: none; }
  .kopf-tel { margin-left: auto; }
  .kopf-tel-lbl { display: none; }
  .leiste { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .zungen { gap: 4px; }
  .zungen li { flex: 1 1 0; min-width: 0; }
  .zunge { flex: 1; min-width: 0; padding: 7px 0 0; font-size: 11.5px; letter-spacing: -.01em; }
  .zunge .lang { display: none; }
  .zunge .kurz { display: inline; }
  .anruf { padding: 0 12px; min-height: 48px; }
  .anruf-text { display: none; }
  .anruf-kurz { display: inline; font-size: 11.5px; }
  .anruf svg { width: 18px; height: 18px; }
  .anruf { flex-direction: column; justify-content: center; gap: 1px; padding: 0 10px; min-width: 52px; }
  .schalen { gap: 10px 4px; }
  .glas { padding: 14px 8px 6px; }
  .schild { padding: 3px 4px 4px; }
  .schild-name { font-size: 11px; }
  .schild-art { font-size: 9px; letter-spacing: .02em; }
  .zaehler { min-width: 24px; height: 24px; font-size: 12px; right: 2%; }
  .sorten-liste { grid-template-columns: minmax(0, 1fr); }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .referenzen ul { grid-template-columns: minmax(0, 1fr); }
  .torten-karten { grid-template-columns: minmax(0, 1fr); }
  .torte-karte { grid-template-columns: 120px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 12px; align-items: center; padding: 10px 12px; }
  .torte-karte .torte-rahmen { grid-row: 1 / span 2; padding: 2px; }
  .torten-karten { gap: 10px; }
  .feld-paar { grid-template-columns: minmax(0, 1fr); }
  .torten-summe { flex-direction: column; align-items: flex-start; gap: 4px; }
  .saison { gap: 3px; height: 92px; }
  .zeiten-karte { padding: 18px 14px; }
  .anfahrt-liste strong { display: block; min-width: 0; }
  .zeiten-liste > div { flex-direction: column; }
}
@media (max-width: 420px) {
  .behaelter { padding: 0 14px; }
  .theke { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); margin: 0 -14px; padding: 6px 14px 8px; }
  .mk-schritt { padding-left: 58px; }
}
@media (max-width: 1020px) {
  .zunge .lang { display: none; }
  .zunge .kurz { display: inline; }
  .zunge { padding-left: 14px; padding-right: 14px; }
  .anruf-text { display: none; }
  .anruf-kurz { display: inline; }
}
@media print { .leiste, .finger { display: none; } }