:root {
  --tuch: #f5f1e8;        /* Grund: Tischtuch */
  --tuch-2: #ebe5d7;      /* zweite Fläche */
  --tinte: #1f2621;       /* Text */
  --gruen: #2e6b4b;       /* Grün aus dem Logo: Name und Kontakt */
  --gruen-tief: #275b40;
  --rot: #cf4a2f;         /* roter Schwung aus dem Logo: Knöpfe und Striche */
  --rot-tief: #b43d24;
  --creme: #f5efe2;
  --d-2: rgba(31, 38, 33, .7);
  --d-3: rgba(31, 38, 33, .5);
  --h-2: rgba(245, 239, 226, .74);
  --h-3: rgba(245, 239, 226, .52);
  --linie: rgba(31, 38, 33, .14);
  --linie-hell: rgba(245, 239, 226, .2);
  --serif: "Young Serif", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
  --rand: 20px;
  --luft: 72px;
  --kopf: 64px;
}
@media (min-width: 900px) {
  :root { --rand: 40px; --luft: 120px; --kopf: 72px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--kopf); }
body {
  margin: 0;
  background: var(--tuch);
  color: var(--tinte);
  font: 400 17px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }

.rahmen { max-width: 1200px; margin: 0 auto; padding: 0 var(--rand); }

/* Kopf */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 10; height: var(--kopf);
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 max(var(--rand), calc((100vw - 1200px) / 2 + var(--rand)));
  background: var(--tuch);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease-out;
}
.kopf.voll { border-bottom-color: var(--linie); }
.kopf-name { display: inline-flex; align-items: center; min-height: 40px; font: 400 18px/1 var(--serif); text-decoration: none; letter-spacing: -.01em; color: var(--gruen); }
.kopf-nav { display: flex; gap: 24px; }
.kopf-nav a { display: inline-flex; align-items: center; min-height: 40px; font-size: 15px; text-decoration: none; color: var(--d-2); transition: color .15s ease-out; }
.kopf-nav a:hover { color: var(--tinte); }
@media (max-width: 520px) { .kopf-nav a:last-child { display: none; } }

/* Einstieg */
.hero { padding-top: var(--kopf); }
.hero-bild { margin: 0; height: 40svh; overflow: hidden; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero-text { padding: 24px var(--rand) 40px; }
.hero-art { font-size: 15px; color: var(--d-2); }

.titel-block { position: relative; display: inline-block; margin-top: 8px; }
.hero-titel {
  position: relative;
  font: 400 clamp(88px, 27vw, 132px)/.92 var(--serif);
  letter-spacing: -.035em;
  margin-left: -.04em;
  color: var(--gruen);
}
.bogen {
  position: absolute; z-index: 0; pointer-events: none;
  left: 14%; top: -12%; width: 92%; height: 104%;
  overflow: visible;
}
.bogen path { fill: none; stroke: var(--rot); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.zeile { display: block; overflow: hidden; padding-bottom: .06em; }
.zeile > span { display: block; }

.adresse { margin-top: 16px; }
.adresse-neu { font: 400 22px/1.25 var(--serif); letter-spacing: -.01em; }
.adresse-alt { margin-top: 8px; font: 400 14px/1.4 var(--mono); color: var(--d-3); }
.alt { position: relative; display: inline-block; }
.alt::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px;
  background: var(--rot); transform-origin: left center;
}

.hero-tun { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.status { font: 400 14px/1.3 var(--mono); color: var(--d-2); display: flex; align-items: center; gap: 8px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--d-3); }
.status.offen::before { background: var(--gruen); }
.hero-fuss { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 14px; color: var(--d-3); }

@media (min-width: 900px) {
  .hero {
    max-width: 1200px; margin: 0 auto; padding: calc(var(--kopf) + 40px) var(--rand) 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
    min-height: 100svh;
  }
  .hero-bild { grid-column: 2; grid-row: 1; height: auto; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--kopf) - 80px); width: 100%; border-radius: 4px; }
  .hero-text { grid-column: 1; grid-row: 1; padding: 0 0 40px; }
  .hero-titel { font-size: clamp(120px, 12vw, 176px); }
  .adresse-neu { font-size: 28px; }
}

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  background: var(--rot); color: #fbf4ec; border-radius: 999px;
  font: 500 16px/1 var(--sans); text-decoration: none;
  transition: background-color .15s ease-out;
}
.knopf:hover { background: var(--rot-tief); }
.link { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; text-decoration-color: currentColor; text-decoration-thickness: 1px; transition: opacity .15s ease-out; }
.link:hover { opacity: .75; }

