/*
Theme Name:   NC Gastro Modern
Theme URI:    https://github.com/nazuma/nc-gastro
Description:  Zeitgemäße Fassung von NC Gastro. Gleiche Daten, gleiche Klassen, gleiche Shortcodes — anderes Gesicht: ruhigeres Raster, Waldgrün und Messing statt Gold und Creme, variable Schriften, keine Zackenränder und kein Parallax. Zum Vergleich neben dem Original betreibbar.
Author:       Damian Zur
Template:     kadence
Version:      1.0.5
Requires PHP: 7.4
Text Domain:  nc-gastro
*/

/* ============================================================
   INHALT
   0. Selbst gehostete Schriften
   1. Design-Tokens
   2. Grundtypografie
   3. Baustein 1 — Abschnitts-Header mit Trenner
   4. Baustein 2 — Bildrahmen
   5. Baustein 3 — Bildsektion (früher Parallax) und Karte
   6. Baustein 4 — Speisen-Zeile
   7. Baustein 5 — Button / CTA-Zeile
   8. Baustein 6 — Navigation
   9. Hero
  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
   ============================================================

   WAS SICH GEGENÜBER NC GASTRO ÄNDERT — UND WAS NICHT

   Nicht geändert: die Klassennamen. Sie stecken in den Seiteninhalten
   beider Installationen. Ein Umbenennen würde jede Seite anfassen und
   diesen Vergleich unmöglich machen. Auch die Tokennamen bleiben
   (`--wh-gold`, `--wh-cream`, `--wh-dark`), nur ihre Werte sind neu —
   ein Muster im Inhalt, das `--wh-torn-color: var(--wh-cream)` setzt,
   läuft dadurch weiter.

   Geändert: alles Sichtbare.

   Schrift — Cookie (Schreibschrift) und Lora weichen Fraunces und
   Inter, beide variabel. Eine Schreibschrift als Display-Schrift ist
   das, was ein Layout am schnellsten altern lässt; Fraunces ist eine
   Serifenschrift mit Charakter, die trotzdem seriös bleibt.

   Farbe — Gold auf Creme war warm, aber laut. Jetzt trägt Waldgrün die
   dunklen Flächen, Messing bleibt als Akzent für Preise, Linien und
   Zierrat. Papier ist knochenweiß statt reinweiß, das nimmt dem
   Bildschirm die Härte.

   Form — der Zackenrand entfällt ersatzlos. `background-attachment:
   fixed` ebenso: auf Touch-Geräten unzuverlässig, auf dem Desktop
   ruckelig und seit Jahren ein Erkennungszeichen für Baukastenseiten.
   Der Ken-Burns-Zoom im Hero entfällt, weil Dauerbewegung hinter
   Fließtext anstrengt. Punktführungslinien in der Speisekarte
   entfallen; Abstand ordnet besser als Punkte. Ecken sind leicht
   gerundet, Schatten sind flach.

   ZU DEN FARBEN
   `--wh-gold` (#9C7C3C) ist der Zierrat-Ton: 3,78:1 auf Papier, also
   nur für Linien, Flächen und Schrift ab 24 px. Alles Gelesene nimmt
   `--wh-gold-text` (#7A5F28): 5,81:1 auf Papier, 5,06:1 auf Sand.
   Auf Waldgrün trägt `--wh-gold-light` (#D9C89E) mit 7,23:1.
   ============================================================ */


/* ------------------------------------------------------------
   0. SELBST GEHOSTETE SCHRIFTEN
   Fraunces und Inter liegen als variable woff2 im Theme 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.

   Beide stehen unter der SIL Open Font License 1.1, dürfen also frei
   mitgeliefert werden. Bezogen über @fontsource-variable/fraunces und
   @fontsource-variable/inter, Subset latin.

   Variabel statt statisch: eine Datei deckt alle Schnitte von 100 bis
   900 ab. Vier statische Inter-Schnitte wären 96 KB, die variable
   Datei ist 48 KB — und erlaubt zusätzlich Zwischenwerte wie 550.

   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.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/fraunces-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter-latin-wght-italic.woff2") format("woff2-variations");
}


/* ------------------------------------------------------------
   1. DESIGN-TOKENS
   ------------------------------------------------------------ */
