/*
Theme Name:   NC Gastro
Theme URI:    https://github.com/nazuma/nc-gastro
Description:  Gemeinsames Child-Theme für Kadence, im Einsatz auf allen Gastronomie-Standorten des Kunden. Enthält Design-System (Palette, Typografie), Bausteine, Restaurant-Schema und Härtung. Standortabhängige Angaben stehen nicht im Code, sondern in der Option nc_gastro_standort.
Author:       Damian Zur
Template:     kadence
Version:      2.9.1
Requires PHP: 7.4
Text Domain:  nc-gastro
*/

/* ============================================================
   INHALT
   0. Selbst gehostete Schriften
   1. Design-Tokens
   2. Grundtypografie
   3. Baustein 1 — Abschnitts-Header mit Wappen-Trenner
   4. Baustein 2 — Inset-Bildrahmen
   5. Baustein 3 — Parallax-Sektion mit Zackenrand
   6. Baustein 4 — Speisen-Zeile
   7. Baustein 5 — Button / CTA-Zeile
   8. Baustein 6 — Navigation mit Rauten-Trennern
   9. Hero mit Ken-Burns-Effekt
  10. Footer
  11. Hilfsklassen
  12. Reduced Motion
  13. Speisekarte in Textform
  14. Kadence Advanced Form
  15. Kadence Advanced Gallery — Slider
  16. Eigener Slider
  17. Infozeile unter der Navigation
  18. Rechtszeile
  19. Fokus — einheitlicher Sichtbarkeitsring
  20. Hinweise und Kleinteile
  21. Reservierungsformular (eigenes)
  22. Öffnungszeiten
  23. Sondermeldung
   ============================================================

   ZUR KLASSENBENENNUNG
   Die Klassen heißen weiterhin `wh-*`. Sie stecken in den
   Seiteninhalten aller Installationen; ein Umbenennen würde jede
   Seite anfassen, ohne etwas zu verbessern. `wh` steht hier für das
   gemeinsame Design-System, nicht für einen einzelnen Betrieb.

   ZU DEN FARBEN
   `--wh-gold` ist die Markenfarbe und bleibt unverändert. Für Text
   unter 24 px ist sie zu hell: gemessen 3,93:1 auf Weiß und 3,10:1
   auf Creme, verlangt sind 4,5:1 (WCAG 1.4.3). Dafür gibt es
   `--wh-gold-text` mit 5,70:1 auf Weiß und 4,50:1 auf Creme.
   Regel: große Display-Schrift, Linien und Ornamente nehmen
   `--wh-gold`, alles Gelesene nimmt `--wh-gold-text`.
   ============================================================ */


/* ------------------------------------------------------------
   0. SELBST GEHOSTETE SCHRIFTEN
   Open Sans, Lora und Cookie liegen als woff2 im Theme unter
   assets/fonts/ und werden von hier geladen — NICHT von
   fonts.googleapis.com. Damit gibt es keine Verbindung zu Google
   und der Fall aus LG München I, 20.01.2022, Az. 3 O 17493/20
   entsteht gar nicht erst.

   Alle drei stehen unter der SIL Open Font License 1.1, dürfen
   also frei mitgeliefert werden. Bezogen über die npm-Pakete
   @fontsource/open-sans, @fontsource/lora und @fontsource/cookie.

   Subset: latin (enthält ä, ö, ü, ß).
   font-display: swap — Text ist sofort lesbar, die Schrift wird
   nachgeladen, kein unsichtbarer Text beim ersten Aufbau.

   WICHTIG: In Kadence unter Customizer → Typography KEINE dieser
   Schriften auswählen. Sonst lädt Kadence sie zusätzlich von
   Google und der externe Request ist wieder da. Systemstandard
   stehen lassen — die Zuweisung passiert hier über die Tokens.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/open-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/open-sans-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/open-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/open-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/lora-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/lora-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/lora-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cookie";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cookie-latin-400-normal.woff2") format("woff2");
}


/* ------------------------------------------------------------
   1. DESIGN-TOKENS
   Werte ausgelesen aus den Computed Styles von wirtshausbs.de
   (27.07.2026). Diese Palette zusätzlich im Customizer unter
   Kadence → Colors hinterlegen, damit der Blockeditor sie kennt.
   ------------------------------------------------------------ */
:root {
  /* Farben */
  --wh-gold:        #A7781D;  /* Marke: große Überschriften, Linien, Flächen (3,93:1 — nur ab 24px) */
  --wh-gold-text:   #856017;  /* Gelesenes Gold: Preise, Teaser, Buttons (5,70:1 auf Weiß, 4,50:1 auf Creme) */
  --wh-gold-light:  #D3BC8E;  /* Navigation aktiv, Rauten-Trenner (8,50:1 auf Anthrazit) */
  --wh-cream:       #EBE4D5;  /* Flächenhintergrund, Hero-Bereich */
  --wh-dark:        #232323;  /* Navigationsleiste, Footer */
  --wh-ink:         #404040;  /* Fließtext (10,37:1 auf Weiß) */
  --wh-head:        #1E1E1E;  /* Display-Überschriften (16,67:1 auf Weiß) */
  --wh-orange:      #E68B1F;  /* Badge-Fläche — Schrift darauf dunkel, nicht weiß */
  --wh-amber:       #E3AD47;  /* NUR als Fläche. Als Schriftfarbe 2,03:1, also unbrauchbar. */
  --wh-focus:       #856017;  /* Fokusring auf hellem Grund */
  --wh-focus-dark:  #D3BC8E;  /* Fokusring auf dunklem Grund */
  --wh-paper:       #FFFFFF;  /* Content-Flächen, Karten über Parallax */
  --wh-leader:      #CFC6B4;  /* Punktführungslinie in der Speisen-Zeile */

  /* Schriften.
     Cookie, Open Sans, Lora und Berkshire Swash in Kadence unter
     Customizer → Typography wählen UND unter General → Performance
     „Load Google Fonts Locally" aktivieren (DSGVO). */
  --wh-font-body:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wh-font-display: "Cookie", "Snell Roundhand", "Brush Script MT", cursive;
  --wh-font-accent:  "Lora", Georgia, "Times New Roman", serif;
  --wh-font-fancy:   "Berkshire Swash", Georgia, serif;

  /* Typo-Skala.
     Cookie hat eine sehr kleine x-Höhe — 72px wirken wie ~40px
     einer normalen Schrift. Deshalb der große Wert. */
  --wh-size-display: clamp(2.75rem, 6.5vw, 4.5rem);   /* 44 – 72px */
  --wh-size-sub:     clamp(1.75rem, 3.6vw, 2.6rem);   /* 28 – 42px, Serif-Zwischenzeile */
  --wh-size-teaser:  clamp(1.05rem, 1.6vw, 1.25rem);  /* Teaser-Headline */
  --wh-size-body:    1rem;
  --wh-lh-body:      1.65;

  /* Rhythmus */
  --wh-space-section: clamp(3.5rem, 8vw, 6.5rem);
  --wh-space-block:   clamp(1.5rem, 3vw, 2.5rem);
  --wh-maxw:          1240px;

  /* Zackenrand */
  --wh-torn-h: 14px;
  --wh-torn-w: 28px;
  --wh-torn-color: var(--wh-paper);

  /* Bildrahmen */
  --wh-frame-inset: 10px;

  /* Textspalte für Formular, Formularhinweis und Einleitung. Eine Quelle,
     damit die drei nicht auseinanderlaufen. */
  --wh-form-maxw: 46rem;

  /* Telefonhörer für die Infozeile. Als Maske eingesetzt, damit die
     Farbe aus currentColor kommt — ein Asset weniger und kein
     zusätzlicher Request. */
  --wh-icon-tel: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.01-.24 11.4 11.4 0 0 0 3.58.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.58 1 1 0 0 1-.25 1.01l-2.2 2.2z'/%3E%3C/svg%3E");
}


