/* ═══════════════════════════════════════════════════════════
   Antica · Caffè Pizza Bar
   Schwarz und Gold vom Ladenschild, Rosso Corsa (Ferrari-Rot),
   Neon und ein Hauch Holstein-Fell.
   ═══════════════════════════════════════════════════════════ */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("../fonts/dm-serif-display.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("../fonts/dm-serif-display-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --nero: #0f0d0c;
  --nero-2: #1a1614;
  --espresso: #140f0c;
  --tinte: #161210;
  --oro: #d4aa52;
  --oro-hell: #f0d68e;
  --oro-tief: #9c7431;
  --rosso: #d40000;          /* Rosso Corsa */
  --rosso-tief: #a10000;
  --bianco: #f6f5f2;
  --porcellana: #ffffff;
  --marmo: #eeedea;
  --tri-gruen: #009246;
  --tri-rot: #ce2b37;
  --neon: #ff2d1a;
  --aperol: #ff5a00;

  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-buehne: "Instrument Serif", "Didot", Georgia, serif;
  --f-titel: "DM Serif Display", "Instrument Serif", Georgia, serif;
  --f-text: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand: "Caveat", "Segoe Print", cursive;

  --wrap: 1280px;
  --rand: clamp(16px, 4vw, 56px);
  --kopf-h: 76px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --schatten: 0 1px 2px rgba(15, 10, 6, .08), 0 14px 34px -14px rgba(15, 10, 6, .32);

  /* Bühnenfarbe (per Farbwahl umschaltbar) */
  --buehne: var(--nero);
  --b-text: var(--bianco);
  --b-linie: rgba(246, 245, 242, .28);
}