:root {
  /* Farben */
  --wh-gold:        #9C7C3C;  /* Messing: Linien, Flächen, Display-Schrift (3,78:1 — nur ab 24px) */
  --wh-gold-text:   #7A5F28;  /* Gelesenes Messing: Preise, Teaser (5,81:1 auf Papier) */
  --wh-gold-light:  #D9C89E;  /* Auf Waldgrün: Überschriften im Fuß, Links (7,23:1) */
  --wh-cream:       #F0EBE1;  /* Sand: Flächenabschnitte, ruhiger als das alte Creme */
  --wh-dark:        #2E3A2C;  /* Waldgrün: Kopf, Fuß, Bildsektionen */
  --wh-dark-2:      #222B21;  /* eine Stufe tiefer, für die Fußleiste */
  --wh-ink:         #1B1B18;  /* Fließtext (16,68:1 auf Papier) */
  --wh-head:        #12120F;  /* Überschriften (18,13:1) */
  --wh-muted:       #5F5A52;  /* Hilfetexte, Beschreibungen (6,61:1) */
  --wh-orange:      #C2762A;  /* Badge-Fläche */
  --wh-amber:       #E0B463;  /* NUR als Fläche. Als Schriftfarbe zu schwach. */
  --wh-focus:       #7A5F28;  /* Fokusring auf hellem Grund */
  --wh-focus-dark:  #D9C89E;  /* Fokusring auf dunklem Grund */
  --wh-paper:       #FCFBF8;  /* Grundfläche, knochenweiß */
  --wh-leader:      #E2DCD0;  /* Haarlinien, Feldrahmen */
  --wh-line-dark:   rgba(255, 255, 255, .14);

  /* Schriften.
     In Kadence unter Customizer → Typography NICHT auswählen — die
     Zuweisung passiert hier über die Tokens. */
  --wh-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wh-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --wh-font-accent:  "Fraunces", Georgia, "Times New Roman", serif;
  --wh-font-fancy:   "Fraunces", Georgia, serif;

  /* Typo-Skala.
     Kleiner als vorher: Cookie hatte eine winzige x-Höhe und brauchte
     72 px, um wie 40 zu wirken. Fraunces trägt bei 60 px mehr Gewicht
     als Cookie bei 72 — und lässt der Seite Luft. */
  --wh-size-display: clamp(2.35rem, 5.2vw, 3.75rem);  /* 38 – 60px */
  --wh-size-sub:     clamp(1.35rem, 2.6vw, 1.95rem);  /* 22 – 31px */
  --wh-size-teaser:  clamp(1.05rem, 1.5vw, 1.2rem);
  --wh-size-body:    1.0625rem;                       /* 17px — heutiger Lesestandard */
  --wh-lh-body:      1.65;

  /* Rhythmus. Großzügiger als vorher: Weißraum ist das billigste
     Mittel, damit eine Seite aufgeräumt wirkt. */
  --wh-space-section: clamp(4rem, 9vw, 7.5rem);
  --wh-space-block:   clamp(1.75rem, 3.5vw, 3rem);
  --wh-maxw:          1240px;
  --wh-maxw-text:     68ch;

  /* Form */
  --wh-radius:    14px;
  --wh-radius-sm: 8px;
  --wh-shadow:    0 1px 2px rgba(18, 18, 15, .04), 0 12px 32px -16px rgba(18, 18, 15, .22);
  --wh-shadow-sm: 0 1px 2px rgba(18, 18, 15, .05), 0 4px 12px -8px rgba(18, 18, 15, .18);

  /* Zackenrand — ausgeschaltet. Die Variablen bleiben, weil Muster im
     Seiteninhalt sie setzen; die Höhe 0 macht sie wirkungslos. */
  --wh-torn-h: 0px;
  --wh-torn-w: 28px;
  --wh-torn-color: transparent;

  /* Bildrahmen: früher eine weiße Innenlinie, jetzt der Radius. */
  --wh-frame-inset: 0px;

  /* Textspalte für Formular, Formularhinweis und Einleitung. */
  --wh-form-maxw: 46rem;

  /* Telefonhörer für die Infozeile, als Maske eingesetzt. */
  --wh-icon-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 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);
  background: var(--wh-paper);
  -webkit-font-smoothing: antialiased;
}

/* Überschriften global auf Fraunces.

   Zwei Elemente im Selektor, nicht eines: Kadence schreibt seine
   Typografie als `h2 { … }` in ein Inline-Stylesheet, das nach diesem
   hier steht. Bei gleicher Spezifität gewänne Kadence. `body :is(h1…)`
   liegt eine Klassenstufe darüber und setzt sich unabhängig von der
   Reihenfolge durch. */
