/* ============================================================
   Trattoria Italian Drink & Food, Bad Aibling
   Redesign 09/2026: dunkel und warm, abgeleitet vom Logo
   (Schwarz, Gruen-Weiss-Rot) und vom Abendlicht der Terrasse.
   ============================================================ */

/* ── Schriften (selbst gehostet) ───────────────────────────── */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces/fraunces-variable-normal.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces/fraunces-variable-italic.woff2') format('woff2');
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../assets/fonts/nunito-sans/nunito-sans-variable-normal.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('../assets/fonts/nunito-sans/nunito-sans-variable-italic.woff2') format('woff2');
  font-weight: 300 800; font-style: italic; font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  --nacht:       #14110e;
  --holz:        #1f1a15;
  --holz-hell:   #2b241c;
  --linie:       #3d3328;
  --lampe:       #e8b04a;
  --lampe-tief:  #c98f2b;
  --kerze:       #f6ead2;
  --gedimmt:     #bfb199;
  --verde:       #8fc14b;
  --bianco:      #ffffff;
  --rosso:       #d0312d;

  /* Aliasse fuer aeltere Inline-Stile in den Rechtstexten */
  --clr-primary: var(--lampe);
  --clr-text-muted: var(--gedimmt);
  --font-heading: 'Fraunces', Georgia, serif;

  --schrift-titel: 'Fraunces', Georgia, 'Times New Roman', serif;
  --schrift-text:  'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;

  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-md:  1.0625rem;
  --t-lg:  1.3125rem;
  --t-xl:  clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --t-2xl: clamp(2rem, 1.3rem + 3vw, 3.5rem);
  --t-3xl: clamp(2.6rem, 1.4rem + 5.6vw, 5.75rem);

  --r-1: 0.5rem;
  --r-2: 1rem;
  --r-3: 1.5rem;
  --r-4: 2.5rem;
  --r-5: 4rem;
  --r-6: clamp(4.5rem, 3rem + 6vw, 8rem);

  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;

  --schatten: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --weich: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);

  --kopf: 76px;
  --breite: 1200px;
  --rand: clamp(1.25rem, 0.6rem + 3vw, 3rem);
}

/* ── Basis ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf) + 1rem);
  background: var(--nacht);
}

body {
  font-family: var(--schrift-text);
  font-size: var(--t-md);
  font-weight: 400;
  line-height: 1.65;
  color: var(--kerze);
  background: var(--nacht);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Flaggenstreifen wie auf dem Schild, einmal ganz oben */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 950;
  background: linear-gradient(90deg,
    var(--verde) 0 33.33%, var(--bianco) 33.33% 66.66%, var(--rosso) 66.66% 100%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  font-variation-settings: 'opsz' 144;
}
p { text-wrap: pretty; }

::selection { background: var(--lampe); color: var(--nacht); }

