/* =============================================================================
   Zum Wiener - Gestaltungssystem
   Grundlage: die gedruckte Karte vom 16.06.2026. Farben nicht geschaetzt,
   sondern aus dem PDF gemessen: Nachtgruen #101A14-#19221C, Gold #A67D3C.
   Bewegung nach dem Vorbild sacher.com: langsame Einblendungen, kein Bounce,
   Bilder blenden AUS SCHWARZ auf. Alles eckig - border-radius bleibt 0.
   ========================================================================== */

:root {
  /* Flaechen */
  --gruen-tief:  #0E1712;   /* Hero, Fussbereich */
  --gruen:       #14201A;   /* dunkle Sektionen */
  --gruen-2:     #1B2921;   /* Karten auf Dunkel */
  --gruen-linie: #2A3A31;

  /* Gold - eine einzige Signalfarbe fuer jede Aktion */
  --gold:        #A67D3C;   /* Ornament, Rahmen, Linien (wie gedruckt) */
  --gold-hell:   #D3AA63;   /* Text und Links auf Dunkel (Kontrast 8.3:1) */
  --gold-tief:   #8A6730;   /* Hover */

  /* Helle Seiten - wie die Innenseiten der Karte */
  --papier:      #FAF8F4;
  --papier-2:    #F1EDE4;
  --tinte:       #1A1F1B;
  --tinte-leise: #5A6259;

  /* Text auf Dunkel */
  --creme:       #EFEAE0;
  --creme-leise: #A9B0A6;

  --spur-klein:  0.14em;    /* Laufweite kleiner Versalien */
  --spur-gross:  0.055em;   /* Laufweite grosser Display-Zeilen */

  --rand: clamp(1.25rem, 5vw, 5rem);
  --breite: 76rem;

  --ruhig: cubic-bezier(0.22, 0.61, 0.36, 1);   /* easeOutCubic */
}

/* --- Grundlagen ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, .display {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 400;
  margin: 0;
  line-height: 1.08;
  letter-spacing: var(--spur-gross);
}

p { margin: 0 0 1.5rem; max-width: 42em; }
p:last-child { margin-bottom: 0; }

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

/* Kleine Versalzeile ueber jeder Ueberschrift - das Muster der Karte */
.kicker {
  font-size: 0.75rem;
  letter-spacing: var(--spur-klein);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
  font-weight: 500;
}
.dunkel .kicker, .tief .kicker, .hero .kicker { color: var(--gold-hell); }

