/* ==========================================================================
   GASTHAUS ZUR ALTEN LINDE — Wirtshaus mit Biergarten
   Basis-Stufe (29 EUR). Standbilder, ein Einblende-Effekt pro Abschnitt,
   Hover und Fokus. Kein Parallax, kein Pinning, kein Scrub, kein Zaehler.

   Herkunft
   --------
   Uebersetzt aus dem Claude-Design-Entwurf "Gasthaus Zur Alten Linde.dc.html"
   nach `docs/regeln/vorlagen.md`. Der Entwurf lud Playfair Display, Lato und
   Great Vibes von Google, acht Galeriebilder und vier weitere Fotos von
   Unsplash, und arbeitete mit sc-for, sc-if, doppelt geschweiften Platzhaltern
   und style-hover — nichts davon laeuft in einem Browser ohne die
   Claude-Design-Umgebung.

   Der Entwurf ist in `docs/vorlagen/sichtung-31-entwuerfe.md` als **premium**
   eingestuft, weil der Presse-Zitat-Abschnitt `background-attachment: fixed`
   benutzt. Diese Fassung ist die Basis-Fassung: die Parallaxe ist nicht
   abgeschwaecht, sondern weggelassen (V7).

   Abweichungen vom Entwurf — jede einzeln begruendet
   --------------------------------------------------
   1. Playfair Display ist ersetzt durch Cormorant Garamond. Beide sind
      hochkontrastige Renaissance-Antiquas; Cormorant liegt selbst gehostet
      im Bestand (`_shared/pizzeria/fonts/`), Playfair nicht.
      Ersetzungstabelle in `docs/vorlagen/uebernahme-anleitung.md`.
   2. Great Vibes faellt ersatzlos weg. Schreibschriften sind schlecht lesbar
      und verraten den bestellten Entwurf; die drei Stellen (Hero-Zeile
      "Herzlich willkommen", Signatur "Familie Brenner", das grosse
      Anfuehrungszeichen) stehen jetzt in der Titelschrift.
   3. Kein Kursivschnitt. Cormorant liegt nur als 600 vor, Lato nur als 400
      und 700 — der kursive Zitattext des Entwurfs wuerde vom Browser
      synthetisch verzerrt. Das Zitat steht deshalb aufrecht.
   4. Der Entwurf hatte keine Symbole, sondern die Schriftzeichen ✦ und ◎.
      Ersetzt durch gezeichnete Strichsymbole, 24x24, stroke-width 1.5 (V3).
   5. Das Zahlenband hinter dem Zitat (Foto + `background-attachment: fixed`)
      ist eine ruhige dunkle Flaeche geworden (V7, siehe oben).
   6. Aus dem erfundenen Pressezitat einer real erscheinenden Zeitung ist
      eine Gaststimme mit Namen und Portrait geworden (V11; Kundenstimmen
      bleiben laut Benedikts Vorgabe vom 20.08.2026 drin).
   7. Der Cookie-Hinweis ist ersatzlos weg — beide Knoepfe schlossen nur das
      Fenster (V12). Der Knopf "Karte laden" ebenfalls: dahinter lag keine
      Karte. An seine Stelle tritt eine gezeichnete Umgebungskarte.
   8. Der Knopf "Komplette Karte als PDF" fuehrte nur zum Kontaktabschnitt.
      Ersetzt durch "Tisch reservieren", der wirklich dorthin fuehrt.
   9. Anschrift, Telefon, E-Mail, Verkehrsangaben und alle namentlich
      genannten Lieferanten und Brauereien sind erfunden bzw. allgemein
      beschrieben (V10, V11).
  10. Zwei Farben sind abgedunkelt, weil sie unter der Lesbarkeitsgrenze
      lagen — siehe unten.

   Farblogik
   ---------
   Dunkles Holzbraun #1d1b19 traegt Baender, Reservierung und Fuss.
   Gold ist die Schmuckfarbe und tritt in drei Staerken auf:
     --gold      #a8863d  nur als FLAECHE oder LINIE, nie als Text
                          (Striche, Rahmen, Rueckenband der Karte)
     --gold-ink  #856726  fuer alles, was Text ist oder Text traegt
                          (Knoepfe, Links, Augenbrauen, Preise)
     --gold-lt   #d8b768  dieselbe Rolle wie --gold-ink, aber auf dunklem Grund
   Der Entwurf benutzte #a8863d fuer Text auf Weiss (3,4:1) und weisse Schrift
   auf #a8863d (ebenfalls 3,4:1). Beides ist unlesbar.

   Gemessene Kontraste (relative Luminanz nach WCAG 2.1, selbst gerechnet)
   ----------------------------------------------------------------------
     --ink      #3a3632 auf --paper #fdfcfa      11,7:1
     --ink      #3a3632 auf --wash  #f5f1ea      10,6:1
     --muted    #6b645b auf --paper               5,7:1
     --muted    #6b645b auf --wash                5,2:1
     --muted    #6b645b auf --wash-2 #ece6db      4,7:1   (Galeriegrund, Kartenfeld)
     --gold-ink #856726 auf --paper               5,2:1
     --gold-ink #856726 auf --wash                4,7:1
     Weiss      #ffffff auf --gold-ink            5,3:1   (Knopf)
     Weiss      #ffffff auf --ink-950 #1d1b19    17,2:1
     --on-dark  #c9c2b6 auf --ink-950             9,7:1
     --on-soft  #948c7e auf --ink-950             5,2:1   (auch Platzhalter im Feld)
     --on-soft  #948c7e auf --ink-800 #25221f     4,8:1   (Formularkarte)
     --on-soft  #948c7e auf --ink-900 #161412     5,5:1   (Fuss)
     --gold-lt  #d8b768 auf --ink-950             8,9:1
     --gold-lt  #d8b768 auf --ink-900             9,5:1
     --gold-lt  #d8b768 auf --ink-800             8,2:1

   Die gezeichnete Karte hat eigene Tokens, weil ihre Flaechen heller sind
   als jeder Grund sonst auf der Seite:
     --map-ink    #635d54 auf --map-bg    #f3efe7   5,7:1
     --map-ink    #635d54 auf --map-block #e5dfd3   4,9:1  (engster Fall)
     --map-ink    #635d54 auf --map-water #dfe6e4   5,1:1
     --map-accent #785c21 auf dem eigenen 12-Prozent-Feld #e4ddcf  4,7:1

   Hero-Schleier ueber img/hero.jpg, gerechnet am hellsten Bildpunkt des
   Fotos (an jeder anderen Stelle ist es mehr, im Bildmittel ueber 13:1):
     Weiss     #ffffff darauf                      8,7:1
     Vorspann  #e3ded5 darauf                      6,5:1
     --gold-lt #d8b768 darauf                      4,5:1   ("Herzlich
              willkommen", ab 24 px in 600 — Grosstext, Grenze 3:1)

   Der Entwurf hatte #8d8578 fuer Kleintext auf hellem Grund (3,6:1) und
   #6d675e fuer die Pflichtfeld-Zeile. Beide sind auf --muted #6b645b gesetzt.
   Auf dunklem Grund war #8d8578 auf der Formularkarte #25221f nur 4,3:1 —
   dort steht jetzt --on-soft #948c7e.

   Drei Werte sind bei der Nachpruefung am 20.08.2026 korrigiert worden:
   der Platzhaltertext im Formular stand auf #7d766b (3,8:1 auf --ink-950)
   und steht jetzt auf --on-soft; die Kartenbeschriftung stand auf --muted
   (4,4:1 auf --map-block) und die Kartenmarke auf --gold-ink (4,0:1 auf
   ihrem eigenen Feld) — beide haben jetzt eigene, dunklere Tokens. Die
   uebrigen Zahlen oben waren um bis zu 0,2 zu guenstig gerundet und stehen
   jetzt so da, wie sie herauskommen.

   Bilder
   ------
   13 der 14 Fotos sind fuer diese Vorlage erzeugt (nano_banana_pro, 2K) und
   danach verkleinert, keines von einer Fremdseite geholt (V3, V13). Die
   Prompts stehen in `docs/vorlagen/bild-prompts-alte-linde.md`. Die erste
   Galeriekachel `gastraum.jpg` ist aus `_shared/pizzeria/img/` KOPIERT (V2).
   Das Hero-Foto liegt als Hintergrund auf .hero__media, alle uebrigen als
   <img> mit loading="lazy". Platzhalter gibt es hier keine mehr.

   Aufbau der Datei
   ----------------
   Mobil zuerst. Alle Media Queries sind min-width; die schmale Ansicht ist
   der Ausgangszustand, breitere Fenster bekommen Spalten dazu. Geprueft bei
   360, 768 und 1280 Pixeln.
   ========================================================================== */

