/* ===========================================================================
   Volkshaus Röhlinghausen - Restaurant & Veranstaltungshaus
   ---------------------------------------------------------------------------
   Design-Read : lokales Restaurant + Feier-Location, Nachbarschaft & Familien
   Dials       : VARIANCE 6 / MOTION 3 / DENSITY 4

   Farbwelt    : Ziegelrot auf warmem Papier.
                 Rot ist die Farbe der Gastronomie und die des Ruhrgebiets,
                 das Papier nimmt den Ton der Speisekarte auf. Bewusst KEIN
                 kühles Grau mit einem Blau- oder Petrolakzent, das ist der
                 Standardanstrich generierter Websites.
                 Ein Akzent für die ganze Seite, keine zweite Signalfarbe
                 außer Grün und Rot für "geöffnet" und "geschlossen".
                 Jedes Paar unten ist gegen WCAG gerechnet, siehe Kommentare.

   Radius-Regel: Buttons = Pille, Karten/Medien = 14px, Formularfelder = 10px
   Theme       : ein einziges helles Theme. Bewusst KEINE dunkle Fassung und
                 kein prefers-color-scheme. Die Seite soll bei jedem Gast
                 gleich aussehen, auch wenn sein Gerät auf Dunkelmodus steht.
                 color-scheme: light unten sorgt dafür, dass der Browser auch
                 seine eigenen Bauteile (Formularfelder, Scrollbalken,
                 Auswahlmenüs) hell zeichnet.
   =========================================================================== */

@import url('../fonts/fonts.css');

/* --------------------------------------------------------------- 1. Tokens */

:root {
  /* Farben - hell (Kontrast gegen die jeweilige Fläche in Klammern) */
  --bg:            #f7f3ec;   /* warmes Papier            */
  --bg-alt:        #efe9de;   /* Wechselband              */
  --surface:       #fffdf9;   /* Karten, Formularfelder   */
  --text:          #231c18;   /* 15.2:1 auf --bg          */
  --muted:         #5b5049;   /*  7.1:1 auf --bg          */
  --accent:        #9c2b21;   /*  6.8:1 auf --bg, Ziegelrot, für Text und Linien */
  --accent-hover:  #7e2019;   /* 10.0:1 gegen Weiß        */
  --on-accent:     #ffffff;   /*  7.6:1 auf --accent      */
  --accent-soft:   #f3e3df;   /*  6.1:1 für Text darauf   */

  /* Flächenfarbe für Knöpfe und das Markenzeichen. Hell ist sie mit --accent
     identisch, dunkel weicht sie ab: als Text bräuchte Rot auf dunklem Grund
     eine helle Tönung, als Fläche würde dieselbe Tönung die Marke in ein
     Pastell verwandeln. Deshalb zwei getrennte Werte. */
  --accent-fill:   #9c2b21;
  --accent-fill-hover: #7e2019;
  --on-fill:       #ffffff;
  --line:          #ded5c7;   /* dekorative Trennlinie    */
  --line-strong:   #8b7f6e;   /*  3.9:1, Rahmen von Feldern */
  --focus:         #9c2b21;
  --open:          #2e6b3c;   /*  6.3:1 auf --surface     */
  --closed:        #9c2b21;   /*  7.4:1 auf --surface     */
  --shadow:        0 1px 2px rgba(35, 28, 24, .06), 0 8px 24px -12px rgba(35, 28, 24, .22);

  /* Radien */
  --r-card:  14px;
  --r-input: 10px;
  --r-pill:  999px;

  /* Abstände (8er-Rhythmus) */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;

  --wrap: 1180px;
  --nav-h: 68px;

  /* Ebenen */
  --z-nav: 40;
  --z-callbar: 45;
  --z-menu: 50;

  /* "only light" statt nur "light". Der Unterschied ist wichtig:
     "light" sagt dem Browser nur, dass die Seite hell kann. Chrome auf Android
     färbt eine solche Seite im Systemdunkelmodus trotzdem selbsttätig um
     (Auto Dark Theme). Erst "only" schaltet diese Zwangsumfärbung ab und hält
     auch Formularfelder, Auswahlmenüs und Scrollbalken hell. */
  color-scheme: only light;
}

