/* Il Campo · Grammatik „Grundlinie zu Grundlinie“
 *
 * Die Seite ist ein Ascheplatz von oben. Eine Zone ist ein Feld des Platzes,
 * durchquert in Spielrichtung; die Seitenlinien laufen über die ganze Seite,
 * und jede Zone beginnt an einer Linie. Das Netz in der Mitte ist der Peak.
 */

:root {
  --asche: #b4532a;
  --asche-tief: #8a3b1b;
  --ton: #a24a25;
  --nacht: #121a2e;
  --nacht-hell: #1c2745;
  --linie: #f6f3ec;
  --ball: #d9ec3c;
  --kreide: #eef0ec;
  --tinte: #141a2b;
  --tinte-leise: #465069;
  --leise-dunkel: #bcc4d9;

  --sc-canvas: var(--nacht);
  --sc-surface: var(--nacht-hell);
  --sc-ink: var(--linie);
  --sc-ink-soft: var(--leise-dunkel);
  --sc-accent: var(--ball);
  --sc-accent-ink: var(--nacht);
  --sc-font-display: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --sc-font-text: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;

  --rand: clamp(1rem, 4vw, 3rem);          /* Abstand Seitenlinie zum Rand */
  --strich: 3px;                           /* Breite einer Platzlinie */
  --lese: 1.0625rem;
}

html { background: var(--nacht); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--nacht);
  color: var(--linie);
  font-family: var(--sc-font-text);
  font-size: var(--lese);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--ball); outline-offset: 3px; border-radius: 2px; }
/* Auf der hellen Karte trägt Ballgelb nicht (1,1:1); dort ein dunkler Ring. */
.zone--kreide :focus-visible { outline-color: var(--tinte); }
.zone--kreide .korb :focus-visible { outline-color: var(--ball); }