/* ------------------------------------------------------------
   2. GRUNDTYPOGRAFIE
   ------------------------------------------------------------ */
body {
  font-family: var(--wh-font-body);
  font-size: var(--wh-size-body);
  line-height: var(--wh-lh-body);
  color: var(--wh-ink);
}

/* Links im Fließtext. Beim Überfahren wird es dunkler, nicht heller —
   vorher lag hier --wh-amber mit 2,03:1, ein Link wurde beim Fokussieren
   also schlechter sichtbar statt besser. Den Fokus übernimmt jetzt
   ausschließlich der Ring aus Abschnitt 19. */
a { color: var(--wh-gold-text); }
a:hover { color: var(--wh-head); }

/* Display-Überschriften. Klasse bewusst opt-in, damit Kadence-
   Defaults nicht global überschrieben werden. */
.wh-display {
  font-family: var(--wh-font-display);
  font-size: var(--wh-size-display);
  font-weight: 400;
  line-height: 1.05;
  color: var(--wh-head);
  text-transform: none;
  margin: 0;
}

/* Serif-Zwischenzeile, z. B. „Wir haben für Dich geöffnet!" */
.wh-sub {
  font-family: var(--wh-font-accent);
  font-size: var(--wh-size-sub);
  font-weight: 400;
  color: var(--wh-head);
  line-height: 1.2;
  text-align: center;
  margin: 0;
}
.wh-sub small {
  display: block;
  font-size: .46em;
  font-style: italic;
  margin-top: .35em;
  color: var(--wh-ink);
}


/* ------------------------------------------------------------
   3. BAUSTEIN 1 — ABSCHNITTS-HEADER MIT WAPPEN-TRENNER
   Markup:
   <div class="wh-section-head">
     <h2 class="wh-display">…</h2>
     <div class="wh-divider"><span class="wh-divider__mark"></span></div>
   </div>
   ------------------------------------------------------------ */
.wh-section-head { text-align: center; }

.wh-divider {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 26px);
  max-width: var(--wh-maxw);
  margin: clamp(.75rem, 2vw, 1.35rem) auto 0;
}
.wh-divider::before,
.wh-divider::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--wh-gold);
}
.wh-divider__mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  /* Die Zahl hinter dem Fragezeichen hochzählen, wenn wappen.svg getauscht
     wird. Ohne sie zeigen Browser mit warmem Cache tagelang das alte
     Zeichen weiter — style.css bekommt beim Theme-Update eine neue
     ?ver-Nummer, die darin genannte Bilddatei aber nicht. */
  background: url("assets/img/wappen.svg?v=2") center / contain no-repeat;
}
/* Variante ohne Wappen: reine Linie */
.wh-divider--plain .wh-divider__mark { display: none; }
.wh-divider--plain { gap: 0; }


/* ------------------------------------------------------------
   4. BAUSTEIN 2 — INSET-BILDRAHMEN
   Dünne weiße Linie innerhalb des Bildes, kein Rand am Bildrand.
   Auf das Bild-Block-Wrapper anwenden: <figure class="wp-block-image wh-framed">
   ------------------------------------------------------------ */
.wh-framed { position: relative; }
.wh-framed img { display: block; width: 100%; height: auto; }
.wh-framed::after {
  content: "";
  position: absolute;
  inset: var(--wh-frame-inset);
  border: 1px solid rgba(255, 255, 255, .85);
  pointer-events: none;
}
/* Auf hellen Bildern besser lesbar */
.wh-framed--dark::after { border-color: rgba(0, 0, 0, .35); }

/* Bildunterschrift des Blocks nicht mitrahmen */
.wh-framed figcaption { position: relative; z-index: 1; }


/* ------------------------------------------------------------
   5. BAUSTEIN 3 — PARALLAX-SEKTION MIT ZACKENRAND
   Markup:
   <div class="wh-parallax wh-torn" style="--wh-parallax-img:url(…)">
     <div class="wh-card">…</div>
   </div>

   Das Bild kommt über die Variable --wh-parallax-img, NICHT über
   background-image. Grund: darüber liegt fest eine dunkle Abdunklung,
   damit die weiße Überschrift auf jedem Bild lesbar bleibt. Stärke
   über --wh-parallax-dim justierbar (0 = aus, .42 = Standard).
   ------------------------------------------------------------ */
.wh-parallax {
  position: relative;
  background-image:
    linear-gradient(rgba(0, 0, 0, var(--wh-parallax-dim, .42)),
                    rgba(0, 0, 0, var(--wh-parallax-dim, .42))),
    var(--wh-parallax-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: var(--wh-head);   /* Fallback, solange kein Bild gesetzt ist */
  padding-block: calc(var(--wh-space-section) + var(--wh-torn-h));
}

/* Inhalte in der Parallax-Sektion liegen auf dunklem Grund */
.wh-parallax .wh-display,
.wh-parallax .wh-sub { color: #fff; }

/* Das Wappen ist dunkel gezeichnet — auf dunklem Grund weiß einfärben */
.wh-parallax .wh-divider__mark { filter: brightness(0) invert(1); }

/* Auf dunklem Grund trägt das kräftige Gold zu wenig — helle Variante */
.wh-parallax .wh-divider::before,
.wh-parallax .wh-divider::after { background: var(--wh-gold-light); }
/* iOS und Android ignorieren background-attachment:fixed teilweise
   bzw. rendern es fehlerhaft — auf Touch/klein sauber abschalten. */
@media (max-width: 1024px), (hover: none) {
  .wh-parallax { background-attachment: scroll; }
}

/* Gezackte Kanten oben und unten.
   Farbe kommt aus --wh-torn-color, die Form aus der Maske. */
.wh-torn { position: relative; }
.wh-torn::before,
.wh-torn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--wh-torn-h);
  background: var(--wh-torn-color);
  z-index: 2;
  pointer-events: none;
}
.wh-torn::before {
  top: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 0 L14 14 L28 0 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top center / var(--wh-torn-w) var(--wh-torn-h);
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 0 L14 14 L28 0 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x top center / var(--wh-torn-w) var(--wh-torn-h);
}
.wh-torn::after {
  bottom: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 14 L14 0 L28 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom center / var(--wh-torn-w) var(--wh-torn-h);
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14'%3E%3Cpath d='M0 14 L14 0 L28 14 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom center / var(--wh-torn-w) var(--wh-torn-h);
}
/* Nur oben bzw. nur unten */
.wh-torn--top-only::after,
.wh-torn--bottom-only::before { display: none; }

