/* Maison Ardoise — Stylesheet.

   Reihenfolge: Tokens · Bausteine · Bereiche in Seitenreihenfolge · Tablet ·
   Phone · Motion. Keine Hexwerte ausserhalb des Tokenblocks.

   Die Farben sind aus den Referenzaufnahmen gemessen, nicht geschaetzt. Zwei
   davon sind das Ruecksprat der Gestaltung:

   - Der Grund ist #0e1317 — derselbe Wert, den die Vorlage ihrem Slider als
     Hintergrund mitgibt.
   - Abgesetzte Baender sind *dunkler* als der Grund, nicht heller. Das ist der
     Unterschied zu einer hellen Seite: auf dunklem Grund traegt die Tiefe, und
     Weiss bleibt dem Wichtigen vorbehalten.
*/

/* ===================================================== 1 · Tokens ======= */

:root {
  /* Flaechen, von hell nach dunkel */
  --leiste: #15181d;
  --grund: #0e1317;
  --tief: #080c0f;

  /* Marke */
  --kupfer: #c19977;
  --kupfer-hell: #d8b89e;
  --anthrazit: #222d3b;

  /* Schrift */
  --weiss: #ffffff;
  --text: #a4a9b0;
  --leise: #737a84;

  /* Linien */
  --linie: rgba(193, 153, 119, .26);
  --linie-leise: rgba(255, 255, 255, .09);

  /* Schriftfamilien */
  --titelschrift: 'Oswald', 'Helvetica Neue', sans-serif;
  --textschrift: 'Mulish', 'Helvetica Neue', sans-serif;
  --zierschrift: 'Sorts Mill Goudy', Georgia, serif;

  /* Groessen. Feste Werte statt vw — nur der Hero skaliert, und der an der
     Containerbreite, nicht am Fenster. */
  --t-riesig: clamp(3.2rem, 8cqw, 7.5rem);
  --t-1: 2.75rem;
  --t-2: 2.25rem;
  --t-3: 1.75rem;
  --t-4: 1.375rem;
  --t-5: 1.125rem;
  --t-text: 1rem;
  --t-klein: .875rem;
  --t-winzig: .75rem;

  /* Rhythmus */
  --schale: 1200px;
  --luft-bereich: 8.5rem;
  --luft-gross: 3.5rem;
  --luft: 2rem;
  --luft-klein: 1rem;

  --rund: 2px;
  --kurve: cubic-bezier(.22, .61, .36, 1);
}

/* ================================================== 2 · Bausteine ======= */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--textschrift);
  font-size: var(--t-text);
  line-height: 1.875;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--titelschrift);
  font-weight: 200;
  color: var(--weiss);
  line-height: 1.16;
  margin: 0;
  letter-spacing: .01em;
}

p { margin: 0 0 var(--luft-klein); }

.schale {
  width: 100%;
  max-width: var(--schale);
  margin-inline: auto;
  padding-inline: 2rem;
}

.mitte { text-align: center; margin-inline: auto; }

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

.sprungmarke {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--kupfer); color: var(--tief);
  padding: .6rem 1.2rem; border-radius: var(--rund);
  transition: top .2s var(--kurve);
}
.sprungmarke:focus { top: 1rem; }

/* Der Symbolsatz liegt versteckt am Seitenanfang. `fill` und `stroke` stehen
   bewusst als Attribute an den Symbolen selbst und nicht hier: eine CSS-Regel
   wie `.symbole symbol path` greift nicht in die Klone, die `<use>` erzeugt. */
.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Die Ueberzeile — kursive Zierschrift in Kupfer. Sie ist das
   wiederkehrende Zeichen der Vorlage und steht vor jedem Titel. */
.ueberzeile {
  font-family: var(--zierschrift);
  font-style: italic;
  font-size: var(--t-4);
  color: var(--kupfer);
  margin: 0 0 .6rem;
  line-height: 1.4;
}

.titel { font-size: var(--t-2); margin-bottom: var(--luft); }

.raute { display: block; width: 200px; height: 12px; color: var(--kupfer); }
.raute.mitte { margin: 0 auto var(--luft-gross); }

