/* ============================================================
   elbabe · Components — Nav, Hero, Cards, Modal, Galerie, Verein, Footer
   Mobile-first; Desktop-Layouts via min-width Breakpoints.
   Alle Design-Werte kommen aus css/tokens.css.
   ============================================================ */

/* ══════════ LOGO-ANIMATION (Herz: rosa + orange gemeinsam) ══════════ */
.logo-svg { width: 100%; height: auto; }
.logo-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: heartbeat 1.7s ease-in-out infinite;
  will-change: transform;
}
@keyframes heartbeat {           /* nur nach oben skalieren -> nie weisser Hintergrund */
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.06); }
  28%      { transform: scale(1.0); }
  42%      { transform: scale(1.035); }
  56%      { transform: scale(1.0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-pulse { animation: none; }
}

/* ══════════ NAV ══════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(var(--c-navbg-rgb), 0.92); backdrop-filter: var(--blur-glass);
  border-bottom: 1px solid rgba(var(--c-yellow-rgb), 0.22);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; min-height: var(--nav-h);
  padding: 0.5rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.nav-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.nav-brand img { width: 42px; height: 42px; }
.nav-brand .brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.nav-brand .brand-name { font-family: var(--font-head); font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--amber); }
.nav-brand .brand-sub { font-size: var(--fs-01); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); }

.nav-links { list-style: none; display: flex; align-items: center; gap: 0.25rem; }
.nav-links a {
  display: inline-block; text-decoration: none; color: var(--text);
  font-weight: var(--fw-bold); font-size: var(--fs-10); padding: 0.55rem 0.9rem; border-radius: var(--radius-pill);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-links a:hover, .nav-links a.is-active { background: rgba(var(--c-yellow-rgb), 0.25); color: var(--amber); }

/* Unterseiten-Nav: immer horizontal (kein Off-canvas, kein Burger) */
.nav-links.nav-static { position: static; transform: none; flex-direction: row; background: none; box-shadow: none; border: none; padding: 0; }

.nav-burger {
  display: inline-flex; flex-direction: column; gap: 5px; justify-content: center;
  width: 46px; height: 46px; padding: 11px; background: none; border: none; cursor: pointer;
}
.nav-burger span { display: block; height: 2px; width: 100%; background: var(--amber-mid); border-radius: var(--radius-2xs); transition: transform var(--t-med), opacity var(--t-med); }
.nav.is-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile: Off-canvas Links */
.nav-links {
  position: fixed; inset: var(--nav-h) 0 auto 0;
  flex-direction: column; align-items: stretch; gap: 0.2rem;
  background: rgba(var(--c-navbg-rgb), 0.98); backdrop-filter: var(--blur-glass);
  padding: 1rem 1.25rem 1.6rem; border-bottom: 1px solid rgba(var(--c-yellow-rgb), 0.22);
  transform: translateY(-130%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-soft);
}
.nav.is-open .nav-links { transform: translateY(0); }
.nav-links a { padding: 0.85rem 1rem; font-size: var(--fs-15); }

/* ══════════ HERO ══════════ */
.hero { --hero-accent: var(--c-pink-rgb); --ease-soft: cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; padding: clamp(2.5rem, 8vw, 5rem) 0 clamp(3rem, 9vw, 5.5rem); }
.hero[data-accent="2"] { --hero-accent: var(--c-steel-rgb); }
.hero[data-accent="3"] { --hero-accent: var(--c-yellow-rgb); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero-blob { position: absolute; border-radius: 50%; filter: var(--blur-blob); }
.blob-1 { width: 60vw; max-width: 560px; aspect-ratio: 1; background: rgba(var(--c-yellow-rgb), 0.22); top: -12%; right: -10%; animation: drift1 46s ease-in-out infinite; }
.blob-2 { width: 45vw; max-width: 420px; aspect-ratio: 1; background: rgba(var(--c-orange-rgb), 0.14); bottom: -10%; left: -12%; animation: drift2 58s ease-in-out infinite; }
.blob-3 { width: 35vw; max-width: 320px; aspect-ratio: 1; background: rgba(var(--c-pink-rgb), 0.16); top: 35%; left: 28%; animation: drift3 52s ease-in-out infinite; }
/* per-state Akzent-Blob: färbt die Stimmung sanft passend zur aktiven Botschaft um */
.blob-accent { width: 42vw; max-width: 380px; aspect-ratio: 1; background: rgba(var(--hero-accent), 0.20); top: 6%; right: 24%; transition: background 1.2s ease; animation: drift4 40s ease-in-out infinite; }

/* sehr langsames, organisches Wandern der Farb-Blobs entlang zufällig anmutender
   Pfade — reine Positionsverschiebung (kein Skalieren, damit nichts „pulsiert“). */
@keyframes drift1 { 0%,100%{ transform: translate(0,0);} 25%{ transform: translate(-5%, 6%);} 50%{ transform: translate(4%, 10%);} 75%{ transform: translate(7%, -4%);} }
@keyframes drift2 { 0%,100%{ transform: translate(0,0);} 20%{ transform: translate(8%, -5%);} 55%{ transform: translate(-4%, -9%);} 80%{ transform: translate(-8%, 4%);} }
@keyframes drift3 { 0%,100%{ transform: translate(0,0);} 30%{ transform: translate(9%, 5%);} 60%{ transform: translate(-6%, 9%);} 85%{ transform: translate(5%, -6%);} }
@keyframes drift4 { 0%,100%{ transform: translate(0,0);} 25%{ transform: translate(-7%, -4%);} 50%{ transform: translate(-3%, 8%);} 75%{ transform: translate(6%, 5%);} }
@media (prefers-reduced-motion: reduce) {
  .blob-1, .blob-2, .blob-3, .blob-accent { animation: none; }
}

.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(2rem, 6vw, 3rem); align-items: center; text-align: center; }
.hero-visual { position: relative; width: min(78vw, 340px); aspect-ratio: 1; display: grid; place-items: center; order: 1; }
.hero-logo { position: relative; z-index: 2; width: 66%; }

/* ---- rotierende Botschaften (eine atmende „Schlaufe“, kein Slideshow-Track) ---- */
.hero-rota { position: relative; z-index: 1; display: grid; width: 100%; max-width: 540px; order: 2; }
.hero-state { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s linear 0.7s; }
.hero-state.is-active { visibility: visible; transition: visibility 0s; }
.hero-state > * { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease-soft), transform 0.7s var(--ease-soft); }
.hero-state.is-active > * { opacity: 1; transform: none; }
.hero-state.is-active .hero-kicker { transition-delay: 0.05s; }
.hero-state.is-active h1          { transition-delay: 0.14s; }
.hero-state.is-active .hero-lead  { transition-delay: 0.23s; }
.hero-wordmark { text-transform: lowercase; letter-spacing: -0.01em; }