/* Weiße Content-Karte über dem Parallax-Bild */
.wh-card {
  background: var(--wh-paper);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  position: relative;
  z-index: 1;
}


/* ------------------------------------------------------------
   6. BAUSTEIN 4 — SPEISEN-ZEILE
   Markup:
   <p class="wh-badge">Lecker</p>
   <p class="wh-dish">
     <span class="wh-dish__name">Ganze knusprig gebratene Riesenschweinshaxe</span>
     <span class="wh-dish__leader"></span>
     <span class="wh-dish__price">€24,90</span>
   </p>
   ------------------------------------------------------------ */
.wh-badge {
  display: inline-block;
  background: var(--wh-orange);
  /* Dunkel statt weiß: Weiß auf diesem Orange ergibt 2,60:1 und ist bei
     11 px fett deutlich zu wenig. Dunkelgrau darauf sind 6,41:1, die
     Markenfarbe bleibt erhalten. */
  color: var(--wh-head);
  font-family: var(--wh-font-body);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 9px;
  margin: 0 0 .6rem;
  border-radius: 2px;
}

/* Zwei Spalten statt Flexbox mit Umbruch.

   Vorher war die Zeile eine flex-Box mit flex-wrap: wrap. Sobald der
   Gerichtname zu lang wurde — auf dem Handy ständig — brach die Zeile um
   und der Preis rutschte mal nach rechts, mal linksbündig in eine neue
   Zeile. Die Preise sprangen also von Gericht zu Gericht.

   Mit Grid steht der Preis immer in derselben rechten Spalte, egal wie
   lang der Name ist. Der Name darf umbrechen, der Preis nie. */
.wh-dish {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  align-items: baseline;
  margin: 0 0 .2rem;
}
.wh-dish__name {
  min-width: 0;            /* erlaubt den Umbruch innerhalb der Spalte */
  font-weight: 700;
  color: var(--wh-head);
}
.wh-dish__price {
  color: var(--wh-gold-text);
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;  /* Ziffern gleich breit, Kommas untereinander */
}

/* Punktführungslinie nur, wo sie auch Platz hat.
   Am Handy würde sie zwischen Name und Preis auf wenige Pixel
   zusammenschrumpfen und nur unruhig wirken. */
.wh-dish__leader { display: none; }

@media (min-width: 46em) {
  .wh-dish { grid-template-columns: auto minmax(2rem, 1fr) auto; }
  .wh-dish__leader {
    display: block;
    border-bottom: 2px dotted var(--wh-leader);
    transform: translateY(-.32em);
  }
}
.wh-dish + p { margin-top: 0; }


/* ------------------------------------------------------------
   7. BAUSTEIN 5 — BUTTON UND CTA-ZEILE
   Der Button wird links und rechts von je einer dünnen goldenen
   Linie flankiert. Auf einen core/buttons-Block anwenden.
   ------------------------------------------------------------ */
.wh-btn .wp-block-button__link,
a.wh-btn,
.wh-btn-solid {
  background-color: var(--wh-gold-text);
  color: #fff;
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.2;
  padding: 13px 34px;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  display: inline-block;
  transition: background-color .18s ease;
}
.wh-btn .wp-block-button__link:hover,
.wh-btn .wp-block-button__link:focus-visible,
a.wh-btn:hover,
a.wh-btn:focus-visible {
  background-color: var(--wh-head);
  color: #fff;
}

/* Zeile mit flankierenden Linien */
.wh-cta {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 28px);
  justify-content: center;
}
.wh-cta::before,
.wh-cta::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: var(--wh-gold);
}
/* Kadence/Gutenberg setzt bei core/buttons ggf. eigene Flex-Regeln */
.wh-cta.wp-block-buttons { flex-wrap: nowrap; }
@media (max-width: 540px) {
  .wh-cta::before, .wh-cta::after { display: none; }
}


/* ------------------------------------------------------------
   8. BAUSTEIN 6 — NAVIGATION MIT RAUTEN-TRENNERN
   Dunkle Leiste, cremefarbene kursive Links, goldene Rauten.
   Im Kadence-Header-Builder der Navigation die CSS-Klasse
   „wh-nav" geben (Customizer → Header → Navigation → Advanced),
   oder die Body-Klasse-Variante weiter unten nutzen.
   ------------------------------------------------------------ */
.wh-nav,
.wh-nav .header-navigation-layout-standard {
  background-color: var(--wh-dark);
}
.wh-nav .menu > li > a,
.wh-nav .header-navigation ul li a {
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--wh-cream);
  text-transform: none;
  letter-spacing: 0;
}
.wh-nav .menu > li.current-menu-item > a,
.wh-nav .menu > li > a:hover,
.wh-nav .menu > li > a:focus-visible {
  color: var(--wh-gold-light);
}

/* Rauten zwischen den Punkten. Liegt auf dem li, damit es auch
   bei Kadences Flex-Menü sauber sitzt. */
.wh-nav .menu > li + li {
  position: relative;
}
.wh-nav .menu > li + li::before {
  content: "\25C6";              /* ◆ */
  position: absolute;
  left: calc(var(--wh-nav-gap, 1.35rem) * -.5);
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--wh-gold-light);
  font-size: .6rem;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
}
/* Auf Mobil (Off-Canvas) keine Rauten */
@media (max-width: 1024px) {
  .wh-nav .menu > li + li::before { display: none; }
}

