/* ═══════════════════════════════════════════════════════════════════════════
   ENTWURF 1 — „Abendlokal"
   Restaurant Kastanie · Münster-Kreuzviertel

   Haltung: Kerzenlicht. Ein Abendlokal verkauft keine Effizienz, sondern die
   Stunde am Tisch — und die faengt an, wenn das Licht runtergeht. Deshalb ein
   warmes Fast-Schwarz als Grund, EINE Bronze als Akzent, sonst nichts Buntes.
   Farbe kommt aus den Tellern.

   Kanten sind hier scharf: Radius 0px, ausnahmslos. Die Referenz-Recherche
   („referenzen.md", Restaurant) hat das bei vier von sechs ausgezeichneten
   Haeusern so gefunden — im Restaurant wirkt die scharfe Kante wertig, waehrend
   die Pille freundlich wirkt. Freundlich ist Entwurf 2.

   Aufbau, worin sich dieser Entwurf von 2 und 3 unterscheidet — nicht Farbe,
   sondern Architektur:
     · Buehne      — Vollbild mit dunkler Ueberlagerung, Text darin.
                     (2: Bildband mit runder Karte, die darueberlaeuft.
                      3: alles mittig ueber einem ruhigen Bildstreifen.)
     · Zeile       — drei Angaben in Spalten auf Haarlinien.
                     (2: drei runde Kacheln. 3: eine mittige Zeile mit Punkten.)
     · Speisekarte — ZWEISPALTIG wie eine echte Karte auf dem Tisch, mit
                     Punktfuehrung zum Preis.
                     (2: Gruppen als runde Karten, Tagesgericht ganz gross.
                      3: eine einzige ruhige Liste, einspaltig, mittige Achse.)
     · Galerie     — Mosaik aus einem breiten und zwei hohen Bildern.
                     (2: waagerechte Wischleiste. 3: 2x2 grosse Zutatenfotos.)
     · Reservierung— geteilte Flaeche: links Wege und Zeiten, rechts Formular.
                     (2: Wege und Zeiten als Karten nebeneinander, Formular in
                      einer grossen weichen Platte. 3: alles mittig untereinander.)
     · Fragen      — Aufklapper auf Haarlinien.
                     (2: offene Karten im Raster. 3: offene Liste, mittige Achse.)

   Grundlage: „referenzen.md" (Restaurant), Stil B „Kerzenlicht" — abgeleitet
   aus Restaurant GEM (Gilda Display ueber DM Sans, Bronze-Linie, 0px-Kanten)
   und Canlis (kleine, ruhige Ueberschriften statt Geschrei).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Marken-Kontrakt ──────────────────────────────────────────────────────────
   Alles Farbige haengt an diesen Werten. Die Verhaeltnisse in Klammern sind
   nachgerechnet (WCAG-Formel), nicht geschaetzt. */