:focus-visible {
  outline: 3px solid var(--lampe);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

.skip-nav {
  position: absolute; left: 1rem; top: -100px; z-index: 1000;
  padding: 0.75rem 1.25rem;
  background: var(--lampe); color: var(--nacht); font-weight: 700;
  border-radius: var(--radius-s);
}
.skip-nav:focus { top: 1rem; }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.abschnitt { padding-block: var(--r-6); }
.abschnitt--holz { background: var(--holz); }

.abschnitt__titel { font-size: var(--t-2xl); max-width: 18ch; }
.abschnitt__einleitung {
  margin-top: var(--r-2);
  max-width: 58ch;
  color: var(--gedimmt);
  font-size: var(--t-lg);
  line-height: 1.5;
}

/* ── Knoepfe ───────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.75rem 1.6rem;
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.2;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: background-color var(--weich), color var(--weich), border-color var(--weich), transform var(--weich);
}
.knopf svg { width: 1.15em; height: 1.15em; flex: none; }
.knopf--voll { background: var(--lampe); color: var(--nacht); }
.knopf--voll:hover { background: var(--kerze); }
.knopf--rand { border-color: rgba(246, 234, 210, 0.55); color: var(--kerze); }
.knopf--rand:hover { border-color: var(--lampe); color: var(--lampe); }
.knopf:active { transform: translateY(1px); }

.textlink {
  color: var(--lampe);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
  text-decoration-color: rgba(232, 176, 74, 0.45);
  transition: text-decoration-color var(--weich);
}
.textlink:hover { text-decoration-color: var(--lampe); }

/* ── Kopfzeile ─────────────────────────────────────────────── */
.kopf {
  position: fixed; inset: 4px 0 auto 0; z-index: 900;
  height: var(--kopf);
  display: flex; align-items: center;
  transition: background-color var(--weich), box-shadow var(--weich);
}
.kopf.ist-fest,
.kopf--immer-fest {
  background: rgba(20, 17, 14, 0.94);
  box-shadow: 0 1px 0 var(--linie);
}
@supports (backdrop-filter: blur(10px)) {
  .kopf.ist-fest, .kopf--immer-fest { background: rgba(20, 17, 14, 0.8); backdrop-filter: blur(14px); }
}
.kopf__innen {
  display: flex; align-items: center; justify-content: space-between; gap: var(--r-3);
}

.marke { display: inline-flex; align-items: center; gap: 0.85rem; }
.marke__bild { height: 46px; width: auto; border-radius: 4px; }
.marke__text { display: flex; flex-direction: column; line-height: 1.05; }
.marke__name { font-weight: 800; font-size: 1.2rem; letter-spacing: 0.01em; }
.marke__zusatz { font-size: var(--t-xs); color: var(--gedimmt); margin-top: 0.2rem; }

.kopf__links { display: none; align-items: center; gap: clamp(1.1rem, 2vw, 2.1rem); }
.kopf__link {
  position: relative;
  padding-block: 0.5rem;
  font-weight: 600;
  font-size: var(--t-sm);
  transition: color var(--weich);
}
.kopf__link:hover, .kopf__link[aria-current="page"] { color: var(--lampe); }
.kopf__link[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--lampe);
}
.kopf__anruf { display: none; min-height: 2.75rem; padding: 0.5rem 1.2rem; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

.burger {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(246, 234, 210, 0.35);
}
.burger__striche, .burger__striche::before, .burger__striche::after {
  display: block; width: 20px; height: 2px; background: var(--kerze); border-radius: 2px;
  transition: transform var(--weich), opacity var(--weich);
}
.burger__striche { position: relative; }
.burger__striche::before, .burger__striche::after { content: ''; position: absolute; left: 0; }
.burger__striche::before { top: -6px; }
.burger__striche::after  { top: 6px; }
.burger[aria-expanded="true"] .burger__striche { background: transparent; }
.burger[aria-expanded="true"] .burger__striche::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__striche::after  { transform: translateY(-6px) rotate(-45deg); }

.handymenue {
  position: fixed; inset: 0; z-index: 890;
  padding: calc(var(--kopf) + 2.5rem) var(--rand) calc(2rem + env(safe-area-inset-bottom));
  background: var(--nacht);
  display: flex; flex-direction: column; gap: 0.25rem;
  overflow-y: auto;
  visibility: hidden; opacity: 0;
  transition: opacity var(--weich), visibility 0s linear 0.35s;
}
.handymenue.is-open { visibility: visible; opacity: 1; transition: opacity var(--weich), visibility 0s; }
.handymenue__link {
  font-family: var(--schrift-titel);
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--linie);
}
.handymenue__link:hover { color: var(--lampe); }
.handymenue .knopf { margin-top: var(--r-3); align-self: flex-start; }

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--kopf) + 2rem);
  padding-bottom: clamp(2rem, 6vh, 4.5rem);
  isolation: isolate;
  overflow: hidden;
}
.hero__bild {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 35%;
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,17,14,0.72) 0%, rgba(20,17,14,0.12) 28%, rgba(20,17,14,0.55) 62%, var(--nacht) 100%),
    linear-gradient(90deg, rgba(20,17,14,0.7) 0%, rgba(20,17,14,0) 65%);
}
.hero__raster { display: grid; gap: var(--r-3); align-items: end; }
.hero__titel { font-size: var(--t-3xl); font-weight: 300; max-width: 12ch; }
.hero__motto {
  margin-top: var(--r-2);
  font-family: var(--schrift-titel);
  font-style: italic;
  font-size: var(--t-xl);
  color: var(--lampe);
  max-width: 24ch;
  line-height: 1.25;
}
.hero__text { margin-top: var(--r-2); max-width: 46ch; color: var(--kerze); }
.hero__knoepfe { margin-top: var(--r-3); display: flex; flex-wrap: wrap; gap: 0.85rem; }