/* Knoepfe */
.knopf {
  display: inline-block;
  font-family: var(--titelschrift);
  font-size: var(--t-klein);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--weiss);
  background: var(--anthrazit);
  border: 1px solid var(--anthrazit);
  border-radius: var(--rund);
  padding: 1.05rem 2.4rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .35s var(--kurve), border-color .35s var(--kurve);
}
/* Der Fuellbalken faehrt von unten ein — dieselbe Bewegung wie in der
   Vorlage, dort ueber ein Pseudoelement mit `transform`. */
.knopf::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--kupfer);
  transform: translateY(101%);
  transition: transform .4s var(--kurve);
}
.knopf { z-index: 0; }
.knopf:hover, .knopf:focus-visible { color: var(--tief); border-color: var(--kupfer); }
.knopf:hover::before, .knopf:focus-visible::before { transform: translateY(0); }

.knopf--leer { background: transparent; border-color: var(--linie); color: var(--kupfer); }
.knopf--schmal { padding: .85rem 1.6rem; }
.knopf--voll { width: 100%; }

.pfeil {
  width: 2.75rem; height: 2.75rem;
  background: transparent;
  border: 1px solid var(--linie);
  border-radius: 50%;
  color: var(--kupfer);
  font-size: var(--t-5);
  cursor: pointer;
  transition: background .3s var(--kurve), color .3s var(--kurve);
}
.pfeil:hover, .pfeil:focus-visible { background: var(--kupfer); color: var(--tief); }

:where(a, button, input, select):focus-visible {
  outline: 2px solid var(--kupfer);
  outline-offset: 3px;
}

/* Die Zierranke — selbst gezeichnet, flankiert Karte und Reservierung.
   Strichstaerke und Fuellung stehen am Symbol; hier nur Lage und Farbe. */
.ranke {
  position: absolute; top: 0; bottom: 0;
  width: 60px; color: var(--kupfer);
  opacity: .4; pointer-events: none;
}
.ranke--links { left: 1.5rem; }
.ranke--rechts { right: 1.5rem; transform: scaleX(-1); }

/* Oeffnungszeiten — als Beschreibungsliste, weil es genau das ist. */
.zeiten { margin: 0; display: grid; gap: .35rem var(--luft); }
.zeiten div { display: flex; justify-content: space-between; gap: var(--luft-klein);
  border-bottom: 1px solid var(--linie-leise); padding-bottom: .35rem; }
.zeiten dt { color: var(--text); }
.zeiten dd { margin: 0; color: var(--kupfer); white-space: nowrap; }
.zeiten--gross { margin: var(--luft) 0; font-size: var(--t-5); }

/* ==================================================== 3 · Kopf ========== */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  transition: background .35s var(--kurve), box-shadow .35s var(--kurve);
}
.kopf--geklebt {
  background: rgba(8, 12, 15, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--linie-leise);
}
.kopf__reihe {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--luft); padding-block: 1.15rem;
}

.marke { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--weiss); }
.marke__zeichen { width: 34px; height: 34px; color: var(--kupfer); flex: none; }
.marke__wort {
  font-family: var(--titelschrift); font-weight: 200;
  font-size: var(--t-4); letter-spacing: .12em; text-transform: uppercase;
}
.marke--gross .marke__zeichen { width: 48px; height: 48px; }
.marke--gross .marke__wort { font-size: var(--t-3); }

.nav__liste { display: flex; gap: 2.1rem; list-style: none; margin: 0; padding: 0; }
.nav__liste a {
  font-family: var(--titelschrift); font-size: var(--t-klein); font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  color: var(--weiss); position: relative; padding-block: .3rem;
}
.nav__liste a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--kupfer); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--kurve);
}
.nav__liste a:hover::after, .nav__liste a[aria-current]::after { transform: scaleX(1); }

.kopf__rechts { display: flex; align-items: center; gap: var(--luft-klein); }

.brenner {
  display: none; width: 2.75rem; height: 2.75rem;
  background: transparent; border: 1px solid var(--linie);
  border-radius: var(--rund); cursor: pointer; position: relative;
}
.brenner__striche, .brenner__striche::before, .brenner__striche::after {
  position: absolute; left: 50%; width: 18px; height: 1.5px;
  background: var(--weiss); transform: translateX(-50%);
  transition: transform .3s var(--kurve), opacity .2s;
}
.brenner__striche { top: 50%; margin-top: -.75px; }
.brenner__striche::before { content: ''; top: -6px; }
.brenner__striche::after { content: ''; top: 6px; }