:root{
  /* Flaechen */
  --nacht:   #141210;   /* Seitengrund — warmes Fast-Schwarz               */
  --flaeche: #1C1917;   /* Karten, Formularfelder, abgesetzte Baender      */
  --tief:    #0E0C0B;   /* Fuss und Band — noch eine Stufe tiefer          */

  /* Schrift */
  --creme:   #E9E2D8;   /* Ueberschriften   (auf Nacht 14,5:1 · Flaeche 13,6:1) */
  --text:    #B9B0A3;   /* Fliesstext       (auf Nacht  8,7:1 · Flaeche  8,2:1) */
  --leise:   #9A9384;   /* Meta, Legenden   (auf Nacht  6,1:1 · Flaeche  5,7:1) */

  /* Der eine Akzent. Bronze, hell genug fuer Fliesstext auf Dunkel. */
  --bronze:  #C08A55;   /* auf Nacht 6,2:1 · auf Flaeche 5,8:1            */
  --bronze-hell:#D9AA79;/* nur fuer Hover                                 */
  --auf-bronze:#141210; /* Schrift auf Bronze              (6,2:1)        */

  /* Linien. Kein Schatten — im Dunkeln traegt die Linie, nicht die Tiefe. */
  --linie:   #2A2622;
  --linie-hell:#3A342E;
  --rand:    #6B6255;   /* Umriss bedienbarer Elemente     (3,1:1)        */

  /* Schriften. Gilda Display ist eine schmale, abendliche Serife — sie ist
     das Preisschild dieser Seite. DM Sans daneben haelt sich zurueck. */
  --display:'Gilda Display', 'Times New Roman', Georgia, serif;
  --schrift:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --spalte:1240px;
  --bogen:0px;          /* der Radius dieses Entwurfs: keiner              */
  --tempo:.5s cubic-bezier(.22,.68,.36,1);
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  font-family:var(--schrift); font-size:18px; line-height:1.68;
  color:var(--text); background:var(--nacht);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* clip statt hidden: verhindert den waagerechten Rollbalken, ohne einen
     neuen Scroll-Behaelter aufzumachen (sonst klebt der Kopf nicht mehr). */
  overflow-x:clip;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{font-family:var(--display); color:var(--creme); font-weight:400; line-height:1.12}
:focus-visible{outline:2px solid var(--bronze); outline-offset:3px}

.wrap{width:min(100% - 40px, var(--spalte)); margin-inline:auto}
.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}
.nur-vorleser:focus{
  position:fixed; top:10px; left:10px; z-index:99;
  width:auto; height:auto; clip-path:none;
  background:var(--bronze); color:var(--auf-bronze); padding:10px 16px;
}

/* Rubrik: gesperrte Versalien in der Grotesk. Ein Motiv, ueberall dasselbe. */
.rubrik{
  display:block; font-size:.72rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--bronze);
}

/* ── Entwurfs-Band ────────────────────────────────────────────────────────── */
.entwurf-band{
  background:var(--bronze); color:var(--auf-bronze);
  font-size:.82rem; line-height:1.45; padding:9px 0;
}
.entwurf-band .wrap{display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px}
.entwurf-band b{font-weight:700}
.entwurf-band span{flex:1 1 300px; min-width:0}
.entwurf-band a{color:inherit; text-underline-offset:3px}

/* ── Knoepfe ──────────────────────────────────────────────────────────────── */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; background:var(--bronze); color:var(--auf-bronze);
  font-size:.92rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; border:1px solid var(--bronze); border-radius:0;
  cursor:pointer; transition:background var(--tempo), border-color var(--tempo), color var(--tempo);
}
.knopf:hover{background:var(--bronze-hell); border-color:var(--bronze-hell)}
.knopf svg{width:17px; height:17px; fill:currentColor; flex:none}

/* Der zweite Knopf ist nur Kontur — so macht es die Referenzlinie (GEM).
   Zwei gefuellte Knoepfe nebeneinander heben sich gegenseitig auf. */
.knopf-leer{background:none; color:var(--creme); border-color:var(--rand)}
.knopf-leer:hover{background:var(--creme); color:var(--nacht); border-color:var(--creme)}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.kopf{
  position:sticky; top:0; z-index:40;
  background:rgba(20,18,16,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid transparent; transition:border-color var(--tempo);
}
.kopf[data-gescrollt="1"]{border-bottom-color:var(--linie)}
/* position:static, damit das aufgeklappte Menue am STICKY Kopf haengt und
   nicht an der Wrap-Breite — sonst reicht es auf dem Handy nicht bis zum Rand. */
.kopf .wrap{position:static; display:flex; align-items:center; gap:20px; min-height:78px}
.marke{
  font-family:var(--display); font-size:1.65rem; color:var(--creme);
  text-decoration:none; letter-spacing:.01em; line-height:1; flex:none;
}
.marke small{
  display:block; font-family:var(--schrift); font-size:.6rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--leise); margin-top:7px;
}

.menue{margin-left:auto; display:flex; gap:26px}
.menue a{
  font-size:.84rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--text); padding:6px 0; position:relative;
}
.menue a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--bronze); transition:right var(--tempo);
}
.menue a:hover{color:var(--creme)}
.menue a:hover::after{right:0}

