/*
Theme Name: Chlaus Zug
Theme URI: https://chlaus-zug.ch
Author: Ilscipio / Chlaus Zug Board
Author URI: https://chlaus-zug.ch
Description: Editorial block (FSE) theme for St. Nikolaus Gut Hirt Zug — a Swiss Samichlaus association. Warm paper background, Playfair Display headlines, Inter body text, red/gold editorial accents.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chlaus-zug
Tags: block-theme, full-site-editing, custom-colors, custom-menu, editor-style, translation-ready

This stylesheet only contains what theme.json cannot express: the hero caption-card
overlap, the dark CTA section, the hamburger nav, scroll-reveal motion, form input
styling and the optional snowfall accent. Palette / type / spacing tokens live in
theme.json and are consumed here exclusively via var(--wp--preset--*) custom
properties, so the two files never disagree.
*/

/* =========================================================================
   0. CSS CUSTOM PROPERTY ALIASES
   theme.json already registers --wp--preset--color--{slug} on :root for the
   whole palette (paper, cream, ink, red, gold, muted, white). We alias them
   here to short, readable names for the hand-written CSS below, plus a few
   layout tokens that aren't color/spacing presets.
   ========================================================================= */
:root {
  --c-paper: var(--wp--preset--color--paper, #faf4e6);
  --c-cream: var(--wp--preset--color--cream, #f5ecd9);
  --c-ink: var(--wp--preset--color--ink, #1a1410);
  --c-red: var(--wp--preset--color--red, #7a1f1f);
  --c-gold: var(--wp--preset--color--gold, #b88a3a);
  --c-muted: var(--wp--preset--color--muted, #6b5d4a);
  --c-white: var(--wp--preset--color--white, #fff);

  --font-display: var(--wp--preset--font-family--playfair, "Playfair Display", serif);
  --font-body: var(--wp--preset--font-family--inter, "Inter", sans-serif);

  --chlaus-content: 1240px;
  --chlaus-wide: 1400px;
  --chlaus-radius-sm: 2px;
  --chlaus-radius-pill: 999px;
  --chlaus-header-h: 92px;
  --chlaus-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================================
   1. BASE / RESET
   Small, targeted reset — theme.json already sets base color/typography.
   ========================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

html {
  scroll-behavior: smooth;
}

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

body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--c-red);
  color: var(--c-white);
}

/* Accessible focus ring everywhere; visible only for keyboard users. */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
  border-radius: 1px;
}

.chlaus-section--dark :focus-visible,
.chlaus-header :focus-visible {
  outline-color: var(--c-gold);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: var(--c-ink);
  color: var(--c-white);
  clip: auto !important;
  clip-path: none;
  height: auto;
  width: auto;
  display: inline-block;
  padding: 0.9rem 1.4rem;
  position: fixed !important;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100000;
  border-radius: 2px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.skip-link.screen-reader-text {
  z-index: 100000;
}

/* =========================================================================
   2. EDITORIAL HELPERS (kicker, gold rule, numerals)
   Reused across patterns. Kickers are RED (contrast-safe on paper/cream);
   gold is reserved for hairlines, borders and large decorative numerals —
   see the note below on why.
   ========================================================================= */
.chlaus-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0 0 1.25rem;
}

.chlaus-kicker::before {
  content: "";
  width: 1.5em;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.chlaus-section--dark .chlaus-kicker {
  color: var(--c-gold);
}

/* Gold hairline divider */
.chlaus-rule {
  border: none;
  border-top: 1px solid var(--c-gold);
  opacity: 0.55;
  margin: 0;
}

/*
 * Note on gold + accessibility: #b88a3a on #faf4e6 measures ~2.8:1, below the
 * AA text threshold. Per WCAG 1.4.3 this is acceptable for large-scale /
 * decorative glyphs (our numerals are set at 2rem+) and for non-text
 * dividers (1.4.11 does not apply to purely decorative separators). Gold is
 * never used for body copy, links or interactive labels — those stay in
 * ink / muted / red, all of which pass AA comfortably (9.4:1 / 5.8:1).
 */
.chlaus-num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--c-gold);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1;
  margin: 0 0 0.75rem;
}

/* =========================================================================
   3. LAYOUT / SECTION RHYTHM
   ========================================================================= */
.chlaus-section {
  padding-block: clamp(3.5rem, 7vw, 7rem);
}

.chlaus-section + .chlaus-section {
  border-top: 1px solid rgba(26, 20, 16, 0.08);
}

.chlaus-section--tight {
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.chlaus-section--dark {
  background: var(--c-ink);
  color: var(--c-cream);
  border-top: none;
}

.chlaus-section--dark h1,
.chlaus-section--dark h2,
.chlaus-section--dark h3,
.chlaus-section--dark p {
  color: var(--c-cream);
}

.chlaus-section--dark a:not(.wp-block-button__link) {
  color: var(--c-gold);
}

.chlaus-section--cream {
  background: var(--c-cream);
}

.chlaus-eyebrow-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

/* =========================================================================
   4. HEADER / NAVIGATION (with hand-rolled hamburger)
   ========================================================================= */
.chlaus-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 244, 230, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(26, 20, 16, 0.08);
}

.chlaus-header__inner {
  max-width: var(--chlaus-wide);
  margin-inline: auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--chlaus-header-h);
}

.chlaus-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.chlaus-brand :where(.wp-block-site-logo) {
  margin: 0;
}

.chlaus-brand__wordmark {
  margin: 0;
  line-height: 1.05;
}

.chlaus-brand__wordmark a {
  display: flex;
  flex-direction: column;
  color: var(--c-ink);
  text-decoration: none;
}

.chlaus-brand__wordmark a:hover,
.chlaus-brand__wordmark a:focus-visible {
  color: var(--c-ink);
  text-decoration: none;
}

.chlaus-brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.chlaus-brand__sub {
  font-family: var(--font-body);
  font-variant: small-caps;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--c-gold);
  text-transform: lowercase;
}

/* Primary nav */
.chlaus-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* The in-panel DE/EN switch is mobile-only; on desktop the switch in
   .chlaus-header__actions is used instead. (Scoped to .chlaus-nav to beat
   core's .wp-container-…-is-layout-flex{display:flex}.) */
.chlaus-nav .chlaus-nav__lang {
  display: none;
}

.chlaus-nav__menu.wp-block-navigation {
  font-family: var(--font-body);
}

.chlaus-nav__menu .wp-block-navigation__container {
  display: flex;
  align-items: center;
  gap: 1.85rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chlaus-nav__menu .wp-block-navigation-item {
  list-style: none;
}

.chlaus-nav__menu .wp-block-navigation-item a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-ink);
  text-decoration: none;
  padding: 0.3rem 0;
  position: relative;
}

.chlaus-nav__menu .wp-block-navigation-item a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--c-red);
  transition: right 0.25s var(--chlaus-ease);
}

