/*
Theme Name:   Helga-Leister-Haus
Theme URI:    https://www.helga-leister-haus.de/
Author:       Waldmeister e.V. – Raum für Kultur
Description:  Theme für das Helga-Leister-Haus in Solingen-Mitte, betrieben vom Waldmeister e.V. – Raum für Kultur. Dunkles Design in Lime-Grün, Terminliste mit Kalender, Raumvermietung, Formulare, freie Dateiverwaltung und ein Baukasten, mit dem sich Seiten ohne HTML umbauen lassen. Legt beim Aktivieren alle Seiten selbst an.
Version:      1.7.4
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  waldmeister
Tags:         one-column, custom-menu, editor-style, full-width-template
*/

/* ==========================================================================
   HELGA-LEISTER-HAUS · Raum für Kultur | Waldmeister e.V. Solingen
   Globales Stylesheet  ·  Version 3.0
   --------------------------------------------------------------------------
   EINFÜGEN IN WORDPRESS:
   Design → Customizer → "Zusätzliches CSS"            (klassische Themes)
   Design → Editor → Stile (Stift) → Zusätzliches CSS  (Block-Themes)

   Alle Klassen sind mit "wm-" geprefixt. Nur der Block "0. THEME-BASIS"
   wirkt global (Hintergrundfarbe, Schrift) – der ist gewollt, damit die
   Seite überall dunkel ist und nicht nur innerhalb der Blöcke.
   ========================================================================== */

/* Schriften werden in functions.php geladen – siehe Konstante WM_GOOGLE_FONTS.
   Standardmäßig AUS, damit keine Verbindung zu Google entsteht (DSGVO).
   Ohne Archivo/Inter greift die Systemschrift, das Layout bleibt gleich. */

/* --------------------------------------------------------------------------
   1. DESIGN-TOKENS  (hier zentral alles umstellen)
   -------------------------------------------------------------------------- */
