/*
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.29.3
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;

  /* Hugos Magazin: sonniges Gelb + Wasserblau als Kinder-Akzente */
  --c-sonne:      #f2b022;
  --c-sonne-dk:   #b97e0a;
  --c-sonne-ink:  #4a3403;
  --c-wasser:     #9fd8e8;

  --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); }

/* =========================================================
   7c2. Daten & Fakten (eigener Gutenberg-Block „avl/fact-cards")
   Steckbrief-Karten: dunkelgrüne Icon-Kachel, grünes Label in
   Versalien, fetter Wert, kleine Zusatzzeile – z. B. Gewässerdaten.
   ========================================================= */
.fcards {
  display: grid;
  gap: var(--gap);
  margin-block: 1.6em;
}
.fcards--1 { grid-template-columns: 1fr; }
.fcards--2 { grid-template-columns: repeat(2, 1fr); }
.fcards--3 { grid-template-columns: repeat(3, 1fr); }
.fcards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .fcards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
  .fcards--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .fcards--2, .fcards--3, .fcards--4 { grid-template-columns: 1fr; }
}

.fcard {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--c-alt);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
}
.fcard__icon {
  flex: none;
  width: 52px; height: 52px;
  margin-bottom: 1.1rem;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--c-deep); color: #fff;
}
.fcard__icon svg { width: 26px; height: 26px; }
.fcard__label {
  display: block;
  font-size: 0.78rem; font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-primary);
}
.fcard__value {
  display: block;
  font-size: 1.3rem; font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--c-deep);
  margin-top: 0.25rem;
}
.fcard__note { margin: 0.3rem 0 0; color: var(--c-ink-soft); font-size: 0.95rem; }
.entry-content .fcard__note { margin: 0.3rem 0 0; }

/* Farbvarianten der Fakten-Karte – dieselben Systemfarben wie die
   Info-Box (Standard: Tannengrün; blau = Seegrün-Türkis, gelb, rot). */
