/* Werkbund CSS bundle — generated by build/build.sh. Do not edit. */

/* ---- tokens.css ---- */
/* ===========================================================================
   Werkbund Design Tokens
   Single source of truth for colour, type, space, radius, shadow, motion.
   Aesthetic: refined editorial minimal — museum meets Apple. Near-white
   canvas, Werkbund green + warm orange as sparing accents, Cormorant Garamond
   for display, a fast native sans for body (performance = SEO/GEO).
   =========================================================================== */

:root {
  /* ---- Brand ---- */
  --wb-green:        #1f5b43;
  --wb-green-deep:   #163d2f;
  --wb-orange:       #bc6224;
  --wb-orange-soft:  #d4854a;

  /* ---- Neutrals (warm, paper-like) ---- */
  --wb-ink:          #14110d;   /* near-black, warm */
  --wb-ink-soft:     #46413a;
  --wb-muted:        #6f6a62;
  --wb-line:         rgba(20, 17, 13, 0.10);
  --wb-line-strong:  rgba(20, 17, 13, 0.16);
  --wb-paper:        #fbfbfa;   /* page canvas */
  --wb-surface:      #ffffff;   /* cards */
  --wb-surface-2:    #f5f4f1;

  /* ---- Semantic ---- */
  --wb-bg:           var(--wb-paper);
  --wb-fg:           var(--wb-ink);
  --wb-accent:       var(--wb-green);
  --wb-accent-2:     var(--wb-orange);

  /* ---- Typography ---- */
  --wb-font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --wb-font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;

  --wb-fs-300: clamp(0.82rem, 0.80rem + 0.1vw, 0.88rem);
  --wb-fs-400: clamp(1.00rem, 0.97rem + 0.15vw, 1.06rem);
  --wb-fs-500: clamp(1.18rem, 1.10rem + 0.4vw, 1.35rem);
  --wb-fs-600: clamp(1.45rem, 1.25rem + 1.0vw, 2.00rem);
  --wb-fs-700: clamp(2.00rem, 1.55rem + 2.2vw, 3.25rem);
  --wb-fs-800: clamp(2.60rem, 1.90rem + 3.4vw, 4.75rem);

  --wb-lh-tight:   1.08;
  --wb-lh-snug:    1.28;
  --wb-lh-normal:  1.62;
  --wb-tracking-display: -0.018em;
  --wb-tracking-body:    -0.006em;

  /* ---- Space scale (8pt-ish, fluid headroom) ---- */
  --wb-space-1: 0.25rem;
  --wb-space-2: 0.5rem;
  --wb-space-3: 0.75rem;
  --wb-space-4: 1rem;
  --wb-space-5: 1.5rem;
  --wb-space-6: 2rem;
  --wb-space-7: 3rem;
  --wb-space-8: 4.5rem;
  --wb-space-9: 7rem;

  /* ---- Radius (Apple-like generous, never pill on big surfaces) ---- */
  --wb-radius-sm: 12px;
  --wb-radius:    18px;
  --wb-radius-lg: 26px;
  --wb-radius-xl: 34px;
  --wb-radius-pill: 999px;

  /* ---- Shadow (soft, low, layered — no harsh drop shadows) ---- */
  --wb-shadow-sm: 0 1px 2px rgba(11, 23, 18, 0.05), 0 2px 8px rgba(11, 23, 18, 0.05);
  --wb-shadow:    0 10px 30px rgba(11, 23, 18, 0.08), 0 2px 8px rgba(11, 23, 18, 0.05);
  --wb-shadow-lg: 0 24px 60px rgba(11, 23, 18, 0.12), 0 6px 16px rgba(11, 23, 18, 0.06);

  /* ---- Glass ---- */
  --wb-glass-bg:   rgba(255, 255, 255, 0.72);
  --wb-glass-blur: saturate(1.6) blur(16px);

  /* ---- Layout ---- */
  --wb-container: 1180px;
  --wb-container-narrow: 760px;
  --wb-prose: 72rem;         /* Option B: gemeinsame Lesespalte (linke Kante), feinjustierbar */
  --wb-gutter: clamp(1rem, 0.6rem + 2.4vw, 2.5rem);

  /* ---- Motion ---- */
  --wb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* Apple-ish ease-out */
  --wb-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* expo-out for menus/panels */
  --wb-ease-soft: cubic-bezier(0.4, 0.0, 0.2, 1);
  --wb-dur-fast: 180ms;
  --wb-dur: 320ms;
  --wb-dur-slow: 620ms;
}

/* Local display font. Drop the .woff2 files into
   assets/fonts/cormorant-garamond/ — otherwise the serif stack above is used,
   so the site never blocks on a missing font. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond/cormorant-garamond-variable.woff2") format("woff2");
}

/* ---- base.css ---- */
/* ===========================================================================
   Base — reset-lite, typography, layout primitives, page atmosphere.
   Scoped under .wb-shell so we coexist politely with Kadence defaults and
   keep specificity low (almost no !important).
   =========================================================================== */

/* ---- Page canvas + fixed atmosphere ---------------------------------------
   The gradient is driven by CSS vars set inline by inc/design-atmosphere.php.
   When the atmosphere is off, --wb-atmo-on is unset and ::before is hidden. */
html { background: var(--wb-paper); }