.burger{
  display:none; width:44px; height:44px; margin-left:auto;
  background:none; border:1px solid var(--rand); position:relative;
}
.burger i{
  position:absolute; left:12px; width:18px; height:1px; background:var(--creme);
  transition:translate var(--tempo), rotate var(--tempo), opacity var(--tempo);
}
.burger i:nth-child(1){top:15px}
.burger i:nth-child(2){top:21px}
.burger i:nth-child(3){top:27px}
.burger[aria-expanded="true"] i:nth-child(1){translate:0 6px; rotate:45deg}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){translate:0 -6px; rotate:-45deg}

/* ── Buehne: Vollbild mit Ueberlagerung ───────────────────────────────────────
   Text steht hier AUF dem Foto — das geht nur, wenn die Ueberlagerung so dicht
   ist, dass der Untergrund fuer den Kontrast keine Rolle mehr spielt. Sie liegt
   ueber der Textzone bei 94–88 % Deckung; gerechnet wurde deshalb gegen den
   Grundton, nicht gegen das Bild. */
.buehne{position:relative; isolation:isolate; overflow:clip}
.buehne-foto{position:absolute; inset:0; z-index:-2}
.buehne-foto img{width:100%; height:100%; object-fit:cover}
.buehne::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
              rgba(20,18,16,.97) 0%, rgba(20,18,16,.94) 34%,
              rgba(20,18,16,.80) 60%, rgba(20,18,16,.42) 100%);
}
.buehne .wrap{padding:clamp(88px, 13vw, 190px) 0 clamp(72px, 10vw, 150px)}
.buehne-text{max-width:100%}
/* Das Zeilenmaß gehoert an die Ueberschrift selbst, nicht an die Huelle:
   ch rechnet mit der Schrift des Elements. An der Huelle waere 1ch die
   Fliesstextbreite — die Zeile wuerde fuer 5rem-Serife viel zu schmal. */
.buehne h1{
  font-size:clamp(2.7rem, 6.6vw, 5rem); letter-spacing:.005em; margin-top:20px;
  color:var(--creme); max-width:16ch; text-wrap:balance;
}
.buehne h1 em{font-style:normal; color:var(--bronze)}
.buehne .lead{margin-top:24px; max-width:44ch; font-size:clamp(1.02rem, 1.2vw, 1.12rem)}
.buehne-tun{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}

/* ── Zeile: drei Angaben auf Haarlinien ───────────────────────────────────── */
.zeile{border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); background:var(--tief)}
.zeile ul{list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr))}
.zeile li{padding:26px 0 26px 26px; border-left:1px solid var(--linie)}
.zeile li:first-child{padding-left:0; border-left:0}
.zeile b{
  display:block; font-family:var(--display); font-size:clamp(1.3rem, 2.2vw, 1.8rem);
  color:var(--creme); font-weight:400; line-height:1.15;
}
.zeile span{display:block; margin-top:9px; font-size:.86rem; color:var(--leise)}

/* ── Bloecke ──────────────────────────────────────────────────────────────── */
.block{padding:clamp(58px, 6.8vw, 118px) 0}
.block + .block{border-top:1px solid var(--linie)}
.block-kopf{max-width:70ch; margin-bottom:clamp(32px, 4vw, 58px)}
.block-kopf h2{font-size:clamp(1.9rem, 3.8vw, 2.9rem); margin-top:16px}
.block-kopf .lead{margin-top:18px; max-width:60ch}

/* ── Speisekarte: zweispaltig wie die Karte auf dem Tisch ─────────────────────
   Das ist der Kern dieses Entwurfs. Zwei Spalten, Gruppen mit gesperrter
   Ueberschrift, Gericht links, Preis rechts, dazwischen eine Punktfuehrung —
   genau wie auf gedrucktem Papier. Der Fueller ist ein eigenes Element und
   KEIN border-bottom am Namen: sonst laeuft die Linie bei zweizeiligen
   Gerichtnamen unter den Text statt daneben. */
