/*
Theme Name:  Angelverein Lößnig
Theme URI:   https://github.com/kevkowitzsch/angelverein-loesnig
Author:      Fischereiverein Leipzig-Lößnig e.V.
Author URI:  https://fv-leipzig-loessnig.de
Description: Modernes, responsives WordPress-Theme für den Fischereiverein Leipzig-Lößnig e.V. – mit Vereinsveranstaltungen, Geburtstagsgrüßen, Gewässer-Infos und einem schönen Blog. DSGVO-freundlich: keine externen Fonts oder Skripte.
Version:     1.21.1
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: angelverein-loessnig
Tags:        blog, custom-logo, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* =========================================================
   1. Design-Token (CSS Custom Properties)
   ========================================================= */
:root {
  /* Farbwelt: Tannengrün, frisches Wiesengrün, Seegrün */
  --c-deep:       #0d3527;   /* tiefes Tannengrün */
  --c-primary:    #1a8f52;   /* frisches Vereinsgrün */
  --c-primary-dk: #136b3d;
  --c-teal:       #2e8f83;   /* Seegrün-Türkis */
  --c-accent:     #4cae6e;   /* helles Blattgrün für Badges */
  --c-accent-dk:  #2f7d4c;
  --c-mint:       #cdeed7;   /* helles Mint für Akzente auf Dunkel */
  --c-sand:       #ffffff;   /* Seiten-Hintergrund: reines Weiß */
  --c-surface:    #ffffff;
  --c-alt:        #f2f8f4;   /* dezente grünweiße Wechselfläche */
  --c-ink:        #1b2b23;
  --c-ink-soft:   #55665c;
  --c-line:       #e2eae4;

  --grad-water: linear-gradient(160deg, #0c3323 0%, #157a45 55%, #2e8f83 100%);

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Times New Roman", serif;

  --fs-sm:   clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-md:   clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-lg:   clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --fs-xl:   clamp(2rem, 1.6rem + 2vw, 3.2rem);

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 2px 6px rgba(13, 53, 39, 0.05), 0 12px 32px -12px rgba(13, 53, 39, 0.16);
  --shadow-lift: 0 4px 10px rgba(13, 53, 39, 0.07), 0 24px 48px -16px rgba(13, 53, 39, 0.25);
  --wrap: 1320px;
  --wrap-narrow: 960px;
  --wrap-content: 1200px;
  --gap: clamp(1rem, 2.5vw, 2rem);
}

/* =========================================================
   2. Basis
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Harte Absicherung gegen horizontales Springen/Scrollen (v. a. mobil) */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-ink);
  background: var(--c-sand);
  -webkit-font-smoothing: antialiased;
}

/* Offenes Mobilmenü: Seite dahinter nicht mitscrollen lassen */
@media (max-width: 880px) {
  body.nav-open { overflow: hidden; height: 100dvh; }
}

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

a { color: var(--c-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-primary-dk); }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 750;
  line-height: 1.2;
  color: var(--c-deep);
  margin: 0 0 0.6em;
  letter-spacing: -0.015em;
}
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.wrap--content { max-width: var(--wrap-content); }

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px; width: 1px;
  overflow: hidden; position: absolute !important;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-deep); color: #fff; padding: 0.6rem 1rem; z-index: 999;
}
.skip-link:focus { left: 0; }

/* =========================================================
   3. Header & Navigation
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 76px;
}
.site-branding { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.site-branding a { text-decoration: none; }
.site-logo-badge {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--grad-water);
  color: #fff;
  box-shadow: var(--shadow);
}
.site-logo-badge svg { width: 26px; height: 26px; }
/* Eigenes Logo (z. B. Vereinswappen): nur skalieren, nicht beschneiden
   oder abrunden – Wappenform und Transparenz bleiben erhalten. */
.custom-logo { width: auto; height: 52px; object-fit: contain; }
.site-title {
  font-size: 1.08rem; font-weight: 800; color: var(--c-deep);
  margin: 0; line-height: 1.15; letter-spacing: -0.01em;
}
.site-description {
  margin: 0; font-size: 0.76rem; color: var(--c-ink-soft);
  letter-spacing: 0.04em; text-transform: uppercase;
}