body.wb-shell {
  margin: 0;
  background: transparent;
  color: var(--wb-fg);
  font-family: var(--wb-font-body);
  font-size: var(--wb-fs-400);
  line-height: var(--wb-lh-normal);
  letter-spacing: var(--wb-tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.wb-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none;
  background:
    radial-gradient(ellipse 78vw 92vh at -10% 22%,
      rgba(var(--wb-atmo-green, 31,91,67), var(--wb-atmo-a-green, 0)) 0%, transparent 64%),
    radial-gradient(ellipse 76vw 88vh at 110% 18%,
      rgba(var(--wb-atmo-orange, 188,98,36), var(--wb-atmo-a-orange, 0)) 0%, transparent 66%);
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateZ(0);
}
body.wb-shell[style*="--wb-atmo-on"]::before,
body.wb-shell { /* var present → reveal */ }
body.wb-shell::before { display: block; }

@media (max-width: 767px) {
  body.wb-shell::before {
    background:
      radial-gradient(ellipse 92vw 78vh at -16% 16%,
        rgba(var(--wb-atmo-green, 31,91,67), var(--wb-atmo-a-green-m, 0)) 0%, transparent 68%),
      radial-gradient(ellipse 88vw 76vh at 116% 18%,
        rgba(var(--wb-atmo-orange, 188,98,36), var(--wb-atmo-a-orange-m, 0)) 0%, transparent 70%);
  }
}

/* ---- Typography ----------------------------------------------------------- */
.wb-shell h1, .wb-shell h2, .wb-shell h3,
.wb-shell .entry-title,
.wb-shell .wb-display {
  font-family: var(--wb-font-display);
  font-weight: 600;
  line-height: var(--wb-lh-tight);
  letter-spacing: var(--wb-tracking-display);
  color: var(--wb-ink);
  text-wrap: balance;
}
.wb-shell h1, .wb-shell .entry-title { font-size: var(--wb-fs-700); }
.wb-shell h2 { font-size: var(--wb-fs-600); }
.wb-shell h3 { font-size: var(--wb-fs-500); line-height: var(--wb-lh-snug); }

.wb-shell p { max-width: 68ch; }
.wb-shell a { color: var(--wb-green); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.wb-shell a:hover { color: var(--wb-green-deep); }

.wb-eyebrow {
  font-family: var(--wb-font-body);
  font-size: var(--wb-fs-300);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wb-orange);
}

/* ---- Layout primitives ---------------------------------------------------- */
.wb-container { width: min(100% - 2 * var(--wb-gutter), var(--wb-container)); margin-inline: auto; }
.wb-container--narrow { width: min(100% - 2 * var(--wb-gutter), var(--wb-container-narrow)); margin-inline: auto; }
.wb-section { padding-block: var(--wb-space-8); }
.wb-stack > * + * { margin-top: var(--wb-space-4); }

.wb-grid {
  display: grid;
  gap: var(--wb-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* ---- Images render calmly --------------------------------------------------*/
.wb-shell img { max-width: 100%; height: auto; }

/* ---- Glass header (driven by --wb-header-glass) --------------------------- */
body.wb-shell[style*="--wb-header-glass"] .site-header,
body.wb-shell[style*="--wb-header-glass"] #masthead {
  background: var(--wb-glass-bg);
  -webkit-backdrop-filter: var(--wb-glass-blur);
  backdrop-filter: var(--wb-glass-blur);
  border-bottom: 1px solid var(--wb-line);
}

/* ---- Focus visibility (a11y, never removed) ------------------------------- */
.wb-shell :focus-visible {
  outline: 2px solid var(--wb-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Selection ------------------------------------------------------------ */
.wb-shell ::selection { background: rgba(31, 91, 67, 0.16); }


/* 2.0.2 — Editorialer Lesespalt für Standard-Prosaseiten.
   `.wb-shell p` hatte max-width:68ch ohne Zentrierung -> auf content-width-normal
   klebte der Fliesstext links, rechts blieb die halbe Breite leer. Option B: alle obersten Textelemente docken LINKSBUENDIG an die gemeinsame
   Container-/Logo-Kante (margin-inline:0), gekappt auf eine gemeinsame, schrift-
   unabhaengige Lesespalte (--wb-prose). Headings, Text und Listen teilen EINE linke Kante.
   Wir wenden die Breite einheitlich auf alle obersten Textelemente von
   .single-content an, damit Ueberschriften, Absaetze und Listen EINE saubere,
   zentrierte Spalte mit gleicher linker Kante bilden.
   Scope-sicher: Startseite (body.home) und Veranstaltungs-Template (kein
   .single-content) bleiben unberuehrt; es werden nur DIREKTE Textkinder getroffen,
   shortcode-gebaute Layouts (direktes Kind = Wrapper-<div>) bleiben intakt.
   Bilder/Embeds sowie .alignwide/.alignfull werden bewusst nicht eingeschraenkt. */
body.wb-shell:not(.home) .single-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, dl, table, pre){
  max-width: var(--wb-prose, 72rem);
  margin-inline: 0;
}
body.wb-shell:not(.home) .single-content > :where(.alignwide, .alignfull){
  max-width: none;
}

/* 2.1.1 — Fliesstext im Blocksatz mit Silbentrennung: saubere linke UND rechte
   Kante (museal/editorial). Nur Absaetze/Listen/Zitate, NICHT Ueberschriften. */
body.wb-shell:not(.home) .single-content > :where(p, ul, ol, blockquote){
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* ---- components.css ---- */
/* ===========================================================================
   Components — buttons, cards (artist/event/member/post), hero, footer,
   WhatsApp invite, mobile drawer. Styled against the existing Werkbund class
   names so this applies to current CPT output. Low specificity, scoped to
   .wb-shell; the few !important here are only where Kadence hard-codes colours.
   =========================================================================== */

/* ---- Buttons -------------------------------------------------------------- */
.wb-shell .wb-btn,
.wb-shell .wp-block-button__link {
  --_bg: var(--wb-green);
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-2);
  padding: 0.72em 1.4em;
  border-radius: var(--wb-radius-pill);
  background: var(--_bg);
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: var(--wb-shadow-sm);
  transition: transform var(--wb-dur-fast) var(--wb-ease),
              box-shadow var(--wb-dur-fast) var(--wb-ease),
              background var(--wb-dur-fast) var(--wb-ease);
}
.wb-shell .wb-btn:hover,
.wb-shell .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--wb-shadow);
  color: #fff;
}
.wb-shell .wb-btn--ghost {
  background: transparent;
  color: var(--wb-green);
  box-shadow: inset 0 0 0 1px var(--wb-line-strong);
}
.wb-shell .wb-btn--accent { --_bg: var(--wb-orange); }

/* ---- Card surface (shared) ------------------------------------------------ */
.wb-shell .wb-artist-card,
.wb-shell .wb-artist-profile-card,
.wb-shell .wb-member-card,
.wb-shell .wb-board-card,
.wb-shell .wb-president-card,
.wb-shell .wb-event-card,
.wb-shell .wb-publication-card,
.wb-shell .wb-post-card,
.wb-shell .wb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--wb-surface);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius-lg);
  overflow: hidden;
  box-shadow: var(--wb-shadow-sm);
  transition: transform var(--wb-dur) var(--wb-ease),
              box-shadow var(--wb-dur) var(--wb-ease);
}
.wb-shell .wb-artist-card:hover,
.wb-shell .wb-event-card:hover,
.wb-shell .wb-post-card:hover,
.wb-shell .wb-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--wb-shadow-lg);
}

/* Image zoom on hover (contained) */
.wb-shell .wb-card__media,
.wb-shell .wb-artist-card figure,
.wb-shell .wb-event-card figure {
  overflow: hidden;
}
.wb-shell .wb-card__media img,
.wb-shell .wb-artist-card figure img,
.wb-shell .wb-event-card figure img {
  display: block;
  width: 100%;
  transition: transform var(--wb-dur-slow) var(--wb-ease);
}
.wb-shell .wb-artist-card:hover figure img,
.wb-shell .wb-event-card:hover figure img,
.wb-shell .wb-card:hover .wb-card__media img {
  transform: scale(1.045);
}

.wb-shell .wb-card__body { padding: var(--wb-space-5); }
.wb-shell .wb-card__title { font-family: var(--wb-font-display); font-size: var(--wb-fs-500); margin: 0 0 var(--wb-space-2); }

/* Artist portrait 3:4 */
.wb-shell .wb-artist-card figure { aspect-ratio: 3 / 4; }
.wb-shell .wb-artist-card figure img { height: 100%; object-fit: cover; }
.wb-shell .wb-artist-card__name { font-family: var(--wb-font-display); color: var(--wb-green); }
.wb-shell .wb-artist-card__discipline { font-size: var(--wb-fs-300); color: var(--wb-muted); letter-spacing: 0.04em; }

/* Status pills on event cards */
.wb-shell .wb-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.8em;
  border-radius: var(--wb-radius-pill);
  font-size: var(--wb-fs-300);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.wb-shell .wb-pill--current { background: rgba(31,91,67,0.12); color: var(--wb-green); }
.wb-shell .wb-pill--soon    { background: rgba(188,98,36,0.14); color: var(--wb-orange); }
.wb-shell .wb-pill--past    { background: var(--wb-surface-2); color: var(--wb-muted); }