/* ── Schriften (selbst gehostet, latin-Teilmenge, 68,4 KB) ─────────────────
   Aus `_shared/pizzeria/fonts/` KOPIERT, nicht verlinkt (V2): eine Vorlage
   muss allein auf einen Kundenserver wandern koennen.
   Statische Dateien, ein Schnitt je Datei. Cormorant Garamond traegt nur 600,
   Lato nur 400 und 700 — jedes andere Gewicht rechnet der Browser selbst hoch
   und das sieht schlecht aus. Kursive gibt es nicht.                       */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../vendor/fonts/cormorant-garamond-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../vendor/fonts/lato-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato";
  src: url("../vendor/fonts/lato-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --font-title: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Lato", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --ink-950: #1d1b19;   /* dunkle Baender, Reservierung */
  --ink-900: #161412;   /* Fuss */
  --ink-800: #25221f;   /* Formularkarte auf dunklem Grund */
  --ink-700: #332f2b;   /* Linien auf dunklem Grund */

  --ink: #3a3632;       /* Fliesstext hell */
  --muted: #6b645b;     /* Kleintext hell */

  --gold: #a8863d;      /* nur Flaeche und Linie, nie Text */
  --gold-ink: #856726;  /* Text, Knoepfe, Links auf hellem Grund */
  --gold-lt: #d8b768;   /* Text und Akzent auf dunklem Grund */

  --paper: #fdfcfa;
  --wash: #f5f1ea;
  --wash-2: #ece6db;

  --line: #e6e0d6;
  --line-2: #ded8cc;

  --on-dark: #c9c2b6;
  --on-soft: #948c7e;

  --focus: #856726;
  --focus-halo: #ffffff;

  --wrap: 1140px;
  --pad: clamp(1rem, 4vw, 1.5rem);
  --notice: 26px;    /* Hoehe der Demo-Hinweisleiste, fix im Markup */
  --quickbar: 58px;  /* Hoehe der Handy-Leiste am unteren Bildrand */
  --shadow-sm: 0 6px 20px rgb(29 27 25 / .07);
  --shadow-lg: 0 12px 34px rgb(29 27 25 / .14);
}