body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--wh-font-display);
  font-weight: 600;
  color: var(--wh-head);
  letter-spacing: -.01em;
  line-height: 1.18;
  text-wrap: balance;
}

p, li { text-wrap: pretty; }

/* Links im Fließtext. Beim Überfahren wird es dunkler, nicht heller. */
a { color: var(--wh-gold-text); }
a:hover { color: var(--wh-head); }

::selection { background: var(--wh-gold-light); color: var(--wh-head); }

/* Display-Überschriften. Klasse bewusst opt-in. */
.wh-display {
  font-family: var(--wh-font-display);
  font-size: var(--wh-size-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--wh-head);
  text-transform: none;
  text-wrap: balance;
  margin: 0;
}

/* Zwischenzeile unter der Display-Überschrift.
   Früher kursive Serifenschrift; jetzt dieselbe Serifenschrift in
   leichterem Schnitt — der Kontrast entsteht über das Gewicht, nicht
   über die Neigung. */
.wh-sub {
  font-family: var(--wh-font-accent);
  font-size: var(--wh-size-sub);
  font-weight: 400;
  color: var(--wh-head);
  line-height: 1.25;
  letter-spacing: -.01em;
  text-align: center;
  text-wrap: balance;
  margin: 0;
}
.wh-sub small {
  display: block;
  font-family: var(--wh-font-body);
  font-size: .42em;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  margin-top: .8em;
  color: var(--wh-muted);
}


/* ------------------------------------------------------------
   3. BAUSTEIN 1 — ABSCHNITTS-HEADER MIT TRENNER
   Markup unverändert:
   <div class="wh-section-head">
     <h2 class="wh-display">…</h2>
     <div class="wh-divider"><span class="wh-divider__mark"></span></div>
   </div>

   Neu: Der Trenner spannt nicht mehr über die volle Breite. Zwei
   kurze Striche links und rechts vom Zeichen genügen — eine Linie
   quer durch die Seite zerteilt sie, ein kurzer Strich setzt einen
   Punkt.

   Und das Zeichen wird als Maske eingefärbt statt als Bild geladen.
   Damit nimmt es die Akzentfarbe an und braucht auf dunklem Grund
   keinen Helligkeitsfilter mehr — der hätte ein mehrfarbiges Wappen
   ohnehin zerstört.
   ------------------------------------------------------------ */
.wh-section-head { text-align: center; }

.wh-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: clamp(1rem, 2.2vw, 1.5rem) auto 0;
}
.wh-divider::before,
.wh-divider::after {
  content: "";
  width: clamp(28px, 6vw, 52px);
  height: 1px;
  background: var(--wh-gold);
  opacity: .6;
}
.wh-divider__mark {
  flex: 0 0 auto;
  width: 22px;
  height: 26px;
  background-color: var(--wh-gold);
  -webkit-mask: url("assets/img/wappen.svg?v=3") center / contain no-repeat;
          mask: url("assets/img/wappen.svg?v=3") center / contain no-repeat;
}
/* Variante ohne Zeichen: nur ein kurzer Strich */
.wh-divider--plain .wh-divider__mark { display: none; }
.wh-divider--plain::after { display: none; }
.wh-divider--plain::before { width: 64px; }


/* ------------------------------------------------------------
   4. BAUSTEIN 2 — BILDRAHMEN
   Früher eine weiße Haarlinie im Bild — ein Zierrat, den heute
   niemand mehr setzt. Jetzt weiche Ecken und ein flacher Schatten,
   damit das Bild auf der Fläche liegt statt in sie geschnitten zu
   sein.
   ------------------------------------------------------------ */
.wh-framed {
  position: relative;
  border-radius: var(--wh-radius);
  overflow: hidden;
  box-shadow: var(--wh-shadow-sm);
}
.wh-framed img { display: block; width: 100%; height: auto; }
.wh-framed::after { content: none; }
.wh-framed figcaption {
  position: relative;
  background: var(--wh-paper);
  padding: .6rem .9rem 0;
  font-size: .88rem;
  color: var(--wh-muted);
}


/* ------------------------------------------------------------
   5. BAUSTEIN 3 — BILDSEKTION UND KARTE
   Markup unverändert:
   <div class="wh-parallax wh-torn" style="--wh-parallax-img:url(…)">
     <div class="wh-card">…</div>
   </div>

   `background-attachment: fixed` ist raus. Es ruckelt auf dem
   Desktop, wird auf iOS und Android teils gar nicht gerendert und ist
   inzwischen ein Erkennungszeichen für Baukastenseiten. Stattdessen
   ein ruhiges, festes Bild mit einem Verlauf, der oben und unten
   dunkler ist als in der Mitte — dort steht die Karte, dort darf das
   Bild durchkommen.
   ------------------------------------------------------------ */
