/* Da Carlo Diverso, Entwurf Rüger Solutions. Farben: Lavagna (Tafel), Carta (Tischdecke), Pomodoro (Logo-Rot) für Knöpfe. */
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/barlow-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/barlow-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/barlow-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow"; src: url(/fonts/barlow-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --lavagna: #1f2321; --lavagna-2: #2a2f2c; --lavagna-3: #353b37;
  --carta: #f7f3ea; --carta-2: #efe8da; --carta-3: #e4dac6;
  --tinte: #1f2321; --grau: #5b574f; --linie: #d9cfbb;
  --pomodoro: #c8201e; --pomodoro-tief: #a3191a;
  --holz: #b5732f; --holz-dunkel: #7d4c1f;
  --kreide: #efece4; --kreide-2: #c9c6bd;
  --ecke: 4px; --rand: clamp(1.1rem, 4.5vw, 2.5rem); --max: 76rem;
  --kopf-h: 4.25rem;
  --titel: "Barlow Condensed", "Arial Narrow", sans-serif;
  --text: "Barlow", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--kopf-h) + 1rem); }
body { margin: 0; overflow-x: clip; background: var(--carta); color: var(--tinte); font: 400 1.125rem/1.55 var(--text); }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-underline-offset: .18em; }
h1, h2, h3, h4 { font-family: var(--titel); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
h2 { font-size: clamp(2.3rem, 7.2vw, 4.2rem); }
h3 { font-size: clamp(1.45rem, 3.6vw, 1.9rem); }
p { margin: 0; }
p + p { margin-top: .8rem; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pomodoro); outline-offset: 3px; }
.dunkel :focus-visible, .hero :focus-visible, .fuss :focus-visible { outline-color: var(--kreide); }
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nur-vorleser:focus { position: fixed !important; z-index: 100; left: 1rem; top: 1rem; width: auto; height: auto; clip: auto; background: var(--carta); padding: .6rem 1rem; }
.huelle { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--rand); }
.entwurf { background: var(--lavagna); color: var(--kreide-2); text-align: center; font-size: .82rem; padding: .3rem 1rem; }