/* --- Kadence-Header direkt treffen -------------------------------
   Ohne dass im Customizer eine CSS-Klasse gesetzt werden muss.
   Kadence rendert die Hauptnavigation als
   nav.header-navigation > .primary-menu-container > ul#primary-menu
   Die Vorlage hat Logo auf Creme über einer dunklen Navileiste;
   das ließe sich nur mit dem Header-Builder exakt nachbauen
   (Navigation in die Bottom-Row ziehen). Bis dahin: eine
   durchgehend dunkle Kopfleiste — gleiche Farben, gleiche Schrift,
   gleiche Rauten-Trenner.
   ----------------------------------------------------------------- */
#masthead .site-header-row-container-inner,
#masthead .site-header-main-section-left,
#masthead .site-header-main-section-right {
  background-color: var(--wh-dark);
}

#masthead .site-title,
#masthead .site-title a,
#masthead .site-branding a {
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-weight: 400;
  color: var(--wh-cream);
}
#masthead .site-title a:hover { color: var(--wh-gold-light); }

#primary-menu > li > a,
.header-navigation .menu > li > a {
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--wh-cream);
  text-transform: none;
  letter-spacing: 0;
}
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current_page_item > a,
#primary-menu > li > a:hover,
#primary-menu > li > a:focus-visible,
.header-navigation .menu > li.current-menu-item > a,
.header-navigation .menu > li > a:hover {
  color: var(--wh-gold-light);
}

/* Rauten-Trenner zwischen den Menüpunkten */
#primary-menu > li + li { position: relative; }
#primary-menu > li + li::before {
  content: "\25C6";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--wh-gold-light);
  font-size: .55rem;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
}

/* Kadence zeichnet unter aktiven Punkten eine Linie — stört hier */
#primary-menu > li > a::after,
.header-navigation-style-underline .menu > li > a::after { display: none !important; }

/* Mobil: Burger und Off-Canvas in denselben Farben, keine Rauten */
@media (max-width: 1024px) {
  #primary-menu > li + li::before { display: none; }
  #masthead .menu-toggle-open,
  #masthead .menu-toggle-open .menu-toggle-icon { color: var(--wh-cream); }
}


/* ------------------------------------------------------------
   9. HERO MIT KEN-BURNS-EFFEKT
   Ersetzt den Slider-Revolution-Hero der Vorlage.
   Auf einen core/cover-Block anwenden.
   ------------------------------------------------------------ */
.wh-hero { overflow: hidden; position: relative; }

/* Zusätzliche Abdunklung — standardmäßig AUS.
   Der core/cover-Block bringt seine eigene Abdunklung mit
   (`has-background-dim-40`, im Editor einstellbar). Ein zweiter Verlauf
   obendrauf addiert sich: aus 40 % werden unten 70 %, und aus dem Foto
   wird eine graue Fläche. Genau das ist am 28.07.2026 passiert.

   Deshalb liegt der Standard bei 0. Wenn ein echtes Foto so hell ist,
   dass die weiße Überschrift untergeht, ist der erste Griff die
   Abdunklung des Cover-Blocks im Editor — die sieht der Kunde und kann
   sie selbst justieren. Nur wenn das nicht reicht, hier nachhelfen:
   am Hero-Element `--wh-hero-scrim: .35` setzen. */