@media (max-width: 767px) {
  .hero::after {
    background: linear-gradient(180deg, rgba(20,17,14,0.78) 0%, rgba(20,17,14,0.5) 30%, rgba(20,17,14,0.72) 65%, var(--nacht) 100%);
  }
}
.nie-umbrechen { white-space: nowrap; }

/* Heute-Karte: zeigt den aktuellen Oeffnungsstatus */
.heute {
  background: rgba(20, 17, 14, 0.82);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  padding: 1.25rem 1.4rem;
  max-width: 24rem;
}
@supports (backdrop-filter: blur(10px)) {
  .heute { background: rgba(20, 17, 14, 0.6); backdrop-filter: blur(16px); }
}
.heute__status { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: var(--t-lg); }
.heute__punkt { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--gedimmt); flex: none; }
.heute[data-status="offen"] .heute__punkt { background: var(--verde); box-shadow: 0 0 0 5px rgba(143,193,75,0.2); }
.heute[data-status="zu"] .heute__punkt { background: var(--rosso); box-shadow: 0 0 0 5px rgba(208,49,45,0.22); }
.heute__zeile { margin-top: 0.4rem; color: var(--gedimmt); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.heute__zeile strong { color: var(--kerze); font-weight: 700; }

/* Einmalige Lade-Sequenz im Hero */
@media (prefers-reduced-motion: no-preference) {
  .hero__bild { animation: hero-zoom 14s ease-out both; }
  .hero__titel, .hero__motto, .hero__text, .hero__knoepfe, .heute { animation: hero-ein 0.9s cubic-bezier(0.2,0.7,0.2,1) both; }
  .hero__motto  { animation-delay: 0.12s; }
  .hero__text   { animation-delay: 0.22s; }
  .hero__knoepfe{ animation-delay: 0.32s; }
  .heute        { animation-delay: 0.5s; }
}
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes hero-ein  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Hinweisband (Schliessungen, Aktuelles) ────────────────── */
.hinweis {
  background: var(--lampe);
  color: var(--nacht);
}
.hinweis[hidden] { display: none; }
.hinweis__innen {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem;
  padding-block: 1rem;
}
.hinweis__titel { font-family: var(--schrift-titel); font-size: var(--t-lg); font-weight: 600; }
.hinweis__text { font-weight: 600; max-width: 70ch; }
.hinweis--seite { margin-top: calc(var(--kopf) + 4px); }

/* ── Karten-Bereich (Wochenkarte + PDFs) ───────────────────── */
.karten { display: grid; gap: var(--r-3); margin-top: var(--r-4); }
.karte-woche {
  position: relative;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border-radius: var(--radius-l);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(232,176,74,0.22), transparent 55%),
    var(--holz-hell);
  border: 1px solid var(--linie);
}
.karte-woche__titel { font-size: var(--t-2xl); }
.karte-woche__gueltig { margin-top: 0.6rem; color: var(--lampe); font-weight: 700; font-size: var(--t-lg); }
.karte-woche__text { margin-top: var(--r-2); color: var(--gedimmt); max-width: 44ch; }
.karte-woche .knopf { margin-top: var(--r-3); }

.karten__liste { display: grid; gap: var(--r-2); align-content: start; }
.karte-pdf {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius-m);
  border: 1px solid var(--linie);
  transition: border-color var(--weich), background-color var(--weich);
}
.karte-pdf:hover { border-color: var(--lampe); background: var(--holz-hell); }
.karte-pdf__name, .karte-pdf__info { display: block; }
.karte-pdf__name { font-family: var(--schrift-titel); font-size: var(--t-xl); line-height: 1.15; }
.karte-pdf__info { color: var(--gedimmt); font-size: var(--t-sm); margin-top: 0.25rem; }
.karte-pdf svg { width: 1.6rem; height: 1.6rem; color: var(--lampe); }