.chlaus-nav__menu .wp-block-navigation-item a:hover::after,
.chlaus-nav__menu .wp-block-navigation-item a:focus-visible::after {
  right: 0;
}

.chlaus-nav__menu .wp-block-navigation-item a:hover,
.chlaus-nav__menu .wp-block-navigation-item a:focus-visible {
  color: var(--c-red);
}

.chlaus-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.chlaus-header__cta .wp-block-button__link {
  font-size: 11px;
  padding: 0.7rem 1.4rem;
}

/* The "Anmelden" menu item is only for the mobile hamburger panel (on desktop
   the standalone Anmelden pill button covers it); hidden by default here and
   re-shown inside the mobile media query. */
.chlaus-nav__menu .wp-block-navigation-item.chlaus-nav-anmeldung {
  display: none;
}

/* Hamburger toggle button — hidden on desktop */
.chlaus-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(26, 20, 16, 0.15);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

.chlaus-nav__toggle-bar {
  width: 20px;
  height: 2px;
  background: var(--c-ink);
  transition: transform 0.25s var(--chlaus-ease), opacity 0.2s var(--chlaus-ease);
}

.chlaus-nav__toggle[aria-expanded="true"] .chlaus-nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.chlaus-nav__toggle[aria-expanded="true"] .chlaus-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.chlaus-nav__toggle[aria-expanded="true"] .chlaus-nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================================
   5. HERO — headline, lede, caption card overlap
   ========================================================================= */
