/* ============================================================================
   waldmaeuse.ch — Design «Waldboden»
   Erzeugt aus build/theme-tokens.css (EILAA-466). Wird per mu-Plugin
   eil-waldmaeuse-design.php NACH waldmaeuse-fonts-local.css eingebunden.
   Button #B85A24 nie aufhellen. Terracotta #C4622D nur als grosse Schrift
   (Slogan >= 24px) oder als Rahmen-/Flaechenfarbe — nie in Fliesstextgroesse.
   ============================================================================ */

:root {
  --wm-bg:          #FAF7F0;
  --wm-surface:     #FFFDF8;
  --wm-sand:        #E8E0D0;
  --wm-sand-hell:   #F2ECE0;
  --wm-line:        #DDD3C0;
  --wm-text:        #2B2622;
  --wm-text-weich:  #5C534A;
  --wm-gruen:       #2F5233;
  --wm-gruen-dunkel:#223D26;
  --wm-gruen-weich: #A8BCA4;
  --wm-terracotta:  #C4622D;
  --wm-button:      #B85A24;
  --wm-button-hover:#9C4A1B;

  --wm-fs-klein:  clamp(0.875rem, 0.84rem + 0.18vw, 0.95rem);
  --wm-fs-normal: clamp(1.0625rem, 1.02rem + 0.22vw, 1.15rem);
  --wm-fs-h3:     clamp(1.25rem, 1.17rem + 0.4vw, 1.45rem);
  --wm-fs-h2klein:clamp(1.5rem, 1.35rem + 0.75vw, 1.95rem);
  --wm-fs-h2:     clamp(1.9rem, 1.6rem + 1.5vw, 2.75rem);
  --wm-fs-h1:     clamp(2.3rem, 1.8rem + 2.6vw, 3.9rem);

  --wm-content:   min(100% - 2.5rem, 68rem);
  --wm-measure:   63ch;
  --wm-radius:    10px;
  --wm-radius-sm: 6px;
  --wm-section:   clamp(2.5rem, 6vw, 4.5rem);
}

/* --- Grundtypografie --------------------------------------------------- */
body,
body.wp-site-blocks,
.content-bg,
#wrapper {
  background-color: var(--wm-bg);
}
body {
  color: var(--wm-text);
  font-family: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: var(--wm-fs-normal);
  line-height: 1.55;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.12;
  color: var(--wm-text);
  font-variation-settings: "opsz" 40, "SOFT" 20;
}
h1, .entry-title { font-size: var(--wm-fs-h1); }
h2 { font-size: var(--wm-fs-h2); }
h3 { font-size: var(--wm-fs-h3); }
h4 { font-size: var(--wm-fs-h2klein); }

.entry-content p,
.entry-content li,
.wm-lead { max-width: var(--wm-measure); }

a { color: var(--wm-gruen); }
a:hover, a:focus-visible { color: var(--wm-gruen-dunkel); }
:focus-visible { outline: 3px solid var(--wm-gruen); outline-offset: 2px; }

/* --- Abschnitt / Raster ------------------------------------------------ */
.wm-abschnitt { padding-block: var(--wm-section); }
.wm-abschnitt--sand { background: var(--wm-sand-hell); }
.wm-eyebrow {
  font-size: var(--wm-fs-klein);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wm-gruen);
  font-weight: 700;
  margin-bottom: .35rem;
}
.wm-lead { font-size: calc(var(--wm-fs-normal) * 1.12); color: var(--wm-text-weich); }

/* --- Slogan: Caveat, ausschliesslich «Ausser bei Sturmwarnung.» -------- */
.wm-slogan {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  color: var(--wm-terracotta);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);  /* nie unter 24px */
  line-height: 1.2;
}