/* Knöpfe: rechteckig wie die Speisekarte */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.25rem; border: 2px solid transparent; border-radius: var(--ecke); font: 600 1.05rem/1.1 var(--text); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, transform .15s; }
.knopf:active { transform: scale(.97); }
.knopf.haupt { background: var(--pomodoro); color: #fff; }
.knopf.haupt:hover { background: var(--pomodoro-tief); }
.knopf.neben { background: transparent; border-color: currentColor; }
.knopf.neben:hover { background: rgba(31, 35, 33, .07); }
.dunkel .knopf.neben:hover, .hero .knopf.neben:hover { background: rgba(239, 236, 228, .12); }
.knopf.hell { background: var(--carta); color: var(--tinte); }
.aktionen { display: flex; flex-wrap: wrap; gap: .7rem; }

/* Kopfleiste */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--carta); border-bottom: 1px solid var(--linie); }
.kopf .huelle { display: flex; align-items: center; gap: .6rem; height: var(--kopf-h); }
.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; min-width: 0; }
.marke img { width: 6.4rem; height: auto; }
.status { display: none; flex-direction: column; font-size: .85rem; line-height: 1.25; color: var(--grau); white-space: nowrap; }
.status b { color: var(--tinte); font-weight: 600; }
.kopf nav { display: none; }
.kopf nav ul { display: flex; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.kopf nav a { text-decoration: none; font-weight: 600; font-size: 1rem; padding: .4rem 0; border-bottom: 2px solid transparent; }
.kopf nav a:hover { border-bottom-color: var(--pomodoro); }
.kopf .tel { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.9rem; min-height: 2.9rem; text-decoration: none; font-weight: 600; border: 2px solid var(--tinte); border-radius: var(--ecke); }
.kopf .tel svg { width: 1.25rem; height: 1.25rem; }
.kopf .tel span { display: none; }
.kopf .knopf.haupt { min-height: 2.9rem; padding: .55rem .8rem; font-size: .98rem; white-space: nowrap; }
.kopf .knopf .kurz { display: none; }
@media (max-width: 29.9rem) { .kopf .knopf .lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .kopf .knopf .kurz { display: inline; } }
.menue-knopf { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; padding: 0; }
.menue-knopf span, .menue-knopf span::before, .menue-knopf span::after { display: block; width: 1.5rem; height: 2px; background: var(--tinte); position: relative; content: ""; }
.menue-knopf span::before { position: absolute; top: -7px; }
.menue-knopf span::after { position: absolute; top: 7px; }
#menue { position: fixed; inset: 0; z-index: 60; background: var(--lavagna); color: var(--kreide); padding: 1rem var(--rand) 2rem; overflow-y: auto; display: none; }
#menue.offen { display: block; }
#menue .zu { display: flex; justify-content: flex-end; }
#menue .zu button { min-height: 2.9rem; padding: 0 1rem; background: transparent; border: 2px solid var(--kreide); border-radius: var(--ecke); color: var(--kreide); font-weight: 600; cursor: pointer; }
#menue ul { list-style: none; margin: 1rem 0 1.6rem; padding: 0; }
#menue li a { display: block; padding: .55rem 0; font: 700 1.9rem/1.1 var(--titel); text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--lavagna-3); }
#menue p { color: var(--kreide-2); }
#menue p + p { margin-top: 1rem; }
@media (min-width: 26rem) { .marke img { width: 7.2rem; } }
@media (min-width: 40rem) { .status { display: flex; } .kopf .knopf.haupt { padding-inline: 1.1rem; } }
@media (min-width: 64rem) {
  :root { --kopf-h: 5rem; }
  .marke img { width: 9.5rem; }
  .kopf nav { display: block; margin-right: .8rem; }
  .menue-knopf { display: none; }
  .kopf .tel { border: 0; min-width: 0; }
  .kopf .tel span { display: inline; }
}
@media (min-width: 64rem) and (max-width: 74rem) { .kopf nav ul { gap: 1rem; } .kopf nav a { font-size: .95rem; } .status span { display: none; } }

/* Abschnitte */
.abschnitt { padding-block: clamp(3.6rem, 9vw, 6.5rem); }
.abschnitt.dunkel { background: var(--lavagna); color: var(--kreide); }
.abschnitt.papier { background: var(--carta-2); }
.kopfzeile { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.kopfzeile > p, .kopfzeile > div > p { max-width: 34rem; color: var(--grau); }
.dunkel .kopfzeile > p, .dunkel .kopfzeile > div > p { color: var(--kreide-2); }
.einflug { opacity: 0; transform: translateY(1.6rem); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.einflug.da { opacity: 1; transform: none; }

/* Hero */
.hero { position: relative; background: var(--lavagna); color: var(--kreide); overflow: hidden; --p: 0; }
.hero-film { position: absolute; inset: 0; transform: scale(calc(1 - var(--p) * .1)); border-radius: calc(var(--p) * 18px); overflow: hidden; transform-origin: 50% 30%; }
.hero-film img, .hero-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 35, 33, .25) 0%, rgba(31, 35, 33, 0) 28%, rgba(31, 35, 33, .55) 55%, rgba(31, 35, 33, .94) 82%); }
.hero-text { position: relative; z-index: 2; min-height: calc(100svh - var(--kopf-h) - 1.6rem); display: flex; flex-direction: column; justify-content: flex-end; padding: 6rem var(--rand) 2.2rem; transform: translateY(calc(var(--p) * -3rem)); }
.ciao { font: 700 clamp(4.6rem, 25vw, 11rem)/.82 var(--titel); text-transform: uppercase; letter-spacing: -.01em; margin: 0 0 .9rem -.04em; }
.ciao span { display: block; }
.hero h1 { font-size: clamp(1.35rem, 5.4vw, 2rem); line-height: 1.1; max-width: 22ch; }
.hero .unter { margin-top: .7rem; max-width: 33rem; color: #e6e2d8; }
.hero .aktionen { margin-top: 1.3rem; }
.hero .knopf.neben { color: var(--kreide); }
.google-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 1.1rem; font-size: .98rem; text-decoration: none; color: var(--kreide); }
.google-note b { font-size: 1.1rem; }
.g-logo { width: 1.15rem; height: 1.15rem; flex: none; }
.sterne { color: #f2b01e; letter-spacing: .06em; }
.sterne-44 { position: relative; display: inline-block; color: rgba(242, 176, 30, .32); letter-spacing: .06em; }
.sterne-44::before { content: "★★★★★"; position: absolute; left: 0; top: 0; width: 88%; overflow: hidden; color: #f2b01e; white-space: nowrap; }
.hero-carlo { display: none; }
@media (min-width: 64rem) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; min-height: calc(100svh - var(--kopf-h) - 1.6rem); }
  .hero::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; }
  .hero-text { grid-column: 1; grid-row: 1; min-height: 0; padding: 3rem 2rem 3rem max(var(--rand), calc((100vw - var(--max)) / 2 + var(--rand))); transform: translateY(calc(var(--p) * -2rem)); }
  .ciao { font-size: clamp(7rem, 11vw, 11.5rem); }
  .hero-film { grid-column: 2; grid-row: 1; position: relative; inset: auto; justify-self: center; width: min(26rem, 50vh); aspect-ratio: 9 / 16; margin-block: 2.5rem; border-radius: var(--ecke); transform: translateY(calc(var(--p) * 2.5rem)); }
  .hero-film::after { display: none; }
  .hero-carlo { display: block; grid-column: 2; grid-row: 1; align-self: end; justify-self: start; position: relative; z-index: 3; width: min(15rem, 30vh); margin: 0 0 4.5rem max(0rem, calc(50% - min(26rem, 50vh) / 2 - 7rem)); background: var(--carta); padding: .5rem .5rem .6rem; border-radius: 2px; transform: rotate(-4deg) translateY(calc(var(--p) * -5rem)); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); color: var(--tinte); }
  .hero-carlo figcaption { font: 600 1.15rem/1.1 var(--titel); text-transform: uppercase; padding: .5rem .2rem 0; }
}