.wh-parallax {
  position: relative;
  background-image:
    linear-gradient(
      to bottom,
      rgba(34, 43, 33, calc(var(--wh-parallax-dim, .52) + .12)) 0%,
      rgba(34, 43, 33, var(--wh-parallax-dim, .52)) 45%,
      rgba(34, 43, 33, calc(var(--wh-parallax-dim, .52) + .12)) 100%
    ),
    var(--wh-parallax-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-color: var(--wh-dark);
  padding-block: var(--wh-space-section);
}

/* Inhalte in der Bildsektion liegen auf dunklem Grund */
.wh-parallax .wh-display,
.wh-parallax .wh-sub { color: var(--wh-paper); }
.wh-parallax .wh-divider::before,
.wh-parallax .wh-divider::after { background: var(--wh-gold-light); opacity: .7; }
.wh-parallax .wh-divider__mark { background-color: var(--wh-gold-light); }

/* Der Zackenrand entfällt. Die Klassen bleiben, weil sie in den
   Seiteninhalten stehen — sie tun nur nichts mehr. */
.wh-torn::before,
.wh-torn::after { content: none; }

/* Karte über dem Bild */
.wh-card {
  background: var(--wh-paper);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  border-radius: var(--wh-radius);
  box-shadow: var(--wh-shadow);
  position: relative;
  z-index: 1;
}


/* ------------------------------------------------------------
   6. BAUSTEIN 4 — SPEISEN-ZEILE
   Markup:
   <p class="wh-dish">
     <span class="wh-dish__name">…</span>
     <span class="wh-dish__leader"></span>
     <span class="wh-dish__price">€24,90</span>
   </p>

   Die Punktführungslinie ist raus — auch auf großen Bildschirmen.
   Sie stammt aus dem gedruckten Menü, wo sie das Auge über eine
   breite Seite trägt. Am Bildschirm, in einer schmalen Spalte, ist
   sie nur Rauschen; der Abstand ordnet besser.
   ------------------------------------------------------------ */
.wh-badge {
  display: inline-block;
  background: var(--wh-gold-light);
  color: var(--wh-head);
  font-family: var(--wh-font-body);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 11px;
  margin: 0 0 .7rem;
  border-radius: 999px;
}

/* Zwei Spalten, damit der Preis nicht springt, egal wie lang der
   Name ist — deshalb Grid und keine Flexbox mit Umbruch. */
.wh-dish {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1.5rem;
  align-items: baseline;
  margin: 0 0 .25rem;
}
.wh-dish__name {
  min-width: 0;
  font-weight: 600;
  color: var(--wh-head);
  letter-spacing: -.005em;
}
.wh-dish__price {
  color: var(--wh-gold-text);
  font-weight: 600;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.wh-dish__leader { display: none; }
.wh-dish + p { margin-top: 0; }


/* ------------------------------------------------------------
   7. BAUSTEIN 5 — BUTTON UND CTA-ZEILE
   Der Button war eine goldene Fläche mit kursiver Serifenschrift.
   Jetzt: Waldgrün, aufrechte Grotesk, weiche Ecken, spürbare
   Trefferfläche. Die flankierenden Linien der CTA-Zeile bleiben,
   aber kurz statt seitenbreit.
   ------------------------------------------------------------ */
.wh-btn .wp-block-button__link,
a.wh-btn,
.wh-btn-solid {
  background-color: var(--wh-dark);
  color: var(--wh-paper);
  font-family: var(--wh-font-body);
  font-style: normal;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  min-height: 52px;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--wh-radius-sm);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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,
.wh-btn-solid:hover {
  background-color: var(--wh-head);
  color: var(--wh-paper);
}

.wh-cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 30px);
  justify-content: center;
}
.wh-cta::before,
.wh-cta::after {
  content: "";
  width: clamp(30px, 8vw, 80px);
  height: 1px;
  background: var(--wh-gold);
  opacity: .55;
}
.wh-cta.wp-block-buttons { flex-wrap: nowrap; }
@media (max-width: 540px) {
  .wh-cta::before, .wh-cta::after { display: none; }
}