.chlaus-hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  overflow: visible;
}

.chlaus-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.chlaus-hero__eyebrow {
  margin-bottom: 1.5rem;
}

.chlaus-hero h1 {
  margin: 0 0 1.5rem;
}

.chlaus-hero h1 em,
h1 .chlaus-accent {
  font-style: italic;
  color: var(--c-red);
}

.chlaus-hero__lede {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--c-muted);
  max-width: 46ch;
  margin: 0 0 2.25rem;
}

.chlaus-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.chlaus-hero__actions .wp-block-buttons {
  gap: 1.75rem;
}

.chlaus-hero__secondary-link {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 0.2rem;
}

.chlaus-hero__secondary-link:hover,
.chlaus-hero__secondary-link:focus-visible {
  color: var(--c-red);
}

.chlaus-hero__media {
  position: relative;
  margin-right: 0.5rem;
}

.chlaus-hero__media .wp-block-image,
.chlaus-hero__media figure {
  margin: 0;
}

.chlaus-hero__media img {
  border-radius: var(--chlaus-radius-sm);
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* The overlapping cream caption card */
.chlaus-caption-card {
  position: absolute;
  left: -1.75rem;
  bottom: -1.75rem;
  max-width: 15rem;
  background: var(--c-cream);
  border: 1px solid var(--c-gold);
  border-radius: var(--chlaus-radius-sm);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 18px 40px -18px rgba(26, 20, 16, 0.35);
}

.chlaus-caption-card p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--c-ink);
}

/* =========================================================================
   6. PILLARS (01 / 02 / 03)
   ========================================================================= */
.chlaus-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.chlaus-pillar {
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-gold);
}

.chlaus-pillar h3 {
  margin: 0 0 0.85rem;
}

.chlaus-pillar p {
  color: var(--c-muted);
  margin: 0;
}

.chlaus-pillar p + p {
  margin-top: 0.75rem;
}

/* =========================================================================
   7. PRICE / RENTAL LISTS (numbered rows)
   ========================================================================= */
.chlaus-price-list {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--c-gold);
}

.chlaus-price-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(26, 20, 16, 0.1);
}

.chlaus-price-row .chlaus-num {
  font-size: 1.15rem;
  margin: 0;
}

.chlaus-price-row__label {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-ink);
}

.chlaus-price-row__note {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--c-muted);
  margin-top: 0.2rem;
}

.chlaus-price-row__value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--c-red);
  white-space: nowrap;
  text-align: right;
}

/* =========================================================================
   8. RENTAL SECTION SPECIFICS
   ========================================================================= */
.chlaus-rental__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.chlaus-rental__includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--c-muted);
}

.chlaus-rental__includes li {
  padding-left: 1.3rem;
  position: relative;
}

.chlaus-rental__includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--c-gold);
  border-radius: 50%;
}

/* Pillar note (recommendation / price line under each pillar) */
.chlaus-pillar__note {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-red);
  margin-top: 1rem !important;
}

.chlaus-pillar__note a {
  color: var(--c-red);
}

/* "View all" text links reused across teaser sections (rental, termine, gallery) */
.chlaus-rental__cta {
  margin-top: 1.75rem;
}

.chlaus-rental__cta a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 0.2rem;
}

.chlaus-rental__cta a:hover,
.chlaus-rental__cta a:focus-visible {
  color: var(--c-red);
}

