/*
Theme Name:   Till Eulenspiegel
Theme URI:    https://eulenspiegel.appdemoz.de
Description:  Child-Theme für Kadence. Design-System und Bausteine des Till Eulenspiegel in Braunschweig — baugleich mit der Wolfsburger Schwesterseite.
Author:       Damian Zur
Template:     kadence
Version:      1.3.0
Requires PHP: 7.4
Text Domain:  eulenspiegel
*/

/* ============================================================
   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. Wirtshaus-Slider
   ============================================================ */


/* ------------------------------------------------------------
   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;  /* Primär: Buttons, Links, Teaser-Headlines, Preise, Linien */
  --wh-gold-light:  #D3BC8E;  /* Navigation aktiv, Rauten-Trenner */
  --wh-cream:       #EBE4D5;  /* Flächenhintergrund, Hero-Bereich */
  --wh-dark:        #232323;  /* Navigationsleiste, Footer */
  --wh-ink:         #404040;  /* Fließtext */
  --wh-head:        #1E1E1E;  /* Display-Überschriften */
  --wh-orange:      #E68B1F;  /* Badge „LECKER" */
  --wh-amber:       #E3AD47;  /* Akzent, Hover */
  --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;
}


/* ------------------------------------------------------------
   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);
}

a { color: var(--wh-gold); }
a:hover, a:focus-visible { color: var(--wh-amber); }

/* 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;
  background: url("assets/img/wappen.svg") 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);
  color: #fff;
  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);
  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);
  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; }
.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); }
}

.wh-hero .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;
}


/* ------------------------------------------------------------
   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-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;
  color: var(--wh-gold);
  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; }
.wh-menu__note {
  font-size: .85rem;
  color: #8b8478;
  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 {
  border-color: var(--wh-gold);
  outline: 2px solid rgba(167, 120, 29, .25);
  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);
  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);
  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-gold); 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);
  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;
}
.wh-slider__dot {
  width: 24px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  background: var(--wh-leader);
  transition: background-color .18s ease;
}
.wh-slider__dot[aria-current="true"] { background: var(--wh-gold); }
.wh-slider__dot:hover { background: var(--wh-amber); }

/* 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. */