.main-nav { margin-left: auto; }
.main-nav ul { list-style: none; margin: 0; padding: 0; }
.main-nav > ul { display: flex; gap: 0.25rem; flex-wrap: wrap; justify-content: flex-end; }
.main-nav a {
  display: block; padding: 0.55rem 0.85rem;
  font-size: 0.95rem; font-weight: 600; color: var(--c-ink);
  text-decoration: none; border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-nav a:hover { background: rgba(26, 143, 82, 0.10); color: var(--c-primary-dk); }
/* Aktive Seite: grüne Pille NUR auf oberster Menüebene … */
.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current_page_item > a,
.main-nav > ul > li.current-menu-ancestor > a,
.main-nav > ul > li.current-page-ancestor > a { background: var(--c-primary); color: #fff; }

/* … im Mega-Panel bekommt die aktive Karte eine gut lesbare Markierung */
.mega-card.current-menu-item > a,
.mega-card.current_page_item > a {
  background: var(--c-alt);
  border-color: rgba(26, 143, 82, 0.35);
}
.mega-card.current-menu-item .mega-card__title,
.mega-card.current_page_item .mega-card__title { color: var(--c-primary); }
.mega-card.current-menu-item .mega-card__media,
.mega-card.current_page_item .mega-card__media { background: var(--c-primary); color: #fff; }

.nav-toggle {
  display: none;
  background: none; border: 2px solid var(--c-deep); border-radius: var(--radius-sm);
  padding: 0.45rem 0.7rem; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--c-deep);
}

/* ---------- Mega-Menü ---------- */
.main-nav > ul > li { display: flex; align-items: center; }
.nav-chevron { display: inline-flex; margin-left: 0.25rem; vertical-align: -2px; }
.nav-chevron svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.has-mega:hover > a .nav-chevron svg,
.has-mega:focus-within > a .nav-chevron svg,
.has-mega.is-open > a .nav-chevron svg { transform: rotate(180deg); }

.submenu-toggle { display: none; }

.mega-panel {
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%) translateY(10px);
  width: min(760px, calc(100% - 2.5rem));
  background: #fff;
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-primary);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 1.1rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease 0.08s, transform 0.2s ease 0.08s, visibility 0.2s ease 0.08s;
  z-index: 70;
}
.has-mega:hover .mega-panel,
.has-mega:focus-within .mega-panel,
.has-mega.is-open .mega-panel {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
/* Unsichtbare Hover-Brücke zwischen Menüpunkt und Panel */
.mega-panel::before {
  content: ""; position: absolute;
  top: -18px; left: 0; right: 0; height: 18px;
}
.mega-panel__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem;
  align-items: stretch;
}
.mega-panel__grid > .mega-card { display: flex; }
.mega-panel__grid > .mega-card > a { flex: 1; }
.mega-card a {
  display: flex; gap: 0.95rem; align-items: center;
  padding: 0.8rem 0.9rem; border-radius: var(--radius-sm);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.mega-card a:hover {
  background: var(--c-alt);
  border-color: var(--c-line);
  transform: translateX(3px);
}
.mega-card__media {
  flex: none; width: 56px; height: 56px;
  border-radius: 14px; overflow: hidden;
  display: grid; place-items: center;
  background: rgba(26, 143, 82, 0.1); color: var(--c-primary);
}
.mega-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mega-card__media--icon svg { width: 27px; height: 27px; }
.mega-card__title { display: block; font-weight: 750; color: var(--c-deep); font-size: 0.97rem; }
.mega-card__desc { display: block; font-size: 0.82rem; color: var(--c-ink-soft); line-height: 1.45; margin-top: 0.15rem; }
.mega-card a:hover .mega-card__title { color: var(--c-primary); }
@media (min-width: 881px) {
  .mega-panel__grid > .mega-card:only-child { min-width: 320px; }
}

@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: 0.4rem; }
  .main-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-lift);
    padding: 0.75rem var(--gap) calc(1.25rem + env(safe-area-inset-bottom, 0px));
    /* Sichtbarer Viewport minus tatsächlicher Header-Höhe (JS setzt
       --avl-header-h). 100dvh statt 100vh: auf iOS zählt 100vh die
       eingeblendete Browserleiste mit – das Menü lief unten aus dem Bild. */
    max-height: calc(100vh - var(--avl-header-h, 76px));
    max-height: calc(100dvh - var(--avl-header-h, 76px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav.is-open { display: block; }
  .main-nav > ul { flex-direction: column; gap: 0.15rem; }
  .main-nav > ul > li { display: block; }
  .main-nav a { border-radius: var(--radius-sm); padding: 0.7rem 0.9rem; }

  /* Mega-Menü als Accordion */
  .main-nav .has-mega { position: relative; }
  .main-nav .has-mega > a { padding-right: 3rem; }
  .nav-chevron { display: none; }
  .submenu-toggle {
    display: grid; place-items: center;
    position: absolute; right: 0.3rem; top: 0.35rem;
    width: 40px; height: 40px;
    background: none; border: none; cursor: pointer;
    color: var(--c-deep); border-radius: var(--radius-sm);
  }
  .submenu-toggle svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
  .has-mega.is-open > .submenu-toggle svg { transform: rotate(180deg); }
  .mega-panel {
    position: static; transform: none;
    width: auto; opacity: 1; visibility: hidden; pointer-events: auto;
    display: none;
    border: none; box-shadow: none; padding: 0 0 0.5rem 0.75rem;
    transition: none;
  }
  .has-mega.is-open .mega-panel { display: block; visibility: visible; }
  /* WICHTIG: alle drei Zustände zurücksetzen – die Desktop-Regel
     verschiebt das Panel per translateX(-50%). Vorher war nur :hover
     abgedeckt, wodurch offene/fokussierte Panels beim Wechseln
     zwischen Menüs seitlich aus dem Bild sprangen. */
  .has-mega:hover .mega-panel,
  .has-mega:focus-within .mega-panel,
  .has-mega.is-open .mega-panel { transform: none; }
  .mega-panel__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   4. Hero (Startseite)
   ========================================================= */
.hero {
  position: relative;
  background: var(--grad-water);
  color: #fff;
  overflow: hidden;
}
.hero__inner {
  position: relative; z-index: 2;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(5rem, 11vw, 8.5rem);
  max-width: 720px;
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-mint);
  margin-bottom: 1rem;
}
.hero h1 { color: #fff; margin-bottom: 0.5em; }
.hero p { font-size: var(--fs-md); color: rgba(255, 255, 255, 0.88); max-width: 56ch; margin-top: 0; }
.hero__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.8rem; }

.hero__rings {
  position: absolute; right: -8%; top: -20%;
  width: 620px; height: 620px; z-index: 1; opacity: 0.5; pointer-events: none;
}
.hero__wave {
  position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 2;
  line-height: 0;
}
.hero__wave svg { width: 100%; height: clamp(40px, 7vw, 90px); display: block; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 700; font-size: 0.98rem;
  border-radius: 999px; text-decoration: none;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn--primary { background: var(--c-cta, var(--c-primary)); color: #fff; }
.btn--primary:hover { background: var(--c-cta-dk, var(--c-primary-dk)); color: #fff; }
.btn--ghost { border-color: rgba(255, 255, 255, 0.65); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn--outline { border-color: var(--c-primary); color: var(--c-primary); }
.btn--outline:hover { background: var(--c-primary); color: #fff; }

/* Auf dunklen Flächen (Hero, CTA-Panels) wird der Haupt-Button weiß –
   das wirkt edel und hebt sich vom Grünverlauf ab. */
.hero .btn--primary,
.cta-panel .btn--primary,
.cta-inline .btn--primary,
.youth-section .btn--primary {
  background: #fff; color: var(--c-deep);
}
.hero .btn--primary:hover,
.cta-panel .btn--primary:hover,
.cta-inline .btn--primary:hover,
.youth-section .btn--primary:hover {
  background: var(--c-mint); color: var(--c-deep);
}

/* Hero mit eigenem Hintergrundbild (Customizer) */
.hero--image {
  background-size: cover;
  background-position: center;
}
.hero--image::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(12, 51, 35, 0.88) 0%, rgba(21, 122, 69, 0.70) 55%, rgba(46, 143, 131, 0.55) 100%);
}
.hero--image .wrap { position: relative; z-index: 2; }

/* Header-CTA */
.header-actions { display: flex; align-items: center; gap: 0.7rem; flex: none; }
.btn--header { padding: 0.5rem 1.1rem; font-size: 0.88rem; }
.btn--header svg { width: 15px; height: 15px; }
@media (max-width: 560px) { .btn--header { display: none; } }

/* =========================================================
   5. Sektionen der Startseite
   ========================================================= */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--alt { background: var(--c-alt); }
.section--deep { background: var(--c-deep); color: rgba(255,255,255,0.88); }
.section--deep h2 { color: #fff; }

.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.section__head h2 { margin: 0; }
.section__kicker {
  display: block; font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-teal); margin-bottom: 0.45rem;
}
.section__more { font-weight: 700; white-space: nowrap; }

.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

/* =========================================================
   6. Karten (Beiträge, Veranstaltungen, Geburtstage)
   ========================================================= */
.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Ganze Karte klickbar: der Titellink deckt unsichtbar die komplette
   Karte ab (Termine, Beiträge, Geburtstage). */
.card__title a::after,
.event-card__topline h3 a::after,
.bday-card__name a::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
}
.bday-card__name a { color: inherit; text-decoration: none; }
.bday-card__name a:hover { color: var(--c-primary); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--grad-water); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card__media img { transform: scale(1.04); }
.card__media--placeholder { display: grid; place-items: center; color: rgba(255,255,255,0.7); }
.card__media--placeholder svg { width: 52px; height: 52px; }
.card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card__meta {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--c-ink-soft);
}
.card__title { font-size: 1.18rem; margin: 0; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--c-primary); }
.card__excerpt { margin: 0; color: var(--c-ink-soft); font-size: 0.96rem; }
.card__footer { margin-top: auto; padding-top: 0.6rem; }

.badge {
  display: inline-block; padding: 0.18rem 0.7rem;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px;
  background: rgba(46, 143, 131, 0.14); color: var(--c-teal);
}
.badge--accent { background: rgba(76, 174, 110, 0.16); color: var(--c-accent-dk); }
.badge--blue { background: rgba(26, 143, 82, 0.12); color: var(--c-primary); }

/* Veranstaltungszeile: Datums-Kachel | Inhalt | Pfeil, alles ausgerichtet */
.event-list { display: grid; gap: 0.8rem; }
.event-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.05rem 1.4rem 1.05rem 1.05rem;
}
.event-card:hover { transform: translateY(-2px); }
.event-card__date {
  width: 88px;
  background: var(--grad-water); color: #fff;
  border-radius: var(--radius-sm);
  text-align: center; padding: 0.6rem 0.3rem 0.7rem;
  box-shadow: var(--shadow);
}
.event-card__day { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.05; }
.event-card__month { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
.event-card__year { display: block; font-size: 0.72rem; opacity: 0.75; }
.event-card__topline { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.event-card__topline h3 { margin: 0; font-size: 1.14rem; }
.event-card__topline h3 a { color: inherit; text-decoration: none; }
.event-card__topline h3 a:hover { color: var(--c-primary); }
.event-card__detail {
  display: flex; gap: 0.45rem; flex-wrap: wrap;
  margin: 0.5rem 0 0;
}
.event-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.22rem 0.7rem;
  background: var(--c-alt);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--c-ink-soft);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.event-chip svg { width: 13px; height: 13px; flex: none; color: var(--c-primary); }
.event-card__arrow {
  color: var(--c-primary); opacity: 0.35;
  transform: rotate(-90deg);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.event-card__arrow svg { width: 20px; height: 20px; display: block; }
.event-card:hover .event-card__arrow { opacity: 1; transform: rotate(-90deg) translateY(4px); }
.event-card--past { opacity: 0.6; }
.event-card--past .event-card__date { background: var(--c-ink-soft); }
.event-card--past:hover { opacity: 0.85; }

/* Monats-Überschriften im Terminarchiv */
.event-month {
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.85rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-primary);
  margin: 2.4rem 0 1rem;
}
.event-month::after {
  content: ""; flex: 1; height: 1px;
  background: var(--c-line);
}
.event-month--past { color: var(--c-ink-soft); }

@media (max-width: 640px) {
  .event-card { grid-template-columns: 72px minmax(0, 1fr); gap: 0.9rem; padding: 0.9rem; }
  .event-card__date { width: 72px; }
  .event-card__arrow { display: none; }
}

/* Geburtstags-Karte */
.bday-card {
  text-align: center; padding: 1.6rem 1.2rem 1.5rem;
  position: relative;
}
.bday-card__icon {
  width: 56px; height: 56px; margin: 0 auto 0.8rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(76, 174, 110, 0.16); color: var(--c-accent-dk);
}
.bday-card__icon svg { width: 30px; height: 30px; }
.bday-card__name { font-size: 1.15rem; margin-bottom: 0.15rem; }
.bday-card__age { font-size: 0.95rem; color: var(--c-ink-soft); margin: 0; }
.bday-card__date { font-size: var(--fs-sm); color: var(--c-teal); font-weight: 700; margin: 0.3rem 0 0; }
.bday-card__wish { font-size: 0.9rem; color: var(--c-ink-soft); font-style: italic; margin: 0.6rem 0 0; }

/* Gewässer-Teaser („Unser Revier“) */
.lake-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 800px) { .lake-feature { grid-template-columns: 1fr; } }

