:root {
  --gelb: #FFD117;
  --gelb-hell: #FFEB99;
  --rot: #D93B22;
  --pink: #F0509B;
  --gruen: #17823B;
  --blau: #2D6CFF;
  --creme: #FFF6E3;
  --creme-tief: #F7E6BF;
  --tinte: #191410;
  --papier: #FFFFFF;
  --leise: #54493C;
  --leise-dunkel: #E6DAC4;
  --linie: rgba(25, 20, 16, .14);
  --fehler: #B42318;
  --fehler-grund: #FFF0EC;

  --f-display: 'Tanker', 'Arial Black', Impact, sans-serif;
  --f-text: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-klein: .875rem;
  --t-0: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --t-1: clamp(1.125rem, 1.07rem + .25vw, 1.25rem);
  --t-2: clamp(1.375rem, 1.23rem + .6vw, 1.75rem);
  --t-3: clamp(2rem, 1.6rem + 1.7vw, 3rem);
  --t-4: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);

  --rand: 3px solid var(--tinte);
  --schatten-klein: 3px 3px 0 var(--tinte);
  --schatten: 5px 5px 0 var(--tinte);
  --schatten-gross: 8px 8px 0 var(--tinte);
  --r: .75rem;
  --r-gross: 1.25rem;

  --aus: cubic-bezier(.23, 1, .32, 1);
  --inaus: cubic-bezier(.77, 0, .175, 1);

  --breite: 76rem;
  --rand-x: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --kopf-h: 4.25rem;
  --abstand: clamp(4rem, 2.8rem + 4.5vw, 7rem);
  --feld-h: 3.25rem;
  --feld-px: 1rem;

  --vd-text: var(--tinte);
  --vd-leise: #6E6253;
  --vd-grund: var(--papier);
  --vd-rand: var(--tinte);
  --vd-rand-hover: var(--tinte);
  --vd-rand-breite: 3px;
  --vd-radius: var(--r);
  --vd-hoehe: var(--feld-h);
  --vd-px: var(--feld-px);
  --vd-fokus: var(--blau);
  --vd-akzent: var(--rot);
  --vd-akzent-text: #FFFFFF;
  --vd-fehler: var(--fehler);
  --vd-menue-grund: var(--papier);
  --vd-menue-text: var(--tinte);
  --vd-menue-rand: var(--tinte);
  --vd-menue-radius: var(--r);
  --vd-menue-schatten: 5px 5px 0 var(--tinte);
  --vd-hover: var(--gelb-hell);
  --vd-rueck-schrift: var(--f-text);

  accent-color: var(--rot);
  interpolate-size: allow-keywords;
}
@media (min-width: 960px) { :root { --kopf-h: 5rem; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-h) + 1rem);
  scrollbar-color: var(--tinte) var(--creme);
}
body {
  margin: 0; min-height: 100dvh;
  background: var(--creme); color: var(--tinte);
  font: 400 var(--t-0)/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
p, ul, ol, dl, dd, figure, h1, h2, h3 { margin: 0; }
p, li, dd { hyphens: auto; overflow-wrap: break-word; text-wrap: pretty; }
h1, h2, h3 {
  font-family: var(--f-display); font-weight: 400; line-height: 1.05;
  text-wrap: balance; overflow-wrap: break-word; hyphens: manual;
}
h2 { font-size: var(--t-3); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, label, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
::selection { background: var(--gelb); color: var(--tinte); }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
main:focus, section:focus, [data-vd-ansicht]:focus, [tabindex="-1"]:focus { outline: none; }

.rahmen { width: min(100% - 2 * var(--rand-x), var(--breite)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprung {
  position: absolute; left: 1rem; top: -5rem; z-index: 100;
  padding: .75rem 1rem; border-radius: var(--r);
  background: var(--tinte); color: var(--gelb); font-weight: 800; text-decoration: none;
  transition: top .15s var(--aus);
}
.sprung:focus { top: 1rem; }

.ico {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico--klein { width: 1.125em; height: 1.125em; }

.knopf, .symbolknopf, .express__knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: 0 1.25rem;
  border: var(--rand); border-radius: var(--r);
  background: var(--papier); color: var(--tinte);
  font: 800 1rem/1.1 var(--f-text); letter-spacing: .005em;
  text-decoration: none; text-align: center;
  box-shadow: var(--schatten-klein);
  user-select: none; -webkit-user-select: none;
  transition: transform .15s var(--aus), box-shadow .15s var(--aus), background-color .15s ease-out, color .15s ease-out;
}
.knopf .ico:first-child { margin-left: -.2em; }
.knopf .ico:last-child { margin-right: -.25em; }
.knopf--rot { background: var(--rot); color: #FFFFFF; }
.knopf--gelb { background: var(--gelb); }
.knopf--weiss { background: var(--papier); }
.knopf--gross { min-height: 3.5rem; padding: 0 1.5rem; font-size: 1.0625rem; }
.knopf--klein { min-height: 2.75rem; padding: 0 1rem; font-size: .9375rem; }
.knopf--voll { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover, .symbolknopf:hover, .express__knopf:hover { transform: translate(-2px, -2px); box-shadow: var(--schatten); }
}
.knopf:active, .symbolknopf:active, .express__knopf:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinte); }
.knopf:disabled, .knopf[aria-disabled="true"] {
  background: var(--creme-tief); color: #6E6253; border-color: #8A7D6C;
  box-shadow: none; transform: none; cursor: not-allowed;
}
.knopf[aria-busy="true"] { cursor: progress; }
.knopf[aria-busy="true"] .ico { display: none; }
.knopf[aria-busy="true"]::before {
  content: ""; width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent;
  animation: drehen .7s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

.symbolknopf { width: 3rem; padding: 0; position: relative; }
.symbolknopf .ico { width: 1.375rem; height: 1.375rem; }

.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1rem; }

.textlink {
  display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: 800; color: inherit;
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .3em;
}
.textlink .ico { transition: transform .2s var(--aus); }
@media (hover: hover) and (pointer: fine) {
  .textlink:hover .ico { transform: translateX(3px); }
  .textlink--zurueck:hover .ico { transform: translateX(-3px); }
}

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--gelb); border-bottom: var(--rand);
  padding-top: env(safe-area-inset-top);
}
.kopf__innen {
  width: min(100% - 2 * var(--rand-x), var(--breite)); margin-inline: auto;
  height: var(--kopf-h); display: flex; align-items: center; gap: 1rem;
}
.marke { display: inline-flex; align-items: center; gap: .5rem; flex: none; text-decoration: none; }
.marke__tafel {
  font: 400 1.25rem/1 var(--f-display); color: #FFFFFF;
  background: var(--rot); border: var(--rand); border-radius: .5rem;
  padding: .3rem .5rem .35rem; box-shadow: var(--schatten-klein);
  transform: rotate(-2deg);
}
.marke__wort { font: 400 1.25rem/1 var(--f-display); }
@media (min-width: 960px) {
  .marke__tafel, .marke__wort { font-size: 1.5rem; }
}

.hauptnav { display: none; margin-left: auto; }
.hauptnav__liste { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.hauptnav__punkt { position: relative; }
.hauptnav__link {
  display: inline-flex; align-items: center; gap: .25rem;
  min-height: 2.75rem; padding: 0 .875rem;
  border: 2.5px solid transparent; border-radius: var(--r); background: none;
  font: 700 1rem/1 var(--f-text); text-decoration: none;
  transition: border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
.hauptnav__aufklapper { padding-right: .5625rem; }
.hauptnav__aufklapper .ico { transition: transform .2s var(--aus); }
.hauptnav__aufklapper[aria-expanded="true"] .ico { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .hauptnav__link:hover { border-color: var(--tinte); }
}
.hauptnav__link[aria-current="page"],
html[data-ansicht="menu"] .hauptnav__aufklapper {
  background: var(--papier); border-color: var(--tinte); box-shadow: var(--schatten-klein);
}

.kopf__aktionen { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.kopf__bestellen { display: none; }
@media (min-width: 560px) { .kopf__bestellen { display: inline-flex; } }
@media (min-width: 960px) {
  .hauptnav { display: block; }
  .kopf__aktionen { margin-left: 1rem; }
  .menue-knopf { display: none; }
}
.korb-knopf__zahl {
  position: absolute; top: -.7rem; right: -.7rem;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem;
  display: grid; place-items: center;
  background: var(--rot); color: #FFFFFF;
  border: 2.5px solid var(--tinte); border-radius: 999px;
  font: 800 .8125rem/1 var(--f-text); font-variant-numeric: tabular-nums;
}
.korb-knopf__zahl.huepft { animation: huepfen .38s var(--aus); }
@keyframes huepfen { from { transform: scale(1.45); } }
.menue-knopf .ico--zu { display: none; }
.menue-knopf[aria-expanded="true"] .ico--auf { display: none; }
.menue-knopf[aria-expanded="true"] .ico--zu { display: block; }

.aufklapp {
  position: absolute; top: calc(100% + .875rem); left: -.5rem; z-index: 60;
  width: 33rem; padding: .75rem;
  background: var(--papier); border: var(--rand); border-radius: var(--r-gross);
  box-shadow: var(--schatten-gross);
  transform-origin: 3rem 0;
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.96);
  transition: opacity .12s ease-out, transform .12s ease-out, visibility 0s linear .12s;
}
.aufklapp.ist-offen {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .18s var(--aus), transform .18s var(--aus), visibility 0s;
}
.aufklapp__kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.aufklapp__kachel {
  display: flex; align-items: center; gap: .75rem; min-height: 4.5rem; padding: .5rem;
  border-radius: .5rem; text-decoration: none;
}
.aufklapp__kachel img {
  width: 3.5rem; height: 3.5rem; flex: none; object-fit: cover;
  border: 2px solid var(--tinte); border-radius: .5rem; background: #FFFFFF;
}
.aufklapp__name { display: block; font: 400 1.125rem/1.1 var(--f-display); }
.aufklapp__info { display: block; margin-top: .125rem; font-size: .875rem; color: var(--leise); }
.aufklapp__alle {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .5rem; padding: .75rem .625rem .75rem .75rem; min-height: 2.75rem;
  border-top: 2px solid var(--linie); border-radius: 0 0 .5rem .5rem;
  font-weight: 800; text-decoration: none;
}
.aufklapp__kachel:hover, .aufklapp__kachel:focus-visible,
.aufklapp__alle:hover, .aufklapp__alle:focus-visible { background: var(--gelb-hell); }
.aufklapp a:focus-visible { outline-offset: -2px; }

.mobilmenue {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 49;
  top: calc(var(--kopf-h) + 3px + env(safe-area-inset-top));
  background: var(--creme); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-.5rem);
  transition: opacity .16s ease-out, transform .16s ease-out, visibility 0s linear .16s;
}
.mobilmenue.ist-offen {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .24s var(--aus), transform .24s var(--aus), visibility 0s;
}
@media (min-width: 960px) { .mobilmenue { display: none; } }
.mobilmenue__innen {
  display: flex; flex-direction: column; gap: 1.5rem; min-height: 100%;
  width: min(100% - 2 * var(--rand-x), var(--breite)); margin-inline: auto;
  padding: 1rem 0 calc(1.5rem + env(safe-area-inset-bottom));
}
.mobilmenue__liste { list-style: none; margin: 0; padding: 0; }
.mobilmenue__liste > li { border-bottom: 2px solid var(--linie); }
.mobilmenue__link {
  display: flex; align-items: center; min-height: 3.25rem;
  font: 400 1.875rem/1 var(--f-display); text-decoration: none;
}
.mobilmenue__link[aria-current="page"] { color: var(--rot); }
.mobilmenue__unter {
  list-style: none; margin: 0 0 .75rem; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem;
}
.mobilmenue__unter a { display: flex; align-items: center; min-height: 2.75rem; font-weight: 700; text-decoration: none; }
.mobilmenue__unter a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; }
.mobilmenue .knopf { margin-top: auto; }
html.menue-offen, html.korb-offen { overflow: hidden; padding-right: var(--sperre, 0px); }

.abschnitt { padding-block: var(--abstand); }
.abschnitt--dicht { padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.abschnitt__kopf { max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.abschnitt__kopf p { margin-top: 1rem; font-size: var(--t-1); color: var(--leise); max-width: 38rem; }
.abschnitt__kopf--zeile {
  max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 3rem;
}
.abschnitt__kopf--zeile > div { max-width: 44rem; }

.leiste {
  list-style: none; margin: 0; padding: 0; display: grid;
  background: var(--papier); border: var(--rand); border-radius: var(--r-gross);
  box-shadow: var(--schatten); overflow: hidden;
}
.leiste > li { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-top: var(--rand); }
.leiste > li:first-child { border-top: 0; }
@media (min-width: 800px) {
  .leiste--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leiste--3 > li { border-top: 0; border-left: var(--rand); }
  .leiste--3 > li:first-child { border-left: 0; }
}

.paar { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); }
.paar__bild {
  position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border: var(--rand); border-radius: var(--r-gross);
  box-shadow: var(--schatten-gross); background: var(--tinte);
}
.paar__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 60%; }
.paar__bild--gelb { border-color: var(--creme); box-shadow: 8px 8px 0 var(--gelb); }
.paar__bild--gelb img { object-position: 50% 50%; }
@media (min-width: 900px) {
  .paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .paar__bild { aspect-ratio: auto; min-height: 22rem; }
}

.aufmacher {
  position: relative; display: flex; flex-direction: column;
  background: var(--gelb); border-bottom: var(--rand); overflow: clip;
}
.aufmacher__buehne { position: relative; height: clamp(17rem, 80vw, 28rem); }
.aufmacher__feld, .aufmacher__kante { position: absolute; inset: 0 0 .75rem 0; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.aufmacher__kante { background: var(--tinte); transform: translateY(.625rem); }
.aufmacher__feld {
  --punkt: 1.5px; --punkt-abstand: 14px;
  background-color: var(--pink);
  background-image: radial-gradient(rgba(25, 20, 16, .17) var(--punkt), transparent calc(var(--punkt) + .4px));
  background-size: var(--punkt-abstand) var(--punkt-abstand);
  background-position: center;
}
@media (min-width: 600px) { .aufmacher__feld { --punkt: 2px; --punkt-abstand: 16px; } }
.aufmacher__essen {
  position: absolute; inset: 0 0 1.5rem 0;
  display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.aufmacher__essen img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }

.aufmacher__innen { position: relative; z-index: 2; padding-block: 1.75rem 2.75rem; }
.aufmacher__titel { font-size: clamp(3rem, 16.5vw, 5.5rem); line-height: .98; }
.aufmacher__zeile { display: block; }
.tafel {
  display: inline-block; margin: .04em 0 .1em -.03em; padding: .04em .16em .1em;
  background: var(--rot); color: #FFFFFF;
  border: .04em solid var(--tinte); border-radius: .12em;
  box-shadow: .06em .06em 0 var(--tinte);
  transform: rotate(-2.5deg);
}
.aufmacher__lead { margin-top: 1.25rem; max-width: 34rem; font-size: var(--t-1); }
.aufmacher__knoepfe { margin-top: 1.75rem; }
@media (max-width: 559px) { .knopfreihe > .knopf--gross { flex: 1 1 100%; } }
.aufmacher__fakten { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; font-weight: 700; font-size: .9375rem; line-height: 1.45; }
.aufmacher__bewertung {
  flex: none; padding: .0625rem .5rem;
  background: var(--papier); border: 2px solid var(--tinte); border-radius: .375rem;
  line-height: 1.5; white-space: nowrap;
}
.aufmacher__bewertung b { font: 400 1.125em/1 var(--f-display); }

@media (min-width: 1024px) {
  .aufmacher {
    --titel: clamp(3.5rem, min(7vw, (100svh - 28rem) / 4.4), 8rem);
    --text-b: max(30rem, var(--titel) * 4.45);
    --feld-x: calc(max(var(--rand-x), (100% - var(--breite)) / 2) + var(--text-b) + clamp(2rem, 4vw, 4.5rem));
    min-height: clamp(36rem, 100svh - var(--kopf-h) - 3px, 86rem);
    justify-content: center;
  }
  .aufmacher__buehne { position: absolute; inset: 0; height: auto; }
  .aufmacher__feld, .aufmacher__kante { inset: 0 0 0 var(--feld-x); clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); }
  .aufmacher__kante { transform: translateX(-.75rem); }
  .aufmacher__feld { --punkt: 2.25px; --punkt-abstand: 18px; }
  .aufmacher__essen { inset: 0 0 0 calc(var(--feld-x) + 3%); padding: clamp(1.5rem, 5svh, 4rem) clamp(1.5rem, 3vw, 4rem); }
  .aufmacher__essen img { width: auto; height: auto; max-width: min(100%, 64rem); max-height: 100%; }
  .aufmacher__innen { width: min(100% - 2 * var(--rand-x), var(--breite)); padding-block: clamp(1.5rem, 4svh, 3rem); }
  .aufmacher__text { width: var(--text-b); }
  .aufmacher__titel { font-size: var(--titel); line-height: .96; }
  .aufmacher__lead { max-width: 30rem; margin-top: clamp(1rem, 2.5svh, 1.75rem); }
  .aufmacher__knoepfe { margin-top: clamp(1.25rem, 3svh, 2rem); }
}

@media (prefers-reduced-motion: no-preference) {
  html.js .aufmacher__text, html.js .aufmacher__essen img { animation: aufmacher-rein .5s var(--aus) both .05s; }
  html.js .aufmacher .tafel { animation: klatsch .55s var(--aus) both .2s; }
}
@keyframes aufmacher-rein { from { opacity: 0; transform: translateY(.75rem); } }
@keyframes klatsch {
  0% { opacity: 0; transform: rotate(-10deg) scale(1.35); }
  55% { opacity: 1; transform: rotate(-1deg) scale(.96); }
  100% { opacity: 1; transform: rotate(-2.5deg) scale(1); }
}

html.js .wartet { transform: translateY(1.75rem); }
html.js .zeigt { transition: transform .7s var(--aus); transition-delay: var(--verz, 0ms); }
@media (prefers-reduced-motion: reduce) { html.js .wartet { transform: none; } }

.beliebt__raster { display: grid; gap: 1.5rem; }
@media (min-width: 900px) {
  .beliebt__raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .beliebt__raster .gericht--gross { grid-row: span 2; }
}
.gericht {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--papier); border: var(--rand); border-radius: var(--r-gross);
  box-shadow: var(--schatten); overflow: hidden;
}
.gericht__bild { position: relative; aspect-ratio: 4 / 3; border-bottom: var(--rand); background: #FFFFFF; flex: none; }
.gericht__bild img { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: .625rem .75rem .375rem; object-fit: contain; object-position: 50% 50%; filter: brightness(1.02); }
.etikett {
  position: absolute; top: .75rem; left: .75rem; z-index: 1;
  padding: .375rem .625rem; border: 2px solid var(--tinte); border-radius: .5rem;
  background: var(--gelb); font: 800 .8125rem/1 var(--f-text);
}
.etikett--rot { background: var(--rot); color: #FFFFFF; }
.etikett--pink { background: var(--pink); }
.etikett--gruen { background: var(--gruen); color: #FFFFFF; }
.gericht__koerper { display: flex; flex-direction: column; gap: .75rem; flex: 1; padding: 1.125rem 1.25rem 1.25rem; }
.gericht__name { font-size: 1.5rem; line-height: 1.05; }
.gericht__text { color: var(--leise); line-height: 1.5; }
.gericht__fuss {
  margin-top: auto; padding-top: .25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
}
.preis { font: 400 1.625rem/1 var(--f-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.knopf--rein { background: var(--gelb); min-height: 2.75rem; padding: 0 1rem; font-size: .9375rem; }
.knopf--rein.ist-drin { background: var(--gruen); color: #FFFFFF; }

.vegan-wahl {
  position: relative; display: flex; align-items: center; gap: .625rem;
  min-height: 2.75rem; padding: .25rem .75rem;
  border: 2px solid var(--tinte); border-radius: var(--r);
  font-weight: 700; font-size: .9375rem; cursor: pointer;
  transition: background-color .15s ease-out;
}
.vegan-wahl input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.vegan-wahl__kasten {
  width: 1.375rem; height: 1.375rem; flex: none; display: grid; place-items: center;
  border: 2.5px solid var(--tinte); border-radius: .375rem; background: var(--papier);
  transition: background-color .15s ease-out;
}
.vegan-wahl__kasten .ico { width: 1rem; height: 1rem; stroke-width: 3.2; color: #FFFFFF; opacity: 0; transform: scale(.6); transition: opacity .15s ease-out, transform .2s var(--aus); }
.vegan-wahl__preis { margin-left: auto; font-variant-numeric: tabular-nums; }
.vegan-wahl:has(input:checked) { background: #E4F4E9; }
.vegan-wahl:has(input:checked) .vegan-wahl__kasten { background: var(--gruen); }
.vegan-wahl:has(input:checked) .ico { opacity: 1; transform: none; }
.vegan-wahl:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 2px; }

.gericht--gross .gericht__bild { background: var(--gelb); }
.gericht--gross .gericht__bild img { padding: 0; transform: scale(1.1); filter: none; }
.gericht--gross .gericht__name { font-size: var(--t-3); }
.gericht--gross .gericht__text { font-size: var(--t-1); }
@media (min-width: 900px) {
  .gericht--gross .gericht__bild { aspect-ratio: auto; flex: 1 1 auto; min-height: 17rem; }
}
@media (min-width: 560px) {
  .gericht--quer { flex-direction: row; }
  .gericht--quer .gericht__bild { aspect-ratio: auto; width: 42%; min-height: 13rem; border-bottom: 0; border-right: var(--rand); }
  .gericht--quer .gericht__bild img { padding: 1.75rem .25rem .5rem; }
}

.qualitaet { background: var(--tinte); color: var(--creme); }
.qualitaet__lead { margin-top: 1rem; max-width: 34rem; font-size: var(--t-1); color: var(--leise-dunkel); }
.qualitaet__liste { list-style: none; margin: 2rem 0 0; padding: 0; }
.qualitaet__liste li { padding-block: 1.125rem; border-top: 2px solid rgba(255, 246, 227, .2); }
.qualitaet__liste li:last-child { padding-bottom: 0; }
.qualitaet__liste h3 { font-size: 1.375rem; line-height: 1.1; color: var(--gelb); }
.qualitaet__liste p { margin-top: .375rem; color: var(--leise-dunkel); }
@media (min-width: 600px) {
  .qualitaet__liste li { display: grid; grid-template-columns: 10.5rem 1fr; gap: 1.5rem; }
  .qualitaet__liste p { margin-top: 0; }
}

.punkteband { background: var(--pink); border-block: var(--rand); padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); }
.punkteband__innen { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.5rem 1.75rem; }
.punkteband__innen > .knopf { grid-column: 1 / -1; justify-self: start; }
.punkteband h2 { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem); }
.punkteband p { margin-top: .375rem; }
@media (min-width: 800px) {
  .punkteband__innen { grid-template-columns: auto 1fr auto; }
  .punkteband__innen > .knopf { grid-column: auto; }
}
.muenze {
  position: relative; width: 5.5rem; height: 5.5rem;
  display: grid; place-content: center; text-align: center;
  background: var(--gelb); border: var(--rand); border-radius: 50%;
  box-shadow: var(--schatten-klein); transform: rotate(-8deg);
}
.muenze::before { content: ""; position: absolute; inset: 5px; border: 2px dashed var(--tinte); border-radius: 50%; }
.muenze span { font: 800 .75rem/1 var(--f-text); }
.muenze b { font: 400 1.5rem/1 var(--f-display); }

.filiale { display: flex; flex-direction: column; gap: .5rem; }
.filiale__stadt { font-size: var(--t-2); }
.filiale__adresse { font-weight: 700; }
.filiale__zeit { color: var(--leise); }
.status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9375rem; }
.status:empty { display: none; }
.status::before { content: ""; width: .75rem; height: .75rem; flex: none; border-radius: 50%; background: #B9AC98; border: 2px solid var(--tinte); }
.status.ist-offen::before { background: #2BB45A; }
.filialen--gross .filiale { gap: .875rem; }
.filialen--gross .knopf { margin-top: auto; align-self: flex-start; }
.zeiten { display: grid; }
.zeiten div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .375rem; border-bottom: 2px dotted var(--linie); }
.zeiten dd { font-weight: 700; }

.schlussband {
  background: var(--rot); color: #FFFFFF; border-top: var(--rand);
  padding-block: clamp(3rem, 2rem + 3.5vw, 5rem);
}
.schlussband__innen { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.75rem 3rem; }
.schlussband h2 { font-size: var(--t-4); text-shadow: 3px 3px 0 var(--tinte); }
.schlussband p { margin-top: .875rem; max-width: 34rem; font-size: var(--t-1); }

.seitenkopf {
  background: var(--gelb); border-bottom: var(--rand);
  padding-block: clamp(1.25rem, 1rem + 1.5vw, 2.5rem) clamp(2.5rem, 1.75rem + 3vw, 4.5rem);
}
.seitenkopf h1 { font-size: var(--t-4); margin-top: .5rem; }
.seitenkopf--knapp { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.seitenkopf__lead { margin-top: 1.25rem; max-width: 38rem; font-size: var(--t-1); }
.brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; font-weight: 700; font-size: .9375rem; }
.brotkrumen a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.seitenkopf--paar .paar__text { display: flex; flex-direction: column; }
.eckdaten { margin-top: 1.75rem; border-top: var(--rand); }
.eckdaten div { display: grid; gap: .125rem 1.25rem; padding-block: .875rem; border-bottom: 2px solid rgba(25, 20, 16, .2); }
.eckdaten dt { font: 400 1.25rem/1.2 var(--f-display); }
@media (min-width: 560px) { .eckdaten div { grid-template-columns: 7.5rem 1fr; } }

.kategorien {
  position: sticky; top: calc(var(--kopf-h) + 3px + env(safe-area-inset-top)); z-index: 40;
  background: var(--creme); border-bottom: var(--rand);
}
.kategorien__liste {
  list-style: none; margin: 0 calc(var(--rand-x) * -1); padding: .625rem var(--rand-x);
  display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--rand-x); overscroll-behavior-x: contain;
}
.kategorien__liste::-webkit-scrollbar { display: none; }
.kategorien__liste li { flex: none; scroll-snap-align: start; }
.kategorien__liste a {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem;
  border: 2.5px solid var(--tinte); border-radius: var(--r); background: var(--papier);
  font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.kategorien__liste a span { font-weight: 700; font-size: .875rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.kategorien__liste a.ist-aktiv { background: var(--tinte); color: var(--gelb); }
.kategorien__liste a.ist-aktiv span { color: var(--leise-dunkel); }
@media (hover: hover) and (pointer: fine) { .kategorien__liste a:not(.ist-aktiv):hover { background: var(--gelb-hell); } }

.kategorie { padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); scroll-margin-top: calc(var(--kopf-h) + 4.5rem); }
.kategorie__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1.5rem;
  padding-bottom: .875rem; margin-bottom: 1.5rem; border-bottom: var(--rand);
}
.kategorie__notiz { font-weight: 700; color: var(--leise); }
.gerichte { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); }
@media (max-width: 559px) {
  .speisekarte .gericht { display: grid; grid-template-columns: 7.75rem minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .speisekarte .gericht__koerper { display: contents; }
  .speisekarte .gericht__bild { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; min-height: 8.5rem; border-right: var(--rand); }
  .speisekarte .gericht__bild img { padding: 1.5rem .25rem .25rem; }
  .speisekarte .gericht__name { grid-column: 2; grid-row: 1; padding: .875rem 1rem .25rem; font-size: 1.25rem; }
  .speisekarte .gericht__text { grid-column: 2; grid-row: 2; padding: 0 1rem .875rem; }
  .speisekarte .vegan-wahl { grid-column: 1 / -1; margin: .875rem 1rem 0; }
  .speisekarte .gericht__fuss { grid-column: 1 / -1; margin: 0; padding: .875rem 1rem 1rem; }
  .speisekarte .gericht__bild, .speisekarte .gericht__text { border-bottom: var(--rand); }
  .speisekarte .etikett { top: .375rem; left: .375rem; font-size: .75rem; padding: .3rem .45rem; }
}
.allergene {
  margin-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--abstand); max-width: 48rem;
  padding: 1.125rem 1.25rem; border: 2px dashed var(--tinte); border-radius: var(--r); color: var(--leise);
}

.punktekopf__innen { display: grid; gap: 3rem 4rem; align-items: center; }
@media (min-width: 960px) { .punktekopf__innen { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.punktekopf .knopfreihe { margin-top: 2rem; }
.punktekopf__karte { display: grid; justify-items: center; gap: 1.25rem; }
.punktekarte {
  width: min(100%, 27rem); display: grid; gap: .75rem;
  padding: 1.5rem 1.625rem; background: var(--tinte); color: var(--creme);
  border: var(--rand); border-radius: var(--r-gross); box-shadow: 8px 8px 0 var(--pink);
  transform: rotate(-2deg);
}
.punktekarte__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.punktekarte__marke { font: 400 1.25rem/1 var(--f-display); color: var(--gelb); }
.punktekarte__level {
  padding: .3rem .6rem; border: 2px solid var(--creme); border-radius: .5rem;
  background: var(--pink); color: var(--tinte); font: 800 .8125rem/1 var(--f-text);
}
.punktekarte__stand { display: grid; gap: .25rem; margin-top: .5rem; }
.punktekarte__zahl { font: 400 clamp(3.5rem, 2.5rem + 4vw, 5rem)/.9 var(--f-display); color: var(--gelb); font-variant-numeric: tabular-nums; }
.punktekarte__stand span:last-child { font-size: .9375rem; color: var(--leise-dunkel); }
.punktekarte__euro { font-weight: 800; }
.fortschritt { height: .875rem; overflow: hidden; border: 2px solid var(--creme); border-radius: 999px; background: rgba(255, 246, 227, .12); }
.fortschritt__balken { display: block; height: 100%; background: var(--gelb); transform-origin: left; transform: scaleX(var(--anteil)); transition: transform .7s var(--aus); }
.punktekarte__weg { font-size: .875rem; color: var(--leise-dunkel); }
.punktekarte__fuss {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin-top: .5rem; padding-top: 1rem; border-top: 2px dashed rgba(255, 246, 227, .3);
}
.punktekarte__name { display: grid; gap: .125rem; }
.punktekarte__name b { font-weight: 800; }
.punktekarte__name span { font-size: .8125rem; color: var(--leise-dunkel); }
.punktekarte__code { width: 4.75rem; height: 4.75rem; flex: none; border-radius: .5rem; }
.punktekarte__notiz { font-weight: 700; font-size: .9375rem; }

.schritte li { display: grid; gap: .625rem; align-content: start; }
.schritte__nr {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: var(--rand); border-radius: 50%; background: var(--gelb); box-shadow: var(--schatten-klein);
  font: 400 1.375rem/1 var(--f-display);
}
.schritte h3 { font-size: var(--t-2); margin-top: .375rem; }
.schritte p { color: var(--leise); }

.spin { background: var(--papier); border-block: var(--rand); }
.spin__innen { display: grid; gap: 3rem 4rem; align-items: center; }
@media (min-width: 900px) { .spin__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.spin__lead { margin-top: 1rem; font-size: var(--t-1); max-width: 32rem; }
.spin__hinweis { margin-top: 1rem; color: var(--leise); max-width: 32rem; }
.spin .knopfreihe { margin-top: 1.75rem; }
.spin__ergebnis { margin-top: 1.25rem; min-height: 1.1em; font: 400 var(--t-2)/1.1 var(--f-display); color: var(--rot); }
.rad { position: relative; width: min(100%, 26rem); margin-inline: auto; padding-top: 1.25rem; }
.rad__zeiger {
  position: absolute; top: 0; left: 50%; z-index: 1; width: 2.5rem; height: 2.75rem;
  transform: translateX(-50%); overflow: visible;
  fill: var(--rot); stroke: var(--tinte); stroke-width: 4; stroke-linejoin: round;
}
.rad__scheibe { display: block; width: 100%; height: auto; filter: drop-shadow(6px 6px 0 var(--tinte)); }
.rad__scheibe text { font-family: var(--f-display); font-size: 26px; text-anchor: middle; dominant-baseline: central; }
.rad__scheibe .rad__nabe { font-size: 24px; dominant-baseline: auto; }
.rad__dreh { transform-box: fill-box; transform-origin: center; transition: transform 4.4s cubic-bezier(.14, .8, .16, 1); }
@media (prefers-reduced-motion: reduce) { .rad__dreh { transition-duration: .01s; } }

.kontostand {
  padding: .625rem 1rem; background: var(--gelb); border: var(--rand); border-radius: var(--r);
  box-shadow: var(--schatten-klein); font-weight: 700;
}
.kontostand b { font-weight: 800; }
.praemien__liste {
  list-style: none; margin: 0; padding: 0; display: grid;
  background: var(--papier); border: var(--rand); border-radius: var(--r-gross);
  box-shadow: var(--schatten); overflow: hidden;
}
.praemie {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem 1.25rem;
  padding: 1.125rem 1.25rem; border-top: 2px solid var(--linie);
}
.praemie:first-child { border-top: 0; }
.praemie__text { grid-column: 1 / -1; }
.praemie__name { font-size: 1.375rem; }
.praemie__text p { margin-top: .125rem; color: var(--leise); }
.praemie__wert { display: grid; gap: .125rem; }
.praemie__punkte { font: 400 1.5rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.praemie__euro { font-size: .875rem; color: var(--leise); }
.praemie__knopf { min-width: 8.75rem; }
.praemie__code {
  grid-column: 1 / -1; padding: .75rem 1rem;
  background: var(--gelb-hell); border: 2px dashed var(--tinte); border-radius: .5rem;
  font-weight: 700;
}
.praemie__code b { font-weight: 800; letter-spacing: .04em; }
@media (min-width: 640px) {
  .praemie { grid-template-columns: 1fr auto auto; }
  .praemie__text { grid-column: auto; }
  .praemie__wert { text-align: right; }
}
@media (min-width: 1040px) {
  .praemien__liste { grid-template-columns: 1fr 1fr; }
  .praemie:nth-child(2) { border-top: 0; }
  .praemie:nth-child(odd) { border-right: 2px solid var(--linie); }
}

.level { background: var(--pink); border-block: var(--rand); }
.level .abschnitt__kopf p { color: var(--tinte); }
.treppe { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
@media (min-width: 900px) {
  .treppe { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .stufe--1 { min-height: 17rem; }
  .stufe--2 { min-height: 19.5rem; }
  .stufe--3 { min-height: 22rem; }
}
.stufe {
  position: relative; display: flex; flex-direction: column; gap: 1rem;
  padding: 1.5rem 1.5rem 1.75rem;
  background: var(--papier); border: var(--rand); border-radius: var(--r-gross); box-shadow: var(--schatten);
}
.stufe__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .875rem; border-bottom: var(--rand); }
.stufe h3 { font-size: var(--t-2); }
.stufe__ab { font-weight: 800; white-space: nowrap; }
.stufe ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.stufe li { position: relative; padding-left: 1.25rem; }
.stufe li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .45rem; height: .45rem; background: var(--tinte); transform: rotate(45deg); }
.stufe--3 { background: var(--tinte); color: var(--creme); }
.stufe--3 h3 { color: var(--gelb); }
.stufe--3 .stufe__kopf { border-bottom-color: rgba(255, 246, 227, .35); }
.stufe--3 li::before { background: var(--gelb); }
.stufe__marke {
  position: absolute; top: -1.1rem; right: 1.25rem;
  padding: .35rem .65rem; background: var(--gelb); border: var(--rand); border-radius: .5rem;
  box-shadow: var(--schatten-klein); font: 400 1rem/1 var(--f-display); transform: rotate(3deg);
}

.extra__innen { display: grid; gap: 3.5rem 5rem; }
@media (min-width: 960px) { .extra__innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.extra h2 { margin-bottom: 1.5rem; }
.extra__liste { list-style: none; margin: 0; padding: 0; border-top: var(--rand); }
.extra__liste li { display: grid; grid-template-columns: 5.25rem 1fr; gap: 1rem; padding-block: 1.25rem; border-bottom: 2px solid var(--linie); }
.extra__plus { font: 400 1.75rem/1.05 var(--f-display); color: var(--rot); font-variant-numeric: tabular-nums; }
.extra__liste h3 { font-size: 1.375rem; }
.extra__liste p { margin-top: .25rem; color: var(--leise); }
.fragen details {
  margin-bottom: .75rem; background: var(--papier);
  border: var(--rand); border-radius: var(--r); box-shadow: var(--schatten-klein);
}
.fragen summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: .75rem 1rem .75rem 1.25rem;
  font-weight: 800; cursor: pointer; border-radius: calc(var(--r) - 3px);
  transition: background-color .15s ease-out;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary .ico { transition: transform .22s var(--aus); }
.fragen details[open] summary .ico { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .fragen summary:hover { background: var(--gelb-hell); } }
.fragen__antwort { padding: 0 1.25rem 1.25rem; color: var(--leise); }
.fragen details::details-content { block-size: 0; overflow: hidden; transition: block-size .28s var(--aus), content-visibility .28s allow-discrete; }
.fragen details[open]::details-content { block-size: auto; }

.recht { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) var(--abstand); }
.recht > * { max-width: 44rem; }
.recht h2 { font: 800 1.25rem/1.3 var(--f-text); margin-top: 2rem; }
.recht p { margin-top: .5rem; }
.recht__hinweis { padding: 1rem 1.25rem; background: var(--papier); border: 2px solid var(--tinte); border-radius: var(--r); }

.fuss { background: var(--tinte); color: var(--creme); border-top: var(--rand); padding-top: clamp(3rem, 2.5rem + 2vw, 4.5rem); }
.fuss__raster { display: grid; gap: 2.5rem; }
@media (min-width: 640px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .fuss__raster { grid-template-columns: 1.5fr 1fr 1fr .8fr; } }
.marke--fuss .marke__wort { color: var(--creme); }
.fuss p { color: var(--leise-dunkel); }
.fuss__marke p { margin-top: 1.25rem; max-width: 22rem; }
.fuss__titel { margin-bottom: .75rem; font-size: 1.25rem; line-height: 1.1; color: var(--gelb); }
.fuss__links { list-style: none; margin: .25rem 0 0; padding: 0; }
.fuss__links a, .fuss__recht a {
  display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--creme);
  text-decoration-color: rgba(255, 246, 227, .4);
}
.fuss__links a[aria-current="page"] { color: var(--gelb); }
@media (hover: hover) and (pointer: fine) { .fuss a:hover { text-decoration-color: var(--gelb); } }
.fuss__unten {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 2rem;
  margin-top: 3rem; padding-block: 1.25rem calc(4.5rem + env(safe-area-inset-bottom));
  border-top: 2px solid rgba(255, 246, 227, .18); font-size: .9375rem;
}
.fuss__unten a { color: var(--creme); }
.fuss__recht { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; }
.fuss :focus-visible { outline-color: var(--gelb); }

.korb {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0;
  width: min(100%, 28rem); max-width: none; height: 100dvh; max-height: none;
  border: 0; border-left: var(--rand); background: var(--creme); color: var(--tinte);
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .26s var(--inaus);
}
.korb[open] { display: flex; flex-direction: column; }
.korb.ist-offen { transform: none; transition: transform .42s var(--aus); }
.korb::backdrop { background: rgba(25, 20, 16, .55); opacity: 0; transition: opacity .24s ease-out; }
.korb.ist-offen::backdrop { opacity: 1; transition-duration: .36s; }
@media (prefers-reduced-motion: reduce) {
  .korb { transform: none; opacity: 0; transition: opacity .2s ease-out; }
  .korb.ist-offen { opacity: 1; transition: opacity .2s ease-out; }
}
.korb__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .875rem 1.25rem; padding-top: max(.875rem, env(safe-area-inset-top));
  background: var(--gelb); border-bottom: var(--rand);
}
.korb__titel { font-size: 1.75rem; }
.korb__titel:focus { outline: none; }
.korb__schritt { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.korb__inhalt { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 1.25rem; }
.korb__fuss {
  display: grid; gap: .75rem; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--papier); border-top: var(--rand);
}
.korb__liste { list-style: none; margin: 0; padding: 0; }
.posten {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; align-items: center; gap: .875rem;
  padding-block: .875rem; border-bottom: 2px solid var(--linie);
}
.posten:first-child { padding-top: 0; }
.posten img { width: 4rem; height: 4rem; padding: .125rem; object-fit: contain; filter: brightness(1.02); border: 2px solid var(--tinte); border-radius: .5rem; background: #FFFFFF; }
.posten__name { font-weight: 800; line-height: 1.25; }
.posten__zusatz { display: block; font-size: .875rem; font-weight: 400; color: var(--leise); }
.posten__preis { display: block; margin-top: .125rem; }
.menge { display: flex; align-items: center; border: 2.5px solid var(--tinte); border-radius: var(--r); background: var(--papier); }
.menge button {
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 0; background: none; border-radius: calc(var(--r) - 3px);
}
.menge button:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .menge button:hover { background: var(--gelb-hell); } }
.menge .ico { width: 1.125rem; height: 1.125rem; }
.menge__zahl { min-width: 1.5rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.korb__leer { display: grid; justify-items: center; gap: 1rem; padding-block: 3rem 1rem; text-align: center; font-weight: 700; }
.korb__leer-symbol { width: 3.5rem; height: 3.5rem; stroke-width: 2; }
.dazu { margin-top: 1.5rem; }
.dazu__titel { margin-bottom: .75rem; font: 800 1rem/1.2 var(--f-text); }
.dazu__reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .625rem; }
.dazu__karte {
  display: grid; gap: .375rem; align-content: start; padding: .5rem; text-align: left;
  border: 2.5px solid var(--tinte); border-radius: var(--r); background: var(--papier);
  box-shadow: var(--schatten-klein); font-size: .875rem;
  transition: transform .15s var(--aus), box-shadow .15s var(--aus);
}
.dazu__karte img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: .25rem; background: #FFFFFF; filter: brightness(1.02); }
.dazu__karte b { font-weight: 800; line-height: 1.2; }
.dazu__plus { display: inline-flex; align-items: center; gap: .25rem; font-weight: 800; color: var(--rot); }
.dazu__plus .ico { width: 1rem; height: 1rem; stroke-width: 3; }
@media (hover: hover) and (pointer: fine) { .dazu__karte:hover { transform: translate(-2px, -2px); box-shadow: var(--schatten); } }
.dazu__karte:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinte); }
.korb__schwelle { font-weight: 700; font-size: .9375rem; }
.korb__schwelle:empty { display: none; }
.summe { display: grid; gap: .25rem; }
.summe div { display: flex; justify-content: space-between; gap: 1rem; }
.summe dd { font-weight: 700; font-variant-numeric: tabular-nums; }
.summe__gesamt { margin-top: .25rem; padding-top: .5rem; border-top: 2px solid var(--linie); font: 400 1.375rem/1.1 var(--f-display); }
.summe__gesamt dd { font-weight: 400; }
.korb__hinweis { font-size: .875rem; color: var(--leise); text-align: center; }

.textlink--zurueck { margin: -.5rem 0 .75rem; }
.express { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.express__knopf { background: var(--tinte); color: #FFFFFF; }
.trenner { display: flex; align-items: center; gap: .75rem; margin-block: 1.25rem .5rem; color: var(--leise); font-size: .875rem; font-weight: 700; }
.trenner::before, .trenner::after { content: ""; flex: 1; height: 2px; background: var(--linie); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: .5rem; font-weight: 800; }
.umschalter { margin-top: 1rem; }
.umschalter__wahl {
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  border: var(--rand); border-radius: var(--r); background: var(--papier);
}
.umschalter__wahl label {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; font-weight: 800; cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.umschalter__wahl label + label { border-left: var(--rand); }
.umschalter__wahl input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.umschalter__wahl label:has(:checked) { background: var(--tinte); color: var(--gelb); }
.umschalter__wahl label:has(:focus-visible) { outline: 2px solid var(--blau); outline-offset: -7px; }
.feld { display: grid; gap: .375rem; margin-top: 1rem; }
.feld > label { font-weight: 700; font-size: .9375rem; }
.feldpaar { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 .75rem; }
.feldpaar--gleich { grid-template-columns: 1fr 1fr; }
@media (max-width: 380px) { .feldpaar--gleich { grid-template-columns: 1fr; } }
.eingabe {
  width: 100%; height: var(--feld-h); padding: 0 var(--feld-px);
  border: var(--rand); border-radius: var(--r); background: var(--papier); color: var(--tinte);
  font: 400 1rem/1.2 var(--f-text); caret-color: var(--rot);
  transition: box-shadow .15s var(--aus);
}
.eingabe:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.eingabe[aria-invalid="true"] { border-color: var(--fehler); background: var(--fehler-grund); }
.vd-feld { font-family: var(--f-text); font-size: 1rem; font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .eingabe:hover, .vd-feld:hover { box-shadow: var(--schatten-klein); } }
.feld__fehler { display: flex; align-items: flex-start; gap: .375rem; color: var(--fehler); font-weight: 700; font-size: .9375rem; line-height: 1.4; }
.feld__fehler .ico { width: 1.125rem; height: 1.125rem; margin-top: .05em; }
.zahlart { margin-top: 1.25rem; display: grid; gap: .625rem; }
.zahlart legend { margin-bottom: 0; }
.zahlart__wahl {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .875rem;
  padding: .875rem 1rem; border: 2.5px solid var(--tinte); border-radius: var(--r);
  background: var(--papier); cursor: pointer;
  transition: background-color .15s ease-out, box-shadow .15s var(--aus);
}
.zahlart__wahl:has(:checked) { background: var(--gelb-hell); box-shadow: var(--schatten-klein); }
.zahlart__wahl input {
  appearance: none; -webkit-appearance: none; width: 1.375rem; height: 1.375rem; margin: 0;
  display: grid; place-items: center;
  border: 2.5px solid var(--tinte); border-radius: 50%; background: var(--papier);
}
.zahlart__wahl input::before {
  content: ""; width: .625rem; height: .625rem; border-radius: 50%; background: var(--tinte);
  opacity: 0; transform: scale(.4); transition: opacity .15s ease-out, transform .18s var(--aus);
}
.zahlart__wahl input:checked::before { opacity: 1; transform: none; }
.zahlart__wahl span { display: grid; }
.zahlart__wahl b { font-weight: 800; }
.zahlart__wahl small { font-size: .875rem; color: var(--leise); }

.fertig { display: grid; justify-items: center; align-content: center; gap: 1rem; text-align: center; padding-block: 2.5rem; }
.fertig__stempel {
  padding: .08em .35em .14em; background: var(--rot); color: #FFFFFF;
  border: var(--rand); border-radius: var(--r); box-shadow: var(--schatten);
  font: 400 3.25rem/1 var(--f-display); transform: rotate(-4deg);
}
@media (prefers-reduced-motion: no-preference) { .fertig__stempel { animation: stempel .6s var(--aus) both .08s; } }
@keyframes stempel {
  0% { opacity: 0; transform: rotate(-12deg) scale(1.4); }
  55% { opacity: 1; transform: rotate(-3deg) scale(.96); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}
.fertig__nummer b { display: block; margin-top: .25rem; font: 400 1.5rem/1.1 var(--f-display); letter-spacing: .02em; }
.fertig__punkte { padding: .5rem .875rem; background: var(--gelb); border: 2.5px solid var(--tinte); border-radius: var(--r); font-weight: 800; font-size: 1.125rem; }
.fertig__klein { max-width: 22rem; font-size: .9375rem; color: var(--leise); }