/* --- Buttons ----------------------------------------------------------- */
.wp-block-button__link,
.wm-btn {
  background-color: var(--wm-button);
  color: #ffffff;
  border-radius: var(--wm-radius);
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--wm-button);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wm-btn:hover,
.wm-btn:focus-visible { background-color: var(--wm-button-hover); border-color: var(--wm-button-hover); color: #ffffff; }

.is-style-outline > .wp-block-button__link,
.wm-btn--ghost {
  background-color: transparent;
  color: var(--wm-gruen);
  border: 2px solid var(--wm-gruen);
}
.is-style-outline > .wp-block-button__link:hover,
.wm-btn--ghost:hover { background-color: var(--wm-gruen); color: #ffffff; }

/* --- CTA-Band ---------------------------------------------------------- */
.wm-cta {
  background-color: var(--wm-gruen-dunkel);
  color: #ffffff;
  border-radius: var(--wm-radius);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.wm-cta h2, .wm-cta p { color: #ffffff; }
.wm-cta a { color: #ffffff; }
.wm-cta .is-style-outline > .wp-block-button__link,
.wm-cta .wm-btn--ghost { color: #ffffff; border-color: #ffffff; }
.wm-cta .is-style-outline > .wp-block-button__link:hover,
.wm-cta .wm-btn--ghost:hover { background-color: #ffffff; color: var(--wm-gruen-dunkel); }

/* --- Karten ------------------------------------------------------------ */
.wm-karte {
  background: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius);
  padding: 1.25rem 1.4rem;
  box-shadow: 0 1px 2px rgba(43, 38, 34, .05);
}
.wm-karte h3 { margin-top: 0; }
.wm-karte p { max-width: none; }

/* --- Hinweiskasten ----------------------------------------------------- */
.wm-hinweis {
  border-left: 4px solid var(--wm-terracotta);
  background: var(--wm-sand-hell);
  padding: 0.9rem 1.1rem;
  border-radius: var(--wm-radius-sm);
}
.wm-hinweis--ok { border-left-color: var(--wm-gruen); }
.wm-hinweis p { max-width: none; }
.wm-hinweis h3 { font-size: var(--wm-fs-h3); margin-top: 0; }

/* --- Statusleiste / Pillen --------------------------------------------- */
.wm-status { display: grid; gap: 1rem; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 48rem) { .wm-status { grid-template-columns: repeat(3, 1fr); } }
.wm-status > div {
  background: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius);
  padding: 1rem 1.1rem;
}
.wm-status dt { font-weight: 700; color: var(--wm-gruen); margin: 0 0 .2rem; }
.wm-status dd { margin: 0 0 .5rem; font-weight: 700; }
.wm-pill {
  display: inline-block;
  font-size: var(--wm-fs-klein);
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 999px;
  border: 1px solid var(--wm-line);
  background: var(--wm-sand-hell);
  color: var(--wm-text);
}
.wm-pill--free { border-color: var(--wm-gruen); color: var(--wm-gruen); }
.wm-pill--wait { border-color: var(--wm-terracotta); color: #8F4520; }

/* --- Badges ------------------------------------------------------------ */
.wm-badges { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.wm-badges li {
  font-size: var(--wm-fs-klein);
  font-weight: 700;
  color: var(--wm-gruen);
  background: var(--wm-sand-hell);
  border: 1px solid var(--wm-line);
  border-radius: 999px;
  padding: .25rem .7rem;
  max-width: none;
}

/* --- Zeitleiste -------------------------------------------------------- */
.wm-zeitleiste { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--wm-line); }
.wm-zeitleiste li { padding: 0 0 1.4rem 1.2rem; position: relative; max-width: none; }
.wm-zeitleiste li::before {
  content: ""; position: absolute; left: -7px; top: .55rem;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--wm-gruen); border: 2px solid var(--wm-bg);
}
.wm-zeitleiste time {
  font-family: 'Fraunces', Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--wm-gruen);
  display: inline-block;
  min-width: 4.5rem;
}
.wm-zeitleiste strong { display: block; font-family: 'Fraunces', Georgia, serif; font-size: var(--wm-fs-h3); }
.wm-zeitleiste p { margin: .25rem 0 0; max-width: var(--wm-measure); }

/* --- Definitionsliste Praktisches -------------------------------------- */
.wm-dl { margin: 0; }
.wm-dl dt {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--wm-fs-h3);
  font-weight: 600;
  color: var(--wm-gruen);
  margin-top: 1.6rem;
}
.wm-dl dd { margin: .3rem 0 0; max-width: var(--wm-measure); }

/* --- Downloads --------------------------------------------------------- */
.wm-downloads { display: grid; gap: 1rem; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0; }
@media (min-width: 48rem) { .wm-downloads { grid-template-columns: repeat(2, 1fr); } }
.wm-downloads li { margin: 0; max-width: none; }
.wm-downloads a {
  display: block;
  background: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius);
  padding: 1rem 1.15rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--wm-text);
}
.wm-downloads a:hover, .wm-downloads a:focus-visible { border-color: var(--wm-gruen); background: var(--wm-sand-hell); }
.wm-downloads strong { display: block; color: var(--wm-gruen); font-family: 'Fraunces', Georgia, serif; font-size: var(--wm-fs-h3); }
.wm-downloads .wm-pdf {
  display: inline-block; margin-top: .5rem;
  font-size: var(--wm-fs-klein); font-weight: 700;
  border: 1px solid var(--wm-terracotta); color: #8F4520;
  border-radius: var(--wm-radius-sm); padding: .1rem .5rem;
}
.wm-downloads span.wm-text { display: block; color: var(--wm-text-weich); margin-top: .3rem; }

/* --- Preiskarte -------------------------------------------------------- */
.wm-preis { text-align: left; }
.wm-preis .wm-betrag {
  font-family: 'Fraunces', Georgia, serif;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem);
  font-weight: 600;
  color: var(--wm-gruen);
  display: block;
  line-height: 1.1;
}
.wm-preis .wm-betrag-zusatz { color: var(--wm-text-weich); font-size: var(--wm-fs-klein); font-weight: 700; }