.karte-spalten{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(34px, 4vw, 64px);
  align-items:start;
}
.gruppe + .gruppe{margin-top:clamp(34px, 4vw, 56px)}
.gruppe > h3{
  font-family:var(--display); font-size:1.5rem; color:var(--bronze);
  font-weight:400; letter-spacing:.02em;
  padding-bottom:12px; border-bottom:1px solid var(--linie-hell);
}
.gruppe .gruppe-hinweis{
  margin-top:10px; font-size:.86rem; color:var(--leise);
}
.gerichte{list-style:none; margin-top:6px}
.gerichte li{padding:18px 0; border-bottom:1px solid var(--linie)}
.gericht-kopf{display:flex; align-items:baseline; gap:8px}
.gericht-kopf .name{
  font-family:var(--schrift); font-size:1.02rem; font-weight:500;
  color:var(--creme); line-height:1.4;
}
/* Der Fueller darf schrumpfen (flex:1 1 10px, min-width:10px), damit bei
   375 px kein Element die Zeile aufblaeht. */
.gericht-kopf .fuell{
  flex:1 1 10px; min-width:10px; align-self:center;
  border-bottom:1px dotted var(--rand); translate:0 2px;
}
.gericht-kopf .preis{
  flex:none; font-size:.98rem; font-weight:500; color:var(--bronze);
  font-variant-numeric:tabular-nums;
}
.gerichte p{margin-top:7px; font-size:.93rem; max-width:46ch}
.gerichte .marker{
  display:inline-block; margin-top:7px; font-size:.78rem; color:var(--leise);
  letter-spacing:.08em;
}

/* Legende und Fussnoten der Karte. Der Balken statt eines Kastens — dieser
   Entwurf kennt keine Flaechen mit Rand, nur Linien. */
.karte-fuss{
  margin-top:clamp(34px, 4vw, 54px); padding-left:22px;
  border-left:2px solid var(--bronze); max-width:74ch;
}
.karte-fuss p{font-size:.9rem; color:var(--leise)}
.karte-fuss p + p{margin-top:12px}
.karte-fuss b{color:var(--text); font-weight:500}
.legende{
  list-style:none; display:flex; flex-wrap:wrap; gap:6px 22px;
  margin:12px 0 14px; font-size:.86rem; color:var(--leise);
}
.legende b{color:var(--bronze); font-weight:500; font-variant-numeric:tabular-nums}

/* ── Galerie: Mosaik ──────────────────────────────────────────────────────────
   Ein breites Bild ueber zwei hohen. Keine Bildunterschriften — dieser Entwurf
   zeigt, statt zu erklaeren. Erklaert wird in Entwurf 3. */
.mosaik{display:grid; gap:clamp(12px, 1.6vw, 20px); grid-template-columns:repeat(3, minmax(0, 1fr))}
.mosaik figure{margin:0; overflow:clip; background:var(--flaeche)}
.mosaik img{width:100%; height:100%; object-fit:cover; scale:1; transition:scale 1.2s cubic-bezier(.22,.68,.36,1)}
.mosaik figure:hover img{scale:1.04}
.mosaik .breit{grid-column:span 3; aspect-ratio:24/9}
.mosaik .hoch{aspect-ratio:3/4}
.mosaik .quer{aspect-ratio:4/3}
.mosaik .zwei{grid-column:span 2}

/* ── Das Haus: Bild links, Text rechts ────────────────────────────────────── */
.haus .wrap{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(30px, 4vw, 64px); align-items:center;
}
.haus-bild{margin:0; overflow:clip; background:var(--flaeche)}
.haus-bild img{width:100%; height:auto}
.haus-text h2{font-size:clamp(1.85rem, 3.5vw, 2.7rem); margin-top:16px}
.haus-text p{margin-top:18px; max-width:56ch}
.haus-text .unterschrift{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--linie);
  font-family:var(--display); font-size:1.45rem; color:var(--creme);
}
.haus-text .unterschrift small{
  display:block; font-family:var(--schrift); font-size:.85rem; color:var(--leise); margin-top:7px;
}