.is-dark {
  --focus: #d8b768;
  --focus-halo: #1d1b19;
}

/* ── Grundlagen ─────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--notice) + 1rem);
}

body {
  margin: 0;
  padding-top: var(--notice);
  padding-bottom: var(--quickbar);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--ink-950);
  line-height: 1.25;
  margin: 0 0 .5em;
  text-wrap: pretty;
}

h1 { font-size: clamp(2.1rem, 7.5vw, 3.75rem); line-height: 1.16; letter-spacing: .01em; }
h2 { font-size: clamp(1.7rem, 5vw, 2.55rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-ink); text-decoration: none; }
a:hover { color: var(--ink-950); text-decoration: underline; }

::selection { background: var(--gold-ink); color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0 0 .9rem;
}

.is-dark .eyebrow { color: var(--gold-lt); }

/* Der duenne Strich unter den Ueberschriften ist im Entwurf 1 px hoch. Bei
   1 px verschwindet er auf manchen Bildschirmen ganz, deshalb 2 px. */
.rule {
  width: 56px;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: 1.4rem 0 0;
}

.rule--center { margin-inline: auto; }

.icon { width: 1.2rem; height: 1.2rem; flex: none; vertical-align: -.18em; }

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

.skip {
  position: absolute;
  left: 50%;
  top: calc(var(--notice) + .5rem);
  transform: translate(-50%, -250%);
  z-index: 200;
  background: var(--ink-950);
  color: #fff;
  padding: .7rem 1.2rem;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .08em;
}