.hero-text { max-width: 540px; }
.hero-kicker { font-size: var(--fs-06); font-weight: var(--fw-black); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--orange); margin-bottom: 0.9rem; }
.hero h1 { margin-bottom: 1.1rem; }
.hero h1 em { font-style: italic; color: var(--orange); }
.hero-lead { font-size: var(--fs-hero-lead); margin-bottom: 0; }

/* ---- Indikatoren (klickbar, Touch-Zielgrösse) ---- */
.hero-dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 0.5rem; margin-top: clamp(1.4rem, 4vw, 2.1rem); }
.hero-dot { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: none; background: none; cursor: pointer; }
.hero-dot::before { content: ''; width: 11px; height: 11px; border-radius: 50%; background: rgba(var(--c-steel-rgb), 0.32); transition: background 0.3s ease, transform 0.3s ease; }
.hero-dot:hover::before { background: rgba(var(--c-steel-rgb), 0.55); }
.hero-dot.is-active::before { background: rgb(var(--hero-accent)); transform: scale(1.25); }

/* ---- Intro-Block unter der Schlaufe ---- */
.hero-intro { position: relative; z-index: 1; max-width: 620px; margin: clamp(2rem, 6vw, 3rem) auto 0; text-align: center; }
.hero-intro h2 { margin-bottom: 0.9rem; }
.hero-intro p + p { margin-top: 0.7rem; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 1.6rem; }

/* rotierende Schlaufen tragen die Akzentfarbe des aktiven Zustands */
@media (prefers-reduced-motion: no-preference) {
  .hero-state > * { will-change: opacity, transform; }
}