.fcard--blau .fcard__icon { background: var(--c-teal); }
.fcard--blau .fcard__label { color: var(--c-teal); }
.fcard--gelb .fcard__icon { background: #d9a441; }
.fcard--gelb .fcard__label { color: var(--c-sonne-dk); }
.fcard--rot .fcard__icon { background: #c7463c; }
.fcard--rot .fcard__label { color: #c7463c; }

/* =========================================================
   7c3. Ablauf-Schritte (eigener Gutenberg-Block „avl/steps")
   Nummerierte Schritte mit Verbindungslinie – z. B. der Weg zum
   Fischereischein. Die Nummern zählt das CSS automatisch, daher
   stimmt die Reihenfolge auch nach dem Umsortieren im Editor.
   ========================================================= */
.steps {
  counter-reset: avl-step;
  display: flex;
  flex-direction: column;
  max-width: 860px;
  margin-block: 1.6em;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 1.25rem;
  padding-bottom: 1.75rem;
}
.step::before {
  content: "";
  position: absolute;
  top: 56px; bottom: 8px; left: 23px;
  width: 2px;
  background: linear-gradient(180deg, var(--c-mint), var(--c-alt));
}
.step:last-child { padding-bottom: 0; }
.step:last-child::before { display: none; }
.step__num {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-deep));
  color: #fff;
  font-weight: 800; font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(13, 53, 39, 0.25);
}
.step__num::before {
  counter-increment: avl-step;
  content: counter(avl-step);
}
.step__card {
  min-width: 0;
  background: var(--c-alt);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.step__title {
  display: flex; align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
  font-size: 1.08rem;
  color: var(--c-deep);
}
.entry-content .step__title { margin-top: 0; }
.step__icon {
  flex: none;
  display: grid; place-items: center;
  color: var(--c-primary);
}
.step__icon svg { width: 20px; height: 20px; }
.step__text { margin: 0; color: var(--c-ink-soft); font-size: 0.96rem; }
.entry-content .step__text { margin: 0; }
@media (max-width: 560px) {
  .step { grid-template-columns: 40px 1fr; column-gap: 0.9rem; }
  .step::before { left: 19px; top: 48px; }
  .step__num { width: 40px; height: 40px; font-size: 1rem; }
  .step__card { padding: 1.15rem 1.2rem; }
}

/* =========================================================
   7c4. Summen-Zeile (eigener Gutenberg-Block „avl/total")
   Dunkelgrüne Bilanz-Leiste mit Icon, Text und großem Wert
   rechts – z. B. Gesamtkosten unter den Daten-&-Fakten-Karten.
   ========================================================= */
.total {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  background: var(--grad-water);
  color: var(--c-mint);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin-block: 1.6em;
  box-shadow: var(--shadow);
}
.total__icon {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-mint);
}
.total__icon svg { width: 22px; height: 22px; }
.total__text {
  flex: 1 1 260px;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.total__title {
  display: block;
  color: #fff;
  font-size: 1.02rem;
  margin-bottom: 0.15rem;
}
.total__value {
  flex: none;
  margin-left: auto;
  font-size: 1.45rem; font-weight: 800;
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .total__value { margin-left: 60px; }
}

/* =========================================================
   7c5. Fisch-Steckbrief (eigener Gutenberg-Block „avl/fisch-steckbrief")
   Hugos „Fisch der Woche": Titelkopf mit Wellenkante, Sprechblase,
   Foto + Steckbrief-Tabelle, wasserblaue Lernecke mit bunten
   Merkmal-Kärtchen, Prüfungsfrage zum Aufklappen und Fun-Fact.
   ========================================================= */
/* Der Block liegt im Beitrag bereits in der weißen Artikelkarte –
   deshalb bewusst ohne eigenen Rahmen, Schatten und Innenabstand,
   sonst entsteht eine „Karte in der Karte" mit doppeltem Rand. */
.fsb {
  margin-block: 1.6em;
}
.fsb__kopf {
  position: relative;
  background: var(--grad-water);
  color: #fff;
  padding: 1.5rem 1.6rem 2.6rem;
  border-radius: 18px 18px 0 0;
}
.fsb__sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--c-sonne);
  color: var(--c-sonne-ink);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  box-shadow: 0 3px 8px rgba(13, 53, 39, 0.25);
}
.fsb__sticker svg { width: 15px; height: 15px; }
.fsb__name {
  margin: 0.8rem 0 0.1rem;
  color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1.15;
}
.entry-content .fsb__name { margin-top: 0.8rem; }
.fsb__latein {
  margin: 0;
  font-style: italic;
  color: var(--c-mint);
  font-size: 0.95rem;
}
/* 1px über die Kopfkanten hinaus, sonst blitzt an Subpixel-Rändern
   eine grüne Linie des Verlaufs hervor */