/* Fakten als saubere Kacheln im 2er-Raster */
.lake-facts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem; margin: 1.4rem 0 0;
}
@media (max-width: 560px) { .lake-facts { grid-template-columns: 1fr; } }
.lake-facts__item {
  background: var(--c-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.95rem;
}
.lake-facts__item dt {
  font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--c-primary);
}
.lake-facts__item dd { margin: 0.15rem 0 0; font-size: 0.95rem; color: var(--c-ink); font-weight: 600; }

/* Foto vom Silbersee (Customizer) – sonst die Grafik */
.lake-feature__photo {
  margin: 0;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lift);
  position: relative;
}
.lake-feature__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(13, 53, 39, 0.35) 100%);
  pointer-events: none;
}
.lake-feature__photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.lake-feature__visual {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lift);
  background: var(--grad-water); min-height: 300px;
  display: grid; place-items: center; color: rgba(255,255,255,0.85);
}
.lake-feature__visual svg { width: 60%; max-width: 300px; height: auto; }

/* Mitglied-werden-CTA */
.cta-panel {
  background: var(--grad-water);
  border-radius: var(--radius);
  color: #fff;
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: 1.4fr auto; gap: 1.5rem; align-items: center;
  box-shadow: var(--shadow-lift);
}
@media (max-width: 720px) { .cta-panel { grid-template-columns: 1fr; } }
.cta-panel h2 { color: #fff; margin-bottom: 0.3em; }
.cta-panel p { margin: 0; color: rgba(255,255,255,0.85); }

/* Jugend-Sektion */
.youth-section .section__kicker--light { color: #7fd6c9; }
.youth-section .section__more--light { color: var(--c-mint); }
.youth-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.youth-card:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-4px); }
.youth-card h3 { color: #fff; margin-bottom: 0.4rem; font-size: 1.12rem; }
.youth-card p { margin: 0; color: rgba(255, 255, 255, 0.78); font-size: 0.96rem; }
.youth-card__icon {
  width: 52px; height: 52px; margin-bottom: 0.9rem;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(205, 238, 215, 0.18); color: var(--c-mint);
}
.youth-card__icon svg { width: 28px; height: 28px; }
.youth-section__cta { margin: 2.2rem 0 0; text-align: center; }

/* =========================================================
   7. Blog / Archive / Einzelansichten
   ========================================================= */
/* Kompakter Seitenkopf: wenig Höhe, feine Wasserring-Akzente */
.page-hero {
  background: var(--grad-water); color: #fff;
  padding-block: clamp(1.9rem, 4vw, 3.2rem);
  position: relative; overflow: hidden;
  text-align: center;
}
.page-hero::before,
.page-hero::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.page-hero::before { width: 250px; height: 250px; right: -70px; top: -110px; }
.page-hero::after { width: 140px; height: 140px; right: 60px; top: -30px; border-color: rgba(255, 255, 255, 0.22); }
.page-hero h1 {
  color: #fff; margin: 0;
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.3rem);
}
.page-hero__desc {
  color: rgba(255, 255, 255, 0.82);
  margin: 0.55rem auto 0; max-width: 62ch;
  font-size: 0.95rem;
}