/* Two-column price row variant (no numeral) used by the Einsätze pricing list */
.chlaus-price-row--plain {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Compact reusable CTA banner (chlaus/cta pattern) */
.chlaus-mini-cta {
  gap: 1.5rem;
  align-items: center;
  border: 1px solid rgba(184, 138, 58, 0.35);
  border-radius: var(--chlaus-radius-sm);
}

.chlaus-mini-cta .chlaus-kicker {
  margin-bottom: 0.4rem;
}

.chlaus-mini-cta p:not(.chlaus-kicker) {
  margin: 0;
  color: var(--c-muted);
}

/* =========================================================================
   9. TERMINE / NEWS / GALLERY SECTIONS
   ========================================================================= */
.chlaus-termine-section,
.chlaus-news-section {
  scroll-margin-top: calc(var(--chlaus-header-h) + 1rem);
}

.chlaus-gallery .wp-block-gallery {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.chlaus-gallery .wp-block-gallery figure img,
.chlaus-gallery .wp-block-image img {
  border-radius: var(--chlaus-radius-sm);
}

/* =========================================================================
   10. BOOKING / CTA — dark section
   ========================================================================= */
.chlaus-cta {
  text-align: center;
}

.chlaus-cta__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.chlaus-cta h2 {
  margin: 0 0 1rem;
}

.chlaus-cta p {
  color: var(--c-cream);
  opacity: 0.85;
  margin: 0 0 2.25rem;
  font-size: 1.05rem;
}

.chlaus-cta .wp-block-buttons {
  justify-content: center;
}

.chlaus-cta__contact {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(245, 236, 217, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--c-cream);
  opacity: 0.75;
}

.chlaus-cta__contact a {
  color: var(--c-cream);
}

/* =========================================================================
   11. FOOTER
   ========================================================================= */
.chlaus-footer {
  background: var(--c-ink);
  color: var(--c-cream);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.chlaus-footer__inner {
  max-width: var(--chlaus-wide);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.chlaus-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 2.5rem;
}

.chlaus-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--c-red);
  margin: 0;
}

.chlaus-footer__brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--c-cream);
  margin: 0 0 0.75rem;
}

.chlaus-footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: rgba(245, 236, 217, 0.8);
}

.chlaus-footer__contact a {
  color: rgba(245, 236, 217, 0.8);
  text-decoration: none;
}

.chlaus-footer__contact a:hover,
.chlaus-footer__contact a:focus-visible {
  color: var(--c-gold);
}

.chlaus-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.chlaus-footer__nav a {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(245, 236, 217, 0.7);
  text-decoration: none;
}

.chlaus-footer__nav a:hover,
.chlaus-footer__nav a:focus-visible {
  color: var(--c-gold);
}

.chlaus-footer__bottom {
  padding-top: 1.75rem;
  border-top: 1px solid rgba(245, 236, 217, 0.15);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
  color: rgba(245, 236, 217, 0.55);
}

.chlaus-footer__lang :where(.wp-block-navigation) {
  font-size: 0.78rem;
}

/* =========================================================================
   12. FORMS — underline-style inputs
   Styled broadly so the chlaus-core plugin's registration forms (rendered
   via the chlaus/registration-form block, markup owned by the plugin)
   inherit the editorial look without the theme needing to know their exact
   structure.
   ========================================================================= */
.chlaus-form,
.entry-content form,
.wp-block-post-content form {
  --form-gap: 1.5rem;
}

.chlaus-form label,
.entry-content form label,
.wp-block-post-content form label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  margin-bottom: 0.5rem;
}

.chlaus-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.chlaus-form select,
.chlaus-form textarea,
.entry-content form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.entry-content form select,
.entry-content form textarea,
.wp-block-post-content form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wp-block-post-content form select,
.wp-block-post-content form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(26, 20, 16, 0.3);
  border-radius: 0;
  background: transparent;
  padding: 0.65rem 0.1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--c-ink);
  margin-bottom: 1.5rem;
  transition: border-color 0.2s var(--chlaus-ease);
}