.skip:focus { transform: translate(-50%, 0); color: #fff; text-decoration: none; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
  border-radius: 2px;
}

/* ── Einblenden: genau ein Effekt pro Abschnitt ──────────────────────────── */

.has-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

.has-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* ── Knoepfe ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  line-height: 1.4;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.btn:hover { text-decoration: none; }

.btn--gold { background: var(--gold-ink); border-color: var(--gold-ink); color: #fff; }
.btn--gold:hover { background: var(--ink-950); border-color: var(--ink-950); color: #fff; }

.btn--outline { background: transparent; border-color: var(--gold-ink); color: var(--gold-ink); }
.btn--outline:hover { background: var(--gold-ink); color: #fff; }

.btn--ghost { background: transparent; border-color: rgb(255 255 255 / .6); color: #fff; }
.btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ink-950); }

.btn--sm { padding: .8rem 1.4rem; font-size: .72rem; }

/* ── Kopfleiste ─────────────────────────────────────────────────────────── */

.topbar {
  background: var(--ink-950);
  color: var(--on-dark);
  font-size: .8rem;
  line-height: 1.6;
  border-bottom: 1px solid var(--ink-700);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .3rem 1.6rem;
  padding-block: .55rem;
}

.topbar__set { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.6rem; }
.topbar__item { display: inline-flex; align-items: center; gap: .5rem; }
.topbar .icon { color: var(--gold-lt); width: .95rem; height: .95rem; }
.topbar a { color: #fff; }
.topbar__hours { color: var(--gold-lt); letter-spacing: .05em; }

/* Telefon und Anschrift stehen auf dem Handy in der Leiste am unteren
   Bildrand — hier wuerden sie zwei Zeilen fressen. */
.topbar__contact { display: none; }

/* ── Header ─────────────────────────────────────────────────────────────── */

.header {
  background: rgb(253 252 250 / .97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 14px rgb(29 27 25 / .06);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 70px;
  padding-block: .7rem;
}

.brand { display: flex; align-items: center; gap: .85rem; color: var(--ink-950); }
.brand:hover { text-decoration: none; color: var(--ink-950); }

.brand__mark {
  width: 44px; height: 44px;
  flex: none;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-ink);
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.brand__name {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: .03em;
}

.brand__sub {
  display: block;
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .2rem;
}

.nav { display: none; }
.header__cta { display: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* Das Hero-Foto liegt als Hintergrund auf .hero__media, darueber der Schleier
   aus ::after. Ohne ihn steht weisse Schrift auf einem hellen Giebel und ist
   nicht mehr lesbar; mit ihm sind es 13,2:1 am dunkelsten und 8,6:1 am
   hellsten Punkt (V9). --ink-950 bleibt als Grund darunter stehen, damit die
   Ueberschrift auch vor dem Laden des Bildes lesbar ist. */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--ink-950);
  color: #fff;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--ew-kopfbild, url("../img/hero.jpg"));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(20 18 16 / .86) 0%,
    rgb(20 18 16 / .72) 45%,
    rgb(20 18 16 / .90) 100%
  );
}


.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 15vw, 8.5rem) clamp(5rem, 16vw, 9.5rem);
  text-align: center;
}

.hero__body { max-width: 760px; margin-inline: auto; }

.hero__hello {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  color: var(--gold-lt);
  margin: 0 0 .35rem;
  line-height: 1.2;
}