/* ------------------------------------------------------------
   8. BAUSTEIN 6 — NAVIGATION
   Die Rauten zwischen den Menüpunkten sind raus. Sie waren der
   sichtbarste Rest der alten Vorlage; ein Menü ordnet sich über
   Abstand, nicht über Zierzeichen. Der aktive Punkt bekommt
   stattdessen einen Messingstrich darunter — sichtbar, ohne die
   Zeile zu füllen.
   ------------------------------------------------------------ */
.wh-nav,
.wh-nav .header-navigation-layout-standard {
  background-color: var(--wh-dark);
}

#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-display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--wh-paper);
}
#masthead .site-title a:hover { color: var(--wh-gold-light); }

.wh-nav .menu > li > a,
.wh-nav .header-navigation ul li a,
#primary-menu > li > a,
.header-navigation .menu > li > a {
  font-family: var(--wh-font-body);
  font-style: normal;
  font-weight: 500;
  font-size: .975rem;
  letter-spacing: .01em;
  color: var(--wh-paper);
  text-transform: none;
}

/* Aktiver Punkt: Messingstrich, nicht nur ein Farbwechsel. */
#primary-menu > li > a,
.wh-nav .menu > li > a { position: relative; }
#primary-menu > li.current-menu-item > a::before,
#primary-menu > li.current_page_item > a::before,
#primary-menu > li.current-menu-ancestor > a::before,
.wh-nav .menu > li.current-menu-item > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .55em;
  height: 2px;
  background: var(--wh-gold-light);
  border-radius: 1px;
}
#primary-menu > li > a:hover,
#primary-menu > li > a:focus-visible,
.wh-nav .menu > li > a:hover,
.header-navigation .menu > li > a:hover { color: var(--wh-gold-light); }

/* Rauten der alten Fassung sicher abschalten. */
#primary-menu > li + li::before,
.wh-nav .menu > li + li::before { content: none; }

/* Kadences eigene Unterstreichung stört neben unserer. */
#primary-menu > li > a::after,
.header-navigation-style-underline .menu > li > a::after { display: none !important; }

@media (max-width: 1024px) {
  #masthead .menu-toggle-open,
  #masthead .menu-toggle-open .menu-toggle-icon { color: var(--wh-paper); }
  #primary-menu > li.current-menu-item > a::before { bottom: .25em; }
}


/* ------------------------------------------------------------
   9. HERO
   Ohne Ken-Burns-Zoom. Eine Dauerbewegung hinter der Überschrift
   zieht das Auge weg vom Text und kostet auf schwachen Geräten
   Bildrate. Stattdessen ein einmaliges, kurzes Aufziehen beim
   Laden — Bewegung als Ankunft, nicht als Zustand.
   ------------------------------------------------------------ */
.wh-hero { overflow: hidden; position: relative; }

/* Zusätzliche Abdunklung — standardmäßig AUS. Der core/cover-Block
   bringt seine eigene mit; zwei Verläufe addieren sich zu einer
   grauen Fläche. Reicht die des Blocks nicht, hier
   `--wh-hero-scrim: .35` setzen. */
.wh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(18, 18, 15, var(--wh-hero-scrim, 0)) 0%,
    rgba(18, 18, 15, calc(var(--wh-hero-scrim, 0) * .55)) 45%,
    rgba(18, 18, 15, 0) 85%
  );
}
.wh-hero > .wp-block-cover__inner-container { position: relative; z-index: 1; }

.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: 600;
  line-height: 1.03;
  letter-spacing: -.025em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(18, 18, 15, .5);
  text-wrap: balance;
  margin: 0;
  padding: 0;
  border: 0;
  animation: wh-auftritt .9s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes wh-auftritt {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

h1.wh-display { margin-block: 0; }

/* Ansagebereich des Sliders — für Screenreader da, für Augen nicht. */
.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);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.wh-footer h2,
.wh-footer h3,
.wh-footer .wh-footer__title {
  font-family: var(--wh-font-display);
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--wh-gold-light);
  margin: 0 0 1rem;
}
.wh-footer a { color: var(--wh-gold-light); }
.wh-footer a:hover, .wh-footer a:focus-visible { color: #fff; }

.wh-footer__inner {
  max-width: var(--wh-maxw);
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
@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, eine Stufe dunkler abgesetzt */
#colophon,
#colophon .site-bottom-footer-wrap,
#colophon .site-footer-row-container-inner { background-color: var(--wh-dark-2); }
#colophon,
#colophon .site-info { color: var(--wh-cream); font-size: .85rem; }
#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-display);
  font-style: normal;
  font-weight: 600;
  font-size: var(--wh-size-teaser);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--wh-head);
  text-align: center;
  text-wrap: balance;
  margin: 1.1rem 0 .5rem;
}
.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) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* ------------------------------------------------------------
   13. SPEISEKARTE IN TEXTFORM
   Ausgabe von [nc_speisekarte].

   Neu: Abschnittsüberschriften stehen links statt mittig und tragen
   eine Linie über die volle Spaltenbreite. Eine zentrierte
   Überschrift mit kurzem Strich darunter wirkt dekorativ; eine
   linksbündige mit durchgehender Linie liest sich wie eine Karte.
   ------------------------------------------------------------ */