/* organische, schwebende Beziehungs-Schlaufen (Logo-Motiv) */
.hero-loop { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-loop svg { width: 100%; height: 100%; overflow: visible; }
.hero-loop .loop-path { fill: none; stroke: var(--logo-steel); stroke-width: 1.4; opacity: 0.5; }
.float-a { animation: floatA 13s ease-in-out infinite; }
.float-b { animation: floatB 17s ease-in-out infinite; }
.float-c { animation: floatC 21s ease-in-out infinite; }
@keyframes floatA { 0%,100%{ transform: translate(0,0) rotate(0deg);} 50%{ transform: translate(2%, -3%) rotate(4deg);} }
@keyframes floatB { 0%,100%{ transform: translate(0,0) rotate(0deg);} 50%{ transform: translate(-3%, 2%) rotate(-5deg);} }
@keyframes floatC { 0%,100%{ transform: translate(0,0) rotate(0deg);} 50%{ transform: translate(2%, 3%) rotate(3deg);} }
@media (prefers-reduced-motion: reduce) {
  .float-a, .float-b, .float-c { animation: none; }
}

/* Schlaufen-Farbe folgt dem aktiven Zustand */
.hero-loop .loop-path { stroke: rgb(var(--hero-accent)); transition: stroke 1.2s ease; }

/* ══════════ ANGEBOT ══════════ */
.bg-warm  { background: linear-gradient(180deg, rgba(var(--c-peach-rgb), 0.7), rgba(var(--c-blush-rgb), 0.55)); }
.bg-white { background: rgba(var(--c-white-rgb), 0.6); }
.bg-golden{ background: linear-gradient(180deg, rgba(var(--c-cream-rgb), 0.6), rgba(var(--c-peach-rgb), 0.5)); }

.cards { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.card {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 1.7rem;
  backdrop-filter: var(--blur-glass); transition: transform var(--t-med), box-shadow var(--t-med);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); }
.card::before { content: ''; position: absolute; right: -30px; bottom: -30px; width: 120px; height: 120px; border-radius: 50%; opacity: 0.12; }
.card.c-pink   { background: rgba(var(--c-pink-rgb), 0.15); border: 1px solid rgba(var(--c-pink-rgb), 0.3); }
.card.c-pink::before { background: var(--logo-pink); }
.card.c-orange { background: rgba(var(--c-orange-rgb), 0.10); border: 1px solid rgba(var(--c-orange-rgb), 0.22); }
.card.c-orange::before { background: var(--logo-orange); }
.card.c-yellow { background: rgba(var(--c-yellow-rgb), 0.14); border: 1px solid rgba(var(--c-yellow-rgb), 0.3); }
.card.c-yellow::before { background: var(--logo-yellow); }
.card.c-steel  { background: rgba(var(--c-steel-rgb), 0.10); border: 1px solid rgba(var(--c-steel-rgb), 0.22); }
.card.c-steel::before { background: var(--logo-steel); }
.card-icon { display: block; width: 44px; height: 44px; margin-bottom: 0.9rem; color: var(--amber); }
.card-icon svg { width: 100%; height: 100%; }
.card h3 { font-family: var(--font-body); font-size: var(--fs-16); font-weight: var(--fw-black); color: var(--amber); margin-bottom: 0.45rem; }
.card h3 small { display: block; font-size: var(--fs-05); font-weight: var(--fw-semi); color: var(--text-light); margin-top: 0.15rem; }
.card p { font-size: var(--fs-11); }
.card .link-arrow { margin-top: 1rem; }

/* ══════════ MODAL ══════════ */
.modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1.25rem; }
.modal.is-open { display: flex; }
.modal-overlay { position: absolute; inset: 0; background: rgba(var(--c-text-rgb), 0.45); backdrop-filter: var(--blur-overlay); }
.modal-box {
  position: relative; z-index: 1; width: 100%; max-width: 680px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(150deg, var(--modal-bg-1), var(--modal-bg-2)); border: 1px solid rgba(var(--c-pink-rgb), 0.25);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 5vw, 2.6rem); box-shadow: var(--shadow-modal);
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border: none; cursor: pointer;
  border-radius: 50%; background: rgba(var(--c-yellow-rgb), 0.28); color: var(--amber); font-size: var(--fs-17); font-weight: var(--fw-bold);
  display: grid; place-items: center;
}
.modal-box h2 { font-size: var(--fs-modal-h2); margin-bottom: 0.2rem; }
.modal-sub { font-size: var(--fs-05); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--orange); margin-bottom: 1.3rem; }
.modal-section + .modal-section { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid rgba(var(--c-pink-rgb), 0.22); }
.modal-section h4 { font-family: var(--font-body); font-size: var(--fs-07); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--amber); margin-bottom: 0.5rem; }
.modal-section p { font-size: var(--fs-12); }
.modal-list { list-style: none; }
.modal-list li { position: relative; padding: 0.25rem 0 0.25rem 1.4rem; font-size: var(--fs-11); color: var(--text-light); }
.modal-list li::before { content: '♡'; position: absolute; left: 0; top: 0.3rem; color: var(--orange); font-size: var(--fs-06); }
.modal-quote { text-align: center; font-family: var(--font-head); font-style: italic; font-size: var(--fs-18); color: var(--orange); margin: 1.4rem 0; }
.modal-contact { margin-top: 1.4rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-sm); background: rgba(var(--c-yellow-rgb), 0.15); border: 1px solid rgba(var(--c-yellow-rgb), 0.3); font-size: var(--fs-11); }
.modal-contact a { font-weight: var(--fw-bold); }