/* ---- Posts index hero (matches template-parts/content/archive_hero.php) --- */
.wb-shell .wb-post-archive-hero-shell { padding-block: var(--wb-space-8) var(--wb-space-6); }
.wb-shell .wb-post-archive-hero-card {
  max-width: var(--wb-container-narrow);
}
.wb-shell .wb-post-archive-kicker { /* uses .wb-eyebrow styling */ }
.wb-shell .wb-post-archive-lead { font-size: var(--wb-fs-500); color: var(--wb-ink-soft); }

/* Featured first post in the index */
.wb-shell .wb-post-index .wb-archive-featured {
  border-color: var(--wb-line-strong);
  box-shadow: var(--wb-shadow);
}

/* ---- Footer meta (rendered by old fallback, kept compatible) -------------- */
.wb-shell .wb-footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-4) var(--wb-space-6);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--wb-space-5);
  font-size: var(--wb-fs-300);
  color: var(--wb-muted);
}
.wb-shell .wb-footer-meta a { color: var(--wb-ink-soft); }
.wb-shell .wb-footer-meta__nav,
.wb-shell .wb-footer-meta__social { display: flex; gap: var(--wb-space-4); flex-wrap: wrap; }

/* ---- Footer (versionierte Fußzeile, inc/footer.php) -----------------------
   Ruhig, institutionell: Haarlinie als Abschluss des Inhalts, großzügiger
   Weißraum, Wortmarke in der Displayschrift als leiser Anker. Interaktion nur
   über Farbe/Unterstreichung (kein Movement) — museale Zurückhaltung. */
.wb-shell .wb-footer {
  /* Customizer-Farbschicht: genau drei Stellschrauben (Hintergrund, Text,
     Akzent) — gedämpfte Töne und Haarlinien leiten sich automatisch daraus
     ab. So bleibt jede gewählte Kombination harmonisch: Eleganz per
     Konstruktion statt per Disziplin. */
  --wbf-bg: var(--wb-paper);
  --wbf-ink: var(--wb-ink);
  --wbf-accent: var(--wb-green);
  /* Fallback für Browser ohne color-mix(): CI-Töne. */
  --wbf-text: var(--wb-ink-soft);
  --wbf-muted: var(--wb-muted);
  --wbf-line: var(--wb-line);
  margin-top: var(--wb-space-9);
  border-top: 1px solid var(--wbf-line);
  background: var(--wbf-bg);
  color: var(--wbf-text);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .wb-shell .wb-footer {
    --wbf-text: color-mix(in srgb, var(--wbf-ink) 78%, var(--wbf-bg));
    --wbf-muted: color-mix(in srgb, var(--wbf-ink) 58%, var(--wbf-bg));
    --wbf-line: color-mix(in srgb, var(--wbf-ink) 10%, transparent);
  }
}
.wb-shell .wb-footer__inner {
  max-width: var(--wb-container);
  margin-inline: auto;
  padding: clamp(2.5rem, 2rem + 2vw, 4rem) var(--wb-gutter) var(--wb-space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wb-space-6);
}
.wb-shell .wb-footer__wordmark {
  margin: 0;
  font-family: var(--wb-font-display);
  font-size: var(--wb-fs-500);
  font-weight: 600;
  letter-spacing: var(--wb-tracking-display);
  line-height: var(--wb-lh-snug);
}
.wb-shell .wb-footer__wordmark a {
  color: var(--wbf-ink);
  text-decoration: none;
  transition: color var(--wb-dur-fast) var(--wb-ease);
}
.wb-shell .wb-footer__wordmark a:hover { color: var(--wbf-accent); }
.wb-shell .wb-footer__tagline {
  margin: var(--wb-space-2) 0 0;
  font-size: var(--wb-fs-300);
  color: var(--wbf-muted);
}
.wb-shell .wb-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-3) var(--wb-space-5);
}
.wb-shell .wb-footer__list li { margin: 0; padding: 0; }
.wb-shell .wb-footer__nav a,
.wb-shell .wb-footer__social a {
  color: var(--wbf-text);
  font-size: var(--wb-fs-300);
  text-decoration: none;
  transition: color var(--wb-dur-fast) var(--wb-ease);
}
.wb-shell .wb-footer__nav a:hover,
.wb-shell .wb-footer__social a:hover {
  color: var(--wbf-accent);
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: 1px;
}
.wb-shell .wb-footer a:focus-visible {
  outline: 2px solid var(--wbf-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.wb-shell .wb-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-3) var(--wb-space-5);
}
.wb-shell .wb-footer__legal {
  max-width: var(--wb-container);
  margin-inline: auto;
  padding: var(--wb-space-4) var(--wb-gutter) var(--wb-space-6);
  border-top: 1px solid var(--wbf-line);
  font-size: var(--wb-fs-300);
  color: var(--wbf-muted);
}
@media (min-width: 768px) {
  .wb-shell .wb-footer__inner {
    grid-template-columns: minmax(0, 1.4fr) auto;
    align-items: start;
    column-gap: var(--wb-space-8);
  }
  .wb-shell .wb-footer__brand { grid-row: 1 / span 2; }
  .wb-shell .wb-footer__list { justify-content: flex-end; }
  .wb-shell .wb-footer__social { justify-content: flex-end; }
}

/* ---- WhatsApp invite ------------------------------------------------------ */
.wb-wa {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  z-index: 9994;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 7px;
  max-width: min(260px, calc(100vw - 28px));
  border-radius: var(--wb-radius-pill);
  background: var(--wb-glass-bg);
  border: 1px solid var(--wb-line);
  box-shadow: var(--wb-shadow-lg);
  -webkit-backdrop-filter: var(--wb-glass-blur);
  backdrop-filter: var(--wb-glass-blur);
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity var(--wb-dur) var(--wb-ease), transform var(--wb-dur) var(--wb-ease);
}
.wb-wa.is-visible { display: flex; opacity: 1; transform: none; }
.wb-wa__link { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--wb-green-deep); min-width: 0; }
.wb-wa__mark { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--wb-radius-pill); display: inline-flex; align-items: center; justify-content: center; background: #1f6b4f; color: #fff; font-weight: 800; font-size: 10px; }
.wb-wa__text { font-weight: 700; font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px; }
.wb-wa__cta  { flex: 0 0 auto; padding: 8px 12px; border-radius: var(--wb-radius-pill); background: var(--wb-orange); color: #fff; font-size: 13px; font-weight: 700; }
.wb-wa__close{ width: 32px; height: 32px; flex: 0 0 32px; border: 0; border-radius: var(--wb-radius-pill); background: rgba(23,76,58,0.08); color: var(--wb-green-deep); font-size: 22px; line-height: 1; cursor: pointer; }
@media (min-width: 768px) { body:not(.wb-wa-desktop) .wb-wa { display: none !important; } }
body.popup-drawer-active .wb-wa { display: none !important; }

/* ===========================================================================
   Mobile drawer — opaque dark "liquid glass" (tuned to the Werkbund reference).
   Uses #mobile-drawer (Kadence id) so it reliably beats Kadence's own colours
   without scoping under .wb-shell. The panel is NOT transparent.
   =========================================================================== */
#mobile-drawer .drawer-overlay {
  background: rgba(0, 0, 0, 0.40);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

#mobile-drawer .drawer-inner {
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(255,255,255,0.12), transparent 56%),
    radial-gradient(700px 380px at 100% 0%, rgba(255,255,255,0.08), transparent 62%),
    linear-gradient(180deg, rgba(14,16,18,0.92), rgba(14,16,18,0.84));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--wb-shadow-lg);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  color: rgba(255,255,255,0.92);
  display: flex;
  flex-direction: column;
  max-height: 100dvh;
}
#mobile-drawer.popup-drawer-layout-sidepanel .drawer-inner { border-radius: var(--wb-radius-xl); overflow: hidden; }
#mobile-drawer .drawer-content,
#mobile-drawer .drawer-body,
#mobile-drawer .popup-drawer-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Close button as a calm round control */
#mobile-drawer .drawer-header { padding: calc(10px + env(safe-area-inset-top)) 14px 8px; display: flex; justify-content: flex-end; }
#mobile-drawer .drawer-header .drawer-toggle {
  width: 44px; height: 44px; border-radius: var(--wb-radius-pill);
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 26px rgba(0,0,0,0.25); display: inline-flex; align-items: center; justify-content: center;
}
#mobile-drawer .drawer-header .drawer-toggle .toggle-close-bar { background: rgba(255,255,255,0.86); height: 2px; width: 18px; }