.wh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, var(--wh-hero-scrim, 0)) 0%,
    rgba(0, 0, 0, calc(var(--wh-hero-scrim, 0) * .55)) 45%,
    rgba(0, 0, 0, 0) 85%
  );
}
/* Der Inhalt muss über dem Verlauf liegen. */
.wh-hero > .wp-block-cover__inner-container { position: relative; z-index: 1; }
.wh-hero .wp-block-cover__image-background,
.wh-hero .wp-block-cover__video-background,
.wh-hero .wh-hero__img {
  animation: wh-kenburns 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes wh-kenburns {
  from { transform: scale(1)    translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

/* Gilt für <p> wie für <h1>. Seit der Hero-Titel die H1 der Startseite
   ist (vorher hatte keine Seite eine), muss die Regel Kadences
   h1-Vorgaben schlagen — daher zusätzlich der Elementselektor. */
.wh-hero .wh-hero__title,
.wh-hero h1.wh-hero__title {
  font-family: var(--wh-font-display);
  font-size: var(--wh-size-display);
  font-weight: 400;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
  margin: 0;
  padding: 0;
  border: 0;
}

/* Auf den Unterseiten trägt die Abschnittsüberschrift die H1. Optik
   bleibt die der Display-Überschrift, nur die Ebene ändert sich. */
h1.wh-display { margin-block: 0; }

/* Ansagebereich des Sliders — für Screenreader da, für Augen nicht.
   Eigene Regel, damit es nicht davon abhängt, ob das Elternthema
   .screen-reader-text mitbringt. */
.wh-slider__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}


/* ------------------------------------------------------------
   10. FOOTER
   Drei Spalten: Parkplätze · Kontakt · Öffnungszeiten
   ------------------------------------------------------------ */
.wh-footer {
  background: var(--wh-dark);
  color: var(--wh-cream);
}
.wh-footer h2,
.wh-footer h3,
.wh-footer .wh-footer__title {
  font-family: var(--wh-font-accent);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--wh-gold-light);
  margin: 0 0 .65rem;
}
.wh-footer a { color: var(--wh-gold-light); }
.wh-footer a:hover, .wh-footer a:focus-visible { color: #fff; }

/* Drei Spalten, gespeist aus den Widget-Bereichen Footer 1–3 */
.wh-footer { padding-block: clamp(2.5rem, 5vw, 4rem); }
.wh-footer__inner {
  max-width: var(--wh-maxw);
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
}
@media (max-width: 860px) {
  .wh-footer__inner { grid-template-columns: 1fr; }
}
.wh-footer__col p { margin: 0 0 .75rem; font-size: .95rem; }
.wh-footer__col :last-child { margin-bottom: 0; }
.wh-footer .widget { margin: 0; }

/* Kadences eigene Fußzeile darunter in denselben Farben */
#colophon,
#colophon .site-bottom-footer-wrap,
#colophon .site-footer-row-container-inner { background-color: var(--wh-dark); }
#colophon,
#colophon .site-info { color: var(--wh-cream); font-size: .9rem; }
#colophon a { color: var(--wh-gold-light); }
#colophon a:hover { color: #fff; }


/* ------------------------------------------------------------
   11. HILFSKLASSEN
   ------------------------------------------------------------ */
.wh-bg-cream { background-color: var(--wh-cream); }
.wh-bg-dark  { background-color: var(--wh-dark); color: var(--wh-cream); }
.wh-bg-paper { background-color: var(--wh-paper); }

.wh-teaser-title {
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-size: var(--wh-size-teaser);
  line-height: 1.35;
  color: var(--wh-gold-text);
  text-align: center;
  margin: 1rem 0 .6rem;
}
.wh-center { text-align: center; }
.wh-section { padding-block: var(--wh-space-section); }
.wh-narrow  { max-width: 780px; margin-inline: auto; }


/* ------------------------------------------------------------
   12. REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .wh-hero .wp-block-cover__image-background,
  .wh-hero .wp-block-cover__video-background,
  .wh-hero .wh-hero__img {
    animation: none;
  }
  .wh-parallax { background-attachment: scroll; }
}


/* ------------------------------------------------------------
   13. SPEISEKARTE IN TEXTFORM
   Die Vorlage zeigt die Karte nur als Bilderslider. Der bleibt
   erhalten, darunter stehen die Gerichte zusätzlich als echter
   Text — lesbar am Handy, auffindbar für Suchmaschinen,
   pflegbar ohne PDF-Export.

   Markup:
   <div class="wh-menu">
     <h3 class="wh-menu__cat">Bayrische Klassiker</h3>
     <p class="wh-dish">…</p>
     <p class="wh-menu__desc">Beschreibung</p>
   </div>
   ------------------------------------------------------------ */
.wh-menu {
  max-width: 860px;
  margin-inline: auto;
}
.wh-menu__cat {
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.25;
  /* Untere Grenze der Skala liegt bei 22,4 px, also unter der
     24-px-Schwelle für „große Schrift" — deshalb die Textvariante. */
  color: var(--wh-gold-text);
  text-align: center;
  margin: clamp(2.25rem, 5vw, 3.5rem) 0 1.5rem;
}
.wh-menu__cat:first-child { margin-top: 0; }
.wh-menu__cat::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  background: var(--wh-gold);
  opacity: .55;
  margin: .7rem auto 0;
}
.wh-menu .wh-dish { margin-bottom: .2rem; }
/* Gerichte ohne Beschreibung erzeugten bisher ein leeres Absatz-Element
   mit vollem Abstand — der Rhythmus wirkte dadurch zufällig. */
.wh-menu__desc:empty { display: none; }
.wh-menu .wh-dish:has( + .wh-menu__desc:empty ) { margin-bottom: 1.3rem; }
.wh-menu .wh-dish:last-child { margin-bottom: 0; }
.wh-menu__desc {
  font-size: .95rem;
  color: #6d675d;
  margin: 0 0 1.3rem;
}
.wh-menu__desc:last-child { margin-bottom: 0; }
/* Kleines Schild für „Empfehlung". Sitzt hinter dem Namen, nicht davor —
   der Gast liest zuerst, was es ist, dann dass es empfohlen wird.
   Dunkle Schrift auf Gold, weil Weiß darauf nur 3,93:1 erreicht. */
.wh-dish__tipp {
  display: inline-block;
  margin-left: .5em;
  padding: .1em .45em;
  border-radius: 2px;
  background: var(--wh-gold-light);
  color: var(--wh-head);
  font-family: var(--wh-font-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  vertical-align: .12em;
  white-space: nowrap;
}

.wh-menu__note {
  font-size: .85rem;
  /* War #8b8478 — ein warmes Grau mit nur 3,70:1 auf Weiß. Bei 14 px
     sind 4,5:1 verlangt; #6B6459 hält denselben warmen Ton und kommt
     auf 5,74:1. */
  color: #6B6459;
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}


/* ------------------------------------------------------------
   14. KADENCE ADVANCED FORM IM WIRTSHAUS-DESIGN
   Der Reservierungsblock bringt eigene Stile mit (blauer Button,
   abgerundete Felder). Hier auf die Palette gezogen.
   ------------------------------------------------------------ */
.kb-adv-form-field .kb-field,
.kb-adv-form-field input.kb-field,
.kb-adv-form-field select.kb-field,
.kb-adv-form-field textarea.kb-field {
  border: 1px solid var(--wh-leader);
  border-radius: 0;
  font-family: var(--wh-font-body);
  font-size: 1rem;
  color: var(--wh-ink);
  background: var(--wh-paper);
}
.kb-adv-form-field .kb-field:focus {
  /* Vorher lag hier ein Ring mit 25 % Deckkraft — sichtbar war davon
     praktisch nichts. Jetzt deckend, damit man beim Tabben erkennt,
     in welchem Feld man steht. */
  border-color: var(--wh-gold-text);
  outline: 2px solid var(--wh-focus);
  outline-offset: 1px;
}
.kb-adv-form-field .kb-adv-form-label {
  font-family: var(--wh-font-body);
  font-weight: 600;
  color: var(--wh-head);
}

.kb-adv-form-submit-button,
.kb-submit-field .kb-button {
  background-color: var(--wh-gold-text);
  background-image: none;
  color: #fff;
  border: 0;
  border-radius: 0;
  font-family: var(--wh-font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem;
  padding: 13px 34px;
  transition: background-color .18s ease;
}
.kb-adv-form-submit-button:hover,
.kb-adv-form-submit-button:focus-visible,
.kb-submit-field .kb-button:hover {
  background-color: var(--wh-head);
  color: #fff;
}


/* ------------------------------------------------------------
   15. KADENCE ADVANCED GALLERY — SLIDER
   Ersetzt den WPBakery-FlexSlider der Vorlage. Pfeile und Punkte
   in die Palette gezogen, damit der Slider nicht wie ein
   Fremdkörper wirkt.
   ------------------------------------------------------------ */
.wh-gallery .kb-slide-item img { object-fit: contain; }

.wh-gallery .splide__arrow,
.wh-gallery .kt-blocks-carousel-arrow {
  background: var(--wh-gold-text);
  color: #fff;
  border-radius: 0;
  opacity: .9;
}
.wh-gallery .splide__arrow:hover { background: var(--wh-head); opacity: 1; }
.wh-gallery .splide__arrow svg { fill: #fff; }

.wh-gallery .splide__pagination__page {
  background: var(--wh-leader);
  border-radius: 0;
  width: 10px;
  height: 3px;
}
.wh-gallery .splide__pagination__page.is-active {
  background: var(--wh-gold);
  transform: none;
}


/* ------------------------------------------------------------
   16. WIRTSHAUS-SLIDER
   Ersatz für den FlexSlider der Vorlage. Ein Bild pro Ansicht,
   Pfeile, Punkte, am Handy wischbar. Ohne Plugin.

   Markup:
   <div class="wh-slider" tabindex="0" role="group" aria-label="…">
     <div class="wh-slider__track">
       <figure class="wh-slider__slide"><img …></figure>
     </div>
     <button class="wh-slider__btn wh-slider__btn--prev" …>‹</button>
     <button class="wh-slider__btn wh-slider__btn--next" …>›</button>
     <div class="wh-slider__dots">
       <button class="wh-slider__dot" …></button>
     </div>
   </div>
   ------------------------------------------------------------ */
.wh-slider {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
}
.wh-slider:focus-visible { outline: 2px solid var(--wh-focus); outline-offset: 4px; }

.wh-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wh-slider__track::-webkit-scrollbar { display: none; }

.wh-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
}
.wh-slider__slide img {
  display: block;
  width: 100%;
  height: auto;
}

.wh-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: var(--wh-gold-text);
  color: #fff;
  font-family: var(--wh-font-accent);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .18s ease, opacity .18s ease;
}
.wh-slider__btn:hover:not(:disabled) { background: var(--wh-head); }
.wh-slider__btn:disabled { opacity: .3; cursor: default; }
.wh-slider__btn--prev { left: 0; }
.wh-slider__btn--next { right: 0; }

.wh-slider__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1.1rem;
}
/* Der Punkt sieht aus wie ein 24 × 3 px flacher Strich, ist aber
   24 × 24 px groß. Sichtbar ist nur das ::before, die Trefferfläche ist
   das Element selbst — WCAG 2.2 verlangt 24 × 24 px (2.5.8), und mit dem
   Finger trifft man 3 px Höhe ohnehin nicht. */
.wh-slider__dot {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.wh-slider__dot::before {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  background: var(--wh-leader);
  transition: background-color .18s ease;
}
.wh-slider__dot[aria-current="true"]::before { background: var(--wh-gold); }
.wh-slider__dot:hover::before { background: var(--wh-gold-text); }

/* Der Abstand kommt jetzt aus der Trefferfläche selbst, deshalb weniger
   gap und weniger Abstand nach oben als vorher. */
.wh-slider__dots { gap: 2px; margin-top: .5rem; }

/* Kein scroll-behavior: smooth im CSS!
   In Kombination mit scroll-snap-type: mandatory verwirft Chromium den
   programmatischen Scroll aus den Pfeilen — der Slider steht dann still.
   Das Weiche kommt deshalb aus dem Skript über die behavior-Option,
   das respektiert dort auch prefers-reduced-motion. */


/* ------------------------------------------------------------
   17. INFOZEILE UNTER DER NAVIGATION
   Beantwortet die drei Fragen, mit denen ein Gast auf eine
   Restaurantseite kommt: offen oder nicht, wie erreiche ich euch,
   wie reserviere ich. Vorher standen die Öffnungszeiten
   ausschließlich in der Fußzeile.

   Gerendert aus functions.php am Hook kadence_after_header.
   Der Öffnungsstatus wird serverseitig gerechnet — kommt später ein
   Seiten-Cache dazu, muss diese Zeile davon ausgenommen werden.
   ------------------------------------------------------------ */
.wh-infobar {
  background: var(--wh-cream);
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  font-family: var(--wh-font-body);
  font-size: .9rem;
}
.wh-infobar__inner {
  max-width: var(--wh-maxw);
  margin-inline: auto;
  padding: .5rem clamp(1rem, 4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem clamp(1rem, 3vw, 2rem);
  color: var(--wh-ink);
}

/* Der Status bekommt einen Punkt vorangestellt. Bewusst kein Grün/Rot
   als einziges Signal — die Aussage steht im Text (WCAG 1.4.1). */
.wh-infobar__status {
  font-weight: 600;
  color: var(--wh-head);
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.wh-infobar__status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wh-gold-text);
  flex: none;
}

.wh-infobar a { color: var(--wh-gold-text); text-decoration: none; }
.wh-infobar a:hover { color: var(--wh-head); text-decoration: underline; }

/* Die Telefonnummer als Wählziel — am Handy der häufigste Abschluss
   überhaupt. Trefffläche mindestens 44 px hoch. */
.wh-infobar__tel a,
.wh-infobar__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: .1rem;
}
.wh-infobar__tel a::before {
  content: "";
  width: 1em;
  height: 1em;
  margin-right: .4rem;
  flex: none;
  background: currentColor;
  /* Telefonhörer als Maske, damit die Farbe aus currentColor kommt
     und kein zweites Asset nötig ist. */
  -webkit-mask: var(--wh-icon-tel) center / contain no-repeat;
          mask: var(--wh-icon-tel) center / contain no-repeat;
}
.wh-infobar__cta {
  font-family: var(--wh-font-accent);
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 30em) {
  /* Am kleinsten Gerät zählt jede Zeile. Der Status rutscht in eine
     eigene Reihe, Telefon und Reservierung bleiben nebeneinander. */
  .wh-infobar { font-size: .85rem; }
  .wh-infobar__inner { gap: .25rem 1.25rem; }
  .wh-infobar__status { flex-basis: 100%; justify-content: center; }
}


/* ------------------------------------------------------------
   18. RECHTSZEILE
   Impressum und Datenschutz müssen von jeder Seite erreichbar sein
   (§ 5 DDG, Art. 13 DSGVO). Sitzt über dem Kadence-Footer, damit sie
   auch dann steht, wenn die Widget-Bereiche leer sind.
   ------------------------------------------------------------ */
.wh-legal {
  background: var(--wh-dark);
  text-align: center;
  padding: .9rem 1rem 0;
  font-family: var(--wh-font-body);
  font-size: .85rem;
}
.wh-legal a {
  color: var(--wh-gold-light);
  text-decoration: none;
  display: inline-block;
  padding: .35rem .2rem;
}
.wh-legal a:hover { color: #fff; text-decoration: underline; }
.wh-legal__sep { color: var(--wh-gold-light); opacity: .5; margin-inline: .5rem; }


/* ------------------------------------------------------------
   19. FOKUS — EIN RING FÜR ALLES
   Vorher war das zusammengestückelt: Links wechselten nur die Farbe
   (und zwar nach heller), Formularfelder hatten einen Ring mit 25 %
   Deckkraft, Buttons tauschten Fläche und Schrift, der Slider hatte
   einen eigenen Ring. Jetzt gilt überall dasselbe.

   :focus-visible statt :focus — der Ring erscheint bei Tastatur- und
   Screenreader-Bedienung, nicht bei jedem Mausklick.

   Zwei Farben, weil ein Ring gegen den Untergrund mindestens 3:1
   braucht: --wh-focus (#856017, 5,70:1 auf Weiß) auf hellen Flächen,
   --wh-focus-dark (#D3BC8E, 8,50:1 auf Anthrazit) auf der dunklen
   Navileiste und im Footer.
   ------------------------------------------------------------ */
/* Bewusst als Selektorliste und nicht mit :where() geschrieben.
   :where() hat Spezifität null; eine Kadence-Regel mit Klassen im
   Selektor würde den Ring dann wieder ausknipsen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--wh-focus);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Auf dunklem Grund die helle Variante. */
.wh-nav :focus-visible,
#masthead :focus-visible,
.wh-footer :focus-visible,
.wh-legal :focus-visible,
#colophon :focus-visible,
.wh-parallax :focus-visible {
  outline-color: var(--wh-focus-dark);
}

/* Der Sprunglink liegt versteckt und wird beim Fokus sichtbar. Kadence
   bringt die Regel mit; hier nur der Ring, damit er nicht am oberen
   Rand abgeschnitten wird. */
.skip-link:focus-visible { outline-offset: 0; }

/* Fokus darf nicht unter der Infozeile verschwinden, wenn die Kopfzeile
   klebt (WCAG 2.4.11 „Focus Not Obscured"). */
:target,
:focus-visible { scroll-margin-top: 6rem; }


/* ------------------------------------------------------------
   20. HINWEISE UND KLEINTEILE
   Drei Klassen, die aus Seiteninhalten heraus benutzt werden.
   ------------------------------------------------------------ */

/* Baustellenkasten. Steht auf den Rechtsseiten, solange dort Platzhalter
   in eckigen Klammern stehen. Absichtlich auffällig — er soll vor dem
   Go-Live wehtun. */
.wh-todo {
  border-left: 4px solid var(--wh-orange);
  background: #FFF8EC;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
  font-size: .95rem;
}
.wh-todo p { margin: 0; }

/* Datenschutzhinweis über dem Absenden-Button. Klein, aber lesbar —
   kleiner als .85rem wird es nicht, sonst ist der Hinweis zwar
   vorhanden, aber praktisch nicht wahrnehmbar. */
/* Dieselbe Spalte wie das Formular darunter — sonst hat der Hinweis eine
   andere linke Kante als die Felder und die Seite wirkt zusammengewürfelt.
   `.wh-lead` steht für die Einleitungsabsätze derselben Seite.

   Bewusst `rem` und nicht `em`: `em` rechnet gegen die Schriftgröße des
   Elements selbst. Der Hinweis ist mit .85rem kleiner gesetzt, aus
   46em wurden dort 626 px statt 736 — die Kanten lagen um 55 px
   auseinander. Gemessen und korrigiert am 28.07.2026. */
.wh-formhinweis,
.wh-lead {
  max-width: var(--wh-form-maxw);
  margin-inline: auto;
}
.wh-formhinweis {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--wh-ink);
  margin-block: 1.5rem .5rem;
}

/* Routenlinks auf der Anfahrtsseite. Bewusst Links nach außen statt
   eingebetteter Karte: keine fremden Requests auf unserer Seite. */
.wh-route {
  margin-block: 1rem 1.5rem;
  line-height: 1.9;
}
.wh-route a {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.wh-route small {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  color: #5A5A5A;
  line-height: 1.45;
  font-weight: 400;
}


/* ------------------------------------------------------------
   21. RESERVIERUNGSFORMULAR (eigenes)
   Ersetzt das Kadence-Formular. Begründung steht im Kopf von
   inc/reservierung.php: Kadences Submit-Handler liest eine
   Meta-Feldliste, die bei per REST angelegten Formularen leer
   bleibt — die Absendung schlug deshalb immer fehl.

   Die Kadence-Regeln aus Abschnitt 14 bleiben stehen, damit ein
   von Hand im Editor gebautes Kadence-Formular weiterhin passend
   aussieht.
   ------------------------------------------------------------ */
.wh-form-bereich {
  max-width: var(--wh-form-maxw);
  margin-inline: auto;
  scroll-margin-top: 6rem;
}

.wh-form__reihe {
  display: grid;
  gap: 0 1.25rem;
  grid-template-columns: 1fr;
  /* Oben ausrichten, damit die Felder auf einer Linie beginnen. */
  align-items: start;
}
@media (min-width: 40em) {
  /* Ungleiche Spalten, weil die Felder ungleich viel Platz brauchen:
     ein Datum ist breit, eine Personenzahl zweistellig. Vorher waren
     alle drei gleich breit und das Feld für „2 Personen" war so breit
     wie das für ein ganzes Datum — das sah unaufgeräumt aus. */
  .wh-form__reihe { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .55fr); }
  /* Zwei Felder in einer Reihe (E-Mail, Telefon) sollen halbieren.
     :has() prüft, wie viele Kinder da sind. */
  .wh-form__reihe:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, 1fr); }
}