.mobilnav {
  position: fixed; inset: 0; z-index: 60;
  background: var(--tief);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--luft); padding: var(--luft);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--kurve), visibility .3s;
}
.mobilnav--offen { opacity: 1; visibility: visible; }
.mobilnav__zu {
  position: absolute; top: 1.4rem; right: 1.4rem;
  width: 2.75rem; height: 2.75rem; padding: .55rem;
  background: transparent; border: 1px solid var(--linie);
  border-radius: var(--rund); color: var(--weiss); cursor: pointer;
}
.mobilnav__zu svg { width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; }
.mobilnav__liste { list-style: none; margin: 0; padding: 0; text-align: center; }
.mobilnav__liste li + li { margin-top: var(--luft-klein); }
.mobilnav__liste a {
  font-family: var(--titelschrift); font-weight: 200; font-size: var(--t-3);
  text-transform: uppercase; letter-spacing: .1em;
  text-decoration: none; color: var(--weiss);
}

/* ==================================================== 4 · Hero ========== */

.hero {
  position: relative; container-type: inline-size;
  min-height: min(88vh, 900px);
  display: grid; place-items: center;
  /* Oben etwas knapper: so passt die ganze Komposition samt Knopf in eine
     16/10-Kachel, ohne dass der Zuschnitt sie anschneidet. */
  padding-block: calc(var(--luft-bereich) - 2.5rem) var(--luft-bereich);
  overflow: hidden;
}

.hero__ebenen { position: absolute; inset: 0; }
.hero__ebene {
  position: absolute; object-fit: cover;
  border-radius: var(--rund);
  will-change: transform;
}
/* Die Komposition der Vorlage: zwei grosse Bloecke, die an den Raendern
   anschneiden, dazu sechs kleine Kacheln. Die Werte sind nachempfunden, nicht
   uebernommen — die eigenen Bilder haben andere Seitenverhaeltnisse. */
.hero__ebene--1 { left: -2%;  top: 16%;    width: 20rem; height: 27rem; }
.hero__ebene--2 { right: -2%; top: 9%;     width: 19rem; height: 26rem; }
.hero__ebene--3 { left: 9%;   bottom: 3%;  width: 9rem;  height: 12.5rem; }
.hero__ebene--4 { right: 13%; bottom: 6%;  width: 10rem; height: 7rem; }
.hero__ebene--5 { left: 19%;  top: 5%;     width: 8.5rem; height: 5.5rem; }
.hero__ebene--6 { right: 19%; top: 3%;     width: 7.5rem; height: 10rem; }
.hero__ebene--7 { left: 3%;   bottom: 27%; width: 7rem;  height: 7rem; }
.hero__ebene--8 { right: 4%;  bottom: 30%; width: 8rem;  height: 10.5rem; }

.hero__kern { position: relative; text-align: center; max-width: 46rem; }
.hero__titel { font-size: var(--t-riesig); margin-bottom: var(--luft); }
.hero .raute { margin: 0 auto var(--luft); }
.hero__text { margin-bottom: var(--luft-gross); }

/* Ein Verlauf legt sich unter den Kern, damit die Schrift auf den Bildern
   lesbar bleibt — ohne die Bilder selbst abzudunkeln. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 46% 55% at 50% 50%,
    rgba(14, 19, 23, .97) 0%, rgba(14, 19, 23, .86) 45%, rgba(14, 19, 23, 0) 100%);
}
.hero__kern { z-index: 1; }

/* ================================================= 5 · Vier Kacheln ===== */

.kacheln { background: var(--tief); padding-block: var(--luft-bereich); }
.kacheln__reihe {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--luft-gross);
}
.kachel { text-align: center; }
.kachel__ring {
  width: 106px; height: 106px; margin: 0 auto var(--luft);
  border: 1px solid var(--linie); border-radius: 50%;
  display: grid; place-items: center;
  /* Das hellere Kupfer, nicht das der Ueberzeilen: eine Strichzeichnung in
     dieser Groesse traegt auf fast schwarzem Grund deutlich weniger als eine
     Textzeile und verschwindet sonst. */
  color: var(--kupfer-hell);
  transition: background .4s var(--kurve), transform .4s var(--kurve),
    border-color .4s var(--kurve);
}
.kachel__ring svg { width: 58px; height: 58px; }
.kachel:hover .kachel__ring {
  background: rgba(193, 153, 119, .1);
  border-color: var(--kupfer);
  transform: translateY(-6px);
}
.kachel__titel { font-size: var(--t-4); margin-bottom: .5rem; }
.kachel__text { font-size: var(--t-klein); margin-bottom: var(--luft-klein); }
.kachel__link {
  font-family: var(--titelschrift); font-size: var(--t-winzig);
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--kupfer);
}
.kachel__link:hover { color: var(--kupfer-hell); }