.sichtbar-nur-vorlesen {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.sprung {
  position: fixed; left: 1rem; top: 1rem; z-index: 60; padding: .75rem 1rem;
  background: var(--ball); color: var(--nacht); font-weight: 700; text-decoration: none;
  clip-path: inset(50%); pointer-events: none;   /* versteckt darf er keinen Fingertipp schlucken */
}
.sprung:focus-visible { clip-path: none; pointer-events: auto; }

/* ---------- Die Seitenlinien: laufen über die ganze Seite ---------- */
.platz { position: relative; }
.platz::before, .platz::after {
  content: ""; position: fixed; top: 0; bottom: 0; width: var(--strich);
  background: var(--linie); opacity: .5; z-index: 4; pointer-events: none;
}
.platz::before { left: calc(var(--rand) / 2); }
.platz::after { right: calc(var(--rand) / 2); }

.zone { position: relative; }
.zone--nacht { background: var(--nacht); }
.zone--asche { background: var(--asche); }
.zone--ton { background: var(--ton); }
.zone--kreide { background: var(--kreide); color: var(--tinte); }

.linie {
  position: absolute; left: calc(var(--rand) / 2); right: calc(var(--rand) / 2);
  height: var(--strich); background: var(--linie); pointer-events: none;
}
.linie--grund { bottom: 0; opacity: .9; }
.linie--aufschlag { bottom: 0; opacity: .35; }

/* ---------- Schrift ---------- */
.titel {
  font-family: var(--sc-font-display); font-weight: 800; line-height: .98;
  letter-spacing: -.012em; margin: 0 0 1rem; text-wrap: balance;
}
.titel--gross { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.4rem); }
.lese { max-width: 60ch; margin: 0 0 1rem; text-wrap: pretty; }
.zone--nacht .lese { color: var(--leise-dunkel); }
.zone--kreide .lese { color: var(--tinte-leise); }
.wortmarke {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--sc-font-display); font-weight: 800; font-size: 1.375rem;
  letter-spacing: .01em; margin: 0 0 1.5rem;
}
/* Bildmarke: der Platz von oben mit Netz und Ball, dieselbe Zeichnung wie icon.svg */
.wortmarke__zeichen {
  width: 2.1rem; height: 2.1rem; flex: none;
  border-radius: .45rem; box-shadow: 0 0 0 1.5px rgba(246, 243, 236, .55);
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.4rem; border-radius: 999px;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 0; transition: transform 140ms var(--sc-ease-out, ease-out), background-color 140ms ease-out;
}
.knopf:active { transform: translateY(1px); }
.knopf--ball { background: var(--ball); color: var(--nacht); }
.knopf--ball:hover { background: #e6f36a; }
.knopf--linie { color: var(--linie); box-shadow: inset 0 0 0 2px var(--linie); }
.knopf--linie:hover { background: rgba(246, 243, 236, .12); }

/* ---------- Platzskizze (Navigation) ---------- */
.skizze {
  position: fixed; top: max(.75rem, env(safe-area-inset-top)); right: calc(var(--rand) / 2 + .75rem);
  z-index: 50; display: flex; align-items: flex-start; gap: .6rem;
}
.skizze__bestellen {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem;
  border-radius: 999px; background: var(--ball); color: var(--nacht);
  font-family: var(--sc-font-display); font-weight: 700; font-size: .9375rem; text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55);
}
.im-korb .skizze__bestellen { visibility: hidden; }
.skizze__knopf {
  width: 2.9rem; height: 5.4rem; padding: .2rem; border: 0; border-radius: .45rem;
  background: var(--nacht); cursor: pointer; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .7);
}
.skizze__platz { width: 100%; height: 100%; display: block; }
.skizze__asche { fill: var(--asche); }
.skizze__linien { fill: none; stroke: var(--linie); stroke-width: 1.2; }
.skizze__netz { stroke: var(--nacht); stroke-width: 2; }
.skizze__ball { fill: var(--ball); stroke: var(--nacht); stroke-width: .6; }
.skizze__plan {
  position: absolute; top: calc(100% + .5rem); right: 0; width: min(19rem, calc(100vw - 2rem));
  padding: .75rem; border-radius: .6rem; background: var(--nacht); color: var(--linie);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8);
}
.skizze__zonen { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.skizze__zonen a {
  display: flex; flex-direction: column; justify-content: center; min-height: 2.9rem;
  padding: .3rem .75rem; border-radius: .35rem; text-decoration: none; line-height: 1.2;
  border-left: 1px solid rgba(246, 243, 236, .25);
}
.skizze__zonen a span { font-size: .8125rem; color: var(--leise-dunkel); }
.skizze__zonen a:hover, .skizze__zonen a[aria-current="true"] { background: var(--nacht-hell); }
.skizze__zonen a[aria-current="true"] { border-left-color: var(--ball); }

/* ---------- 1 · Grundlinie: der Aufschlag ---------- */
.aufschlag { background: var(--asche); }
/* Die Textur ist größer als der Schirm, damit ihre Linie unter dem Rand liegt:
   die Grundlinie dieser Zone ist die gezeichnete unten. */
.aufschlag__asche { overflow: hidden; }
.aufschlag__asche img { transform: scale(1.6); transform-origin: 50% 0; }
.aufschlag__asche, .aufschlag__asche img,
.abziehen__flaeche, .abziehen__flaeche img,
.bank__bild, .bank__bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.aufschlag__toenung {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18, 26, 46, .72) 0%, rgba(18, 26, 46, .5) 38%, rgba(18, 26, 46, 0) 62%);
}
.aufschlag__satz {
  position: absolute; left: calc(var(--rand) + .5rem); bottom: clamp(5.5rem, 16vh, 10rem);
  width: min(36rem, 46vw); z-index: 2;
}
.aufschlag__titel {
  font-family: var(--sc-font-display); font-weight: 900; margin: 0 0 1.1rem;
  font-size: clamp(3.4rem, 2rem + 6vw, 7.5rem); line-height: .9; letter-spacing: -.02em;
}
.aufschlag__unter { font-size: 1.1875rem; line-height: 1.45; margin: 0 0 1.75rem; max-width: 30ch; }
.aufschlag__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.aufschlag__bild {
  position: absolute; right: calc(var(--rand) + 1rem); top: 50%; translate: 0 -46%;
  width: min(40vw, 40rem); margin: 0; padding: .45rem; background: var(--linie);
  rotate: 1.6deg; box-shadow: 0 30px 50px -24px rgba(40, 10, 0, .8); z-index: 1;
}
.aufschlag__bild img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ki-marke {
  margin: 0; font-size: .75rem; line-height: 1.3; letter-spacing: .02em; color: var(--tinte-leise);
}
.aufschlag__bild .ki-marke, .teller__bild .ki-marke { padding: .35rem .2rem .1rem; color: var(--tinte); font-size: .8125rem; }