/* Farben der Bühne: jede Pizza bringt ihre eigene mit */
html[data-farbe="nero"]    { --buehne: #000; --buehne-bild: radial-gradient(80% 70% at 72% 40%, #121110 0%, #050505 45%, #000 100%); }
html[data-farbe="rosso"]   { --buehne: #d40000; --buehne-bild: radial-gradient(85% 70% at 72% 38%, #ff3a1f 0%, #e00a00 30%, #c40000 55%, #8c0000 85%, #5e0000 100%); }
html[data-farbe="giallo"]  { --buehne: #ffd000; --buehne-bild: radial-gradient(85% 70% at 72% 38%, #fff27a 0%, #ffe01a 28%, #ffcc00 55%, #f5a800 88%, #e59200 100%); --b-text: #0f0d0c; --b-linie: rgba(15,13,12,.28); }
html[data-farbe="verde"]   { --buehne: #00b84f; --buehne-bild: radial-gradient(85% 70% at 72% 38%, #5dff9e 0%, #14e06a 28%, #00c457 52%, #009141 84%, #006b30 100%); }
html[data-farbe="mucca"]   { --buehne: #000; --buehne-bild: none; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 12px); }
body { margin: 0; background: var(--porcellana); color: var(--tinte); font: 400 17px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, figure, blockquote, ul, ol, address { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
address { font-style: normal; }
::selection { background: var(--rosso); color: #fff; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--nero); color: var(--bianco); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.klein { font-size: 14px; line-height: 1.55; opacity: .75; }
.leise { opacity: .6; }
.hand { font: 600 clamp(22px, 2.2vw, 28px)/1 var(--f-hand); color: var(--rosso); transform: rotate(-2deg); transform-origin: left; display: inline-block; }
.hand--klein { font-size: 20px; }

/* ── Pillen ── */
.pille { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 15px/1 var(--f-text); text-decoration: none; border: 1.5px solid transparent; transition: transform .35s var(--ease-out), background-color .25s, color .25s, border-color .25s, box-shadow .35s; white-space: nowrap; }
.pille:hover { transform: translateY(-2px); }
.pille:active { transform: translateY(0) scale(.98); }
.pille--voll { background: var(--b-text); color: var(--buehne); box-shadow: 0 8px 20px -10px rgba(0,0,0,.55); transition: transform .35s var(--ease-out), background-color .5s, color .5s; }
html[data-farbe="mucca"] .buehne .pille--voll { color: var(--nero); }
.pille--rand { border-color: currentColor; }
.pille--rand:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.pille--klein { min-height: 40px; padding: 0 16px; font-size: 14px; }
.pille--gold { background: linear-gradient(#f0d68e, #c89b45); color: var(--nero); box-shadow: 0 10px 24px -12px rgba(212,170,82,.8); }
.pille--rot { background: var(--rosso); color: #fff; box-shadow: 0 10px 24px -12px rgba(212,0,0,.7); }
.pille--rot:hover { background: var(--rosso-tief); }
.pille--dunkel { background: var(--nero); color: var(--bianco); }

/* ── Status ── */
[data-status] { display: inline-flex; align-items: center; gap: .55em; }
[data-status]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c6bba6; flex: none; }
[data-status][data-zustand="offen"]::before { background: #3ed17b; animation: puls 2.4s infinite; }
[data-status][data-zustand="bald"]::before { background: var(--oro-hell); }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(62,209,123,.55); } 70% { box-shadow: 0 0 0 9px rgba(62,209,123,0); } 100% { box-shadow: 0 0 0 0 rgba(62,209,123,0); } }

/* ═══ Neon (überall gleich gebaut) ═══ */
.neon { font: italic 400 clamp(36px, 3.4vw, 50px)/1 var(--f-buehne); pointer-events: none; }
.neon-tafel { display: inline-block; }
.neon-an, .neon-aus { display: none; }
.neon-an { color: #ffe1d9; text-shadow: 0 0 2px #fff, 0 0 8px #ff6a50, 0 0 18px var(--neon), 0 0 38px #e3261a, 0 0 72px rgba(227,38,26,.7); }
.neon-aus { color: #f3e6ff; text-shadow: 0 0 2px #fff, 0 0 8px #c58bff, 0 0 18px #9b4dff, 0 0 38px #7a2cff, 0 0 70px rgba(122,44,255,.6); }
.neon[data-zustand="offen"] .neon-an, .neon[data-zustand="bald"] .neon-an { display: inline; }
.neon[data-zustand="zu"] .neon-aus { display: inline; }
.neon.is-an .neon-an, .neon.is-an .neon-aus { animation: flackern 2.6s steps(1) 1, summen 4s 2.6s ease-in-out infinite; }
@keyframes flackern { 0%, 8%, 14%, 30%, 34%, 60% { opacity: 1; } 4%, 11%, 32%, 58% { opacity: .12; } 100% { opacity: 1; } }
@keyframes summen { 50% { opacity: .9; } }

/* ═══ Kopf ═══ */
.kopf { position: fixed; inset: 0 0 auto; z-index: 50; color: var(--b-text); transition: background-color .4s, box-shadow .4s, color .4s, transform .45s var(--ease-out); }
.kopf-zeile { height: var(--kopf-h); display: flex; align-items: center; gap: 26px; }
.kopf.is-fest { color: var(--bianco); background: rgba(15, 13, 12, .9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(212,170,82,.2); }
.kopf.is-weg { transform: translateY(-100%); }
.marke { display: block; margin-right: auto; transition: opacity .5s, transform .6s var(--ease-out); }
.marke-schild { width: 132px; height: auto; }
.kopf:not(.is-fest) .marke { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.kopf-nav { display: flex; gap: 4px; }
.kopf-nav a { position: relative; padding: 10px 11px; font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; }
.kopf-nav a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px; background: var(--rosso); border-radius: 2px; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out); }
.kopf:not(.is-fest) .kopf-nav a::after { background: currentColor; }
.kopf-nav a:hover::after, .kopf-nav a.is-aktiv::after { transform: scaleX(1); transform-origin: left; }
.kopf-status { font-size: 13px; opacity: 0; white-space: nowrap; transition: opacity .4s; }
.kopf.is-fest .kopf-status { opacity: .85; }
.kopf .pille--voll { background: var(--bianco); color: var(--nero); }
.kopf-menu { display: none; width: 44px; height: 44px; border: 0; background: none; position: relative; }
.kopf-menu i { position: absolute; left: 11px; right: 11px; height: 1.8px; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease-out), top .4s var(--ease-out); }
.kopf-menu i:nth-child(1) { top: 17px; }
.kopf-menu i:nth-child(2) { top: 25px; }
.kopf-menu[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.kopf-menu[aria-expanded="true"] i:nth-child(2) { top: 21px; transform: rotate(-45deg); }
.menu-flaeche { position: fixed; inset: 0; z-index: 45; background: var(--nero); color: var(--bianco); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: calc(var(--kopf-h) + 20px) var(--rand) 40px; clip-path: circle(0 at calc(100% - 38px) 38px); transition: clip-path .7s var(--ease-io); visibility: hidden; }
.menu-flaeche.is-offen { clip-path: circle(150% at calc(100% - 38px) 38px); visibility: visible; }
.menu-flaeche > a { font: italic 400 clamp(40px, 11vw, 64px)/1.15 var(--f-buehne); text-decoration: none; }
.menu-flaeche > a:hover { color: var(--oro-hell); }
.menu-fuss { margin-top: 36px; display: grid; gap: 8px; font-size: 15px; opacity: .8; }
html.menu-offen .kopf { color: var(--bianco); }

/* ═══ Bühne ═══ */
.buehne { position: relative; isolation: isolate; color: var(--b-text); min-height: 100vh; min-height: 100svh; padding: calc(var(--kopf-h) + 18px) 0 clamp(28px, 4vw, 48px); overflow: hidden; --sg: url(#oro); --sw: #f4f3f0; transition: color .5s; }
html[data-farbe="giallo"] .buehne { --sg: #0f0d0c; --sw: #0f0d0c; }
/* Lack-Glanz wie auf einer Motorhaube */
.buehne-glanz { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.10) 44%, rgba(255,255,255,.02) 50%, transparent 58%); transition: opacity .8s; }
html[data-farbe="mucca"] .buehne-glanz, html[data-farbe="nero"] .buehne-glanz { opacity: 0; }
html[data-farbe="nero"] .buehne-korn { opacity: .08; }
.buehne-feld, .buehne-feld-neu { position: absolute; inset: 0; z-index: -3; background: var(--buehne-bild, none), var(--buehne); }
.buehne-feld-neu { z-index: -2; }
.buehne-fell { position: absolute; inset: 0; z-index: -2; opacity: 0; }
html[data-farbe="mucca"] .buehne-fell { opacity: 1; }
html[data-farbe="mucca"] .buehne-korn, html[data-farbe="mucca"] .buehne::after { opacity: 0; }
.buehne-korn { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .2; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' 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 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.buehne::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 72% 45%, transparent 40%, rgba(0,0,0,.26) 100%); }

.rahmen { position: absolute; inset: calc(var(--kopf-h) - 4px) clamp(10px, 1.6vw, 24px) clamp(10px, 1.6vw, 24px); pointer-events: none; }
.rahmen i { position: absolute; background: var(--b-linie); }
.rahmen-o { left: 22px; right: 22px; top: 0; height: 1px; }
.rahmen-u { left: 0; right: 0; bottom: 0; height: 1px; }
.rahmen-l { left: 0; top: 22px; bottom: 0; width: 1px; }
.rahmen-r { right: 0; top: 22px; bottom: 0; width: 1px; }
.ecke { position: absolute; width: 16px; height: 16px; color: var(--oro-hell); top: -8px; }
html[data-farbe="giallo"] .ecke { color: var(--nero); }
.ecke--lo { left: -8px; }
.ecke--ro { right: -8px; }

.buehne-raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "intro tafel" "gericht tafel" "gericht waehler"; grid-template-rows: auto 1fr auto; column-gap: clamp(24px, 4vw, 72px); align-items: start; }
.intro { grid-area: intro; padding-top: clamp(4px, 1.6vh, 24px); }
.intro-ort { display: inline-flex; align-items: center; gap: .5em; font-size: 14px; font-weight: 500; opacity: .85; margin-bottom: 16px; }

/* Das Ladenschild, nachgezeichnet vom Foto */
.intro-marke { margin: 0 0 clamp(14px, 1.8vw, 22px); }
.schild-buehne { width: clamp(290px, 33vw, 540px); height: auto; overflow: visible; margin-left: -1%; filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); }
.schild-gold { fill: var(--sg); }
.schild-weiss { fill: var(--sw); }
.js .schild-buehne .sb { fill-opacity: 0; stroke: var(--sg); stroke-width: 8; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 1.2s var(--ease-io) calc(.25s + var(--i) * .2s) forwards, fuellen .7s ease calc(1s + var(--i) * .2s) forwards; }
.js .schild-buehne .schild-weiss { opacity: 0; animation: auftauchen .9s var(--ease-out) 2.1s forwards; }
.js .schild-buehne .schild-tri rect { transform: scaleX(0); transform-box: fill-box; transform-origin: left; animation: ausrollen .6s var(--ease-out) forwards; }
.js .schild-buehne .schild-tri rect:nth-child(1) { animation-delay: 2.5s; }
.js .schild-buehne .schild-tri rect:nth-child(2) { animation-delay: 2.65s; }
.js .schild-buehne .schild-tri rect:nth-child(3) { animation-delay: 2.8s; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes fuellen { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ausrollen { to { transform: scaleX(1); } }

.intro-titel { font: 400 clamp(30px, 2.9vw, 46px)/1.04 var(--f-buehne); text-wrap: balance; max-width: 15ch; }
.intro-titel em { font-style: italic; color: var(--oro-hell); position: relative; white-space: nowrap; padding-right: .06em; }
html[data-farbe="rosso"] .intro-titel em, html[data-farbe="verde"] .intro-titel em { color: #fff3c4; }
html[data-farbe="giallo"] .intro-titel em { color: var(--nero); }
.intro-titel em::after { content: ""; position: absolute; left: -2%; right: -4%; bottom: .02em; height: .16em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C50 3 120 2 197 6 C140 6 80 9 30 12' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C50 3 120 2 197 6 C140 6 80 9 30 12' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; transform-origin: left; animation: unterstrich 1.1s 3s var(--ease-out) both; }
@keyframes unterstrich { from { transform: scaleX(0); } }
.intro-handeln { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 2vw, 26px); }

/* Tafel: Teller, Pizza, Kranz */
.tafel { grid-area: tafel; position: relative; aspect-ratio: 1; width: 100%; max-width: min(640px, calc(100vh - 300px)); justify-self: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.tafel.is-zieht { cursor: grabbing; }
.kranz { position: absolute; inset: -3%; width: 106%; height: 106%; color: var(--b-text); transform: rotate(var(--dreh, 0deg)); transition: transform 1.2s var(--ease-io); pointer-events: none; }
.kranz-punkte { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-dasharray: 0 9.5; stroke-linecap: round; opacity: .4; }
.kranz-text { font: 600 13px var(--f-text); letter-spacing: .32em; fill: currentColor; opacity: .55; transform-box: view-box; transform-origin: 50% 50%; animation: kreisen 90s linear infinite; }
@keyframes kreisen { to { transform: rotate(360deg); } }

.teller { position: absolute; inset: 7%; filter: drop-shadow(0 30px 28px rgba(0,0,0,.45)) drop-shadow(0 6px 8px rgba(0,0,0,.25)); }
.pizza { position: absolute; inset: 0; will-change: transform; --von: 104deg; --bis: 146deg; }
.js .pizza:not(.is-aktiv) { visibility: hidden; opacity: 0; }
.pizza img { position: absolute; -webkit-user-drag: none; pointer-events: none; }
.pizza-teller { inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.pizza::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), inset 0 -14px 30px rgba(0,0,0,.28), inset 0 10px 24px rgba(255,255,255,.18); }
.pizza-rest, .pizza-stueck { z-index: 2; inset: 12.5%; width: 75%; height: 75%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.pizza-rest { -webkit-mask: conic-gradient(#000 0 var(--von), transparent var(--von) var(--bis), #000 var(--bis)); mask: conic-gradient(#000 0 var(--von), transparent var(--von) var(--bis), #000 var(--bis)); }
.pizza-stueck { -webkit-mask: conic-gradient(transparent 0 var(--von), #000 var(--von) var(--bis), transparent var(--bis)); mask: conic-gradient(transparent 0 var(--von), #000 var(--von) var(--bis), transparent var(--bis)); transition: translate .7s var(--ease-out), rotate .7s var(--ease-out), filter .7s; }
@media (hover: hover) and (pointer: fine) {
  .tafel:not(.is-zieht):hover .pizza.is-aktiv .pizza-stueck { translate: var(--dx, 5%) var(--dy, 3.5%); rotate: 4deg; filter: drop-shadow(0 20px 16px rgba(0,0,0,.45)); }
  .tafel:not(.is-zieht):hover .stueck-zettel { opacity: 1; transform: rotate(-6deg) translateY(0); }
}
.stueck-zettel { position: absolute; left: -4%; bottom: 4%; font: 700 26px/0.95 var(--f-hand); color: var(--oro-hell); text-align: center; opacity: 0; transform: rotate(-6deg) translateY(10px); transition: opacity .4s, transform .6s var(--ease-out); pointer-events: none; z-index: 3; }
html[data-farbe="giallo"] .stueck-zettel { color: var(--nero); }
.stueck-zettel span { font-size: 19px; font-weight: 500; color: var(--b-text); }

/* Neon-Schild an Ketten */
.neon--haengend { position: absolute; top: 3%; left: -6%; z-index: 4; display: grid; justify-items: center; transform-origin: top center; animation: pendeln 6s ease-in-out infinite; }
.neon-kette { position: absolute; top: -34px; width: 1px; height: 38px; background: linear-gradient(var(--b-linie), currentColor); color: var(--b-linie); }
.neon-kette:first-child { left: 22%; }
.neon-kette:nth-child(2) { right: 22%; }
.neon--haengend .neon-tafel { padding: 10px 20px 14px; border-radius: 14px; background: rgba(10,8,7,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 14px 30px -12px rgba(0,0,0,.6); font-size: clamp(34px, 3vw, 46px); }
@keyframes pendeln { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

.tafel-pfeil { position: absolute; top: 86%; left: -1%; z-index: 5; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1.5px solid currentColor; background: color-mix(in srgb, var(--buehne) 60%, transparent); color: var(--b-text); display: grid; place-items: center; transition: background-color .25s, color .25s, transform .35s var(--ease-out); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.tafel-pfeil:not(.tafel-pfeil--zurueck) { left: auto; right: -1%; }
.tafel-pfeil--zurueck .ico { transform: scaleX(-1); }
.tafel-pfeil:hover { background: var(--b-text); color: var(--buehne); transform: scale(1.06); }

/* Gericht-Text */
.gericht { grid-area: gericht; align-self: end; margin-top: clamp(18px, 3vh, 36px); padding-top: clamp(16px, 2.4vh, 28px); border-top: 1px solid var(--b-linie); min-height: 210px; max-width: 560px; }
.gericht-kopf { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.gericht-name { font: italic 400 clamp(40px, 4.2vw, 64px)/1 var(--f-buehne); }
.gericht-marke { display: inline-flex; align-items: center; gap: 5px; font: 600 12px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px 6px 8px; border-radius: 999px; border: 1px solid var(--b-linie); transform: translateY(-6px); }
.gericht-marke svg { width: 13px; height: 13px; }
.gericht-satz { margin-top: 10px; font-size: clamp(16px, 1.2vw, 18px); opacity: .9; max-width: 440px; }
.gericht-handeln { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.gericht-preis { font: 400 clamp(32px, 2.8vw, 44px)/1 var(--f-buehne); font-variant-numeric: lining-nums tabular-nums; }
.gericht-preis small { font-size: .55em; margin-left: .15em; opacity: .8; }
.gericht-zusatz { font: 600 21px/1.1 var(--f-hand); color: var(--oro-hell); transform: rotate(-3deg); }
html[data-farbe="giallo"] .gericht-zusatz, html[data-farbe="rosso"] .gericht-zusatz, html[data-farbe="verde"] .gericht-zusatz { color: inherit; }

/* Wähler */
.waehler-zeile { grid-area: waehler; position: relative; justify-self: center; align-self: end; margin-top: clamp(6px, 1.4vh, 18px); }
.waehler { display: flex; gap: clamp(4px, 1vw, 14px); justify-content: center; }
.waehler-tab { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 6px 6px 14px; border: 0; background: none; color: var(--b-text); font-size: 13px; font-weight: 500; line-height: 1.15; opacity: .72; transition: opacity .3s; }
.waehler-tab img { width: clamp(52px, 5.2vw, 72px); height: auto; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); transition: transform .55s var(--ease-out); }
.waehler-tab:hover { opacity: 1; }
.waehler-tab:hover img { transform: rotate(-24deg) scale(1.06); }
.waehler-tab[aria-selected="true"] { opacity: 1; }
.waehler-tab[aria-selected="true"] img { transform: scale(1.14); }
.waehler-tab::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 2px; height: 2px; border-radius: 2px; background: currentColor; transform: scaleX(0); transition: transform .5s var(--ease-out); }
.waehler-tab[aria-selected="true"]::after { transform: scaleX(1); }
.hinweis-hand { position: absolute; right: -4px; top: -34px; display: flex; align-items: flex-end; gap: 4px; font: 600 22px/1 var(--f-hand); color: var(--oro-hell); white-space: nowrap; transform: rotate(-3deg); transition: opacity .5s, transform .5s var(--ease-out); pointer-events: none; }
html[data-farbe="giallo"] .hinweis-hand, html[data-farbe="rosso"] .hinweis-hand, html[data-farbe="verde"] .hinweis-hand { color: var(--b-text); }
.hinweis-hand svg { width: 46px; height: 30px; margin-bottom: -12px; order: -1; }
.hinweis-hand.is-weg { opacity: 0; transform: rotate(-3deg) translateY(-8px); }

/* ═══ Laufband ═══ */
.band { background: var(--rosso); color: #fff; overflow: hidden; padding: 16px 0; position: relative; }
.band::before, .band::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: repeating-linear-gradient(90deg, var(--oro) 0 14px, transparent 14px 22px); opacity: .7; }
.band::before { top: 5px; }
.band::after { bottom: 5px; }
.band-spur { display: flex; align-items: center; gap: 28px; width: max-content; animation: laufen 50s linear infinite; }
.band:hover .band-spur { animation-play-state: paused; }
.band span { font: italic 400 clamp(24px, 2.8vw, 38px)/1 var(--f-buehne); white-space: nowrap; }
.band b { font-size: 14px; color: var(--oro-hell); font-weight: 400; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ═══ Abschnitts-Köpfe ═══ */
.kopfzeile { display: grid; gap: 10px; margin-bottom: clamp(36px, 5vw, 64px); }
.titel-gross { font: 400 clamp(40px, 5vw, 74px)/1.04 var(--f-titel); letter-spacing: -.012em; text-wrap: balance; max-width: 16ch; }
.titel-gross em { font-style: normal; color: var(--rosso); }
.kopfzeile-text { max-width: 44ch; opacity: .8; }

/* ═══ Ein Tag ═══ */
.tag { padding: clamp(110px, 13vw, 170px) 0 clamp(50px, 6vw, 80px); background: var(--porcellana); position: relative; }
.markise { position: absolute; left: 0; right: 0; top: 0; height: 52px; background: repeating-linear-gradient(90deg, var(--rosso) 0 46px, #f1efeb 46px 92px); -webkit-mask: linear-gradient(#000 0 0) top / 100% 30px no-repeat, radial-gradient(circle 23px at 23px 0, #000 98%, transparent 100%) 0 30px / 46px 22px repeat-x; mask: linear-gradient(#000 0 0) top / 100% 30px no-repeat, radial-gradient(circle 23px at 23px 0, #000 98%, transparent 100%) 0 30px / 46px 22px repeat-x; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); transform-origin: top; animation: wehen 7s ease-in-out infinite; }
.markise::after { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: linear-gradient(rgba(0,0,0,.3), transparent); }
@keyframes wehen { 50% { transform: scaleY(1.06) skewX(-.6deg); } }
.kopfzeile--mitte { justify-items: center; text-align: center; }
.kopfzeile--mitte .titel-gross { max-width: 18ch; }
.kopfzeile--mitte .hand { transform-origin: center; }
.dampf { stroke-dasharray: 22; animation: dampf 3s ease-in-out infinite; }
@keyframes dampf { 0% { stroke-dashoffset: 22; opacity: 0; } 40% { opacity: 1; } 100% { stroke-dashoffset: -22; opacity: 0; } }

/* ═══ Karte ═══ */
.karte { position: relative; overflow: hidden; background: transparent; color: var(--bianco); padding: clamp(90px, 11vw, 150px) 0 clamp(60px, 8vw, 110px); }
.karte .titel-gross em { color: var(--oro-hell); }
.karte .hand { color: var(--oro-hell); }
.rand-pizza { position: absolute; right: calc(-1 * clamp(60px, 6vw, 120px)); top: clamp(50px, 6vw, 90px); width: clamp(180px, 17vw, 300px); aspect-ratio: 1; filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)); pointer-events: none; transform: rotate(var(--rad, 0deg)); }
.rand-pizza img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.karte-steuer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid rgba(212,170,82,.3); }
.reiter { display: flex; gap: 6px; flex-wrap: wrap; }
.reiter-tab { border: 1px solid rgba(246,245,242,.25); background: none; padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: background-color .25s, color .25s, border-color .25s; }
.reiter-tab small { font-size: 11px; opacity: .6; margin-left: 2px; vertical-align: 1px; }
.reiter-tab:hover { border-color: var(--rosso); }
.reiter-tab[aria-selected="true"] { background: var(--rosso); color: #fff; border-color: var(--rosso); }
.veg-schalter { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; cursor: pointer; }
.veg-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.veg-spur { position: relative; width: 52px; height: 30px; border-radius: 999px; background: rgba(246,245,242,.18); transition: background-color .3s; }
.veg-spur svg { position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--bianco); color: var(--tri-gruen); transition: transform .45s var(--ease-out); }
.veg-schalter input:checked + .veg-spur { background: var(--tri-gruen); }
.veg-schalter input:checked + .veg-spur svg { transform: translateX(22px) rotate(-20deg); }
.veg-schalter input:focus-visible + .veg-spur { outline: 2px solid var(--oro); outline-offset: 3px; }
.karte-blatt { padding-top: clamp(26px, 3vw, 40px); min-height: 380px; }
.speisen { columns: 2; column-gap: clamp(36px, 6vw, 96px); }
.speise { break-inside: avoid; padding: 14px 0 16px; border-bottom: 1px dashed rgba(246,245,242,.14); }
.speise-zeile { display: flex; align-items: baseline; gap: 12px; }
.speise h3 { font: 400 clamp(22px, 1.9vw, 27px)/1.15 var(--f-titel); }
.speise h3 small { font: 400 13px var(--f-text); opacity: .6; margin-left: 4px; }
.speise-zeile i { flex: 1; border-bottom: 1.5px dotted rgba(212,170,82,.45); transform: translateY(-5px); min-width: 20px; }
.preis { font: 500 21px/1 var(--f-display); color: var(--oro-hell); font-variant-numeric: lining-nums tabular-nums; }
.speise p { font-size: 15px; opacity: .65; margin-top: 4px; max-width: 42ch; }
.speise[data-veg] h3::after { content: ""; display: inline-block; width: 15px; height: 15px; margin-left: 9px; vertical-align: 1px; background: #5fd38a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5C11 3.6 4.6 8.4 4.3 16.2c-.1 1.6.3 3 .9 4.3l1.3-1c-.4-.9-.6-1.9-.5-3 .1-1.2.4-2.3 1-3.3 2.4-1 5-2.9 7-5.6-1.8 3.3-4 5.3-6.2 6.6.2 3.1 2.7 5 6 4.5 5.6-.9 7.3-8.1 6.7-15.2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 3.5C11 3.6 4.6 8.4 4.3 16.2c-.1 1.6.3 3 .9 4.3l1.3-1c-.4-.9-.6-1.9-.5-3 .1-1.2.4-2.3 1-3.3 2.4-1 5-2.9 7-5.6-1.8 3.3-4 5.3-6.2 6.6.2 3.1 2.7 5 6 4.5 5.6-.9 7.3-8.1 6.7-15.2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.speise.is-weg { display: none; }
.speise.is-gesucht { position: relative; animation: gesucht 3.2s .5s var(--ease-out) both; }
.speise.is-gesucht::before { content: ""; position: absolute; left: -10px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--oro); animation: gesucht-strich 3.2s .5s var(--ease-out) both; }
.speise.is-gesucht .preis { animation: gesucht-preis 1s 1s var(--ease-out) both; display: inline-block; }
@keyframes gesucht { 0% { background: transparent; box-shadow: 0 0 0 10px transparent; } 18% { background: rgba(212,170,82,.16); box-shadow: 0 0 0 10px rgba(212,170,82,.16); } 100% { background: rgba(212,170,82,.06); box-shadow: 0 0 0 10px rgba(212,170,82,.06); } }
@keyframes gesucht-strich { 0% { transform: scaleY(0); } 20% { transform: scaleY(1); } 100% { transform: scaleY(1); } }
@keyframes gesucht-preis { 0% { transform: scale(1); } 40% { transform: scale(1.22); color: #fff; } 100% { transform: scale(1); } }
.scharf { font: 600 11px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: #ff6b5b; border: 1px solid currentColor; padding: 3px 7px; border-radius: 999px; vertical-align: 4px; margin-left: 6px; }
.karte-notiz { font: 600 22px/1.2 var(--f-hand); color: var(--oro-hell); margin-bottom: 12px; }
.karte-gruppe { font: 700 12px/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin: 8px 0 4px; }
.karte-gruppe ~ .karte-gruppe { margin-top: 40px; }
.bar-liste { font: italic 400 clamp(24px, 2.1vw, 30px)/1.45 var(--f-buehne); max-width: 32ch; margin: 10px 0 12px; }
.karte-leer { font: 600 24px/1.3 var(--f-hand); color: var(--oro-hell); padding: 30px 0; }

.karte-fuss { margin-top: clamp(60px, 7vw, 100px); }
.karte-hinweise { display: flex; flex-wrap: wrap; gap: 28px 60px; align-items: center; }
.tafelchen { padding: 22px 30px; background: radial-gradient(120% 100% at 30% 20%, #3a403b, #222623 70%); color: #f4f1e8; border-radius: 6px; border: 10px solid #6e4a2d; box-shadow: inset 0 0 30px rgba(0,0,0,.45), 0 20px 34px -18px rgba(0,0,0,.7); transform: rotate(1.5deg); }
.tafelchen > * { filter: url(#kreide); }
.tafelchen-klein { font: 500 22px/1.1 var(--f-hand); opacity: .85; }
.tafelchen-gross { font: 700 44px/.95 var(--f-hand); margin-top: 4px; color: #fff; }
.karte-hinweis { max-width: 46ch; }

/* ═══ Besuch ═══ */
.besuch { padding: clamp(90px, 11vw, 150px) 0 clamp(70px, 9vw, 120px); background: var(--porcellana); }
.besuch-raster { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start; }
.besuch-text .titel-gross { margin: 10px 0 26px; }
.adresse { font: 400 clamp(24px, 2.2vw, 32px)/1.3 var(--f-titel); }
.besuch-handeln { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 34px; }
.wege { display: grid; gap: 14px; }
.wege li { display: flex; gap: 14px; align-items: center; }
.wege strong { display: block; font-weight: 600; }
.wege li > span:last-child { font-size: 15px; line-height: 1.35; }
.weg-zeichen { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font: 700 16px/1 var(--f-text); color: #fff; }
.weg-zeichen--s { background: #2b8a3e; border-radius: 50%; }
.weg-zeichen--t { background: #d6322f; }
.weg-zeichen--p { background: #2559a7; }
.besuch-zeiten { position: relative; background: var(--nero); color: var(--bianco); border-radius: 24px; padding: clamp(24px, 3vw, 40px); box-shadow: var(--schatten); }
.besuch-zeiten::after { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--tri-gruen) 0 33.3%, #f1efeb 33.3% 66.6%, var(--tri-rot) 66.6%); }
.besuch-zeiten .neon { position: absolute; top: clamp(18px, 2.2vw, 28px); right: clamp(20px, 2.6vw, 36px); transform: rotate(-4deg); }
.zeiten-titel { font: 400 32px/1 var(--f-titel); color: var(--oro-hell); }
.zeiten-status { margin: 12px 0 14px; font-size: 14px; }
.zeiten { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.zeiten th, .zeiten td { padding: 11px 0; border-bottom: 1px solid rgba(246,245,242,.1); text-align: left; font-weight: 400; }
.zeiten td { text-align: right; }
.zeiten tr[data-tag="0"] td { opacity: .55; }
.zeiten tr.is-heute th, .zeiten tr.is-heute td { font-weight: 700; opacity: 1; }
.zeiten tr.is-heute th::after { content: "heute"; font: 600 11px/1 var(--f-text); letter-spacing: .06em; margin-left: 10px; padding: 4px 8px; border-radius: 999px; background: var(--rosso); color: #fff; vertical-align: 2px; }
.besuch-zeiten .klein { margin-top: 14px; }
.merkmale { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.merkmale li { font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(212,170,82,.35); color: var(--oro-hell); }
.besuch-unten { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 5vw, 80px); margin-top: clamp(60px, 8vw, 110px); align-items: center; }
.postkarte { position: relative; background: #fbfaf8; outline: 1px solid rgba(15,13,12,.06); padding: 14px 14px 56px; box-shadow: 0 30px 50px -24px rgba(15,10,6,.45), 0 2px 4px rgba(15,10,6,.08); transform: rotate(-2.2deg); transition: transform .7s var(--ease-out); }
.postkarte:hover { transform: rotate(0deg) scale(1.01); }
.js .postkarte[data-auf].is-da { transform: rotate(-2.2deg); }
.js .postkarte[data-auf].is-da:hover { transform: rotate(0) scale(1.01); }
.postkarte img { width: 100%; height: auto; aspect-ratio: 1430 / 960; object-fit: cover; }
.postkarte figcaption { position: absolute; left: 22px; bottom: 12px; font: 700 30px/1 var(--f-hand); color: var(--tinte); }
.stempel { position: absolute; right: -18px; bottom: 14px; width: 120px; height: 120px; color: var(--rosso); opacity: .82; transform: rotate(-14deg); mix-blend-mode: multiply; }
.stempel circle { fill: none; stroke: currentColor; stroke-width: 2; }
.stempel circle + circle { stroke-width: 1.2; stroke-dasharray: 3 3; }
.stempel text { font: 700 10.5px var(--f-text); letter-spacing: .16em; fill: currentColor; }
.stempel .stempel-mitte { font: italic 600 26px var(--f-display); letter-spacing: 0; }
.karte-ort-feld { position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden; background: var(--marmo); color: var(--tinte); display: grid; }
.karte-ort-skizze { position: absolute; inset: 0; width: 100%; height: 100%; }
.karte-ort-pin circle:first-child { animation: pin 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pin { 0% { transform: scale(.3); opacity: .5; } 100% { transform: scale(1.6); opacity: 0; } }
.karte-ort-pin circle:last-child { fill: var(--rosso); }
.karte-ort-label { font: italic 600 20px var(--f-display); fill: currentColor; }
.karte-ort-strasse { font: 600 11px var(--f-text); letter-spacing: .2em; text-transform: uppercase; fill: currentColor; opacity: .5; }
.karte-ort-text { position: relative; align-self: end; padding: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; background: linear-gradient(transparent, rgba(238,237,234,.96) 40%); }
.karte-ort-text .klein { max-width: 30ch; }
.karte-ort-feld iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ═══ Fuß ═══ */
.fuss { background: var(--nero); color: var(--bianco); padding: clamp(90px, 10vw, 140px) 0 calc(28px + env(safe-area-inset-bottom)); position: relative; overflow: hidden; }
.fuss::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 50% 26%, rgba(212,170,82,.14), transparent 70%); pointer-events: none; }
.fuss-schild { position: relative; display: block; margin: 0 auto clamp(56px, 7vw, 90px); max-width: 820px; }
.fuss-neon { width: 100%; height: auto; filter: drop-shadow(0 0 2px rgba(255,236,190,.8)) drop-shadow(0 0 12px rgba(240,200,110,.55)) drop-shadow(0 0 36px rgba(212,150,60,.4)); }
.fuss-schild.is-an .fuss-neon { animation: flackern 2.4s steps(1) 1; }
.fuss-spalten { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding: 36px 0; border-top: 1px solid rgba(212,170,82,.22); }
.fuss-spalten h3 { font: 700 12px/1 var(--f-text); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); margin-bottom: 12px; }
.fuss-spalten p { font-size: 15px; line-height: 1.7; }
.fuss-spalten a { text-decoration: none; background: linear-gradient(var(--rosso), var(--rosso)) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease-out); }
.fuss-spalten a:hover { background-size: 100% 1px; }
.fuss-base { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 22px; border-top: 1px solid rgba(246,245,242,.1); font-size: 13px; opacity: .85; flex-wrap: wrap; }
.fuss-base .hand { color: var(--oro-hell); }

/* ═══ Auftritt beim Scrollen ═══ */
.js [data-auf] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.js [data-auf].is-da { opacity: 1; transform: none; }
.js .hand[data-auf] { transform: translateY(26px) rotate(-2deg); }
.js .hand[data-auf].is-da { transform: rotate(-2deg); }
.js .intro-ort, .js .intro-titel, .js .intro-handeln, .js .farbwahl, .js .gericht, .js .waehler-zeile { animation: rein 1s var(--ease-out) both; }
.js .intro-titel { animation-delay: 2.3s; }
.js .intro-handeln { animation-delay: 2.5s; }
.js .farbwahl { animation-delay: 2.7s; }
.js .gericht { animation-delay: .5s; }
.js .waehler-zeile { animation-delay: .7s; }
.js .teller { animation: hereinrollen 1.4s .15s var(--ease-out) both; }
.js .kranz { animation: einblenden 1.6s .2s ease both; }
@keyframes rein { from { opacity: 0; transform: translateY(22px); } }
@keyframes hereinrollen { from { opacity: 0; transform: rotate(-110deg) scale(.82) translateX(10%); } }
@keyframes einblenden { from { opacity: 0; } }

/* ═══ Unterseiten ═══ */
.unterseite { background: var(--porcellana); }
.unterseite .kopf { position: sticky; background: var(--nero); color: var(--bianco); }
.marke-wort { font: italic 400 34px/1 var(--f-buehne); color: var(--oro-hell); text-decoration: none; }
.recht { padding: clamp(50px, 7vw, 100px) 0 100px; }
.recht .wrap { max-width: 820px; }
.recht h1 { font: italic 500 clamp(44px, 6vw, 72px)/1 var(--f-display); margin-bottom: 28px; }
.recht h2 { font: 500 26px/1.2 var(--f-display); margin: 38px 0 10px; }
.recht p { margin-bottom: 12px; }
.recht a { color: var(--rosso); }
.todo { background: #fff2a8; padding: 1px 5px; border-radius: 3px; }

/* ═══ Breakpoints ═══ */
@media (max-width: 1180px) {
  .kopf-status { display: none; }
}
@media (max-width: 900px) {
  :root { --kopf-h: 64px; }
  body { font-size: 16px; }
  .kopf-nav, .kopf-anruf { display: none; }
  .kopf-menu { display: block; }
  .marke-schild { width: 108px; }
  .buehne { padding-top: calc(var(--kopf-h) + 14px); }
  .buehne-raster { grid-template-columns: 1fr; grid-template-areas: "ort" "marke" "titel" "tafel" "gericht" "waehler" "rest"; grid-template-rows: none; text-align: center; }
  .intro { display: contents; }
  .intro-ort { grid-area: ort; justify-self: center; margin-bottom: 10px; }
  .intro-marke { grid-area: marke; justify-self: center; margin-bottom: 12px; }
  .schild-buehne { width: min(84vw, 380px); margin: 0 auto; }
  .intro-titel { grid-area: titel; font-size: clamp(28px, 8vw, 40px); margin-inline: auto; }
  .intro-handeln { grid-area: rest; justify-content: center; margin-top: 34px; }
  .tafel { max-width: 460px; width: 92%; margin-top: 44px; }
  .tafel-pfeil { width: 42px; height: 42px; margin-top: -21px; top: 50%; left: -4%; }
  .tafel-pfeil:not(.tafel-pfeil--zurueck) { right: -4%; }
  .neon--haengend { top: -4%; left: -3%; }
  .neon--haengend .neon-tafel { font-size: 30px; padding: 8px 14px 10px; }
  .neon-kette { top: -22px; height: 26px; }
  .gericht { border-top: 0; margin: 4px auto 0; padding-top: 6px; min-height: 0; }
  .gericht-kopf { justify-content: center; }
  .gericht-satz { margin-inline: auto; }
  .gericht-handeln { justify-content: center; }
  .waehler-zeile { margin-top: 52px; width: 100%; }
  .hinweis-hand { right: 50%; transform: translateX(50%) rotate(-3deg); top: -30px; font-size: 20px; }
  .hinweis-hand.is-weg { transform: translateX(50%) rotate(-3deg) translateY(-8px); }
  .stueck-zettel { display: none; }
  .drei { grid-template-columns: 1fr; }
  .bogen { display: none; }
  .speisen { columns: 1; }
  .rand-pizza { display: none; }
  .karte-hinweise { justify-items: center; text-align: center; }
  .google { display: grid; justify-items: center; }
  .besuch-raster, .besuch-unten { grid-template-columns: 1fr; }
  .besuch-zeiten .neon { position: static; display: block; margin-bottom: 14px; }
  .fuss-spalten { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .waehler-tab { font-size: 11px; padding-inline: 2px; flex: 1; min-width: 0; }
  .waehler { gap: 2px; }
  .waehler-tab img { width: 54px; }
  .karte-ort-text { flex-direction: column; align-items: flex-start; }
  .stempel { width: 92px; height: 92px; right: -6px; }
  .reiter-tab { padding: 10px 14px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .band-spur, .buehne-fell::before { animation: none !important; }
}

/* Vorschau-Fläche beim Pizzawechsel (Farbe der kommenden Pizza) */

/* Hauspizza hervorgehoben */
.speise--haus h3 { color: var(--oro-hell); }
.haus { font: 600 11px/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; color: var(--nero); background: var(--oro); padding: 4px 8px; border-radius: 999px; vertical-align: 5px; margin-left: 8px; }

/* Getränkekarte */
.trink-raster { columns: 3 260px; column-gap: clamp(36px, 5vw, 80px); }
.trink-gruppe { break-inside: avoid; margin-bottom: 34px; }
.trink-gruppe .karte-gruppe { margin: 0 0 10px; }
.trinken li { display: grid; grid-template-columns: 1fr auto 4.2em; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed rgba(246,245,242,.12); }
.trinken span { font: 400 19px/1.25 var(--f-titel); }
.trinken small { font-size: 13px; opacity: .55; white-space: nowrap; }
.trinken b { font: 500 18px/1 var(--f-display); color: var(--oro-hell); text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.karte-teil--bar ~ .karte-leer { display: none; }

.buehne-feld-neu[data-farbe-vorschau="nero"]   { background: radial-gradient(80% 70% at 72% 40%, #121110 0%, #050505 45%, #000 100%); }
.buehne-feld-neu[data-farbe-vorschau="rosso"]  { background: radial-gradient(85% 70% at 72% 38%, #ff3a1f 0%, #e00a00 30%, #c40000 55%, #8c0000 85%, #5e0000 100%); }
.buehne-feld-neu[data-farbe-vorschau="giallo"] { background: radial-gradient(85% 70% at 72% 38%, #fff27a 0%, #ffe01a 28%, #ffcc00 55%, #f5a800 88%, #e59200 100%); }
.buehne-feld-neu[data-farbe-vorschau="verde"]  { background: radial-gradient(85% 70% at 72% 38%, #5dff9e 0%, #14e06a 28%, #00c457 52%, #009141 84%, #006b30 100%); }
/* Kuhfell: Vorschau und fertige Fläche sind identisch aufgebaut, dadurch springt nichts */
.buehne-feld-neu.is-fell, .buehne-fell { background: var(--fell-schleier), url("../img/kuhfell.webp") 0 0 / 640px 640px, #000; }
:root { --fell-schleier: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0) 14%), linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.78) 34%, rgba(0,0,0,.08) 56%, rgba(0,0,0,0) 100%), linear-gradient(to top, rgba(0,0,0,.8), transparent 30%); }

/* ═══ Aperitivo-Band mit dem Regal ═══ */
.aperitivo { position: relative; background: transparent; overflow: hidden; min-height: clamp(380px, 46vw, 620px); display: grid; align-items: center; color: #fff; isolation: isolate; }
.aperitivo-inhalt { display: grid; gap: 26px; justify-items: start; padding-block: 60px; }
.neon--aperitivo { font-size: clamp(64px, 8vw, 128px); transform: rotate(-4deg); }
.neon--aperitivo span { color: #fff1e0; text-shadow: 0 0 2px #fff, 0 0 10px #ffa45c, 0 0 24px var(--aperol), 0 0 50px #ff4800, 0 0 90px rgba(255,90,0,.7); }
.neon--aperitivo.is-an span { animation: flackern 2.4s steps(1) 1, summen 3.4s 2.4s ease-in-out infinite; }
.aperitivo-liste { min-width: min(380px, 100%); }
.aperitivo-liste li { display: flex; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.aperitivo-liste span { font: 400 22px/1.2 var(--f-titel); }
.aperitivo-liste b { font: 400 21px/1.2 var(--f-titel); color: var(--oro-hell); font-variant-numeric: lining-nums; }

/* ═══ Karten-Vorschau ═══ */
.vorschau { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(36px, 6vw, 96px); padding-top: 10px; }
.speisen--eins { columns: 1; margin-bottom: 30px; }
.vorschau .karte-gruppe { margin-bottom: 6px; }
.vorschau-fuss { display: flex; align-items: center; gap: 24px 36px; flex-wrap: wrap; margin-top: clamp(30px, 4vw, 50px); padding-top: 30px; border-top: 1px solid rgba(212,170,82,.3); }
.pille--gross { min-height: 56px; padding: 0 28px; font-size: 16px; }

/* ═══ Eigene Seite: Speisekarte ═══ */
.seite-karte .kopf { position: sticky; }
.seite-karte .kopf .marke { opacity: 1; transform: none; pointer-events: auto; }
.karte--seite { padding-top: clamp(40px, 5vw, 70px); }
.zurueck-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--oro-hell); }
.zurueck-link .ico { transform: scaleX(-1); }
.karte-hinweis--seite { margin-top: 40px; }
.karte-hinweis--seite a { color: var(--oro-hell); }

@media (max-width: 900px) {
  .vorschau { grid-template-columns: 1fr; }
}

/* Maske ganz oben rechts in der Ecke, unter der Markise */
.maske { position: absolute; top: 34px; right: -2.5%; z-index: 4; width: clamp(150px, 17vw, 250px); height: auto; transform-origin: 70% 0; transform: rotate(14deg); filter: drop-shadow(0 22px 22px rgba(0,0,0,.65)) drop-shadow(0 0 26px rgba(212,170,82,.16)); cursor: pointer; transition: transform .6s var(--ease-out); }
.maske:hover { transform: rotate(8deg); }
.maske.is-klingelt { animation: maske-klingeln 1s ease-in-out; }
@keyframes maske-klingeln { 0% { transform: rotate(14deg); } 15% { transform: rotate(4deg); } 30% { transform: rotate(20deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(17deg); } 80% { transform: rotate(12deg); } 100% { transform: rotate(14deg); } }
/* Aperitivo: ganzes Regalfoto, nicht so nah */
/* Dezente Textlinks */
.leise-link { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--f-text); letter-spacing: .04em; color: var(--oro-hell); text-decoration: none; padding-bottom: 5px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: gap .3s var(--ease-out), opacity .3s; opacity: .9; }
.leise-link:hover { gap: 12px; opacity: 1; }
.leise-link .ico { width: 1em; height: 1em; }
.vorschau-fuss { gap: 14px 28px; }
@media (max-width: 900px) {
  .haus-raster { grid-template-columns: 1fr; }
  .maske { width: 120px; top: 30px; right: -4%; }
  }

/* ═══ Caffè · Pizza · Bar · Drinnen ═══ */
.salone { position: relative; overflow: hidden; color: var(--tinte); padding: clamp(140px, 13vw, 190px) 0 clamp(90px, 10vw, 140px); background: var(--porcellana); }
.salone .hand { color: var(--rosso); }
.salone .titel-gross em { color: var(--rosso); }
.salone .maske { position: absolute; top: 70px; right: -3%; z-index: 4; width: clamp(150px, 22vw, 340px); transform: rotate(12deg); filter: drop-shadow(0 20px 18px rgba(60,20,0,.3)); }
.salone-kopf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: end; padding-right: clamp(0px, 14vw, 240px); }
.salone-kopf .titel-gross { max-width: 14ch; }
.salone-intro { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: #3a332e; max-width: 36ch; padding-bottom: 8px; }
/* Zwei Fotos im vollen Format nebeneinander */
.duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); max-width: 1100px; margin: clamp(50px, 6vw, 90px) auto 0; padding-bottom: 22px; }
.duo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--rosso) 0 26px, #fff 26px 52px); box-shadow: 0 0 0 1px rgba(212,0,0,.45); }
.duo-bild { position: relative; margin: 0 0 30px; }
.duo-bild img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.duo-bild figcaption { position: absolute; left: 0; bottom: -30px; display: flex; gap: 12px; align-items: baseline; font: 600 13px/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: #6b625b; }
.duo-bild figcaption span { color: var(--rosso); }
.duo-bild + .duo-bild figcaption { left: auto; right: 0; flex-direction: row-reverse; }
@keyframes pizza-drehen { to { transform: rotate(360deg); } }
/* Drei Worte: ruhige Spalten */
.drei-worte { list-style: none; padding: 0; margin: clamp(80px, 9vw, 130px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.drei-worte li { padding: 6px clamp(18px, 3vw, 44px) 0; border-left: 1px solid rgba(15,13,12,.14); }
.drei-worte li:first-child { padding-left: 0; border-left: 0; }
.drei-worte span { font: 600 12px/1 var(--f-text); letter-spacing: .14em; color: var(--rosso); }
.drei-worte h3 { font: 400 clamp(38px, 3.6vw, 56px)/1.05 var(--f-titel); margin: 12px 0 12px; }
.drei-worte li:nth-child(2) h3 { color: var(--rosso); }
.drei-worte p { font-size: 16px; line-height: 1.6; color: #4a423c; max-width: 32ch; }
@media (max-width: 1024px) {
  .salone-kopf { grid-template-columns: 1fr; gap: 22px; padding-right: 26%; }
  .salone .maske { width: clamp(140px, 24vw, 240px); top: 60px; }
}
@media (max-width: 640px) {
  .salone-kopf { padding-right: 0; }
  .salone-kopf .titel-gross { padding-right: 90px; }
  .salone .maske { width: 120px; top: 50px; right: -4%; }
  .duo { gap: 10px; }
  .duo-bild figcaption { font-size: 11px; letter-spacing: .1em; }
  
  .drei-worte { grid-template-columns: 1fr; margin-top: 70px; }
  .drei-worte li, .drei-worte li:first-child { padding: 24px 0; border-left: 0; border-top: 1px solid rgba(15,13,12,.14); }
}

/* ═══ Dalla cucina: drei Teller aus der Karte, darunter die Galleria ═══ */
.cucina { position: relative; color: var(--tinte); padding: clamp(20px, 3vw, 40px) 0 clamp(100px, 11vw, 150px); background: var(--porcellana); }
.cucina .hand { color: var(--rosso); }
.cucina .titel-gross em { color: var(--rosso); }
.cucina-kopf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px clamp(30px, 5vw, 90px); align-items: end; padding-top: clamp(60px, 7vw, 100px); border-top: 1px solid rgba(15,13,12,.14); }
.cucina-kopf .hand, .cucina-kopf .titel-gross { grid-column: 1; }
.cucina-kopf .titel-gross { max-width: 13ch; }
.cucina-intro { grid-column: 2; grid-row: 1 / span 2; align-self: end; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; color: #3a332e; max-width: 36ch; padding-bottom: 8px; }

/* Grün für die Küche: vom Porzellanweiß über Salbei und Basilikum ins Dunkel der Weinwand */
.cucina { overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--porcellana) 0, #e4ebde 9%, #9fb39a 19%, #3d5a42 30%, #1a2a1d 42%, #0e140f 62%, #070605 100%); }
.cucina > .wrap { position: relative; z-index: 1; }
.cucina .cucina-kopf { border-top: 0; }
.cucina .galleria-titel { color: #fff; }
.cucina .galleria-titel::after { background: rgba(255,255,255,.16); }
.cucina .galleria-titel span, .cucina .kueche-foto figcaption span { color: var(--oro-hell); }
.cucina .kueche-foto figcaption { color: rgba(255,255,255,.75); }
.cucina-deko { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.kraut { position: absolute; width: 200px; height: 330px; overflow: visible; color: var(--oro); opacity: .35; }
.kraut--1 { top: 30px; right: -30px; width: 280px; height: 460px; transform: rotate(24deg); color: #2f6b3a; opacity: .4; }
.kraut--2 { top: 50%; left: -60px; width: 240px; height: 400px; transform: rotate(-30deg); }
.kraut--3 { bottom: -40px; right: 10%; transform: rotate(170deg); }
@media (max-width: 640px) {
  .kraut { opacity: .22; }
  .kraut--1 { top: 10px; right: -70px; width: 170px; height: 280px; opacity: .25; }
  .kraut--2 { left: -80px; width: 170px; height: 280px; }
  .kraut--3 { right: -20px; width: 140px; height: 230px; }
}
/* Tellerkarten: Foto, Preis, Schild – ein Tipp führt zum Gericht in der Karte */
.teller-reihe { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.78fr); align-items: stretch; gap: clamp(14px, 2vw, 26px); margin: clamp(50px, 6vw, 90px) 0 0; }
.teller-reihe > li { display: flex; }
.teller-karte { position: relative; flex: 1; display: flex; flex-direction: column; color: var(--tinte); text-decoration: none; }
.teller-foto { position: relative; display: block; overflow: hidden; border-radius: 6px; background: #1a1512; box-shadow: 0 24px 50px -30px rgba(40,14,0,.55); }
.teller-foto img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease-out); }
.teller-preis { position: absolute; top: clamp(12px, 1.4vw, 18px); right: clamp(12px, 1.4vw, 18px); padding: .5em 1.05em .45em; border-radius: 999px; background: var(--oro); color: var(--nero); font: 700 clamp(16px, 1.45vw, 21px)/1 var(--f-text); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; transform: rotate(-4deg); box-shadow: 0 10px 22px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .45s var(--ease-out); }
.teller-schild { position: relative; z-index: 1; display: block; flex: 1; margin: -38px clamp(10px, 1.2vw, 16px) 0; padding: clamp(14px, 1.5vw, 20px) clamp(14px, 1.6vw, 22px) clamp(12px, 1.3vw, 18px); border-radius: 4px; background: #fff; box-shadow: 0 16px 30px -18px rgba(0,0,0,.45), 0 0 0 1px rgba(15,13,12,.06); transition: transform .45s var(--ease-out); }
.teller-schild::before { content: ""; position: absolute; left: clamp(14px, 1.6vw, 22px); top: 0; width: 42px; height: 3px; background: linear-gradient(90deg, var(--tri-gruen) 0 33.3%, #fff 33.3% 66.6%, var(--tri-rot) 66.6%); box-shadow: 0 0 0 .5px rgba(0,0,0,.08); }
.teller-schild small { display: block; font: 600 11px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--rosso); }
.teller-schild strong { display: block; margin-top: 8px; font: 400 clamp(23px, 2.2vw, 32px)/1.05 var(--f-titel); color: var(--nero); }
.teller-text { display: block; margin-top: 6px; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.4; color: #4a423c; }
.teller-fuss { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.teller-text, .teller-fuss { padding-right: 44px; }
.teller-veg { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border: 1.5px solid var(--tri-gruen); border-radius: 4px; font: 600 13px/1 var(--f-text); color: var(--tri-gruen); }
.teller-veg svg { width: 14px; height: 14px; }
.teller-pfeil { position: absolute; right: clamp(12px, 1.4vw, 18px); bottom: clamp(12px, 1.3vw, 16px); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rosso); color: #fff; transition: transform .35s var(--ease-out); }
.teller-pfeil .ico { width: 18px; height: 18px; }
.teller-karte:hover img, .teller-karte:focus-visible img { transform: scale(1.05); }
.teller-karte:hover .teller-schild, .teller-karte:focus-visible .teller-schild { transform: translateY(-4px); }
.teller-karte:hover .teller-preis, .teller-karte:focus-visible .teller-preis { transform: rotate(2deg) scale(1.05); }
.teller-karte:hover .teller-pfeil, .teller-karte:focus-visible .teller-pfeil { transform: translateX(3px); }
.teller-karte:focus-visible { outline: 3px solid var(--rosso); outline-offset: 4px; }

/* Galleria: die übrigen Fotos, versetzt, mit Großansicht */
.galleria { margin-top: clamp(80px, 9vw, 130px); }
.galleria-titel { display: flex; align-items: baseline; gap: 16px; font: 400 clamp(28px, 2.6vw, 38px)/1.1 var(--f-titel); }
.galleria-titel span { font: 600 12px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: var(--rosso); }
.galleria-titel::after { content: ""; flex: 1; height: 1px; background: rgba(15,13,12,.14); align-self: center; }
.kueche-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3vw, 44px) clamp(14px, 2vw, 26px); margin: clamp(36px, 4vw, 56px) 0 0; padding-bottom: clamp(30px, 4vw, 60px); }
.kueche-foto { position: relative; margin: 0; min-width: 0; }
.kueche-foto:nth-child(3n+2) { top: clamp(30px, 4vw, 60px); }
.kueche-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.kueche-foto .duo-oeffnen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rosso); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.kueche-foto .duo-oeffnen:hover::after, .kueche-foto .duo-oeffnen:focus-visible::after { transform: scaleX(1); }
.kueche-foto figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 12px; font: 600 13px/1.3 var(--f-text); letter-spacing: .14em; text-transform: uppercase; color: #6b625b; }
.kueche-foto figcaption span { color: var(--rosso); min-width: 2.2em; }
@media (max-width: 1024px) {
  .cucina-kopf { grid-template-columns: 1fr; padding-right: 10%; }
  .cucina-intro { grid-column: 1; grid-row: auto; }
  .teller-schild strong { font-size: 22px; }
  .teller-text { font-size: 14px; }
  .teller-veg { font-size: 12px; padding: 4px 8px 4px 6px; }
  .teller-pfeil { width: 30px; height: 30px; }
  .teller-fuss { margin-top: 10px; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .teller-reihe { grid-template-columns: 1fr 1fr; }
  .teller-reihe li:nth-child(3) { grid-column: 1 / -1; }
  .teller-reihe li:nth-child(3) .teller-karte { flex-direction: row; align-items: center; }
  .teller-reihe li:nth-child(3) .teller-foto { flex: 0 0 64%; }
  .teller-reihe li:nth-child(3) .teller-schild { flex: 1; margin: 0 0 0 -44px; }
  .teller-schild strong { font-size: 26px; }
  .teller-text { font-size: 15px; }
}
@media (max-width: 640px) {
  .cucina-kopf { padding-right: 0; }
  .teller-reihe { grid-template-columns: 1fr; gap: 16px; }
  .teller-preis { font-size: 19px; top: 14px; right: 14px; }
  .teller-schild { margin: -34px 12px 0; padding: 18px 18px 14px; }
  .teller-schild::before { left: 18px; }
  .teller-schild strong { font-size: 28px; }
  .teller-text { font-size: 15px; }
  .teller-pfeil { width: 34px; height: 34px; }
  .galleria-titel span { display: none; }
  .kueche-raster { grid-template-columns: 1fr 1fr; gap: 22px 10px; padding-bottom: 28px; }
  .kueche-foto:nth-child(3n+2) { top: 0; }
  .kueche-foto:nth-child(even) { top: 28px; }
  .kueche-foto figcaption { gap: 8px; margin-top: 8px; font-size: 11px; letter-spacing: .08em; }
  .kueche-foto figcaption span { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .teller-karte img, .teller-schild, .teller-preis, .teller-pfeil { transition: none; } }

/* ═══ Gäste: Schwarz mit Italien-Akzenten, einreihiger Flow ═══ */
.gaeste { position: relative; overflow: hidden; isolation: isolate; padding: clamp(100px, 11vw, 160px) 0 clamp(90px, 10vw, 140px); color: #fff; background: radial-gradient(70% 60% at 50% 20%, #1c1714, #000 70%); }
.gaeste-tricolore { position: absolute; left: 0; right: 0; top: 0; height: 6px; display: flex; }
.gaeste-tricolore i { flex: 1; }
.gaeste-tricolore i:nth-child(1) { background: var(--tri-gruen); }
.gaeste-tricolore i:nth-child(2) { background: #f4f3f0; }
.gaeste-tricolore i:nth-child(3) { background: var(--tri-rot); }
.gaeste-kopf { text-align: center; display: grid; justify-items: center; }
.gaeste .hand { color: var(--oro-hell); transform-origin: center; }
.gaeste-wert { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); margin-top: 6px; text-align: left; }
.riesen-zahl { font: 400 clamp(110px, 14vw, 210px)/.82 var(--f-titel); letter-spacing: -.04em; background: linear-gradient(170deg, #fff6d6 10%, #f0d68e 45%, #c99a40 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 14px 22px rgba(0,0,0,.6)); }
.google-sterne { font-size: 26px; letter-spacing: 6px; line-height: 1; }
.google-sterne span { display: inline-block; --pz: calc(var(--wert) / 5 * 100%); background: linear-gradient(90deg, var(--oro-hell) var(--pz), rgba(255,255,255,.25) var(--pz)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.google-sterne span::before { content: "★★★★★"; }
.gaeste-quelle { margin: 12px 0 16px; font-size: 13.5px; line-height: 1.55; opacity: .85; }
.gaeste .leise-link { color: var(--oro-hell); }
.flow { display: grid; margin-top: clamp(50px, 6vw, 80px); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.flow-reihe { overflow: hidden; }
.flow-spur { display: flex; gap: 22px; width: max-content; animation: flow-links 70s linear infinite; }
.flow-reihe--rechts .flow-spur { animation-name: flow-rechts; animation-duration: 80s; }
.flow:hover .flow-spur { animation-play-state: paused; }
@keyframes flow-links { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 11px)); } }
@keyframes flow-rechts { from { transform: translateX(calc(-50% - 11px)); } to { transform: translateX(0); } }
.zitat { position: relative; flex: none; width: clamp(290px, 30vw, 420px); margin: 0; padding: 30px 30px 26px; background: #141110; color: #fff; border: 1px solid rgba(212,170,82,.35); border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; }
.zitat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--tri-gruen) 0 33.3%, #f4f3f0 33.3% 66.6%, var(--tri-rot) 66.6%); }
.zitat-sterne { color: var(--oro-hell); letter-spacing: 3px; font-size: 15px; }
.zitat blockquote { margin: 12px 0 18px; flex: 1; }
.zitat blockquote p { font: 400 clamp(17px, 1.25vw, 19.5px)/1.48 var(--f-titel); }
.zitat figcaption { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: rgba(246,245,242,.6); }
.zitat figcaption b { display: block; font-size: 14.5px; color: #fff; }
.zitat-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--rosso); color: #fff; font: 700 15px/1 var(--f-text); flex: none; }
@media (max-width: 700px) {
  .gaeste-wert { flex-direction: column; text-align: center; gap: 8px; }
  .zitat { width: 80vw; }
  .flow { -webkit-mask: none; mask: none; }
}
@media (prefers-reduced-motion: reduce) { .flow-spur { animation: none; } .flow-reihe { overflow-x: auto; } }

/* ═══ Weinwand: ein durchgehender Hintergrund für Aperitivo und Karten-Vorschau ═══ */
.weinwand { position: relative; isolation: isolate; overflow: hidden; background: #070605; }
.weinwand-bild { position: absolute; inset: 0; z-index: -2; background: url("../img/regal-voll-1300.webp") 72% 30% / cover no-repeat; }
.weinwand::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7,6,5,.86) 0%, rgba(7,6,5,.6) 40%, rgba(7,6,5,.25) 70%, rgba(7,6,5,.15) 100%),
              linear-gradient(to bottom, rgba(7,6,5,0) 0%, rgba(7,6,5,.2) 40%, rgba(7,6,5,.55) 65%, rgba(7,6,5,.7) 100%); }
@media (max-width: 900px) {
  .weinwand::before { background: linear-gradient(to bottom, rgba(7,6,5,.35), rgba(7,6,5,.7) 35%, rgba(7,6,5,.8)); }
}

/* Goldener Lorbeerkranz um die 4,6 */
.zahl-kranz { position: relative; display: grid; place-items: center; width: clamp(220px, 24vw, 340px); aspect-ratio: 1; }
.kranz-lorbeer { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.kranz-lorbeer path { fill: none; stroke: #c99a40; stroke-width: 1.8; }
.zahl-kranz .riesen-zahl { font-size: clamp(76px, 8.4vw, 124px); margin-top: -6%; }
@media (max-width: 700px) { .zahl-kranz { width: 220px; } .zahl-kranz .riesen-zahl { font-size: 78px; } }

/* Kartenseite: Weinwand ruhiger, damit die lange Liste gut lesbar bleibt */
.seite-karte .weinwand::before { background: linear-gradient(to bottom, rgba(7,6,5,.55), rgba(7,6,5,.86) 30%, rgba(7,6,5,.92)); }
.seite-karte .weinwand-bild { background-attachment: fixed; }

/* Fotos anklickbar + Leuchtkasten */
.duo-oeffnen { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.duo-oeffnen img { transition: transform 1.2s var(--ease-out); }
.duo-oeffnen:hover img { transform: scale(1.04); }
.leuchtkasten { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8,6,5,.97); color: #fff; }
.leuchtkasten[open] { display: grid; place-items: center; animation: lk-auf .3s ease; }
.leuchtkasten::backdrop { background: transparent; }
@keyframes lk-auf { from { opacity: 0; } }
.leuchtkasten img { max-width: min(92vw, 1000px); max-height: 82vh; width: auto; height: auto; box-shadow: 0 30px 80px -20px #000; }
.lk-titel { position: absolute; left: 0; right: 0; bottom: 3vh; text-align: center; font: 600 13px/1 var(--f-text); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.lk-knopf { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.4); color: #fff; font: 300 32px/1 var(--f-text); display: grid; place-items: center; cursor: pointer; }
.lk-knopf:hover { background: var(--rosso); border-color: var(--rosso); }
.lk-zu { top: 20px; right: 20px; }
.lk-zurueck { left: 20px; top: 50%; margin-top: -26px; }
.lk-weiter { right: 20px; top: 50%; margin-top: -26px; }
@media (max-width: 640px) { .lk-zurueck, .lk-weiter { top: auto; bottom: 7vh; margin: 0; } }