/* ── Ueber uns ─────────────────────────────────────────────── */
.wir { display: grid; gap: var(--r-4); align-items: center; }
.wir__bild { border-radius: var(--radius-l); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: var(--schatten); }
.wir__text p { max-width: 58ch; color: var(--gedimmt); }
.wir__text p + p { margin-top: 1.1em; }
.wir__text .abschnitt__titel { margin-bottom: var(--r-3); }
.wir__namen {
  margin-top: var(--r-3);
  font-family: var(--schrift-titel); font-style: italic;
  font-size: var(--t-xl); color: var(--lampe);
}

/* ── Kueche ────────────────────────────────────────────────── */
.kueche { display: grid; gap: var(--r-3); margin-top: var(--r-4); }
.gericht { position: relative; }
.gericht__bild { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-l); }
.gericht__name { font-size: var(--t-xl); margin-top: var(--r-2); }
.gericht__text { color: var(--gedimmt); margin-top: 0.4rem; max-width: 40ch; }

/* ── Oeffnungszeiten ───────────────────────────────────────── */
.zeiten { display: grid; gap: var(--r-4); }
.zeiten__tabelle { font-variant-numeric: tabular-nums; }
.zeiten__tabelle th, .zeiten__tabelle td {
  padding: 0.95rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--linie);
  vertical-align: baseline;
}
.zeiten__tabelle thead th { color: var(--gedimmt); font-size: var(--t-sm); font-weight: 600; }
.zeiten__tabelle tbody th { font-weight: 700; }
.zeiten__tabelle td.zu { color: var(--gedimmt); }
.zeiten__tabelle tr.ist-heute th, .zeiten__tabelle tr.ist-heute td { color: var(--lampe); }
.zeiten__tabelle tr.ist-heute th::after { content: ' (heute)'; font-weight: 400; font-size: var(--t-sm); }
.zeiten__kueche { margin-top: var(--r-2); color: var(--gedimmt); font-size: var(--t-sm); }

.schliesstage { margin-top: var(--r-3); }
.schliesstage[hidden] { display: none; }
.schliesstage__titel { font-size: var(--t-lg); font-family: var(--schrift-text); font-weight: 800; letter-spacing: 0; }
.schliesstage__liste li {
  display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; justify-content: space-between;
  padding-block: 0.7rem; border-bottom: 1px solid var(--linie);
  font-variant-numeric: tabular-nums;
}
.schliesstage__liste span:last-child { color: var(--gedimmt); }

.reservieren {
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border-radius: var(--radius-l);
  background: var(--nacht);
  border: 1px solid var(--linie);
  align-self: start;
}
.reservieren__titel { font-size: var(--t-xl); }
.reservieren__text { color: var(--gedimmt); margin-top: var(--r-1); }
.reservieren__nummer {
  display: inline-block;
  margin-top: var(--r-3);
  font-family: var(--schrift-titel);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  line-height: 1;
  color: var(--lampe);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color var(--weich);
}
.reservieren__nummer:hover { color: var(--kerze); }

/* ── Galerie-Streifen (Startseite) ─────────────────────────── */
.streifen {
  margin-top: var(--r-4);
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 26rem);
  gap: var(--r-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-inline: var(--rand);
  padding-bottom: 1rem;
  scrollbar-color: var(--linie) transparent;
}
.streifen img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-m);
  scroll-snap-align: center;
}
.streifen__fuss { margin-top: var(--r-3); }

/* ── Fragen ────────────────────────────────────────────────── */
.fragen { margin-top: var(--r-4); max-width: 52rem; }
.frage { border-bottom: 1px solid var(--linie); }
.frage:first-child { border-top: 1px solid var(--linie); }
.frage summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.25rem;
  font-family: var(--schrift-titel);
  font-size: var(--t-lg);
  transition: color var(--weich);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary:hover { color: var(--lampe); }
