/* =========================================================
   Sapurana e.V. - Design-System
   Farben + Typografie aus dem Corporate Design (CD-Ordner).
   Headlines Montserrat, Fliesstext Lato. Warm, hell, erdig, zen.
   ========================================================= */

:root{
  --amber:#FFB700;        /* NUR im Logo. NICHT in Web-Copy/CSS verwenden (feste Vorgabe Alexander). */
  --terra:#C1554E;        /* Button und Link */
  --terra-dark:#a8453f;   /* Hover */
  --ink:#2B2B2B;          /* Textfarbe */
  --cream:#FFEDCB;        /* Sektionsbaender */
  --cream-soft:#FBF4E9;   /* zarter Cremeton */
  --gold-brown:#A88A5B;
  --taupe:#B6A999;
  --terra-brown:#A66F5B;
  --aubergine:#402E32;    /* dunkler Anker */
  --petrol:#006E61;       /* Sekundaer-Button */
  --petrol-dark:#015A4F;
  --grey:#DFE0DF;
  --white:#ffffff;

  --maxw:1400px;
  --radius:10px;
  --shadow:0 18px 50px rgba(64,46,50,.14);
  --ff-head:"Montserrat", system-ui, sans-serif;
  --ff-body:"Lato", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--ff-body); color:var(--ink);
  font-size:17px; line-height:1.65; background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--terra); text-decoration:none}
a:hover{color:var(--terra-dark)}