/* Untertitel unter dem Abschnittstitel (elegant, serif-kursiv) */
.section-sub { font-family: var(--font-head); font-style: italic; font-size: var(--fs-h3); color: var(--orange); margin-top: 0.25rem; }

/* Klapp-Liste (FAQ) im Modal — schliesst die Accordion-Gruppe sauber ab */
.modal-faq { margin-top: 0.6rem; }
.modal-faq .accordion:last-of-type { border-bottom: 1px solid rgba(var(--c-amber-rgb), 0.14); }
.modal-faq .modal-quote { margin: 0.8rem 0 0.2rem; font-size: var(--fs-16); }

/* Stimmen-Karussell (auto-rotierend, reduced-motion → gestapelt) */
.quote-carousel { position: relative; display: grid; margin-top: 0.4rem; }
.quote-item {
  grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(10px);
  transition: opacity 0.8s var(--ease-soft, ease), transform 0.8s var(--ease-soft, ease); pointer-events: none;
  font-family: var(--font-head); font-style: italic; font-size: clamp(1.5rem, 3.5vw, 1.8rem); line-height: 1.4; color: var(--orange);
}
.quote-item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.quote-author { display: block; margin-top: 0.7rem; font-family: var(--font-body); font-style: normal; font-size: var(--fs-05); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-light); }
.quote-dots { display: flex; gap: 0.5rem; margin-top: 1rem; }
.quote-dot { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: none; background: none; cursor: pointer; }
.quote-dot::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: rgba(var(--c-orange-rgb), 0.28); transition: background 0.3s ease, transform 0.3s ease; }
.quote-dot.is-active::before { background: var(--orange); transform: scale(1.3); }
/* reduced-motion / kein JS: alle Stimmen sichtbar gestapelt */
.quote-carousel.is-static { display: block; }
.quote-carousel.is-static .quote-item { position: static; opacity: 1; transform: none; }
.quote-carousel.is-static .quote-item + .quote-item { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(var(--c-orange-rgb), 0.18); }
.quote-carousel.is-static .quote-dots { display: none; }