.frage summary::after {
  content: ''; flex: none; width: 0.7rem; height: 0.7rem;
  border-right: 2px solid var(--lampe); border-bottom: 2px solid var(--lampe);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--weich);
}
.frage[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.frage__antwort { padding-bottom: 1.4rem; color: var(--gedimmt); max-width: 62ch; }

/* ── Standort ──────────────────────────────────────────────── */
.ort { display: grid; gap: var(--r-4); margin-top: var(--r-4); }
.ort__liste > div { padding-block: 1.1rem; border-bottom: 1px solid var(--linie); }
.ort__liste > div:first-child { border-top: 1px solid var(--linie); }
.ort__liste dt { color: var(--gedimmt); font-size: var(--t-sm); }
.ort__liste dd { font-size: var(--t-lg); margin-top: 0.15rem; font-variant-numeric: tabular-nums; }

.landkarte {
  position: relative;
  min-height: 22rem;
  border-radius: var(--radius-l);
  overflow: hidden;
  border: 1px solid var(--linie);
  background: var(--holz-hell);
}
.landkarte__platzhalter {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background:
    linear-gradient(0deg, rgba(20,17,14,0.92), rgba(20,17,14,0.35)),
    url('../assets/img/galerie/bild-21-klein.webp') center / cover;
}
.landkarte__platzhalter.is-hidden { display: none; }
.landkarte__platzhalter p { font-size: var(--t-sm); max-width: 44ch; }
.landkarte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Fusszeile ─────────────────────────────────────────────── */
.fuss {
  background: #0c0a08;
  border-top: 1px solid var(--linie);
  padding-top: var(--r-5);
  padding-bottom: calc(var(--r-3) + env(safe-area-inset-bottom));
  font-size: var(--t-sm);
}
.fuss__raster { display: grid; gap: var(--r-4); }
.fuss__logo { width: 190px; border-radius: 6px; }
.fuss__motto { margin-top: var(--r-2); font-family: var(--schrift-titel); font-style: italic; font-size: var(--t-lg); color: var(--lampe); max-width: 20ch; line-height: 1.3; }
.fuss__titel { font-family: var(--schrift-text); font-weight: 800; font-size: var(--t-sm); letter-spacing: 0; color: var(--gedimmt); margin-bottom: 0.8rem; }
.fuss__liste li + li { margin-top: 0.45rem; }
.fuss__liste a, .fuss__cookie { transition: color var(--weich); }
.fuss__liste a:hover, .fuss__cookie:hover { color: var(--lampe); }
.fuss__cookie { text-align: left; }
.fuss address { font-style: normal; line-height: 1.7; font-variant-numeric: tabular-nums; }
.fuss__ende {
  margin-top: var(--r-4); padding-top: var(--r-3);
  border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  color: var(--gedimmt);
}
.fuss__ende a { color: var(--kerze); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-color: var(--linie); }
.fuss__ende a:hover { color: var(--lampe); text-decoration-color: var(--lampe); }

/* ── Seitenkopf der Unterseiten ────────────────────────────── */
.seitenkopf { padding-top: calc(var(--kopf) + var(--r-5)); padding-bottom: var(--r-4); }
.seitenkopf__titel { font-size: var(--t-3xl); font-weight: 300; }
.seitenkopf__text { margin-top: var(--r-2); max-width: 56ch; color: var(--gedimmt); font-size: var(--t-lg); line-height: 1.5; }

/* ── Speisekarte: Reiter + PDF-Betrachter ──────────────────── */
.reiter {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.4rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  width: fit-content; max-width: 100%;
}
.reiter__knopf {
  min-height: 2.9rem; padding: 0.5rem 1.3rem;
  border-radius: 999px;
  font-weight: 700; font-size: var(--t-sm);
  transition: background-color var(--weich), color var(--weich);
}
.reiter__knopf:hover { color: var(--lampe); }
@media (max-width: 479px) {
  .reiter { flex-wrap: nowrap; gap: 0.15rem; width: 100%; justify-content: space-between; }
  .reiter__knopf { padding-inline: 0.7rem; font-size: 0.875rem; white-space: nowrap; }
}
.reiter__knopf[aria-selected="true"] { background: var(--lampe); color: var(--nacht); }

.pdf-feld { margin-top: var(--r-3); }
.pdf-feld[hidden] { display: none; }
.pdf-feld__kopf {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--r-2);
  margin-bottom: var(--r-3);
}
.pdf-feld__titel { font-size: var(--t-2xl); }
.pdf-feld__info { color: var(--gedimmt); margin-top: 0.3rem; }
.pdf-feld__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.pdf-rahmen {
  display: none;
  width: 100%; height: min(86vh, 1100px);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  background: var(--holz-hell);
}
.pdf-hinweis { color: var(--gedimmt); font-size: var(--t-sm); margin-top: var(--r-2); }