/* ==================================================== 6 · Das Haus ====== */

.haus { padding-block: var(--luft-bereich); }
.haus__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luft-bereich); align-items: center; }

.haus__bilder { position: relative; padding-bottom: 5rem; }
.haus__bild { border-radius: var(--rund); object-fit: cover; }
.haus__bild--gross { width: 100%; height: 28rem; }
.haus__bild--klein {
  position: absolute; right: -3rem; bottom: 2rem;
  width: 15rem; height: 11rem;
  border: 6px solid var(--grund);
}
.haus__bild--schmal {
  position: absolute; left: -2.5rem; top: -3rem;
  width: 8rem; height: 11rem;
  border: 6px solid var(--grund);
}
/* „Seit 1926" — in der Vorlage stand hier „Since 2010" in derselben Lage. */
.haus__jahr {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--zierschrift); font-style: italic;
  font-size: 3.25rem; color: var(--kupfer); opacity: .85;
}

.haus__kursiv {
  font-family: var(--zierschrift); font-style: italic;
  font-size: var(--t-4); color: var(--weiss);
  margin-block: var(--luft);
}

/* ================================================= 7 · Aus der Karte ==== */

.karte { position: relative; background: var(--tief); padding-block: var(--luft-bereich); overflow: hidden; }

.gerichte {
  list-style: none; margin: var(--luft-gross) 0 var(--luft-bereich); padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 4rem;
}
.gericht__kopf { display: flex; align-items: baseline; gap: .75rem; }
.gericht__name {
  font-family: var(--titelschrift); font-weight: 200; font-size: var(--t-5);
  color: var(--weiss); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Die Fuehrungslinie zwischen Gericht und Preis. In der Vorlage ein
   eigenes Element; hier traegt sie ein flexibler Rest. */
.gericht__linie { flex: 1 1 auto; height: 1px; background: var(--linie); min-width: 1.5rem; }
.gericht__preis { font-family: var(--titelschrift); font-size: var(--t-5); color: var(--kupfer); }
.gericht__unter { font-size: var(--t-klein); color: var(--leise); margin: .15rem 0 0; line-height: 1.6; }

.karte__knopf { margin: 0; }

/* ==================================================== 8 · Team ========== */

.team { padding-block: var(--luft-bereich); }
.team__reihe {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--luft-gross);
}
.person { text-align: center; }
.person__rahmen { position: relative; overflow: hidden; border-radius: var(--rund); }
.person__bild { width: 100%; height: 30rem; object-fit: cover; transition: transform .7s var(--kurve); }
.person:hover .person__bild { transform: scale(1.05); }
.person__rahmen::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 12, 15, .85) 0%, rgba(8, 12, 15, 0) 55%);
}
.person__name { font-size: var(--t-4); margin: var(--luft) 0 .15rem; }
.person__rolle {
  font-family: var(--zierschrift); font-style: italic;
  color: var(--kupfer); font-size: var(--t-5); margin: 0;
}

/* ============================================== 9 · Impressionen ======== */

.impressionen { background: var(--tief); padding-block: var(--luft-bereich); }
.impressionen__reihe {
  list-style: none; margin: 0; padding: 0 2rem;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem;
  max-width: 1600px; margin-inline: auto;
}
.impression { position: relative; overflow: hidden; border-radius: var(--rund); }
.impression__bild { width: 100%; height: 26rem; object-fit: cover; transition: transform .7s var(--kurve); }
.impression:hover .impression__bild { transform: scale(1.06); }
.impression__schild {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.2rem 1.2rem;
  background: linear-gradient(to top, rgba(8, 12, 15, .92), rgba(8, 12, 15, 0));
}
.impression__titel { font-size: var(--t-5); margin-bottom: .1rem; }
.impression__unter {
  font-family: var(--zierschrift); font-style: italic;
  font-size: var(--t-klein); color: var(--kupfer); margin: 0;
}

/* ================================================ 10 · Stimmen ========== */