/* Breadcrumbs als dezente Pille, mittig über der Überschrift */
.page-hero .breadcrumbs,
.post-hero .breadcrumbs {
  display: flex; width: fit-content; align-items: center; flex-wrap: wrap; justify-content: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.28rem 1rem;
  font-size: 0.78rem; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 auto 0.9rem;
}
.page-hero .breadcrumbs a,
.post-hero .breadcrumbs a { color: #fff; text-decoration: none; }
.page-hero .breadcrumbs a:hover,
.post-hero .breadcrumbs a:hover { color: var(--c-mint); }
.breadcrumbs__sep { opacity: 0.55; }
.breadcrumbs__current { color: rgba(255, 255, 255, 0.75); }

.content-area { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

/* Beitragskopf (Einzelbeitrag) – kompakt, mit Platz für das
   überlappende Beitragsbild und die Welle */
.post-hero {
  position: relative;
  background: var(--grad-water); color: #fff;
  padding-block: clamp(1.9rem, 4vw, 3.1rem) clamp(3rem, 6vw, 4.4rem);
  overflow: hidden;
  text-align: center;
}
.post-hero::before {
  content: ""; position: absolute; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  width: 250px; height: 250px; right: -70px; top: -110px;
  pointer-events: none;
}
.post-hero h1 {
  color: #fff; margin: 0.5rem auto 0.8rem; max-width: 28ch;
  font-size: clamp(1.55rem, 1.2rem + 1.8vw, 2.45rem);
}
.post-hero .hero__wave svg { height: clamp(24px, 4.5vw, 52px); }
.post-hero__meta {
  display: flex; gap: 1.3rem; flex-wrap: wrap; justify-content: center;
  font-size: var(--fs-sm); color: rgba(255,255,255,0.85);
}
.post-hero__meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.post-hero__meta svg { width: 15px; height: 15px; color: var(--c-mint); }
.badge--onDark { background: rgba(255,255,255,0.16); color: var(--c-mint); text-decoration: none; margin-inline: 0.2rem; }

.content-area--overlap { padding-top: 0; margin-top: calc(-1 * clamp(2.2rem, 5vw, 3.8rem)); position: relative; z-index: 3; }
.single-article--post { position: relative; }
.post-thumbnail--overlap { margin: -0.5rem 0 1.6rem; }
.post-thumbnail--overlap img { box-shadow: var(--shadow-lift); }

/* Initialbuchstabe im ersten Absatz */
.entry-content--dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4em; line-height: 0.85;
  padding: 0.08em 0.12em 0 0;
  color: var(--c-primary);
  font-weight: 700;
}

.tag-list { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 1.6rem; }
.tag-list .badge { text-decoration: none; }

/* Inline-CTA unter Beiträgen */
.cta-inline {
  margin-top: 1.6rem;
  background: var(--grad-water); color: #fff;
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
  box-shadow: var(--shadow-lift);
}
.cta-inline h2 { color: #fff; font-size: 1.2rem; margin: 0 0 0.25rem; }
.cta-inline p { margin: 0; color: rgba(255,255,255,0.85); font-size: 0.95rem; }
/* Nur der Textblock wächst – der Icon-/Bild-Kasten behält seine feste Größe
   (ein pauschales „> div" hatte früher auch das Icon zum Oval aufgeblasen). */
.cta-inline__body { flex: 1; min-width: 240px; }
.cta-inline__icon {
  flex: none; width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.14); color: var(--c-mint);
}
.cta-inline__icon svg { width: 30px; height: 30px; }
/* Eigenes Bild statt Symbol (Customizer → Beiträge → „CTA: Bild/Logo") */
.cta-inline__icon--img {
  width: 72px; height: 72px;
  overflow: hidden; background: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.cta-inline__icon--img img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: var(--radius-sm);
}

.related-posts { margin-top: clamp(2.5rem, 6vw, 4rem); }

.entry-content { font-size: var(--fs-base); }
.entry-content > * { margin-block: 1.1em; }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content a { font-weight: 600; }
/* Einzug nur für normale Listen. Listen mit eigener Klasse (z. B. selbst
   gestaltete Zeitstrahlen mit absolut positionierten Punkten) bekommen
   keinen Einzug – der würde ihre Positionierung verschieben. */
.entry-content ul:not([class]), .entry-content ol:not([class]) { padding-left: 1.4em; }
.entry-content blockquote {
  border-left: 4px solid var(--c-teal);
  background: rgba(46, 143, 131, 0.07);
  margin-inline: 0; padding: 0.9rem 1.3rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
}
.entry-content img { border-radius: var(--radius-sm); }

/* ---------- Tabellen (Gutenberg-Block „Tabelle") ----------
   Tabellen werden zur Karte: feine Linie, runde Ecken, dunkelgrüner
   Kopf, dezente Zebra-Zeilen. Auf schmalen Bildschirmen scrollt die
   Tabelle innerhalb ihrer Karte statt das Layout zu sprengen. */
.entry-content .wp-block-table {
  margin-inline: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  background: var(--c-surface);
  overflow-x: auto;
}
.entry-content .wp-block-table table, .entry-content table {
  width: 100%; border-collapse: collapse; font-size: 0.96rem;
  margin: 0;
}
.entry-content th, .entry-content td {
  border: none; padding: 0.7rem 1rem; text-align: left;
}
.entry-content thead th {
  background: var(--c-deep); color: #fff;
  font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.entry-content tbody th { color: var(--c-deep); font-weight: 750; }
.entry-content tbody tr:nth-child(even) th,
.entry-content tbody tr:nth-child(even) td { background: var(--c-alt); }
.entry-content tfoot td, .entry-content tfoot th {
  border-top: 2px solid var(--c-line);
  font-weight: 750; color: var(--c-deep);
}
/* Core-Streifen-Stil ordnet sich der CI unter */
.entry-content .wp-block-table.is-style-stripes {
  border: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: transparent; }
.entry-content .wp-block-table figcaption { padding: 0.5rem 1rem 0.7rem; margin: 0; }

/* ---------- Buttons (Gutenberg-Block „Buttons") ----------
   Standard-Buttons erben die grüne Pillenform der Theme-Buttons.
   Eigene Farbwahl im Editor (has-background/has-text-color) hat
   weiterhin Vorrang. */
.entry-content .wp-block-button__link {
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  font-weight: 700; font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.entry-content .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.entry-content .wp-block-button__link:not(.has-background):not(.has-text-color) {
  background: var(--c-primary); color: #fff;
}
.entry-content .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
  background: var(--c-primary-dk); color: #fff;
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) {
  background: transparent;
  border: 2px solid var(--c-primary); color: var(--c-primary);
}
.entry-content .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover {
  background: var(--c-primary); color: #fff;
}

.single-article {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 5vw, 3.2rem);
}
.single-article .entry-meta {
  display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--c-ink-soft);
  padding-bottom: 1.2rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--c-line);
}
.entry-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.entry-meta svg { width: 15px; height: 15px; flex: none; color: var(--c-primary); }
.single-article .post-thumbnail img { border-radius: var(--radius-sm); margin-bottom: 1.5rem; width: 100%; }