/* ── Galerie-Seite ─────────────────────────────────────────── */
.mosaik { columns: 2; column-gap: 0.75rem; }
.mosaik__knopf {
  display: block; width: 100%;
  margin-bottom: 0.75rem;
  break-inside: avoid;
  border-radius: var(--radius-m);
  overflow: hidden;
  cursor: zoom-in;
}
.mosaik__knopf img { width: 100%; transition: transform 0.6s cubic-bezier(0.2,0.7,0.2,1), filter var(--weich); }
.mosaik__knopf:hover img { transform: scale(1.04); filter: brightness(1.08); }

.leuchtkasten {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  border: 0; padding: 0; margin: 0;
  background: rgba(8, 6, 5, 0.96);
  color: var(--kerze);
}
.leuchtkasten::backdrop { background: rgba(8, 6, 5, 0.9); }
.leuchtkasten { overflow: hidden; }
.leuchtkasten__innen { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); place-items: center; padding: 4.5rem 4.5rem 4.5rem; }
.leuchtkasten__bild { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-s); }
@media (max-width: 767px) { .leuchtkasten__innen { padding-inline: 0.75rem; } }
.leuchtkasten__text { position: absolute; left: 0; right: 0; bottom: calc(1rem + env(safe-area-inset-bottom)); text-align: center; font-size: var(--t-sm); color: var(--gedimmt); padding-inline: 4rem; }
.leuchtkasten__knopf {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(31, 26, 21, 0.9); border: 1px solid var(--linie);
  transition: background-color var(--weich), color var(--weich);
}
.leuchtkasten__knopf:hover { background: var(--lampe); color: var(--nacht); }
.leuchtkasten__knopf svg { width: 1.3rem; height: 1.3rem; }
.leuchtkasten__zu { top: calc(1rem + env(safe-area-inset-top)); right: 1rem; }
.leuchtkasten__vor { right: 1rem; top: 50%; translate: 0 -50%; }
.leuchtkasten__zurueck { left: 1rem; top: 50%; translate: 0 -50%; }