.wh-menu {
  max-width: 780px;
  margin-inline: auto;
}
.wh-menu__cat {
  font-family: var(--wh-font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: .01em;
  color: var(--wh-head);
  text-align: left;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--wh-leader);
}

/* Breite und Ränder in einer eigenen Regel mit doppelter Klasse.

   Zwei Gründe. Erstens: Die Klasse steht nicht nur im Shortcode, sondern
   auch von Hand im Seiteninhalt — auf der Speisekartenseite trägt
   „Unsere Karte" sie, außerhalb von `.wh-menu`. Ohne Begrenzung lief die
   Linie dort über die volle Inhaltsbreite und die Überschrift stand
   230 px links neben der Karte darunter. Innerhalb von `.wh-menu` sind
   beide Angaben wirkungslos, außerhalb richten sie aus.

   Zweitens die doppelte Klasse: Kadence setzt in content.min.css
   `.single-content h2 { margin: 1.5em 0 .5em }` — Spezifität 0,1,1 und
   damit stärker als eine einzelne Klasse. Der Kurzschreibweise-Rand
   überschrieb `margin-inline: auto` und die Überschrift blieb links
   kleben. `.wh-menu__cat.wh-menu__cat` liegt bei 0,2,0 und gewinnt,
   ohne dass irgendwo `!important` stehen muss. */
.wh-menu__cat.wh-menu__cat {
  max-width: 780px;
  margin: clamp(2.75rem, 5vw, 4rem) auto 1.5rem;
}
.wh-menu__cat:first-child { margin-top: 0; }
.wh-menu__cat::after { content: none; }

.wh-menu .wh-dish { margin-bottom: .25rem; }
.wh-menu__desc:empty { display: none; }
.wh-menu .wh-dish:has( + .wh-menu__desc:empty ) { margin-bottom: 1.6rem; }
.wh-menu .wh-dish:last-child { margin-bottom: 0; }
.wh-menu__desc {
  font-size: .95rem;
  color: var(--wh-muted);
  max-width: 52ch;
  margin: 0 0 1.6rem;
}
.wh-menu__desc:last-child { margin-bottom: 0; }

/* Kleines Schild für „Empfehlung" — hinter dem Namen, nicht davor. */
.wh-dish__tipp {
  display: inline-block;
  margin-left: .55em;
  padding: .15em .5em;
  border-radius: 999px;
  background: var(--wh-gold-light);
  color: var(--wh-head);
  font-family: var(--wh-font-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  vertical-align: .12em;
  white-space: nowrap;
}

.wh-menu__note {
  font-size: .85rem;
  color: var(--wh-muted);
  text-align: center;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
}


/* ------------------------------------------------------------
   14. KADENCE ADVANCED FORM
   Bleibt gepflegt, damit ein von Hand im Editor gebautes
   Kadence-Formular zum Rest passt. Das Reservierungsformular der
   Seite ist ein eigenes, siehe Abschnitt 21.
   ------------------------------------------------------------ */
.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: var(--wh-radius-sm);
  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-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-dark);
  background-image: none;
  color: var(--wh-paper);
  border: 0;
  border-radius: var(--wh-radius-sm);
  font-family: var(--wh-font-body);
  font-style: normal;
  font-weight: 600;
  font-size: 1rem;
  padding: 15px 30px;
  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: var(--wh-paper);
}


/* ------------------------------------------------------------
   15. KADENCE ADVANCED GALLERY — SLIDER
   ------------------------------------------------------------ */
.wh-gallery .kb-slide-item img { object-fit: contain; }

.wh-gallery .splide__arrow,
.wh-gallery .kt-blocks-carousel-arrow {
  background: var(--wh-dark);
  color: var(--wh-paper);
  border-radius: 999px;
  opacity: .92;
}
.wh-gallery .splide__arrow:hover { background: var(--wh-head); opacity: 1; }
.wh-gallery .splide__arrow svg { fill: var(--wh-paper); }

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


