/* Pizzeria La Rocca. Gesetzt wie eine gedruckte Trattoria-Karte:
   Papierweiß, Tinte, das Rot der Tischdecken, sparsam Flaschengrün. */

:root {
  --papier: #fbfaf7;
  --papier-2: #f2efe8;
  --tinte: #16171a;
  --grau: #5b5953;
  --fein: rgba(22, 23, 26, 0.2);
  --rot: #c4262b;
  --rot-tief: #a31d22;
  --gruen: #2b5a42;
  --serif: "Alegreya", Georgia, "Times New Roman", serif;
  --sans: "Alegreya Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --rand: clamp(16px, 4vw, 56px);
  --seite: max(var(--rand), calc((100vw - 1408px) / 2));
  --leiste-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font: 400 1.2rem/1.55 var(--serif);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--rot-tief); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; box-shadow: 0 0 0 6px var(--papier); }
.knopf:focus-visible { box-shadow: 0 0 0 6px var(--papier); }
[hidden] { display: none !important; }

.sprung { position: absolute; left: 8px; top: -60px; background: var(--tinte); color: var(--papier); padding: 0.6rem 1rem; z-index: 100; font-family: var(--sans); }
.sprung:focus { top: 8px; }

h2 { font: 500 clamp(2.3rem, 4.6vw, 3.6rem)/1.05 var(--serif); letter-spacing: -0.012em; }

/* ---------- Schaltflächen: gerade Kanten, wie Stempel ---------- */
.knopf {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0.75rem 1.4rem; background: var(--rot); color: #fff; border: 1.5px solid var(--rot);
  font: 500 1.1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
}
.knopf strong { font: 700 1.75rem/1.15 var(--sans); letter-spacing: 0.01em; }
.knopf span { font-size: 1rem; }
.knopf:hover { background: var(--rot-tief); border-color: var(--rot-tief); color: #fff; }
.knopf-rand { background: transparent; color: var(--tinte); border-color: var(--tinte); justify-content: center; }
.knopf-rand:hover { background: var(--tinte); border-color: var(--tinte); color: var(--papier); }

/* ---------- Kopf ---------- */
.kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.55rem var(--seite); border-bottom: 1px solid var(--tinte); background: var(--papier);
}
.marke img { height: 40px; width: auto; }
.kopf-nav { display: flex; gap: 1.8rem; font: 500 1.1rem var(--sans); }
.kopf-nav a, .kopf-anruf { text-decoration: none; padding: 0.3rem 0; border-bottom: 1.5px solid transparent; }
.kopf-nav a:hover { border-bottom-color: var(--rot); color: var(--tinte); }
.kopf-anruf { font: 700 1.3rem var(--sans); color: var(--rot-tief); white-space: nowrap; }

