/*
Theme Name: Regenbogenchor Pfalzgrafenweiler
Theme URI: https://regenbogenchor-pfalzgrafenweiler.de
Author: Maximilian Grosser
Author URI: https://regenbogenchor-pfalzgrafenweiler.de
Description: Individuelles WordPress-Theme für den Regenbogenchor Pfalzgrafenweiler – evangelischer Kinder- und Jugendchor. Einheitliches Blau-Design, responsive und barrierearm, mit Terminen, Berichten, Bildergalerie und interaktiver Chronik.
Version: 1.1.0
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: regenbogenchor
Tags: custom-menu, featured-images, translation-ready, block-styles, full-width-template
*/

/* ============================================================
   Regenbogenchor Pfalzgrafenweiler – Theme-Stylesheet
   Design: einheitliches Blau (Creme + Ozeanblau), Fonts:
   Fraunces (Überschriften) + Nunito Sans (Text).
   ============================================================ */

:root{
  /* Basis */
  --cream:#FBF8F2; --white:#ffffff; --ink:#241F1B; --ink-soft:#5f574e;
  --line:#ece4d8;
  /* Primärfarbe Blau (Variablennamen historisch „green") */
  --green:#2B6CA3; --green-dark:#235682; --green-deep:#15324a; --brown:#6F4E37;
  /* Einheitliche Blau-Palette – verschiedene Blautöne als Akzent */
  --c-red:#2B6CA3; --c-orange:#3A7CB0; --c-yellow:#5B97C6;
  --c-green:#2B6CA3; --c-blue:#3A7CB0; --c-violet:#235682;
  --rainbow:linear-gradient(90deg,#235682,#2B6CA3,#5B97C6);
  --rainbow-soft:linear-gradient(90deg,#2B6CA326,#5B97C626);
  --num-light:#E6F0F8;
  /* Form */
  --radius:18px; --radius-lg:28px; --radius-pill:999px;
  --shadow:0 10px 30px rgba(36,31,27,.08);
  --shadow-lg:0 24px 56px rgba(36,31,27,.16);
  --container:1180px;
  --font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Nunito Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --header-h:74px;
  /* Foto-Platzhalter-Verläufe */
  --g1:linear-gradient(135deg,#3A7CB0,#2B6CA3);
  --g2:linear-gradient(135deg,#2B6CA3,#235682);
  --g3:linear-gradient(135deg,#5B97C6,#2B6CA3);
  --g4:linear-gradient(135deg,#6BA8D6,#3A7CB0);
  --g5:linear-gradient(135deg,#235682,#15324a);
  --g6:linear-gradient(135deg,#2B6CA3,#3A7CB0);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--cream); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:var(--green); text-decoration:none}
a:hover{color:var(--green-dark)}
ul{margin:0; padding:0; list-style:none}
button{font-family:inherit; cursor:pointer; border:none; background:none}
h1,h2,h3,h4{font-family:var(--font-head); font-weight:600; line-height:1.12; color:var(--ink); margin:0 0 .4em}
h1{font-size:clamp(2.1rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--c-blue); outline-offset:3px; border-radius:6px}

/* ---------- Layout ---------- */
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(18px,4vw,32px)}
.section{padding-block:clamp(48px,7vw,88px)}
.section--tint{background:
   radial-gradient(120% 80% at 100% 0%, #e9f1f8 0%, transparent 55%),
   radial-gradient(100% 80% at 0% 100%, #eef4fb 0%, transparent 55%),
   var(--cream)}
.section__head{max-width:640px; margin-bottom:clamp(26px,4vw,46px)}
.section__head.center{margin-inline:auto; text-align:center}
.kicker{display:inline-block; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  font-size:.74rem; color:var(--green); margin-bottom:.7rem; position:relative; padding-bottom:.5rem}
.kicker::after{content:""; position:absolute; left:0; bottom:0; width:46px; height:4px;
  border-radius:4px; background:var(--rainbow)}
.center .kicker::after{left:50%; transform:translateX(-50%)}
.lead{font-size:1.12rem; color:var(--ink-soft)}
.skip-link{position:absolute; left:-999px; top:8px; background:var(--green); color:#fff;
  padding:10px 16px; border-radius:8px; z-index:200}
.skip-link:focus{left:8px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; font-weight:800; font-size:1rem;
  padding:.8em 1.5em; border-radius:var(--radius-pill); transition:.25s transform,.25s box-shadow,.25s background;
  border:2px solid transparent}
.btn svg{width:1.1em; height:1.1em}
.btn--primary{background:var(--green); color:#fff; box-shadow:0 8px 20px rgba(47,110,79,.28)}
.btn--primary:hover{background:var(--green-dark); color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(47,110,79,.34)}
.btn--ghost{background:transparent; color:var(--green); border-color:var(--green)}
.btn--ghost:hover{background:var(--green); color:#fff; transform:translateY(-2px)}
.btn--light{background:#fff; color:var(--green)}
.btn--light:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.link-more{display:inline-flex; align-items:center; gap:.35em; font-weight:800; color:var(--green)}
.link-more::after{content:"→"; transition:transform .25s}
.link-more:hover::after{transform:translateX(4px)}

/* ---------- Badges / Chips ---------- */
.badge{display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:#fff; padding:.32em .8em; border-radius:var(--radius-pill)}
.badge--konzert{background:var(--c-red)}
.badge--musical{background:var(--c-violet)}
.badge--chorleben{background:var(--c-blue)}
.badge--allgemein{background:var(--c-green)}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{font-weight:700; font-size:.92rem; padding:.5em 1.1em; border-radius:var(--radius-pill);
  background:#fff; border:1.5px solid var(--line); color:var(--ink-soft); transition:.2s}
.chip:hover{border-color:var(--green); color:var(--green)}
.chip.is-active{background:var(--green); border-color:var(--green); color:#fff}

/* ---------- Foto-Platzhalter ---------- */
.ph{position:relative; border-radius:var(--radius); overflow:hidden; background:var(--g3);
  display:grid; place-items:center; min-height:180px; color:#fff; isolation:isolate}
.ph--1{background:var(--g1)} .ph--2{background:var(--g2)} .ph--3{background:var(--g3)}
.ph--4{background:var(--g4)} .ph--5{background:var(--g5)} .ph--6{background:var(--g6)}
.ph::before{content:"♪"; position:absolute; right:-6px; bottom:-22px; font-size:8rem;
  font-family:var(--font-head); color:rgba(255,255,255,.16); z-index:-1; line-height:1}
.ph__tag{font-size:.8rem; font-weight:800; letter-spacing:.03em; background:rgba(0,0,0,.28);
  padding:.4em .9em; border-radius:var(--radius-pill); backdrop-filter:blur(2px)}

/* ============================================================
   Header / Navigation
   ============================================================ */
.rainbow-bar{height:5px; background:var(--rainbow)}
.site-header{position:sticky; top:0; z-index:100; background:rgba(251,248,242,.9);
  border-bottom:1px solid transparent; transition:.3s}
/* Blur als Pseudo-Element, damit der Header KEIN Containing-Block für das
   fixierte mobile Menü wird (sonst klappt das Off-Canvas-Menü zusammen). */
.site-header::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.site-header.is-scrolled{background:rgba(251,248,242,.97); box-shadow:0 6px 22px rgba(36,31,27,.08);
  border-bottom-color:var(--line)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:var(--header-h); transition:height .3s}
.is-scrolled .header-inner{height:62px}
.brand img{height:42px; width:auto; transition:height .3s}
.is-scrolled .brand img{height:36px}
.nav{display:flex; align-items:center; gap:4px}
.nav a{color:var(--ink); font-weight:700; padding:.55em .85em; border-radius:10px; position:relative; transition:.2s}
.nav a:hover{color:var(--green); background:#fff6}
.nav a.is-active{color:var(--green)}
.nav a.is-active::after{content:""; position:absolute; left:.85em; right:.85em; bottom:.2em;
  height:3px; border-radius:3px; background:var(--rainbow)}
.has-sub{position:relative}
.has-sub > a::after{content:" ▾"; font-size:.7em; color:var(--ink-soft)}
.submenu{position:absolute; top:100%; left:0; min-width:200px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:.2s}
.has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1; visibility:visible; transform:none}
.submenu a{display:block; border-radius:8px}
.header-actions{display:flex; align-items:center; gap:8px}
.icon-btn{width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  color:var(--green); background:#fff; border:1px solid var(--line); transition:.2s}
.icon-btn:hover{background:var(--green); color:#fff; transform:translateY(-2px)}
.icon-btn svg{width:20px; height:20px}
.nav-toggle{display:none}

/* (Mobile Tab-Leiste entfernt – auf dem Handy genügt das Burger-Menü.) */

/* ============================================================
   Hero / Karussell
   ============================================================ */
/* Foto-Karussell mit kurzer Bildunterschrift + Button IM Bild */
.hero{padding-block:clamp(22px,3.5vw,40px)}
.hero__stage{position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg)}
.slides{position:relative; height:clamp(300px,46vw,470px)}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .8s ease}
.slide.is-active{opacity:1; z-index:2}
.slide__img{position:absolute; inset:0}
.slide.is-active .slide__img{animation:kenburns 9s ease-out both}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.12)}}
.slide::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,transparent 42%,rgba(12,28,20,.72) 100%)}
.slide__overlay{position:absolute; z-index:3; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:clamp(16px,3vw,28px)}
.slide__cap{color:#fff; font-family:var(--font-head); font-weight:600; margin:0;
  font-size:clamp(1.05rem,2vw,1.45rem); text-shadow:0 1px 12px rgba(0,0,0,.45)}
.btn--sm{padding:.5em 1.05em; font-size:.9rem}
.hero-dots{position:absolute; z-index:5; top:14px; left:50%; transform:translateX(-50%); display:flex; gap:9px}
.hero-dots button{width:9px; height:9px; border-radius:50%; background:#ffffff8c; transition:.25s}
.hero-dots button.is-active{background:#fff; width:26px; border-radius:6px}
.hero-arrow{position:absolute; z-index:5; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; background:#ffffff2b; color:#fff;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:grid; place-items:center; transition:.25s; border:1px solid #ffffff40}
.hero-arrow:hover{background:#ffffff45}
.hero-arrow.prev{left:14px} .hero-arrow.next{right:14px}
.hero-arrow svg{width:20px;height:20px}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ============================================================
   Karten / Grids
   ============================================================ */
.grid{display:grid; gap:26px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .28s, box-shadow .28s; display:flex; flex-direction:column}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.card .ph{border-radius:0; min-height:200px}
.card__body{padding:22px 22px 26px; display:flex; flex-direction:column; gap:.5rem; flex:1}
.card__meta{display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--ink-soft)}
.card__title{margin:0}
.card a.card__title-link{color:var(--ink)} .card a.card__title-link:hover{color:var(--green)}
.card__excerpt{color:var(--ink-soft); font-size:.98rem; margin:0}
.card__foot{margin-top:auto; padding-top:.6rem}

/* ---------- Aktuelles (Feature) ---------- */
.feature{display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:#fff;
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow)}
.feature .ph{border-radius:0; min-height:340px; height:100%}
.feature__body{padding:clamp(26px,4vw,46px); display:flex; flex-direction:column; gap:1rem; align-self:center}
.feature__body h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
/* „Aktuelles": Abstand zwischen großem Beitrag und den kleinen Karten */
.news-grid{margin-top:clamp(22px,3.5vw,34px)}
/* Handy: nur 3 Beiträge zeigen (großer + 2 kleine) – die 3. Karte ausblenden */
@media (max-width:680px){ .news-grid > *:nth-child(3){display:none} }

/* ============================================================
   Zahlen & Fakten
   ============================================================ */
.facts{background:
   radial-gradient(120% 140% at 0% 0%, #2B6CA3 0%, #235682 60%, #15324a 100%);
  color:#fff; position:relative; overflow:hidden}
.facts::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--rainbow)}
.facts__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center}
.fact__num{font-family:var(--font-head); font-weight:600; font-size:clamp(2.6rem,6vw,4rem); line-height:1;
  color:var(--num-light)}
.fact__label{font-weight:700; color:#e7eff7; margin-top:.5rem; letter-spacing:.02em}

/* ============================================================
   Zeitleiste (Geschichte)
   ============================================================ */
.timeline{position:relative; max-width:880px; margin-inline:auto; padding-block:10px}
.timeline::before{content:""; position:absolute; top:0; bottom:0; left:50%; width:4px; transform:translateX(-50%);
  background:var(--rainbow); border-radius:4px; opacity:.5}
.tl-item{position:relative; width:50%; padding:14px 40px; margin-bottom:8px}
.tl-item:nth-child(odd){left:0; text-align:right}
.tl-item:nth-child(even){left:50%}
.tl-dot{position:absolute; top:24px; width:18px; height:18px; border-radius:50%;
  background:#fff; border:4px solid var(--green); box-shadow:0 0 0 4px var(--cream)}
.tl-item:nth-child(odd) .tl-dot{right:-9px}
.tl-item:nth-child(even) .tl-dot{left:-9px}
.tl-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 20px; overflow:hidden}
.tl-year{font-family:var(--font-head); font-weight:700; color:var(--green); font-size:1.5rem; line-height:1}
.tl-card h3{margin:.3rem 0 .35rem}
.tl-card p{margin:0; color:var(--ink-soft); font-size:.96rem}
.tl-card .ph{margin-top:12px; min-height:130px}
/* Mini-Timeline (Teaser auf Startseite) */
.tl-mini{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.tl-mini__item{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;
  border-top:5px solid var(--c-green)}
.tl-mini__item:nth-child(1){border-top-color:var(--c-red)}
.tl-mini__item:nth-child(2){border-top-color:var(--c-orange)}
.tl-mini__item:nth-child(3){border-top-color:var(--c-blue)}
.tl-mini__item:nth-child(4){border-top-color:var(--c-violet)}

/* ============================================================
   Termine
   ============================================================ */
.event{display:flex; gap:20px; align-items:center; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 20px; margin-bottom:14px; transition:.25s}
.event:hover{transform:translateX(4px); box-shadow:var(--shadow-lg)}
.event__date{flex:0 0 78px; text-align:center; background:var(--cream); border-radius:14px; padding:10px 6px;
  border:1px solid var(--line)}
.event__day{font-family:var(--font-head); font-size:1.8rem; font-weight:700; line-height:1; color:var(--green)}
.event__mon{font-weight:800; text-transform:uppercase; font-size:.72rem; letter-spacing:.08em; color:var(--ink-soft)}
.event__body{flex:1}
.event__body h3{margin:0 0 .2rem; font-size:1.2rem}
.event__desc{display:block; color:var(--ink-soft); font-size:.96rem; margin:0 0 .35rem}
.event__meta{color:var(--ink-soft); font-size:.92rem; display:flex; flex-wrap:wrap; gap:14px}
.event__more{display:inline-block; margin-top:.5rem; font-weight:800; font-size:.86rem; color:var(--green)}
.event:hover .event__more{text-decoration:underline; text-underline-offset:3px}
/* Termin ohne verknüpften Beitrag: nicht klickbar */
.event--static{cursor:default}
.event--static:hover{transform:none; box-shadow:var(--shadow)}
.event__status{font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  padding:.3em .8em; border-radius:var(--radius-pill)}
.event__status.kommend{background:#e7f0f9; color:var(--green)}
.event__status.vergangen{background:#f1ece4; color:var(--brown)}

/* ============================================================
   Mitsingen-Band
   ============================================================ */
.cta-band{position:relative; overflow:hidden; background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow); display:grid; grid-template-columns:1fr 320px; align-items:stretch}
.cta-band__body{padding:clamp(28px,4vw,52px)}
.cta-band__art{position:relative; min-height:220px; background:
   radial-gradient(circle at 50% 40%, #6BA8D6 0%, #2B6CA3 55%, #235682 100%)}
.cta-band__art .ph__tag{position:absolute; left:16px; bottom:14px}

/* ============================================================
   Bilder / Galerie
   ============================================================ */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.gallery .ph{cursor:pointer; min-height:210px; transition:transform .28s, box-shadow .28s}
.gallery .ph:hover{transform:scale(1.02); box-shadow:var(--shadow-lg)}
.album-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.album{cursor:pointer}
.album .ph{min-height:220px}
.album__title{font-weight:800; margin-top:10px; color:var(--ink)}
.album__count{color:var(--ink-soft); font-size:.88rem}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed; inset:0; background:rgba(23,28,24,.92); z-index:300; display:none;
  place-items:center; padding:30px}
.lightbox.is-open{display:grid}
.lightbox__stage{width:min(900px,92vw); height:min(70vh,640px); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-lg)}
.lightbox__stage .ph{height:100%; border-radius:0}
.lightbox__cap{color:#fff; text-align:center; margin-top:14px; font-weight:700}
.lightbox__close{position:absolute; top:18px; right:22px; color:#fff; font-size:2rem; width:48px; height:48px;
  border-radius:50%; background:#ffffff22}
.lightbox__nav{position:absolute; top:50%; transform:translateY(-50%); color:#fff; width:54px; height:54px;
  border-radius:50%; background:#ffffff22; font-size:1.6rem; display:grid; place-items:center}
.lightbox__nav.prev{left:20px} .lightbox__nav.next{right:20px}

/* ============================================================
   Inhaltsseiten (Page Hero, Prosa)
   ============================================================ */
.page-hero{background:
   radial-gradient(120% 120% at 100% 0%, #eef4fb 0%, transparent 60%), var(--cream);
  padding-block:clamp(34px,5vw,60px); border-bottom:1px solid var(--line)}
.breadcrumb{font-size:.86rem; color:var(--ink-soft); margin-bottom:.6rem}
.breadcrumb a{color:var(--ink-soft)} .breadcrumb a:hover{color:var(--green)}
.prose{max-width:760px}
.prose p{font-size:1.06rem}
.prose h2,.prose h3{margin-top:1.6em}
.two-col{display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start}
.info-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;
  border-left:5px solid var(--green)}
.group-card{background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden}
.group-card .ph{min-height:170px; border-radius:0}
.group-card .group-card__body{padding:22px}
.person{display:flex; gap:16px; align-items:center; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px}
.person .avatar{flex:0 0 76px; height:76px; border-radius:50%; overflow:hidden}
.person .avatar .ph{min-height:76px; border-radius:0}
.person h3{margin:0} .person p{margin:.2rem 0 0; color:var(--ink-soft); font-size:.92rem}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{background:var(--green-deep); color:#d6e3f0; margin-top:40px}
.site-footer a{color:#d6e3f0} .site-footer a:hover{color:#fff}
.site-footer .muted{color:#d6e3f0}
.footer-top{height:6px; background:var(--rainbow)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:36px; padding-block:54px}
.footer-grid h4{font-family:var(--font-head); color:#fff; font-size:1.1rem; margin:0 0 1rem}
.footer-brand img{height:40px; margin-bottom:14px}
.footer-brand .footer-logo--default{filter:brightness(0) invert(1)}
/* Quadratisches Vereinslogo unten groß zeigen */
.footer-brand .footer-logo--custom{height:auto; width:140px; max-width:60%; aspect-ratio:1/1; object-fit:contain; border-radius:12px}
.footer-grid li{margin-bottom:.5rem}
.footer-social{display:flex; gap:10px; margin-top:6px}
.footer-social a{width:42px; height:42px; border-radius:50%; background:#ffffff1a; display:grid; place-items:center}
.footer-social a:hover{background:#ffffff33}
.footer-social svg{width:20px; height:20px; color:#fff}
.footer-bottom{border-top:1px solid #ffffff1f; padding-block:20px; display:flex; flex-wrap:wrap;
  justify-content:space-between; gap:10px; font-size:.86rem; color:#a3b8cf}
.footer-bottom a{color:#a3b8cf}

/* ============================================================
   Reveal-Animationen
   ============================================================ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.08s} .reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s} .reveal[data-d="4"]{transition-delay:.32s}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .grid--3,.tl-mini,.gallery,.album-grid,.facts__grid{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr} .feature .ph{min-height:240px}
  .cta-band{grid-template-columns:1fr} .cta-band__art{min-height:220px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  /* Timeline -> einspaltig */
  .timeline::before{left:18px}
  .tl-item{width:100%; left:0 !important; text-align:left !important; padding-left:46px; padding-right:0}
  .tl-item .tl-dot{left:9px !important; right:auto !important}
}
@media (max-width:680px){
  body{font-size:16px}
  .nav{display:none}
  .nav-toggle{display:grid}
  /* Off-canvas Menü */
  .nav.is-open{display:flex; position:fixed; inset:var(--header-h) 0 0 auto; width:min(78vw,320px);
    flex-direction:column; align-items:stretch; background:var(--cream); padding:18px;
    box-shadow:var(--shadow-lg); gap:4px; z-index:120; overflow-y:auto}
  .nav.is-open a{padding:.9em 1em; border-radius:12px}
  .nav.is-open .submenu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:none; padding-left:12px}
  .grid--3,.grid--2,.tl-mini,.gallery,.album-grid,.facts__grid,.footer-grid{grid-template-columns:1fr}
  .facts__grid{gap:26px}
  /* Termin-Zeilen sauber umbrechen: kompaktes Status-Pill in eigener Zeile */
  .event{flex-wrap:wrap; gap:10px 16px}
  .event__body{flex:1 1 auto; min-width:calc(100% - 94px)}
  .event__status{order:3; margin-left:94px}
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .slide.is-active .slide__img{animation:none}
}

/* ============================================================
   Ergänzende Komponenten (Suche, Toolbar, Seitenblättern)
   ============================================================ */
.toolbar{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between;
  margin-bottom:30px}
.searchbar{display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid var(--line);
  border-radius:var(--radius-pill); padding:.45em .6em .45em 1.1em; min-width:240px; transition:.2s}
.searchbar:focus-within{border-color:var(--green); box-shadow:0 0 0 4px #2b6ca31f}
.searchbar input{border:none; outline:none; font:inherit; background:transparent; flex:1; color:var(--ink)}
.searchbar button{width:38px; height:38px; border-radius:50%; background:var(--green); color:#fff;
  display:grid; place-items:center}
.searchbar button svg{width:18px; height:18px}
.pagination{display:flex; gap:8px; justify-content:center; margin-top:40px}
.pagination a,.pagination span{min-width:42px; height:42px; padding:0 12px; border-radius:12px;
  display:grid; place-items:center; font-weight:800; background:#fff; border:1.5px solid var(--line); color:var(--ink-soft)}
.pagination a:hover{border-color:var(--green); color:var(--green)}
.pagination .is-current{background:var(--green); border-color:var(--green); color:#fff}
.muted{color:var(--ink-soft)}
.tag-list{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 0}
.divider{height:1px; background:var(--line); border:0; margin:40px 0}
.prose-img{margin:26px 0; border-radius:var(--radius); overflow:hidden}
.prose-img .ph{min-height:300px}

/* ============================================================
   WordPress-Kompatibilität & Inhalts-Stile
   ============================================================ */
.screen-reader-text{border:0; clip:rect(1px,1px,1px,1px); -webkit-clip-path:inset(50%); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute!important; word-wrap:normal!important}
.screen-reader-text:focus{background:#fff; clip:auto!important; clip-path:none; color:var(--green); display:block;
  font-size:1rem; font-weight:700; height:auto; left:8px; line-height:normal; padding:14px 18px; top:8px; width:auto; z-index:100000; border-radius:8px}
.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){ .admin-bar .site-header{top:46px} }

/* Block-Ausrichtungen */
.alignfull{margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:100vw}
.alignwide{margin-left:calc(50% - 47vw); margin-right:calc(50% - 47vw); max-width:94vw}
.alignleft{float:left; margin:.4rem 1.4rem 1rem 0}
.alignright{float:right; margin:.4rem 0 1rem 1.4rem}
.aligncenter{display:block; margin-left:auto; margin-right:auto}

/* Inhalt aus dem Editor (the_content) */
.prose img{height:auto; border-radius:var(--radius)}
.prose figure{margin:1.6rem 0}
.prose figcaption,.wp-caption-text,.wp-element-caption{font-size:.86rem; color:var(--ink-soft); text-align:center; margin-top:.5rem}
.prose ul,.prose ol{margin:0 0 1rem; padding-left:1.3rem}
.prose li{margin-bottom:.4rem}
.prose blockquote{margin:1.6rem 0; padding:.4rem 0 .4rem 1.3rem; border-left:4px solid var(--green);
  font-style:italic; color:var(--ink-soft)}
.prose a{text-decoration:underline; text-underline-offset:3px}
.prose h2,.prose h3,.prose h4{scroll-margin-top:90px}
.wp-caption{max-width:100%}
.sticky,.bypostauthor{display:block}
.post-password-form input[type="password"]{padding:.6em 1em; border:1.5px solid var(--line); border-radius:10px}

/* Galerie-Block → Lightbox-Optik */
.wp-block-gallery{margin:1.6rem 0}
figure.wp-block-image{margin:1.6rem 0}
.lightbox__stage img{width:100%; height:100%; object-fit:contain; display:block; background:#0d1018}

/* ============================================================
   WordPress-Navigation an das Design anpassen (ul/li/sub-menu)
   ============================================================ */
.nav, .nav ul{list-style:none; margin:0; padding:0}
.nav li{position:relative}
.nav .sub-menu{position:absolute; top:100%; left:0; min-width:210px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.2s; z-index:30}
.nav .menu-item-has-children:hover > .sub-menu,
.nav .menu-item-has-children:focus-within > .sub-menu{opacity:1; visibility:visible; transform:none}
.nav .sub-menu a{display:block; border-radius:8px}
.nav .menu-item-has-children > a::after{content:"▾"; margin-left:.3em; font-size:.7em; color:var(--ink-soft)}
.nav > li.current-menu-item > a,
.nav > li.current-menu-ancestor > a,
.nav > li.current_page_item > a,
.nav > li.current_page_parent > a{color:var(--green)}
.footer-menu{list-style:none; margin:0; padding:0}
.footer-menu li{margin-bottom:.5rem}
@media (max-width:680px){
  .nav.is-open .sub-menu{position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; padding-left:12px}
}

/* ============================================================
   Echte Bilder (WordPress) – Karten, Hero, Galerie
   ============================================================ */
.card__media{display:block; aspect-ratio:3/2; overflow:hidden; background:var(--g3)}
.card__media img{width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block; transition:transform .4s}
/* Hochformat-Bilder (Plakate): ganzes Bild zeigen, weichgezeichnete Füllung dahinter */
.card__media--portrait{position:relative; background:var(--g3)}
.card__media--portrait::before{content:""; position:absolute; inset:0; background:var(--rgc-bg) center/cover no-repeat; filter:blur(20px) brightness(.7); transform:scale(1.15); z-index:0}
.card__media--portrait img{position:relative; z-index:1; object-fit:contain; object-position:center}

.card:hover .card__media img{transform:scale(1.05)}
.card__media .ph{height:100%; min-height:0; border-radius:0}

.feature__media{position:relative; min-height:340px; overflow:hidden; background:var(--g3)}
.feature__media img{width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block}
.feature__media .ph{height:100%; min-height:340px; border-radius:0}

.slide__img{object-fit:cover; width:100%; height:100%}

.gallery__item{display:block; aspect-ratio:1/1; border-radius:var(--radius); overflow:hidden;
  position:relative; box-shadow:var(--shadow)}
.gallery__item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s}
.gallery__item:hover img{transform:scale(1.05)}
.gallery__item .ph{height:100%; min-height:0; border-radius:0}

.album__link{display:block; aspect-ratio:3/2; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.album__link img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s}
.album:hover .album__link img{transform:scale(1.04)}
.album__link .ph{height:100%; min-height:0; border-radius:0}
.album__title a{color:var(--ink)}
.album__title a:hover{color:var(--green)}

.event__meta svg{width:1em; height:1em; vertical-align:-2px; margin-right:3px}

/* the_posts_pagination an die .pagination-Optik anpassen */
.pagination .nav-links{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.pagination .page-numbers.current{background:var(--green); border-color:var(--green); color:#fff}
.pagination .page-numbers.dots{border:0; background:transparent}

/* Über den Customizer gesetzte Bilder (Gruppen, Leitung, Mitsingen-Band) */
.group-card__media{aspect-ratio:3/2; overflow:hidden; background:var(--g3)}
.group-card__media img{width:100%; height:100%; object-fit:cover; object-position:center 28%; display:block}
.group-card__media .ph{height:100%; min-height:0; border-radius:0}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.cta-band__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}