/* --- Akkordeon (FAQ) --------------------------------------------------- */
.wm-faq { display: grid; gap: .75rem; }
.wm-faq details {
  background: var(--wm-surface);
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius);
  padding: 0 1.15rem;
}
.wm-faq summary {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--wm-fs-h3);
  font-weight: 600;
  color: var(--wm-text);
  cursor: pointer;
  padding: 1rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.wm-faq summary:hover { color: var(--wm-gruen); }
.wm-faq details[open] summary { color: var(--wm-gruen); border-bottom: 1px solid var(--wm-line); }
.wm-faq details > *:not(summary) { max-width: var(--wm-measure); }
.wm-faq details > p:last-child { padding-bottom: 1rem; }

/* --- Fakten-Zeile Hero ------------------------------------------------- */
.wm-fakten { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; padding: 0; margin: 1rem 0; }
.wm-fakten li { font-weight: 700; color: var(--wm-gruen); max-width: none; }

/* --- Adresse Rechtsseiten ---------------------------------------------- */
.wm-adresse { font-style: normal; background: var(--wm-sand-hell); border-radius: var(--wm-radius); padding: 1rem 1.2rem; }
.wm-stand { color: var(--wm-text-weich); font-size: var(--wm-fs-klein); border-top: 1px solid var(--wm-line); padding-top: 1rem; margin-top: 2rem; }