.hero h1 { color: #fff; margin-bottom: 1.3rem; }
.hero .rule { margin: 0 auto 1.5rem; background: var(--gold); }

.hero__sub {
  font-size: clamp(1rem, 2.6vw, 1.14rem);
  line-height: 1.8;
  color: #e3ded5;
  margin: 0 auto 2.2rem;
  max-width: 620px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ── Info-Band ──────────────────────────────────────────────────────────── */

.infoband { background: var(--ink-950); color: var(--on-dark); }

.infoband__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.infoband__item { padding: 1.5rem 0; border-bottom: 1px solid var(--ink-700); }
.infoband__item:last-child { border-bottom: 0; }

.infoband__lbl {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: .5rem;
}

.infoband__val {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.25rem;
  color: #f2eee7;
  line-height: 1.35;
}

/* ── Abschnitte ─────────────────────────────────────────────────────────── */

.section { padding-block: clamp(3.25rem, 10vw, 6.5rem); }
.section--wash { background: var(--wash); border-block: 1px solid var(--line); }

.section__head { max-width: 640px; margin-bottom: 2.5rem; }
.section__head--center { text-align: center; margin-inline: auto; }
.section__head p:last-of-type { margin-bottom: 0; }
.section__head p { color: var(--muted); }

/* ── Ueber uns ──────────────────────────────────────────────────────────── */

.about { display: grid; grid-template-columns: 1fr; gap: 2.75rem; align-items: center; }

.about__media { position: relative; }
.about__img { display: block; width: 100%; height: 320px; object-fit: cover; }

/* Das Jahresschild sitzt im Entwurf halb ausserhalb des Bildes. Auf dem Handy
   wuerde es aus dem Fenster ragen — dort steht es buendig. */
.about__badge {
  position: absolute;
  right: 0;
  bottom: -1.1rem;
  background: var(--gold-ink);
  color: #fff;
  padding: 1rem 1.4rem;
  text-align: center;
  box-shadow: 0 10px 26px rgb(29 27 25 / .25);
}

.about__num {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
}

.about__lbl {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-top: .35rem;
}

.about__text { padding-top: 1.5rem; }
.about__text p { font-size: 1.02rem; line-height: 1.85; }

.usps {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem 1.8rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.usps li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .98rem;
  line-height: 1.55;
}

.usps .icon { color: var(--gold-ink); margin-top: .22rem; width: 1.05rem; height: 1.05rem; }

.signature {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}

.signature__name {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--ink-950);
}

.signature__role {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .35rem;
}

/* ── Speisekarte ────────────────────────────────────────────────────────── */

/* Die vier Reiter sind reines CSS: Radios steuern ueber :checked, welche
   Tafel sichtbar ist. Ohne Javascript funktioniert das genauso, es ist mit
   der Tastatur bedienbar, und es entsteht kein Skript, das der Basis-Stufe
   in die Quere kaeme (V8). */
.menu { border: 0; padding: 0; margin: 0; min-width: 0; }

.menu__radio { position: absolute; opacity: 0; pointer-events: none; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 2.5rem;
}

.tabs label {
  padding: .9rem 1.1rem;
  margin-bottom: -1px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
}

.tabs label:hover { color: var(--gold-ink); }

#kt-vorspeisen:checked    ~ .tabs label[for="kt-vorspeisen"],
#kt-hauptgerichte:checked ~ .tabs label[for="kt-hauptgerichte"],
#kt-nachspeisen:checked   ~ .tabs label[for="kt-nachspeisen"],
#kt-getraenke:checked     ~ .tabs label[for="kt-getraenke"] {
  color: var(--gold-ink);
  border-bottom-color: var(--gold);
}

/* Der Ring gehoert sichtbar an die Beschriftung, nicht an das versteckte
   Eingabefeld — sonst tastet sich niemand durch die Reiter. */
#kt-vorspeisen:focus-visible    ~ .tabs label[for="kt-vorspeisen"],
#kt-hauptgerichte:focus-visible ~ .tabs label[for="kt-hauptgerichte"],
#kt-nachspeisen:focus-visible   ~ .tabs label[for="kt-nachspeisen"],
#kt-getraenke:focus-visible     ~ .tabs label[for="kt-getraenke"] {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
}

.panel { display: none; }

#kt-vorspeisen:checked    ~ .panels #p-vorspeisen,
#kt-hauptgerichte:checked ~ .panels #p-hauptgerichte,
#kt-nachspeisen:checked   ~ .panels #p-nachspeisen,
#kt-getraenke:checked     ~ .panels #p-getraenke {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 3.5rem;
}

.dish { padding: 1.1rem 0; border-bottom: 1px dotted var(--line-2); }

.dish__head { display: flex; align-items: baseline; gap: .6rem; }

.dish__name {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink-950);
  line-height: 1.3;
}

.dish__dots { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }

.dish__price {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--gold-ink);
  white-space: nowrap;
}