.fsb__welle {
  position: absolute;
  left: -1px; bottom: -1px;
  width: calc(100% + 2px);
  height: 34px;
  display: block;
}
.fsb__hugo {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 1.2rem 0 0.2rem;
}
.fsb__hugo-avatar {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #d9f0f7, var(--c-wasser) 75%);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--c-deep);
}
.fsb__hugo-avatar svg { width: 32px; height: 32px; }
.fsb__hugo-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fsb__hugo-blase {
  position: relative;
  background: var(--c-alt);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: var(--c-ink-soft);
  margin: 0;
}
.fsb__hugo-blase::before {
  content: "";
  position: absolute;
  left: -7px; top: 18px;
  border: 7px solid transparent;
  border-right-color: var(--c-alt);
  border-left: 0;
}
.fsb__hugo-blase strong { color: var(--c-deep); }
.fsb__hugo--lern { margin: 0.9rem 0 1rem; }
.fsb__hugo--lern .fsb__hugo-blase { background: #fff; box-shadow: 0 1px 3px rgba(13, 53, 39, 0.06); }
.fsb__hugo--lern .fsb__hugo-blase::before { border-right-color: #fff; }

.fsb__mitte {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.1rem;
  padding: 1.1rem 0 0.2rem;
  align-items: start;
}
.fsb__bild {
  margin: 0;
  background: radial-gradient(circle at 30% 25%, #d9f0f7, var(--c-wasser) 80%);
  border-radius: var(--radius);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--c-deep);
}
/* Mit gewähltem Foto: keine feste Form, kein Rahmen – das Bild
   bestimmt seine Höhe selbst und wird nie beschnitten. */
.fsb__bild:not(.fsb__bild--leer) {
  background: none;
  aspect-ratio: auto;
  align-self: center;
  display: block;
}
.fsb__bild .fsb__foto,
.fsb__bild img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.fsb__bild--leer svg { width: 30%; height: 60%; opacity: 0.85; }

.fsb-tabelle {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.fsb-tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  margin: 0;
}
.fsb-tabelle thead th {
  background: var(--c-deep);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.65rem 1rem;
}
.fsb-tabelle thead th svg {
  width: 15px; height: 15px;
  vertical-align: -2px;
  margin-right: 0.45rem;
  color: var(--c-mint);
}
.fsb-tabelle td,
.fsb-tabelle tbody th {
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--c-line);
  text-align: left;
  vertical-align: middle;
}
.fsb-tabelle tbody tr:nth-child(even) td,
.fsb-tabelle tbody tr:nth-child(even) th { background: var(--c-alt); }
.fsb-tabelle tbody th {
  font-weight: 700;
  color: var(--c-deep);
  white-space: nowrap;
  width: 1%;
}
.fsb-tabelle tbody td { color: var(--c-ink-soft); }
.fsb-tabelle tbody td strong { color: var(--c-deep); }
.fsb-ticon {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(26, 143, 82, 0.10);
  color: var(--c-primary);
  vertical-align: middle;
  margin-right: 0.55rem;
}
.fsb-ticon svg { width: 15px; height: 15px; }

.fsb__pruefung { padding: 1.2rem 0 0.2rem; }
.fsb__lernecke {
  background: linear-gradient(180deg, #e2f3f9 0%, rgba(159, 216, 232, 0.32) 100%);
  border-radius: var(--radius);
  padding: 1.2rem 1.2rem 1.25rem;
}
.fsb__lern-sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--c-sonne);
  color: var(--c-sonne-ink);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.32rem 0.8rem;
  box-shadow: 0 3px 8px rgba(13, 53, 39, 0.18);
}
.fsb__lern-sticker svg { width: 14px; height: 14px; }
.fsb__lern-titel {
  margin: 0.7rem 0 0.9rem;
  color: var(--c-deep);
  font-size: 1.05rem;
  font-weight: 800;
}
.fsb__merkmale {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.fsb__merkmale li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  border-radius: 12px;
  border-left: 4px solid var(--c-accent);
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  color: var(--c-ink-soft);
  box-shadow: 0 1px 3px rgba(13, 53, 39, 0.06);
  margin: 0;
}
.fsb__merkmale li strong { color: var(--c-deep); }
.fsb__merkmal-icon {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-mint);
  color: var(--c-primary-dk);
}
.fsb__merkmal-icon svg { width: 16px; height: 16px; }
.fsb__merkmale li.m-wasser { border-left-color: var(--c-wasser); }
.fsb__merkmale li.m-wasser .fsb__merkmal-icon { background: var(--c-wasser); color: var(--c-deep); }
.fsb__merkmale li.m-sonne { border-left-color: var(--c-sonne); }
.fsb__merkmale li.m-sonne .fsb__merkmal-icon { background: var(--c-sonne); color: var(--c-sonne-ink); }
.fsb__merkmale li.m-teal { border-left-color: var(--c-teal); }
.fsb__merkmale li.m-teal .fsb__merkmal-icon { background: rgba(46, 143, 131, 0.18); color: var(--c-teal); }

