/* =============================================================================
   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: Bild und Text gehoeren je Gang zusammen -------------
       Handy: die Gaenge stehen untereinander, jeder als Karte.
       Breiter Schirm mit Bewegungswunsch: die Gaenge liegen uebereinander und
       wechseln beim Scrollen (weiter unten in der Medienabfrage).            */
.sequenz { background: var(--gruen-tief); color: var(--creme); }
.sequenz-buehne { position: relative; }
.sequenz-liste { display: grid; gap: clamp(2.5rem, 7vw, 4rem); }

.gang-bild { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gruen-2); }
.gang-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gang-bild::after {
  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%);
}
.gang-text { margin-top: 1.25rem; }
.gang-text .kicker { color: var(--gold-hell); }
.gang-text h2 { color: var(--creme); margin-bottom: .75rem; font-size: clamp(1.5rem, 5.5vw, 2rem); }
.gang-text p { color: var(--creme-leise); max-width: 34em; }

.sequenz-punkte { display: none; gap: .55rem; margin-top: 1.5rem; }
.sequenz-punkte span { width: 2.4rem; height: 2px; background: var(--gruen-linie); transition: background .4s var(--ruhig); }
.sequenz-punkte span.aktiv { background: var(--gold); }
.sequenz-hinweis { font-size: .78rem; color: var(--creme-leise); margin-top: 1rem; }

/* Breiter Schirm mit Bewegungswunsch: die Gaenge liegen uebereinander in
   derselben Rasterzelle und blenden beim Scrollen ineinander. Links das Bild,
   rechts der Text - beides gehoert zum selben Gang und wechselt gemeinsam. */
@media (min-width: 48rem) and (prefers-reduced-motion: no-preference) {
  .js .sequenz { height: 330vh; }
  .js .sequenz-buehne { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; }
  .js .sequenz-buehne .huelle { position: relative; width: 100%; }
  .js .sequenz-liste { display: block; }

  .js .gang {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 1.35fr 1fr;
    gap: clamp(2rem, 5vw, 5rem); align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity .9s var(--ruhig);
  }
  .js .gang.aktiv { opacity: 1; pointer-events: auto; }
  /* Das Bild blendet weich, der Text hart: zwei halbdurchsichtige
     Ueberschriften uebereinander sind waehrend der Blende unlesbar. */
  .js .gang:not(.aktiv) .gang-text { visibility: hidden; }
  /* Der erste Gang traegt die Hoehe der Buehne, damit die Zelle nicht einfaellt. */
  .js .gang:first-child { position: relative; }

  .js .gang-bild { max-height: 74vh; }
  .js .gang-bild img { transform: scale(1.04); transition: transform 1.6s var(--ruhig); }
  .js .gang.aktiv .gang-bild img { transform: scale(1); }
  .js .gang-text { margin-top: 0; }

  .js .sequenz-punkte { display: flex; position: absolute; left: 0; bottom: -3rem; }
}

/* --- 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; }