/* Ornament-Trenner, nachempfunden dem Zierstrich der Karte */
.ornament {
  display: flex; align-items: center; justify-content: center;
  gap: 0.75rem; margin: 0 0 2rem;
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: clamp(2rem, 8vw, 5rem);
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.ornament span { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.ornament.links { justify-content: flex-start; }
.ornament.links::before { display: none; }

/* --- Knoepfe: eckig, Gold ist die einzige Aktion -------------------------- */
.knopf {
  display: inline-block;
  padding: 1.05rem 2.1rem;
  font-size: 0.78rem;
  letter-spacing: var(--spur-klein);
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #14100A;
  transition: background .3s var(--ruhig), border-color .3s var(--ruhig), color .3s var(--ruhig);
  cursor: pointer;
}
.knopf:hover { background: var(--gold-tief); border-color: var(--gold-tief); color: #fff; }

.knopf.leer { background: transparent; color: var(--gold); }
.knopf.leer:hover { background: var(--gold); color: #14100A; }
.dunkel .knopf.leer { color: var(--gold-hell); border-color: var(--gold-hell); }
.dunkel .knopf.leer:hover { background: var(--gold-hell); color: #14100A; }

/* --- Kopfzeile ------------------------------------------------------------ */
.kopf {
  position: fixed; inset: 0 0 auto 0;
  /* ueber dem Menue (70): sonst deckt das offene Menue den eigenen
     Schliessen-Knopf zu und man kommt nur ueber einen Link wieder raus */
  z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.15rem var(--rand);
  transition: background .4s var(--ruhig), padding .4s var(--ruhig), border-color .4s var(--ruhig);
  border-bottom: 1px solid transparent;
}
.kopf.gescrollt {
  background: rgba(14, 23, 18, 0.96);
  border-bottom-color: var(--gruen-linie);
  padding-block: 0.8rem;
  backdrop-filter: saturate(140%) blur(6px);
}
.marke { display: block; line-height: 0; text-decoration: none; }
/* Das Logo des Kunden - unveraendert, nur skaliert. Das Monogramm im Kreis ist
   ausgestanzt und nimmt die Hintergrundfarbe an, darum liegt der Kopf immer auf Dunkelgruen. */
.marke img {
  display: block; width: auto; height: 112px;
  transition: height .4s var(--ruhig);
}
.kopf.gescrollt .marke img { height: 64px; }
.fuss-marke img { height: 150px; }
@media (max-width: 52rem) {
  .marke img { height: 72px; }
  .kopf.gescrollt .marke img { height: 56px; }
  .fuss-marke img { height: 120px; }
}

/* Bewusst KEIN Burger auf dem Desktop: die Speisekarte muss sichtbar sein. */
.navi { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.2rem); }
.navi a {
  font-size: 0.74rem; letter-spacing: var(--spur-klein); text-transform: uppercase;
  color: var(--creme); text-decoration: none; padding-block: 0.4rem;
  border-bottom: 1px solid transparent; transition: color .3s var(--ruhig), border-color .3s var(--ruhig);
  white-space: nowrap;
}
.navi a:hover { color: var(--gold-hell); border-bottom-color: var(--gold-hell); }
.navi .knopf { padding: 0.8rem 1.5rem; font-size: 0.72rem; }
.navi .knopf:hover { border-bottom-color: transparent; color: #fff; }

/* Der Burger und das Menue stehen jetzt weiter unten, ohne Medienabfrage:
   beide gelten auf jeder Breite. Die alten Regeln von hier sind entfallen -
   «.burger span» traf auch den Strich-Container und quetschte ihn auf 1 px,
   worauf die drei Striche auf 0 px zusammenfielen und der Knopf nur noch
   einen Strich zeigte. */

/* --- Hero: Kino-Band, kein 100vh-Vollbild --------------------------------- */
/* Das Band gibt die MINDESThoehe vor, der Inhalt liegt im normalen Fluss.
   Waere der Inhalt absolut positioniert, wuerde er auf schmalen Geraeten
   nach oben aus dem Band herauslaufen und die Kopfzeile ueberdecken. */
.hero {
  position: relative;
  display: grid; align-items: end;
  min-height: 56vw;
  background: var(--gruen-tief);
  overflow: hidden;
}
@media (max-width: 48rem) { .hero { min-height: 118vw; } }

.hero-band { position: absolute; inset: 0; }
.hero-band video, .hero-band img.poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Nimmt dem Raum das alte Apfelgruen (Stuehle, Fensterband) und legt ihn
     naeher an die Karten-CI. Ohne das kaempfen zwei Gruen gegeneinander. */
  filter: saturate(0.62) contrast(1.04);
}
/* Das Rohmaterial ist helles Tageslicht. Damit der Hero die dunkelgruene
   Karten-CI traegt, liegt ein kraeftiger Nachtgruen-Schleier darueber. */
.hero-band::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(14,23,18,.78) 0%, rgba(14,23,18,.10) 34%, rgba(14,23,18,.55) 62%, rgba(14,23,18,.95) 100%),
    radial-gradient(130% 85% at 50% 55%, transparent 30%, rgba(14,23,18,.60) 100%),
    linear-gradient(rgba(16,26,20,.46), rgba(16,26,20,.46));
}
.hero-inhalt {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--breite); margin-inline: auto;
  /* oben Platz fuer die feste Kopfzeile, unten der Kino-Rand */
  padding: clamp(7rem, 16vw, 11rem) var(--rand) clamp(2.5rem, 6vw, 5rem);
}
.hero h1 {
  color: var(--creme);
  font-size: clamp(2.4rem, 6.4vw, 5.2rem);
  max-width: 15em;
  margin-bottom: 1.25rem;
}
.hero .unterzeile { color: var(--creme-leise); max-width: 34em; font-size: clamp(1rem, 1.4vw, 1.13rem); }
.hero .knopfreihe { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

/* --- Sektionen ------------------------------------------------------------ */
.sektion { padding-block: clamp(4rem, 10vw, 8.5rem); }
.sektion.dunkel { background: var(--gruen); color: var(--creme); }
.sektion.tief { background: var(--gruen-tief); color: var(--creme); }
.sektion.dunkel h2, .sektion.tief h2 { color: var(--creme); }
.sektion.hell-2 { background: var(--papier-2); }

h2, h1.seitentitel { font-size: clamp(1.9rem, 4vw, 3.1rem); margin-bottom: 1.5rem; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: .6rem; }
.sektion.dunkel p, .sektion.tief p { color: var(--creme-leise); }

.zweispalt { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 56rem) { .zweispalt { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56rem) { .zweispalt.bild-links > .bild { order: -1; } }

.drei { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
@media (min-width: 46rem) { .drei { grid-template-columns: repeat(3, 1fr); } }

.punkt { border-top: 1px solid var(--gold); padding-top: 1.4rem; }
.dunkel .punkt, .tief .punkt { border-top-color: var(--gruen-linie); }

/* --- Bilder blenden aus Schwarz auf (Sacher-Prinzip) ---------------------- */
.bild { position: relative; overflow: hidden; background: #000; }
.js .bild::after {
  content: ""; position: absolute; inset: 0; background: #000;
  opacity: 1; transition: opacity 1.1s var(--ruhig); pointer-events: none;
}
.bild.sichtbar::after { opacity: 0; }
.bild img { width: 100%; display: block; }
.bild.hoch { aspect-ratio: 3 / 4; }
.bild.quadrat { aspect-ratio: 1 / 1; }
.bild.breit { aspect-ratio: 16 / 9; }
.bild.hoch img, .bild.quadrat img, .bild.breit img { height: 100%; object-fit: cover; }

/* --- Langsames Einblenden beim Scrollen ----------------------------------- */
/* Versteckt wird NUR, wenn JavaScript laeuft (.js kommt aus dem Kopf der Seite).
   Sonst waere die ganze Seite bei einem JS-Fehler unsichtbar. */
.js .auf { opacity: 0; transform: translateY(70px); }
.js .auf.da {
  opacity: 1; transform: none;
  transition: opacity 1.6s var(--ruhig), transform 2.4s var(--ruhig);
}
@media (max-width: 48rem) {
  .js .auf { transform: translateY(36px); }
  .js .auf.da { transition-duration: 1s, 1.4s; }
}
@media (prefers-reduced-motion: reduce) {
  .js .auf, .js .auf.da { opacity: 1; transform: none; transition: none; }
  .bild::after { display: none; }
}

/* --- Signature-Gericht ---------------------------------------------------- */
.preise { display: flex; gap: 2.75rem; margin: 2rem 0 2.25rem; }
.preise div { border-top: 1px solid var(--gold); padding-top: .8rem; }
.preise .gr { font-size: .72rem; letter-spacing: var(--spur-klein); text-transform: uppercase; color: var(--gold-hell); }
.preise .pr { font-family: "Playfair Display", Georgia, serif; font-size: 1.9rem; color: var(--creme); margin-top: .3rem; }

/* --- Karten-Anriss --------------------------------------------------------- */
.gericht { display: flex; gap: 1.25rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid rgba(166,125,60,.28); }
.gericht:last-child { border-bottom: 0; }
.gericht .name { font-weight: 500; }
.gericht .bes { display: block; font-weight: 400; color: var(--tinte-leise); font-size: .9rem; margin-top: .2rem; }
.dunkel .gericht .bes, .tief .gericht .bes { color: var(--creme-leise); }
.gericht .fuellung { flex: 1; border-bottom: 1px dotted rgba(166,125,60,.5); transform: translateY(-.28rem); min-width: 1.5rem; }
.gericht .preis { font-family: "Playfair Display", Georgia, serif; font-size: 1.05rem; white-space: nowrap; }

/* --- Reservationsanstoss --------------------------------------------------- */
.res-leiste { display: grid; gap: 1rem; margin-top: 2.25rem; }
@media (min-width: 44rem) { .res-leiste { grid-template-columns: repeat(3, minmax(0,1fr)) auto; align-items: end; } }
.feld label {
  display: block; font-size: .68rem; letter-spacing: var(--spur-klein);
  text-transform: uppercase; color: var(--gold-hell); margin-bottom: .55rem;
}
.feld select, .feld input {
  width: 100%; padding: .95rem 1rem; font: inherit; font-size: .95rem;
  background: var(--gruen-2); color: var(--creme);
  border: 1px solid var(--gruen-linie); border-radius: 0;
  appearance: none;
}
.feld select:focus, .feld input:focus { outline: 2px solid var(--gold-hell); outline-offset: 2px; }
.res-hinweis { margin-top: 1.5rem; font-size: .86rem; color: var(--creme-leise); }
.res-hinweis a { color: var(--gold-hell); }

/* --- Bewertung ------------------------------------------------------------- */
.bewertung { text-align: center; }
.bewertung .zahl { font-family: "Playfair Display", Georgia, serif; font-size: clamp(3rem, 8vw, 5rem); color: var(--gold-hell); line-height: 1; }
.bewertung .sterne { color: var(--gold); letter-spacing: .3em; margin: 1rem 0 .75rem; font-size: 1.1rem; }

/* --- Zeiten ---------------------------------------------------------------- */
.zeiten { width: 100%; border-collapse: collapse; }
.zeiten th { text-align: left; font-weight: 400; padding: .85rem 0; border-bottom: 1px solid var(--gruen-linie); white-space: nowrap; }
.zeiten td { text-align: right; padding: .85rem 0; border-bottom: 1px solid var(--gruen-linie); color: var(--creme); }
.zeiten tr.heute th, .zeiten tr.heute td { color: var(--gold-hell); }
.zeiten .zu { color: var(--creme-leise); }

/* --- Meldungsbalken (Ferien, Feiertage) ------------------------------------ */
.meldung { background: var(--gold); color: #14100A; text-align: center; padding: .8rem var(--rand); font-size: .88rem; }

/* --- Fussbereich ----------------------------------------------------------- */
.fuss { background: var(--gruen-tief); color: var(--creme-leise); padding-block: clamp(3rem, 7vw, 5.5rem) 2rem; }
.fuss a { color: var(--creme); text-decoration: none; }
.fuss a:hover { color: var(--gold-hell); }
.fuss-raster { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .fuss-raster { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; } }
.fuss h3 { font-family: Inter, sans-serif; font-size: .72rem; letter-spacing: var(--spur-klein); text-transform: uppercase; color: var(--gold-hell); margin-bottom: 1.1rem; }
.fuss .zeile { margin-bottom: .45rem; }
.fuss-unten {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--gruen-linie);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .78rem;
}
/* Einzige Rundung im ganzen System - wie bei Sacher die Social-Icons */
.social { display: flex; gap: .6rem; }
.social a {
  width: 38px; height: 38px; border: 1px solid var(--gruen-linie); border-radius: 100%;
  display: grid; place-items: center; font-size: .72rem; letter-spacing: .04em;
  transition: border-color .3s var(--ruhig), color .3s var(--ruhig);
}
.social a:hover { border-color: var(--gold-hell); color: var(--gold-hell); }

/* --- Hilfsklassen ---------------------------------------------------------- */
.nur-lesbar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.zentriert { text-align: center; }
.zentriert p { margin-inline: auto; }
.zentriert .ornament { justify-content: center; }

/* --- Kartenseite ----------------------------------------------------------- */
.karten-sprung {
  position: sticky; top: 0; z-index: 40;
  background: var(--gruen-tief); border-bottom: 1px solid var(--gruen-linie);
  padding-block: .9rem;
}
.karten-sprung .huelle { display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; }
.karten-sprung .huelle::-webkit-scrollbar { display: none; }
.karten-sprung a {
  font-size: .7rem; letter-spacing: var(--spur-klein); text-transform: uppercase;
  color: var(--creme-leise); text-decoration: none; white-space: nowrap;
  padding-bottom: .3rem; border-bottom: 1px solid transparent;
  transition: color .3s var(--ruhig), border-color .3s var(--ruhig);
}
.karten-sprung a:hover { color: var(--gold-hell); border-bottom-color: var(--gold-hell); }

.gruppen-titel {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 1.75rem;
}
.untergruppe {
  font-family: Inter, sans-serif; font-size: .72rem; font-weight: 500;
  letter-spacing: var(--spur-klein); text-transform: uppercase; color: var(--gold);
  margin: 2.5rem 0 .5rem;
}
.untergruppe:first-of-type { margin-top: 0; }

/* Mehrere Groessen nebeneinander: M 24.50  L 34.90  XL 68.90 */
.preis .variante { display: inline-block; margin-left: 1.4rem; text-align: right; }
.preis .variante:first-child { margin-left: 0; }
.preis em {
  display: block; font-style: normal;
  font-family: Inter, sans-serif; font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-leise); margin-bottom: .1rem;
}
.dunkel .preis em, .tief .preis em { color: var(--creme-leise); }

/* --- Anfrageformulare ------------------------------------------------------ */
.formular {
  display: grid; gap: 1.25rem; margin-top: 2.25rem;
}
@media (min-width: 44rem) { .formular { grid-template-columns: 1fr 1fr; } }
.formular .feld.breit { grid-column: 1 / -1; }

.formular label {
  display: block; font-size: .68rem; letter-spacing: var(--spur-klein);
  text-transform: uppercase; color: var(--gold); margin-bottom: .55rem; font-weight: 500;
}
.dunkel .formular label, .tief .formular label { color: var(--gold-hell); }

.formular input, .formular select, .formular textarea {
  width: 100%; padding: .95rem 1rem; font: inherit; font-size: .95rem;
  border-radius: 0; appearance: none;
  background: #fff; color: var(--tinte);
  border: 1px solid rgba(166,125,60,.45);
}
.dunkel .formular input, .dunkel .formular select, .dunkel .formular textarea,
.tief .formular input, .tief .formular select, .tief .formular textarea {
  background: var(--gruen-2); color: var(--creme); border-color: var(--gruen-linie);
}
.formular textarea { resize: vertical; min-height: 7rem; }
.formular input:focus, .formular select:focus, .formular textarea:focus {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
.dunkel .formular :focus, .tief .formular :focus { outline-color: var(--gold-hell); }

/* Pflichtfeld-Sternchen in Gold, nicht in Rot - Rot gehoert nicht zur Palette */
.formular label span { color: var(--gold); }

.formular-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: .5rem; }
.formular-fuss .knopf { border: 1px solid var(--gold); }
.pflichtnote { font-size: .8rem; color: var(--tinte-leise); margin: 0; max-width: 34em; }
.dunkel .pflichtnote, .tief .pflichtnote { color: var(--creme-leise); }
.pflichtnote a { color: var(--gold-tief); }
.dunkel .pflichtnote a, .tief .pflichtnote a { color: var(--gold-hell); }

/* --- Buchungsstrecke -------------------------------------------------------- */
.res-suche { display: grid; gap: 1rem; align-items: end; }
@media (min-width: 40rem) { .res-suche { grid-template-columns: 1fr 1.4fr auto; } }
.res-suche label {
  display: block; font-size: .68rem; letter-spacing: var(--spur-klein);
  text-transform: uppercase; color: var(--gold); margin-bottom: .55rem; font-weight: 500;
}
.res-suche input, .res-suche select {
  width: 100%; padding: .95rem 1rem; font: inherit; font-size: .95rem;
  background: #fff; color: var(--tinte); border: 1px solid rgba(166,125,60,.45);
  border-radius: 0; appearance: none;
}

.zeiten { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.zeitknopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 5rem; min-height: 3rem; padding: 0 .9rem;
  border: 1px solid var(--gold); color: var(--gold-tief);
  text-decoration: none; font-variant-numeric: tabular-nums;
  transition: background .25s var(--ruhig), color .25s var(--ruhig);
}
.zeitknopf:hover { background: var(--gold); color: #14100A; }
.zeitknopf.gewaehlt { background: var(--gold); color: #14100A; font-weight: 600; }
.zeitknopf.belegt {
  border-color: rgba(26,31,27,.16); color: rgba(26,31,27,.32);
  text-decoration: line-through; cursor: default;
}
.zeitknopf.belegt:hover { background: transparent; color: rgba(26,31,27,.32); }

.hinweiskasten {
  margin-top: 2rem; padding: 1.5rem;
  border: 1px solid var(--gold); background: rgba(166,125,60,.07);
}
.dunkel .hinweiskasten, .tief .hinweiskasten { background: rgba(211,170,99,.08); }

.bestaetigung { display: grid; gap: .1rem; margin: 2rem 0; }
.bestaetigung div {
  display: flex; justify-content: space-between; gap: 2rem;
  padding: .85rem 0; border-bottom: 1px solid var(--gruen-linie);
}
.bestaetigung span { color: var(--creme-leise); }
.bestaetigung strong { font-family: "Playfair Display", Georgia, serif; font-size: 1.15rem; font-weight: 400; }

/* --- Gut zu wissen (FAQ) --------------------------------------------------- */
.fragen { margin-top: 2rem; border-top: 1px solid rgba(166,125,60,.35); }
.fragen details { border-bottom: 1px solid rgba(166,125,60,.35); }
.fragen summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2.5rem 1.1rem 0; position: relative;
  font-family: "Playfair Display", Georgia, serif; font-size: 1.15rem;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after {
  content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 1.4rem; line-height: 1; transition: transform .3s var(--ruhig);
}
.fragen details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.fragen p { margin: 0 0 1.25rem; max-width: 60ch; }
.fragen a { color: var(--gold-tief); }
.leise { color: var(--tinte-leise); font-size: .95rem; }
.tief .leise { color: var(--creme-leise); }
.tief .leise a { color: var(--gold-hell); }


/* --- Vertrauensstreifen unter dem Hero ------------------------------------ */
.vertrauen { background: var(--gruen-2); border-top: 1px solid var(--gruen-linie); border-bottom: 1px solid var(--gruen-linie); }
.vertrauen .huelle {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem;
  padding-block: 1.4rem;
}
@media (min-width: 52rem) { .vertrauen .huelle { grid-template-columns: repeat(4, 1fr); } }
.vertrauen a, .vertrauen div { display: block; text-decoration: none; color: var(--creme); }
.vertrauen strong {
  display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.1; color: var(--gold-hell);
}
.vertrauen .stern { font-size: .8em; }
.vertrauen span { display: block; font-size: .8rem; color: var(--creme-leise); margin-top: .3rem; letter-spacing: .01em; }
.vertrauen a:hover strong { color: var(--creme); }

/* --- Instagram-Feed (Bilder liegen bei uns, nichts wird von Meta geladen) - */
.feed { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 40rem) { .feed { grid-template-columns: repeat(4, 1fr); gap: .8rem; } }
.beitrag { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--gruen-2); }
.beitrag img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ruhig); }
.beitrag:hover img { transform: scale(1.04); }
.beitrag .zeichen {
  position: absolute; top: .6rem; right: .6rem; color: #fff; font-size: .85rem;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.beitrag .text {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem .75rem .65rem;
  font-size: .72rem; line-height: 1.35; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
  opacity: 0; transition: opacity .35s var(--ruhig);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.beitrag:hover .text, .beitrag:focus-visible .text { opacity: 1; }
.leise { color: var(--tinte-leise); font-size: .86rem; }
.dunkel .leise, .tief .leise { color: var(--creme-leise); }

/* =============================================================================
   Scroll-Kino - drei Effekte, alle ruhig, alle ohne Bibliothek.
   Fortschritt kommt als --p (0..1) aus zw.js; ohne JS oder bei
   prefers-reduced-motion bleibt alles statisch und vollstaendig lesbar.
   ========================================================================== */

/* --- 1. Hero bleibt kurz stehen, Text loest sich, Bild kommt naeher ------- */
@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .js .hero { display: block; min-height: 0; height: calc(56vw + 38vh); overflow: visible; }
  .js .hero-band { position: sticky; top: 0; height: 56vw; overflow: hidden; }
  .js .hero-band video, .js .hero-band img.poster {
    transform: scale(calc(1 + var(--p, 0) * 0.07));
    filter: saturate(0.62) contrast(1.04) brightness(calc(1 - var(--p, 0) * 0.55));
    transform-origin: 50% 40%;
    will-change: transform;
  }
  .js .hero-inhalt {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding-top: 0;
    opacity: calc(1 - var(--p, 0) * 1.35);
    transform: translateY(calc(var(--p, 0) * -48px));
  }
}

/* --- 2. Die Gerichte: vier gleich gebaute Karten --------------------------
       Kein Scroll-Kino mehr. Jede Karte hat ihre eigene Rasterzelle und ihre
       eigene Bildbuehne - darum kann keine die Hoehe einer anderen vorgeben,
       und genau daraus entstand das Springen (gemessen 573 gegen 656 px).
       Die vier Aufnahmen des Betriebs sind 780x487, 723x452, 780x487 und
       735x459 px gross, das Verhaeltnis liegt zwischen 1.5996 und 1.6016.
       Die Buehne steht auf 8/5 = 1.6000, also schneidet object-fit: cover
       weniger als 0.1 Prozent weg. Eine Spalte bleibt in jeder Fensterbreite
       unter 520 px: kein Foto wird je hochskaliert.                         */
.gerichte-kopf { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.gerichte-raster {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
}

/* Untereinander wird die Karte gedeckelt: ohne Deckel waechst das Bild auf
   einem 600-px-Schirm auf 540 px Hoehe und die Sektion auf 2400 px. */
.gerichte-karte {
  background: var(--gruen-2);
  display: flex; flex-direction: column;
  width: 100%; max-width: 30rem; margin-inline: auto;
}

/* Die feste Buehne: die Hoehe kommt aus der Spaltenbreite, nicht aus der
   Datei. Kein max-height, kein position: absolute. «flex: none» haelt sie
   auch dann auf ihrem Verhaeltnis, wenn die Nachbarkarte die Zeile streckt. */
.gerichte-bild { aspect-ratio: 8 / 5; flex: none; }
.gerichte-bild img { height: 100%; object-fit: cover; }
/* Der dunkle Verlauf zur Bildunterkante bindet die hellen Teller ins
   Nachtgruen ein. Er stand bisher auf .gang-bild::after; ::after ist auf
   .bild schon die Schwarzblende, darum hier ::before - und ohne z-index,
   damit die Blende darueber bleibt. */
.gerichte-bild::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14,23,18,.55) 0%, rgba(14,23,18,0) 55%);
}

/* Die goldene Haarlinie trennt Foto und Text wie der Zierstrich der
   gedruckten Karte. */
.gerichte-text {
  flex: 1 1 auto;
  border-top: 1px solid var(--gold);
  padding: 1.25rem 1.25rem 1.5rem;
}
.gerichte-text .kicker { margin-bottom: .6rem; }
.gerichte-text h3 {
  color: var(--creme); margin: 0 0 .6rem;
  overflow-wrap: break-word;
  /* Nicht kleiner als bisher: heute steht der Name auf dem Handy auf 24 px. */
  font-size: clamp(1.5rem, 4.6vw, 1.75rem);
}
.gerichte-text p { color: var(--creme-leise); margin: 0; }

.gerichte-fuss { margin: clamp(2rem, 5vw, 3rem) 0 0; text-align: center; }
/* .knopf.leer wird nur unter .dunkel aufgehellt, nicht unter .tief - ohne
   diese Regel stuende der Knopf matter da als derselbe Knopf eine Sektion
   hoeher. */
.tief .knopf.leer { color: var(--gold-hell); border-color: var(--gold-hell); }
.tief .knopf.leer:hover { background: var(--gold-hell); color: #14100A; }

/* Mittlere Breiten: eine gedeckelte Karte liesse links und rechts Totraum,
   eine Karte ueber die ganze Breite wuerde das 723-px-Foto auf 691 px
   ziehen. Darum legt sich die Karte hier quer - das Foto bleibt bei rund
   400 px, und die Sektion wird knapp halb so hoch. */
@media (min-width: 46rem) {
  /* «1fr» macht alle Zeilen so hoch wie die hoechste. Dadurch sind auch quer
     liegende Karten exakt gleich hoch - sonst streckt der laengste Text (95
     Zeichen beim Wienerschnitzel) nur dessen Bild, und die vier Fotos waeren
     wieder unterschiedlich hoch (gemessen 236 gegen 226 px). */
  .gerichte-raster { grid-auto-rows: 1fr; }
  .gerichte-karte { flex-direction: row; align-items: stretch; max-width: none; }
  .gerichte-bild { width: 56%; }
  .gerichte-text {
    border-top: 0; border-left: 1px solid var(--gold);
    padding: clamp(1.25rem, 3vw, 2rem);
    display: flex; flex-direction: column; justify-content: center;
    /* «min-width: 0» haelt die Textspalte von der Mindestbreite ihres
       laengsten Wortes frei. Ohne sie wuchs die Karte bei 704 px auf 648 px,
       obwohl die Huelle nur 634 px Inhalt hat - sie lief in den Seitenrand
       und stand nicht mehr auf der Linie der Nachbarsektionen. */
    min-width: 0;
  }
}

/* Zwei Spalten erst, wenn eine Spalte das Foto wirklich groesser zeigt als
   das Handy (dort sind es rund 337 px). Bei 60rem sind es rund 412 px. */
@media (min-width: 60rem) {
  .gerichte-raster { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }
  .gerichte-karte { flex-direction: column; }
  .gerichte-bild { width: auto; }
  .gerichte-text {
    border-top: 1px solid var(--gold); border-left: 0;
    padding: 1.5rem 1.75rem 1.75rem;
    display: block;
  }
}

/* --- 3. Speisekarte: Kategorie bleibt beim Scrollen oben stehen ------------ */
.gruppen-titel { position: sticky; top: 4.6rem; z-index: 5; padding: .7rem 0; margin: 0 0 1rem; background: var(--papier); }
.sektion.hell-2 .gruppen-titel { background: var(--papier-2); }
@media (max-width: 48rem) { .gruppen-titel { top: 4rem; } }

/* Der Hero-Inhalt liegt IM Band, damit er im Scroll-Kino mit dem Band stehen
   bleibt. Unten im Band verankern darf man ihn aber nur dort, wo das Band hoch
   genug ist: absolut positionierter Inhalt waechst nach OBEN aus dem Band
   heraus, sobald er hoeher wird als das Band - auf dem Handy lief die
   Ueberschrift so hinter die Kopfzeile. Das Scroll-Kino beginnt bei 48rem,
   also gilt die Verankerung auch erst ab dort. */
@media (min-width: 48rem) {
  .hero-band .hero-inhalt { position: absolute; left: 0; right: 0; bottom: 0; padding-top: 0; }
}
/* Schmal: das Band traegt den Inhalt und waechst mit ihm. Video, Poster und
   Schleier bleiben absolut - sie fuellen damit das gewachsene Band. */
@media (max-width: 47.999rem) {
  .hero-band { position: relative; inset: auto; align-self: stretch; display: grid; align-items: end; }
  .hero-band .hero-inhalt { position: relative; }
}


/* --- Einwilligung ---------------------------------------------------------- */
/* Spezifisch genug, um die allgemeinen Formularregeln zu schlagen:
   .formular label und .formular input wiegen (0,1,1) - eine blosse Klasse
   .ankreuz (0,1,0) verliert dagegen, egal wo sie steht. */
.formular label.ankreuz {
  display: flex; align-items: flex-start; gap: .75rem; cursor: pointer;
  margin-bottom: 0; text-transform: none; letter-spacing: normal;
  font-size: 1rem; font-weight: 400; color: var(--tinte);
}
.formular .ankreuz input[type="checkbox"] {
  width: 1.4rem; height: 1.4rem; min-height: 0; flex: 0 0 auto;
  margin: .1rem 0 0; padding: 0;
  appearance: auto; -webkit-appearance: checkbox;   /* das Formular setzt sonst «none» */
  accent-color: var(--gold); cursor: pointer;
  background: #fff; border: 1px solid rgba(166,125,60,.45); border-radius: 3px;
}
.formular .ankreuz span {
  font-size: .92rem; line-height: 1.55; color: var(--tinte-leise);
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.dunkel .formular .ankreuz span, .tief .formular .ankreuz span { color: var(--creme-leise); }
.formular label.ankreuz:hover span { color: var(--tinte); }

/* =============================================================================
   Kopfzeile: links das Menü, Mitte das Logo, rechts die drei Hauptaktionen.
   Was ein Gast wirklich sucht, steht damit immer sichtbar rechts - alles
   Weitere liegt im Menü, ohne die Zeile zu überladen.
   ========================================================================== */
.kopf { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }

.burger {
  display: inline-flex; align-items: center; gap: .6rem; justify-self: start;
  background: none; border: 1px solid var(--gruen-linie); color: var(--creme);
  padding: .65rem .9rem; cursor: pointer;
  font-size: .72rem; letter-spacing: var(--spur-klein); text-transform: uppercase;
  transition: border-color .3s var(--ruhig), color .3s var(--ruhig);
}
.burger:hover { border-color: var(--gold); color: var(--gold-hell); }
/* Die drei Striche als eigener kleiner Block neben dem Wort */
.burger .striche { display: inline-flex; flex-direction: column; gap: 4px; }
.burger .striche span { display: block; width: 18px; height: 1px; background: currentColor; }
.burger-wort { line-height: 1; }

.kopf .marke { justify-self: center; }

.schnellnavi { justify-self: end; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.schnellnavi a {
  font-size: .74rem; letter-spacing: var(--spur-klein); text-transform: uppercase;
  color: var(--creme); text-decoration: none; padding-block: .4rem;
  border-bottom: 1px solid transparent; white-space: nowrap;
  transition: color .3s var(--ruhig), border-color .3s var(--ruhig);
}
.schnellnavi a:hover { color: var(--gold-hell); border-bottom-color: var(--gold-hell); }
.schnellnavi .knopf { padding: .8rem 1.5rem; font-size: .72rem; }
.schnellnavi .knopf:hover { border-bottom-color: transparent; color: #fff; }

/* Das Menü liegt immer über der Seite, auch auf dem Grossbildschirm */
.navi {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.6rem; background: var(--gruen-tief);
  transform: translateY(-100%); transition: transform .5s var(--ruhig);
}
.navi.offen { transform: none; }
.navi a { font-size: clamp(1.1rem, 2.4vw, 1.5rem); letter-spacing: .04em; text-transform: none; }

/* Auf schmalen Geräten verschwindet die Schnellnavigation bis auf den Knopf */
@media (max-width: 52rem) {
  .schnellnavi a:not(.knopf) { display: none; }
  .schnellnavi .knopf { padding: .7rem 1.1rem; font-size: .68rem; }
  .burger-wort { display: none; }
  .burger { padding: .75rem; justify-content: center; }
}

/* --- Das XL: die Herausforderung ------------------------------------------- */
.xl-sektion { background: var(--gruen-tief); color: var(--creme); }
.xl-sektion h2, .xl-sektion .xl-frage { color: var(--creme); }
.xl-sektion p { color: var(--creme-leise); }
.xl-titel { margin-bottom: .25rem; }
.xl-gramm {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1;
  color: var(--gold-hell); margin: .25rem 0 .75rem;
}
.xl-frage {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-style: italic;
  margin-bottom: 1.25rem;
}
.xl-preis {
  border-top: 1px solid var(--gold); padding-top: .9rem; margin-top: 1.75rem;
  font-size: .8rem; letter-spacing: var(--spur-klein); text-transform: uppercase;
  color: var(--gold-hell);
}

/* =============================================================================
   Diashow: wischbare Bilderreihe.
   Ohne JavaScript bleibt es eine scrollbare Reihe - kein Bild wird unerreichbar.
   ========================================================================== */
.diashow { position: relative; }
.dia-spur {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem; scrollbar-width: thin;
}
.dia-spur::-webkit-scrollbar { height: 3px; }
.dia-spur::-webkit-scrollbar-thumb { background: var(--gold); }

.dia {
  flex: 0 0 min(78vw, 30rem); scroll-snap-align: start; margin: 0;
  position: relative; overflow: hidden; background: var(--gruen-2);
  text-decoration: none; color: inherit;
}
.dia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.diashow.hoch .dia img { aspect-ratio: 3 / 4; }
.dia figcaption {
  display: block; padding: 1rem 1.15rem 1.25rem;
  background: var(--gruen-tief); color: var(--creme);
}
.dia-kicker {
  display: block; font-size: .66rem; letter-spacing: var(--spur-klein);
  text-transform: uppercase; color: var(--gold-hell); margin-bottom: .4rem;
}
.dia figcaption strong {
  display: block; font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem; font-weight: 400; margin-bottom: .35rem;
}
.dia-text { display: block; font-size: .88rem; line-height: 1.5; color: var(--creme-leise); }

.dia-pfeil {
  position: absolute; top: 34%; z-index: 3;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(14,23,18,.86); color: var(--creme);
  border: 1px solid var(--gold); cursor: pointer;
  font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .25s var(--ruhig), opacity .25s var(--ruhig);
}
.dia-pfeil:hover { background: var(--gold); color: #14100A; }
.dia-pfeil.links { left: -1.1rem; }
.dia-pfeil.rechts { right: -1.1rem; }
.dia-pfeil[hidden] { display: none; }
@media (max-width: 52rem) { .dia-pfeil { display: none !important; } }

/* Instagram-Kacheln in der Diashow bleiben quadratisch */
.dia.beitrag img { aspect-ratio: 1 / 1; }
.dia.beitrag .zeichen {
  position: absolute; top: .7rem; right: .8rem; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.6); font-size: 1rem;
}

/* =============================================================================
   Reservieren per Telefon
   Solange die Online-Buchung nicht abgenommen ist, traegt diese Nummer die
   ganze Sektion - sie muss darum so gross sein wie eine Ueberschrift und auf
   dem Handy mit einem Daumen zu treffen.
   ========================================================================== */
.res-telefon { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.res-nummer {
  display: inline-block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.1;
  color: var(--gold-hell); text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: .15rem;
  transition: color .3s var(--ruhig), border-color .3s var(--ruhig);
}
.res-nummer:hover, .res-nummer:focus-visible { color: var(--creme); border-color: var(--creme); }
.res-telefon .res-hinweis { margin-top: 1.1rem; max-width: 40rem; }