.fsb__quiz {
  margin: 1.1rem 0 0;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.fsb__quiz-kopf {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.15rem 0.75rem 1.35rem;
}
.fsb__quiz-kopf > svg,
.fsb__quiz-kopf .fsb__quiz-icon svg {
  flex: none;
  width: 20px; height: 20px;
  color: var(--c-primary);
}
.fsb__quiz-kopf strong {
  color: var(--c-deep);
  font-size: 0.98rem;
  line-height: 1.35;
}
.fsb__quiz-kopf strong > span:first-child {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: 0.1rem;
}
.fsb__antworten {
  list-style: none;
  margin: 0;
  padding: 0 1.35rem 0.9rem;
  display: grid;
  gap: 0.4rem;
}
.fsb__antworten li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--c-ink);
  background: var(--c-alt);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 0.4rem 0.9rem 0.4rem 0.45rem;
  margin: 0;
}
.fsb__buchstabe {
  flex: none;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-mint);
  color: var(--c-primary-dk);
  font-size: 0.74rem;
  font-weight: 900;
}
.fsb__antworten li:nth-child(1) .fsb__buchstabe { border-color: var(--c-accent); color: var(--c-primary-dk); }
.fsb__antworten li:nth-child(2) .fsb__buchstabe { border-color: var(--c-sonne); color: var(--c-sonne-dk); }
.fsb__antworten li:nth-child(3) .fsb__buchstabe { border-color: var(--c-wasser); color: #21708c; }
.fsb__quiz details > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.15rem 0.85rem 1.35rem;
  border-top: 1px solid var(--c-line);
  cursor: pointer;
  font-weight: 750;
  color: var(--c-deep);
  font-size: 0.92rem;
}
.fsb__quiz details > summary::-webkit-details-marker { display: none; }
.fsb__quiz 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;
}
.fsb__quiz 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");
}
.fsb__quiz details[open] > summary {
  background: var(--c-alt);
  border-bottom: 1px solid var(--c-line);
}
.fsb__loesung {
  margin: 0;
  padding: 0.9rem 1.35rem 1rem;
  font-size: 0.92rem;
  color: var(--c-ink-soft);
}
.fsb__loesung strong { color: var(--c-primary-dk); }

.fsb__wissen {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: rgba(242, 176, 34, 0.13);
  border-left: 4px solid var(--c-sonne);
  border-radius: var(--radius-sm);
  margin: 1.1rem 0 0;
  padding: 0.9rem 1.1rem;
}
.fsb__wissen-avatar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #d9f0f7, var(--c-wasser) 75%);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--c-deep);
}
.fsb__wissen-avatar svg { width: 24px; height: 24px; }
.fsb__wissen-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fsb__wissen-text { font-size: 0.93rem; color: var(--c-ink-soft); margin: 0; }
.fsb__wissen-text p { margin: 0; }
.fsb__wissen-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-sonne-dk);
  margin-bottom: 0.15rem;
}

@media (max-width: 680px) {
  .fsb__mitte { grid-template-columns: 1fr; }
  .fsb-tabelle tbody th { white-space: normal; width: auto; }
  .fsb__merkmale { grid-template-columns: 1fr; }
}

/* =========================================================
   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;
  }
}

/* =========================================================
   7e. Bildergalerien (Gutenberg-Block „Galerie")
   Das Theme wertet Galerien per JavaScript zu einem Slider mit
   Pfeilen, Bildzähler, Miniaturleiste und Vollbild-Lightbox auf
   (assets/js/galerie.js). Ohne JavaScript bleibt das normale
   Bildraster des Editors als Fallback erhalten.
   ========================================================= */
.entry-content .wp-block-gallery { margin-block: 1.8em; }

/* --- Slider-Grundgerüst (JS setzt .avl-slider) --- */
.wp-block-gallery.avl-slider { display: block; }