/* ---------- Einstieg ---------- */
.einstieg { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(2.5rem, 5vw, 4.5rem) var(--seite); }
.einstieg-text { display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; }
.einstieg-logo { width: min(100%, 440px); height: auto; }
.einstieg h1 { font: 500 clamp(1.7rem, 2.5vw, 2.35rem)/1.15 var(--serif); max-width: 22ch; text-wrap: balance; }
.einstieg-zeiten { font-size: 1.25rem; line-height: 1.5; }
#status { font-style: italic; color: var(--grau); }
#status.ist-offen { color: var(--gruen); font-weight: 500; }
.einstieg-aktion { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: stretch; }
.einstieg-foto { margin: 0; justify-self: end; width: min(100%, 600px); padding: 8px; border: 1px solid var(--tinte); background: var(--papier); }
.einstieg-foto img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 45%; background: #2a1d12; }
.karoband {
  height: 28px; border-top: 1px solid var(--tinte); border-bottom: 1px solid var(--tinte);
  background:
    repeating-linear-gradient(90deg, rgba(196, 38, 43, 0.6) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(0deg, rgba(196, 38, 43, 0.6) 0 14px, transparent 14px 28px), #fff;
}

/* ---------- Pizza aussuchen ---------- */
.pizza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(3rem, 7vw, 6rem) var(--seite); align-items: start; }
.pizza-buehne { position: sticky; top: 1rem; height: min(76svh, 720px); min-height: 500px; display: flex; flex-direction: column; border: 1px solid var(--tinte); background: #eee6da; }
#pizza { flex: 1; min-height: 0; width: 100%; display: block; cursor: grab; touch-action: pan-y; }
#pizza.is-dragging { cursor: grabbing; }
.dreh-hinweis { position: absolute; left: 0.7rem; top: 0.7rem; background: var(--papier); padding: 0.15rem 0.6rem; font: 400 0.95rem var(--sans); color: var(--grau); }
.wahl-aktuell { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--papier); border-top: 1px solid var(--tinte); }
.wa-text { font: 500 1.15rem/1.3 var(--serif); }
.pizza-wahl h2 { margin-bottom: 0.9rem; }
.pizza-lead { max-width: 34em; color: var(--grau); font-style: italic; margin-bottom: 1.6rem; }
.wahl-liste { border-top: 1px solid var(--tinte); }
.wahl-liste button {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.5rem 0.6rem; align-items: baseline; width: 100%;
  padding: 0.65rem 0.6rem; background: none; border: 0; border-bottom: 1px dotted rgba(22, 23, 26, 0.45); text-align: left; cursor: pointer;
}
.wahl-liste button:hover { background: var(--papier-2); }
.wahl-liste button[aria-pressed="true"] { background: rgba(196, 38, 43, 0.08); box-shadow: inset 4px 0 0 var(--rot); }
.wahl-liste .nr { font: 500 1.05rem var(--sans); color: var(--grau); }
.wahl-liste .name { display: block; font: 600 1.25rem/1.2 var(--serif); }
.wahl-liste .text { display: block; font: italic 400 1rem/1.35 var(--serif); color: var(--grau); }
.wahl-liste .preis { font: 500 1.1rem var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wahl-fuss { margin-top: 1.2rem; font: 500 1.1rem var(--sans); }
.pizza.kein-webgl { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.kein-webgl .pizza-buehne { display: none; }

/* ---------- Plus und Anzahl ---------- */
.plus {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex: none;
  background: var(--papier); border: 1.5px solid var(--tinte); cursor: pointer; padding: 0;
}
.plus svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.plus:hover, .plus.hat-anzahl { background: var(--tinte); color: var(--papier); }
.plus .anzahl { position: absolute; right: -0.55rem; top: -0.6rem; min-width: 1.35rem; padding: 0 0.3rem; background: var(--rot); color: #fff; font: 700 0.85rem/1.35rem var(--sans); text-align: center; }
.plus-text { width: auto; padding: 0 0.9rem; gap: 0.5rem; height: 2.5rem; font: 500 1.05rem var(--sans); }
.plus-text .anzahl { right: -0.5rem; }

/* ---------- Karte ---------- */
.karte { padding: clamp(3rem, 7vw, 6rem) var(--seite) clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--tinte); }
.karte-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 26rem); gap: 1rem 4rem; align-items: end; margin-bottom: 2rem; }
.karte-kopf h2 { grid-column: 1; }
.karte-intro { grid-column: 1; color: var(--grau); font-style: italic; max-width: 36em; }
.suche { grid-column: 2; grid-row: 1 / span 2; }
.suche label { display: block; font: 500 1.05rem var(--sans); margin-bottom: 0.3rem; }
.suche-feld { display: flex; border: 1.5px solid var(--tinte); background: #fff; }
.suche input { flex: 1; min-width: 0; padding: 0.7rem 0.8rem; font: 400 1.1rem var(--sans); border: 0; background: transparent; color: var(--tinte); border-radius: 0; }
.suche input:focus-visible { outline-offset: 5px; }
.suche input::placeholder { color: #8a867e; }
.suche button { background: none; border: 0; border-left: 1px solid var(--fein); padding: 0 1rem; font: 500 1rem var(--sans); cursor: pointer; }
.suche button:hover { background: var(--papier-2); }

.sprungmarken {
  position: sticky; top: 0; z-index: 8; display: flex; gap: 0.2rem 1.5rem; overflow-x: auto; scrollbar-width: thin;
  margin: 0 calc(var(--seite) * -1) 1.6rem; padding: 0.55rem var(--seite); background: var(--papier);
  border-top: 1px solid var(--tinte); border-bottom: 1px solid var(--tinte); font: 500 1.05rem var(--sans); white-space: nowrap;
}
.sprungmarken a { text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.sprungmarken a:hover { border-bottom-color: var(--fein); color: var(--tinte); }
.sprungmarken a.ist-aktiv { border-bottom-color: var(--rot); }

.karte-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: start; }
.karte-liste { container-type: inline-size; min-width: 0; border-bottom: 1px solid var(--tinte); }

.kategorie { border-top: 1px solid var(--tinte); }
.kategorie:first-child { border-top: 0; }
.kategorie summary { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.9rem 0; cursor: pointer; list-style: none; }
.kategorie summary::-webkit-details-marker { display: none; }
.kategorie h3 { font: 500 clamp(1.7rem, 2.6vw, 2.15rem)/1.15 var(--serif); }
.kategorie .zahl { font: 400 1rem var(--sans); color: var(--grau); }
.kategorie summary::after {
  content: ""; margin-left: auto; width: 16px; height: 16px; align-self: center; flex: none;
  background: linear-gradient(var(--tinte), var(--tinte)) center / 100% 1.8px no-repeat, linear-gradient(var(--tinte), var(--tinte)) center / 1.8px 100% no-repeat;
}
.kategorie[open] summary::after { background-size: 100% 1.8px, 0 0; }
.kategorie summary:hover h3 { color: var(--rot-tief); }
.kategorie-inhalt { padding: 0 0 1.6rem; }
.kategorie-hinweis { font-style: italic; color: var(--grau); margin: -0.2rem 0 0.7rem; }
.gruppe { margin-top: 1.4rem; }
.gruppe-titel { font: 600 1.35rem/1.2 var(--serif); font-style: italic; padding-bottom: 0.3rem; border-bottom: 1px solid var(--tinte); margin-bottom: 0.2rem; }

.gerichte { display: block; }
@container (min-width: 700px) {
  .gerichte { columns: 2; column-gap: 3.5rem; }
  .legende dl { columns: 2; column-gap: 3.5rem; }
}
.gericht {
  display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) auto 2.1rem; column-gap: 0.6rem; align-items: baseline;
  padding: 0.55rem 0; border-bottom: 1px dotted rgba(22, 23, 26, 0.45); break-inside: avoid;
}
.gericht .nr { grid-column: 1; font: 500 1.05rem var(--sans); color: var(--grau); }
.gericht .name { grid-column: 2; font: 600 1.2rem/1.25 var(--serif); }
.gericht .preis { grid-column: 3; font: 500 1.1rem var(--sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gericht .plus { grid-column: 4; grid-row: 1 / span 2; justify-self: end; align-self: center; width: 1.9rem; height: 1.9rem; }
.gericht .detail { grid-column: 2 / span 2; grid-row: 2; font: italic 400 1.02rem/1.35 var(--serif); color: var(--grau); }
.kuerzel { font: 400 0.85rem var(--sans); font-style: normal; color: #7a766d; margin-left: 0.3rem; white-space: nowrap; }
.gericht.ist-getraenk { grid-template-columns: minmax(0, 1fr) auto; }
.ist-getraenk .name { grid-column: 1; }
.ist-getraenk .detail { grid-column: 1 / -1; }
.groessen { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 0.5rem; font: 500 1.05rem var(--sans); }
.groessen .menge { color: var(--grau); font-weight: 400; margin-left: 0.5rem; }
.groessen .preis { grid-column: auto; font-size: 1.05rem; }
.nichts { padding: 1.5rem 0; font-style: italic; }
.legende dl { display: block; margin-top: 0.5rem; font-family: var(--sans); font-size: 1rem; }
.legende dl > div { display: flex; gap: 0.6rem; break-inside: avoid; }
.legende dt { min-width: 1.4rem; font-weight: 700; }
.legende p { margin-top: 0.8rem; color: var(--grau); font-size: 1rem; }

/* ---------- Bestellzettel ---------- */
.zettel-blatt { background: #fff; border: 1.5px solid var(--tinte); padding: 1.3rem 1.3rem 1.2rem; font-family: var(--serif); }
.zettel-kopf { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--tinte); padding-bottom: 0.6rem; margin-bottom: 0.8rem; }
.zettel-kopf h2 { font: 500 1.7rem/1.1 var(--serif); letter-spacing: 0; }
.zettel-zu { display: none; background: none; border: 0; text-decoration: underline; font: 500 1rem var(--sans); cursor: pointer; padding: 0.3rem; }
.zettel-leer { color: var(--grau); font-style: italic; }
.zettel-klein { margin-top: 0.9rem; font: 400 0.95rem/1.4 var(--sans); color: var(--grau); }
.zettel-posten li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px dotted rgba(22, 23, 26, 0.45); }
.stufen { display: inline-flex; align-items: center; border: 1px solid var(--tinte); font: 500 1rem var(--sans); }
.stufen button { width: 1.9rem; height: 1.9rem; background: none; border: 0; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.stufen button:hover { background: var(--tinte); color: var(--papier); }
.stufen > span { min-width: 1.6rem; text-align: center; }
.wer { font: 500 1.05rem/1.25 var(--serif); }
.wer b { font: 700 0.95rem var(--sans); color: var(--grau); margin-right: 0.45rem; }
.summe { font: 500 1.05rem var(--sans); font-variant-numeric: tabular-nums; }
.zettel-summe { display: flex; justify-content: space-between; margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--tinte); font: 700 1.25rem var(--sans); }
.mbw { margin-top: 0.7rem; font: 400 1rem/1.35 var(--sans); }
.mbw-balken { height: 4px; background: var(--fein); margin-bottom: 0.4rem; }
.mbw-balken span { display: block; height: 100%; background: var(--rot); }
.mbw.ist-erreicht { color: var(--gruen); font-weight: 500; }
.mbw.ist-erreicht .mbw-balken span { background: var(--gruen); }
.zettel-aktion { display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch; margin-top: 1rem; }
.zettel-aktion .knopf { align-items: center; text-align: center; }
.zettel-link { background: none; border: 0; text-decoration: underline; font: 500 1rem var(--sans); cursor: pointer; align-self: center; }
.vorlesen-titel { font: 500 1.05rem var(--sans); color: var(--grau); }
.vorlesen li { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.35rem 0; border-bottom: 1px dotted rgba(22, 23, 26, 0.45); }
.vorlesen .mal { font: 500 1.1rem var(--sans); min-width: 2.2rem; }
.vorlesen .nr { font: 700 2.1rem/1 var(--sans); min-width: 3.6rem; }
.vorlesen .name { font: 500 1.05rem var(--serif); }

@media (min-width: 1100px) {
  .karte-raster { grid-template-columns: minmax(0, 1fr) 340px; }
  .zettel { position: sticky; top: 4.6rem; }
  .zettel-leiste { display: none !important; }
}
@media (max-width: 1099px) {
  .zettel { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-end; background: rgba(22, 23, 26, 0.45); }
  .zettel.ist-offen { display: flex; }
  .zettel-blatt { width: 100%; max-height: 88svh; overflow-y: auto; border-width: 1.5px 0 0; }
  .zettel-zu { display: inline-block; }
  .zettel-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--tinte); color: var(--papier); }
  .zettel-leiste button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 0.7rem var(--rand); background: none; border: 0; color: inherit; font: 500 1.05rem/1.25 var(--sans); text-align: left; cursor: pointer; }
  .zettel-leiste button > span > span { display: block; font-size: 0.95rem; opacity: 0.85; }
  .zettel-leiste u { font-weight: 700; }
}