.post-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 2rem; flex-wrap: wrap;
}
.post-nav a {
  flex: 1; min-width: 220px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); padding: 0.9rem 1.1rem;
  text-decoration: none; box-shadow: var(--shadow);
}
.post-nav a:hover { box-shadow: var(--shadow-lift); }
.post-nav .nav-label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-soft); }
.post-nav .nav-title { font-weight: 700; color: var(--c-deep); }
.post-nav .nav-next { text-align: right; }

/* Paginierung */
.pagination { display: flex; gap: 0.4rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 42px; height: 42px; padding-inline: 0.6rem;
  border-radius: 999px; border: 1px solid var(--c-line);
  background: var(--c-surface); color: var(--c-ink);
  text-decoration: none; font-weight: 700;
}
.pagination .page-numbers.current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pagination .page-numbers:hover:not(.current) { border-color: var(--c-primary); color: var(--c-primary); }

/* Kommentare */
.comments-area { margin-top: 2.5rem; }
.comment-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.comment-body {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius-sm); padding: 1rem 1.2rem;
}
.comment-meta { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.comment-form textarea, .comment-form input[type="text"],
.comment-form input[type="email"], .comment-form input[type="url"],
.search-form input[type="search"] {
  width: 100%;
  border: 1px solid var(--c-line); border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem; font: inherit; background: #fff;
}
.comment-form input[type="submit"], .search-form button {
  background: var(--c-primary); color: #fff; border: none;
  border-radius: 999px; padding: 0.7rem 1.6rem; font-weight: 700;
  cursor: pointer; font-size: 0.98rem;
}
.comment-form input[type="submit"]:hover, .search-form button:hover { background: var(--c-primary-dk); }
.search-form { display: flex; gap: 0.5rem; max-width: 480px; }


/* Geburtstags-Archiv */
.bday-month-heading { margin-top: 2rem; }

/* Mitglieder-/Vorstandskarten (Shortcode [vorstand]) */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--gap);
  margin-block: 1.5rem;
}
/* Smartphone: eine schmalere, zentrierte Karte statt voller Breite –
   die 4:5-Porträts wurden sonst bildschirmfüllend groß. */