/* Menu items as quiet pills */
#mobile-drawer .mobile-drawer-content { padding: 0 12px calc(18px + env(safe-area-inset-bottom)); }
#mobile-drawer #mobile-menu { list-style: none; margin: 0; padding: 10px 0 0; }
#mobile-drawer #mobile-menu > li { margin: 0 0 10px; }
#mobile-drawer #mobile-menu .drawer-nav-drop-wrap { display: flex; align-items: stretch; gap: 10px; }
#mobile-drawer #mobile-menu .drawer-nav-drop-wrap > a { flex: 1; min-width: 0; }

#mobile-drawer #mobile-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-radius: var(--wb-radius);
  text-decoration: none; color: rgba(255,255,255,0.92);
  font-weight: 650; font-size: 18px; line-height: 1.1;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  transition: transform var(--wb-dur-fast) var(--wb-ease-out), background-color var(--wb-dur-fast) var(--wb-ease-out);
}
@media (hover: hover) { #mobile-drawer #mobile-menu a:hover { transform: translateY(-1px); background: rgba(255,255,255,0.10); } }
#mobile-drawer #mobile-menu li.current-menu-item > a,
#mobile-drawer #mobile-menu li.current-menu-item > .drawer-nav-drop-wrap > a {
  color: #4fd197; background: rgba(31,91,67,0.22); border-color: rgba(31,91,67,0.5);
}

/* Sub-toggle (chevron) + 2nd level */
#mobile-drawer #mobile-menu .drawer-sub-toggle {
  width: 52px; border-radius: var(--wb-radius); padding: 0;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12);
  display: inline-flex; align-items: center; justify-content: center;
}
#mobile-drawer #mobile-menu .drawer-sub-toggle svg { opacity: 0.92; transition: transform var(--wb-dur-fast) var(--wb-ease-out); }
#mobile-drawer #mobile-menu .drawer-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
#mobile-drawer #mobile-menu .sub-menu {
  list-style: none; margin: 10px 0 0; padding: 10px; border-radius: var(--wb-radius);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
}
#mobile-drawer #mobile-menu .sub-menu > li { margin: 0 0 6px; }
#mobile-drawer #mobile-menu .sub-menu a {
  font-size: 16px; padding: 12px; border-radius: var(--wb-radius-sm);
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  box-shadow: none; color: rgba(255,255,255,0.86);
}

/* ===========================================================================
   Desktop secondary / dropdown menus — Apple-like liquid-glass popover.
   Replaces Kadence's flat dark dropdown. Desktop only.
   =========================================================================== */
@media (min-width: 1025px) {
  #masthead .header-navigation li.menu-item-has-children > a .dropdown-nav-toggle,
  #masthead .primary-navigation li.menu-item-has-children > a .dropdown-nav-toggle,
  #masthead .secondary-navigation li.menu-item-has-children > a .dropdown-nav-toggle {
    display: inline-flex; align-items: center; margin-left: 6px;
    transform: translateY(1px); transform-origin: 50% 55%;
    transition: transform var(--wb-dur-fast) var(--wb-ease-out);
  }
  #masthead .header-navigation li.menu-item-has-children:hover > a .dropdown-nav-toggle,
  #masthead .header-navigation li.menu-item-has-children:focus-within > a .dropdown-nav-toggle,
  #masthead .primary-navigation li.menu-item-has-children:hover > a .dropdown-nav-toggle,
  #masthead .secondary-navigation li.menu-item-has-children:hover > a .dropdown-nav-toggle {
    transform: translateY(1px) rotate(-180deg);
  }

  #masthead .header-navigation ul ul.sub-menu,
  #masthead .primary-navigation ul ul.sub-menu,
  #masthead .secondary-navigation ul ul.sub-menu {
    background: var(--wb-glass-bg);
    border: 1px solid var(--wb-line);
    border-radius: var(--wb-radius);
    padding: 8px;
    box-shadow: var(--wb-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    position: absolute; z-index: 9999; isolation: isolate; overflow: hidden;
  }
  /* Specular highlight keeps the glass feel */
  #masthead .header-navigation ul ul.sub-menu::before,
  #masthead .primary-navigation ul ul.sub-menu::before,
  #masthead .secondary-navigation ul ul.sub-menu::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.55;
    background:
      radial-gradient(900px 320px at 0% 0%, rgba(255,255,255,0.90), transparent 60%),
      radial-gradient(720px 320px at 100% 0%, rgba(255,255,255,0.55), transparent 62%);
  }
  #masthead .header-navigation ul ul.sub-menu > li,
  #masthead .primary-navigation ul ul.sub-menu > li,
  #masthead .secondary-navigation ul ul.sub-menu > li { position: relative; z-index: 1; }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #masthead .header-navigation ul ul.sub-menu,
    #masthead .primary-navigation ul ul.sub-menu,
    #masthead .secondary-navigation ul ul.sub-menu { background: rgba(255,255,255,0.97); }
  }

  /* Gentle fade/slide reveal */
  #masthead .header-navigation li.menu-item-has-children > ul.sub-menu,
  #masthead .primary-navigation li.menu-item-has-children > ul.sub-menu,
  #masthead .secondary-navigation li.menu-item-has-children > ul.sub-menu {
    transform: translateY(6px) scale(0.99); opacity: 0; pointer-events: none;
    transition: opacity var(--wb-dur-fast) var(--wb-ease-out), transform var(--wb-dur-fast) var(--wb-ease-out);
  }
  #masthead .header-navigation li.menu-item-has-children:hover > ul.sub-menu,
  #masthead .header-navigation li.menu-item-has-children:focus-within > ul.sub-menu,
  #masthead .primary-navigation li.menu-item-has-children:hover > ul.sub-menu,
  #masthead .primary-navigation li.menu-item-has-children:focus-within > ul.sub-menu,
  #masthead .secondary-navigation li.menu-item-has-children:hover > ul.sub-menu,
  #masthead .secondary-navigation li.menu-item-has-children:focus-within > ul.sub-menu {
    transform: none; opacity: 1; pointer-events: auto;
  }

  /* Links inside the popover */
  #masthead .header-navigation ul ul.sub-menu > li > a,
  #masthead .primary-navigation ul ul.sub-menu > li > a,
  #masthead .secondary-navigation ul ul.sub-menu > li > a {
    color: var(--wb-ink); font-weight: 600; padding: 9px 12px; border-radius: var(--wb-radius-sm); line-height: 1.22;
    transition: background-color var(--wb-dur-fast) var(--wb-ease-out), transform var(--wb-dur-fast) var(--wb-ease-out);
  }
  #masthead .header-navigation ul ul.sub-menu > li + li > a,
  #masthead .primary-navigation ul ul.sub-menu > li + li > a,
  #masthead .secondary-navigation ul ul.sub-menu > li + li > a { border-top: 1px solid rgba(20,17,13,0.06); }
  #masthead .header-navigation ul ul.sub-menu > li > a:hover,
  #masthead .primary-navigation ul ul.sub-menu > li > a:hover,
  #masthead .secondary-navigation ul ul.sub-menu > li > a:hover {
    background: rgba(31,91,67,0.10); transform: translateY(-1px);
  }

  @media (prefers-reduced-motion: reduce) {
    #masthead ul ul.sub-menu,
    #masthead ul ul.sub-menu > li > a { transition: none !important; }
  }
}