/* ------------------------------------------------------------
   16. EIGENER SLIDER
   Ein Bild pro Ansicht, Pfeile, Punkte, am Handy wischbar.
   ------------------------------------------------------------ */
.wh-slider {
  position: relative;
  max-width: 860px;
  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;
  border-radius: var(--wh-radius);
}
.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: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(46, 58, 44, .88);
  color: var(--wh-paper);
  font-family: var(--wh-font-body);
  font-size: 1.4rem;
  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: 12px; }
.wh-slider__btn--next { right: 12px; }

.wh-slider__dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: .6rem;
}
/* Sichtbar ist nur das ::before, die Trefferfläche ist das Element
   selbst — WCAG 2.2 verlangt 24 × 24 px (2.5.8). */
.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: 20px;
  height: 3px;
  border-radius: 999px;
  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); }

/* Kein scroll-behavior: smooth im CSS — in Kombination mit
   scroll-snap-type: mandatory verwirft Chromium den programmatischen
   Scroll aus den Pfeilen. Das Weiche kommt aus dem Skript. */


/* ------------------------------------------------------------
   17. INFOZEILE UNTER DER NAVIGATION
   Früher eine cremefarbene Bank. Jetzt auf Papier mit einer
   Haarlinie darunter: die Zeile soll informieren, nicht als
   zweiter Balken mit dem Kopf konkurrieren.
   ------------------------------------------------------------ */
.wh-infobar {
  background: var(--wh-paper);
  border-bottom: 1px solid var(--wh-leader);
  font-family: var(--wh-font-body);
  font-size: .9rem;
}
.wh-infobar__inner {
  max-width: var(--wh-maxw);
  margin-inline: auto;
  padding: .35rem clamp(1rem, 4vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem clamp(1.25rem, 3vw, 2.25rem);
  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: .5rem;
}
.wh-infobar__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wh-gold);
  flex: none;
}

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

.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: .45rem;
  flex: none;
  background: currentColor;
  -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-body);
  font-weight: 600;
  letter-spacing: .01em;
  border-bottom: 2px solid var(--wh-gold);
  padding-bottom: 1px;
}

@media (max-width: 30em) {
  .wh-infobar { font-size: .85rem; }
  .wh-infobar__inner { gap: .25rem 1.25rem; padding-block: .2rem; }
  .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).
   ------------------------------------------------------------ */
.wh-legal {
  background: var(--wh-dark-2);
  text-align: center;
  padding: .8rem 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: .45; margin-inline: .5rem; }


/* ------------------------------------------------------------
   19. FOKUS — EIN RING FÜR ALLES
   :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 (#7A5F28, 5,81:1 auf Papier) auf hellen
   Flächen, --wh-focus-dark (#D9C89E, 7,23:1 auf Waldgrün) auf den
   dunklen.

   Bewusst als Selektorliste und nicht mit :where() — :where() hat
   Spezifität null und eine Kadence-Regel würde den Ring 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: 2px;
}

.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);
}

.skip-link:focus-visible { outline-offset: 0; }

/* Fokus darf nicht unter der Kopfzeile verschwinden (WCAG 2.4.11). */
:target,
:focus-visible { scroll-margin-top: 6rem; }


/* ------------------------------------------------------------
   20. HINWEISE UND KLEINTEILE
   ------------------------------------------------------------ */

/* Baustellenkasten. Steht auf den Rechtsseiten, solange dort
   Platzhalter in eckigen Klammern stehen. Absichtlich auffällig. */
.wh-todo {
  border-left: 4px solid var(--wh-orange);
  background: #FBF3E7;
  border-radius: var(--wh-radius-sm);
  padding: 1.1rem 1.35rem;
  margin-bottom: 2rem;
  font-size: .95rem;
}
.wh-todo p { margin: 0; }

/* Dieselbe Spalte wie das Formular darunter. Bewusst `rem` und nicht
   `em`: `em` rechnet gegen die Schriftgröße des Elements selbst, und
   der Hinweis ist kleiner gesetzt — aus 46em wurden dort 626 px statt
   736. Gemessen und korrigiert am 28.07.2026. */
.wh-formhinweis,
.wh-lead {
  max-width: var(--wh-form-maxw);
  margin-inline: auto;
}
.wh-lead {
  font-size: 1.15rem;
  line-height: 1.6;
}
.wh-formhinweis {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--wh-muted);
  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: var(--wh-muted);
  line-height: 1.45;
  font-weight: 400;
}