@media (max-width: 640px) {
  .member-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .member-card { width: min(100%, 320px); margin-inline: auto; }
}
.member-card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.member-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.member-card__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-alt); }
.member-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top; /* Gesichter bleiben im Bild, kein Über-Zoom */
}
.member-card__photo--empty { display: grid; place-items: center; color: var(--c-primary); }
.member-card__photo--empty svg { width: 56px; height: 56px; opacity: 0.5; }
.member-card__body { padding: 1.1rem 1rem 1.3rem; }
.member-card__body .badge { margin-bottom: 0.5rem; }
.member-card__name { font-size: 1.1rem; margin: 0.35rem 0 0.5rem; }
/* Icon läuft im Textfluss direkt vor der Adresse mit –
   so bleibt der Abstand auch bei Umbrüchen minimal. */
.member-card__line {
  display: block; text-align: center;
  margin: 0.25rem 0; font-size: 0.9rem;
}
.member-card__line svg {
  width: 14px; height: 14px;
  display: inline-block; vertical-align: -0.15em;
  margin-right: 0.15rem;
  color: var(--c-primary);
}
.member-card__line a {
  color: var(--c-ink-soft); text-decoration: none;
  overflow-wrap: anywhere; /* lange E-Mail-Adressen sauber umbrechen */
}
.member-card__line a:hover { color: var(--c-primary); }
.member-card__line--email { font-size: 0.84rem; }