.dish__desc { font-size: .9rem; color: var(--muted); line-height: 1.65; margin: .35rem 0 0; }

.menu__foot { text-align: center; margin-top: 2.75rem; }
.menu__note { font-size: .82rem; color: var(--muted); margin: 1.2rem 0 0; }

/* ── Gaststimme ─────────────────────────────────────────────────────────── */

.voice {
  background: var(--ink-950);
  color: #fff;
  padding-block: clamp(3.25rem, 10vw, 6rem);
  text-align: center;
}

.voice__inner { max-width: 820px; margin-inline: auto; }

.voice__quotemark {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 3.5rem;
  line-height: .6;
  color: var(--gold-lt);
  display: block;
  margin-bottom: 1.2rem;
}

.voice blockquote {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.35rem, 3.6vw, 1.85rem);
  line-height: 1.5;
  color: #f5f1ea;
  margin: 0 0 1.75rem;
}

.voice figcaption { display: grid; justify-items: center; gap: .8rem; }

.voice__portrait {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgb(168 134 61 / .55);
}

.voice__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }

.voice__who { display: block; font-weight: 700; font-size: .95rem; color: #fff; }

.voice__where {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-top: .3rem;
}

/* ── Galerie ────────────────────────────────────────────────────────────── */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.gallery__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--wash-2);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.gallery__item:hover img { transform: scale(1.07); }

/* ── Feiern ─────────────────────────────────────────────────────────────── */

.feiern { display: grid; grid-template-columns: 1fr; gap: 2.75rem; align-items: center; }

.rooms {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 1.75rem 0 2rem;
}

.room {
  background: var(--paper);
  padding: 1.15rem 1.35rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.room__name {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--ink-950);
  line-height: 1.3;
}

.room__note { display: block; font-size: .88rem; color: var(--muted); margin: .15rem 0 0; }

.room__size {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  white-space: nowrap;
}

.feiern__media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feiern__media > * { aspect-ratio: 1 / 1; }
.feiern__media > *:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.feiern__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Reservierung ───────────────────────────────────────────────────────── */

.reserve { background: var(--ink-950); color: var(--on-dark); }

.reserve__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}

.reserve h2 { color: #f5f1ea; }
.reserve p { color: var(--on-dark); }

.reserve__tel {
  display: inline-block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: clamp(1.9rem, 6vw, 2.3rem);
  color: var(--gold-lt);
  line-height: 1.2;
  margin-bottom: .3rem;
}

.reserve__tel:hover { color: #fff; text-decoration: none; }
.reserve__telnote { font-size: .85rem; color: var(--on-soft); margin: 0; }

.reserve__hr { height: 1px; background: var(--ink-700); border: 0; margin: 2rem 0; }
.reserve__hint { font-size: .92rem; color: var(--on-dark); line-height: 1.8; margin: 0; }

.form {
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  padding: 1.6rem 1.4rem;
}

.form__grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }

.field label,
.consent > span,
.form__req {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-soft);
}

.field label { display: block; margin-bottom: .5rem; }

.field input,
.field textarea {
  width: 100%;
  background: var(--ink-950);
  border: 1px solid #3a3632;
  color: #f5f1ea;
  padding: .85rem 1rem;
  font-family: var(--font-body);
  font-size: .97rem;
  border-radius: 0;
}

.field input:hover,
.field textarea:hover { border-color: var(--gold-ink); }

.field textarea { resize: vertical; min-height: 96px; }

/* Platzhaltertext ist Text und faellt damit unter V9. Der Entwurfswert
   #7d766b kam auf --ink-950 nur auf 3,8:1; hier steht --on-soft mit 5,2:1,
   dieselbe Farbe wie die Beschriftung ueber dem Feld. */
.field ::placeholder { color: var(--on-soft); opacity: 1; }

.consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}

.consent > span {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: .84rem;
  line-height: 1.65;
  color: var(--on-soft);
}