/* Der Ball und sein Abdruck. Position schreibt seite.js aus --sc-p. */
.ball {
  position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none;
  width: clamp(1.6rem, 2.2vw, 2.3rem); aspect-ratio: 1;
  translate: var(--ball-x, 16vw) var(--ball-y, 80vh);
}
.ball__kugel {
  position: absolute; inset: 0; border-radius: 50%; scale: var(--ball-s, 1);
  translate: 0 var(--ball-h, 0px);
  background:
    radial-gradient(circle at 35% 30%, #f2fa9a 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, var(--ball) 0 62%, #b3c42a 100%);
  box-shadow: inset -3px -4px 6px rgba(80, 90, 0, .35);
}
.ball__kugel::before, .ball__kugel::after {
  content: ""; position: absolute; top: 10%; bottom: 10%; width: 50%;
  border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%;
}
.ball__kugel::before { left: -22%; clip-path: inset(0 0 0 50%); }
.ball__kugel::after { right: -22%; clip-path: inset(0 50% 0 0); }
.ball__schatten {
  position: absolute; left: 10%; right: 10%; bottom: -14%; height: 26%; border-radius: 50%;
  background: rgba(40, 12, 0, .45); filter: blur(3px); scale: var(--schatten-s, 1);
}
.abdruck {
  position: absolute; z-index: 2; width: 3.2rem; height: 1.9rem; border-radius: 50%;
  left: var(--abdruck-x, 70vw); top: var(--abdruck-y, 22vh); translate: -50% -50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(70, 20, 5, .55) 0 45%, rgba(70, 20, 5, .15) 70%, transparent 72%);
  box-shadow: inset 0 0 0 2px rgba(250, 210, 180, .25);
  opacity: var(--abdruck-o, 0); scale: var(--abdruck-s, .6); rotate: -14deg;
}

/* ---------- 2 · Hinterfeld: der Ort ---------- */
#hinterfeld { padding-block: clamp(4.5rem, 10vw, 8rem); }
.ort {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem);
  align-items: center; padding-inline: calc(var(--rand) + 1rem);
}
.ort__bilder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .9rem; }
.standbild {
  margin: 0; background: var(--linie); padding: .3rem; box-shadow: 0 20px 34px -22px rgba(0, 0, 0, .9);
  display: flex; flex-direction: column;
}
.standbild img { flex: 1; min-height: 0; width: 100%; height: 100%; object-fit: cover; }
.standbild .ki-marke { flex: none; padding: .3rem .15rem .05rem; color: var(--tinte); font-size: .8125rem; }
/* Der Hinweis steht waagerecht, auch wenn der Abzug schief liegt: gedrehte 13-px-Schrift
   verliert an den Kanten Kontrast (KI-Gate maß 4,57:1 an der schwächsten Stelle). */
.standbild--weg .ki-marke { rotate: 1.2deg; }
.standbild--ofen .ki-marke { rotate: -.8deg; }
.standbild--weg { grid-column: 1 / 5; grid-row: 1 / 3; rotate: -1.2deg; }
.standbild--raum { grid-column: 5 / 7; grid-row: 1; margin-top: 2rem; }
.standbild--zutaten { grid-column: 5 / 7; grid-row: 2; }
.standbild--ofen { grid-column: 2 / 5; grid-row: 3; rotate: .8deg; }
.standbild__quelle { grid-column: 5 / 7; grid-row: 3; align-self: end; margin: 0; font-size: .875rem; color: var(--leise-dunkel); }