.stimmen { padding-block: var(--luft-bereich); }
.stimmen__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luft-bereich); align-items: center; }
.stimmen__buehne { min-height: 15rem; margin-top: var(--luft); position: relative; }
.stimme { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--kurve); pointer-events: none; }
.stimme--sichtbar { opacity: 1; pointer-events: auto; position: relative; }
.stimme__text {
  font-family: var(--zierschrift); font-style: italic;
  font-size: var(--t-3); line-height: 1.55; color: var(--weiss);
  margin-bottom: var(--luft);
}
.stimme__name { font-family: var(--titelschrift); font-size: var(--t-5); color: var(--weiss); margin: 0; }
.stimme__rolle { font-size: var(--t-klein); color: var(--kupfer); margin: 0; }
.stimmen__steuerung { display: flex; align-items: center; gap: var(--luft-klein); margin-top: var(--luft); }
.stimmen__zaehler { font-family: var(--titelschrift); font-size: var(--t-klein);
  letter-spacing: .12em; color: var(--leise); }
.stimmen__bild { width: 100%; height: 34rem; object-fit: cover; border-radius: var(--rund); }

/* ============================================ 11 · Reservierung ========= */

.reservierung { position: relative; background: var(--tief); padding-block: var(--luft-bereich); overflow: hidden; }
.reservierung__reihe { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--luft-bereich); align-items: start; }

.formular { border: 1px solid var(--linie); border-radius: var(--rund); padding: var(--luft-gross); background: var(--grund); }
.formular__titel { font-size: var(--t-3); text-align: center; margin-bottom: var(--luft-gross); }
.feld { display: block; margin-bottom: var(--luft-klein); }
.feld__name {
  display: block; font-family: var(--titelschrift); font-size: var(--t-winzig);
  letter-spacing: .14em; text-transform: uppercase; color: var(--leise); margin-bottom: .4rem;
}
.feld input, .feld select {
  width: 100%; padding: .85rem 1rem;
  background: var(--tief); color: var(--weiss);
  border: 1px solid var(--linie-leise); border-radius: var(--rund);
  font-family: var(--textschrift); font-size: var(--t-klein);
}
.feld input:focus, .feld select:focus { border-color: var(--kupfer); }
.feld__paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--luft-klein); }
.formular .knopf { margin-top: var(--luft-klein); }
.formular__hinweis { font-size: var(--t-klein); color: var(--kupfer); margin: var(--luft-klein) 0 0; min-height: 1.5rem; }

.reservierung__anfahrt { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--t-klein); }
.reservierung__anfahrt svg { width: 20px; height: 20px; flex: none; margin-top: .4rem;
  color: var(--kupfer); }

/* ==================================================== 12 · Fuss ========= */

.fuss { background: var(--grund); border-top: 1px solid var(--linie-leise); padding-top: var(--luft-bereich); }
.fuss__reihe { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--luft-gross); align-items: start; }
.fuss__titel {
  font-size: var(--t-winzig); letter-spacing: .18em; text-transform: uppercase;
  color: var(--leise); margin-bottom: var(--luft); font-family: var(--titelschrift); font-weight: 400;
}
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.fuss__liste li { display: flex; gap: .75rem; align-items: flex-start; }
.fuss__liste svg { width: 20px; height: 20px; flex: none; margin-top: .45rem;
  color: var(--kupfer); }
.fuss__liste a { text-decoration: none; }
.fuss__liste a:hover { color: var(--kupfer); }
.fuss__mitte { text-align: center; }
.fuss__mitte .marke { justify-content: center; flex-direction: column; gap: var(--luft-klein); }
.fuss__spruch {
  font-family: var(--zierschrift); font-style: italic;
  font-size: var(--t-5); color: var(--kupfer); margin-top: var(--luft);
}
.fuss__block--rechts { justify-self: end; min-width: 17rem; }
.fuss__recht {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--luft);
  margin: var(--luft-bereich) 0 0; padding: var(--luft) 0;
  border-top: 1px solid var(--linie-leise);
  font-size: var(--t-klein); color: var(--leise);
}
.fuss__recht a { color: var(--kupfer); text-decoration: none; }
.fuss__recht a:hover { text-decoration: underline; }

/* =================================================== 13 · Tablet ======== */