.wh-form__feld { margin-bottom: 1.35rem; }

.wh-form__label {
  display: block;
  font-family: var(--wh-font-body);
  font-weight: 600;
  color: var(--wh-head);
  margin-bottom: .3rem;
}

/* Hilfetext unter dem Feld, nicht als Platzhalter im Feld: Platzhalter
   verschwinden beim Tippen, genau dann, wenn man sie braucht.

   Und unter dem Feld statt zwischen Label und Feld — sonst schiebt der
   Hilfetext das Eingabefeld nach unten und in einer Reihe stehen die
   Felder auf verschiedenen Höhen. Genau das sah am 28.07.2026 schief
   aus: „Uhrzeit" hatte einen Hinweis, „Tag" und „Personen" nicht. */
.wh-form__hilfe {
  display: block;
  font-size: .82rem;
  color: #5A5A5A;
  margin-top: .35rem;
  line-height: 1.4;
}

.wh-form__input {
  width: 100%;
  min-height: 48px;          /* bequem mit dem Finger */
  padding: .6rem .75rem;
  border: 1px solid var(--wh-leader);
  border-radius: 0;
  font-family: var(--wh-font-body);
  font-size: 1rem;           /* nicht kleiner — iOS zoomt sonst beim Fokus */
  color: var(--wh-ink);
  background: var(--wh-paper);
}
textarea.wh-form__input { min-height: 7rem; resize: vertical; }