/* ── Reservierung: geteilte Flaeche ───────────────────────────────────────── */
.reservierung{background:var(--tief)}
.reservierung .wrap{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  gap:clamp(32px, 4vw, 68px); align-items:start;
}
.reservierung h2{font-size:clamp(1.9rem, 3.6vw, 2.8rem); margin-top:16px}
.reservierung .lead{margin-top:18px; max-width:46ch}
.wege{list-style:none; margin-top:clamp(28px, 3vw, 40px); border-top:1px solid var(--linie-hell)}
.wege li{border-bottom:1px solid var(--linie-hell)}
.wege a,.wege .kein-link{
  display:grid; grid-template-columns:22px minmax(0, 1fr) auto; gap:16px; align-items:center;
  padding:18px 0; text-decoration:none; color:var(--text);
  transition:color var(--tempo), padding-left var(--tempo);
}
.wege a:hover{color:var(--creme); padding-left:8px}
.wege svg{width:20px; height:20px; fill:var(--bronze)}
.wege b{display:block; color:var(--creme); font-weight:500; font-size:1.02rem}
.wege small{display:block; font-size:.86rem; color:var(--leise); margin-top:3px}
.wege .pf{color:var(--leise)}

.zeiten{margin-top:clamp(28px, 3vw, 42px)}
.zeiten dl{border-top:1px solid var(--linie-hell)}
.zeiten div{
  display:flex; justify-content:space-between; gap:18px;
  padding:12px 0; border-bottom:1px solid var(--linie-hell); font-size:.93rem;
}
.zeiten dt{color:var(--text)}
.zeiten dd{color:var(--creme); font-variant-numeric:tabular-nums; text-align:right}

/* ── Formular ─────────────────────────────────────────────────────────────── */
.formular{margin-top:26px}
.feld-paar{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px}
.feld{margin-bottom:16px}
.feld label{
  display:block; font-size:.76rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--leise); margin-bottom:8px;
}
/* --rand und nicht --linie: die Haarlinie waere als Umriss eines Eingabefeldes
   nur 1,4:1 — man saehe das Feld praktisch nicht. --rand liegt bei 3,1:1. */
.feld input,.feld select,.feld textarea{
  width:100%; padding:13px 15px; background:var(--flaeche);
  border:1px solid var(--rand); border-radius:0; font-size:1rem; color:var(--creme);
  transition:border-color var(--tempo);
}
.feld input::placeholder,.feld textarea::placeholder{color:var(--leise)}
/* Beim Tippen muss deutlich sein, in welchem Feld man steht. Der Umriss bleibt
   stehen; damit er nicht doppelt wirkt, wird der Rand durchsichtig. */
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:2px solid var(--bronze); outline-offset:1px; border-color:transparent;
}
.feld textarea{min-height:120px; resize:vertical; line-height:1.6}
.feld select{
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--bronze) 50%),
                   linear-gradient(135deg, var(--bronze) 50%, transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
  padding-right:44px;
}
.form-fuss{margin-top:16px; font-size:.85rem; color:var(--leise); max-width:56ch}
.form-fuss a{color:var(--bronze); text-underline-offset:3px}
.form-fuss + .form-fuss{margin-top:10px}

/* ── Fragen: Aufklapper auf Haarlinien ────────────────────────────────────── */
.aufklapper{border-top:1px solid var(--linie); max-width:82ch}
.aufklapper details{border-bottom:1px solid var(--linie)}
.aufklapper summary{
  display:flex; align-items:flex-start; gap:16px; cursor:pointer; list-style:none;
  padding:22px 0; font-size:1.04rem; font-weight:500; color:var(--creme); line-height:1.45;
}
.aufklapper summary::-webkit-details-marker{display:none}
/* Das Pluszeichen ist zwei Striche — kein Bild, kein Zeichensatz, keine
   Fallstricke. Beim Aufklappen dreht sich der senkrechte weg. */
.aufklapper summary .kreuz{flex:none; position:relative; width:18px; height:18px; margin-top:6px; margin-left:auto}
.aufklapper summary .kreuz::before,
.aufklapper summary .kreuz::after{
  content:""; position:absolute; left:0; top:8px; width:18px; height:1.5px;
  background:var(--bronze); transition:rotate var(--tempo), opacity var(--tempo);
}
.aufklapper summary .kreuz::after{rotate:90deg}
.aufklapper details[open] summary .kreuz::after{rotate:0deg; opacity:0}
.aufklapper details p{padding:0 34px 24px 0; max-width:64ch; font-size:.96rem}