h1,h2,h3,h4{font-family:var(--ff-head); color:var(--ink); font-weight:600; line-height:1.15; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5vw,3.4rem); font-weight:500}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; width:100%}
.section{padding:84px 0}
.section.tight{padding:56px 0}
.section.cream{background:var(--cream-soft)}
.section.cream-strong{background:var(--cream)}
.center{text-align:center}
.lead{font-size:1.18rem; max-width:62ch}
.center .lead{margin-left:auto; margin-right:auto}
.eyebrow{font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.22em; font-size:.78rem; font-weight:600; color:var(--terra)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--ff-head); font-weight:600;
  font-size:.92rem; letter-spacing:.04em;
  padding:14px 30px; border-radius:var(--radius); cursor:pointer; border:0;
  background:var(--terra); color:var(--cream); transition:.2s; text-align:center;
}
.btn:hover{background:var(--terra-dark); color:var(--white); transform:translateY(-1px)}
.btn-petrol{background:var(--petrol); color:#eafaf6}
.btn-petrol:hover{background:var(--petrol-dark); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink); color:#fff}
.btn-lg{padding:16px 38px; font-size:1rem}

/* ---------- Header ---------- */
.staging-banner{background:var(--aubergine); color:#fff; text-align:center; font-size:.82rem; padding:6px}
.site-head{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.96); backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid var(--grey)}
.head-inner{display:flex; align-items:center; gap:28px; min-height:98px}
.brand img{height:70px; width:auto; transition:transform .3s ease}
.brand:hover img{transform:scale(1.04)}
.nav{display:flex; align-items:center; gap:24px; margin-left:auto}
.nav>a{font-family:var(--ff-head); font-weight:500; font-size:.94rem; color:var(--ink); white-space:nowrap}
.nav>a:hover{color:var(--terra)}
.nav .nav-cta{display:none}
.btn-head{padding:11px 24px}
.head-inner>.btn-head{margin-left:4px}
.burger{display:none; flex-direction:column; gap:5px; background:0; padding:8px; margin-left:auto}
.burger span{width:26px; height:2px; background:var(--ink); transition:.25s}

/* aktiver Navigationspunkt ueber body-Klasse */
body.page-verein    .nav>a[data-nav="verein"],
body.page-symposium .nav>a[data-nav="symposium"],
body.page-retreat   .nav>a[data-nav="retreat"],
body.page-mitglied  .nav>a[data-nav="mitglied"],
body.page-spende    .nav>a[data-nav="spende"],
body.page-erasmus   .nav>a[data-nav="erasmus"]{color:var(--terra); font-weight:600}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; min-height:clamp(420px,62vh,640px); display:flex; align-items:center; justify-content:center; text-align:center; color:#fff}
.hero .bg{position:absolute; inset:0; background-size:cover; background-position:center}
.hero-slides{position:absolute; inset:0}
.hero-slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease}
.hero-slide.is-active{opacity:1}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(40,30,25,.28),rgba(40,30,25,.42))}
.hero .wrap{position:relative; z-index:2}
.hero .hero-inner{padding:40px 0}
.hero h1{color:#fff; text-transform:uppercase; letter-spacing:.14em; font-weight:400; text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero .sub{font-family:var(--ff-head); font-weight:300; text-transform:uppercase; letter-spacing:.18em; font-size:clamp(1rem,2.2vw,1.5rem); text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hero .hero-cta{margin-top:26px; display:flex; gap:14px; flex-wrap:wrap}

/* Startseiten-Hero: Headline links in der dunklen Zone, Verlauf von links */
body.page-home .hero{justify-content:flex-start; text-align:left}
body.page-home .hero::after{background:linear-gradient(90deg,rgba(30,18,20,.74) 0%,rgba(30,18,20,.5) 28%,rgba(30,18,20,.2) 55%,rgba(30,18,20,0) 82%)}
body.page-home .hero .hero-inner{max-width:620px}
body.page-home .hero h1{font-size:clamp(2.4rem,5.6vw,4rem)}

/* Seiten-Hero (Unterseiten, kompakter) */
.page-hero{padding:64px 0 36px}
.page-hero .eyebrow{margin-bottom:10px; display:block}
.page-hero .lead{max-width:70ch; font-size:1.12rem; color:#4f4843; margin-top:.2em}
.page-hero .hero-cta{margin-top:26px; display:flex; gap:14px; flex-wrap:wrap}

/* Helles, randvolles Hero-Banner direkt unter dem Seiten-Hero */
.hero-banner{margin:0}
.hero-banner img{width:100%; height:clamp(300px,44vw,560px); object-fit:cover; object-position:center 40%; display:block}

/* ---------- Event-Karten ---------- */
/* Event-Karten = echte Key-Visual-Banner (Text ist im Bild) + Button darunter */
.event-tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; margin-top:50px}
.etile{display:flex; flex-direction:column; align-items:center; gap:20px}
.etile-img{display:block; width:100%; border-radius:18px; overflow:hidden; box-shadow:var(--shadow); background:var(--cream)}
.etile-img img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.etile-img:hover img{transform:scale(1.05)}

/* ---------- Split (Text + Bild) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center}
.split.media-right .media{order:2}
.split .media img{border-radius:14px; box-shadow:var(--shadow); width:100%; object-fit:cover}
.split .copy h2{margin-bottom:.4em}

/* ---------- Dunkles CTA-Band ---------- */
.cta-band{position:relative; text-align:center; color:#fff; padding:96px 0}
.cta-band .bg{position:absolute; inset:0; background-size:cover; background-position:center}
.cta-band::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(40,30,25,.78),rgba(40,30,25,.86))}
.cta-band .wrap{position:relative; z-index:2}
.cta-band h2{color:#fff}
.cta-band p{font-size:1.15rem; opacity:.92; max-width:48ch; margin:0 auto 24px}

/* ---------- Galerie ---------- */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px}
.gallery a{display:block; aspect-ratio:1/1; overflow:hidden; border-radius:10px; background:var(--grey)}
.gallery img{width:100%; height:100%; object-fit:cover; transition:.4s}
.gallery a:hover img{transform:scale(1.06)}
.gallery .ph{display:flex; align-items:center; justify-content:center; height:100%; color:#fff; font-family:var(--ff-head); font-size:.8rem; background:linear-gradient(135deg,var(--taupe),var(--gold-brown))}

/* ---------- Footer ---------- */
.site-foot{background:var(--cream-soft); border-top:1px solid var(--grey)}
.foot-inner{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:48px; padding-block:64px 40px; align-items:start}
.foot-brand img{height:78px; margin-bottom:16px}
.foot-brand .tagline{font-size:.98rem; line-height:1.7; max-width:36ch; color:#5f5853; margin:0 0 14px}
.foot-brand address{font-style:normal; line-height:1.7; font-size:.95rem}
.foot-col h4{font-family:var(--ff-head); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--terra); margin:0 0 16px}
.foot-col a{display:block; color:var(--ink); font-family:var(--ff-head); font-weight:500; font-size:.98rem; padding:5px 0; transition:.2s}
.foot-col a:hover{color:var(--terra); transform:translateX(4px)}
.foot-base{border-top:1px solid var(--grey); padding:18px 0; font-size:.82rem; color:#7a736e; text-align:center}

/* ---------- Content-Bausteine (Unterseiten) ---------- */
.prose{max-width:64ch}
.prose.center{margin-left:auto; margin-right:auto}
.prose-wide{max-width:none}
.feature-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-top:36px}
.feature{background:var(--white); border:1px solid var(--grey); border-radius:12px; padding:26px 26px 24px}
.feature h3{font-size:1.12rem; margin-bottom:.35em; color:var(--terra)}
.feature p{margin:0; font-size:.98rem}
.checklist{list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px}
.checklist li{position:relative; padding-left:34px; font-size:1.05rem}
.checklist li::before{content:""; position:absolute; left:0; top:.5em; width:16px; height:16px; border-radius:50%; background:var(--terra); box-shadow:0 0 0 4px rgba(193,85,78,.18)}
.highlight{background:var(--aubergine); color:#fff; border-radius:16px; padding:48px 44px; display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center}
.highlight .num{font-family:var(--ff-head); font-weight:700; font-size:clamp(3rem,7vw,5rem); color:var(--gold-brown); line-height:1}
.highlight h2{color:#fff; margin-bottom:.4em}
.highlight p{margin:0; opacity:.92}

/* ---------- Bewegung / Animation ---------- */
.reveal{opacity:0; transform:translateY(28px)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: no-preference){
  .reveal{transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal[data-delay="1"]{transition-delay:.12s}
  .reveal[data-delay="2"]{transition-delay:.24s}
  .reveal[data-delay="3"]{transition-delay:.36s}
  /* langsamer Ken-Burns-Zoom im Hero */
  .hero .bg{animation:kenburns 28s ease-out both}
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .nav{position:fixed; inset:84px 0 auto 0; background:#fff; flex-direction:column; align-items:flex-start; gap:0; padding:8px 0; border-bottom:1px solid var(--grey); box-shadow:0 20px 40px rgba(0,0,0,.12); display:none}
  .nav.open{display:flex}
  .nav>a{width:100%; padding:14px 28px; border-top:1px solid var(--grey)}
  .nav .nav-cta{display:block; width:auto; margin:12px 28px; color:#fff}
  .head-inner>.btn-head{display:none}
  .burger{display:flex}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:760px){
  body.page-home .hero{justify-content:center; text-align:center}
  body.page-home .hero .hero-inner{max-width:none}
  body.page-home .hero::after{background:linear-gradient(180deg,rgba(38,26,28,.4),rgba(38,26,28,.62))}
  body.page-home .hero .hero-cta{justify-content:center}
  .hero .bg,.hero-slide{background-position:72% center}
  .section{padding:60px 0}
  .event-tiles{grid-template-columns:1fr}
  .split{grid-template-columns:1fr; gap:30px}
  .split.media-right .media{order:0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .foot-inner{grid-template-columns:1fr; gap:34px}
  .feature-grid{grid-template-columns:1fr}
  .highlight{grid-template-columns:1fr; gap:16px; padding:34px 26px; text-align:center}
}

/* ---------- Foto-Galerie (einheitliches Raster) + Lightbox ---------- */
.fotogalerie{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:40px}
.fotogalerie a{display:block; position:relative; border-radius:10px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:3/2; background:var(--cream-soft); cursor:zoom-in}
.fotogalerie img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.fotogalerie a:hover img{transform:scale(1.06)}

.lb{position:fixed; inset:0; z-index:1000; background:rgba(28,20,22,.94); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .25s ease}
.lb.open{opacity:1; visibility:visible}
.lb img{max-width:92vw; max-height:86vh; object-fit:contain; border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-btn{position:absolute; background:rgba(255,255,255,.14); color:#fff; border:0; width:52px; height:52px; border-radius:50%; font-size:1.7rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease}
.lb-btn:hover{background:var(--terra)}
.lb-close{top:18px; right:18px; font-size:1.5rem}
.lb-prev{left:18px; top:50%; transform:translateY(-50%)}
.lb-next{right:18px; top:50%; transform:translateY(-50%)}
.lb-count{position:absolute; bottom:20px; left:0; right:0; text-align:center; color:rgba(255,255,255,.82); font-family:var(--ff-head); letter-spacing:.1em; font-size:.85rem}
@media (max-width:880px){ .fotogalerie{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px} }
@media (max-width:520px){ .lb-btn{width:44px; height:44px} .lb-prev{left:8px} .lb-next{right:8px} }

/* ---------- Tages-Programm (Agenda ohne Uhrzeiten) ---------- */
.programm{list-style:none; margin:26px 0 6px; padding:0; max-width:760px}
.programm li{position:relative; padding:14px 0 14px 28px; border-bottom:1px solid var(--grey)}
.programm li:last-child{border-bottom:0}
.programm li::before{content:""; position:absolute; left:0; top:21px; width:9px; height:9px; border-radius:50%; background:var(--terra)}
.programm strong{display:block; font-family:var(--ff-head); font-weight:600; font-size:1.05rem; color:var(--ink)}
.programm span{display:block; margin-top:2px; color:var(--gold-brown); font-size:.95rem}

/* ---------- Sponsoren-Leiste (Logos 400x120 auf Weiß) ---------- */
.sponsor-leiste{display:flex; flex-wrap:wrap; gap:34px 56px; justify-content:center; align-items:center; margin-top:44px}
.sponsor-leiste a{display:block; line-height:0}
.sponsor-leiste img{display:block; width:230px; max-width:100%; height:auto}
@media (max-width:520px){ .sponsor-leiste{gap:26px 36px} .sponsor-leiste img{width:200px} }

/* Symposium-Hero: Bildausschnitt auf den Trommelkreis */
body.page-symposium .hero-banner img{object-position:center 58%}
/* Kontakt-Hero: Ausschnitt tiefer legen, damit die Menschen im Bild sichtbar sind statt viel Wand */
body.page-kontakt .hero-banner img{object-position:center 72%}

/* =========================================================
   Urban Gong Retreat: moderne Event-Landingpage
   Grosse Typo, starke Farb- und Layout-Kontraste, full-bleed Baender.
   ========================================================= */

/* Groessere, ruhigere Lesetypo nur auf dieser Seite */
body.page-retreat main{font-size:18px}
body.page-retreat main p{line-height:1.72}
body.page-retreat .lead{font-size:1.3rem; line-height:1.6; max-width:60ch}
body.page-retreat .section{padding:96px 0}

/* Zusatz-Flaechenfarben (warm, deutlich unterscheidbar) */
.section.greige{background:#ECE5DA}            /* warmes Taupe-Hell, aus Akzent #B6A999 abgeleitet */
.section.dark{background:var(--aubergine); color:#efe5e2}
.section.dark h2,.section.dark h3,.section.dark h4{color:#fff}
.section.dark .eyebrow{color:var(--gold-brown)}
.section.dark .lead{color:#efe5e2}
.section.petrol{background:var(--petrol); color:#e9f6f2}   /* Brand-Sekundaerfarbe als farbiger Anker */
.section.petrol h2,.section.petrol h3{color:#fff}
.section.petrol .eyebrow{color:#bfe9df}
.section.petrol p{color:#e9f6f2}
.eyebrow.eb-petrol{color:var(--petrol)}        /* Eyebrow-Akzent variieren */
.eyebrow.eb-gold{color:var(--gold-brown)}

/* HERO gross, Foto ohne Textlayer, Infos prominent links */
body.page-retreat .hero{min-height:clamp(580px,84vh,840px); justify-content:flex-start; text-align:left}
body.page-retreat .hero::after{background:linear-gradient(90deg,rgba(26,15,17,.92) 0%,rgba(26,15,17,.72) 30%,rgba(26,15,17,.34) 56%,rgba(26,15,17,0) 84%)}
body.page-retreat .hero .hero-inner{max-width:780px; padding:0}
body.page-retreat .hero h1{font-size:clamp(2.9rem,6.6vw,5rem); line-height:1.02; margin-bottom:.18em}
body.page-retreat .hero .sub{font-size:clamp(1.1rem,2.4vw,1.6rem); font-weight:300; letter-spacing:.12em; margin-bottom:34px}

/* Info-Reihe im Hero (Datum, Ort, Beitrag), Werte ohne Labels */
.event-facts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 0 34px}
.event-facts span{font-family:var(--ff-head); font-weight:600; font-size:1.4rem; color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.45); line-height:1.2}
.event-facts span:not(:last-child)::after{content:"·"; margin-left:18px; color:rgba(255,255,255,.6); font-weight:400}
.btn-ghost-light{background:transparent; color:#fff; border:1.6px solid rgba(255,255,255,.75)}
.btn-ghost-light:hover{background:#fff; color:var(--ink)}
.btn-light{background:#fff; color:var(--aubergine)}
.btn-light:hover{background:var(--cream); color:var(--aubergine); transform:translateY(-1px)}

/* Statement-Band (full-bleed Foto, cinematisch) */
.statement{position:relative; min-height:clamp(380px,54vh,580px); display:flex; align-items:center; text-align:left; color:#fff; overflow:hidden}
.statement .bg{position:absolute; inset:0; background-size:cover; background-position:center 62%}
.statement::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(30,18,20,.82) 0%,rgba(30,18,20,.6) 48%,rgba(30,18,20,.28) 100%)}
.statement .wrap{position:relative; z-index:2}
.statement h2{color:#fff; font-weight:400; font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.32; max-width:26ch; margin:0}
.statement p{color:rgba(255,255,255,.85); font-family:var(--ff-head); letter-spacing:.1em; text-transform:uppercase; font-size:.92rem; margin:18px 0 0}
@media (prefers-reduced-motion: no-preference){ .statement .bg{animation:kenburns 32s ease-out both} }

/* Intro-Dreierbloecke gross, mit Oberlinie */
.mini-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:48px}
.mini{padding-top:24px; border-top:2px solid var(--terra)}
.mini h3{font-size:1.32rem; color:var(--ink); margin-bottom:.4em}
.mini p{margin:0; font-size:1.14rem; line-height:1.65}
@media (max-width:760px){ .mini-grid{grid-template-columns:1fr; gap:30px} }

/* "Das erlebst du": grosses Raster auf dunklem Anker (kein Bild) */
.benefits{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 48px; margin-top:46px}
.benefit{display:flex; align-items:center; gap:18px; padding:24px 0; border-top:1px solid rgba(255,255,255,.16); font-family:var(--ff-head); font-weight:500; font-size:1.24rem; color:#fff}
.benefit .no{font-family:var(--ff-head); font-weight:700; color:var(--gold-brown); font-size:1.15rem; min-width:30px}
@media (max-width:680px){ .benefits{grid-template-columns:1fr} }

/* Tagesplan gross, mit farbiger Tageskante */
.dayplan{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; margin-top:44px}
.daycard{background:var(--white); border-radius:16px; padding:38px 38px 30px; box-shadow:var(--shadow); border-top:5px solid var(--terra)}
.daycard.b2{border-top-color:var(--petrol)}
.daycard .dayhead{font-family:var(--ff-head); font-weight:600; font-size:1.45rem; margin:0; color:var(--ink)}
.daycard .daytime{display:block; color:var(--terra); font-family:var(--ff-head); font-size:.88rem; letter-spacing:.12em; text-transform:uppercase; margin:6px 0 16px}
.daycard.b2 .daytime{color:var(--petrol)}
.daycard .sess{padding:20px 0; border-top:1px solid var(--grey)}
.daycard .sess:first-of-type{border-top:0; padding-top:6px}
.daycard .sess h4{font-size:1.2rem; margin:0 0 .3em}
.daycard .sess p{margin:0; font-size:1.05rem; color:#5b544f; line-height:1.62}
@media (max-width:760px){ .dayplan{grid-template-columns:1fr} }

/* Anmelde-Sektion mit ditix-Widget (in heller Karte) */
#anmelden{scroll-margin-top:110px}
#anmelden .split{align-items:start}
#anmelden .copy{padding-top:4px}
.anmeldebox{margin:0; background:#fff; border-radius:20px; padding:32px; box-shadow:var(--shadow)}
.anmeldebox h3{font-size:1.25rem; margin:0 0 .4em}
.anmeldebox p{font-size:1rem; color:#5b544f; margin:0 0 18px}
.anmeldebox .btn{display:block; width:100%}
.anmelde-mini{font-size:.86rem; color:#8a827c; margin:14px 0 0}
.anmelde-note{max-width:46ch; font-size:1.16rem; color:#5b544f}

/* ---------- Bento-Grid (modulare Kacheln, Trend 2026) ---------- */
.bento{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(168px,1fr); gap:16px; margin-top:50px}
.bento .tile{border-radius:18px; padding:30px; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; position:relative; overflow:hidden}
.bento h3{font-family:var(--ff-head); font-size:1.2rem; margin:0; color:inherit; line-height:1.2}
.bento p{margin:0; font-size:1.05rem; line-height:1.5}
.bento .t-img{padding:0; grid-column:span 2; grid-row:span 2; min-height:352px}
.bento .t-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.bento .t-cream{background:var(--cream); color:var(--ink)}
.bento .t-greige{background:#ECE5DA; color:var(--ink)}
.bento .t-white{background:var(--white); border:1px solid var(--grey); color:var(--ink)}
.bento .t-white p,.bento .t-cream p,.bento .t-greige p{color:#5b544f}
.bento .t-dark{background:var(--aubergine); color:#fff}
.bento .t-dark p{color:rgba(255,255,255,.82)}
.bento .t-petrol{background:var(--petrol); color:#fff}
.bento .t-petrol p{color:rgba(255,255,255,.85)}
.bento .big-num{font-family:var(--ff-head); font-weight:700; font-size:3.2rem; line-height:.85; color:var(--gold-brown); margin-bottom:6px}
.bento a.t-cta{background:var(--terra); color:#fff; grid-column:span 2; justify-content:center; transition:.2s}
.bento a.t-cta:hover{background:var(--terra-dark); transform:translateY(-2px)}
.bento a.t-cta h3{color:#fff; font-size:1.55rem}
.bento a.t-cta .go{font-family:var(--ff-head); font-weight:600; color:#fff; margin-top:2px}
@media (max-width:880px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .t-img{grid-column:span 2; grid-row:span 1; min-height:240px}
  .bento a.t-cta{grid-column:span 2}
}
@media (max-width:520px){
  .bento{grid-template-columns:1fr}
  .bento .t-img,.bento a.t-cta{grid-column:span 1}
}

/* ---------- Editorial-Feature: asymmetrisch + Bild mit Tiefenversatz ---------- */
.feat{display:grid; gap:64px; align-items:center}
.feat.text-left{grid-template-columns:1.08fr .92fr}
.feat.text-right{grid-template-columns:.92fr 1.08fr}
.feat.text-right .copy{order:2}
.feat .ph{position:relative}
.feat .ph::before{content:""; position:absolute; z-index:0; border-radius:20px; width:60%; height:72%; bottom:-22px; background:var(--cream)}
.feat.text-left .ph::before{right:-22px}
.feat.text-right .ph::before{left:-22px}
.feat .ph img{position:relative; z-index:1; border-radius:18px; box-shadow:var(--shadow); width:100%; display:block}
.feat.feat-top{align-items:start}   /* Hochformat-Portraet + langer Text: beide oben buendig statt vertikal zentriert */
@media (max-width:820px){
  .feat{grid-template-columns:1fr; gap:30px}
  .feat.feat-top,.feat.text-left,.feat.text-right{grid-template-columns:1fr}   /* Spezifitaet: schlaegt .feat.text-*, sonst kein Stapeln mobil */
  .feat.text-right .copy{order:0}
  .feat .ph::before{display:none}
}

/* ---------- Mitlaufender Anmelde-CTA ---------- */
.sticky-cta{position:fixed; right:22px; bottom:22px; z-index:60; opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .3s ease, transform .3s ease}
.sticky-cta.show{opacity:1; transform:none; pointer-events:auto}
.sticky-cta .btn{box-shadow:0 12px 32px rgba(64,46,50,.32)}
@media (max-width:600px){ .sticky-cta{left:16px; right:16px; bottom:14px} .sticky-cta .btn{display:block; width:100%} }

/* ---------- Location-Diashow (im Sektions-Container 1400px, auto-ueberblendend) ---------- */
.slideshow{position:relative; overflow:hidden; height:clamp(340px,40vw,560px); margin-top:44px; border-radius:18px; box-shadow:var(--shadow)}
.slideshow .slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity .9s ease}
.slideshow .slide.is-active{opacity:1}
.slideshow .dots{position:absolute; left:0; right:0; bottom:20px; z-index:4; display:flex; gap:9px; justify-content:center}
.slideshow .dots button{width:9px; height:9px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; transition:.3s; box-shadow:0 1px 5px rgba(0,0,0,.35)}
.slideshow .dots button.on{background:#fff; width:24px; border-radius:5px}

/* =========================================================
   Mitgliedschaft: helle, ruhige Mitmach-Seite
   ========================================================= */

/* Etwas groessere, ruhigere Lesetypo wie auf der Retreat-Seite */
body.page-content main{font-size:18px}
body.page-content main p{line-height:1.72}
body.page-content .lead{font-size:1.26rem; line-height:1.6; max-width:60ch}

/* kompakter Content-Hero (deutlich niedriger als Event-Heros), Text links, Verlauf von links */
body.page-content .hero{min-height:clamp(300px,42vh,430px); justify-content:flex-start; text-align:left}
body.page-content .hero .bg{background-position:center 44%}
body.page-content .hero::after{background:linear-gradient(90deg,rgba(26,15,17,.9) 0%,rgba(26,15,17,.66) 34%,rgba(26,15,17,.28) 60%,rgba(26,15,17,0) 88%)}
body.page-content .hero .hero-inner{max-width:760px; padding:0}
body.page-content .hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem); line-height:1.04; margin-bottom:.14em}
body.page-content .hero .sub{font-size:clamp(1rem,2vw,1.28rem); font-weight:300; letter-spacing:.08em; margin-bottom:26px}
.hero-eyebrow{display:inline-block; font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.26em; font-size:.82rem; font-weight:600; color:#fff; opacity:.92; margin-bottom:16px; text-shadow:0 2px 16px rgba(0,0,0,.4)}

/* Ruhig driftendes, weiches Licht im Hero (zusaetzlich zum Ken-Burns) */
.hero-glow{position:absolute; z-index:1; top:-30%; left:-10%; width:75%; height:160%;
  background:radial-gradient(circle at 40% 50%, rgba(255,237,203,.22), rgba(255,237,203,0) 62%);
  pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  .hero-glow{animation:glowdrift 26s ease-in-out infinite alternate}
}
@keyframes glowdrift{
  from{transform:translate3d(0,0,0) scale(1); opacity:.85}
  to{transform:translate3d(10%,6%,0) scale(1.14); opacity:1}
}
/* lange Headline auf schmalen Screens sicher einpassen */
@media (max-width:560px){
  body.page-content .hero h1{font-size:clamp(1.9rem,8.6vw,2.6rem); letter-spacing:.03em}
  body.page-content .hero .sub{font-size:1.05rem}
}

/* Fakten auf einen Blick */
.mfacts{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px}
.mfact{background:var(--white); border:1px solid var(--grey); border-radius:16px; padding:30px 26px 26px; box-shadow:0 10px 30px rgba(64,46,50,.06); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease}
.mfact:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.mfact-num{display:block; font-family:var(--ff-head); font-weight:700; font-size:clamp(1.7rem,2.4vw,2.15rem); line-height:1; color:var(--gold-brown); margin-bottom:14px}
.mfact h3{font-size:1.12rem; margin:0 0 .4em}
.mfact p{margin:0; font-size:.98rem; color:#5b544f; line-height:1.6}
@media (max-width:880px){ .mfacts{grid-template-columns:repeat(2,1fr); gap:16px} }
@media (max-width:480px){ .mfacts{grid-template-columns:1fr} }

/* So wirst du Mitglied: drei Schritte mit Nummernkreis + ruhiger Verbindungslinie */
.msteps{list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:34px; position:relative}
.mstep{position:relative}
.mstep-no{position:relative; z-index:2; width:56px; height:56px; border-radius:50%; background:var(--terra); color:#fff; font-family:var(--ff-head); font-weight:700; font-size:1.4rem; display:flex; align-items:center; justify-content:center; margin-bottom:20px; box-shadow:0 8px 22px rgba(193,85,78,.32)}
/* weicher, ruhig atmender Ring um die Nummer */
.mstep-no::after{content:""; position:absolute; inset:-7px; border-radius:50%; border:2px solid rgba(193,85,78,.4)}
@media (prefers-reduced-motion: no-preference){
  .mstep-no::after{animation:softring 4.2s ease-in-out infinite}
  .mstep:nth-child(2) .mstep-no::after{animation-delay:1.2s}
  .mstep:nth-child(3) .mstep-no::after{animation-delay:2.4s}
}
@keyframes softring{0%,100%{transform:scale(1); opacity:.5} 50%{transform:scale(1.18); opacity:0}}
/* Verbindungslinie zwischen den Schritten (nur Desktop) */
.mstep:not(:last-child)::before{content:""; position:absolute; z-index:0; top:27px; left:62px; right:-34px; height:2px; background:linear-gradient(90deg,var(--taupe),rgba(182,169,153,.25))}
.mstep h3{font-size:1.22rem; margin:0 0 .35em}
.mstep p{margin:0; font-size:1.04rem; color:#5b544f; line-height:1.62}
@media (max-width:760px){
  .msteps{grid-template-columns:1fr; gap:26px}
  .mstep:not(:last-child)::before{display:none}
  .mstep{display:grid; grid-template-columns:56px 1fr; column-gap:20px}
  .mstep-no{margin-bottom:0}
  .mstep h3,.mstep p{grid-column:2}
}

/* Download-Block */
.mdl{margin-top:44px}
.mdl-note{margin:16px 0 0; font-size:.95rem; color:#6b635d}

/* Wofuer wir stehen: helle Grau-Sektion mit acht Ziel-Kacheln */
.section.greylight{background:#DFE0DF; color:var(--ink)}
.goalgrid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:48px}
.goal{background:var(--white); border:1px solid #cdcecd; border-radius:16px; padding:26px 24px 24px; box-shadow:0 8px 24px rgba(64,46,50,.05); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease}
.goal:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.goal-no{display:block; font-family:var(--ff-head); font-weight:700; font-size:1.05rem; letter-spacing:.1em; color:var(--gold-brown); margin-bottom:12px}
.goal h3{font-size:1.1rem; line-height:1.25; margin:0 0 .45em; color:var(--ink)}
.goal p{margin:0; font-size:.96rem; line-height:1.58; color:#5b544f}
@media (max-width:980px){ .goalgrid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px} }
@media (max-width:520px){ .goalgrid{grid-template-columns:1fr} }

/* CTA-Band: ganzes Foto gleichmaessig abgedunkelt, der Zoom wird in die Sektion geklippt */
body.page-content .cta-band{overflow:hidden}
body.page-content .cta-band::after{background:rgba(30,21,20,.8)}
@media (prefers-reduced-motion: no-preference){
  body.page-content .cta-band .bg{animation:kenburns 34s ease-out both}
}

/* =========================================================
   Deine Spende: gleicher Aufbau wie Mitgliedschaft, andere Farben
   ========================================================= */

/* drei Spendenarten im 3er-Raster */
.goalgrid.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:880px){ .goalgrid.cols3{grid-template-columns:1fr} }

/* Spenden-Sektion: Text/Schritte links, QR- und Spenden-Karte rechts (volle Breite) */
.donate-split{display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:start; margin-top:42px}
@media (max-width:860px){ .donate-split{grid-template-columns:1fr; gap:34px} }

/* Schritte vertikal gestapelt (Nummer links, Text rechts) */
.msteps.stacked{grid-template-columns:1fr; gap:22px; margin-top:30px}
.msteps.stacked .mstep{display:grid; grid-template-columns:54px 1fr; column-gap:18px}
.msteps.stacked .mstep::before{display:none}
.msteps.stacked .mstep-no{margin-bottom:0}
.msteps.stacked .mstep h3,.msteps.stacked .mstep p{grid-column:2}

/* Schritte auf der Petrol-Sektion lesbar machen */
.section.petrol .mstep h3{color:#fff}
.section.petrol .mstep p{color:rgba(255,255,255,.88)}
.section.petrol .mstep-no{background:var(--cream); color:var(--aubergine); box-shadow:0 8px 22px rgba(0,0,0,.2)}
.section.petrol .mstep-no::after{border-color:rgba(255,237,203,.55)}
.section.petrol .mdl-note{color:rgba(255,255,255,.82)}

/* QR- und Spenden-Karte */
.donate-card{background:#fff; border-radius:20px; padding:30px; box-shadow:var(--shadow)}
.donate-card img{width:200px; max-width:60%; height:auto; border-radius:10px; margin:0 0 18px}
/* hoehere Spezifitaet, damit die weisse Karte im Petrol-Band dunklen Text behaelt */
.section.petrol .donate-card h3{font-size:1.18rem; margin:0 0 .35em; color:var(--ink)}
.section.petrol .donate-card p{margin:0 0 18px; font-size:.98rem; color:#5b544f}
.donate-card .btn{display:block; width:100%}
.section.petrol .donate-card .dc-note{margin:14px 0 0; font-size:.86rem; color:#8a827c}

/* =========================================================
   Kontakt: Infos + Formular
   ========================================================= */
.kontakt-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; margin-top:8px}
@media (max-width:820px){ .kontakt-split{grid-template-columns:1fr; gap:36px} }

.kontakt-info .lead{margin-bottom:28px}
.kontakt-facts{list-style:none; margin:0; padding:0; display:grid; gap:22px}
.kontakt-facts li{font-size:1.02rem; line-height:1.6}
.kontakt-facts .kf-label{display:block; font-family:var(--ff-head); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; font-weight:600; color:var(--gold-brown); margin-bottom:5px}
.kontakt-facts a{color:var(--terra)}

/* Formular als warme Karte */
.cf{background:var(--cream-soft); border-radius:18px; padding:34px}
.cf .field{margin-bottom:18px}
.cf label{display:block; font-family:var(--ff-head); font-weight:600; font-size:.9rem; color:var(--ink); margin-bottom:7px}
.cf input[type="text"],.cf input[type="email"],.cf textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--grey); border-radius:8px;
  font-family:var(--ff-body); font-size:1rem; color:var(--ink); background:#fff; transition:border-color .2s, box-shadow .2s}
.cf textarea{min-height:150px; resize:vertical}
.cf input:focus,.cf textarea:focus{outline:none; border-color:var(--terra); box-shadow:0 0 0 3px rgba(193,85,78,.16)}
.cf input::placeholder,.cf textarea::placeholder{color:#a99f97}
/* Browser-Autofill nicht gelb faerben, sondern im Marken-Weiss halten */
.cf input:-webkit-autofill,.cf input:-webkit-autofill:hover,.cf input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 40px #fff inset; box-shadow:0 0 0 40px #fff inset;
  transition:background-color 9999s ease-in-out 0s}

/* Segmentierte Themenauswahl */
.seg{display:flex; flex-wrap:wrap; gap:10px}
.seg label{display:inline-flex; align-items:center; gap:8px; margin:0; font-family:var(--ff-body); font-weight:400; font-size:.94rem; padding:9px 16px; border:1.5px solid var(--grey); border-radius:999px; cursor:pointer; transition:.2s}
.seg input{accent-color:var(--terra); margin:0}
.seg label:has(input:checked){border-color:var(--terra); background:rgba(193,85,78,.08); color:var(--terra-dark)}

/* Honeypot unsichtbar */
.cf .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.cf .btn{margin-top:6px}
.cf .note{margin:16px 0 0; font-size:.85rem; color:#7a736e; line-height:1.55}

/* Rueckmeldung */
.formmsg{padding:14px 16px; border-radius:10px; margin-bottom:18px; font-size:.98rem; line-height:1.5}
.formmsg.ok{background:#e4f3ee; color:var(--petrol-dark); border:1px solid #bfe3d8}
.formmsg.err{background:#f7e4e2; color:var(--terra-dark); border:1px solid #e6c4bf}

/* =========================================================
   Rechtsseiten (Impressum, Datenschutz)
   ========================================================= */
.legal-head .eyebrow{display:block; margin-bottom:10px}
.legal-head h1{margin:0; font-size:clamp(1.7rem,6vw,2.8rem); overflow-wrap:break-word; hyphens:auto}
.legal{max-width:760px}
body.legal-wide .legal{max-width:none}   /* AGB-Seite nutzt die volle Content-Breite (1400) */
.legal h2{font-size:1.25rem; margin:1.7em 0 .45em; color:var(--ink)}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.08rem; margin:1.3em 0 .35em}
.legal p{margin:0 0 1em; line-height:1.75}
.legal ul{margin:0 0 1em; padding-left:22px; line-height:1.75}
.legal a{color:var(--terra); word-break:break-word}
.legal strong{color:var(--ink)}
/* Sprungziele nicht unter den Sticky-Header rutschen */
.legal :target{scroll-margin-top:120px}
/* Inhaltsverzeichnis */
.legal ul.index{list-style:none; margin:.5em 0 2em; padding:24px 28px; background:var(--cream-soft); border-radius:12px; columns:2; column-gap:34px}
.legal ul.index li{margin:0 0 .55em; break-inside:avoid}
.legal .index-link{color:var(--terra)}
/* Detail-Listen (Datenarten, Zwecke, Rechtsgrundlagen je Dienst) */
.legal ul.m-elements{list-style:none; padding-left:0; margin:1.1em 0 1.6em}
.legal ul.m-elements>li{padding:13px 0; border-top:1px solid var(--grey); font-size:.97rem; line-height:1.65}
.legal ul.m-elements>li:first-child{border-top:0}
/* Begriffsglossar: jeder Begriff als eigene Überschrift, Definition als Absatz darunter (wie Live-Seite) */
.legal ul.glossary{list-style:none; padding-left:0; margin:1em 0 1.6em}
.legal ul.glossary>li{padding:18px 0; border-top:1px solid var(--grey); line-height:1.75; font-size:.97rem; color:#4f4843}
.legal ul.glossary>li>strong{display:block; font-family:var(--ff-head); font-weight:600; font-size:1.1rem; color:var(--ink); margin-bottom:.4em}
/* Glossar als Akkordeon (wie FAQ): reines details/summary, per JS aus der Liste gebaut */
.legal .gloss{margin:1em 0 1.6em}
.legal .gloss-item{border-bottom:1px solid var(--grey)}
.legal .gloss-item:first-of-type{border-top:1px solid var(--grey)}
.legal .gloss-item summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:18px 2px; font-family:var(--ff-head); font-weight:600; font-size:1.05rem; color:var(--ink); transition:color .18s ease}
.legal .gloss-item summary:hover{color:var(--terra)}
.legal .gloss-item summary::-webkit-details-marker{display:none}
.legal .gloss-item summary::after{content:"+"; font-size:1.5rem; font-weight:300; color:var(--terra); line-height:1; flex:0 0 auto; transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.legal .gloss-item[open] summary::after{transform:rotate(45deg)}
.legal .gloss-item .gloss-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s cubic-bezier(.2,.7,.2,1)}
.legal .gloss-item[open] .gloss-body{grid-template-rows:1fr}
.legal .gloss-body-inner{overflow:hidden}
.legal .gloss-item .gloss-a{padding:2px 2px 22px; color:#5b544f; line-height:1.75; font-size:.97rem}
@media (prefers-reduced-motion: reduce){ .legal .gloss-item .gloss-body, .legal .gloss-item summary::after{transition:none} }

/* =========================================================
   Erasmus+ Hub (Sound for Health and Art 24)
   ========================================================= */
.akt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:46px}
.akt-card{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--grey); border-radius:16px; overflow:hidden; box-shadow:0 10px 30px rgba(64,46,50,.06); transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease}
.akt-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.akt-card .ph{display:block; overflow:hidden; aspect-ratio:16/9; background:var(--cream)}
.akt-card .ph img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.akt-card:hover .ph img{transform:scale(1.05)}
.akt-card .body{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}
.akt-card h3{font-size:1.2rem; margin:0 0 .4em}
.akt-card .body p{margin:0 0 16px; font-size:.97rem; color:#5b544f; line-height:1.62; flex:1}
.akt-card .akt-link{align-self:flex-start; font-family:var(--ff-head); font-weight:600; color:var(--terra); font-size:.95rem}
.akt-card .akt-link:hover{color:var(--terra-dark)}
.akt-card .akt-link::after{content:" →"}
@media (max-width:980px){ .akt-grid{grid-template-columns:repeat(2,1fr); gap:22px} }
@media (max-width:600px){ .akt-grid{grid-template-columns:1fr} }

/* Downloads: drei Dokumente, je drei Sprachen */
.dl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px}
.dl-card{background:var(--white); border:1px solid var(--grey); border-radius:16px; padding:30px 28px; box-shadow:0 10px 30px rgba(64,46,50,.05)}
.dl-card h3{font-size:1.2rem; margin:0 0 .5em}
.dl-card p{font-size:.96rem; color:#5b544f; line-height:1.6; margin:0 0 20px}
.dl-langs{display:flex; flex-direction:column; gap:10px}
.dl-langs .btn{width:100%; font-size:.88rem; padding:12px 18px}
@media (max-width:880px){ .dl-grid{grid-template-columns:1fr} }

/* EU-Marken + Disclaimer */
.eu-marks{display:flex; flex-wrap:wrap; align-items:center; gap:36px; margin-bottom:26px}
.eu-marks .eu-logo{width:643px; max-width:100%; height:auto}
.eu-marks .cc-icon{width:300px; max-width:100%; height:auto}
.disclaimer-text{max-width:none; font-size:17px; line-height:1.7; color:var(--ink)}

/* =========================================================
   Leisnig (Erasmus+ Berichtsseite): Video-Vorschau + Host-Raster
   ========================================================= */
/* Videos: verlinktes Vorschaubild (kein Embed), oeffnet in neuem Tab */
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:44px}
.vid-card{display:flex; flex-direction:column}
.vid-thumb{position:relative; display:block; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:16/9; background:var(--aubergine)}
.vid-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.vid-thumb:hover img{transform:scale(1.05)}
.vid-thumb::after{content:""; position:absolute; inset:0; background:rgba(30,18,20,.16); transition:background .25s}
.vid-thumb:hover::after{background:rgba(30,18,20,.3)}
.vid-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:66px; height:66px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; z-index:2; transition:transform .25s ease, background .25s ease}
.vid-thumb:hover .vid-play{transform:translate(-50%,-50%) scale(1.08); background:#fff}
.vid-play::before{content:""; width:0; height:0; border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent var(--terra); margin-left:5px}
.vid-card h3{font-size:1.18rem; margin:18px 0 .35em}
.vid-card p{margin:0; font-size:.98rem; color:#5b544f; line-height:1.6}
@media (max-width:880px){ .video-grid{grid-template-columns:1fr; gap:24px} }

/* Session Hosts */
.host-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:30px 24px; margin-top:42px}
.host-card .ph{display:block; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--cream); box-shadow:0 8px 24px rgba(64,46,50,.08)}
.host-card .ph img{width:100%; height:100%; object-fit:cover}
.host-card .ph.placeholder{display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:600; font-size:1.7rem; letter-spacing:.05em; color:var(--gold-brown)}
.host-card h3{font-size:1.05rem; margin:14px 0 .2em}
.host-card p{margin:0; font-size:.9rem; color:#6b635d; line-height:1.5}
@media (max-width:900px){ .host-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:620px){ .host-grid{grid-template-columns:repeat(2,1fr); gap:22px 16px} }

/* Organisatoren-Logos */
.org-logos{display:flex; flex-wrap:wrap; gap:44px; align-items:center; margin-top:32px}
.org-logos img{height:88px; width:auto; max-width:100%}

/* Organisatoren: Bild links, Logos + Text rechts (wie alte Seite) */
.org-split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.org-photo{margin:0}
.org-photo img{width:100%; height:auto; display:block; border-radius:14px; box-shadow:var(--shadow)}
.org-body .org-logos{margin-top:0; margin-bottom:28px; gap:40px}
.org-body .org-logos img{height:76px}
.org-body h2{margin-bottom:.45em}
@media (max-width:820px){
  .org-split{grid-template-columns:1fr; gap:30px}
  .org-body .org-logos{justify-content:flex-start}
}

/* Partner-Logos in einer einzigen Zeile, einheitliche Hoehe (Sektion ist weiss) */
.sponsor-leiste.one-row{flex-wrap:nowrap; gap:48px; justify-content:space-between}
.sponsor-leiste.one-row img{width:auto; max-width:100%; height:52px; object-fit:contain}
@media (max-width:760px){
  .sponsor-leiste.one-row{flex-wrap:wrap; justify-content:center; gap:30px 40px}
  .sponsor-leiste.one-row img{height:44px}
}

/* Justified-Galerie wie auf der alten Seite: Reihen gleicher Hoehe, je Reihe volle
   Breite ausgefuellt, variable Bildanzahl. Position/Groesse setzt JS (layoutJustified). */
.fotogalerie.leis{display:block; position:relative; gap:0; grid-template-columns:none; margin-top:56px}
.fotogalerie.leis a{position:absolute; display:block; overflow:hidden; aspect-ratio:auto; border-radius:0; box-shadow:none; background:var(--cream-soft); cursor:zoom-in; opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.fotogalerie.leis a.in{opacity:1; transform:none}
.fotogalerie.leis img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fotogalerie.leis a::after{content:""; position:absolute; inset:0; background:rgba(64,46,50,0); transition:background .4s ease; pointer-events:none}
.fotogalerie.leis a:hover img{transform:scale(1.05)}
.fotogalerie.leis a:hover::after{background:rgba(64,46,50,.16)}
/* Solange JS nicht gelaufen ist (z.B. ohne JS): einfaches Raster als Fallback */
.fotogalerie.leis.no-js{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px}
.fotogalerie.leis.no-js a{position:static; aspect-ratio:4/3; opacity:1; transform:none}
@media (max-width:980px){ .fotogalerie.leis.no-js{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){ .fotogalerie.leis.no-js{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Generator-Siegel (Attribution bleibt erhalten) */
.legal .seal{margin-top:2.6em; padding-top:1.2em; border-top:1px solid var(--grey); font-size:.8rem; color:#8a827c}
.legal .seal a{color:#8a827c}
@media (max-width:680px){ .legal ul.index{columns:1; padding:20px 22px} }