/* Cookie-/Datenschutz-Hinweis (ohne Plugin, ohne externe Dienste) */
.cookie-notice[hidden] { display: none !important; }
.cookie-notice {
  position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100% - 2rem));
  background: var(--c-deep); color: rgba(255,255,255,0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 1.1rem 1.3rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  z-index: 90;
  font-size: 0.92rem;
}
.cookie-notice p { margin: 0; flex: 1; min-width: 220px; }
.cookie-notice a { color: var(--c-mint); }
.cookie-notice .btn { padding: 0.55rem 1.2rem; font-size: 0.9rem; background: #fff; color: var(--c-deep); }
.cookie-notice .btn:hover { background: var(--c-mint); color: var(--c-deep); }

/* Kategorie-Filter-Chips im Blog */
.filter-chips {
  display: flex; gap: 0.45rem; flex-wrap: wrap;
  margin-bottom: clamp(1.5rem, 4vw, 2.2rem);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 1rem;
  border: 1px solid var(--c-line); border-radius: 999px;
  background: var(--c-surface);
  font-size: 0.9rem; font-weight: 700; color: var(--c-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.filter-chip.is-active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.filter-chip__count {
  font-size: 0.72rem; font-weight: 800;
  background: rgba(26, 143, 82, 0.12); color: var(--c-primary);
  border-radius: 999px; padding: 0.05rem 0.45rem;
}
.filter-chip.is-active .filter-chip__count { background: rgba(255,255,255,0.22); color: #fff; }

/* Info-Boxen (auch als Gutenberg-Block „Info-Box" einfügbar) */
.notice-box {
  border-radius: var(--radius-sm);
  padding: 1rem 1.3rem;
  background: rgba(76, 174, 110, 0.12);
  border-left: 4px solid var(--c-accent);
}
.notice-box > :first-child { margin-top: 0; }
.notice-box > :last-child { margin-bottom: 0; }
.notice-box li + li { margin-top: 0.6em; }
.notice-box--tipp {
  background: rgba(46, 143, 131, 0.10);
  border-left-color: var(--c-teal);
}
.notice-box--achtung {
  background: rgba(224, 168, 62, 0.14);
  border-left-color: #d9a441;
}
.notice-box--warnung {
  background: rgba(199, 70, 60, 0.10);
  border-left-color: #c7463c;
}

/* =========================================================
   7b. FAQ / Akkordeon (Gutenberg-Block „Details")
   Jedes <details> wird zur Karte im Stil der Termin- und
   Beitragskarten; mehrere untereinander ergeben ein Akkordeon.
   ========================================================= */
.entry-content details,
.wp-block-details {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Aufeinanderfolgende Fragen rücken enger zusammen als normale Absätze */
.entry-content details + details { margin-top: 0.6rem; }

.entry-content details:hover,
.wp-block-details:hover { border-color: rgba(26, 143, 82, 0.35); }
.entry-content details[open],
.wp-block-details[open] {
  border-color: rgba(26, 143, 82, 0.35);
  box-shadow: var(--shadow-lift);
}

.entry-content details > summary,
.wp-block-details > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem 1rem 1.35rem;
  cursor: pointer;
  list-style: none;
  font-weight: 750; color: var(--c-deep);
  line-height: 1.35;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-user-select: none; user-select: none;
}
.entry-content details > summary::-webkit-details-marker,
.wp-block-details > summary::-webkit-details-marker { display: none; }
.entry-content details > summary:hover,
.wp-block-details > summary:hover { color: var(--c-primary); background: var(--c-alt); }
.entry-content details > summary:focus-visible,
.wp-block-details > summary:focus-visible {
  outline: 3px solid rgba(26, 143, 82, 0.45);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

/* Chevron in runder Mint-Kachel rechts; klappt beim Öffnen um
   und füllt sich grün (Chevron-Farbe steckt im SVG-Data-URI). */
.entry-content details > summary::after,
.wp-block-details > summary::after {
  content: "";
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background-color: rgba(26, 143, 82, 0.10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a8f52' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  transition: transform 0.25s ease, background-color 0.2s ease;
}
.entry-content details[open] > summary::after,
.wp-block-details[open] > summary::after {
  transform: rotate(180deg);
  background-color: var(--c-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Geöffnete Frage: Titelzeile bleibt dezent abgesetzt */
.entry-content details[open] > summary,
.wp-block-details[open] > summary {
  background: var(--c-alt);
  border-bottom: 1px solid var(--c-line);
}

/* Antwortbereich: Innenabstand über Margins, damit Listen,
   Bilder und Tabellen ihre eigene Formatierung behalten. */
.entry-content details > :not(summary),
.wp-block-details > :not(summary) {
  margin: 0.9em 1.35rem;
}
.entry-content details > summary + :not(summary),
.wp-block-details > summary + :not(summary) { margin-top: 1rem; }
.entry-content details > :not(summary):last-child,
.wp-block-details > :not(summary):last-child { margin-bottom: 1.15rem; }

/* Antwort blendet sanft ein (entfällt bei reduzierter Bewegung
   automatisch über die globale prefers-reduced-motion-Regel) */
@keyframes avl-faq-auf {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.entry-content details[open] > :not(summary),
.wp-block-details[open] > :not(summary) { animation: avl-faq-auf 0.28s ease; }

/* =========================================================
   7c. Grid Cards (eigener Gutenberg-Block „avl/grid-cards")
   Kartenraster mit 1–4 Spalten im Stil der Startseiten-Karten.
   ========================================================= */
.gcards {
  display: grid;
  gap: var(--gap);
  margin-block: 1.6em;
}
.gcards--1 { grid-template-columns: 1fr; }
.gcards--2 { grid-template-columns: repeat(2, 1fr); }
.gcards--3 { grid-template-columns: repeat(3, 1fr); }
.gcards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .gcards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
  .gcards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gcards--2, .gcards--3, .gcards--4 { grid-template-columns: 1fr; }
}

/* Verlinkte Karten: das globale .entry-content a { font-weight: 600 }
   gilt nicht für den Kartentext */
.entry-content a.gcard { font-weight: 400; }
.gcard {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.5rem;
  color: inherit; text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
a.gcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(26, 143, 82, 0.35);
}
.gcard__icon {
  flex: none;
  width: 52px; height: 52px;
  margin-bottom: 0.9rem;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(26, 143, 82, 0.10); color: var(--c-primary);
}
.gcard__icon svg { width: 28px; height: 28px; }
.gcard__title { font-size: 1.12rem; margin: 0 0 0.4rem; color: var(--c-deep); }
/* schlägt .entry-content h3 { margin-top: 1.6em } */
.entry-content .gcard__title { margin-top: 0; }
a.gcard:hover .gcard__title { color: var(--c-primary); }
.gcard__text { margin: 0; color: var(--c-ink-soft); font-size: 0.96rem; }
.gcard__more {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 1rem;
  font-weight: 700; font-size: 0.92rem; color: var(--c-primary);
}
a.gcard:hover .gcard__more { color: var(--c-primary-dk); }

/* =========================================================
   7d. Spalten & „Medien und Text" – mobil immer untereinander
   WordPress stapelt Spalten nur, wenn im Editor „Auf Mobilgeräten
   stapeln" aktiv ist, und „Medien und Text" erst unter 600 px.
   Das Theme erzwingt das Stapeln unterhalb von 782 px generell –
   auch gegen im Editor gesetzte feste Spaltenbreiten (Inline-Styles),
   daher die !important-Angaben.
   ========================================================= */
@media (max-width: 781px) {
  .wp-block-columns,
  .wp-block-columns.is-not-stacked-on-mobile {
    flex-wrap: wrap !important;
  }
  .wp-block-columns > .wp-block-column,
  .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
    flex-basis: 100% !important;
    flex-grow: 1;
  }

  .wp-block-media-text,
  .wp-block-media-text.has-media-on-the-right {
    grid-template-columns: 100% !important;
  }
  /* Bild oben, Text darunter – unabhängig davon, ob das Bild im
     Editor links oder rechts steht. Das Bild wird zentriert und
     nicht breiter als 480 px, damit kleine Grafiken mobil nicht
     bildschirmfüllend aufgeblasen werden. */
  .wp-block-media-text > .wp-block-media-text__media,
  .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: min(100%, 480px);
    margin-inline: auto;
  }
  .wp-block-media-text > .wp-block-media-text__content,
  .wp-block-media-text.has-media-on-the-right > .wp-block-media-text__content {
    grid-column: 1 !important;
    grid-row: 2 !important;
    padding: 1.1rem 0 0;
  }
}

/* =========================================================
   8. Footer
   ========================================================= */
.site-footer { background: var(--c-deep); color: rgba(255, 255, 255, 0.78); margin-top: 0; }
.site-footer__wave { line-height: 0; background: var(--c-sand); }
.site-footer__wave svg { width: 100%; height: clamp(30px, 6vw, 70px); display: block; }
.site-footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
@media (max-width: 800px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h3 {
  color: #fff; font-size: 0.95rem; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 1rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.85); }
.site-footer a:hover { color: var(--c-accent); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.site-footer .contact-line { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.5rem; }
.site-footer .contact-line svg { width: 16px; height: 16px; flex: none; transform: translateY(2px); color: var(--c-accent); }
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 1.1rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: var(--fs-sm);
}

/* =========================================================
   9. Hilfsklassen & Feinschliff
   ========================================================= */
.alignwide { max-width: min(100%, 1120px); margin-inline: auto; }
.alignfull { width: 100%; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: var(--fs-sm); color: var(--c-ink-soft); text-align: center; margin-top: 0.4rem; }
.sticky .card__title::after { content: " 📌"; }

::selection { background: rgba(76, 174, 110, 0.35); }

/* Sanfte Einblendungen beim Scrollen (JS setzt .reveal/.is-visible) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.card.reveal.is-visible:hover { transform: translateY(-4px); }
.youth-card.reveal.is-visible:hover { transform: translateY(-4px); }

/* Feinschliff: Fokus-Ringe und Kicker-Punkte */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid rgba(26, 143, 82, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}
.section__kicker::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary); margin-right: 0.45rem;
  vertical-align: 1px;
}

/* =========================================================
   10. Responsive Feinschliff
   ========================================================= */
@media (max-width: 880px) {
  .site-header__inner { min-height: 64px; }
  .post-hero h1, .page-hero h1 { max-width: none; }
}
@media (max-width: 560px) {
  /* Seitenköpfe mobil besonders flach halten */
  .page-hero { padding-block: 1.15rem 1.35rem; }
  .page-hero h1 { font-size: 1.4rem; }
  .page-hero__desc { font-size: 0.88rem; margin-top: 0.3rem; }
  .post-hero { padding-block: 1.25rem 2.6rem; }
  .post-hero h1 { font-size: 1.45rem; }
  .post-hero__meta { gap: 0.8rem; font-size: 0.8rem; }
  .site-description { display: none; }
  .site-logo-badge { width: 40px; height: 40px; }
  .custom-logo { height: 44px; }
  .site-title { font-size: 0.98rem; }
  .section { padding-block: 2.5rem; }
  .single-article { padding: 1.5rem 1.15rem; }
  .cta-panel { padding: 1.7rem 1.3rem; }
  .cta-inline { padding: 1.3rem 1.2rem; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .event-chip { white-space: normal; }
  .post-nav a { min-width: 100%; }
  .footer { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}