/* ------------------------------------------------------------
   21. RESERVIERUNGSFORMULAR (eigenes)
   Begründung im Kopf von inc/reservierung.php: Kadences
   Submit-Handler liest eine Meta-Feldliste, die bei per REST
   angelegten Formularen leer bleibt.
   ------------------------------------------------------------ */
.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;
  align-items: start;
}
@media (min-width: 40em) {
  /* Ungleiche Spalten, weil die Felder ungleich viel Platz brauchen:
     ein Datum ist breit, eine Personenzahl zweistellig. */
  .wh-form__reihe { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .55fr); }
  .wh-form__reihe:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, 1fr); }
}

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

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

/* Hilfetext unter dem Feld, nicht als Platzhalter im Feld:
   Platzhalter verschwinden beim Tippen, genau dann, wenn man sie
   braucht. Und unter dem Feld statt darüber, sonst stehen die Felder
   einer Reihe auf verschiedenen Höhen. */
.wh-form__hilfe {
  display: block;
  font-size: .82rem;
  color: var(--wh-muted);
  margin-top: .4rem;
  line-height: 1.4;
}

.wh-form__input {
  width: 100%;
  min-height: 50px;
  padding: .7rem .9rem;
  border: 1px solid var(--wh-leader);
  border-radius: var(--wh-radius-sm);
  font-family: var(--wh-font-body);
  font-size: 1rem;           /* nicht kleiner — iOS zoomt sonst beim Fokus */
  color: var(--wh-ink);
  background: #fff;
  transition: border-color .15s ease;
}
textarea.wh-form__input { min-height: 7.5rem; resize: vertical; }

.wh-form__input:hover { border-color: #CFC6B4; }
.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: .35rem;
  font-size: .87rem;
  font-weight: 600;
  color: #A4262C;            /* 7,02:1 auf Papier */
}

.wh-form__fehlerkasten,
.wh-form__ok {
  padding: 1.1rem 1.35rem;
  margin-bottom: 1.75rem;
  border-left: 4px solid;
  border-radius: var(--wh-radius-sm);
  font-size: .95rem;
}
.wh-form__fehlerkasten { border-color: #A4262C; background: #FBF1F0; }
.wh-form__ok           { border-color: #2E6B3E; background: #F0F6F1; }
.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; }

.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: var(--wh-muted);
  margin: 0 0 1.25rem;
}

.wh-form__button {
  font-family: var(--wh-font-body);
  font-size: 1rem;
  font-weight: 600;
  min-height: 52px;
  padding-inline: 2rem;
  border: 0;
  border-radius: var(--wh-radius-sm);
  cursor: pointer;
}

/* Honeypot. Nicht display:none — manche Bots erkennen das und lassen
   das Feld dann in Ruhe. */
.wh-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* ------------------------------------------------------------
   22. ÖFFNUNGSZEITEN
   Ausgabe von [nc_oeffnungszeiten]. Speist sich aus denselben Daten
   wie Infozeile und Restaurant-Schema.
   ------------------------------------------------------------ */
.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;
  font-variant-numeric: tabular-nums;
}

.wh-zeiten__zeile--heute dt,
.wh-zeiten__zeile--heute dd { font-weight: 700; }
.wh-zeiten__heute {
  font-size: .85em;
  font-weight: 400;
  white-space: nowrap;
}

.wh-zeiten__hinweis {
  margin: .8rem 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: .6rem;
}
.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; }
}

/* 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: .4rem; }
.wh-kontakt__zeilen { display: block; }

/* Telefon und E-Mail im Kontaktblock stehen je auf einer eigenen Zeile,
   getrennt durch <br>. Als reine Inline-Elemente waren sie nur 21 px hoch
   — 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 zwar 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. */
.wh-kontakt__zeilen a {
  display: inline-block;
  min-height: 24px;
}


/* ------------------------------------------------------------
   23. SONDERMELDUNG
   Das Band ganz oben, über der Infozeile.

   Drei Töne als Flächenfarbe, gesetzt über zwei Variablen. 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: .95rem;
  line-height: 1.45;
}
.wh-meldung__inner {
  max-width: var(--wh-maxw);
  margin: 0 auto;
  padding: .7rem 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; }
.wh-meldung__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.wh-meldung--warnung { --wh-meldung-bg: #7E211C; --wh-meldung-fg: #FDEEEB; }
.wh-meldung--gut     { --wh-meldung-bg: #204F35; --wh-meldung-fg: #EDF7F0; }

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