html { color-scheme: only light; }

/* ---------------------------------------------------------------- 2. Basis */

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

html {
  -webkit-text-size-adjust: 100%;
  /* verhindert die 300ms-Verzögerung durch Doppeltipp-Zoom auf dem Handy */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(156, 43, 33, .18);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

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

body {
  margin: 0;
  /* Fängt den einen Pixel ab, den die Bleed-Rechnung im Hero danebenliegen
     kann, wenn ein Scrollbalken die Breite von 100vw verfälscht. clip statt
     hidden, sonst verliert die Navigation ihr sticky-Verhalten. */
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;          /* 17px - bewusst über 16px, viele Gäste 60+ */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: 'Outfit', 'IBM Plex Sans', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.012em;
  margin: 0 0 var(--s-2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.8vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--s-2); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { color: var(--accent-hover); }

/* Telefonnummern nie mitten in der Nummer umbrechen */
a[href^='tel:'] { white-space: nowrap; }

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

/* Browser geben figure standardmäßig 40px Seitenrand mit, das verschiebt
   sonst jedes Bild, das in einem figure steckt. */
figure { margin: 0; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--accent-fill); color: var(--on-fill); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent-fill);
  color: var(--on-fill);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-input) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

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

.icon {
  width: 1.25em; height: 1.25em;
  fill: currentColor;
  flex: none;
  vertical-align: -.22em;
}

/* -------------------------------------------------------------- 3. Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 52px;                    /* Touch-Ziel deutlich über 44px */
  padding: .85rem 1.6rem;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  font: 600 1.0625rem/1.2 'Outfit', system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;                 /* CTA-Label bricht nie um */
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}

.btn--primary { background: var(--accent-fill); color: var(--on-fill); }
.btn--primary:hover { background: var(--accent-fill-hover); color: var(--on-fill); }

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn:active { transform: translateY(1px); }

.btn[aria-disabled='true'], .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* ------------------------------------------------------------ 4. Kopfzeile */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  /* Bewusst deckend statt Milchglas: hinter der Leiste scrollen Fotos durch,
     und nur so ist der Kontrast der Navigation immer garantiert. */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: var(--nav-h);              /* 68px, unter dem 80px-Limit */
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-block: .25rem;                /* hebt das Klickziel auf 44px */
  text-decoration: none;
  color: var(--text);
  margin-right: auto;
  min-width: 0;
}
.brand__mark {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--accent-fill);
  color: var(--on-fill);
  display: grid; place-items: center;
  font: 700 1.15rem/1 'Outfit', sans-serif;
  flex: none;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand__name { font: 600 1.05rem/1.15 'Outfit', sans-serif; letter-spacing: -.01em; }
.brand__sub  { font-size: .78rem; color: var(--muted); white-space: nowrap; }

.nav__links {
  display: flex;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  display: block;
  padding: .55rem .8rem;
  border-radius: var(--r-pill);
  color: var(--text);
  text-decoration: none;
  font-size: .98rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav__links a:hover { background: var(--accent-soft); color: var(--accent); }
.nav__links a[aria-current='page'] {
  color: var(--accent);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
  border-radius: 0;
}

.nav__cta { padding: .6rem 1.15rem; min-height: 44px; font-size: 1rem; }

/* Telefonnummer nur im aufgeklappten Menü, am Desktop steht sie als Button daneben */
.nav__phone { display: none; }

.nav__toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem .9rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text);
  font: 600 .95rem 'Outfit', sans-serif;
  cursor: pointer;
}