/* ---- home.css ---- */
/* ===========================================================================
   Home — front-page specific layout & components.
   Two parts:
   1) The tuned wes-home-hero-2026 layout (provided verbatim — do not retune;
      the clamps and German hyphenation control are intentional).
   2) Ported, proven styling for the plugin's home sections (ticker, event duo,
      about band, artist strip, membership cards, random gallery). These rules
      come from the previous build and FIX the contrast regression: the white
      text on the coloured cards is theme-provided, not plugin-provided.

   Token bridge: the ported rules expect the older token names/values, which
   resolve from the live Kadence palette. We define them scoped to .wb-home so
   the rest of the theme is untouched and the home sections match the brand
   palette exactly.
   =========================================================================== */

.wb-home {
  --wb-green:    var(--global-palette1, #0f7a4c);
  --wb-green-2:  var(--global-palette2, #0b5f3a);
  --wb-accent:   var(--global-palette3, #d97a2b);
  --wb-muted:    var(--global-palette4, #646970);
  --wb-text:     var(--global-palette5, #0b0f0d);
  --wb-radius-l:  22px;
  --wb-radius-xl: 28px;
  --wb-shadow-m: 0 14px 40px rgba(0,0,0,.10);
  --wb-shadow-l: 0 28px 90px rgba(0,0,0,.14);
  --wb-dur-2: 180ms;
  --wb-dur-3: 280ms;
  --wb-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------------------
   Werkbund Startseite Hero 2026 (verbatim)
   --------------------------------------------------------------------------- */

.wes-home-hero-2026__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(22px, 3vw, 40px);
}

.wes-home-hero-2026__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.wes-home-hero-2026__eyebrow {
  margin: 0 0 clamp(8px, 0.9vw, 14px) 0 !important;
  padding: 0 !important;
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(31, 41, 55, 0.62);
}

.wes-home-hero-2026__title {
  max-width: 13ch;
  margin-top: 0 !important;
  margin-bottom: clamp(24px, 2.4vw, 34px);
  font-size: clamp(48px, 6vw, 86px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}

.wes-home-hero-2026__line {
  hyphens: none;
  -webkit-hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

.wes-home-hero-2026__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.wes-home-hero-2026__image-wrap {
  width: 100%;
  max-width: 700px;
  min-height: clamp(320px, 38vw, 520px);
  aspect-ratio: 16 / 10;
  border-radius: 28px;
  overflow: hidden;
  justify-self: end;
}

.wes-home-hero-2026__image-wrap img,
.wes-home-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (max-width: 1180px) {
  .wes-home-hero-2026__grid { grid-template-columns: 1fr; }
  .wes-home-hero-2026__image-wrap { max-width: 100%; justify-self: stretch; }
}

@media (max-width: 782px) {
  .wes-home-hero-2026__title {
    max-width: 11.5ch;
    font-size: clamp(34px, 11.2vw, 52px);
    line-height: 0.98;
    text-wrap: pretty;
  }
  .wes-home-hero-2026__eyebrow { margin-bottom: 8px !important; font-size: 10px; letter-spacing: 0.14em; }
  .wes-home-hero-2026__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .wes-home-hero-2026__actions a,
  .wes-home-hero-2026__actions .button { width: 100%; justify-content: center; }
  .wes-home-hero-2026__image-wrap { min-height: 240px; aspect-ratio: 4 / 3; border-radius: 24px; }
}


/* === Ported home sections (ticker · event duo · about band · artist strip · membership · gallery) === */
/* ============================================================
   2. TICKER — Eleganterer Lauftext mit Orange-Punkten
   ============================================================ */

.wb-home .wes-ticker {
  background: var(--wb-green-2, #1F4D2A) !important;
  padding: 13px 0 !important;
  overflow: hidden;
}

.wb-home .wes-ticker__track {
  display: flex;
  gap: 0;
  /* animation kommt vom Plugin */
}

.wb-home .wes-ticker__item {
  font-size: 11.5px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.78) !important;
  font-weight: 400 !important;
}

/* Trennzeichen: Orange-Punkt statt Standard-Strich */
.wb-home .wes-ticker__sep,
.wb-home .wes-ticker__dot,
.wb-home .wes-ticker__item::after {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--wb-accent);
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 16px;
  flex-shrink: 0;
}

/* Hover: pausiert */
.wb-home .wes-ticker:hover .wes-ticker__track {
  animation-play-state: paused;
}


/* ============================================================
   3. EVENT DUO — Karten mit Hover-Lift, klarer Hierarchie
   ============================================================ */

/* Sektions-Label Stil */
.wb-home .wes-home-event-duo .wes-section-label,
.wb-home .wes-home-event-duo .wes-kicker {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wb-accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wb-home .wes-home-event-duo .wes-section-label::before,
.wb-home .wes-home-event-duo .wes-kicker::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--wb-accent);
}

/* Sektions-Titel */
.wb-home .wes-home-event-duo .wes-section-title,
.wb-home .wes-home-event-duo h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(36px, 3.8vw, 60px) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
  color: var(--wb-text);
  margin-bottom: 0;
}

/* Haupt-Event-Card */
.wb-home .wes-home-event-duo .wes-event-card--main,
.wb-home .wes-home-event-duo .wes-card--featured {
  border-radius: var(--wb-radius-xl) !important;
  overflow: hidden;
  box-shadow: var(--wb-shadow-m) !important;
  transition: transform var(--wb-dur-3) var(--wb-ease-out), box-shadow var(--wb-dur-3) var(--wb-ease-out) !important;
  background: white !important;
}
.wb-home .wes-home-event-duo .wes-event-card--main:hover,
.wb-home .wes-home-event-duo .wes-card--featured:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--wb-shadow-l) !important;
}

/* Bild-Zoom beim Hover */
.wb-home .wes-home-event-duo .wes-event-card--main .wes-card__img,
.wb-home .wes-home-event-duo .wes-card--featured img {
  transition: transform .7s var(--wb-ease-out) !important;
}
.wb-home .wes-home-event-duo .wes-event-card--main:hover .wes-card__img,
.wb-home .wes-home-event-duo .wes-card--featured:hover img {
  transform: scale(1.04) !important;
}

/* Event-Tag (Pill) */
.wb-home .wes-home-event-duo .wes-event-tag,
.wb-home .wes-home-event-duo .wes-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  background: var(--wb-accent) !important;
  color: white !important;
  border-radius: 100px !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border: none !important;
  margin-bottom: 12px !important;
}
.wb-home .wes-home-event-duo .wes-event-tag--running,
.wb-home .wes-home-event-duo .wes-tag--running {
  background: var(--wb-green) !important;
}
.wb-home .wes-home-event-duo .wes-event-tag--past,
.wb-home .wes-home-event-duo .wes-tag--past {
  background: var(--wb-muted) !important;
}

/* Event-Titel in Serif */
.wb-home .wes-home-event-duo .wes-card__title,
.wb-home .wes-home-event-duo .wes-event-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(22px, 2.2vw, 34px) !important;
  font-weight: 300 !important;
  line-height: 1.15 !important;
  color: var(--wb-text);
}