.wh-form__input:focus {
  border-color: var(--wh-gold-text);
  outline: 2px solid var(--wh-focus);
  outline-offset: 1px;
}

/* Fehler werden nicht nur rot markiert, sondern auch benannt —
   Farbe allein wäre nach WCAG 1.4.1 zu wenig. */
.wh-form__feld--fehler .wh-form__input { border-color: #A4262C; border-width: 2px; }
.wh-form__fehler {
  display: block;
  margin-top: .3rem;
  font-size: .87rem;
  font-weight: 600;
  color: #A4262C;            /* 5,9:1 auf Weiß */
}

.wh-form__fehlerkasten,
.wh-form__ok {
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  border-left: 4px solid;
  font-size: .95rem;
}
.wh-form__fehlerkasten { border-color: #A4262C; background: #FDF3F3; }
.wh-form__ok           { border-color: #2E6B3E; background: #F1F8F2; }
.wh-form__fehlerkasten p:last-child,
.wh-form__ok p:last-child { margin-bottom: 0; }
.wh-form__fehlerkasten ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.wh-form__fehlerkasten a  { color: #A4262C; }

/* Der Kasten bekommt beim Absenden den Fokus. Ohne eigenen Ring wäre
   nicht zu sehen, wohin der Fokus gesprungen ist. */
.wh-form__ok:focus-visible,
.wh-form__fehlerkasten:focus-visible { outline: 2px solid var(--wh-focus); outline-offset: 3px; }

.wh-form__pflichtnote {
  font-size: .82rem;
  color: #5A5A5A;
  margin: 0 0 1.25rem;
}

.wh-form__button {
  font-family: var(--wh-font-accent);
  font-size: 1.05rem;
  min-height: 52px;
  padding-inline: 2rem;
  border: 0;
  cursor: pointer;
}

/* Honeypot. Nicht display:none — manche Bots erkennen das und lassen das
   Feld dann in Ruhe. Stattdessen aus dem Sichtfeld geschoben, für
   Screenreader über aria-hidden und tabindex=-1 unerreichbar. */
.wh-form__hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ------------------------------------------------------------
   22. ÖFFNUNGSZEITEN
   Ausgabe von [nc_oeffnungszeiten]. Speist sich aus denselben
   Daten wie Infozeile und Restaurant-Schema, damit die Fußzeile
   nicht getrennt gepflegt werden muss.
   ------------------------------------------------------------ */
.wh-zeiten {
  margin: 0;
  font-family: var(--wh-font-body);
}
.wh-zeiten__zeile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 .9rem;
  padding: .2rem 0;
  align-items: baseline;
}
.wh-zeiten dt { font-weight: 600; white-space: nowrap; }
.wh-zeiten dd { margin: 0; }

/* Küche und Service je eine Zeile. nowrap verhindert, dass eine Uhrzeit
   mitten im Bereich umbricht — in der schmalen Footer-Spalte stand sonst
   „Service 11:30" oben und „– 23:00" darunter. */
.wh-zeiten__teil {
  display: block;
  white-space: nowrap;
}

/* Der heutige Tag bekommt etwas mehr Gewicht — die häufigste Frage
   ist „habt ihr jetzt auf", nicht „wie ist die Woche". */
.wh-zeiten__zeile--heute dt,
.wh-zeiten__zeile--heute dd { font-weight: 700; }

/* „(heute)" steht hinter dem Tagesbereich und ist ein Zusatz zu ihm, kein
   eigener Eintrag: normale Strichstärke, etwas kleiner. Keine Deckkraft
   unter 1 — bei 13 px braucht der Text die vollen 4,5:1. */
.wh-zeiten__heute {
  font-size: .85em;
  font-weight: 400;
  white-space: nowrap;
}

.wh-zeiten__hinweis {
  margin: .6rem 0 0;
  font-size: .9rem;
  opacity: .85;
}

/* Im Footer stehen die Tage über den Zeiten statt daneben: die Spalte ist
   dort rund 20 em breit, für zwei Spalten nebeneinander zu wenig. */
.wh-footer .wh-zeiten__zeile {
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: .5rem;
}
.wh-footer .wh-zeiten__zeile:last-child { margin-bottom: 0; }

@media (max-width: 30em) {
  .wh-zeiten__zeile { grid-template-columns: 1fr; gap: 0; margin-bottom: .5rem; }
}


/* ------------------------------------------------------------
   23. SONDERMELDUNG
   Das Band ganz oben, über der Infozeile. Für „Heute wegen
   Krankheit geschlossen", „Neueröffnung am 20.08." und alles
   andere, was kurzfristig gilt.

   Drei Töne als Flächenfarbe, gesetzt über zwei Variablen — so
   bleibt die Regelmenge klein und ein vierter Ton wäre zwei
   Zeilen. Die Farbpaare sind auf mindestens 4,5:1 gerechnet,
   weil hier gelesen wird und nicht dekoriert.

   Bewusst kein Schließen-Kreuz: eine Meldung, die man wegklickt,
   verschwindet genau bei dem Gast, der sie noch nicht gelesen
   hat.
   ------------------------------------------------------------ */
.wh-meldung {
  --wh-meldung-bg: var(--wh-amber);
  --wh-meldung-fg: #1E1E1E;
  background: var(--wh-meldung-bg);
  color: var(--wh-meldung-fg);
  font-family: var(--wh-font-body);
  font-size: 1rem;
  line-height: 1.45;
}
.wh-meldung__inner {
  max-width: var(--wh-maxw);
  margin: 0 auto;
  padding: .75rem clamp(1rem, 4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .15rem .9rem;
  text-align: center;
}
.wh-meldung__text { font-weight: 600; }
.wh-meldung__link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
  white-space: nowrap;
}
.wh-meldung__link:hover { text-decoration-thickness: 2px; }

/* Der Fokusring des Themes ist auf helle bzw. dunkle Flächen gerechnet.
   Auf den drei Bändern trifft mal das eine, mal das andere zu —
   currentColor stimmt in jedem Fall, weil die Schriftfarbe hier
   definitionsgemäß genug Kontrast zur Fläche hat. */
.wh-meldung__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.wh-meldung--warnung { --wh-meldung-bg: #8C1D18; --wh-meldung-fg: #FFF1EE; }
.wh-meldung--gut     { --wh-meldung-bg: #1C5B3A; --wh-meldung-fg: #EFF9F3; }

@media (max-width: 30em) {
  .wh-meldung__inner { padding: .65rem 1rem; }
}

/* Kontaktblock aus [nc_kontakt]. <address> ist semantisch richtig, bringt
   aber Kursivschrift mit — die muss weg. */
.wh-kontakt { font-style: normal; }
.wh-kontakt__name { display: block; font-weight: 600; margin-bottom: .35rem; }
.wh-kontakt__zeilen { display: block; }

/* Telefon und E-Mail im Kontaktblock stehen je auf einer eigenen Zeile,
   getrennt durch <br>. Als reine Inline-Elemente maßen sie 22 px Höhe —
   WCAG 2.2 verlangt für Bedienelemente 24 × 24 px (2.5.8). Die Ausnahme
   für Links „in einem Satz" ließe sich hier vertreten, aber die
   Telefonnummer ist am Handy der häufigste Abschluss überhaupt; sie
   sollte man treffen, ohne zu zielen. inline-block macht die Zeile zur
   Trefferfläche, ohne den Umbruch zu ändern.

   Gemessen am 28.07.2026 auf eulenspiegel: vorher 22 px, nachher 24. */
.wh-kontakt__zeilen a {
  display: inline-block;
  min-height: 24px;
}