/* ---------- 3 · Aufschlagfeld: der Teller ---------- */
.teller {
  display: grid; grid-template-columns: auto minmax(0, 30rem); gap: clamp(2rem, 5vw, 5rem);
  align-items: center; justify-content: center; padding-inline: calc(var(--rand) + 1rem);
  background: var(--ton);
}
.teller__bild { margin: 0; background: var(--linie); padding: .45rem; box-shadow: 0 30px 48px -26px rgba(40, 10, 0, .85); }
/* Der Abzug entwickelt sich: Unter dem Foto liegt ein 24×30-Auszug desselben Bildes
   (rund 300 Byte, im CSS eingebettet). Beim Ankommen steht im Rahmen also schon das
   unscharfe Motiv, nie ein leeres weißes Feld, und das Scrollrad zieht das scharfe
   Foto darüber. Kommt das Foto auf langsamem Netz später, bleibt die Vorschau stehen.
   Das Foto selbst lädt sofort (kein loading="lazy" auf gepinnten Bühnen). */
.teller__vorschau { background: #e4e1d8 url("data:image/webp;base64,UklGRvgAAABXRUJQVlA4IOwAAAAwBgCdASoYAB4APp1Amkglo6KhMAgAsBOJYgCdMsmYAd+6xmWHMJ3hH7HmWKufXgxIG8uw0YTTGhe0APyOYsLR3hfoKhLKU7ZmsahFemmGlI0e931G5qgyqxWwnXYF+Md+CgX0vH2x5FgDOyNnN0+fMEZIvOCN9Xa9fphKG8+s9DpSUY1oROvY14nzHgNIz4JlVRGc4jiIjSaxOl6pnq572CblHwQvXixY/vh3e5N/jgsNWDBK1nMHAFuEUf9wEzl3ITjCKTlYDoDPl3RsMMN/AhE2nhnx5wFKBB18pQmlvVzmhj1Gdi0ISgwAAA==") center / cover no-repeat; }
.teller__abzug { background: transparent; }
.teller__bild img { height: min(74svh, 46rem); width: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.teller__notiz { margin: 1.5rem 0 0; font-size: .9375rem; }

/* ---------- 4 · Netz: das Abziehen ---------- */
.abziehen { --zug: 0; --kehr: 0; background: var(--asche); }
/* Vorschau der bespielten Asche (24×14 bzw. 14×24 Pixel), bis das Foto da ist: auch
   auf langsamem Netz steht am Netz und am Anfang eine Fläche mit Spuren, kein nackter Grund. */
.aufschlag__asche, .abziehen__flaeche--gespielt { background: var(--asche) url("data:image/webp;base64,UklGRmIAAABXRUJQVlA4IFYAAAAQBACdASoYAA4APrVInkmnJCKhMAgA4BaJQBOmUIwAAYR+Xp455mLZdAD+uQztLzogsdwVm1VoU9db5y7+jwPuPQSMRCgvyiDcvuOsXApMbvwiC3sAAA==") center / cover no-repeat; }
@media (max-width: 760px) {
  .aufschlag__asche, .abziehen__flaeche--gespielt { background-image: url("data:image/webp;base64,UklGRmQAAABXRUJQVlA4IFgAAACwAwCdASoOABgAPrVInkmnJCKhMAgA4BaJQBOgBDvk2tgI5LKqQAD+nj/a3xi3H4hrfEXT3gEM/an2Ed+Ay3DT65VwB8IatuvivCcFrmkZJ93x4qKE+gAA"); }
}
.abziehen__flaeche--gezogen { clip-path: inset(0 calc((1 - var(--zug)) * 100%) 0 0); }
.abziehen__kehrlinie {
  position: absolute; left: 0; right: 0; top: 64.2%; height: 4.4%;
  background: linear-gradient(90deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .55) 30%, rgba(255, 255, 255, .55));
  transform-origin: left center; transform: scaleX(var(--kehr)); opacity: calc(1 - var(--kehr) * .6);
  mix-blend-mode: screen; pointer-events: none;
}
.abziehen__netz {
  position: absolute; top: 0; bottom: 0; left: calc(var(--zug) * 100%); width: clamp(4rem, 9vw, 9rem);
  translate: -100% 0; opacity: calc(1 - max(0, var(--zug) - .96) * 25);
  pointer-events: none;
}
.abziehen__matte {
  position: absolute; inset: 0 12% 0 0;
  background:
    repeating-linear-gradient(0deg, rgba(40, 18, 8, .55) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgba(40, 18, 8, .45) 0 2px, transparent 2px 11px),
    linear-gradient(90deg, rgba(120, 50, 20, .0), rgba(90, 36, 14, .35));
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.abziehen__stange {
  position: absolute; top: 0; bottom: 0; right: 8%; width: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #2a1c14, #5a4636 45%, #2a1c14);
  box-shadow: 6px 0 14px rgba(40, 12, 0, .45);
}
.ki-marke--flaeche, .ki-marke--bank {
  position: absolute; right: calc(var(--rand) + .75rem); bottom: .75rem; z-index: 3;
  padding: .25rem .5rem; background: rgba(18, 26, 46, .82); color: var(--linie); border-radius: .25rem;
}
.ki-marke--doppelt p { margin: 0; }
.tafel {
  position: absolute; left: calc(var(--rand) + .75rem); top: clamp(5.5rem, 14vh, 9rem); z-index: 3;
  display: grid; width: min(33rem, calc(100% - var(--rand) * 2 - 1.5rem));
  padding: clamp(1.25rem, 2.4vw, 2rem); background: var(--nacht); border-radius: .35rem;
  box-shadow: 0 30px 60px -30px rgba(20, 5, 0, .9);
}
.tafel > * { grid-area: 1 / 1; }
.tafel__zeile {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem); line-height: 1.15; letter-spacing: -.02em; text-wrap: balance;
}
.tafel__uhr {
  margin: 0 0 .25rem; font-family: var(--sc-font-display); font-weight: 900; color: var(--ball);
  font-size: clamp(3.4rem, 2.4rem + 4vw, 6rem); line-height: .9; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.tafel__titel { font-family: var(--sc-font-display); font-weight: 700; margin: 0 0 1.25rem; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -.02em; }

/* ---------- 5 · Gegenfeld: die Mannschaft ---------- */
.aufstellung { display: flex; align-items: center; background: var(--nacht); }
.schiene { display: flex; align-items: stretch; gap: clamp(1rem, 2vw, 1.75rem); padding-inline: calc(var(--rand) + 1rem); }
.schiene > * { flex: none; }
.schiene__kopf { width: min(30rem, 78vw); align-self: center; padding-right: 2rem; }
.schiene__fuss { width: min(20rem, 70vw); align-self: center; padding-left: 1rem; }
.spieler {
  display: flex; flex-direction: column; width: clamp(15rem, 19vw, 18rem); min-height: min(22rem, 58svh);
  padding: 1.25rem 1.25rem 1.1rem; background: var(--linie); color: var(--tinte); border-radius: .4rem;
  position: relative; overflow: hidden;
}
.spieler::after {
  /* Linien eines Aufschlagfelds auf dem Trikot der Karte */
  content: ""; position: absolute; right: -1px; top: 0; width: 44%; height: 38%;
  border-left: 2px solid rgba(180, 83, 42, .35); border-bottom: 2px solid rgba(180, 83, 42, .35);
  pointer-events: none;
}
.spieler__nr {
  margin: 0; font-family: var(--sc-font-display); font-weight: 900; color: var(--asche);
  font-size: clamp(5.5rem, 4rem + 4vw, 8.5rem); line-height: .8; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.spieler__name { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.6rem; line-height: 1.05; letter-spacing: -.02em; margin: auto 0 .5rem; padding-top: 1.5rem; }
.spieler__zutaten { margin: 0 0 1.1rem; color: var(--tinte-leise); line-height: 1.4; }
.spieler__fuss { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; }
.spieler__preis { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.spieler__rein {
  min-height: 2.75rem; padding: 0 1rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--nacht); color: var(--ball); font-family: var(--sc-font-display); font-weight: 700; font-size: .9375rem;
}
.spieler__rein:hover { background: var(--nacht-hell); }

/* ---------- 6 · Bestellen: Karte und Ballkorb ---------- */
.bestellen { padding-block: clamp(4rem, 8vw, 7rem) clamp(4rem, 8vw, 6rem); scroll-margin-top: 0; }
.bestellen__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 23rem); gap: clamp(2rem, 4vw, 4rem);
  align-items: start; padding-inline: calc(var(--rand) + 1rem); max-width: 84rem;
}
.reiter { display: flex; gap: .4rem; flex-wrap: wrap; margin: 1.75rem 0 1.25rem; }
.reiter__knopf {
  min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; border: 0; cursor: pointer;
  background: transparent; color: var(--tinte); box-shadow: inset 0 0 0 1.5px rgba(20, 26, 43, .35);
  font-family: var(--sc-font-display); font-weight: 700; font-size: .9375rem;
}
.reiter__knopf[aria-selected="true"] { background: var(--tinte); color: var(--ball); box-shadow: none; }
.js .gruppe:not(.gruppe--offen) { display: none; }
.gruppe__titel { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; margin: 0 0 .25rem; }
.gruppe__hinweis { margin: 0 0 1rem; color: var(--tinte-leise); font-style: italic; }
.gruppe__liste { list-style: none; margin: 0; padding: 0; }
@media (min-width: 1180px) {
  .gruppe__liste { columns: 2; column-gap: 2.75rem; }
}
.gericht {
  break-inside: avoid;
  display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem; column-gap: 1rem; align-items: center;
  padding: .85rem 0; border-bottom: 1px solid rgba(20, 26, 43, .14);
}
.gericht__kopf { grid-column: 1; display: flex; align-items: baseline; gap: .5rem; margin: 0; }
.gericht__name { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.gericht__nr { display: inline-block; min-width: 1.9em; color: var(--asche-tief); font-variant-numeric: tabular-nums; }
.gericht__punkte { flex: 1; min-width: 1rem; border-bottom: 2px dotted rgba(20, 26, 43, .3); translate: 0 -.3em; }
.gericht__preis { font-family: var(--sc-font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gericht__zutaten { grid-column: 1; margin: .15rem 0 0; color: var(--tinte-leise); font-size: .96875rem; line-height: 1.4; }
.gericht__zutaten:empty { display: none; }
.gericht__rein {
  grid-column: 2; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--tinte); color: var(--ball); font-family: var(--sc-font-display); font-size: 1.5rem; font-weight: 700; line-height: 1;
}
.gericht__rein:hover { background: #2a3456; }
.kz { font-size: .8125rem; text-decoration: none; color: var(--tinte-leise); white-space: nowrap; cursor: help; }
.kz::before { content: "("; } .kz::after { content: ")"; }
.scharf { color: #9b2a12; font-weight: 700; }
.legende { margin-top: 2rem; color: var(--tinte-leise); font-size: .9375rem; }
.legende summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: 700; color: var(--tinte); }
.legende p { margin: .5rem 0; }

/* ---------- 7 · Die Bank ---------- */
.bank { background: var(--nacht); }
/* dieselbe Vorschau für die Bank (24×13 bzw. 16×19 Pixel) */
.bank__bild { background: var(--nacht) url("data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAABwBACdASoYAA0APrVIn0mnJCKhMAgA4BaJZACdMoGv/gN6s682HGcGFXaQeAD+8SN4yTqGzkpaWou9o6rv/59w0VrOA2V9c7reGaWX64Opi7ujE7VmqkQnxR4iSmKP8whiojPqkjMNpy7/ruL18obtHz9S5hHO/WEP6EYu0X4aE350HqkCO14HLF/fa/5RIrytGWMOi6HXbj0BUYVAETSmGZ/nsD9QAAA=") 70% 50% / cover no-repeat; }
@media (max-width: 760px) {
  .bank__bild { background-image: url("data:image/webp;base64,UklGRpYAAABXRUJQVlA4IIoAAABQBACdASoQABMAPrVInkmnJCKhMAgA4BaJagCdBagBfWmpiQwGFpy7lJdgAPVlRVZytUu2Ig3vYTBGcqQ6jQvIinYaE8DotxnwUz9XCiK5XAl+mTxu9/P7THlUf6DhlvUvD+gEf7OAZQqnYWWDk/lOSgI0NbR4KJg8heWTgMMuu3DZ8sFB/vnieAA="); }
}
.bank__bild img { object-position: 70% 50%; }
.bank__tafel {
  position: absolute; left: calc(var(--rand) + .75rem); top: 50%; translate: 0 -54%; z-index: 2;
  width: min(30rem, calc(100% - var(--rand) * 2 - 1.5rem));
  padding: clamp(1.25rem, 2.4vw, 2rem); background: rgba(18, 26, 46, .93); border-radius: .4rem;
}
.belegung { border-collapse: collapse; width: 100%; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.belegung th, .belegung td { text-align: left; padding: .28rem 0; border-bottom: 1px solid rgba(246, 243, 236, .14); font-weight: 400; }
.belegung td { text-align: right; font-family: var(--sc-font-display); }
.belegung tr.heute th, .belegung tr.heute td { color: var(--ball); font-weight: 700; }
.belegung--frei td { color: var(--leise-dunkel); }
.bank__heute { margin: 0 0 1rem; font-weight: 700; }
.bank__adresse { font-style: normal; margin: 0 0 1.1rem; line-height: 1.5; }
.bank__adresse a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.bank__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.bank__feier { margin: 0; font-size: .9375rem; color: var(--leise-dunkel); }
.bank__feier a { color: var(--linie); font-weight: 700; }
.fuss {
  position: absolute; left: calc(var(--rand) + .75rem); right: calc(var(--rand) + .75rem); bottom: .6rem; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1.5rem; font-size: .8125rem; color: var(--leise-dunkel);
}
.fuss p { margin: 0; padding: .2rem .5rem; background: rgba(18, 26, 46, .86); border-radius: .25rem; }
.fuss a { color: var(--linie); display: inline-flex; align-items: center; min-height: 2.5rem; min-width: 2.5rem; }

/* ---------- Telefon ---------- */
@media (max-width: 860px) {
  .ort { grid-template-columns: 1fr; }
  .bestellen__raster { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --rand: 1rem; }
  .aufschlag__toenung { background: linear-gradient(0deg, rgba(18, 26, 46, .86) 0%, rgba(18, 26, 46, .62) 46%, rgba(18, 26, 46, .1) 70%); }
  .aufschlag__satz { left: calc(var(--rand) + .5rem); right: calc(var(--rand) + .5rem); width: auto; bottom: 2.25rem; }
  .aufschlag__titel { font-size: clamp(3rem, 15vw, 4.2rem); }
  .aufschlag__unter { font-size: 1.0625rem; margin-bottom: 1.25rem; }
  .aufschlag__bild { width: 58vw; right: calc(var(--rand) + .25rem); top: 5.25rem; translate: 0 0; }
  .aufschlag__bild img { aspect-ratio: 4 / 5; }
  .teller { grid-template-columns: 1fr; gap: 1rem; align-content: center; justify-items: start; }
  .teller__bild img { height: 42svh; }
  .teller__text .lese { font-size: 1rem; }
  .teller .titel--gross { font-size: 2.2rem; }
  .abziehen__kehrlinie { top: 64.2%; }
  .tafel { top: 7rem; }
  .spieler { width: 74vw; min-height: 52svh; }
  /* Platz für den Fuß darunter: er lag in der Vorlage über den Knöpfen Anrufen und WhatsApp. */
  .bank__tafel { top: auto; bottom: 6.6rem; translate: 0 0; padding: 1rem 1.1rem; }
  .fuss p + p a { min-height: 0; }   /* Link im Fließsatz, kein eigenes Tippziel */
  .bank__tafel .titel--gross { font-size: 2rem; margin-bottom: .6rem; }
  .belegung th, .belegung td { padding: .12rem 0; font-size: .9375rem; }
  .bank__adresse { margin-bottom: .75rem; font-size: .9375rem; }
  .bank__feier { display: none; }
  .fuss { font-size: .75rem; }
  #grundlinie .ki-marke--flaeche { top: max(.75rem, env(safe-area-inset-top)); bottom: auto; left: calc(var(--rand) + .5rem); right: auto; }
  /* In der Karte liegt die Skizze sonst über Preisen und Plus-Knöpfen. */
  .im-korb .skizze { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .klappe--neu { animation: none; }
  .knopf { transition: none; }
}