@media (max-width: 1199.98px) {
  :root { --luft-bereich: 6rem; --t-2: 1.9rem; --t-riesig: clamp(2.6rem, 9cqw, 4.5rem); }

  .nav { display: none; }
  .brenner { display: block; }

  .haus__reihe, .stimmen__reihe, .reservierung__reihe { gap: var(--luft-gross); }
  .haus__bild--gross { height: 22rem; }
  .haus__bild--klein { width: 11rem; height: 8rem; right: -1rem; }
  .haus__bild--schmal { width: 6rem; height: 8rem; left: -1rem; }
  .haus__jahr { font-size: 2.4rem; }

  .kacheln__reihe { grid-template-columns: repeat(2, 1fr); gap: var(--luft-gross) var(--luft); }
  .impressionen__reihe { grid-template-columns: repeat(3, 1fr); }
  .impression__bild { height: 20rem; }
  .person__bild { height: 22rem; }
  .stimmen__bild { height: 24rem; }
  .gerichte { gap: 1.4rem 2.5rem; }

  .ranke { width: 40px; opacity: .22; }
}

/* ==================================================== 14 · Phone ======== */

@media (max-width: 809.98px) {
  :root { --luft-bereich: 4.25rem; --luft-gross: 2.25rem; --t-2: 1.65rem; --t-3: 1.4rem; }

  .schale { padding-inline: 1.25rem; }

  .kopf__rechts .knopf--schmal { display: none; }
  .marke__wort { font-size: var(--t-5); }

  /* Der Hero verliert die Ueberlagerungen: auf dem Telefon wuerden die
     kleinen Kacheln den Text bedraengen. Zwei Ebenen bleiben als Anschnitt
     oben und unten, damit die Komposition erkennbar bleibt. */
  .hero { min-height: auto; padding-block: 3.5rem var(--luft-bereich); }
  .hero__ebene--3, .hero__ebene--4, .hero__ebene--5,
  .hero__ebene--6, .hero__ebene--7, .hero__ebene--8 { display: none; }
  .hero__ebene--1 { left: -18%; top: 2%; width: 11rem; height: 15rem; opacity: .5; }
  .hero__ebene--2 { right: -18%; bottom: 2%; top: auto; width: 11rem; height: 15rem; opacity: .5; }
  .hero__titel { font-size: clamp(2.4rem, 13cqw, 3.4rem); }
  .raute { width: 150px; }

  .kacheln__reihe { grid-template-columns: 1fr; }
  .haus__reihe, .stimmen__reihe, .reservierung__reihe,
  .team__reihe, .fuss__reihe { grid-template-columns: 1fr; }

  .haus__bilder { padding-bottom: 4rem; }
  .haus__bild--klein, .haus__bild--schmal { display: none; }
  .haus__bild--gross { height: 17rem; }

  .gerichte { grid-template-columns: 1fr; margin-bottom: var(--luft-gross); }
  .impressionen__reihe { grid-template-columns: 1fr 1fr; padding-inline: 1.25rem; }
  .impression__bild { height: 15rem; }
  .person__bild { height: 24rem; }
  .stimmen__bild { height: 17rem; }
  .stimmen__buehne { min-height: 19rem; }
  .stimme__text { font-size: var(--t-4); }

  .formular { padding: var(--luft); }
  .feld__paar { grid-template-columns: 1fr; }

  .fuss__block--rechts { justify-self: start; }
  .fuss__recht { margin-top: var(--luft-gross); gap: var(--luft-klein); }

  /* Dekor verlaesst den Lesefluss. */
  .ranke { display: none; }
}

/* =================================================== 15 · Motion ======== */

/* Einblendung beim Scrollen. Die Vorlage staffelt die vier Kacheln um je
   150ms — den Versatz setzt `main.js` als `--verzug`. */
.anim {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--kurve), transform .7s var(--kurve);
  transition-delay: var(--verzug, 0ms);
}
.anim--da { opacity: 1; transform: none; }

/* Die Bildebenen des Hero fahren gestaffelt ein — dieselbe Ordnung wie in
   der Vorlage: die grossen zuerst, dann die Akzente. */