/* Abschnitts-Titel: überall gleich */
.titel-klein { font: 400 15px/1.3 var(--sans); color: var(--d-3); margin-bottom: 16px; }

/* Küche */
.kueche { padding: var(--luft) 0; border-top: 1px solid var(--linie); }
.gross { font: 400 26px/1.25 var(--serif); letter-spacing: -.015em; max-width: 24ch; }
.kueche-text p:not(.gross) { margin-top: 24px; color: var(--d-2); max-width: 46ch; }
.kueche-gitter { display: grid; gap: 40px; }
.teller { margin: 0; }
.aufgehen { overflow: hidden; border-radius: 4px; aspect-ratio: 4 / 5; }
.aufgehen img { width: 100%; height: 100%; object-fit: cover; }
.teller figcaption { margin-top: 8px; font-size: 15px; color: var(--d-2); display: flex; justify-content: space-between; gap: 16px; }
.preis { font: 400 14px/1.5 var(--mono); color: var(--d-3); white-space: nowrap; }
@media (min-width: 640px) {
  .kueche-gitter { grid-template-columns: 1fr 1fr; }
  .kueche-text { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .kueche-gitter { grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
  .kueche-text { grid-column: auto; }
  .gross { font-size: 32px; }
}

/* Carta */
.carta { background: var(--tuch-2); padding: var(--luft) 0; }
.carta-kopf { display: grid; gap: 24px; align-items: end; }
.carta-titel {
  font: 400 clamp(96px, 30vw, 240px)/.85 var(--serif);
  letter-spacing: -.045em; margin-left: -.05em; color: var(--gruen);
}
.carta-unter { color: var(--d-2); max-width: 44ch; }
@media (min-width: 900px) { .carta-kopf { grid-template-columns: 1fr 1fr; gap: 64px; } .carta-unter { padding-bottom: 16px; } }

.reiter {
  display: flex; gap: 8px; margin: 40px calc(var(--rand) * -1) 0; padding: 8px var(--rand);
  overflow-x: auto; scrollbar-width: none;
  position: sticky; top: var(--kopf); z-index: 2; background: var(--tuch-2);
}
.reiter::-webkit-scrollbar { display: none; }
.reiter button {
  flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--linie); background: transparent; color: var(--tinte);
  font: 500 15px/1 var(--sans); cursor: pointer;
  transition: background-color .15s ease-out, color .15s ease-out, border-color .15s ease-out;
}
.reiter button:hover { border-color: var(--tinte); }
.reiter button[aria-selected="true"] { background: var(--tinte); color: var(--tuch); border-color: var(--tinte); }

.karte { margin-top: 24px; min-height: 400px; }
.gruppe + .gruppe { margin-top: 40px; }
.gruppe h3 { font: 400 14px/1.4 var(--mono); color: var(--d-3); padding-bottom: 8px; border-bottom: 1px solid var(--tinte); }
.gericht {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  padding: 16px 0; border-bottom: 1px solid var(--linie);
}
.gericht-name { font: 400 20px/1.25 var(--serif); letter-spacing: -.01em; }
.gericht-was { grid-column: 1; font-size: 15px; color: var(--d-2); max-width: 58ch; }
.gericht-preis { grid-row: 1; grid-column: 2; font: 400 15px/1.6 var(--mono); white-space: nowrap; }
.gericht.haus .gericht-name { color: var(--gruen); }
.gericht.haus .gericht-name::after {
  content: "Hauspizza"; margin-left: 8px; vertical-align: 3px;
  font: 500 12px/1 var(--sans); padding: 4px 8px; border-radius: 999px;
  background: var(--gruen); color: var(--creme);
}
@media (min-width: 900px) {
  .karte { columns: 2; column-gap: 64px; }
  .gruppe { break-inside: avoid; }
  .gruppe + .gruppe { margin-top: 0; padding-top: 40px; }
  .gericht-name { font-size: 22px; }
}
.karte-notiz { margin-top: 24px; font-size: 15px; color: var(--d-2); max-width: 60ch; }

/* Weine */
.weine { margin-top: var(--luft); padding-top: 40px; border-top: 1px solid var(--tinte); }
.weine-gitter { display: grid; gap: 24px; }
.regionen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.regionen button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 400 clamp(32px, 8.5vw, 52px)/1.15 var(--serif); letter-spacing: -.02em;
  color: var(--d-3); transition: color .15s ease-out;
}
.regionen button:hover { color: var(--tinte); }
.regionen button[aria-pressed="true"] { color: var(--gruen); }
.wein { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 16px 0; border-bottom: 1px solid var(--linie); }
.wein:first-child { border-top: 1px solid var(--linie); }
.wein-name { font: 400 18px/1.3 var(--serif); }
.wein-was { font-size: 14px; color: var(--d-2); }
.wein-preis { grid-row: 1; grid-column: 2; font: 400 14px/1.6 var(--mono); white-space: nowrap; }
@media (min-width: 900px) {
  .weine-gitter { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .regionen { flex-direction: column; }
}

/* Kontakt: grüne Fläche bis ganz unten */
.kontakt { background: var(--gruen); color: var(--creme); padding: var(--luft) 0; }
.kontakt .titel-klein { color: var(--h-3); }
.kontakt-adresse { font: 400 clamp(40px, 11.5vw, 120px)/.98 var(--serif); letter-spacing: -.035em; }
.kontakt-adresse span { display: block; white-space: nowrap; }
.kontakt-umzug { margin-top: 24px; max-width: 56ch; color: var(--h-2); }
.kontakt-tun { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.kontakt .knopf { background: var(--creme); color: var(--gruen-tief); }
.kontakt .knopf:hover { background: #fff8ec; }
.kontakt-gitter { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--linie-hell); display: grid; gap: 40px; }
.kontakt-gitter h3 { font: 400 22px/1.25 var(--serif); margin-bottom: 16px; }
.kontakt-gitter p { color: var(--h-2); max-width: 46ch; }
.kontakt-gitter p + p { margin-top: 16px; }
@media (min-width: 900px) { .kontakt-gitter { grid-template-columns: repeat(3, 1fr); gap: 64px; } }

.zeiten { width: 100%; border-collapse: collapse; font-size: 15px; }
.zeiten th, .zeiten td { text-align: left; font-weight: 400; padding: 8px 0; border-bottom: 1px solid var(--linie-hell); color: var(--h-2); }
.zeiten td { font: 400 14px/1.5 var(--mono); text-align: right; }
.zeiten tr.heute th, .zeiten tr.heute td { color: var(--creme); }
.zeiten tr.heute th::after { content: "heute"; margin-left: 8px; font-size: 12px; padding: 2px 8px; border: 1px solid var(--h-3); border-radius: 999px; }
.klein { margin-top: 16px; font-size: 14px; }
.platzhalter { font: 400 14px/1.5 var(--mono); color: var(--h-3) !important; border: 1px dashed var(--h-3); border-radius: 4px; padding: 8px 16px; }

/* Fuss: gleiche grüne Fläche, nur durch eine Linie getrennt */
.fuss { background: var(--gruen); color: var(--h-3); font-size: 14px; padding-bottom: 40px; }
.fuss-innen { border-top: 1px solid var(--linie-hell); padding-top: 40px; }
.fuss-name { font: 400 clamp(88px, 28vw, 280px)/.85 var(--serif); letter-spacing: -.045em; color: var(--creme); margin-left: -.05em; }
.fuss-zeile { margin-top: 40px; display: grid; gap: 8px; }
.fuss-zeile a { display: inline-block; padding: 8px 0; }
@media (min-width: 900px) { .fuss-zeile { display: flex; justify-content: space-between; } }

/* Bewegung */
.js .zeile > span { transform: translateY(105%); transition: transform 1000ms var(--expo) 100ms; }
.js .bereit .zeile > span { transform: none; }
.js .bogen path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--expo) 500ms; }
.js .bereit .bogen path { stroke-dashoffset: 0; }
.js .alt::after { transform: scaleX(0); transition: transform 900ms var(--expo) 1100ms; }
.js .bereit .alt::after { transform: scaleX(1); }
.js .aufgehen { clip-path: inset(100% 0 0 0); transition: clip-path 1000ms var(--expo); }
.js .aufgehen img { transform: scale(1.15); transition: transform 1200ms var(--expo); }
.js .aufgehen.da { clip-path: inset(0 0 0 0); }
.js .aufgehen.da img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .zeile > span, .js .alt::after, .js .aufgehen, .js .aufgehen img, .js .bogen path { transition: none; transform: none; clip-path: none; stroke-dashoffset: 0; }
}