/* Google-Bewertungen */
.bewertungen { background: var(--carta-2); }
.google-kopf { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.google-kopf .g-logo { width: 2rem; height: 2rem; }
.google-kopf .note { font: 700 2.4rem/1 var(--titel); }
.google-kopf span { line-height: 1.25; font-size: .95rem; }
.google-kopf a { font-weight: 600; font-size: .98rem; }
.bew-spur { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .2rem var(--rand) 1rem; margin-inline: calc(-1 * var(--rand)); scrollbar-width: none; }
.bew-spur::-webkit-scrollbar { display: none; }
.bew { flex: none; width: min(82vw, 22rem); scroll-snap-align: start; background: #fffcf6; border: 1px solid var(--linie); border-radius: var(--ecke); padding: 1.2rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: .75rem; }
.bew header { display: flex; align-items: center; gap: .7rem; }
.bew .initial { width: 2.4rem; height: 2.4rem; flex: none; display: grid; place-items: center; background: var(--lavagna); color: var(--kreide); font-weight: 700; border-radius: 50%; }
.bew .name { font-weight: 600; line-height: 1.2; }
.bew .sterne { font-size: .95rem; }
.bew blockquote { margin: 0; font-size: 1.04rem; line-height: 1.5; }
.bew footer { margin-top: auto; display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--grau); }
.bew-steuer { display: flex; gap: .5rem; margin-top: .5rem; }
.bew-steuer button { min-width: 2.75rem; min-height: 2.75rem; padding: 0 .9rem; background: transparent; border: 2px solid var(--tinte); border-radius: var(--ecke); font-weight: 700; cursor: pointer; }
.bew-band .bew-spur { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; cursor: grab; }
.bew-band .bew-spur.zieht { cursor: grabbing; }
.bew-zug { display: flex; gap: 1rem; width: max-content; will-change: transform; }
.bew-band .bew { user-select: none; -webkit-user-select: none; }

/* Verteiler */
.verteiler { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.verteiler a { position: relative; display: block; overflow: hidden; border-radius: var(--ecke); text-decoration: none; color: var(--kreide); background: var(--lavagna); aspect-ratio: 1 / 1.08; }
.verteiler a:nth-child(1), .verteiler a:nth-child(4) { grid-column: span 2; aspect-ratio: 16 / 10; }
.verteiler img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.verteiler a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 35, 33, 0) 40%, rgba(31, 35, 33, .85)); }
.verteiler a:hover img { transform: scale(1.04); }
.verteiler .vt { position: absolute; z-index: 2; left: 1rem; right: 1rem; bottom: .9rem; }
.verteiler .vt b { display: block; font: 700 clamp(1.6rem, 6vw, 2.4rem)/1 var(--titel); text-transform: uppercase; }
.verteiler .vt span { display: block; margin-top: .25rem; font-size: .95rem; color: #e8e4da; }
@media (min-width: 52rem) {
  .verteiler { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 15rem; gap: .9rem; }
  .verteiler a, .verteiler a:nth-child(1), .verteiler a:nth-child(4) { aspect-ratio: auto; }
  .verteiler a:nth-child(1) { grid-column: span 5; grid-row: span 2; }
  .verteiler a:nth-child(2) { grid-column: span 4; }
  .verteiler a:nth-child(3) { grid-column: span 3; }
  .verteiler a:nth-child(4) { grid-column: span 7; }
}

/* Signature: Carlos Tafel */
.tafel-abschnitt { background: var(--carta); }
.tafel-raster { display: grid; gap: 2rem; }
.tafel { position: relative; padding: clamp(.75rem, 2.4vw, 1.1rem); border-radius: 6px; background: repeating-linear-gradient(92deg, #b5732f 0 7px, #a8682a 7px 9px, #bd7b36 9px 15px, #9e6127 15px 16px); box-shadow: 0 22px 40px -22px rgba(31, 35, 33, .6); }
.tafel-flaeche { position: relative; overflow: hidden; background-color: #262b28; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); color: var(--kreide); padding: clamp(1.2rem, 4vw, 2.4rem); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 6px 14px rgba(0, 0, 0, .45); }
.tafel-reiter { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin-bottom: 1.2rem; }
.tafel-reiter button { background: none; border: 0; padding: .35rem 0; min-height: 2.75rem; color: var(--kreide-2); font: 700 clamp(1.25rem, 4.6vw, 1.6rem)/1 var(--titel); text-transform: uppercase; cursor: pointer; border-bottom: 3px solid transparent; }
.tafel-reiter button[aria-selected="true"] { color: var(--kreide); border-bottom-color: var(--kreide); }
.tafel-kopf { font: 700 clamp(2rem, 8vw, 3.4rem)/.95 var(--titel); text-transform: uppercase; margin-bottom: .3rem; }
.tafel-stand { color: var(--kreide-2); font-size: .95rem; margin-bottom: 1.3rem; }
.tafel-gruppen { display: grid; gap: 1.5rem 2.6rem; }
.tafel-gruppe h3 { font-size: 1.35rem; color: #f3d9a4; margin-bottom: .4rem; letter-spacing: .03em; }
.tafel ul { list-style: none; margin: 0; padding: 0; }
.tafel li { display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem; padding: .42rem 0; border-bottom: 1px dashed rgba(239, 236, 228, .18); }
.tafel li:last-child { border-bottom: 0; }
.tafel .n { font: 600 1.28rem/1.15 var(--titel); letter-spacing: .01em; }
.tafel .t { grid-column: 1; font-size: .95rem; line-height: 1.35; color: var(--kreide-2); }
.tafel .p { grid-column: 2; grid-row: 1; font: 600 1.28rem/1.15 var(--titel); white-space: nowrap; }
.tage-wahl { display: grid; grid-template-columns: repeat(5, minmax(0, 4.2rem)); gap: .4rem; margin-bottom: 1.1rem; }
.tage-wahl button { min-width: 0; min-height: 2.9rem; padding: .2rem .3rem; background: transparent; border: 2px solid rgba(239, 236, 228, .45); border-radius: var(--ecke); color: var(--kreide); font: 700 1.2rem/1 var(--titel); cursor: pointer; }
.tage-wahl button[aria-pressed="true"] { background: var(--kreide); color: var(--lavagna); border-color: var(--kreide); }
.tage-wahl button:disabled { opacity: .45; cursor: default; text-decoration: line-through; }
.mittag-info { font-size: .98rem; color: var(--kreide-2); margin-bottom: .6rem; }
.mittag-tag h3 { font-size: 1.5rem; margin-bottom: .3rem; }
.ruhetag { font: 700 1.6rem/1.1 var(--titel); text-transform: uppercase; padding: .8rem 0; }
.tafel-fuss { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.tafel-fuss .knopf.neben { color: var(--kreide); }
.tafel-film { display: grid; grid-template-columns: minmax(0, 9rem) 1fr; gap: 1rem; align-items: end; }
.tafel-film .rahmen { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--ecke); background: var(--lavagna); }
.tafel-film .rahmen img, .tafel-film .rahmen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tafel-film p { color: var(--grau); font-size: 1rem; }
.tafel-film b { display: block; color: var(--tinte); font: 700 1.5rem/1.05 var(--titel); text-transform: uppercase; margin-bottom: .35rem; }
/* Wisch-Effekt: Schwamm nimmt die alte Woche weg, dann schreiben sich die Zeilen auf */
.tafel-flaeche .alt, .schwamm-bahn { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: none; }
.tafel-flaeche .alt { background-color: #3d433f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .3' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); }
.schwamm-bahn i { position: absolute; top: -10%; bottom: -10%; left: -3.2rem; width: 3.2rem; background: #e3c95c; border-radius: 8px; box-shadow: inset 0 0 0 4px #c9ab3f; transform: rotate(-5deg); }
.tafel.bereit .alt, .tafel.bereit .schwamm-bahn { display: block; }
.tafel.bereit .schwamm-bahn { transform: translateX(-3rem); }
.tafel.bereit.wischt .alt { animation: wisch 1s cubic-bezier(.5, .05, .4, 1) forwards; }
.tafel.bereit.wischt .schwamm-bahn { animation: schwamm 1s cubic-bezier(.5, .05, .4, 1) forwards; }
@keyframes wisch { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes schwamm { from { transform: translateX(0); } 92% { opacity: 1; } to { transform: translateX(calc(100% + 3.4rem)); opacity: 0; } }
.tafel.bereit [data-zeile] { clip-path: inset(0 100% 0 0); }
.tafel.bereit.schreibt [data-zeile] { animation: schreiben .55s steps(14, end) forwards; animation-delay: calc(var(--i, 0) * 70ms + .9s); }
.tafel.bereit.schreibt.wieder [data-zeile] { animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes schreiben { to { clip-path: inset(0 0 0 0); } }
@media (min-width: 56rem) {
  .tafel-gruppen { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
  .tafel-raster { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; gap: 2.5rem; }
  .tafel-film { grid-template-columns: 1fr; position: sticky; top: calc(var(--kopf-h) + 2rem); }
}

/* Carlo */
.carlo { overflow: hidden; }
.ciao-band { font: 700 clamp(5rem, 22vw, 15rem)/.9 var(--titel); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 2px rgba(239, 236, 228, .35); transform: translateX(calc(var(--b, 0) * -1px)); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); will-change: transform; user-select: none; }
.carlo-raster { display: grid; gap: 2rem; }
.carlo-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.carlo-bilder figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--ecke); background: var(--lavagna-2); }
.carlo-bilder figure:first-child { grid-column: span 2; }
.carlo-bilder img, .carlo-bilder video { width: 100%; height: 100%; object-fit: cover; }
.carlo-bilder .hoch { aspect-ratio: 4 / 5; }
.carlo-bilder figcaption { position: absolute; left: .6rem; bottom: .6rem; background: rgba(31, 35, 33, .78); padding: .2rem .5rem; font-size: .88rem; border-radius: 2px; }
.carlo-text h2 { margin-bottom: 1rem; }
.carlo-text > p { color: #e2ded4; max-width: 36rem; }
.zitat { margin: 1.6rem 0 0; padding: 0; font: 600 clamp(1.4rem, 4.4vw, 1.9rem)/1.2 var(--titel); text-transform: none; max-width: 34rem; }
.zitat footer { margin-top: .6rem; font: 400 .95rem/1.4 var(--text); color: var(--kreide-2); display: flex; align-items: center; gap: .4rem; }
.geschichte { display: grid; grid-template-columns: auto 1fr; gap: .7rem 1.1rem; margin: 2rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--lavagna-3); }
.geschichte dt { font: 700 2rem/1 var(--titel); color: #f3d9a4; }
.geschichte dd { margin: 0; padding-top: .25rem; color: #e2ded4; }
@media (min-width: 60rem) {
  .carlo-raster { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; align-items: center; }
  .carlo-bilder { grid-template-columns: 1.15fr 1fr; grid-template-rows: auto auto; }
  .carlo-bilder figure:first-child { grid-column: 1; grid-row: span 2; }
  .carlo-bilder figure:first-child img { aspect-ratio: auto; height: 100%; }
}

/* Speisekarte, Vorschau */
.preise { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.preise span { display: inline-flex; align-items: baseline; gap: .45rem; padding: .5rem .9rem; background: var(--lavagna); color: var(--kreide); border-radius: var(--ecke); font-size: 1rem; }
.preise b { font: 700 1.7rem/1 var(--titel); }
.karte-reiter { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--rand)) 1.2rem; padding: 0 var(--rand) .2rem; }
.karte-reiter::-webkit-scrollbar { display: none; }
.karte-reiter button { flex: none; min-height: 2.9rem; padding: .3rem 1rem; background: transparent; border: 2px solid var(--tinte); border-radius: var(--ecke); font: 700 1.25rem/1 var(--titel); text-transform: uppercase; cursor: pointer; }
.karte-reiter button[aria-selected="true"] { background: var(--tinte); color: var(--carta); }
.karte-feld { display: grid; gap: 1.4rem; }
.karte-feld .bild { overflow: hidden; border-radius: var(--ecke); aspect-ratio: 4 / 3; background: var(--carta-3); }
.karte-feld .bild img { width: 100%; height: 100%; object-fit: cover; }
.posten { list-style: none; margin: 0; padding: 0; }
.posten li { display: grid; grid-template-columns: 1fr auto; gap: .05rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.posten .n { font: 700 1.3rem/1.15 var(--titel); text-transform: uppercase; }
.posten .t { grid-column: 1; color: var(--grau); font-size: .98rem; line-height: 1.4; }
.posten .p { grid-column: 2; grid-row: 1; font: 700 1.3rem/1.15 var(--titel); white-space: nowrap; }
.karte-mehr { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .7rem; }
@media (min-width: 56rem) {
  .karte-feld { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 2.5rem; }
  .karte-feld .bild { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--kopf-h) + 1.5rem); }
}

/* Abholen */
.abholen { margin-top: clamp(2.5rem, 7vw, 4rem); display: grid; gap: 1.4rem; background: var(--lavagna); color: var(--kreide); border-radius: var(--ecke); overflow: hidden; }
.abholen .bild { aspect-ratio: 16 / 10; overflow: hidden; }
.abholen .bild img { width: 100%; height: 100%; object-fit: cover; }
.abholen .txt { padding: 0 1.3rem 1.6rem; }
.abholen h3 { font-size: clamp(1.9rem, 6vw, 2.7rem); margin-bottom: .6rem; }
.abholen p { color: #e2ded4; }
.abholen .aktionen { margin-top: 1.2rem; }
.abholen .knopf.neben { color: var(--kreide); }
@media (min-width: 56rem) { .abholen { grid-template-columns: 1fr 1fr; align-items: center; } .abholen .bild { aspect-ratio: auto; height: 100%; min-height: 22rem; } .abholen .txt { padding: 2rem 2.4rem 2rem 0; } }

/* Feiern und Räume */
.feiern-raster { display: grid; gap: 1.8rem; }
.feiern-bilder { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.feiern-bilder figure { margin: 0; overflow: hidden; border-radius: var(--ecke); position: relative; background: var(--carta-3); }
.feiern-bilder figure:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.feiern-bilder figure:not(:first-child) { aspect-ratio: 4 / 5; }
.feiern-bilder img, .feiern-bilder video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feiern-text p { color: var(--grau); max-width: 34rem; }
.feiern-text h2 { margin-bottom: 1rem; }
.feiern-text .aktionen { margin-top: 1.4rem; }
.raeume { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: clamp(2rem, 6vw, 3.5rem); }
.raeume figure { margin: 0; }
.raeume .bild { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ecke); }
.raeume img { width: 100%; height: 100%; object-fit: cover; }
.raeume figure:last-child { grid-column: span 2; }
.raeume figure:last-child .bild { aspect-ratio: 2 / 1; }
.raeume figcaption { margin-top: .5rem; font-size: .98rem; color: var(--grau); }
.raeume figcaption b { display: block; color: var(--tinte); font: 700 1.35rem/1.1 var(--titel); text-transform: uppercase; }
@media (min-width: 60rem) { .feiern-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 3.5rem; } .raeume { grid-template-columns: repeat(3, 1fr); } .raeume figure:last-child { grid-column: auto; } .raeume figure:last-child .bild { aspect-ratio: 4 / 3; } }

/* Reels */
.reel-kopf p { color: var(--kreide-2); margin-top: .3rem; }
.ig-knopf { color: var(--kreide); border-color: var(--kreide); }
.ig-logo { width: 1.2rem; height: 1.2rem; }
.reel-fenster { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--rand)); padding: 0 var(--rand); scroll-padding-inline: var(--rand); }
.reel-fenster::-webkit-scrollbar { display: none; }
.reel-spur { display: flex; gap: .75rem; width: max-content; margin: 0; padding: 0; list-style: none; }
.reel-spur > li { flex: none; position: relative; scroll-snap-align: start; }
.reel-karte { position: relative; display: block; width: clamp(10.5rem, 46vw, 15rem); aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: var(--ecke); overflow: hidden; background: var(--lavagna-2); color: var(--kreide); cursor: pointer; text-decoration: none; }
.reel-karte img, .reel-karte video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-karte video { opacity: 0; transition: opacity .4s; }
.reel-karte.lauft video { opacity: 1; }
.reel-karte .play { position: absolute; right: .6rem; bottom: .6rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgba(31, 35, 33, .7); transition: opacity .2s; }
.reel-karte .play::before { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: .7rem solid currentColor; border-block: .45rem solid transparent; }
.reel-karte.lauft .play { opacity: 0; }
.reel-karte.pause .play { opacity: 1; }
.reel-karte .titel { position: absolute; left: .6rem; top: .6rem; right: .6rem; z-index: 2; font-size: .9rem; font-weight: 600; background: rgba(31, 35, 33, .75); padding: .25rem .45rem; border-radius: 2px; width: fit-content; text-align: left; }
.reel-karte.ton { outline: 3px solid var(--kreide); outline-offset: -3px; }
.reel-vergr { position: absolute; left: .6rem; bottom: .6rem; z-index: 3; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: rgba(31, 35, 33, .7); border: 0; border-radius: var(--ecke); color: var(--kreide); cursor: pointer; }
.reel-vergr svg { width: 1.2rem; height: 1.2rem; }
.reel-mehr::after { content: ""; position: absolute; inset: 0; background: rgba(31, 35, 33, .6); }
.reel-mehr .titel { z-index: 3; font: 700 1.6rem/1 var(--titel); text-transform: uppercase; background: none; top: auto; bottom: 3rem; }
.reel-mehr .mehr-text { position: absolute; z-index: 3; left: .6rem; bottom: 1rem; font-size: .92rem; }
.reel-hinweis { margin-top: .9rem; color: var(--kreide-2); font-size: .95rem; }
.reel-gross { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(18, 20, 19, .95); padding: 1rem; }
.reel-gross[hidden] { display: none; }
.reel-buehne { display: grid; gap: .7rem; width: min(100%, 26rem); }
.reel-buehne video { width: 100%; max-height: calc(100dvh - 7rem); aspect-ratio: 9 / 16; object-fit: contain; background: #000; border-radius: var(--ecke); }
.reel-leiste { display: flex; align-items: center; gap: .6rem; color: var(--kreide); }
.reel-name { flex: 1; line-height: 1.2; }
.reel-ig, .reel-zu { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 .9rem; border: 2px solid var(--kreide); border-radius: var(--ecke); background: transparent; color: var(--kreide); font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; }
.reel-zu { background: var(--kreide); color: var(--lavagna); }
@media (min-width: 64rem) {
  .reel-fenster { overflow: visible; margin: 0; padding: 0; }
  .reel-spur { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: auto; }
  .reel-karte { width: 100%; }
}

/* Galerie */
.galerie { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.galerie a { display: block; overflow: hidden; border-radius: var(--ecke); aspect-ratio: 1; background: var(--carta-3); }
.galerie a.breit { grid-column: span 2; aspect-ratio: 2 / 1; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.galerie a:hover img { transform: scale(1.04); }
.galerie a:nth-child(n+7) { display: none; }
.galerie.alle a:nth-child(n+7) { display: block; }
.galerie-mehr { margin-top: 1rem; }
@media (min-width: 52rem) {
  .galerie { grid-template-columns: repeat(4, 1fr); }
  .galerie a:nth-child(n+7) { display: block; }
  .galerie-mehr { display: none; }
}
.gross-ansicht { position: fixed; inset: 0; z-index: 80; display: none; background: rgba(18, 20, 19, .95); color: var(--kreide); }
.gross-ansicht.offen { display: grid; place-items: center; }
.gross-ansicht img { max-width: min(92vw, 70rem); max-height: 82svh; width: auto; height: auto; object-fit: contain; }
.gross-ansicht button { position: absolute; min-width: 3rem; min-height: 3rem; background: rgba(239, 236, 228, .14); color: var(--kreide); border: 0; border-radius: var(--ecke); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.gross-ansicht .zu { top: 1rem; right: 1rem; padding: 0 1rem; }
.gross-ansicht .vor { right: 1rem; top: 50%; }
.gross-ansicht .zurueck { left: 1rem; top: 50%; }
.gross-ansicht .zaehler { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; font-size: .95rem; }

/* Demo: Anfrage in Schritten */
.anfrage-raster { display: grid; gap: 2rem; }
.anfrage-seite p { color: #e2ded4; max-width: 30rem; }
.anfrage-seite h2 { margin-bottom: 1rem; }
.anfrage-seite .tel-gross { display: inline-flex; margin-top: 1.2rem; font: 700 2rem/1 var(--titel); text-decoration: none; border-bottom: 2px solid var(--kreide); padding-bottom: .2rem; }
.anfrage-bild { display: none; }
.anfrage { background: var(--carta); color: var(--tinte); border-radius: var(--ecke); padding: clamp(1.1rem, 4vw, 2rem); scroll-margin-top: calc(var(--kopf-h) + .8rem); }
.anfrage-kopf { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.anfrage-stand { font-size: .9rem; color: var(--grau); white-space: nowrap; }
.fortschritt { display: flex; gap: .3rem; flex: 1; }
.fortschritt span { flex: 1; height: 4px; border-radius: 2px; background: var(--carta-3); }
.fortschritt .fertig { background: var(--tinte); }
.fortschritt .jetzt { background: var(--pomodoro); }
.bisher { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.bisher button { min-height: 2.3rem; padding: .2rem .7rem; background: var(--carta-2); border: 1px solid var(--linie); border-radius: var(--ecke); font-size: .9rem; cursor: pointer; }
.schritt h3 { font-size: clamp(1.7rem, 6vw, 2.3rem); margin-bottom: 1rem; }
.schritt h3:focus { outline: none; }
.schritt-info { color: var(--grau); font-size: .98rem; margin: -.4rem 0 .9rem; }
.wahl { display: grid; gap: .55rem; }
.wahl.zwei { grid-template-columns: 1fr 1fr; }
.wahl.eng { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); }
.wahl button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .15rem; min-height: 3.4rem; padding: .7rem 1rem; background: #fffcf6; border: 2px solid var(--linie); border-radius: var(--ecke); text-align: left; font-weight: 600; font-size: 1.05rem; cursor: pointer; transition: border-color .15s, background-color .15s; }
.wahl.eng button { align-items: center; text-align: center; padding: .5rem; }
.wahl button small { font-weight: 400; font-size: .9rem; color: var(--grau); }
.wahl button:hover { border-color: var(--tinte); }
.wahl button[aria-pressed="true"] { border-color: var(--pomodoro); background: #fbe9e4; }
.anlaesse button { min-height: 4.2rem; font: 700 1.45rem/1 var(--titel); text-transform: uppercase; }
.anlaesse button small { font: 400 .95rem/1.3 var(--text); text-transform: none; }
.zurueck-schritt { margin-top: 1rem; min-height: 2.75rem; padding: 0 .3rem; background: none; border: 0; text-decoration: underline; text-underline-offset: .2em; color: var(--grau); cursor: pointer; }
.gerichte { list-style: none; margin: 0; padding: 0; max-height: 26rem; overflow-y: auto; border-block: 1px solid var(--linie); overscroll-behavior: contain; }
.gerichte li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem 1rem; padding: .6rem .1rem; border-bottom: 1px solid var(--linie); }
.gerichte li:last-child { border-bottom: 0; }
.gerichte .n { font-weight: 600; line-height: 1.2; }
.gerichte .n small { display: block; font-weight: 400; color: var(--grau); font-size: .88rem; }
.menge { display: flex; align-items: center; gap: .3rem; }
.menge button { width: 2.75rem; height: 2.75rem; background: #fffcf6; border: 2px solid var(--linie); border-radius: var(--ecke); font-weight: 700; font-size: 1.2rem; cursor: pointer; }
.menge button:disabled { opacity: .35; cursor: default; }
.menge output { min-width: 1.4rem; text-align: center; font-weight: 700; }
.korb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; margin-top: 1rem; }
.korb b { font: 700 1.6rem/1 var(--titel); }
.feld { margin-bottom: .9rem; }
.feld label { display: block; font-weight: 600; margin-bottom: .3rem; }
.feld .frei { font-weight: 400; color: var(--grau); }
.feld input, .feld textarea { width: 100%; min-height: 3rem; padding: .6rem .8rem; background: #fffcf6; border: 2px solid var(--linie); border-radius: var(--ecke); font: inherit; font-size: 1.05rem; color: var(--tinte); }
.feld input:focus, .feld textarea:focus { border-color: var(--tinte); outline: none; }
.feld input[aria-invalid="true"] { border-color: var(--pomodoro); }
.feld-fehler { color: var(--pomodoro-tief); font-size: .95rem; margin-top: .3rem; }
.datenschutz-satz { font-size: .9rem; color: var(--grau); margin: .3rem 0 1rem; }
.senden .knopf { width: 100%; min-height: 3.4rem; font-size: 1.12rem; }
.zusage { margin-top: .7rem; font-size: .95rem; color: var(--grau); }
.entwurf-hinweis { margin-top: .8rem; font-size: .88rem; color: var(--grau); background: var(--carta-2); padding: .5rem .7rem; border-radius: var(--ecke); }
.fertig-schritt dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 1rem 0 1.4rem; padding: 1rem; background: #fffcf6; border: 1px solid var(--linie); border-radius: var(--ecke); }
.fertig-schritt dt { color: var(--grau); }
.fertig-schritt dd { margin: 0; font-weight: 600; }
.fertig-schritt h4 { font-size: 1.4rem; margin-bottom: .5rem; }
.weiter-liste { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.weiter-liste li + li { margin-top: .4rem; }
@media (min-width: 60rem) {
  .anfrage-raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: start; }
  .anfrage-seite { position: sticky; top: calc(var(--kopf-h) + 2rem); }
  .anfrage-bild { display: block; margin-top: 2rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--ecke); }
  .anfrage-bild img { width: 100%; height: 100%; object-fit: cover; }
  .wahl.zwei-gross { grid-template-columns: 1fr 1fr; }
}

/* Gut zu wissen */
.fragen { max-width: 52rem; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; padding: 1rem 2.4rem 1rem 0; position: relative; font: 700 1.4rem/1.15 var(--titel); text-transform: uppercase; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; position: absolute; right: .2rem; top: .8rem; font: 400 1.8rem/1 var(--text); transition: transform .2s; }
.fragen details[open] summary::after { transform: rotate(45deg); }
.fragen details p { padding: 0 0 1.1rem; color: var(--grau); max-width: 44rem; }

/* Anfahrt */
.lage { display: grid; gap: 1.8rem; }
.lage-karte svg { width: 100%; height: auto; border-radius: var(--ecke); border: 1px solid var(--linie); }
.adresse { font-size: 1.1rem; margin-bottom: 1rem; }
.zeiten table { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.zeiten td { padding: .45rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.zeiten td:last-child { text-align: right; }
.zeiten tr.heute td { font-weight: 700; }
.zeiten tr.heute td:first-child::after { content: " (heute)"; font-weight: 400; color: var(--grau); }
.zeiten-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.wege { display: grid; gap: 1.3rem; margin-top: 2.2rem; }
.wege h3 { font-size: 1.4rem; margin-bottom: .3rem; }
.wege p { color: var(--grau); }
@media (min-width: 56rem) { .lage { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 2.5rem; align-items: start; } .wege { grid-template-columns: repeat(3, 1fr); } }

/* Fuß */
.fuss { background: var(--lavagna); color: var(--kreide); padding-top: 2.5rem; }
.fuss-szene { width: 100%; max-width: 64rem; height: auto; margin: 0 auto; color: rgba(239, 236, 228, .55); padding-inline: var(--rand); }
.fuss-raster { display: grid; gap: 2rem; padding-block: 2.4rem 2rem; border-top: 1px solid var(--lavagna-3); }
.fuss h2 { font-size: 1.5rem; margin-bottom: .7rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li + li { margin-top: .4rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss p { color: var(--kreide-2); }
.fuss-logo { width: 9rem; margin-bottom: 1rem; }
.sozial { display: flex; gap: .5rem; margin-top: 1rem; }
.sozial a { width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border: 2px solid var(--lavagna-3); border-radius: var(--ecke); }
.sozial svg { width: 1.3rem; height: 1.3rem; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.4rem; padding-block: 1.2rem 1.6rem; border-top: 1px solid var(--lavagna-3); font-size: .9rem; color: var(--kreide-2); }
.fuss-links { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.fuss-links a { display: inline-block; padding-block: .3rem; }
@media (min-width: 52rem) { .fuss-raster { grid-template-columns: 1.2fr 1fr 1.2fr; } }

/* Unterseiten */
.seitenkopf { background: var(--lavagna); color: var(--kreide); padding-block: clamp(2.6rem, 8vw, 5rem) clamp(2rem, 6vw, 3.5rem); position: relative; overflow: hidden; }
.seitenkopf h1 { font-size: clamp(3rem, 12vw, 6.5rem); line-height: .9; }
.seitenkopf p { margin-top: 1rem; max-width: 36rem; color: #e2ded4; }
.seitenkopf .aktionen { margin-top: 1.4rem; }
.seitenkopf .knopf.neben { color: var(--kreide); }
.sprung { position: sticky; top: var(--kopf-h); z-index: 40; background: var(--carta); border-bottom: 1px solid var(--linie); }
.sprung ul { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; list-style: none; margin: 0; padding: .55rem var(--rand); }
.sprung ul::-webkit-scrollbar { display: none; }
.sprung a { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 .85rem; border-radius: var(--ecke); text-decoration: none; font: 700 1.15rem/1 var(--titel); text-transform: uppercase; white-space: nowrap; border: 2px solid transparent; }
.sprung a[aria-current="true"] { border-color: var(--tinte); }
@media (min-width: 64rem) { .sprung ul { justify-content: center; } }
.karte-abschnitt { padding-block: 2.6rem 1rem; scroll-margin-top: calc(var(--kopf-h) + 4.5rem); }
.karte-abschnitt h2 { font-size: clamp(2.3rem, 7vw, 3.4rem); }
.karte-abschnitt .info { color: var(--grau); margin: .4rem 0 1rem; }
.karte-abschnitt .posten { columns: 1; }
@media (min-width: 60rem) { .karte-abschnitt .posten { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.karte-tafel { padding-block: 2.6rem; }
.pdf-zeile { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.recht { padding-block: 3rem 4rem; max-width: 46rem; }
.recht h1 { font-size: clamp(2.6rem, 8vw, 4rem); margin-bottom: 1.2rem; }
.recht h2 { font-size: 1.7rem; margin: 2rem 0 .6rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .einflug { opacity: 1; transform: none; }
  .tafel.bereit [data-zeile] { clip-path: none; }
  .tafel.bereit .alt, .tafel.bereit .schwamm-bahn { display: none; }
  .hero, .hero-film, .hero-text, .hero-carlo, .ciao-band { transform: none !important; }
}
@media print {
  @page { size: A4; margin: 12mm 14mm; }
  .kopf, .entwurf, .fuss, .sprung, #menue, .pdf-zeile, .seitenkopf .aktionen, .gross-ansicht { display: none !important; }
  body { background: transparent; font-size: 9pt; line-height: 1.3; }
  .druck-logo { display: block !important; width: 34mm; margin-bottom: 3mm; }
  .seitenkopf { background: none; color: #000; padding: 0 0 3mm; border-bottom: 1.5pt solid #1f2321; }
  .seitenkopf .huelle, .karte-abschnitt.huelle { padding: 0; width: 100%; }
  .seitenkopf h1 { font-size: 26pt; }
  .seitenkopf p { color: #333; margin-top: 1.5mm; max-width: none; }
  .karte-abschnitt { padding: 4mm 0 0; }
  .karte-abschnitt h2 { font-size: 17pt; color: #c8201e; }
  .karte-abschnitt .info { margin: .5mm 0 1.5mm; font-size: 8.5pt; }
  .karte-abschnitt .posten, .tk-raster { display: grid; grid-template-columns: 1fr 1fr; column-gap: 9mm; }
  .tk-raster .posten { grid-template-columns: 1fr; }
  .tk-raster h3 { font-size: 11pt; }
  .posten li { padding: 1.1mm 0; break-inside: avoid; }
  .posten .n, .posten .p { font-size: 10.5pt; }
  .posten .t { font-size: 8.5pt; line-height: 1.25; }
  #tafel-karte { break-before: page; }
}
.druck-logo { display: none; }