/* Da Aurora · 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%);
}
.sprung:focus-visible { clip-path: none; }

/* ---------- 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 {
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1.125rem;
  letter-spacing: .02em; margin: 0 0 1.5rem;
}

/* ---------- 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); }
.standbild img { width: 100%; height: 100%; object-fit: cover; }
.standbild--schild { 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); }
.teller__abzug { background: #e4e1d8; }
.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); }
.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); }
.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; }
  .bank__tafel { top: auto; bottom: 4.6rem; translate: 0 0; padding: 1rem 1.1rem; }
  .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; }
}