@media (max-width: 940px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--s-1) clamp(1rem, 4vw, 2.5rem) var(--s-2);
    box-shadow: var(--shadow);
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__links[hidden] { display: none; }
  .nav__links a { padding: .95rem .5rem; border-radius: var(--r-input); font-size: 1.05rem; }
  .nav__links a[aria-current='page'] { box-shadow: none; background: var(--accent-soft); border-radius: var(--r-input); }
  .nav__cta { display: none; }
  .brand__sub { display: none; }

  .nav__phone { display: block; margin-top: .35rem; border-top: 1px solid var(--line); padding-top: .35rem; }
  .nav__phone a { color: var(--accent); font-weight: 600; }
}

/* ----------------------------------------------------------------- 5. Hero */

.hero {
  padding-top: clamp(1.75rem, 4vw, 3.5rem);   /* max ~pt-24 */
  padding-bottom: var(--s-5);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(2rem, 5vw, 3.5rem); }
}

/* Eigene Staffelung für die Titelzeile: sie muss in zwei Zeilen passen,
   sonst schiebt sie die Schaltflächen aus dem ersten Bildschirm. */
.hero h1 { font-size: clamp(2.05rem, 1.15rem + 2.5vw, 3rem); }

.hero__eyebrow {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-2);
}

.hero__lead {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem);
  color: var(--muted);
  max-width: 46ch;
  margin-bottom: var(--s-3);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-alt);
}
.hero__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* Das Foto läuft rechts aus dem Textrahmen heraus bis an den Bildschirmrand.
   Bei einem Restaurant ist die Fotografie das Produkt, sie hat mehr verdient
   als ein Vorschaubildchen neben der Überschrift. */
@media (min-width: 900px) {
  .hero__media {
    margin-right: calc(-1 * ((100vw - min(100vw, var(--wrap))) / 2 + clamp(1rem, 4vw, 2.5rem)));
    border-radius: var(--r-card) 0 0 var(--r-card);
  }
  /* Höhe deckeln: auf sehr breiten Bildschirmen würde das Bild sonst so hoch,
     dass die Überschrift daneben in der Bildschirmmitte zu schweben beginnt. */
  .hero__media img { aspect-ratio: 3 / 2; max-height: min(30rem, 62vh); }
}

/* --------------------------------------------------- 6. Status- / Infoleiste */

.status {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.status__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding-block: var(--s-3);
}
@media (min-width: 760px) {
  .status__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: start; }
}

.status__item { display: flex; gap: .75rem; align-items: flex-start; }
.status__item .icon { color: var(--accent); margin-top: .18rem; }
.status__label {
  display: block;
  font-size: .78rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: .15rem;
}
.status__value { font-size: 1.02rem; font-weight: 500; }
.status__value a { font-weight: 600; text-decoration: none; }
.status__value a:hover { text-decoration: underline; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .6rem .22rem;
  border-radius: var(--r-pill);
  font-size: .88rem;
  font-weight: 600;
  border: 1px solid currentColor;
}
.badge--open   { color: var(--open); }
.badge--closed { color: var(--closed); }
.badge::before {
  content: '';
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: currentColor;
}

/* ----------------------------------------------------------- 6b. Zwei Türen

   Der eine Besucher will essen, der andere feiern. Zwei gleichwertige,
   vollflächig klickbare Wege direkt unter der Statusleiste. Bewusst flache,
   breite Fotos mit Textband darunter, damit die Türen nicht wie die
   Raum-Kacheln weiter unten aussehen.
   -------------------------------------------------------------------------- */

.doors { padding-block: clamp(1.5rem, 3vw, 2.5rem) 0; }

.doors__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
@media (min-width: 760px) {
  .doors__grid { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
}

.door {
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--text);
}
.door__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-alt);
}
@media (min-width: 760px) {
  .door__img { aspect-ratio: 21 / 9; }
}
.door__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  min-height: 44px;
}
.door__text { display: grid; gap: .1rem; min-width: 0; }
.door__title {
  font: 600 1.25rem/1.25 'Outfit', sans-serif;
  letter-spacing: -.01em;
}
.door__line { font-size: .95rem; color: var(--muted); }
.door__arrow {
  color: var(--accent);
  width: 1.5em; height: 1.5em;
  transition: transform .18s ease;
}
.door:hover .door__title { color: var(--accent); }
.door:hover .door__arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .door__arrow { transition: none; }
  .door:hover .door__arrow { transform: none; }
}