/* ── Kontakt ──────────────────────────────────────────────────────────────── */
.kontakt-liste{list-style:none; margin-top:24px}
.kontakt-liste li{
  display:grid; grid-template-columns:22px minmax(0, 1fr); gap:14px;
  padding:15px 0; border-top:1px solid var(--linie);
}
.kontakt-liste li:first-child{border-top:0; padding-top:0}
.kontakt-liste svg{width:19px; height:19px; fill:var(--bronze); margin-top:4px}
.kontakt-liste b{display:block; font-weight:500; color:var(--creme)}
.kontakt-liste b a{text-decoration:none}
.kontakt-liste b a:hover{text-decoration:underline}
.kontakt-liste small{display:block; font-size:.86rem; color:var(--leise); margin-top:3px}
.kontakt .wrap{
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:clamp(30px, 4vw, 64px); align-items:start;
}
.kontakt h2{font-size:clamp(1.85rem, 3.5vw, 2.7rem); margin-top:16px}
.kontakt .lead{margin-top:16px; max-width:50ch}
.kontakt-daten{background:var(--flaeche); padding:clamp(24px, 3vw, 34px)}
.kontakt-daten h3{font-size:1.55rem; margin:12px 0 4px}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{background:var(--tief); border-top:1px solid var(--linie); padding:clamp(46px, 5vw, 76px) 0 0}
.fuss-gitter{
  display:grid; grid-template-columns:minmax(0, 2fr) repeat(2, minmax(0, 1fr));
  gap:32px clamp(24px, 3vw, 54px);
}
.fuss .marke{color:var(--creme)}
.fuss p{margin-top:16px; max-width:40ch; font-size:.92rem}
.fuss h3{
  font-family:var(--schrift); font-size:.74rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--leise); margin-bottom:14px;
}
.fuss ul{list-style:none; font-size:.92rem}
.fuss li{padding:5px 0}
.fuss li a{text-decoration:none}
.fuss li a:hover{color:var(--creme); text-decoration:underline}
.fuss-unten{
  margin-top:clamp(36px, 4vw, 56px); padding:20px 0;
  border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between;
  font-size:.83rem; color:var(--leise);
}

/* ── Daumenleiste (nur Handy) ─────────────────────────────────────────────── */
.daumen{display:none}

/* ── Sanftes Einblenden ───────────────────────────────────────────────────── */
html.js .zeig{opacity:0; translate:0 18px}
html.js .zeig[data-da="1"]{
  opacity:1; translate:0 0;
  transition:opacity .6s ease calc(var(--i, 0) * 80ms),
             translate .6s cubic-bezier(.22,.68,.36,1) calc(var(--i, 0) * 80ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .haus .wrap,.reservierung .wrap,.kontakt .wrap{grid-template-columns:minmax(0, 1fr)}
  .karte-spalten{gap:clamp(28px, 4vw, 40px)}
  .buehne::before{
    background:linear-gradient(180deg,
                rgba(20,18,16,.92) 0%, rgba(20,18,16,.95) 55%, rgba(20,18,16,.97) 100%);
  }
}

@media (max-width:860px){
  .menue{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--nacht); border-bottom:1px solid var(--linie);
    padding:6px 20px 18px; display:none;
  }
  .menue[data-offen="1"]{display:flex}
  .menue a{padding:13px 0; border-top:1px solid var(--linie); font-size:.95rem}
  .menue a::after{display:none}
  .kopf .knopf{display:none}
  .burger{display:block}
}