.chlaus-form textarea,
.entry-content form textarea,
.wp-block-post-content form textarea {
  border: 1px solid rgba(26, 20, 16, 0.3);
  padding: 0.65rem 0.75rem;
  min-height: 8rem;
  resize: vertical;
}

.chlaus-form input:focus-visible,
.chlaus-form select:focus-visible,
.chlaus-form textarea:focus-visible,
.entry-content form input:focus-visible,
.entry-content form select:focus-visible,
.entry-content form textarea:focus-visible,
.wp-block-post-content form input:focus-visible,
.wp-block-post-content form select:focus-visible,
.wp-block-post-content form textarea:focus-visible {
  outline: none;
  border-color: var(--c-red);
}

.chlaus-form fieldset,
.entry-content form fieldset,
.wp-block-post-content form fieldset {
  border: 1px solid rgba(26, 20, 16, 0.15);
  border-radius: 2px;
  padding: 1.25rem;
  margin: 0 0 1.5rem;
}

.chlaus-form button[type="submit"],
.chlaus-form input[type="submit"],
.entry-content form button[type="submit"],
.entry-content form input[type="submit"],
.wp-block-post-content form button[type="submit"],
.wp-block-post-content form input[type="submit"] {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--c-white);
  background: var(--c-red);
  border: none;
  border-radius: var(--chlaus-radius-pill);
  padding: 0.95rem 1.9rem;
  cursor: pointer;
  transition: background 0.2s var(--chlaus-ease);
}

.chlaus-form button[type="submit"]:hover,
.chlaus-form input[type="submit"]:hover,
.entry-content form button[type="submit"]:hover,
.entry-content form input[type="submit"]:hover {
  background: var(--c-ink);
}

/* "+ weiteres Kind" repeater button (Familien form) gets a quieter, outline treatment */
.chlaus-form .chlaus-repeater-add,
.entry-content form .chlaus-repeater-add {
  background: transparent;
  color: var(--c-red);
  border: 1px solid var(--c-red);
}

.chlaus-form .chlaus-repeater-add:hover,
.entry-content form .chlaus-repeater-add:hover {
  background: var(--c-red);
  color: var(--c-white);
}

/* =========================================================================
   12B. PAGE / SINGLE / ARCHIVE / SEARCH / 404 CHROME
   Shared chrome for templates/page.html, single.html, archive.html,
   single-termin.html, archive-termin.html, search.html and 404.html.
   ========================================================================= */
.chlaus-page {
  min-height: 40vh;
}

.chlaus-page__header {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(26, 20, 16, 0.08);
  margin-bottom: 0.5rem;
}

.chlaus-page__header h1 {
  margin: 0.5rem 0 0;
}

.chlaus-post-date {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--c-muted);
}

.chlaus-post-featured {
  margin-block: clamp(2rem, 4vw, 3rem);
  border-radius: var(--chlaus-radius-sm);
  overflow: hidden;
}

.chlaus-post-featured img {
  border-radius: var(--chlaus-radius-sm);
}

/* Termin meta chips (single-termin.html + archive-termin.html), values
   populated via the Block Bindings API against the plugin's post meta. */
.chlaus-termin-meta {
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.chlaus-termin-meta__item {
  gap: 0.4rem;
  align-items: baseline;
  background: var(--c-cream);
  border: 1px solid var(--c-gold);
  border-radius: var(--chlaus-radius-sm);
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}

.chlaus-termin-meta__label {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--c-muted);
}

.chlaus-termin-meta__item p {
  margin: 0;
  font-family: var(--font-display);
  color: var(--c-ink);
}

/* Generic listing rows (index.html, search.html) */
.chlaus-result-item {
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(26, 20, 16, 0.08);
}

.chlaus-result-item h3 {
  margin: 0 0 0.4rem;
}

.chlaus-result-item p {
  color: var(--c-muted);
  margin: 0.4rem 0 0;
}