/* ------------------------------------------------------------ 7. Abschnitte */

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--alt { background: var(--bg-alt); }

.section__head { max-width: 62ch; margin-bottom: var(--s-4); }
.section__head p { color: var(--muted); }

.eyebrow {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}

/* Layoutfamilie: Bild + Text nebeneinander (nur einmal pro Seite) */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .split--wide-text { grid-template-columns: 1.15fr .85fr; }
}
.split__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.split__media img { border-radius: var(--r-card); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split__media img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }

.facts { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: .7rem; }
.facts li { display: flex; gap: .7rem; align-items: flex-start; }
.facts .icon { color: var(--accent); margin-top: .2rem; }

/* Layoutfamilie: gleich große Kacheln, vier Räume, zwei mal zwei.
   Vier gleichwertige Räume verdienen vier gleich große Felder. Ein Bento mit
   unterschiedlichen Kachelgrößen suggeriert eine Rangfolge, die es nicht gibt,
   und ließ die Karten auf verschiedenen Höhen enden. */
.rooms {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
}
@media (min-width: 760px) {
  .rooms { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
}

/* Kein Kartenrahmen: das Foto ist der Gegenstand, der Text steht darunter.
   Ein Rahmen um ein Foto fügt nichts hinzu, was das Foto nicht selbst zeigt. */
.room {
  display: grid;
  grid-template-rows: auto 1fr;
}
.room__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--bg-alt);
  border-radius: var(--r-card);
}
.room__body {
  padding: var(--s-2) 0 0;
  display: grid;
  grid-template-rows: auto 1fr auto;   /* Titel, Text, Fußzeile auf einer Linie */
  gap: .35rem;
}
.room__body h3 { margin-bottom: 0; }
.room__body p { color: var(--muted); font-size: .98rem; margin: 0; }
.room__meta {
  margin: 0;
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: .92rem;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: .45rem;
}
.room__meta .icon { margin-top: .15rem; }

/* Layoutfamilie: Aushang. Datum links, Veranstaltung rechts, dünne Linie
   dazwischen. Vier gerahmte Kacheln wären dieselbe Form wie die Räume darüber,
   und genau diese Wiederholung lässt eine Seite nach Vorlage aussehen. */
.events {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.event {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .event { grid-template-columns: 12rem 1fr; align-items: baseline; padding: var(--s-4) 0; }
}
.event__when {
  font: 600 clamp(1.1rem, 1rem + .5vw, 1.45rem)/1.2 'Outfit', sans-serif;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.event h3 { font-size: 1.22rem; margin: 0 0 .2rem; }
.event p { font-size: 1rem; color: var(--muted); margin: 0; max-width: 60ch; }

/* --------------------------------------------------- 8. Kontakt & Anfahrt */

.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 940px) {
  .contact { grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
}

.contact__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-3);
}
.contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.contact__list li { display: flex; gap: .75rem; align-items: flex-start; }
.contact__list .icon { color: var(--accent); margin-top: .25rem; }
.contact__list a { font-weight: 600; }

.hours { width: 100%; border-collapse: collapse; margin-top: .35rem; }
.hours caption { text-align: left; font-weight: 600; padding-bottom: .4rem; }
.hours th, .hours td { padding: .3rem 0; text-align: left; font-weight: 400; vertical-align: top; }
.hours th { width: 8rem; padding-right: .75rem; font-weight: 500; }
.hours td { font-variant-numeric: tabular-nums; }
.hours tr[data-today] th, .hours tr[data-today] td { color: var(--accent); font-weight: 600; }