@media (max-width:700px){
  body{font-size:17px}
  .karte-spalten{grid-template-columns:minmax(0, 1fr)}
  .zeile ul{grid-template-columns:minmax(0, 1fr)}
  .zeile li{padding:18px 0; border-left:0; border-top:1px solid var(--linie)}
  .zeile li:first-child{border-top:0}
  .mosaik{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .mosaik .breit{grid-column:span 2; aspect-ratio:16/9}
  .fuss-gitter{grid-template-columns:minmax(0, 1fr)}
}

@media (max-width:520px){
  .feld-paar{grid-template-columns:minmax(0, 1fr); gap:0}
  .mosaik{grid-template-columns:minmax(0, 1fr)}
  .mosaik .breit,.mosaik .zwei{grid-column:span 1}
  .mosaik .breit{aspect-ratio:4/3}
  .buehne-tun .knopf{width:100%}

  /* Die Daumenleiste liegt am unteren Rand — dort, wo der Daumen ohnehin ist.
     Sie ersetzt auf dem Handy den Kopfknopf. */
  .daumen{
    display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    background:var(--linie); border-top:1px solid var(--linie);
  }
  .daumen .knopf{padding:15px 8px; font-size:.82rem; letter-spacing:.04em}
  .daumen .knopf-leer{background:var(--nacht)}
  body{padding-bottom:62px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  html.js .zeig{opacity:1; translate:none}
}

/* ── Rechtstexte (Impressum, Datenschutz) ─────────────────────────────────────
   Auch hier: Linien statt Flaechen, ein Balken statt einer Warnfarbe. Der
   Lesetext bleibt bei 68 Zeichen — laenger wird eine Datenschutzerklaerung
   unlesbar, und gerade die soll gelesen werden. */
.rechts-kopf{padding:clamp(44px, 5.2vw, 78px) 0 clamp(24px, 3vw, 36px)}
/* Bei 375 px passt „Datenschutzerklaerung" nicht in eine Zeile. Die Bruchstelle
   gibt der weiche Trennstrich im HTML vor; hyphens/overflow-wrap sind das Netz
   darunter. */
.rechts-kopf h1{font-size:clamp(2.1rem, 4.2vw, 3.1rem); margin-top:12px; hyphens:auto; overflow-wrap:break-word}
.rechts-kopf .lead{margin-top:16px; max-width:58ch}
.rechtstext{padding-bottom:clamp(54px, 6vw, 92px)}
.rechtstext p,.rechtstext ul,.rechtstext dl,.rechtstext address,.rechts-hinweis{max-width:68ch}
.rechtstext section{border-top:1px solid var(--linie); padding:30px 0 4px}
.rechtstext h2{font-size:clamp(1.3rem, 2.1vw, 1.7rem); margin-bottom:14px}
.rechtstext h3{
  font-family:var(--schrift); font-size:1rem; font-weight:700;
  margin:22px 0 8px; color:var(--creme);
}
.rechtstext p{margin-bottom:13px}
.rechtstext p:last-child{margin-bottom:0}
.rechtstext strong{color:var(--creme); font-weight:500}
.rechtstext ul{margin:0 0 14px; list-style:none}
.rechtstext ul li{padding-left:22px; position:relative; margin-bottom:7px}
.rechtstext ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:1px; background:var(--bronze);
}
.rechtstext dl{margin:0}
.rechtstext dt{font-weight:700; color:var(--creme); margin-top:15px}
.rechtstext dd{margin:2px 0 0}
.rechtstext address{font-style:normal; line-height:1.9}
.rechtstext a{color:var(--bronze); text-underline-offset:3px}
.rechts-hinweis{
  background:var(--flaeche); border-left:3px solid var(--bronze);
  padding:20px 24px; margin:26px 0 30px;
}
.rechts-hinweis b{display:block; margin-bottom:6px; color:var(--creme)}
.rechts-hinweis p{font-size:.93rem; margin-bottom:0}
/* Bewusst „.rechtstext .zurueck" und nicht nur „.zurueck": die Regel fuer Links
   im Rechtstext ist spezifischer als eine einzelne Klasse und wuerde die
   Schriftfarbe sonst ueberschreiben. */
.rechtstext .zurueck{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze); border-bottom:1px solid var(--bronze);
  padding-bottom:4px; margin-top:38px;
}
.rechtstext .zurueck:hover{color:var(--creme); border-bottom-color:var(--creme)}