/* 404 */
.chlaus-404__inner {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.chlaus-404__inner .wp-block-search {
  max-width: 26rem;
  margin: 0 auto 2rem;
}

.chlaus-404__inner .wp-block-buttons {
  justify-content: center;
}

/* Query pagination */
.wp-block-query-pagination {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.wp-block-query-pagination a {
  color: var(--c-ink);
  text-decoration: none;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination a:focus-visible {
  color: var(--c-red);
}

.wp-block-query-pagination .current {
  color: var(--c-red);
  font-weight: 700;
}

/* =========================================================================
   13. MOTION — fade/rise scroll reveal
   Elements get [data-chlaus-reveal] in markup; nav.js toggles .is-visible
   via IntersectionObserver. Respects prefers-reduced-motion.
   ========================================================================= */
/* Hidden initial state is gated behind the `.chlaus-js` flag that nav.js adds to
   <html> in the document head (see functions.php). Without JS — or if anything
   goes wrong before reveal — the content is simply visible, never stuck hidden. */
.chlaus-js [data-chlaus-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--chlaus-ease), transform 0.7s var(--chlaus-ease);
  will-change: opacity, transform;
}

[data-chlaus-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.chlaus-js [data-chlaus-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--chlaus-ease), transform 0.6s var(--chlaus-ease);
}

[data-chlaus-reveal="stagger"].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

[data-chlaus-reveal="stagger"].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
[data-chlaus-reveal="stagger"].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-chlaus-reveal="stagger"].is-visible > *:nth-child(4) { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .chlaus-js [data-chlaus-reveal],
  .chlaus-js [data-chlaus-reveal="stagger"] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   14. OPTIONAL SNOWFALL ACCENT
   Purely decorative; only animates when a .chlaus-snowfall container exists
   AND JS opts in (nav.js only populates it if body carries .has-snow — off
   by default). Fully inert and reduced-motion safe otherwise.
   ========================================================================= */
.chlaus-snowfall {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.chlaus-snowflake {
  position: absolute;
  top: -10%;
  width: 6px;
  height: 6px;
  background: var(--c-white);
  border-radius: 50%;
  opacity: 0.6;
  animation: chlaus-snow-fall linear infinite;
}

@keyframes chlaus-snow-fall {
  0% {
    transform: translateY(-10vh) translateX(0);
  }
  100% {
    transform: translateY(110vh) translateX(20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chlaus-snowflake {
    animation: none;
    display: none;
  }
}

/* =========================================================================
   15. RESPONSIVE — tablet & mobile (hard breakpoint ~768px)
   ========================================================================= */
@media (max-width: 1024px) {
  .chlaus-hero__grid {
    gap: 2.5rem;
  }

  .chlaus-pillars__grid {
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .chlaus-header__inner {
    padding-block: 0.85rem;
  }

  .chlaus-brand__name {
    font-size: 1.1rem;
  }

  /* Hamburger appears; the inline nav collapses into a slide-in panel. */
  .chlaus-nav__toggle {
    display: inline-flex;
  }

  /* Top-bar actions (Anmelden button + the desktop DE/EN switch) are hidden on
     mobile — the panel below carries the nav links, an Anmelden item, AND the
     DE/EN switch, which frees up the top bar (brand + hamburger only). Scoped to
     .chlaus-header to beat core's .wp-container-…-is-layout-flex{display:flex}. */
  .chlaus-header .chlaus-header__actions {
    display: none;
  }

  /* Show the menu-only Anmelden entry inside the panel. */
  .chlaus-nav__menu .wp-block-navigation-item.chlaus-nav-anmeldung {
    display: block;
  }

  /* The slide-in panel is the .chlaus-nav wrapper (nav links + DE/EN switch).
     The sticky .chlaus-header is this fixed element's containing block (it has a
     backdrop-filter/will-change), so `bottom:0` collapses it — use an explicit
     height instead. */
  .chlaus-nav {
    position: fixed;
    top: var(--chlaus-header-h);
    left: 0;
    right: 0;
    height: calc(100vh - var(--chlaus-header-h));
    height: calc(100dvh - var(--chlaus-header-h));
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: var(--c-paper);
    padding: 1.25rem 1.5rem 2.5rem;
    transform: translateX(100%);
    transition: transform 0.3s var(--chlaus-ease);
    overflow-y: auto;
    visibility: hidden;
    z-index: 40;
  }

  .chlaus-nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Nav list inside the panel: a single stacked column (base is flex-wrap:wrap,
     which in a column packs items into offscreen side-columns). */
  .chlaus-nav .wp-block-navigation__container {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
  }

  .chlaus-nav__menu .wp-block-navigation-item {
    width: 100%;
    border-bottom: 1px solid rgba(26, 20, 16, 0.08);
  }

  .chlaus-nav__menu .wp-block-navigation-item a {
    display: block;
    padding: 1.1rem 0;
    font-size: 15px;
  }

  /* DE/EN switch: hidden on desktop (lives in the top-bar actions there), shown
     at the bottom of the panel on mobile. */
  .chlaus-nav .chlaus-nav__lang {
    display: flex;
    margin-top: 1.75rem;
  }

  /* Hero */
  .chlaus-hero__grid {
    grid-template-columns: 1fr;
  }

  .chlaus-hero__media {
    order: -1;
    margin-inline: 0;
    margin-bottom: 3.5rem;
  }

  .chlaus-caption-card {
    left: 1rem;
    right: 1rem;
    bottom: -2.25rem;
    max-width: none;
  }

  /* Grids collapse to one column */
  .chlaus-pillars__grid,
  .chlaus-rental__grid {
    grid-template-columns: 1fr;
  }

  .chlaus-price-row {
    grid-template-columns: 2.25rem 1fr;
  }

  .chlaus-price-row__value {
    grid-column: 2 / 3;
    text-align: left;
    margin-top: 0.35rem;
  }

  .chlaus-footer__top {
    flex-direction: column;
  }

  .chlaus-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .chlaus-mini-cta {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.75rem;
  }

  .chlaus-mini-cta .wp-block-buttons {
    width: 100%;
  }

  .chlaus-mini-cta .wp-block-button__link {
    display: block;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .chlaus-caption-card {
    padding: 1.15rem 1.35rem;
  }

  .chlaus-hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

/* =========================================================================
   BRAND LOGO — restored (desktop). The club logo is a white-background JPG
   (mitre + crozier); mix-blend-mode: multiply drops the white against the
   paper header so it reads as a clean emblem. Hidden on phones (the wordmark
   carries the brand there and keeps the top bar uncluttered).
   ========================================================================= */
.chlaus-brand {
  gap: 0.85rem;
}

.chlaus-brand .wp-block-site-logo {
  margin: 0;
  line-height: 0;
  display: inline-flex;
}

.chlaus-brand .wp-block-site-logo img,
.chlaus-brand .custom-logo {
  height: 54px;
  width: auto;
  max-width: none;
  mix-blend-mode: multiply;
}

@media (max-width: 768px) {
  .chlaus-brand .wp-block-site-logo {
    display: none;
  }
}

/* =========================================================================
   FOOTER — DE/EN switch on the dark background needs light text.
   ========================================================================= */
.chlaus-footer .chlaus-lang-pill {
  color: var(--c-cream);
  border-color: rgba(245, 236, 217, 0.35);
}

.chlaus-footer .chlaus-lang-pill.is-current {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink);
}

.chlaus-footer .chlaus-lang-pill:hover {
  border-color: var(--c-cream);
}

/* =========================================================================
   MOTION REMOVED — no scroll reveal, no transitions/animations (per request).
   Reveal targets are forced visible regardless of JS.
   ========================================================================= */
*,
*::before,
*::after {
  transition: none !important;
  animation: none !important;
}

[data-chlaus-reveal],
[data-chlaus-reveal="stagger"] > * {
  opacity: 1 !important;
  transform: none !important;
}