/* Formular
   ---------------------------------------------------------------------------
   Alle Felder liegen auf einem gemeinsamen Raster: gleiche Labelzeile, gleiche
   Feldhöhe, gleiche Grundlinie. Deshalb feste --field-h statt min-height. Mit
   min-height wurde ein Feld von einem Hinweistext in der Nachbarspalte in die
   Länge gezogen, und die Zeile stand schief.
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s-3); --field-h: 52px; }

.field {
  display: grid;
  grid-template-rows: auto var(--field-h) auto;   /* Label, Feld, Zusatzzeile */
  gap: .4rem;
  align-content: start;
  min-width: 0;                                   /* erlaubt Umbruch im Raster */
}
.field label { font-weight: 600; font-size: .96rem; line-height: 1.35; }
.field .hint { font-size: .87rem; color: var(--muted); line-height: 1.4; }
.field .req { color: var(--closed); }

.field input:not([type='checkbox']), .field textarea, .field select {
  width: 100%;
  height: var(--field-h);
  padding: 0 .95rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--text);
  background-color: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-input);
  -webkit-appearance: none;
  appearance: none;
}

/* Datum und Zahl bringen eigene Innenteile mit, die die Höhe verschieben */
.field input[type='date'] { padding-block: 0; }
.field input[type='date']::-webkit-datetime-edit { padding: 0; }
.field input[type='date']::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.field input[type='date']:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.field input[type='number'] { -moz-appearance: textfield; }

/* Eigener Pfeil als echtes Icon, nicht als Hintergrundbild. Ein
   Hintergrundbild auf dem Feld macht automatische Kontrastprüfungen blind
   und müsste für Hell und Dunkel doppelt gepflegt werden. */
.select { position: relative; display: block; height: var(--field-h); }
.select select { padding-right: 2.75rem; }
.select__caret {
  position: absolute;
  right: .95rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
}

.field textarea {
  height: auto;
  min-height: 8.25rem;                 /* Vielfaches der Zeilenhöhe */
  padding: .8rem .95rem;
  resize: vertical;
}
.field--frei {                        /* Textfeld und Einwilligung folgen
                                          nicht dem festen Zeilenraster */
  grid-template-rows: none;
  grid-auto-rows: auto;
}

.field input:not([type='checkbox'])::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }
.field input:not([type='checkbox']):focus, .field textarea:focus, .field select:focus { border-color: var(--accent); }
.field[data-invalid] input:not([type='checkbox']), .field[data-invalid] textarea, .field[data-invalid] select { border-color: var(--closed); }

.field__error {
  color: var(--closed);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.4;
  display: none;
}
.field[data-invalid] .field__error { display: block; }

/* Zwei gleich breite Spalten, oben ausgerichtet */
.form__row { display: grid; gap: var(--s-2); align-items: start; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }

.form__status {
  border-radius: var(--r-input);
  padding: .9rem 1rem;
  font-weight: 500;
  border: 1.5px solid;
}
.form__status:empty { display: none; }
.form__status[data-state='ok']    { color: var(--open);   border-color: currentColor; background: var(--accent-soft); }
.form__status[data-state='error'] { color: var(--closed); border-color: currentColor; background: transparent; }

.form__consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .94rem; color: var(--muted); }
.field[data-invalid] .form__consent input[type='checkbox'] { outline: 2px solid var(--closed); outline-offset: 2px; }
.form__consent input {
  width: 24px; height: 24px; min-height: 24px;
  margin-top: .12rem;
  flex: none;
  accent-color: var(--accent);
}

/* Anfahrt - steht in der schmalen Kontaktkarte, deshalb immer untereinander */
.route {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.route__item { display: flex; gap: .65rem; align-items: flex-start; font-size: .96rem; margin: 0; }
.route__item .icon { color: var(--accent); margin-top: .2rem; }
.route__item strong { display: block; }
.route__item span { color: var(--muted); }

/* ------------------------------------------------------------------ 9. FAQ */

/* Sechs Fragen, zwei Spalten zu drei, getrennt durch Linien statt durch Kästen. */
.faq { display: grid; gap: 0; align-content: start; }
@media (min-width: 900px) {
  .faq { grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4rem); align-items: start; }
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details:first-of-type { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .faq details:nth-of-type(2) { border-top: 1px solid var(--line); }
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) .25rem;
  min-height: 56px;
  cursor: pointer;
  font: 600 1.05rem/1.4 'Outfit', sans-serif;
  list-style: none;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--accent); transition: transform .18s ease; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details > div { padding: 0 .25rem var(--s-3); }