.consent a { color: var(--gold-lt); }
.consent input { margin-top: .35rem; flex: none; width: 17px; height: 17px; accent-color: #856726; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.form__req { margin: 0; }

/* ── Anfahrt und Kontakt ────────────────────────────────────────────────── */

.visit {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
}

.visit__facts { padding: 1.85rem 1.5rem; background: var(--paper); }
.visit__block { margin-bottom: 1.85rem; }
.visit__block:last-child { margin-bottom: 0; }

.visit__lbl {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .6rem;
}

.visit__val { font-size: 1rem; line-height: 1.8; font-style: normal; margin: 0; }

.hours { display: flex; flex-direction: column; gap: .1rem; font-size: .97rem; }
.hours > div { display: flex; justify-content: space-between; gap: 1rem; }
.hours .is-closed { color: var(--muted); }

.visit__map { position: relative; background: var(--wash-2); padding: 1.5rem; }

/* Gezeichnete Umgebungskarte statt eines Kartendienstes: keine Kacheln, keine
   Koordinaten, kein Dritter, der die Adresse des Besuchers sieht (V12). Der
   Entwurf hatte hier einen Knopf "Karte laden", hinter dem nichts lag. */
.map {
  --map-bg: #f3efe7;
  --map-block: #e5dfd3;
  --map-road: #ffffff;
  --map-water: #dfe6e4;
  --map-frame: #cec6b6;
  /* Beschriftung und Marke sind dunkler als --muted und --gold-ink. Die Karte
     hat zwei Gruende, die es sonst nirgends auf der Seite gibt: die hellen
     Baubloecke --map-block und das 12-Prozent-Feld hinter "Alte Linde". Mit
     den Seitenfarben waeren es dort 4,4:1 und 4,0:1 und damit zu wenig (V9). */
  --map-ink: #635d54;
  --map-accent: #785c21;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 320 / 220;
  border: 1px solid var(--line-2);
}

.map__note { font-size: .8rem; color: var(--muted); margin: .8rem 0 0; }

.map__card {
  background: var(--ink-950);
  color: var(--on-dark);
  padding: 1.15rem 1.25rem;
  margin-top: 1rem;
}

.map__cardtitle {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.15rem;
  color: #f5f1ea;
  margin: 0 0 .3rem;
}

.map__card p { font-size: .9rem; line-height: 1.7; margin: 0; }

/* ── Fuss ───────────────────────────────────────────────────────────────── */

.footer {
  background: var(--ink-900);
  color: var(--on-soft);
  padding-top: clamp(2.75rem, 8vw, 4rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem;
  padding-bottom: 2.5rem;
}

.footer h2 {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #f5f1ea;
  margin-bottom: 1.1rem;
}

.footer__brandname {
  display: block;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.5rem;
  color: #f5f1ea;
  line-height: 1.2;
}

.footer__brandsub {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin: .4rem 0 1.2rem;
}

.footer p { font-size: .9rem; line-height: 1.85; }
.footer__list { display: flex; flex-direction: column; gap: .6rem; font-size: .9rem; list-style: none; padding: 0; margin: 0; }
.footer a { color: var(--on-soft); }
.footer a:hover { color: var(--gold-lt); text-decoration: none; }

.footer__social { display: flex; gap: .6rem; margin-top: 1.2rem; }

.footer__social a {
  width: 38px; height: 38px;
  border: 1px solid var(--ink-700);
  color: var(--on-soft);
  display: grid;
  place-items: center;
}

.footer__social a:hover { border-color: var(--gold); color: var(--gold-lt); }

.footer__legal { border-top: 1px solid #262320; }

.footer__legalinner {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding-block: 1.3rem;
  font-size: .82rem;
}

.footer__links { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; }

/* ── Handy-Leiste am unteren Bildrand ───────────────────────────────────── */

.quickbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--quickbar);
  background: var(--ink-950);
  border-top: 1px solid var(--ink-700);
}

.quickbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.quickbar a:hover { text-decoration: none; background: var(--ink-800); }
.quickbar a + a { background: var(--gold-ink); }
.quickbar a + a:hover { background: var(--ink-800); }

/* Zurueck nach oben — erst ab Rechnerbreite, sonst kollidiert er mit der
   Leiste am unteren Bildrand. */
.totop { display: none; }

/* ══ Ab 700px ════════════════════════════════════════════════════════════ */

@media (min-width: 700px) {
  .topbar__contact { display: flex; }

  .infoband__grid { grid-template-columns: repeat(3, 1fr); }
  .infoband__item { padding: 2rem 1.75rem; border-bottom: 0; border-right: 1px solid var(--ink-700); }
  .infoband__item:first-child { padding-left: 0; }
  .infoband__item:last-child { padding-right: 0; border-right: 0; }

  .about__img { height: 420px; }
  .about__badge { right: -1rem; bottom: -1.5rem; }

  .usps { grid-template-columns: 1fr 1fr; }

  #kt-vorspeisen:checked    ~ .panels #p-vorspeisen,
  #kt-hauptgerichte:checked ~ .panels #p-hauptgerichte,
  #kt-nachspeisen:checked   ~ .panels #p-nachspeisen,
  #kt-getraenke:checked     ~ .panels #p-getraenke { grid-template-columns: 1fr 1fr; }

  .tabs label { padding: 1rem 1.7rem; font-size: .74rem; }

  .gallery { grid-template-columns: repeat(4, 1fr); }

  .form { padding: 2.25rem 2rem; }
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--wide { grid-column: span 2; }

  .visit { grid-template-columns: 1fr 1.35fr; }
  .visit__facts { padding: 2.5rem 2.25rem; }
  .visit__map { padding: 2rem; border-left: 1px solid var(--line); }

  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.75rem; }
  .footer__legalinner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ══ Ab 1000px ═══════════════════════════════════════════════════════════ */

@media (min-width: 1000px) {
  html { scroll-padding-top: calc(var(--notice) + 84px + 1rem); }

  .header {
    position: sticky;
    top: var(--notice);
    z-index: 60;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .header__inner { min-height: 84px; }
  .brand__name { font-size: 1.45rem; }

  .nav { display: flex; align-items: center; gap: 1.9rem; }

  .nav a {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    padding-bottom: .3rem;
    border-bottom: 2px solid transparent;
  }

  .nav a:hover { color: var(--gold-ink); border-bottom-color: var(--gold); text-decoration: none; }

  .header__cta { display: inline-flex; }

  .about { grid-template-columns: 1fr 1fr; gap: 4.4rem; }
  .about__img { height: 500px; }
  .about__text { padding-top: 0; }

  .feiern { grid-template-columns: 1fr 1fr; gap: 4.4rem; }

  .reserve__grid { grid-template-columns: 1fr 1.15fr; gap: 4rem; }

  .quickbar { display: none; }
  body { padding-bottom: 0; }

  .totop {
    display: grid;
    place-items: center;
    position: fixed;
    right: 22px;
    bottom: 28px;
    z-index: 80;
    width: 46px;
    height: 46px;
    background: var(--ink-950);
    color: #fff;
    box-shadow: 0 6px 18px rgb(29 27 25 / .3);
  }

  .totop:hover { background: var(--gold-ink); color: #fff; text-decoration: none; }
}

/* ── Bewegung aus ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .has-reveal [data-reveal],
  .has-reveal [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .gallery__item:hover img { transform: none; }
}

/* ── Druck ──────────────────────────────────────────────────────────────── */

@media print {
  #ew-demo-notice, .quickbar, .totop, .header, .hero__actions { display: none; }
  body { padding: 0; color: #000; }
  .hero { background: none; color: #000; }
  .hero__media { display: none; }
  .hero h1, .hero__sub, .hero__hello { color: #000; }
  .panel { display: grid !important; }
  .tabs { display: none; }
}

/* ── Rechtliches ───────────────────────────────────────────────────────────
   Sprungziel fuer Impressum, Datenschutz und Verwandtes. Die Fusszeile
   verweist darauf; ohne dieses Ziel waeren das Verweise ins Leere (V12). */

.legalnote {
  max-width: 1170px;
  margin-inline: auto;
  padding: 1.75rem clamp(1rem, 4vw, 1.75rem) 2.5rem;
  font-size: .85rem;
  line-height: 1.7;
  color: #5b6570;
  background: #ffffff;
}

.legalnote h2 {
  font-size: 1rem;
  margin: 0 0 .35rem;
  color: #22252a;
}

.legalnote p { margin: 0; max-width: 62ch; }