/* ---------- Das Lokal ---------- */
.lokal { padding: clamp(3rem, 7vw, 6rem) var(--seite); border-top: 1px solid var(--tinte); }
.lokal-kopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); }
.lokal-kopf h2 { margin-bottom: 1rem; }
.lokal-lead { font: italic 400 clamp(1.35rem, 1.9vw, 1.65rem)/1.35 var(--serif); max-width: 30em; }
.lokal-text { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.lokal-text p { max-width: 32em; }
.lokal-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.foto { margin: 0; }
.foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: #2a1d12; }
.foto figcaption { margin-top: 0.5rem; font: italic 400 1rem/1.4 var(--serif); color: var(--grau); }

/* ---------- Lieferservice ---------- */
.liefern { padding: clamp(3rem, 6vw, 5rem) var(--seite); border-top: 1px solid var(--tinte); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.liefern h2 { grid-row: 1 / span 2; }
.liefern-daten { border-top: 1px solid var(--tinte); }
.liefern-daten > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 0.7rem 0; border-bottom: 1px dotted rgba(22, 23, 26, 0.45); align-items: baseline; }
.liefern-daten dt { font: 400 1.05rem var(--sans); color: var(--grau); }
.liefern-daten dd { font: 500 1.3rem/1.3 var(--serif); }
.liefern-hinweis { color: var(--grau); font-style: italic; max-width: 34em; }

/* ---------- Anfahrt ---------- */
.anfahrt { padding: clamp(3rem, 6vw, 5rem) var(--seite) clamp(4rem, 7vw, 6rem); border-top: 1px solid var(--tinte); }
.anfahrt h2 { margin-bottom: 1.6rem; }
.anfahrt-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 4rem); padding: 1.4rem 0; border-top: 1px solid var(--tinte); border-bottom: 1px solid var(--tinte); }
.anfahrt address { font: 400 clamp(1.4rem, 2vw, 1.8rem)/1.3 var(--serif); font-style: normal; }
.anfahrt address strong { display: block; font-weight: 600; }
.anfahrt-aktionen { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.anfahrt-aktionen .knopf { align-items: center; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--tinte); padding: 1.6rem var(--seite) 2rem; font: 400 1rem/1.5 var(--sans); color: var(--grau); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }

/* ---------- Feste Leiste (Handy) ---------- */
.leiste { display: none; }

/* ---------- Schmal ---------- */
@media (max-width: 1100px) {
  .kopf-nav { gap: 1.2rem; font-size: 1.02rem; }
}
@media (max-width: 859px) {
  body { font-size: 1.15rem; padding-bottom: var(--leiste-h); }
  .kopf-nav { display: none; }
  .marke img { height: 34px; }
  .einstieg { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 1.5rem; padding-bottom: 2rem; }
  .einstieg-foto { justify-self: stretch; width: 100%; padding: 6px; }
  .einstieg-foto img { aspect-ratio: 16 / 10; }
  .einstieg-text { gap: 1rem; }
  .einstieg h1 { font-size: 1.55rem; }
  .einstieg-zeiten { font-size: 1.1rem; line-height: 1.4; }
  .einstieg-logo { width: min(100%, 230px); }
  .einstieg-aktion { flex-direction: column; }
  .einstieg-aktion .knopf { width: 100%; }
  .einstieg-aktion .knopf-rand { align-items: center; padding: 0.7rem; }
  .pizza { display: block; padding: 0 0 2.5rem; }
  .pizza-buehne { position: sticky; top: 0; z-index: 5; height: min(46svh, 420px); min-height: 0; border-width: 0 0 1px; }
  .pizza-wahl { padding: 2rem var(--rand) 0; }
  .pizza.kein-webgl { padding-top: 2.5rem; }
  .karte-kopf { grid-template-columns: minmax(0, 1fr); }
  .suche { grid-column: 1; grid-row: auto; }
  .gericht { grid-template-columns: 2.4rem minmax(0, 1fr) auto 2rem; }
  .lokal-kopf { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lokal-fotos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lokal-fotos .foto:first-child { grid-column: 1 / -1; }
  .lokal-fotos .foto:first-child img { aspect-ratio: 3 / 2; }
  .liefern { grid-template-columns: minmax(0, 1fr); }
  .liefern h2 { grid-row: auto; }
  .liefern-daten > div { grid-template-columns: 7rem minmax(0, 1fr); }
  .anfahrt-raster { grid-template-columns: minmax(0, 1fr); }
  .anfahrt-aktionen .knopf { width: 100%; }
  .leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1.3fr 1fr 1fr; height: var(--leiste-h); background: var(--papier); border-top: 1.5px solid var(--tinte); font: 700 1.15rem var(--sans); }
  .leiste a { display: flex; align-items: center; justify-content: center; text-decoration: none; }
  .leiste a + a { border-left: 1px solid var(--tinte); font-weight: 500; }
  .leiste a:first-child { background: var(--rot); color: #fff; }
  .zettel-leiste { bottom: var(--leiste-h); }
  .fuss { padding-bottom: 1.6rem; }
}
@media (max-width: 420px) {
  .gericht .name { font-size: 1.12rem; }
  .wahl-liste button { grid-template-columns: 2.4rem minmax(0, 1fr) auto; padding-left: 0.2rem; padding-right: 0.2rem; }
}
.suche input::-webkit-search-cancel-button { display: none; }