/* ── Rechtstexte ───────────────────────────────────────────── */
.legal-page { padding-top: calc(var(--kopf) + var(--r-5)); padding-bottom: var(--r-6); }
.legal-page .container { max-width: 52rem; margin-inline: auto; padding-inline: var(--rand); }
.legal-page h1 { font-size: var(--t-2xl); margin-bottom: var(--r-3); color: var(--kerze); }
.legal-toc { background: var(--holz); border: 1px solid var(--linie); border-radius: var(--radius-m); padding: 1.5rem; margin-bottom: var(--r-4); }
.legal-toc h3 { font-family: var(--schrift-text); font-size: var(--t-sm); font-weight: 800; color: var(--gedimmt); margin-bottom: 0.75rem; letter-spacing: 0; }
.legal-toc ol { list-style: decimal; padding-left: 1.4rem; }
.legal-toc li { margin-bottom: 0.3rem; }
.legal-section { margin-bottom: var(--r-4); scroll-margin-top: calc(var(--kopf) + 1rem); }
.legal-section h2 { font-size: var(--t-xl); margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--linie); }
.legal-section h3 { font-family: var(--schrift-text); font-weight: 800; font-size: var(--t-md); letter-spacing: 0; margin: 1.4rem 0 0.4rem; }
.legal-section p, .legal-section li { color: var(--gedimmt); margin-bottom: 0.75rem; max-width: 72ch; }
.legal-section strong { color: var(--kerze); }
.legal-section ul { list-style: disc; padding-left: 1.4rem; }
.legal-page a { color: var(--lampe); text-decoration: underline; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.legal-section table { font-size: var(--t-sm); margin-block: 1rem; display: block; overflow-x: auto; }
.legal-section th { background: var(--holz); text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--linie); }
.legal-section td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--linie); color: var(--gedimmt); vertical-align: top; }
.legal-hint, .legal-page [style*="fff3cd"] { color: #3b2a00 !important; }
.legal-hint { background: #fff3cd; border-radius: var(--radius-m); padding: 1rem 1.25rem; margin-bottom: var(--r-3); font-size: var(--t-sm); }
.legal-hint strong { display: block; color: #3b2a00; }

/* ── 404 ───────────────────────────────────────────────────── */
.fehlseite { min-height: 100svh; display: grid; align-content: center; padding-top: var(--kopf); }
.fehlseite__zahl { font-family: var(--schrift-titel); font-size: clamp(6rem, 26vw, 15rem); line-height: 0.85; color: var(--holz-hell); }
.fehlseite__titel { font-size: var(--t-2xl); margin-top: var(--r-2); }
.fehlseite__text { color: var(--gedimmt); margin: var(--r-2) 0 var(--r-3); max-width: 46ch; }

/* ── Cookie-Hinweis ────────────────────────────────────────── */
#cookie-banner {
  position: fixed; z-index: 960;
  left: var(--rand); right: var(--rand);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  max-width: 40rem;
  padding: 1.5rem;
  background: var(--holz-hell);
  border: 1px solid var(--linie);
  border-radius: var(--radius-m);
  box-shadow: var(--schatten);
  visibility: hidden; opacity: 0; transform: translateY(16px);
  transition: opacity var(--weich), transform var(--weich), visibility 0s linear 0.35s;
}
#cookie-banner.is-visible { visibility: visible; opacity: 1; transform: none; transition: opacity var(--weich), transform var(--weich), visibility 0s; }
.cookie__titel { font-size: var(--t-lg); }
.cookie__text { margin-top: 0.5rem; font-size: var(--t-sm); color: var(--gedimmt); }
.cookie__wahl { margin-top: 1rem; display: grid; gap: 0.6rem; font-size: var(--t-sm); }
.cookie__wahl[hidden] { display: none; }
.cookie__wahl label { display: flex; align-items: center; gap: 0.6rem; }
.cookie__wahl input { width: 1.15rem; height: 1.15rem; accent-color: var(--lampe); }
.cookie__knoepfe { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cookie__knoepfe .knopf { min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: var(--t-sm); }
.cookie__knoepfe [hidden] { display: none; }

/* ── Ab Tablet ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .karten { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .wir { grid-template-columns: 0.8fr 1fr; gap: var(--r-5); }
  .kueche { grid-template-columns: repeat(3, 1fr); }
  .gericht:nth-child(2) { margin-top: var(--r-4); }
  .zeiten { grid-template-columns: 1.2fr 1fr; gap: var(--r-5); }
  .ort { grid-template-columns: 0.9fr 1.1fr; }
  .landkarte { min-height: 28rem; }
  .fuss__raster { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .mosaik { columns: 3; column-gap: 1rem; }
  .mosaik__knopf { margin-bottom: 1rem; }
  .hero__raster { grid-template-columns: 1fr auto; }
}

/* ── Ab Desktop ────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .kopf__links { display: flex; }
  .kopf__anruf { display: inline-flex; }
  .burger { display: none; }
  .handymenue { display: none; }
  .pdf-rahmen { display: block; }
  .pdf-hinweis--handy { display: none; }
  .mosaik { columns: 4; }
  .streifen { grid-auto-columns: 24rem; }
}

/* ── Druck ─────────────────────────────────────────────────── */
@media print {
  .kopf, .handymenue, #cookie-banner, .landkarte, .streifen, body::before { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: 0; }
}

/* ── Weniger Bewegung ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}