.avl-slider__buehne {
  position: relative;
  aspect-ratio: 3 / 2;
  max-height: min(68vh, 620px);
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(160deg, #0b241a 0%, #123a2a 100%);
  box-shadow: var(--shadow-lift);
}
.avl-slider__spur {
  display: flex; height: 100%;
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.avl-slider__folie {
  flex: 0 0 100%; min-width: 0;
  height: 100%; margin: 0;
}
.avl-slider__lupe {
  display: block; width: 100%; height: 100%;
  padding: 0; border: none; background: none;
  cursor: zoom-in;
}
.avl-slider__lupe img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0;
}

/* --- Pfeile & Bildzähler auf der Bühne --- */
.avl-slider__pfeil {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); color: var(--c-deep);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.avl-slider__pfeil:hover {
  background: #fff; color: var(--c-primary);
  transform: translateY(-50%) scale(1.08);
}
.avl-slider__pfeil svg { width: 20px; height: 20px; }
.avl-slider__pfeil--zurueck { left: 0.85rem; }
.avl-slider__pfeil--weiter { right: 0.85rem; }

.avl-slider__zaehler {
  position: absolute; right: 0.85rem; bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(13, 53, 39, 0.72); color: #fff;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* --- Bildunterschrift unter der Bühne --- */
.avl-slider__text {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: var(--fs-sm); color: var(--c-ink-soft);
}
.avl-slider__text[hidden] { display: none; }

/* --- Miniaturleiste --- */
.avl-slider__thumbs {
  display: flex; gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.avl-slider__thumb {
  flex: none;
  width: 88px; height: 60px;
  padding: 0;
  border: 2px solid transparent; border-radius: 10px;
  overflow: hidden;
  background: var(--c-alt);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}
.avl-slider__thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 0;
}
.avl-slider__thumb:hover { opacity: 0.85; }
.avl-slider__thumb.ist-aktiv { opacity: 1; border-color: var(--c-primary); }

/* --- Lightbox (Vollbild-Großansicht) --- */
body.avl-lightbox-offen { overflow: hidden; }

.avl-lightbox {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.9rem;
  padding: 1rem;
  background: rgba(7, 24, 17, 0.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.avl-lightbox[hidden] { display: none; }
.avl-lightbox__figur {
  margin: 0; min-height: 0; max-width: 100%;
  display: grid; place-items: center;
}
.avl-lightbox__figur img {
  max-width: min(1280px, 100%);
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.avl-lightbox__leiste {
  display: flex; align-items: baseline; justify-content: center;
  gap: 0.9rem;
  max-width: min(1280px, 100%);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-sm);
  text-align: center;
}
.avl-lightbox__zaehler { font-weight: 700; color: var(--c-mint); white-space: nowrap; }
.avl-lightbox__text { margin: 0; }
.avl-lightbox__text[hidden] { display: none; }
.avl-lightbox__schliessen,
.avl-lightbox__pfeil {
  position: absolute;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.avl-lightbox__schliessen:hover,
.avl-lightbox__pfeil:hover { background: rgba(255, 255, 255, 0.3); }
.avl-lightbox__schliessen svg,
.avl-lightbox__pfeil svg { width: 22px; height: 22px; }
.avl-lightbox__schliessen { top: 0.9rem; right: 0.9rem; }
.avl-lightbox__pfeil { top: 50%; transform: translateY(-50%); }
.avl-lightbox__pfeil--zurueck { left: 0.9rem; }
.avl-lightbox__pfeil--weiter { right: 0.9rem; }

/* --- Galerie mobil --- */
@media (max-width: 640px) {
  .avl-slider__buehne { aspect-ratio: 4 / 3; }
  .avl-slider__pfeil { width: 38px; height: 38px; }
  .avl-slider__pfeil svg { width: 17px; height: 17px; }
  .avl-slider__thumb { width: 72px; height: 50px; }
  .avl-lightbox { padding: 0.75rem; }
  .avl-lightbox__figur img { max-height: 70vh; border-radius: 6px; }
  .avl-lightbox__schliessen { top: 0.6rem; right: 0.6rem; }
  .avl-lightbox__pfeil { width: 40px; height: 40px; }
  .avl-lightbox__pfeil--zurueck { left: 0.5rem; }
  .avl-lightbox__pfeil--weiter { right: 0.5rem; }
}

/* =========================================================
   7f. Icon-Liste (eigener Gutenberg-Block „avl/icon-list")
   Aufzählung mit grünen Icon-Punkten, optional 2- oder 3-spaltig.
   Auf Smartphones stapeln die Spalten automatisch.
   ========================================================= */
ul.ilist {
  list-style: none;
  margin-block: 1.5em;
  padding: 0;
  display: grid;
  gap: 0.65rem 1.6rem;
}
.ilist--2 { grid-template-columns: repeat(2, 1fr); }
.ilist--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 940px) {
  .ilist--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .ilist--2, .ilist--3 { grid-template-columns: 1fr; }
}

.ilist__item {
  display: flex; align-items: flex-start;
  gap: 0.75rem;
  margin: 0;
  min-width: 0;
}
.ilist__icon {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(26, 143, 82, 0.10);
  color: var(--c-primary);
}
.ilist__icon svg { width: 16px; height: 16px; }
/* Kreuz = Rot, Warnung = Gelb – dieselben Systemfarben wie die
   Info-Box-Varianten; alle übrigen Icons bleiben Vereinsgrün. */
.ilist__icon--rot { background: rgba(199, 70, 60, 0.12); color: #c7463c; }
.ilist__icon--gelb { background: rgba(224, 168, 62, 0.16); color: var(--c-sonne-dk); }
.ilist__text { min-width: 0; overflow-wrap: anywhere; }

/* =========================================================
   7g. Hugos Magazin (Jugendmagazin mit Hecht Hugo)
   Kinderfreundliche Übersicht unter /jugend/hugos-magazin/,
   Beitragskarten mit Alters-Sticker, Einzelbeitrag mit Autorenbox
   sowie die Blöcke „Hugo-Tipp" und „Magazin-Teaser".
   ========================================================= */

/* --- Wiederkehrende Bausteine --- */
.hugo-avatar {
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #d9f0f7, var(--c-wasser) 75%);
  overflow: hidden;
  flex: none;
}
.hugo-avatar img, .hugo-avatar .hugo-avatar__bild {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 50%;
}
.hugo-avatar .hugo-avatar__platzhalter { display: grid; place-items: center; width: 100%; height: 100%; color: var(--c-deep); }
.hugo-avatar .hugo-avatar__platzhalter svg { width: 60%; height: 60%; }
.hugo-avatar--klein { width: 34px; height: 34px; }
.hugo-avatar--gross { width: 84px; height: 84px; box-shadow: var(--shadow); }

.mag-kicker {
  display: inline-block;
  background: var(--c-sonne); color: var(--c-sonne-ink);
  font-size: 0.78rem; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 999px; padding: 0.3rem 0.9rem;
}
.mag-sticker {
  position: absolute; top: 0.6rem; left: 0.6rem;
  background: var(--c-sonne); color: var(--c-sonne-ink);
  font-size: 0.72rem; font-weight: 900;
  border-radius: 999px; padding: 0.2rem 0.65rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* --- Kopfbereich der Übersicht --- */
.mag-hero {
  background: var(--grad-water);
  color: #fff;
  padding: 1.6rem 0 4.6rem;
  overflow: hidden;
}
.mag-hero__crumb { margin: 0 0 1.4rem; font-size: 0.82rem; color: var(--c-mint); }
.mag-hero__crumb a { color: var(--c-mint); text-decoration: none; }
.mag-hero__crumb a:hover { color: #fff; }
.mag-hero__crumb strong { color: #fff; }
.mag-hero__inner {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.2rem, 4vw, 3rem);
  align-items: center;
  max-width: 980px;
}
.mag-hero h1 {
  color: #fff;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.12; letter-spacing: -0.02em;
  margin: 0.9rem 0 0.7rem;
}
.mag-hero__intro { margin: 0; color: #dff0e6; max-width: 46ch; }
.mag-hero__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.15rem; }
.mag-hero__badges span {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; padding: 0.28rem 0.8rem;
}
.mag-hero__badges svg { width: 15px; height: 15px; flex: none; color: var(--c-mint); }
.mag-hero__hugo { position: relative; width: min(240px, 64vw); justify-self: end; }
.mag-blase { position: absolute; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); }
.mag-blase--1 { width: 14px; height: 14px; top: -4px; right: 44px; }
.mag-blase--2 { width: 9px; height: 9px; top: -22px; right: 62px; }
.mag-blase--3 { width: 6px; height: 6px; top: -38px; right: 52px; }
.mag-hero__hugo .hugo-kreis {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #d9f0f7, var(--c-wasser) 72%);
  box-shadow: inset 0 -14px 24px rgba(13, 53, 39, 0.2), var(--shadow-lift);
  overflow: hidden;
}
/* Das Hugo-Bild füllt den Kreis vollständig aus. */
.mag-hero__hugo .hugo-kreis img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mag-hero__hugo .hugo-avatar__platzhalter { color: var(--c-deep); width: 100%; height: 100%; display: grid; place-items: center; }
.mag-hero__hugo .hugo-avatar__platzhalter svg { width: 55%; height: 55%; }
/* Weiße Welle liegt über dem unteren Rand des grünen Verlaufs. */
.mag-hero__wave { line-height: 0; position: relative; margin-top: calc(-1 * clamp(26px, 5vw, 52px)); }
.mag-hero__wave svg { width: 100%; height: clamp(26px, 5vw, 52px); display: block; }
@media (max-width: 700px) {
  .mag-hero__inner { grid-template-columns: 1fr; }
  .mag-hero__hugo { order: -1; justify-self: center; width: min(190px, 55vw); }
}

/* --- Themen-Filter + Kartenraster --- */
.mag-bereich { padding-block: 1.6rem 3rem; }
.mag-themen { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.mag-themen__chip {
  font-size: 0.85rem; font-weight: 700;
  border: 1.5px solid var(--c-line); color: var(--c-ink-soft);
  border-radius: 999px; padding: 0.34rem 0.95rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mag-themen__chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
.mag-themen__chip.ist-aktiv { background: var(--c-deep); border-color: var(--c-deep); color: #fff; }
.mag-thema-titel { color: var(--c-deep); font-size: 1.25rem; margin: 0 0 1.2rem; }

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

.mag-karte {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mag-karte:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.mag-karte__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; font-weight: 400; }
.mag-karte__bild { position: relative; aspect-ratio: 16 / 10; background: var(--c-alt); }
.mag-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.mag-karte__platzhalter {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: var(--grad-water); color: var(--c-mint);
}
.mag-karte__platzhalter svg { width: 64px; height: 64px; }
.mag-karte__body { display: grid; gap: 0.45rem; padding: 0.95rem 1.05rem 1.15rem; align-content: start; }
.mag-karte__thema {
  font-size: 0.7rem; font-weight: 900;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--c-teal);
}
.mag-karte__titel { margin: 0; font-size: 1.05rem; line-height: 1.3; color: var(--c-deep); letter-spacing: -0.01em; }
.mag-karte__link:hover .mag-karte__titel { color: var(--c-primary); }
.mag-karte__text { margin: 0; font-size: 0.88rem; color: var(--c-ink-soft); }
.mag-karte__meta { display: flex; gap: 0.9rem; align-items: center; font-size: 0.76rem; color: var(--c-ink-soft); margin-top: 0.15rem; }
.mag-karte__zeit { display: inline-flex; align-items: center; gap: 0.3rem; }
.mag-karte__zeit svg { width: 13px; height: 13px; }
.mag-karte__mehr { font-size: 0.86rem; font-weight: 800; color: var(--c-primary); }

/* --- Einzelbeitrag --- */
.mag-art-hero {
  background: var(--grad-water);
  color: #fff;
  padding: 1.6rem 0 4rem;
}
.mag-art-hero__inner { max-width: 760px; margin-inline: auto; }
.mag-art-hero .mag-hero__crumb { margin-bottom: 1.2rem; }
.mag-art-hero h1 {
  color: #fff;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.15; letter-spacing: -0.02em;
  margin: 0.8rem 0 0.9rem;
}
.mag-art-meta { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; font-size: 0.84rem; color: var(--c-mint); }
.mag-art-meta__autor { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: #fff; }
.mag-art-meta__zeit { display: inline-flex; align-items: center; gap: 0.35rem; }
.mag-art-meta__zeit svg { width: 14px; height: 14px; }

.mag-artikel .content-area { padding-block: 0 3rem; }
.mag-art-body {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  margin-top: -2.4rem;
  background: var(--c-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: clamp(1.3rem, 3vw, 2.2rem);
}

/* --- Autorenbox --- */
.hugo-autorenbox {
  display: flex; gap: 1.2rem; align-items: flex-start;
  background: var(--c-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  margin-top: 2rem;
}
.hugo-autorenbox__rolle {
  font-size: 0.72rem; font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-teal);
}
.hugo-autorenbox__name { margin: 0.15rem 0 0.4rem; font-size: 1.2rem; color: var(--c-deep); }
.hugo-autorenbox__text p { margin: 0 0 0.55rem; font-size: 0.9rem; color: var(--c-ink-soft); }
.hugo-autorenbox__text a { font-size: 0.88rem; font-weight: 800; color: var(--c-primary); text-decoration: none; }
.hugo-autorenbox__text a:hover { color: var(--c-primary-dk); }
@media (max-width: 560px) { .hugo-autorenbox { flex-direction: column; } }

/* --- Block „Hugo-Tipp" --- */
.hugo-tipp {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: rgba(242, 176, 34, 0.13);
  border-left: 4px solid var(--c-sonne);
  border-radius: var(--radius-sm);
  padding: 0.95rem 1.15rem;
  margin-block: 1.3em;
}
.hugo-tipp .hugo-avatar--klein { width: 40px; height: 40px; }
.hugo-tipp__inhalt { min-width: 0; font-size: 0.93rem; }
.hugo-tipp__label {
  display: block;
  font-size: 0.74rem; font-weight: 900;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--c-sonne-dk);
  margin-bottom: 0.25rem;
}
.hugo-tipp__inhalt > p { margin: 0 0 0.5em; }
.hugo-tipp__inhalt > :last-child { margin-bottom: 0; }

/* --- Block „Magazin-Teaser" (z. B. auf der Jugend-Seite) --- */
.mag-teaser {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem 1.6rem;
  margin-block: 1.6em;
}
.mag-teaser__kicker {
  display: block;
  font-size: 0.72rem; font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-teal);
}
.mag-teaser__titel { margin: 0.2rem 0 1rem; font-size: 1.2rem; color: var(--c-deep); }
.mag-teaser__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 1.1rem; }
@media (max-width: 620px) { .mag-teaser__reihe { grid-template-columns: 1fr; } }
.mag-teaser__karte {
  display: grid; gap: 0.25rem; align-content: start;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.95rem;
  box-shadow: var(--shadow);
  text-decoration: none; color: inherit; font-weight: 400;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mag-teaser__karte:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: rgba(26, 143, 82, 0.35); }
.mag-teaser__thema {
  font-size: 0.68rem; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-sonne-dk);
}
.mag-teaser__karte strong { color: var(--c-deep); font-size: 0.92rem; line-height: 1.35; }
.mag-teaser__karte:hover strong { color: var(--c-primary); }
.mag-teaser__leer { margin: 0 0 1rem; font-size: 0.9rem; color: var(--c-ink-soft); }
.mag-teaser__btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--c-primary); color: #fff;
  font-size: 0.88rem; font-weight: 800;
  border-radius: 999px; padding: 0.55rem 1.35rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.mag-teaser__btn svg { width: 15px; height: 15px; flex: none; }
.mag-teaser__btn:hover { background: var(--c-primary-dk); transform: translateY(-2px); box-shadow: var(--shadow-lift); }

/* =========================================================
   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; }
}