/* --- Formular (Fluent Forms) ------------------------------------------- */
input, select, textarea,
.fluentform input, .fluentform select, .fluentform textarea,
.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="number"],
.frm-fluent-form textarea {
  font-size: 16px;
  min-height: 44px;
}
.fluentform textarea, .frm-fluent-form textarea { min-height: 8rem; }
.fluentform .ff-el-form-check-label,
.fluentform label.ff-el-input--label { font-size: 16px; }
.fluentform .ff-el-form-check input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; }
.fluentform .ff-btn-submit,
.frm-fluent-form .ff-btn-submit {
  background-color: var(--wm-button) !important;
  border-color: var(--wm-button) !important;
  color: #ffffff !important;
  border-radius: var(--wm-radius) !important;
  min-height: 44px;
  font-weight: 700;
}
.fluentform .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:hover {
  background-color: var(--wm-button-hover) !important;
  border-color: var(--wm-button-hover) !important;
}
.fluentform .ff-el-is-error .text-danger { color: #8F4520; }

/* --- Bilder ------------------------------------------------------------ */
/* Kein aspect-ratio: das Foto behaelt sein eigenes Seitenverhaeltnis, damit
   nichts weggeschnitten wird. Der Platz ist trotzdem vor dem Laden
   reserviert, weil width/height am <img> stehen. Der figure-Aussenabstand
   des Browsers (1em 40px) muss weg, sonst rutscht der Hero ein (EILAA-469). */
.wm-bild { margin: 0; }
.wm-bild img { border-radius: var(--wm-radius); width: 100%; height: auto; display: block; }
figcaption { color: var(--wm-text-weich); font-size: var(--wm-fs-klein); }

/* --- Kopf/Fuss (Kadence) ----------------------------------------------- */
.site-header, .site-footer { background-color: var(--wm-bg); }
.site-footer { border-top: 1px solid var(--wm-line); }
.site-footer a { color: var(--wm-gruen); }
.site-main-header-wrap .header-navigation a { color: var(--wm-text); }
.header-navigation .menu-item > a { min-height: 44px; display: inline-flex; align-items: center; }

/* === Nachtrag: Klassen der erzeugten Blockinhalte ====================== */

.wm-klein { font-size: var(--wm-fs-klein); color: var(--wm-text-weich); }

/* Kartenraster */
.wm-karten { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .wm-karten--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .wm-karten--3 { grid-template-columns: repeat(3, 1fr); } }
.wm-karte-btn { margin: 1rem 0 0; }

/* CTA-Buttonzeile */
.wm-cta-btns { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 0; max-width: none; }

/* Listen im Fliesstext */
.wm-liste, .wm-preis-liste, .wm-kontaktliste { padding-left: 1.2rem; margin: .5rem 0; }
.wm-liste li, .wm-preis-liste li { max-width: var(--wm-measure); margin-bottom: .35rem; }
.wm-kontaktliste { list-style: none; padding-left: 0; }
.wm-kontaktliste a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }

/* Bildplatz — steht nur bis zum Einsetzen des echten Fotos */
.wm-bildslot { margin: 0; }
.wm-bildslot-flaeche {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, var(--wm-sand) 0 12px, var(--wm-sand-hell) 12px 24px);
  border: 2px dashed var(--wm-line);
  border-radius: var(--wm-radius);
}
.wm-bildslot figcaption { margin-top: .5rem; }

/* Offener Punkt — sichtbar markiert, bis der echte Text vorliegt */
.wm-offen {
  border: 2px dashed var(--wm-terracotta);
  background: var(--wm-sand-hell);
  border-radius: var(--wm-radius);
  padding: 1rem 1.15rem;
}
.wm-offen p { max-width: none; }
.wm-offen strong { color: #8F4520; }

/* Download-Kachel ohne Ziel (Ferienplan) */
.wm-downloads .wm-download-offen {
  display: block;
  background: var(--wm-sand-hell);
  border: 1px dashed var(--wm-line);
  border-radius: var(--wm-radius);
  padding: 1rem 1.15rem;
  color: var(--wm-text-weich);
}
.wm-downloads .wm-download-offen strong { color: var(--wm-text-weich); }
.wm-pdf--offen { border-color: var(--wm-line) !important; color: var(--wm-text-weich) !important; }

/* Hero */
@media (min-width: 52rem) {
  .wm-hero-grid.wp-block-columns { align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
}

/* Rechtstexte: eine Lesespalte */
.wm-rechtstext h2 { font-size: var(--wm-fs-h2klein); margin-top: 2.25rem; }
.wm-rechtstext h3 { margin-top: 1.5rem; }

/* --- Fussbereich ------------------------------------------------------- */
.wm-fuss { text-align: left; }
.wm-fuss-raster { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .wm-fuss-raster { grid-template-columns: 2fr 1fr 1fr; } }
.wm-fuss h3 { font-size: var(--wm-fs-h3); margin: 0 0 .5rem; }
.wm-fuss ul { list-style: none; padding: 0; margin: 0; }
.wm-fuss li { margin-bottom: .2rem; }
.wm-fuss a { min-height: 44px; display: inline-flex; align-items: center; }
.wm-fuss-claim { font-size: var(--wm-fs-klein); color: var(--wm-text-weich); max-width: 34ch; }
.wm-fuss-recht {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  margin-top: 1.75rem; padding-top: 1rem;
  border-top: 1px solid var(--wm-line);
  font-size: var(--wm-fs-klein); color: var(--wm-text-weich);
}
.wm-fuss-recht a { color: var(--wm-gruen); }