/* CTA-Button: Black Pill */
.wb-home .wes-home-event-duo .wes-card__cta,
.wb-home .wes-home-event-duo .wes-event-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  background: var(--wb-text) !important;
  color: white !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  letter-spacing: .05em !important;
  text-decoration: none !important;
  border: none !important;
  background-image: none !important;
  box-shadow: none !important;
  margin-top: 20px !important;
  transition: background var(--wb-dur-2) var(--wb-ease-out), gap var(--wb-dur-2) var(--wb-ease-out) !important;
}
.wb-home .wes-home-event-duo .wes-card__cta:hover,
.wb-home .wes-home-event-duo .wes-event-cta:hover {
  background: var(--wb-green) !important;
  gap: 12px !important;
  transform: none !important;
}

/* Neben-Cards */
.wb-home .wes-home-event-duo .wes-event-card--side,
.wb-home .wes-home-event-duo .wes-card--secondary {
  border-radius: var(--wb-radius-l) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  transition: transform var(--wb-dur-3) var(--wb-ease-out), box-shadow var(--wb-dur-3) var(--wb-ease-out) !important;
  background: white !important;
}
.wb-home .wes-home-event-duo .wes-event-card--side:hover,
.wb-home .wes-home-event-duo .wes-card--secondary:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--wb-shadow-m) !important;
}

/* Ghost-Link auf Neben-Cards */
.wb-home .wes-home-event-duo .wes-card--secondary .wes-card__cta {
  background: transparent !important;
  color: var(--wb-green) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid var(--wb-green) !important;
  box-shadow: none !important;
}
.wb-home .wes-home-event-duo .wes-card--secondary .wes-card__cta:hover {
  background: transparent !important;
  border-color: var(--wb-accent) !important;
  color: var(--wb-accent) !important;
}


/* ============================================================
   4. ABOUT-BAND — Dunkelgrün, Serif-Titel, KEINE Architektur-Säule
   ============================================================ */

.wb-home .wes-home-about-band {
  background: var(--wb-green-2, #1F4D2A) !important;
  color: white !important;
  position: relative;
  overflow: hidden;
}

/* Atmosphärischer Hintergrundtext */
.wb-home .wes-home-about-band::after {
  content: '1923';
  position: absolute;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(120px, 15vw, 220px);
  font-weight: 300;
  color: rgba(255,255,255,.04);
  right: 40px;
  bottom: -20px;
  line-height: 1;
  pointer-events: none;
  letter-spacing: -.02em;
  z-index: 0;
}

.wb-home .wes-home-about-band .wes-about__inner,
.wb-home .wes-home-about-band .wes-about-inner {
  position: relative;
  z-index: 1;
}

/* Eyebrow */
.wb-home .wes-home-about-band .wes-about__eyebrow,
.wb-home .wes-home-about-band .wes-eyebrow {
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.45) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.wb-home .wes-home-about-band .wes-about__eyebrow::before,
.wb-home .wes-home-about-band .wes-eyebrow::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--wb-accent);
}

/* Haupttitel */
.wb-home .wes-home-about-band .wes-about__title,
.wb-home .wes-home-about-band h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(34px, 3.5vw, 58px) !important;
  font-weight: 300 !important;
  line-height: 1.14 !important;
  color: white !important;
  letter-spacing: -.01em !important;
  margin-bottom: 22px;
}
.wb-home .wes-home-about-band .wes-about__title em,
.wb-home .wes-home-about-band h2 em {
  font-style: italic;
  color: rgba(255,255,255,.55);
}

/* Fliesstext */
.wb-home .wes-home-about-band .wes-about__text,
.wb-home .wes-home-about-band p {
  color: rgba(255,255,255,.62) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  max-width: 420px;
  text-align: left !important;
  hyphens: none !important;
  text-justify: auto !important;
}

/* CTA-Link */
.wb-home .wes-home-about-band .wes-about__cta,
.wb-home .wes-home-about-band .wes-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: white !important;
  font-size: 13px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0 0 5px !important;
  border-bottom: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: border-color var(--wb-dur-2) var(--wb-ease-out), gap var(--wb-dur-2) var(--wb-ease-out) !important;
}
.wb-home .wes-home-about-band .wes-about__cta:hover,
.wb-home .wes-home-about-band .wes-btn:hover {
  border-color: var(--wb-accent) !important;
  gap: 14px !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Feature-Säulen: stil. Kacheln statt nebeneinander */
.wb-home .wes-home-about-band .wes-features,
.wb-home .wes-home-about-band .wes-about__features {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wb-home .wes-home-about-band .wes-feature,
.wb-home .wes-home-about-band .wes-about__feature {
  padding: 28px 36px;
  background: rgba(255,255,255,.05);
  border-left: 2px solid transparent;
  transition: background var(--wb-dur-3) var(--wb-ease-out), border-color var(--wb-dur-3) var(--wb-ease-out);
  cursor: default;
}
.wb-home .wes-home-about-band .wes-feature:hover,
.wb-home .wes-home-about-band .wes-about__feature:hover {
  background: rgba(255,255,255,.09);
  border-left-color: var(--wb-accent);
}

.wb-home .wes-home-about-band .wes-feature__title,
.wb-home .wes-home-about-band .wes-about__feature-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  color: white !important;
  margin-bottom: 5px;
}

.wb-home .wes-home-about-band .wes-feature__text,
.wb-home .wes-home-about-band .wes-about__feature-text {
  font-size: 13px !important;
  color: rgba(255,255,255,.45) !important;
  letter-spacing: .02em;
  text-align: left !important;
  hyphens: none !important;
}

/* Architektur-Säule verstecken — steht nicht mehr im Programm */
.wb-home .wes-home-about-band .wes-feature:nth-child(2),
.wb-home .wes-home-about-band .wes-about__feature:nth-child(2) {
  display: none;
}


/* ============================================================
   5. KÜNSTLER-STRIP — Porträt + grüner Name, echter Foto-Hover
   ============================================================ */

.wb-home .wes-home-artist-strip .wes-section-label,
.wb-home .wes-home-artist-strip .wes-kicker {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wb-accent);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.wb-home .wes-home-artist-strip .wes-section-label::before,
.wb-home .wes-home-artist-strip .wes-kicker::before {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--wb-accent);
}

.wb-home .wes-home-artist-strip h2,
.wb-home .wes-home-artist-strip .wes-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(36px, 3.8vw, 60px) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}

/* Artist-Card: klarer Box-Stil */
.wb-home .wes-home-artist-strip .wes-artist-strip-card,
.wb-home .wes-home-artist-strip .wes-artist-card {
  background: white !important;
  border-radius: var(--wb-radius-l) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  transition: transform var(--wb-dur-3) var(--wb-ease-out), box-shadow var(--wb-dur-3) var(--wb-ease-out) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
}
.wb-home .wes-home-artist-strip .wes-artist-strip-card:hover,
.wb-home .wes-home-artist-strip .wes-artist-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--wb-shadow-m) !important;
}