/* ══════════ AKTUELLES / GALERIE ══════════ */
.gallery {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.5rem 1.25rem 1.4rem; margin: 0 -1.25rem; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gallery::-webkit-scrollbar { height: 8px; }
.gallery::-webkit-scrollbar-thumb { background: rgba(var(--c-yellow-rgb), 0.4); border-radius: var(--radius-xs); }
.tile {
  scroll-snap-align: start; flex: 0 0 min(82vw, 300px); border-radius: var(--radius); overflow: hidden;
  background: rgba(var(--c-white-rgb), 0.65); backdrop-filter: var(--blur-glass);
  border: 1px solid rgba(var(--c-pink-rgb), 0.2); display: flex; flex-direction: column;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.tile-media { aspect-ratio: 16 / 10; display: grid; place-items: center; color: #fff; }
.tile-media.m-pink   { background: linear-gradient(135deg, rgba(var(--c-pink-rgb),0.5), rgba(var(--c-yellow-rgb),0.4)); }
.tile-media.m-yellow { background: linear-gradient(135deg, rgba(var(--c-yellow-rgb),0.5), rgba(var(--c-orange-rgb),0.35)); }
.tile-media.m-steel  { background: linear-gradient(135deg, rgba(var(--c-steel-rgb),0.4), rgba(var(--c-pink-rgb),0.35)); }
.tile-media svg { width: 46px; height: 46px; opacity: 0.85; }
.tile-body { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.tile-date { font-size: var(--fs-03); font-weight: var(--fw-black); letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.tile-body h3 { font-family: var(--font-body); font-size: var(--fs-14); font-weight: var(--fw-black); color: var(--text); }
.tile-body p { font-size: var(--fs-09); }
.tile-body .link-arrow { margin-top: auto; }

/* gepinnte Instagram-Karte */
.tile-ig { border: 1px solid rgba(var(--c-orange-rgb), 0.3); }
.tile-media--widget { overflow: hidden; }
.tile-media--widget iframe { width: 100%; height: 100%; border: 0; }
.tile-ig .tile-pin { font-size: var(--fs-02); font-weight: var(--fw-black); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); display: inline-flex; align-items: center; gap: 0.3rem; }
.tile-pin svg { width: 15px; height: 15px; }
.ig-embed { aspect-ratio: 1; background: linear-gradient(135deg, var(--tile-warm-1), var(--tile-warm-2)); display: grid; place-items: center; text-align: center; padding: 1rem; }
.ig-embed svg { width: 38px; height: 38px; color: var(--orange); margin-bottom: 0.5rem; }

.gallery-hint { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; flex-wrap: wrap; }
.gallery-hint .link-arrow { white-space: nowrap; }

/* ══════════ SEITE-IN-SEITE: Detailkarten (Projekte/Laufend/Fachartikel) ══════════ */
.modal-box--wide { max-width: 780px; }
.pip-list { display: grid; gap: var(--gap); margin-top: 0.4rem; }
.pip-card {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  background: rgba(var(--c-white-rgb), 0.6); border: 1px solid rgba(var(--c-pink-rgb), 0.22);
  border-radius: var(--radius); padding: 1rem;
}
/* linke Spalte: Bild-/Flyer-Platz (Hochformat, ~A4) */
.pip-media {
  position: relative; aspect-ratio: 1 / 1.414; border-radius: var(--radius-sm); overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(var(--c-peach-rgb), 0.9), rgba(var(--c-blush-rgb), 0.8));
}
/* Bild liegt über dem Platzhalter; fehlt es, wird es per onerror entfernt */
.pip-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pip-ph { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; color: var(--orange); opacity: 0.7; text-align: center; font-size: var(--fs-04); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-tight); }
.pip-ph svg { width: 34px; height: 34px; }
.pip-body { display: flex; flex-direction: column; }
.pip-body .tile-date { margin-bottom: 0.35rem; }
.pip-body h3 { font-family: var(--font-body); font-size: var(--fs-16); font-weight: var(--fw-black); color: var(--amber); margin-bottom: 0.35rem; }
.pip-body p { font-size: var(--fs-11); }
.pip-note { list-style: none; margin-top: 0.7rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); background: rgba(var(--c-yellow-rgb), 0.14); font-size: var(--fs-09); }
.pip-note li { color: var(--text-light); }
.pip-note li + li { margin-top: 0.25rem; }
.pip-card .link-arrow { margin-top: 0.8rem; align-self: flex-start; }
.pip-download { display: inline-block; margin-top: 0.8rem; align-self: flex-start; font-size: var(--fs-08); font-weight: var(--fw-bold); color: var(--text-light); background: rgba(var(--c-steel-rgb), 0.10); border: 1px dashed rgba(var(--c-steel-rgb), 0.45); border-radius: var(--radius-pill); padding: 0.35rem 0.9rem; }

@media (min-width: 560px) {
  .pip-card { grid-template-columns: 148px 1fr; align-items: start; }
}

/* ══════════ ZUWEISENDE ══════════ */
.zuw {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(1.8rem, 5vw, 2.8rem);
  background: linear-gradient(135deg, rgba(var(--c-steel-rgb),0.12), rgba(var(--c-yellow-rgb),0.10));
  border: 1px solid rgba(var(--c-steel-rgb),0.22);
}
.zuw::before { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: rgba(var(--c-white-rgb),0.4); right: -70px; top: -70px; pointer-events: none; }
.zuw-grid { position: relative; display: grid; gap: 1.5rem; }
.zuw h2 { color: var(--steel); }
.zuw .eyebrow { background: rgba(var(--c-steel-rgb),0.16); color: var(--steel); }
.zuw-points { list-style: none; display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.zuw-points li { position: relative; padding-left: 1.5rem; font-size: var(--fs-12); color: var(--text-light); }
.zuw-points li::before { content: ''; position: absolute; left: 0; top: 0.55rem; width: 8px; height: 8px; border-radius: 50%; background: var(--steel); }
.zuw-btns { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }

/* ══════════ VEREIN ══════════ */
.verein-box {
  position: relative; overflow: hidden; text-align: center;
  border-radius: var(--radius-lg); padding: clamp(2rem, 6vw, 3.2rem) clamp(1.3rem, 4vw, 2.5rem);
  background: linear-gradient(150deg, rgba(var(--c-sand-rgb),0.22), rgba(var(--c-rose-rgb),0.18) 55%, rgba(var(--c-vanilla-rgb),0.25));
  border: 1px solid rgba(var(--c-pink-rgb),0.22); backdrop-filter: var(--blur-soft);
}
.vc { position: absolute; border-radius: 50%; border-style: solid; pointer-events: none; }
.vc1 { width: 210px; height: 210px; border: 1.5px solid rgba(var(--c-steel-rgb),0.22); top: -50px; right: -50px; }
.vc2 { width: 120px; height: 120px; border: 1px solid rgba(var(--c-yellow-rgb),0.35); top: -15px; right: -15px; }
.vc3 { width: 150px; height: 150px; border: 1.2px solid rgba(var(--c-pink-rgb),0.3); bottom: -40px; left: -40px; }
.verein-box > * { position: relative; }
.verein-box > p { max-width: 620px; margin: 0 auto; }
.verein-cta { margin-top: 1.6rem; }

.sub-label { font-family: var(--font-body); font-size: var(--fs-05); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-light); margin: 2.4rem 0 1.1rem; }

/* gestapelte Blöcke mit mehr Luft + klaren Trennlinien */
.verein-block { margin-top: clamp(2.6rem, 6vw, 4rem); padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid rgba(var(--c-amber-rgb), 0.12); }
.verein-block .sub-label { margin-top: 0; }
.verein-block .support { margin-top: 0.4rem; }
.verein-hint { font-size: var(--fs-08); color: var(--text-light); margin: -0.4rem 0 1.6rem; }

/* Vorstand-Karten (klickbar → Personen-Modal) */
.vorstand { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.vmember {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.1rem;
  cursor: pointer; font-family: inherit;
  background: rgba(var(--c-white-rgb),0.6); backdrop-filter: var(--blur-glass);
  border: 1px solid rgba(var(--c-pink-rgb),0.22); border-radius: var(--radius-md);
  padding: 1.4rem 0.8rem; transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.vmember:hover, .vmember:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(var(--c-orange-rgb),0.4); }
.v-avatar { position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; margin-bottom: 0.85rem; display: grid; place-items: center; }
.v-avatar .v-initials { color: #fff; font-family: var(--font-head); font-size: var(--fs-19); font-weight: var(--fw-semi); }
.v-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vmember .v-name { display: block; font-size: var(--fs-07); font-weight: var(--fw-black); color: var(--amber); line-height: 1.25; }
.vmember .v-role { display: block; font-size: var(--fs-03); color: var(--text-light); line-height: 1.3; margin-top: 0.2rem; }

/* Marken-Verläufe als eigenständige Klassen (Avatare + Profilbilder) */
.fg-1 { background: linear-gradient(135deg, var(--logo-orange), var(--logo-pink)); }
.fg-2 { background: linear-gradient(135deg, var(--logo-steel), var(--logo-pink)); }
.fg-3 { background: linear-gradient(135deg, var(--logo-yellow), var(--logo-pink)); }
.fg-4 { background: linear-gradient(135deg, var(--logo-pink), var(--logo-orange)); }
.fg-5 { background: linear-gradient(135deg, var(--logo-steel), var(--logo-yellow)); }
.fg-6 { background: linear-gradient(135deg, var(--logo-yellow), var(--logo-orange)); }
.fg-7 { background: linear-gradient(135deg, var(--logo-orange), var(--logo-yellow)); }

/* Personen-Modal (CV-Vorlage) */
.person-head { display: flex; gap: 1.2rem; align-items: center; text-align: left; margin-bottom: 1.1rem; }
.person-photo { position: relative; flex: 0 0 auto; width: clamp(96px, 24vw, 128px); height: clamp(96px, 24vw, 128px); border-radius: 50%; overflow: hidden; display: grid; place-items: center; }
.person-photo .person-initials { color: #fff; font-family: var(--font-head); font-size: var(--fs-20); font-weight: var(--fw-semi); }
.person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person-meta h2 { margin-bottom: 0.2rem; }
.person-role { font-size: var(--fs-05); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--orange); }
.person-bio { font-size: var(--fs-12); margin-bottom: 0.4rem; }
.cv-block { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid rgba(var(--c-pink-rgb),0.2); }
.cv-block h4 { font-family: var(--font-body); font-size: var(--fs-07); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: var(--ls-tight); color: var(--amber); margin-bottom: 0.4rem; }
.cv-list li:empty { padding-top: 0.35rem; padding-bottom: 0.35rem; }
.cv-list li:empty::after { content: ''; display: inline-block; width: 62%; max-width: 260px; border-bottom: 1px dashed rgba(var(--c-amber-rgb),0.35); vertical-align: middle; }

.beirat { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.pill { background: rgba(var(--c-yellow-rgb),0.2); border: 1px solid rgba(var(--c-yellow-rgb),0.32); border-radius: var(--radius-pill); padding: 0.4rem 1rem; font-size: var(--fs-06); font-weight: var(--fw-semi); color: var(--amber); }

/* Mitgliedschaft + Spenden */
.support { display: grid; gap: var(--gap); margin-top: 2.4rem; }
.support-card { text-align: left; border-radius: var(--radius); padding: 1.6rem; background: rgba(var(--c-white-rgb),0.6); border: 1px solid rgba(var(--c-yellow-rgb),0.25); }
.support-card h3 { font-family: var(--font-body); font-weight: var(--fw-black); font-size: var(--fs-16); color: var(--amber); margin-bottom: 0.5rem; }
.support-card p { font-size: var(--fs-11); margin-bottom: 1rem; }

/* ══════════ FOOTER ══════════ */
.footer { background: var(--footer-bg); color: rgba(var(--c-white-rgb),0.7); padding: clamp(2.4rem, 6vw, 3.2rem) 0; text-align: center; }
.footer-logo { font-family: var(--font-head); font-size: var(--fs-20); color: var(--logo-yellow); margin-bottom: 0.4rem; }
.footer p { color: rgba(var(--c-white-rgb),0.7); font-size: var(--fs-08); margin-bottom: 0.3rem; }
.footer a { color: var(--logo-yellow); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer-legal { margin-top: 1.3rem; font-size: var(--fs-04); opacity: 0.55; }
.footer-legal a { color: rgba(var(--c-white-rgb),0.7); }

/* ══════════════════════════════════════════════════
   BREAKPOINTS (mobile-first → größer)
   ══════════════════════════════════════════════════ */
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .vorstand { grid-template-columns: repeat(3, 1fr); }
  .support { grid-template-columns: repeat(2, 1fr); }
  .zuw-grid { grid-template-columns: 1.4fr 1fr; align-items: center; }
}

@media (min-width: 880px) {
  /* Desktop-Navigation: Links horizontal, kein Off-canvas */
  .nav-burger { display: none; }
  .nav-links {
    position: static; flex-direction: row; align-items: center; gap: 0.25rem;
    background: none; padding: 0; transform: none; box-shadow: none; border: none;
    backdrop-filter: none;
  }
  .nav-links a { padding: 0.55rem 0.9rem; font-size: var(--fs-10); }

  /* Hero zweispaltig: Botschaft links, Logo rechts; Indikatoren & Intro darunter zentriert */
  .hero-stage { flex-direction: row; align-items: center; text-align: left; justify-content: space-between; gap: 3rem; }
  .hero-rota { order: 1; }
  .hero-visual { order: 2; width: min(42vw, 420px); }

  .cards { grid-template-columns: repeat(4, 1fr); }
  .vorstand { grid-template-columns: repeat(4, 1fr); }
  .tile { flex-basis: 320px; }
}

@media (min-width: 1040px) {
  .vorstand { grid-template-columns: repeat(7, 1fr); }
}