:root {
  /* Basis – dunkel wie die bisherige Seite */
  --wm-bg:        #121312;   /* Seitenhintergrund, fast schwarz             */
  --wm-bg-2:      #1a1c19;   /* abgesetzte Sektion                          */
  --wm-bg-3:      #232622;   /* Karten/Flächen auf dunklem Grund            */
  --wm-line:      rgba(255,255,255,.10);
  --wm-line-2:    rgba(255,255,255,.18);

  /* Schriftfarben */
  --wm-text:      #e9e7de;
  --wm-text-soft: #a8ada2;
  --wm-text-dim:  #8f958c;

  /* Akzente */
  --wm-lime:      #8dc63f;   /* Signaturgrün der Bestandsseite              */
  --wm-lime-soft: #a9d95f;
  --wm-lime-dim:  #6d9c2c;   /* nur auf DUNKLEM Grund verwenden        */
  --wm-lime-ink:  #456410;   /* Lime für HELLE Flächen, 5,2:1 Kontrast */
  --wm-terra:     #d1743a;   /* warmer Zweitakzent (Tickets, Vermietung)    */
  --wm-forest:    #1e4a30;   /* tiefes Waldgrün für Flächen                 */

  /* Helle Karten wie im Bestand (grauer Textblock neben Foto) */
  --wm-card:      #e3e2dd;
  --wm-card-2:    #d5d4cd;
  --wm-card-ink:  #1b1d1a;
  --wm-card-soft: #4a4f47;

  /* Maße */
  --wm-max:       1240px;
  --wm-max-text:  740px;
  --wm-radius:    4px;       /* kantig – passt zum Plakat-Charakter         */
  --wm-radius-lg: 8px;
  --wm-gap:       clamp(1rem, 2.2vw, 1.75rem);
  --wm-section:   clamp(3rem, 7vw, 6rem);

  /* Typo */
  --wm-font-head: 'Archivo', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --wm-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   0. THEME-BASIS  (wirkt global – bewusst)
   -------------------------------------------------------------------------- */
html { background: var(--wm-bg); }
body {
  background-color: var(--wm-bg);
  /* feine Körnung wie auf der bisherigen Seite */
  background-image:
    radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
  color: var(--wm-text);
  font-family: var(--wm-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* --- VOLLE BREITE ------------------------------------------------------------
   Wirkt automatisch auf allen Seiten – du musst NICHTS am Block oder an der
   Seite einstellen. (Der Block "Eigenes HTML" kann gar keine CSS-Klassen
   bekommen, deshalb läuft das hier über die Theme-Container.)
   ---------------------------------------------------------------------------- */
.wp-site-blocks,
.wp-site-blocks > .has-global-padding,
.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.entry-content,
.wp-block-post-content,
.site-main,
.site-content,
#content,
#primary {
  max-width: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Kinder aus dem "eingeschränkten" Layout des Themes befreien */
.entry-content > *,
.wp-block-post-content > *,
.wp-block-post-content > .alignwide,
.is-layout-constrained > .wm {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Doppelten Seitentitel ausblenden – nur auf Seiten, Blogbeiträge behalten ihn */
body.page .wp-block-post-title,
body.page .entry-header,
body.page .page-header,
body.page .wp-block-post-featured-image { display: none !important; }

/* --------------------------------------------------------------------------
   2. GRUNDBAUSTEINE
   -------------------------------------------------------------------------- */
.wm, .wm * { box-sizing: border-box; }
.wm {
  font-family: var(--wm-font-body);
  color: var(--wm-text);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.wm img { max-width: 100%; height: auto; display: block; }
.wm a { color: var(--wm-lime); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wm a:hover { color: var(--wm-lime-soft); }

.wm-wrap { width: 100%; max-width: var(--wm-max); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
/* Schmale Textspalte. Der automatische Rand gehört dazu: Ohne ihn klebt ein
   Abschnitt, der wm-narrow ohne wm-wrap benutzt, am linken Rand – genau das
   war auf dem Impressum zu sehen. */
.wm-narrow { max-width: var(--wm-max-text); margin-inline: auto; }
.wm-section { padding-block: var(--wm-section); }
.wm-section--alt   { background: var(--wm-bg-2); }
.wm-section--forest{ background: linear-gradient(160deg, #16281d, #101a13); }
.wm-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }

/* Helle Sektion (sparsam einsetzen, z. B. Preise/Formulare) */
.wm-section--light { background: var(--wm-card); color: var(--wm-card-ink); }
/* Achtung: Die Farbregeln für helle Abschnitte stehen weiter unten in
   Abschnitt 2b – sie müssen NACH der Typografie kommen, sonst gewinnt dort
   die weiße Schriftfarbe und der Text wird unlesbar. */

/* Typografie – Versalien-Headlines wie im Bestand */
.wm h1, .wm h2, .wm h3, .wm h4 {
  font-family: var(--wm-font-head);
  color: #fff;
  margin: 0 0 .55em;
  line-height: 1.06;
  text-wrap: balance;
}
.wm h1 { font-size: clamp(2.1rem, 6.2vw, 4.3rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; }
.wm h2 { font-size: clamp(1.65rem, 4vw, 2.7rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.wm h3 { font-size: clamp(1.2rem, 2.3vw, 1.55rem); font-weight: 700; letter-spacing: .005em; }
.wm h4 { font-size: 1.05rem; font-weight: 700; }
.wm h2 em, .wm h1 em { font-style: normal; color: var(--wm-lime); }
.wm p  { margin: 0 0 1.1em; max-width: 70ch; color: var(--wm-text-soft); }
.wm p:last-child { margin-bottom: 0; }
.wm p strong, .wm li strong { color: var(--wm-text); font-weight: 600; }
.wm-lead { font-size: clamp(1.08rem, 1.8vw, 1.3rem); line-height: 1.6; color: var(--wm-text); }
.wm ul, .wm ol { color: var(--wm-text-soft); padding-left: 1.2em; }
.wm li { margin-bottom: .45em; }

/* Meta-Zeile im Stil » KONZERT « */
.wm-kicker {
  display: block; font-family: var(--wm-font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--wm-lime); margin-bottom: .9rem;
}
.wm-kicker--deco::before { content: "» "; }
.wm-kicker--deco::after  { content: " «"; }
.wm-meta {
  font-family: var(--wm-font-body); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wm-text-dim);
}
.wm-hr { border: 0; border-top: 1px solid var(--wm-line); margin: clamp(2.5rem,5vw,4rem) 0; }

/* --------------------------------------------------------------------------
   2b. HELLE ABSCHNITTE
   Muss nach der Typografie stehen: sonst überschreibt die weiße
   Überschriftenfarbe diese Regeln und der Text verschwindet im Hellen.
   Alle Werte hier sind auf mindestens 4,5:1 Kontrast geprüft.
   -------------------------------------------------------------------------- */
.wm .wm-section--light h1,
.wm .wm-section--light h2,
.wm .wm-section--light h3,
.wm .wm-section--light h4 { color: var(--wm-card-ink); }
.wm .wm-section--light p,
.wm .wm-section--light li,
.wm .wm-section--light dd,
.wm .wm-section--light small,
.wm .wm-section--light .wm-lead { color: var(--wm-card-soft); }
.wm .wm-section--light p strong,
.wm .wm-section--light li strong,
.wm .wm-section--light dt { color: var(--wm-card-ink); }
.wm .wm-section--light a { color: var(--wm-lime-ink); }
.wm .wm-section--light .wm-kicker { color: var(--wm-lime-ink); }
.wm .wm-section--light .wm-meta { color: #3d423a; }
.wm .wm-section--light ul,
.wm .wm-section--light ol { color: var(--wm-card-soft); }

/* Karten in hellen Abschnitten: etwas dunkler abgesetzt, damit sie sichtbar bleiben */
.wm .wm-section--light .wm-card,
.wm .wm-section--light .wm-card--light {
  background: var(--wm-card-2); border-color: rgba(0,0,0,.10);
}
.wm .wm-section--light .wm-card h3 { color: var(--wm-card-ink); }
.wm .wm-section--light .wm-card p,
.wm .wm-section--light .wm-card li { color: var(--wm-card-soft); }
.wm .wm-section--light .wm-card__num { color: var(--wm-lime-ink); }
.wm .wm-section--light .wm-note {
  background: rgba(255,255,255,.55); border-left-color: var(--wm-lime-ink);
}
.wm .wm-section--light .wm-note p { color: var(--wm-card-soft); }
.wm .wm-section--light .wm-btn--ghost { color: var(--wm-lime-ink) !important; border-color: var(--wm-lime-ink); }
.wm .wm-section--light .wm-btn--ghost:hover { background: var(--wm-lime-ink); color: #fff !important; }
.wm .wm-section--light .wm-form label { color: var(--wm-lime-ink); }
.wm .wm-section--light .wm-form input,
.wm .wm-section--light .wm-form select,
.wm .wm-section--light .wm-form textarea { background: #fff; color: var(--wm-card-ink); border-color: rgba(0,0,0,.25); }
.wm .wm-section--light .wm-check { color: var(--wm-card-soft); }
.wm .wm-section--light .wm-form .wm-check span { color: var(--wm-card-soft); }
.wm .wm-section--light .wm-form .wm-check a { color: var(--wm-lime-ink); }
.wm .wm-section--light .wm-empty { background: var(--wm-card-2); color: var(--wm-card-soft); border-color: rgba(0,0,0,.15); }
.wm .wm-section--light .wm-empty strong { color: var(--wm-card-ink); }

/* Karten mit hellem Grund auf DUNKLEM Abschnitt brauchen dieselbe Sorgfalt */
.wm .wm-card--light h3, .wm .wm-card--light h4 { color: var(--wm-card-ink); }
.wm .wm-card--light p, .wm .wm-card--light li, .wm .wm-card--light dd, .wm .wm-card--light small { color: var(--wm-card-soft); }
.wm .wm-card--light strong, .wm .wm-card--light dt { color: var(--wm-card-ink); }
.wm .wm-card--light a { color: var(--wm-lime-ink); }

/* Buttons */
.wm-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.7rem; border: 2px solid var(--wm-lime); border-radius: 2px;
  font-family: var(--wm-font-body); font-size: .82rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
  background: var(--wm-lime); color: #14170f !important;
}
.wm-btn:hover { background: var(--wm-lime-soft); border-color: var(--wm-lime-soft); color: #14170f !important; }
.wm-btn--ghost { background: transparent; color: var(--wm-lime) !important; }
.wm-btn--ghost:hover { background: var(--wm-lime); color: #14170f !important; }
.wm-btn--quiet { background: transparent; border-color: var(--wm-line-2); color: var(--wm-text) !important; }
.wm-btn--quiet:hover { border-color: var(--wm-text); background: transparent; color: #fff !important; }
.wm-btn--terra { background: var(--wm-terra); border-color: var(--wm-terra); color: #fff !important; }
.wm-btn--terra:hover { background: #e0854a; border-color: #e0854a; color: #fff !important; }
.wm-btn--sm { padding: .6rem 1.1rem; font-size: .72rem; }
.wm-btnrow { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.wm-section--light .wm-btn--quiet { border-color: rgba(0,0,0,.25); color: var(--wm-card-ink) !important; }

/* Tags */

/* Hinweisbox */
.wm-note {
  border-left: 3px solid var(--wm-lime); background: var(--wm-bg-3);
  padding: 1.2rem 1.4rem; border-radius: 0 var(--wm-radius) var(--wm-radius) 0;
}
.wm-note--warn { border-left-color: var(--wm-terra); }
.wm-note p { color: var(--wm-text-soft); }

/* Grids */
.wm-grid { display: grid; gap: var(--wm-gap); }
.wm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.wm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.wm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); }
.wm-split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .wm-split { grid-template-columns: 1.05fr .95fr; } .wm-split--rev > :first-child { order: 2; } }

/* Karte */
.wm-card {
  background: var(--wm-bg-3); border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius); padding: 1.7rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.wm-card h3 { margin-bottom: .15em; }
.wm-card p { font-size: .96rem; }
.wm-card--light { background: var(--wm-card); border-color: transparent; }
.wm-card--light h3 { color: var(--wm-card-ink); }
.wm-card--light p { color: var(--wm-card-soft); }
.wm-card__num {
  font-family: var(--wm-font-head); font-size: 2.5rem; font-weight: 900;
  line-height: 1; color: var(--wm-lime);
}

/* Bild-Platzhalter, bis echte Fotos da sind */
.wm-ph {
  position: relative; border-radius: var(--wm-radius); overflow: hidden;
  background:
    linear-gradient(135deg, rgba(141,198,63,.22), rgba(0,0,0,.55)),
    repeating-linear-gradient(45deg, #26291f 0 14px, #1d1f19 14px 28px);
  display: flex; align-items: center; justify-content: center; min-height: 220px;
  color: rgba(255,255,255,.72); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; text-align: center; padding: 1rem; font-weight: 700;
  border: 1px solid var(--wm-line);
}
.wm-ph--tall { min-height: 440px; }
.wm-ph--wide { aspect-ratio: 16/9; min-height: 0; }
.wm-ph--sq   { aspect-ratio: 1/1; min-height: 0; }
.wm-ph--poster { aspect-ratio: 3/4; min-height: 0; }

/* Echte Fotos – ersetzen die Platzhalter oben 1:1
   Beispiel:  <img class="wm-img wm-img--tall" src="…" alt="…" loading="lazy"> */
.wm-img {
  display: block; width: 100%; border-radius: var(--wm-radius);
  object-fit: cover; background: var(--wm-bg-3); border: 1px solid var(--wm-line);
}
.wm-img--tall   { height: 100%; min-height: 340px; max-height: 640px; }
.wm-img--wide   { aspect-ratio: 16/9; }
.wm-img--sq     { aspect-ratio: 1/1; }
.wm-img--poster { aspect-ratio: 3/4; }
@media (max-width: 899px) { .wm-img--tall { height: auto; aspect-ratio: 4/3; min-height: 0; max-height: none; } }

/* --------------------------------------------------------------------------
   3. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
/* Die Servicezeile über dem Logo ist entfallen (siehe header.php).
   .wm-topbar bleibt nur als Rückfall, falls sie irgendwo im Inhalt auftaucht. */
.wm-topbar { display: none; }

.wm-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(13,14,13,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wm-line);
}
.wm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 82px; }

/* --- Logo: Zeichen + Schriftzug ---------------------------------------- */
.wm-logo { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.wm-logo__mark {
  width: clamp(34px, 4vw, 46px); height: auto; flex: none; display: block;
}
.wm-logo__txt { display: block; }
.wm-logo b {
  display: block; font-family: var(--wm-font-head); font-weight: 900;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem); letter-spacing: -.01em;
  text-transform: uppercase; color: var(--wm-lime); line-height: 1;
  /* Der Name gehört in eine Zeile – sonst bricht er neben dem Zeichen um */
  white-space: nowrap;
}
.wm-logo__txt span, .wm-logo > span { white-space: nowrap; }
@media (max-width: 420px) {
  /* Auf sehr schmalen Geräten darf umgebrochen werden, sonst wird es zu klein */
  .wm-logo b, .wm-logo__txt span { white-space: normal; }
  .wm-logo { gap: .55rem; }
}
.wm-logo__txt span, .wm-logo > span {
  display: block; font-size: .72rem; letter-spacing: .06em;
  color: var(--wm-text-soft); margin-top: .3rem;
}
.wm-logo--eigen img { max-height: 60px; width: auto; }

/* Fußbereich: Name und Zusatz stehen untereinander, nicht nebeneinander.
   Ohne diese Variante greift die Kopf-Regel (eine Zeile, Zeichen daneben) –
   dann schieben sich „Helga-Leister-Haus" und „Raum für Kultur" übereinander. */
.wm-logo--foot { display: block; }
.wm-logo--foot b {
  white-space: normal; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.1;
}
.wm-logo--foot > span { white-space: normal; margin-top: .45rem; }

/* --- Navigation -------------------------------------------------------- */
.wm-nav { display: flex; align-items: center; }
.wm-nav__list {
  display: flex; align-items: center; gap: .1rem;
  list-style: none; margin: 0; padding: 0;
}
.wm-nav__list > li { position: relative; margin: 0; }
.wm-nav a {
  color: var(--wm-lime) !important; text-decoration: none; display: block;
  padding: .5rem .68rem; font-family: var(--wm-font-body);
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 2px solid transparent;
}
.wm-nav a:hover { color: #fff !important; }
.wm-nav a.is-active,
.wm-nav .current-menu-item > a { color: #fff !important; border-bottom-color: var(--wm-lime); }

/* Klappmenü (z. B. Das Haus → Geschichte)
   Das Dreieck ist gezeichnet, nicht getippt: Als Zeichen (▾) fehlt es in
   manchen Schriften und wird dann als winziger Punkt oder als Kästchen
   dargestellt. Ränder gibt es in jeder Schrift. */
/* Höhere Gewichtung als die engeren Abstände weiter unten – sonst rutscht
   das Dreieck auf den letzten Buchstaben. */
.wm-nav .wm-nav__hat > a { padding-right: 1.5rem; position: relative; }
.wm-nav__hat > a::after {
  content: ""; position: absolute; right: .6rem; top: 50%;
  width: 0; height: 0; margin-top: -1px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .85;
}
.wm-nav .sub-menu {
  list-style: none; margin: 0; padding: .35rem 0;
  position: absolute; top: 100%; left: 0; min-width: 13rem; z-index: 95;
  background: #0d0e0d; border: 1px solid var(--wm-line-2); border-radius: 3px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.wm-nav__hat:hover > .sub-menu,
.wm-nav__hat:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.wm-nav .sub-menu a {
  border-bottom: 0; padding: .6rem 1rem; letter-spacing: .1em;
  font-size: .72rem; white-space: nowrap;
}
.wm-nav .sub-menu a:hover { background: rgba(141,198,63,.12); }

/* Knöpfe rechts: Kontakt (mit Klappmenü), Verweis nach außen */
.wm-nav__cta { margin-left: .6rem; }
.wm-nav__cta > a, .wm-nav__extra a { border-bottom-width: 2px; }
/* Der grüne Knopf bleibt auch als „aktive Seite" dunkel beschriftet –
   sonst gewinnt die Regel für aktive Links und Weiß auf Lime ist unlesbar.
   Nur der Knopf selbst (> a), damit die Links im Klappmenü darunter ihre
   eigene Farbe behalten – dunkel auf dunkel wäre unlesbar. */
.wm-nav__cta > a,
.wm-nav__cta > a:hover,
.wm-nav .wm-nav__cta > a.is-active,
.wm-nav .wm-nav__cta > .current-menu-item > a { color: #14170f !important; padding: .55rem 1.1rem; }
.wm-nav .wm-nav__cta > a.is-active { box-shadow: inset 0 0 0 2px rgba(0,0,0,.30); border-bottom-color: transparent; }

/* Klappmenü unter dem grünen Knopf (Kontakt → Anfahrt) – wie „Geschichte"
   unter „Das Haus". Es öffnet rechts ausgerichtet, damit es nicht aus dem
   Fenster läuft. */
.wm-nav .wm-nav__cta.wm-nav__hat > a { padding-right: 1.9rem; }
.wm-nav__cta.wm-nav__hat > a::after { border-top-color: #14170f; right: .8rem; }
.wm-nav .wm-nav__cta .sub-menu { left: auto; right: 0; }
.wm-nav .wm-nav__cta .sub-menu a {
  color: var(--wm-lime) !important; background: none; border-bottom: 0;
  padding: .6rem 1rem; box-shadow: none;
}
.wm-nav .wm-nav__cta .sub-menu a:hover { background: rgba(141,198,63,.12); color: #fff !important; }
.wm-nav__extra { margin-left: .35rem; }
.wm-nav__extra a { padding: .5rem .95rem; }
.wm-nav__extern { margin-left: .5rem; }
.wm-nav__out {
  color: var(--wm-text-soft) !important; font-weight: 600 !important;
  letter-spacing: .09em !important; font-size: .7rem !important;
}
.wm-nav__out:hover { color: #fff !important; }

.wm-burger { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; color: var(--wm-lime); }
.wm-burger span { display: block; width: 26px; height: 2px; background: currentColor; margin: 6px 0; }

/* Ab 1241 px steht das Menü in einer Zeile. Der Kopfbereich wird dabei nie
   breiter als der Rest der Seite (1240 px) – der Platz für das Menü bleibt
   also gleich, egal wie groß der Bildschirm ist. Deshalb gelten die engeren
   Abstände auf allen Desktop-Breiten und nicht nur bis 1450 px: sonst läuft
   die Zeile auch auf großen Bildschirmen über, sobald ein Menüpunkt oder der
   Verweis nach außen dazukommt. */
@media (min-width: 1241px) {
  .wm-nav a { padding: .5rem .5rem; font-size: .7rem; letter-spacing: .1em; }
  .wm-nav .wm-nav__hat > a { padding-right: 1.25rem; }
  .wm-nav__cta a { padding: .5rem .85rem; }
  .wm-nav__extra a { padding: .5rem .7rem; }
  .wm-nav__out { font-size: .66rem !important; letter-spacing: .06em !important; }
  .wm-logo { gap: .6rem; }
}

@media (max-width: 1240px) {
  .wm-burger { display: block; }
  .wm-nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    background: #0d0e0d; border-bottom: 1px solid var(--wm-line);
    padding: .5rem clamp(1rem, 4vw, 2.5rem) 1.5rem;
  }
  .wm-nav.is-open { display: block; }
  .wm-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .wm-nav__list > li { width: 100%; }
  .wm-nav a { padding: .95rem .2rem; border-bottom: 1px solid var(--wm-line); }
  .wm-nav a.is-active { border-bottom-color: var(--wm-lime); }
  /* Unterpunkte auf dem Handy einfach eingerückt zeigen – kein Aufklappen nötig */
  .wm-nav .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; background: transparent; padding: 0;
    min-width: 0;
  }
  .wm-nav .sub-menu a {
    padding: .8rem .2rem .8rem 1.4rem; border-bottom: 1px solid var(--wm-line);
    color: var(--wm-text-soft) !important;
  }
  .wm-nav .sub-menu a::before { content: "– "; opacity: .6; }
  .wm-nav__hat > a::after { display: none; }
  .wm-nav__cta, .wm-nav__extra, .wm-nav__extern { margin: 0; }
  .wm-nav__cta > a { margin: 1rem 0 .5rem; justify-content: center; text-align: center; border: 2px solid var(--wm-lime); }
  /* Unterpunkt des Knopfes (Anfahrt) steht auf dem Handy darunter, eingerückt
     wie die anderen Unterpunkte – nicht dunkel auf dunkel. */
  .wm-nav .wm-nav__cta .sub-menu a {
    padding: .8rem .2rem .8rem 1.4rem; border-bottom: 1px solid var(--wm-line);
    color: var(--wm-text-soft) !important; text-align: left; margin: 0;
  }
  .wm-nav__extra a { justify-content: center; text-align: center; }
  .wm-nav__out { padding: .9rem .2rem; }
}

/* --------------------------------------------------------------------------
   4. HERO / SEITENKOPF
   -------------------------------------------------------------------------- */
.wm-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 10vw, 8rem); }
.wm-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 82% 12%, rgba(141,198,63,.15), transparent 70%),
    radial-gradient(ellipse 55% 45% at 0% 95%, rgba(30,74,48,.45), transparent 70%);
}
.wm-hero__inner { position: relative; }
.wm-hero h1 { margin-bottom: .35em; }
.wm-hero p { font-size: clamp(1.05rem, 1.9vw, 1.28rem); max-width: 55ch; color: var(--wm-text); }
.wm-hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  border: 1px solid rgba(141,198,63,.45); color: var(--wm-lime);
  padding: .4rem .9rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.5rem;
}
.wm-hero__badge b { color: #fff; }
.wm-hero__facts {
  display: flex; flex-wrap: wrap; gap: 2rem 3rem; margin-top: 3.2rem;
  padding-top: 1.9rem; border-top: 1px solid var(--wm-line);
}
.wm-hero__fact strong {
  display: block; font-family: var(--wm-font-head); font-weight: 800;
  font-size: 1.7rem; color: #fff; line-height: 1;
}
.wm-hero__fact span { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wm-text-dim); }

.wm-pagehead { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--wm-line); position: relative; overflow: hidden; }
.wm-pagehead::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 90% 30%, rgba(141,198,63,.10), transparent 70%);
}
.wm-pagehead > * { position: relative; }
.wm-pagehead p { font-size: 1.12rem; color: var(--wm-text-soft); }
.wm-crumb { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wm-text-dim); margin-bottom: .9rem; }
.wm-crumb a { color: var(--wm-text-dim) !important; text-decoration: none; }
.wm-crumb a:hover { color: var(--wm-lime) !important; }

/* Bestands-Look: Veranstaltungs-Kachel halb Foto / halb heller Textblock */
.wm-feature { display: grid; grid-template-columns: 1fr; border-radius: var(--wm-radius); overflow: hidden; }
@media (min-width: 820px) { .wm-feature { grid-template-columns: 1fr 1fr; } .wm-feature--rev > :first-child { order: 2; } }
.wm-feature__txt {
  background: var(--wm-card); color: var(--wm-card-ink);
  padding: clamp(1.75rem, 4vw, 3rem); text-align: center;
  display: flex; flex-direction: column; justify-content: center; gap: .3rem;
}
.wm-feature__txt .wm-kicker { color: var(--wm-lime-ink); }
.wm-feature__txt .wm-meta { color: #3d423a; }
.wm-feature__txt h3 {
  color: var(--wm-lime-ink); font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 800; text-transform: uppercase; margin: .5rem 0 .8rem;
}
.wm-feature__txt p { color: var(--wm-card-soft); margin-inline: auto; }
.wm-feature__txt a.wm-more {
  margin-top: 1rem; font-size: .76rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--wm-lime-ink); text-decoration: none;
}
.wm-feature__txt a.wm-more:hover { color: var(--wm-card-ink); }
/* Der Textblock des Feature-Bausteins ist hell. Alles, was darin vorkommen
   kann, braucht darum dunkle Farben – sonst steht z. B. eine Datenliste oder
   ein Mail-Link unlesbar hell auf hell. Gilt auch für später ergänzte Inhalte.
   Die Auswahl beginnt mit .wm, damit sie die allgemeinen Regeln für dunkle
   Abschnitte (.wm p strong, .wm-dl dt …) sicher überstimmt. */
.wm .wm-feature__txt h2, .wm .wm-feature__txt h4 { color: var(--wm-card-ink); }
.wm .wm-feature__txt li, .wm .wm-feature__txt dd, .wm .wm-feature__txt small,
.wm .wm-feature__txt .wm-lead { color: var(--wm-card-soft); }
.wm .wm-feature__txt p strong, .wm .wm-feature__txt li strong,
.wm .wm-feature__txt strong, .wm .wm-feature__txt b { color: var(--wm-card-ink); }
.wm .wm-feature__txt dt, .wm .wm-feature__txt .wm-dl dt { color: var(--wm-lime-ink); }
.wm .wm-feature__txt .wm-dl dd { color: var(--wm-card-soft); }
.wm .wm-feature__txt a { color: var(--wm-lime-ink); }
.wm .wm-feature__txt .wm-btn--ghost { color: var(--wm-lime-ink) !important; border-color: var(--wm-lime-ink); }
.wm .wm-feature__txt .wm-btn--ghost:hover { background: var(--wm-lime-ink); color: #fff !important; }

/* --------------------------------------------------------------------------
   5. KALENDER
   -------------------------------------------------------------------------- */
.wm-cal { margin-top: 2rem; }
.wm-cal__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; justify-content: space-between; margin-bottom: 1.4rem; }
.wm-cal__month {
  font-family: var(--wm-font-head); font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 800; text-transform: uppercase; color: #fff; min-width: 11ch;
}
.wm-cal__nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 620px) {
  .wm-cal__month { order: -1; width: 100%; min-width: 0; margin-bottom: .3rem; }
}
.wm-iconbtn {
  width: 42px; height: 42px; border: 1px solid var(--wm-line-2); background: transparent;
  color: var(--wm-text); cursor: pointer; display: grid; place-items: center;
  font-size: 1.05rem; line-height: 1; border-radius: 2px; transition: .15s ease;
}
.wm-iconbtn:hover { background: var(--wm-lime); border-color: var(--wm-lime); color: #14170f; }
.wm-cal__today { width: auto; padding: 0 1.1rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wm-seg { display: inline-flex; border: 1px solid var(--wm-line-2); border-radius: 2px; overflow: hidden; }
.wm-seg button {
  border: 0; background: transparent; cursor: pointer; padding: .62rem 1.15rem;
  font-family: var(--wm-font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wm-text-soft);
}
.wm-seg button:hover { color: #fff; }
.wm-seg button.is-active { background: var(--wm-lime); color: #14170f; }


/* Monatsgitter */
.wm-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; background: var(--wm-line); border: 1px solid var(--wm-line); border-radius: var(--wm-radius); overflow: hidden;
}
.wm-cal__dow {
  background: #0d0e0d; color: var(--wm-text-dim); padding: .7rem .4rem; text-align: center;
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.wm-cal__day { background: var(--wm-bg-2); min-height: 122px; padding: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.wm-cal__day--out { background: #161816; }
.wm-cal__day--out .wm-cal__date { color: #4a4e47; }
.wm-cal__date { font-size: .8rem; font-weight: 700; color: var(--wm-text-soft); }
.wm-cal__day--today { box-shadow: inset 0 0 0 2px var(--wm-lime); }
.wm-cal__day--today .wm-cal__date {
  background: var(--wm-lime); color: #14170f; width: 23px; height: 23px;
  display: grid; place-items: center; border-radius: 2px;
}
.wm-cal__evs { display: flex; flex-direction: column; gap: .25rem; }
.wm-ev {
  border: 0; border-left: 3px solid var(--wm-lime); text-align: left; cursor: pointer; width: 100%;
  background: rgba(141,198,63,.13); color: var(--wm-text);
  padding: .3rem .4rem; font-family: var(--wm-font-body);
  font-size: .74rem; line-height: 1.25; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .12s ease;
}
.wm-ev:hover { background: var(--wm-lime); color: #14170f; }
.wm-ev time { display: block; font-weight: 500; font-size: .68rem; opacity: .75; }

@media (max-width: 760px) {
  .wm-cal__grid { display: block; border: 0; background: none; }
  .wm-cal__dow { display: none; }
  .wm-cal__day {
    border: 1px solid var(--wm-line); margin-bottom: .5rem; min-height: 0;
    flex-direction: row; align-items: flex-start; gap: .9rem;
  }
  .wm-cal__day--out, .wm-cal__day--empty { display: none; }
  .wm-cal__date { min-width: 3.6rem; padding-top: .15rem; }
  .wm-cal__evs { flex: 1; }
  .wm-ev { white-space: normal; font-size: .88rem; padding: .55rem .65rem; }
}

/* Listenansicht */
.wm-list { display: flex; flex-direction: column; gap: .7rem; }
.wm-item {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 1.3rem; align-items: center;
  background: var(--wm-bg-2); border: 1px solid var(--wm-line);
  border-left: 3px solid var(--wm-lime);
  border-radius: var(--wm-radius); padding: 1.1rem 1.4rem; transition: .15s ease;
}
.wm-item:hover { background: var(--wm-bg-3); }
.wm-item__date { text-align: center; border-right: 1px solid var(--wm-line); padding-right: 1rem; }
.wm-item__date b { display: block; font-family: var(--wm-font-head); font-size: 2.1rem; font-weight: 800; line-height: 1; color: #fff; }
.wm-item__date span { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wm-lime); }
.wm-item__date i { display: block; font-style: normal; font-size: .7rem; color: var(--wm-text-dim); margin-top: .15rem; letter-spacing: .1em; text-transform: uppercase; }
.wm-item__body h3 { font-size: 1.18rem; margin: .2rem 0 .35rem; color: #fff; }
.wm-item__body p { font-size: .93rem; margin: 0; }
.wm-item__meta { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--wm-text-dim); display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .4rem; }
.wm-item__cta { display: flex; flex-direction: column; gap: .45rem; align-items: flex-end; }
@media (max-width: 760px) {
  .wm-item { grid-template-columns: 72px 1fr; }
  .wm-item__cta { grid-column: 1 / -1; flex-direction: row; }
}
.wm-empty {
  text-align: center; padding: 3.5rem 1.5rem; background: var(--wm-bg-2);
  border: 1px dashed var(--wm-line-2); border-radius: var(--wm-radius); color: var(--wm-text-soft);
}
.wm-empty strong {
  display: block; font-family: var(--wm-font-head); font-size: 1.25rem; font-weight: 800;
  text-transform: uppercase; color: #fff; margin-bottom: .5rem;
}


/* Modal */
.wm-modal {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 1.25rem;
  background: rgba(0,0,0,.78); backdrop-filter: blur(3px);
}
.wm-modal.is-open { display: flex; }
.wm-modal__box {
  background: var(--wm-bg-2); border: 1px solid var(--wm-line-2);
  border-radius: var(--wm-radius-lg); max-width: 560px; width: 100%;
  max-height: 88vh; overflow: auto; padding: clamp(1.5rem, 4vw, 2.4rem); position: relative;
}
.wm-modal__close {
  position: absolute; top: .9rem; right: .9rem; width: 34px; height: 34px;
  border: 1px solid var(--wm-line-2); background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--wm-text); border-radius: 2px;
}
.wm-modal__close:hover { background: var(--wm-lime); color: #14170f; border-color: var(--wm-lime); }
.wm-modal__img {
  width: 100%; border: 1px solid var(--wm-line); border-radius: var(--wm-radius);
  margin: 0 0 1.3rem; background: var(--wm-bg-3);
}
.wm-modal__box h3 { margin: .6rem 0 .9rem; padding-right: 2.5rem; font-size: 1.5rem; text-transform: uppercase; font-weight: 800; }
.wm-modal__meta { list-style: none; padding: 0; margin: 0 0 1.3rem; font-size: .93rem; }
.wm-modal__meta li { display: flex; gap: .7rem; padding: .5rem 0; border-bottom: 1px solid var(--wm-line); margin: 0; }
.wm-modal__meta b { min-width: 6.5rem; color: var(--wm-text-dim); font-weight: 600; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .1rem; }

/* --------------------------------------------------------------------------
   6. WEITERE KOMPONENTEN
   -------------------------------------------------------------------------- */
.wm-dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 0; font-size: .96rem; }
.wm-dl dt { font-weight: 700; color: var(--wm-lime); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .15rem; }
.wm-dl dd { margin: 0; color: var(--wm-text-soft); }

.wm-table { width: 100%; border-collapse: collapse; font-size: .95rem; background: var(--wm-bg-2); border: 1px solid var(--wm-line); }
.wm-table th, .wm-table td { padding: .9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--wm-line); }
.wm-table thead th { background: #0d0e0d; color: var(--wm-lime); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.wm-table td { color: var(--wm-text-soft); }
.wm-table tbody tr:last-child td { border-bottom: 0; }
.wm-table td:last-child { font-weight: 700; color: #fff; white-space: nowrap; }
.wm-tablewrap { overflow-x: auto; }

.wm-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.wm-timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--wm-line-2); }
.wm-timeline li { position: relative; padding: 0 0 1.7rem 2.4rem; margin: 0; }
.wm-timeline li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 15px;
  border: 2px solid var(--wm-lime); background: var(--wm-bg); border-radius: 2px;
}
.wm-timeline li.is-done::before { background: var(--wm-lime); }
.wm-timeline strong { display: block; font-family: var(--wm-font-head); font-size: 1.05rem; font-weight: 700; color: #fff; }
.wm-timeline span { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--wm-lime); }

.wm-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .6rem; }
.wm-gallery figure { margin: 0; position: relative; border-radius: var(--wm-radius); overflow: hidden; }
.wm-gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .8rem 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,.9));
  color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.wm-gallery .wm-span2 { grid-column: span 2; }
@media (max-width: 560px) { .wm-gallery .wm-span2 { grid-column: span 1; } }

.wm-faq { border-top: 1px solid var(--wm-line); }
.wm-faq details { border-bottom: 1px solid var(--wm-line); }
.wm-faq summary {
  cursor: pointer; padding: 1.1rem .5rem 1.1rem 0; list-style: none;
  font-family: var(--wm-font-head); font-size: 1.02rem; font-weight: 700; color: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.wm-faq summary::-webkit-details-marker { display: none; }
.wm-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--wm-lime); flex: none; line-height: 1; }
.wm-faq details[open] summary::after { content: "–"; }
.wm-faq details > div { padding: 0 0 1.3rem; font-size: .96rem; color: var(--wm-text-soft); }
.wm-faq details > div p { color: var(--wm-text-soft); }

.wm-contact { display: grid; gap: var(--wm-gap); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.wm-contact a { font-weight: 600; word-break: break-word; }
.wm-map { border: 1px solid var(--wm-line); border-radius: var(--wm-radius); min-height: 340px; width: 100%; filter: grayscale(.3) contrast(1.05); }

.wm-form { display: grid; gap: 1rem; max-width: 640px; }
.wm-form label { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wm-lime); display: block; margin-bottom: .35rem; }
.wm-form input, .wm-form select, .wm-form textarea {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--wm-line-2); border-radius: 2px;
  background: var(--wm-bg); font-family: var(--wm-font-body); font-size: 1rem; color: var(--wm-text);
}
.wm-form input:focus, .wm-form select:focus, .wm-form textarea:focus { outline: 2px solid var(--wm-lime); outline-offset: 1px; }
/* Der Platzhalter des Browsers ist zu blass (4,04:1) – hier auf einen Wert
   gesetzt, der auch bei schlechtem Licht lesbar bleibt. */
.wm-form input::placeholder, .wm-form textarea::placeholder { color: var(--wm-text-dim); opacity: 1; }
.wm .wm-section--light .wm-form input::placeholder,
.wm .wm-section--light .wm-form textarea::placeholder { color: #5c625a; opacity: 1; }
.wm-form .wm-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wm-form small { font-size: .8rem; color: var(--wm-text-dim); }
.wm-form .wm-check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--wm-text-soft); }
.wm-form .wm-check input { width: auto; margin-top: .2rem; flex: 0 0 auto; }
/* Die Einwilligung ist ein ganzer Satz. Versalien und Sperrung – wie bei den
   kurzen Feldnamen – machen ihn schwer lesbar, deshalb hier zurückgenommen. */
.wm-form .wm-check,
.wm-form .wm-check span {
  text-transform: none; letter-spacing: normal; font-weight: 400;
  font-size: .88rem; line-height: 1.55; margin-bottom: 0;
}
.wm-form .wm-check span { color: var(--wm-text-soft); display: block; }
.wm-form .wm-check a { color: var(--wm-lime); text-decoration: underline; }
.wm-form .wm-check + .wm-check { margin-top: -.35rem; }

.wm-band {
  background: var(--wm-lime); color: #14170f; border-radius: var(--wm-radius);
  padding: clamp(1.75rem, 4.5vw, 3.2rem); display: grid; gap: 1.5rem; align-items: center;
}
@media (min-width: 820px) { .wm-band { grid-template-columns: 1.35fr 1fr; } }
.wm-band h2 { color: #14170f; margin-bottom: .3em; }
.wm-band p { color: rgba(20,23,15,.78); }
.wm-band .wm-btn { background: #14170f; border-color: #14170f; color: var(--wm-lime) !important; }
.wm-band .wm-btn:hover { background: #000; border-color: #000; color: var(--wm-lime) !important; }

.wm-logos { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; }
.wm-logos div {
  height: 48px; min-width: 128px; border: 1px solid var(--wm-line);
  display: grid; place-items: center; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--wm-text-dim); padding-inline: 1rem;
}

/* Blog / Aktuelles – greift auch auf die WP-Standardausgabe */
.wm-posts { display: grid; gap: var(--wm-gap); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.wm-post { background: var(--wm-bg-2); border: 1px solid var(--wm-line); border-radius: var(--wm-radius); overflow: hidden; display: flex; flex-direction: column; }
.wm-post__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.wm-post time { font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--wm-lime); }
.wm-post h3 { font-size: 1.2rem; margin: 0; }
.wm-post p { font-size: .94rem; margin: 0; }
.wm-post a.wm-more { margin-top: auto; font-weight: 800; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.wm-post a.wm-more::after { content: " →"; }

/* --------------------------------------------------------------------------
   6b. 360°-RUNDGANG
   -------------------------------------------------------------------------- */
.wm-tour {
  position: relative; margin-top: 2rem; border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius); overflow: hidden; background: var(--wm-bg-3);
}
.wm-tour__stage {
  width: 100%; aspect-ratio: 16/9; min-height: 260px;
  background-color: var(--wm-bg-3); background-position: 0 center;
  cursor: grab; touch-action: pan-y; outline: none;
}
.wm-tour.is-dragging .wm-tour__stage { cursor: grabbing; }
.wm-tour__stage:focus-visible { box-shadow: inset 0 0 0 3px var(--wm-lime); }
.wm-tour:fullscreen { border: 0; border-radius: 0; }
.wm-tour:fullscreen .wm-tour__stage { height: 100vh; aspect-ratio: auto; }

.wm-tour__hint {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  background: rgba(0,0,0,.65); color: #fff; padding: .45rem 1rem; border-radius: 2px;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  pointer-events: none; transition: opacity .3s ease;
}
.wm-tour__hint.is-away { opacity: 0; }

.wm-tour__full {
  position: absolute; top: .7rem; right: .7rem; width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.5);
  color: #fff; cursor: pointer; border-radius: 2px; font-size: 1rem; line-height: 1;
}
.wm-tour__full:hover { background: var(--wm-lime); color: #14170f; border-color: var(--wm-lime); }

.wm-tour__rooms { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.wm-tour__note { margin-top: .6rem; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--wm-text-soft); }

/* Platzhalter, solange keine Panoramen hochgeladen sind */
.wm-tour-platz a { color: var(--wm-lime); }

/* Pannellum in den dunklen Look holen (nur aktiv, wenn vorhanden) */
.pnlm-container { background: var(--wm-bg-3) !important; }
.pnlm-load-box { background: rgba(0,0,0,.75) !important; }

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.wm-footer { background: #0d0e0d; border-top: 1px solid var(--wm-line); padding-block: clamp(2.75rem, 6vw, 4.5rem) 1.75rem; font-size: .94rem; }
.wm-footer h4 { color: var(--wm-lime); font-family: var(--wm-font-body); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.1rem; }
.wm-footer__cols { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.wm-footer p { color: var(--wm-text-dim); font-size: .92rem; }
.wm-footer a { color: var(--wm-text-soft) !important; text-decoration: none; }
.wm-footer a:hover { color: var(--wm-lime) !important; }
.wm-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.wm-footer li { margin: 0; font-size: .92rem; }
.wm-footer__bottom {
  margin-top: 2.75rem; padding-top: 1.4rem; border-top: 1px solid var(--wm-line);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  /* #6a6f66 wäre auf dem Footergrund nur 3,76:1 – zu wenig für Fließtext */
  font-size: .76rem; letter-spacing: .06em; color: #8b9187;
}
.wm-footer__bottom a { color: var(--wm-lime); }
.wm-social { display: flex; gap: .5rem; margin-top: 1.1rem; }
.wm-social a {
  width: 38px; height: 38px; border: 1px solid var(--wm-line-2); display: grid; place-items: center;
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 2px;
}
.wm-social a:hover { background: var(--wm-lime); border-color: var(--wm-lime); color: #14170f !important; }

/* --------------------------------------------------------------------------
   8. HILFSKLASSEN & A11Y
   -------------------------------------------------------------------------- */
.wm-center { text-align: center; margin-inline: auto; }
.wm-center p { margin-inline: auto; }
.wm-mt0 { margin-top: 0 !important; }
.wm-mt1 { margin-top: 1rem; }
.wm-mt2 { margin-top: 2rem; }
.wm-mt3 { margin-top: 3rem; }
.wm-sr:focus, .wm-sr:focus-visible {
  position: static !important; width: auto; height: auto; clip: auto;
  display: inline-block; margin: .5rem; padding: .6rem 1rem;
  background: var(--wm-lime); color: #14170f !important; font-weight: 700;
  text-decoration: none; border-radius: 2px;
}
.wm-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wm :focus-visible { outline: 3px solid var(--wm-lime); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .wm *, .wm *::before, .wm *::after { transition: none !important; animation: none !important; }
}
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .wm-header, .wm-topbar, .wm-footer, .wm-cal__bar, .wm-filters, .wm-btnrow, .wm-modal { display: none !important; }
  .wm-hero, .wm-pagehead, .wm-section--alt, .wm-section--forest { background: none !important; }
  .wm h1, .wm h2, .wm h3, .wm p, .wm li { color: #000 !important; }
}

/* --------------------------------------------------------------------------
   Terminliste: Startansicht, Knöpfe oben in der Kopfzeile
   -------------------------------------------------------------------------- */
/* Kopfzeile: links [Liste|Monat] plus die beiden Listenknöpfe,
   rechts die Monatsnavigation (nur in der Monatsansicht sichtbar). */
.wm-cal__links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; }
.wm-cal__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.wm-cal__tools .wm-btn { margin: 0; }

/* In der Listenansicht hat die Monatsnavigation keine Bedeutung. Das
   JavaScript setzt zusätzlich hidden – doppelt hält besser, falls ein alter
   Seiteninhalt die Klasse nicht mitbringt. */
.wm-cal--liste .wm-cal__nav { display: none; }
.wm-cal__nav[hidden] { display: none !important; }

/* Reste aus früheren Fassungen: Termin-Arten (Konzert, Party, Kultur …) gibt
   es nicht mehr. Steht die Legende oder die Filterzeile noch im Seiteninhalt
   einer Seite, die seitdem nicht neu aufgebaut wurde, wäre sie jetzt ein
   sinnloser Textblock unter dem Kalender – deshalb weg. Die Korrektur
   „Kalender vom Seiteninhalt lösen" entfernt sie dauerhaft. */
.wm-legend, .wm-filters, .wm-cal__cats { display: none !important; }

/* Alte Knopfzeile aus früheren Fassungen: falls doch noch eine im
   Seiteninhalt steht, bleibt sie unauffällig statt zweimal aufzutauchen. */
.wm-cal__listbar:empty { display: none; }
.wm-cal__listbar { margin: 0 0 1.2rem; gap: .6rem; }
.wm-cal__listbar .wm-btn { margin: 0; }

/* Der Kalender bleibt in seiner Spalte, auch wenn ein selbst gebauter
   Seiteninhalt keinen Rahmen mitbringt. */
.wm-cal { max-width: var(--wm-max); margin-inline: auto; box-sizing: border-box; }
/* Hülle, die das JavaScript notfalls selbst baut (siehe kalender.js): Dann
   fehlt ringsum der Seitenrahmen, deshalb bringt sie eigene Abstände mit. */
.wm-cal--frei { padding-inline: clamp(1rem, 4vw, 2.5rem); padding-block: clamp(1.5rem, 4vw, 3rem); }

/* Beschreibungstext in der Liste: höchstens drei Zeilen. Das Skript kürzt
   den Text schon; diese Regel fängt lange Wörter und alte Inhalte ab. */
.wm-item__body p {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Sicherheitsnetz für selbst gebaute Seiteninhalte

   page.php legt einen Rahmen .wm-page um den Seiteninhalt. Alles, was darin
   ohne eigenen Seitenrahmen ankommt – ein von Hand eingefügter Absatz, eine
   Überschrift, ein Kalender ohne umgebendes .wm-wrap – bekommt hier Breite
   und Innenabstand. Ohne diese Regel klebt solcher Inhalt am linken Rand und
   läuft über die ganze Fensterbreite.
   -------------------------------------------------------------------------- */
.wm-page > * {
  box-sizing: border-box;
  max-width: var(--wm-max); margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
/* Reiner Text liest sich in einer schmalen Spalte besser als über die
   ganze Breite – Überschriften, Absätze und Listen bekommen deshalb das
   Textmaß, breite Bausteine (z. B. der Kalender) die volle Breite. */
.wm-page > :is(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, table, pre) {
  max-width: var(--wm-max-text);
}
/* Die fertigen Bausteine des Themes bringen ihren Rahmen selbst mit und
   dürfen weiterhin über die ganze Breite gehen (farbige Abschnitte, Hero). */
.wm-page > .wm,
.wm-page > .wm-section,
.wm-page > .wm-pagehead,
.wm-page > .wm-hero,
.wm-page > .wm-wrap,
.wm-page > .wm-modal {
  max-width: none; padding-inline: 0;
}
.wm-page > .wm-wrap { max-width: var(--wm-max); padding-inline: clamp(1rem, 4vw, 2.5rem); }

/* --------------------------------------------------------------------------
   Einzelne Seiten mittig

   Über die Seitenklasse am <body> (wm-seite-impressum, wm-seite-geschichte),
   nicht über Klassen im Seiteninhalt. So bleibt die Darstellung richtig,
   auch wenn der Inhalt später im Editor umgebaut wird.
   -------------------------------------------------------------------------- */
.wm-seite-impressum .wm-pagehead .wm-wrap,
.wm-seite-impressum .wm-section .wm-wrap,
.wm-seite-geschichte .wm-pagehead .wm-wrap,
.wm-seite-geschichte .wm-section .wm-wrap,
.wm-seite-impressum .wm-page > *,
.wm-seite-geschichte .wm-page > * {
  text-align: center;
}
.wm-seite-impressum .wm-section .wm-wrap,
.wm-seite-geschichte .wm-section .wm-wrap {
  max-width: var(--wm-max-text);
}
/* Aufzählungen, Beschreibungslisten, Formulare und bewusst linksbündige
   Absätze bleiben links – zentrierte Listen liest niemand gern. */
.wm-seite-impressum ul, .wm-seite-impressum ol, .wm-seite-impressum dl,
.wm-seite-impressum .wm-left, .wm-seite-impressum form,
.wm-seite-geschichte ul, .wm-seite-geschichte ol, .wm-seite-geschichte dl,
.wm-seite-geschichte .wm-left, .wm-seite-geschichte form,
.wm-seite-geschichte .wm-feature__txt, .wm-seite-geschichte .wm-timeline {
  text-align: left;
}
.wm-seite-impressum .wm-pagehead h1,
.wm-seite-geschichte .wm-pagehead h1 { margin-inline: auto; }
/* Der Seitenkopf darf etwas breiter sein als die Textspalte – eine große
   Überschrift bricht in einer 740-px-Spalte sonst über drei Zeilen. */
.wm-seite-impressum .wm-pagehead .wm-wrap,
.wm-seite-geschichte .wm-pagehead .wm-wrap { max-width: 900px; }

/* --------------------------------------------------------------------------
   Downloadbereich
   -------------------------------------------------------------------------- */
.wm-downloads { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.wm-downloads li { margin: 0; }
.wm-downloads a {
  display: flex; align-items: center; gap: 1rem; text-decoration: none;
  background: var(--wm-bg-3); border: 1px solid var(--wm-line);
  border-left: 3px solid var(--wm-lime); border-radius: 2px;
  padding: .9rem 1.1rem; color: var(--wm-text) !important;
}
.wm-downloads a:hover { background: #2b2f2a; border-color: var(--wm-line-2); }
.wm-downloads__typ {
  flex: none; font-family: var(--wm-font-head); font-weight: 800; font-size: .72rem;
  letter-spacing: .1em; color: var(--wm-lime); border: 1px solid var(--wm-line-2);
  border-radius: 2px; padding: .25rem .5rem; min-width: 3.4rem; text-align: center;
}
.wm-downloads__txt { flex: 1 1 auto; }
.wm-downloads__txt strong { display: block; font-weight: 600; }
.wm-downloads__txt small { display: block; color: var(--wm-text-soft); font-size: .84rem; margin-top: .15rem; }
.wm-downloads__meta { flex: none; font-size: .78rem; color: var(--wm-text-dim); white-space: nowrap; }
@media (max-width: 560px) {
  .wm-downloads a { flex-wrap: wrap; gap: .5rem .8rem; }
  .wm-downloads__meta { width: 100%; }
}

/* --------------------------------------------------------------------------
   Kleine Helfer
   -------------------------------------------------------------------------- */
/* Gegenstück zu .wm-center: einzelne Absätze bewusst linksbündig lassen
   (lange Rechtstexte lesen sich zentriert schlecht). */
.wm-left { text-align: left !important; margin-inline: 0 !important; }
.wm-center .wm-left { margin-inline: auto !important; }

/* Eine Mailadresse, die man nicht suchen muss */
.wm-mailgross { font-size: clamp(1.05rem, 2.4vw, 1.5rem); margin-top: .6rem; }
.wm-mailgross a { font-weight: 700; word-break: break-word; }