/* Foto-Wrap: aspect-ratio für Porträts */
.wb-home .wes-home-artist-strip .wes-artist-strip-card .wes-avatar-wrap,
.wb-home .wes-home-artist-strip .wes-artist-card .wes-avatar-wrap,
.wb-home .wes-home-artist-strip .wes-artist-strip-card .wes-photo-wrap {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.wb-home .wes-home-artist-strip .wes-artist-strip-card img,
.wb-home .wes-home-artist-strip .wes-artist-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .6s var(--wb-ease-out) !important;
  filter: grayscale(10%);
}
.wb-home .wes-home-artist-strip .wes-artist-strip-card:hover img,
.wb-home .wes-home-artist-strip .wes-artist-card:hover img {
  transform: scale(1.05) !important;
  filter: grayscale(0%);
}

/* Künstlername: grün, Serif */
.wb-home .wes-home-artist-strip .wes-artist-strip-card .wes-artist-name,
.wb-home .wes-home-artist-strip .wes-artist-card .wes-artist-name,
.wb-home .wes-home-artist-strip .wes-artist-strip-card .entry-title,
.wb-home .wes-home-artist-strip .wes-artist-card .entry-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--wb-green) !important;
  line-height: 1.25 !important;
  padding: 14px 16px 4px !important;
  background: transparent !important;
  text-align: left !important;
}

/* Disziplin-Label */
.wb-home .wes-home-artist-strip .wes-artist-strip-card .wes-artist-discipline,
.wb-home .wes-home-artist-strip .wes-artist-card .wes-disziplin {
  font-size: 11px !important;
  color: var(--wb-muted) !important;
  letter-spacing: .04em !important;
  padding: 0 16px 16px !important;
}

/* "Weitere Künstler" Karte: Grün */
.wb-home .wes-home-artist-strip .wes-artist-strip__more,
.wb-home .wes-home-artist-strip .wes-more-card {
  background: var(--wb-green) !important;
  border-radius: var(--wb-radius-l) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: background var(--wb-dur-3) var(--wb-ease-out) !important;
  aspect-ratio: 3 / 4;
}
.wb-home .wes-home-artist-strip .wes-artist-strip__more:hover,
.wb-home .wes-home-artist-strip .wes-more-card:hover {
  background: var(--wb-green-2, #1F4D2A) !important;
  transform: translateY(-4px) !important;
}

.wb-home .wes-home-artist-strip .wes-artist-strip__more-label,
.wb-home .wes-home-artist-strip .wes-more-card span {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  color: white !important;
  text-align: center;
}

.wb-home .wes-home-artist-strip .wes-artist-strip__more-arrow {
  color: var(--wb-accent);
  font-size: 22px;
  display: block;
  margin-top: 8px;
  text-align: center;
}


/* ============================================================
   6. MEMBERSHIP CARDS — Grün + Orange, Letter im Hintergrund
   ============================================================ */

.wb-home .wes-home-membership-cards h2,
.wb-home .wes-home-membership-cards .wes-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(36px, 3.8vw, 60px) !important;
  font-weight: 300 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
  color: var(--wb-text);
}

.wb-home .wes-home-membership-cards .wes-section-intro,
.wb-home .wes-home-membership-cards .wes-intro {
  color: var(--wb-muted);
  font-size: 15px;
}

/* Card-Grid Wrapper */
.wb-home .wes-home-membership-cards .wes-membership-cards,
.wb-home .wes-home-membership-cards .wes-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  border-radius: var(--wb-radius-xl);
  overflow: hidden;
  box-shadow: var(--wb-shadow-m);
}

/* Gemeinsam für beide Karten */
.wb-home .wes-home-membership-cards .wes-membership-card {
  padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 52px) clamp(40px, 5vw, 60px) !important;
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  border-radius: 0 !important;
  transition: filter var(--wb-dur-2) var(--wb-ease-out) !important;
  box-shadow: none !important;
}
.wb-home .wes-home-membership-cards .wes-membership-card:hover {
  filter: brightness(1.06) !important;
  transform: none !important;
}

/* Künstler-Mitglied: Grün */
.wb-home .wes-home-membership-cards .wes-membership-card--artist {
  background: var(--wb-green) !important;
}

/* Förder-Mitglied: Orange */
.wb-home .wes-home-membership-cards .wes-membership-card--supporter,
.wb-home .wes-home-membership-cards .wes-membership-card--forder {
  background: var(--wb-accent) !important;
}

/* Card-Label */
.wb-home .wes-home-membership-cards .wes-membership-card .wes-card-label {
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.55) !important;
  margin-bottom: 14px;
  display: block;
}

/* Card-Titel */
.wb-home .wes-home-membership-cards .wes-membership-card h3,
.wb-home .wes-home-membership-cards .wes-membership-card .wes-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: clamp(26px, 2.5vw, 36px) !important;
  font-weight: 300 !important;
  color: white !important;
  line-height: 1.15 !important;
  margin-bottom: 12px;
}

/* Card-Text */
.wb-home .wes-home-membership-cards .wes-membership-card p,
.wb-home .wes-home-membership-cards .wes-membership-card .wes-card-text {
  font-size: 14px !important;
  color: rgba(255,255,255,.70) !important;
  line-height: 1.65 !important;
  margin-bottom: 36px;
  max-width: 300px;
  text-align: left !important;
  hyphens: none !important;
}

/* CTA-Link auf Card */
.wb-home .wes-home-membership-cards .wes-membership-card .wes-card-cta,
.wb-home .wes-home-membership-cards .wes-membership-card .wes-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: white !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 0 0 4px !important;
  border-bottom: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: gap var(--wb-dur-2) var(--wb-ease-out), border-color var(--wb-dur-2) var(--wb-ease-out) !important;
}
.wb-home .wes-home-membership-cards .wes-membership-card .wes-card-cta:hover,
.wb-home .wes-home-membership-cards .wes-membership-card .wes-btn:hover {
  gap: 14px !important;
  border-color: rgba(255,255,255,.75) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Hintergrund-Buchstabe (dekorativ) */
.wb-home .wes-home-membership-cards .wes-membership-card::after {
  content: attr(data-bg-letter);
  position: absolute;
  right: -10px;
  bottom: -20px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 180px;
  font-weight: 300;
  color: rgba(255,255,255,.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}


/* ============================================================
   7. GALERIE (wes_random_artist_gallery) — Mosaic mit Künstlernamen
   ============================================================ */

/* Galerie-Sektion Hintergrund: schwarz */
.wb-home .wes-random-artist-gallery,
.wb-home + .wp-block-shortcode .wes-random-artist-gallery,
body.home .wes-random-artist-gallery {
  background: #111110 !important;
  padding-bottom: 4px;
}

/* Gallery-Header */
.wb-home .wes-random-artist-gallery .wes-gallery-header,
body.home .wes-random-artist-gallery .wes-gallery-header {
  padding: 48px 48px 28px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wb-home .wes-random-artist-gallery .wes-gallery-label,
body.home .wes-random-artist-gallery .wes-gallery-label {
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.35) !important;
}

.wb-home .wes-random-artist-gallery .wes-gallery-more,
body.home .wes-random-artist-gallery .wes-gallery-more {
  font-size: 12px !important;
  color: rgba(255,255,255,.5) !important;
  letter-spacing: .06em !important;
  text-decoration: none !important;
  transition: color var(--wb-dur-2) var(--wb-ease-out) !important;
}
.wb-home .wes-random-artist-gallery .wes-gallery-more:hover,
body.home .wes-random-artist-gallery .wes-gallery-more:hover {
  color: white !important;
}

/* Galerie-Grid */
.wb-home .wes-random-artist-gallery .wes-gallery-grid,
body.home .wes-random-artist-gallery .wes-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 4px !important;
  padding: 0 4px 0 !important;
}

.wb-home .wes-random-artist-gallery .wes-gallery-item,
body.home .wes-random-artist-gallery .wes-gallery-item {
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: #222;
}

.wb-home .wes-random-artist-gallery .wes-gallery-item img,
body.home .wes-random-artist-gallery .wes-gallery-item img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block;
  opacity: .80;
  filter: grayscale(15%);
  transition: opacity var(--wb-dur-3) var(--wb-ease-out), transform .5s var(--wb-ease-out), filter var(--wb-dur-3) var(--wb-ease-out) !important;
}
.wb-home .wes-random-artist-gallery .wes-gallery-item:hover img,
body.home .wes-random-artist-gallery .wes-gallery-item:hover img {
  opacity: 1 !important;
  transform: scale(1.04) !important;
  filter: grayscale(0%) !important;
}