.faq details > div p { color: var(--muted); }

/* ------------------------------------------------------- 9b. Hausgeschichte

   Layoutfamilie: Zeitleiste über die volle Breite. Die Jahreszahlen sind
   belegt (Geschichtsseite der bisherigen Website), keine erfundene Präzision.
   ------------------------------------------------------------------------- */

.heritage__title { max-width: 22ch; margin-bottom: var(--s-4); }

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  counter-reset: none;
}
@media (min-width: 820px) {
  .timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    border-top: 2px solid var(--accent);
    padding-top: var(--s-3);
  }
}
.timeline li { display: grid; gap: .5rem; align-content: start; }
.timeline__year {
  font: 600 clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem)/1 'Outfit', sans-serif;
  letter-spacing: -.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.timeline p { color: var(--muted); margin: 0; max-width: 40ch; }
@media (max-width: 819px) {
  .timeline li { border-top: 2px solid var(--accent); padding-top: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
  .faq summary .icon { transition: none; }
}

/* ------------------------------------------------------------- 10. Fußzeile */

.footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--s-5) var(--s-4);
  margin-bottom: 76px;                 /* Platz für die mobile Anrufleiste */
}
@media (min-width: 760px) { .footer { margin-bottom: 0; } }

.footer__grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }

.footer h2 { font-size: 1.05rem; margin-bottom: .7rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer a { color: var(--text); text-decoration: none; }
.footer a:hover { color: var(--accent); text-decoration: underline; }
.footer address { font-style: normal; color: var(--muted); }

.footer__bottom {
  margin-top: var(--s-4);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  justify-content: space-between;
  font-size: .92rem;
  color: var(--muted);
}

/* Mobile Anrufleiste - der direkteste Draht zum Restaurant */
.callbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-callbar);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .55rem clamp(.75rem, 3vw, 1rem) calc(.55rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .35);
}
.callbar .btn { width: 100%; min-height: 50px; padding-inline: .9rem; font-size: 1rem; }
@media (min-width: 760px) { .callbar { display: none; } }

/* Solange die Buttons im Hero sichtbar sind, wäre die Leiste eine Dopplung.
   Ohne JavaScript bleibt sie einfach dauerhaft stehen. */
.callbar { transition: transform .22s ease-out; }
.callbar[data-hidden] { transform: translateY(115%); }
@media (prefers-reduced-motion: reduce) {
  .callbar { transition: none; }
}

/* ------------------------------------------------- 11. Bewegung (MOTION 3)

   Bewusste Entscheidung: keine Scroll-Animationen.
   Der Inhalt ist ab dem ersten Frame vollständig da, auch beim Drucken, in
   Vorschaubildern und in Browsern ohne JavaScript. Bewegung gibt es nur dort,
   wo sie eine Reaktion auf eine Handlung des Gastes ist: Hover, Fokus,
   gedrückter Button, aufgeklappte Frage.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------- 12. Inhalt */

.prose h2 { margin-top: var(--s-4); }
.prose h3 { margin-top: var(--s-3); font-size: 1.15rem; }
.prose p, .prose li { color: var(--text); }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .35rem; }
.prose dl { display: grid; gap: .35rem; margin: 0 0 var(--s-2); }
@media (min-width: 620px) { .prose dl { grid-template-columns: 12rem 1fr; } }
.prose dt { font-weight: 600; }
.prose dd { margin: 0; color: var(--muted); }

.note {
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  padding: var(--s-2) var(--s-3);
  border-radius: 0 var(--r-input) var(--r-input) 0;
}
.note p:last-child { margin-bottom: 0; }