@keyframes ebene-ein {
  from { opacity: 0; transform: translate3d(var(--von-x, 0), var(--von-y, 40px), 0) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.hero__ebene {
  opacity: 0;
  animation: ebene-ein 1.5s var(--kurve) forwards;
  animation-delay: var(--verzug, 0ms);
}

.stimme { will-change: opacity; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anim { opacity: 1; transform: none; transition: none; }
  .hero__ebene { opacity: 1; animation: none; }
  .person__bild, .impression__bild { transition: none; }
}

/* ============================================ 16 · Weitere Seiten ======= */

/* Kopfbereich von Speisekarte, Impressum und Datenschutz. */
.seitenkopf {
  position: relative; overflow: hidden;
  background: var(--tief);
  padding-block: calc(var(--luft-bereich) + 3rem) var(--luft-bereich);
}
.seitenkopf--schmal { padding-block: calc(var(--luft-bereich) + 3rem) var(--luft-gross); }
.seitenkopf__titel { font-size: var(--t-1); margin-bottom: var(--luft); }
.seitenkopf__text { max-width: 40rem; }

/* Sprungmarken zu den Gängen. */
.gangnav { margin-top: var(--luft-gross); }
.gangnav__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem;
}
.gangnav__liste a {
  font-family: var(--titelschrift); font-size: var(--t-winzig);
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  color: var(--kupfer); border-bottom: 1px solid transparent; padding-bottom: .2rem;
  transition: border-color .3s var(--kurve);
}
.gangnav__liste a:hover { border-color: var(--kupfer); }

/* Ein Gang: Liste und Bildfeld, abwechselnd seitenverkehrt — wie in der
   Vorlage, wo jeder Kartenblock ein Bildfeld an der Seite hat. */
.gang { padding-block: var(--luft-bereich); }
.gang:nth-child(even) { background: var(--tief); }
.gang__reihe { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--luft-bereich); align-items: center; }
.gang--gedreht .gang__text { order: 2; }
.gang__vorspann { margin-bottom: var(--luft-gross); max-width: 34rem; }
.gerichte--einspaltig { grid-template-columns: 1fr; margin: 0; gap: 1.5rem; }

.gang__bild { position: relative; margin: 0; overflow: hidden; border-radius: var(--rund); }
.gang__bild img { width: 100%; height: 34rem; object-fit: cover; }
.gang__bild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.5rem 1.5rem;
  font-family: var(--zierschrift); font-style: italic; font-size: var(--t-3);
  color: var(--weiss); text-align: center;
  background: linear-gradient(to top, rgba(8, 12, 15, .9), rgba(8, 12, 15, 0));
}

.gericht__mehr {
  margin-top: .35rem; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--titelschrift); font-size: var(--t-winzig);
  letter-spacing: .14em; text-transform: uppercase; color: var(--leise);
  border-bottom: 1px solid var(--linie-leise);
}
.gericht__mehr:hover { color: var(--kupfer); border-color: var(--kupfer); }
.gericht__hinweise {
  margin: .5rem 0 0; padding: .6rem .9rem;
  background: rgba(193, 153, 119, .07);
  border-left: 2px solid var(--linie);
  font-size: var(--t-klein); color: var(--text);
}

.karteschluss { padding-block: var(--luft-bereich); border-top: 1px solid var(--linie-leise); }
.karteschluss__knopf { margin: var(--luft) 0 0; }

/* Rechtstexte — schmale Spalte, weil sie gelesen und nicht überflogen werden. */
.rechtstext { padding-block: var(--luft-bereich); }
.rechtstext .schale { max-width: 44rem; }
.rechtstext h2 {
  font-size: var(--t-4); margin: var(--luft-gross) 0 var(--luft-klein);
  padding-top: var(--luft-klein); border-top: 1px solid var(--linie-leise);
}
.rechtstext h2:first-of-type { border-top: 0; padding-top: 0; }
.rechtstext code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em; color: var(--kupfer);
}
.rechtstext__hinweis {
  padding: var(--luft); margin-bottom: var(--luft-gross);
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: rgba(193, 153, 119, .06); font-size: var(--t-klein);
}
.rechtstext__hinweis strong { color: var(--kupfer); }

@media (max-width: 1199.98px) {
  .seitenkopf__titel { font-size: var(--t-2); }
  .gang__reihe { gap: var(--luft-gross); }
  .gang__bild img { height: 26rem; }
}

@media (max-width: 809.98px) {
  .gang__reihe { grid-template-columns: 1fr; }
  .gang--gedreht .gang__text { order: 0; }
  .gang__bild img { height: 17rem; }
  .gang__bild figcaption { font-size: var(--t-4); }
  .seitenkopf { padding-block: calc(var(--luft-bereich) + 2rem) var(--luft-bereich); }
}