/* Künstlername unter Bild */
.wb-home .wes-random-artist-gallery .wes-gallery-item .wes-artist-name,
body.home .wes-random-artist-gallery .wes-gallery-item .wes-artist-name {
  display: block;
  padding: 10px 14px 14px !important;
  background: #111110 !important;
}
.wb-home .wes-random-artist-gallery .wes-gallery-item .wes-artist-name a,
body.home .wes-random-artist-gallery .wes-gallery-item .wes-artist-name a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 15px !important;
  color: var(--wb-accent) !important;
  text-decoration: none !important;
  transition: color var(--wb-dur-2) var(--wb-ease-out) !important;
}
.wb-home .wes-random-artist-gallery .wes-gallery-item .wes-artist-name a:hover,
body.home .wes-random-artist-gallery .wes-gallery-item .wes-artist-name a:hover {
  color: white !important;
}



/* === Responsive + CSS-only hover effects (cleaned: old hero & wb32 reveal removed) === */

/* Tablet */
@media (max-width: 1024px) {
  .wb-home .wes-home-about-band::after { display: none; }
  .wb-home .wes-home-membership-cards .wes-membership-cards,
  .wb-home .wes-home-membership-cards .wes-cards { grid-template-columns: 1fr !important; }
  .wb-home .wes-random-artist-gallery .wes-gallery-grid,
  body.home .wes-random-artist-gallery .wes-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile */
@media (max-width: 640px) {
  .wb-home .wes-home-about-band .wes-feature,
  .wb-home .wes-home-about-band .wes-about__feature { padding: 22px 24px; }
  .wb-home .wes-home-membership-cards .wes-membership-card { padding: 36px 28px 40px !important; }
  .wb-home .wes-random-artist-gallery .wes-gallery-header,
  body.home .wes-random-artist-gallery .wes-gallery-header { padding: 32px 24px 20px !important; }
}

/* "seit 1865" as a quiet background mark in the about band */
.wb-home .wes-home-about-band::after,
.wes-home-about-band::after { content: '1865' !important; }

/* Artist name turns warm on hover */
.wb-home .wes-home-artist-strip .wes-artist-strip-card:hover .wes-artist-name,
.wb-home .wes-home-artist-strip .wes-artist-strip-card:hover .entry-title,
.wb-home .wes-home-artist-strip .wes-artist-card:hover .wes-artist-name,
.wb-home .wes-home-artist-strip .wes-artist-card:hover .entry-title {
  color: var(--wb-accent, #C8621A) !important;
  transition: color 0.2s ease !important;
}

/* Event card overlay gradient on hover */
.wb-home .wes-home-event-duo .wes-card--featured,
.wb-home .wes-home-event-duo .wes-event-card--main { position: relative; overflow: hidden; }
.wb-home .wes-home-event-duo .wes-card--featured::after,
.wb-home .wes-home-event-duo .wes-event-card--main::after {
  content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(31,77,42,.5) 0%, transparent 50%);
  transition: opacity 0.4s ease;
}
.wb-home .wes-home-event-duo .wes-card--featured:hover::after,
.wb-home .wes-home-event-duo .wes-event-card--main:hover::after { opacity: 1; }

/* Gallery image hover */
.wb-home .wes-random-artist-gallery .wes-gallery-item img,
body.home .wes-random-artist-gallery .wes-gallery-item img {
  transition: transform 0.5s cubic-bezier(.16,1,.3,1), filter 0.4s ease, opacity 0.4s ease !important;
}
.wb-home .wes-random-artist-gallery .wes-gallery-item:hover img,
body.home .wes-random-artist-gallery .wes-gallery-item:hover img {
  filter: grayscale(0%) brightness(1.04) !important; opacity: 1 !important; transform: scale(1.05) !important;
}

/* About-band feature hover nudge — transform statt padding-left:
   Padding-Animation erzeugt Text-Reflow bei jedem Hover (unruhig, teurer
   Layout-Pass). translateX läuft auf dem Compositor: gleiche Geste, ruhig. */
.wb-home .wes-home-about-band .wes-feature,
.wb-home .wes-home-about-band .wes-about__feature {
  transition: background 0.3s ease, border-left-color 0.3s ease, transform 0.3s var(--wb-ease) !important;
}
.wb-home .wes-home-about-band .wes-feature:hover,
.wb-home .wes-home-about-band .wes-about__feature:hover { transform: translateX(10px); }
@media (prefers-reduced-motion: reduce) {
  .wb-home .wes-home-about-band .wes-feature:hover,
  .wb-home .wes-home-about-band .wes-about__feature:hover { transform: none; }
}

/* ---- motion.css ---- */
/* ===========================================================================
   Motion — scroll reveals + tasteful micro-interactions.
   Progressive enhancement: reveal styles only apply when JS added .wb-js to
   <html>. Everything is disabled under prefers-reduced-motion.
   =========================================================================== */

/* Initial hidden state ONLY when JS is present (no-JS users see content). */
html.wb-js .wb-reveal {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
html.wb-js .wb-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--wb-dur-slow) var(--wb-ease),
              transform var(--wb-dur-slow) var(--wb-ease);
}

/* Staggered children (e.g. grids). data-wb-stagger sets --i per child in JS. */
html.wb-js .wb-stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* One-time, well-orchestrated page-load reveal for the hero. */
html.wb-js .wb-hero-in { animation: wb-rise var(--wb-dur-slow) var(--wb-ease) both; }
html.wb-js .wb-hero-in--2 { animation-delay: 90ms; }
html.wb-js .wb-hero-in--3 { animation-delay: 180ms; }

@keyframes wb-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* Ticker / marquee pause on hover (used on the home news ticker). */
.wb-ticker:hover .wb-ticker__track { animation-play-state: paused; }

/* Respect the user. Kill all of it. */
@media (prefers-reduced-motion: reduce) {
  html.wb-js .wb-reveal,
  html.wb-js .wb-reveal.is-in,
  html.wb-js .wb-hero-in {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .wb-shell * { scroll-behavior: auto !important; }
}