:root{
  --schwarz:#0C0C0D;
  --schwarz-2:#121214;
  --schwarz-3:#191A1C;
  --tuerkis:#12B2D4;
  --tuerkis-hell:#4FD3EE;
  --tuerkis-tief:#0A7E99;
  --knochen:#E7DFCC;
  --knochen-dim:#8E887C;
  --rot:#A32D2D;
  --rot-hell:#C85252;
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--schwarz);
  color:var(--knochen);
  font-family:'Inter',system-ui,sans-serif;
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Cinzel',Georgia,serif;font-weight:400;line-height:1.2;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.eyebrow{
  font-family:'Inter',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--tuerkis);
}
.lead{color:#A9A296;font-size:17px;max-width:62ch}

/* ---------- Nebel ---------- */
.nebel{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.nebel span{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.16;
  background:radial-gradient(circle,#5FBFD8 0%,rgba(18,178,212,0) 70%);
}
.n1{width:70vw;height:38vh;left:-20vw;bottom:-6vh;animation:drift 46s linear infinite}
.n2{width:55vw;height:30vh;left:40vw;bottom:4vh;animation:drift 62s linear infinite reverse;opacity:.11}
.n3{width:80vw;height:26vh;left:10vw;bottom:22vh;animation:drift 78s linear infinite;opacity:.08}
@keyframes drift{
  0%{transform:translateX(-14%) translateY(0) scale(1)}
  50%{transform:translateX(16%) translateY(-16px) scale(1.14)}
  100%{transform:translateX(-14%) translateY(0) scale(1)}
}

/* ---------- Glühende Augen ---------- */
.augen{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.aug-paar{position:absolute;display:flex;gap:var(--sp,15px);opacity:0}
.aug{
  width:7px;height:7px;border-radius:50%;
  background:var(--tuerkis-hell);
  box-shadow:0 0 10px 3px rgba(79,211,238,.85),0 0 26px 8px rgba(18,178,212,.35);
}
.aug-paar.rot .aug{background:var(--rot-hell);box-shadow:0 0 10px 3px rgba(200,82,82,.85),0 0 26px 8px rgba(163,45,45,.35)}
@keyframes lauern{
  0%{opacity:0;transform:translateY(6px)}
  12%{opacity:.95;transform:translateY(0)}
  30%{opacity:.95}
  34%{opacity:.12}
  38%{opacity:.95}
  78%{opacity:.9}
  100%{opacity:0;transform:translateY(-10px)}
}

/* ---------- Glut / Funken ---------- */
.funken{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.funke{position:absolute;bottom:-10px;width:2px;height:2px;border-radius:50%;background:var(--tuerkis-hell);opacity:0}
@keyframes steigen{
  0%{opacity:0;transform:translateY(0) translateX(0)}
  10%{opacity:.7}
  100%{opacity:0;transform:translateY(-60vh) translateX(var(--dx,20px))}
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  border-bottom:1px solid transparent;
  transition:border-color .35s ease,padding .35s ease;
}
/* Die Glasfläche liegt auf einem eigenen Layer. Läge backdrop-filter auf .nav
   selbst, würde .nav zum Bezugsrahmen für position:fixed – das mobile Menü
   würde dann am Navigationsbalken kleben statt am Bildschirmrand. */
.nav::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(12,12,13,0);
  transition:background .35s ease,backdrop-filter .35s ease;
}
.nav.fest{border-bottom-color:#1F2124;padding:11px 28px}
.nav.fest::before{background:rgba(12,12,13,.9);backdrop-filter:blur(14px)}
.nav.offen::before{background:rgba(12,12,13,.96);backdrop-filter:blur(14px)}
/* Bei offenem Menü sicher über der Verdunkelung bleiben */
.nav.offen{z-index:90}
.marke{display:flex;align-items:center;gap:12px}
.marke-glyph{
  width:34px;height:34px;object-fit:contain;
  transition:transform .5s cubic-bezier(.34,1.4,.64,1),filter .5s ease;
  filter:drop-shadow(0 0 0 rgba(18,178,212,0));
}
.nav.fest .marke-glyph{width:30px;height:30px}
.marke:hover .marke-glyph{
  transform:scale(1.1) rotate(-3deg);
  filter:drop-shadow(0 0 12px rgba(18,178,212,.75));
}
.marke-text{font-family:'Cinzel',serif;font-size:13px;letter-spacing:.16em;color:var(--knochen);line-height:1.2}
.nav-rechts{display:flex;align-items:center}
.nav-links{display:flex;gap:26px;font-size:13px;letter-spacing:.06em;color:#8E887C}
.nav-links a{position:relative;padding:4px 0;transition:color .25s}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--tuerkis);
  transition:width .3s ease;
}
.nav-links a:hover{color:var(--knochen)}
.nav-links a:hover::after{width:100%}
.burger{display:none;background:none;border:0;color:var(--knochen);font-size:22px;cursor:pointer;line-height:1}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate}
.hero-bild{position:absolute;inset:-8% 0 0 0;z-index:0;will-change:transform}
.hero-bild img{width:100%;height:118%;object-fit:cover;object-position:center 32%;filter:grayscale(.32) contrast(1.12) brightness(.52) saturate(1.25)}
.hero-schleier{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%,rgba(12,12,13,.15) 0%,rgba(12,12,13,.82) 78%),
    linear-gradient(to bottom,rgba(12,12,13,.85) 0%,rgba(12,12,13,.25) 28%,rgba(12,12,13,.6) 62%,var(--schwarz) 100%);
}
.hero-inhalt{position:relative;z-index:5;text-align:center;padding:120px 28px 140px;max-width:840px}
.hero-wappen{
  width:clamp(76px,10vw,116px);margin:0 auto 22px;display:block;
  opacity:0;filter:drop-shadow(0 0 26px rgba(18,178,212,.4));
  animation:wappenAuf 1.4s cubic-bezier(.19,1,.22,1) .2s forwards,atmen 7s ease-in-out 1.8s infinite;
}
@keyframes wappenAuf{
  from{opacity:0;transform:translateY(22px) scale(.86)}
  to{opacity:.96;transform:none}
}
@keyframes atmen{
  0%,100%{filter:drop-shadow(0 0 22px rgba(18,178,212,.3))}
  50%{filter:drop-shadow(0 0 40px rgba(18,178,212,.62))}
}
.hero-schatten{
  position:absolute;top:50%;left:50%;z-index:1;
  width:min(88vw,900px);transform:translate(-50%,-50%);
  opacity:.05;pointer-events:none;
  animation:schwanken 22s ease-in-out infinite;
}
@keyframes schwanken{
  0%,100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);opacity:.045}
  50%{transform:translate(-50%,-52%) scale(1.05) rotate(1.2deg);opacity:.085}
}
.hero h1{
  font-size:clamp(2.4rem,6.4vw,5rem);color:#F2ECDF;margin:20px 0 26px;
  text-shadow:0 0 42px rgba(0,0,0,.9),0 0 90px rgba(18,178,212,.16);
}
.hero h1 .zeile{display:block;overflow:hidden}
.hero h1 .zeile i{display:block;font-style:normal;transform:translateY(105%);animation:auftauchen 1.15s cubic-bezier(.19,1,.22,1) forwards}
.hero h1 .zeile:nth-child(2) i{animation-delay:.16s}
@keyframes auftauchen{to{transform:translateY(0)}}
.hero .eyebrow{opacity:0;animation:einblenden 1s ease .5s forwards}
.vers{
  font-family:'Cinzel',serif;font-size:clamp(.95rem,1.6vw,1.1rem);color:#B9B2A4;line-height:2;
  opacity:0;animation:einblenden 1.2s ease .8s forwards;
}
@keyframes einblenden{to{opacity:1}}
.hero-aktion{margin-top:38px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;animation:einblenden 1s ease 1.1s forwards}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 26px;font-size:13.5px;letter-spacing:.09em;font-weight:400;
  border:1px solid var(--tuerkis);color:var(--tuerkis);background:transparent;
  border-radius:2px;cursor:pointer;position:relative;overflow:hidden;transition:color .3s;
}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--tuerkis);
  transform:translateY(101%);transition:transform .38s cubic-bezier(.65,0,.35,1);z-index:-1;
}
.btn:hover{color:#04252C}
.btn:hover::before{transform:translateY(0)}
.btn.voll{background:var(--tuerkis);color:#04252C}
.btn.voll::before{background:var(--tuerkis-hell)}
.btn.geist{border-color:#3A3C40;color:#B9B2A4}
.btn.geist::before{background:#B9B2A4}
.btn.geist:hover{color:var(--schwarz)}
.scroll-hinweis{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;
  font-size:10px;letter-spacing:.26em;color:#6E6960;text-transform:uppercase;
}
.scroll-hinweis::after{
  content:'';display:block;width:1px;height:38px;margin:11px auto 0;
  background:linear-gradient(to bottom,var(--tuerkis),transparent);
  animation:sinken 2.1s ease-in-out infinite;transform-origin:top;
}
@keyframes sinken{0%,100%{transform:scaleY(.35);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---------- Zacken-Trenner ---------- */
.zacken{display:block;width:100%;height:16px;background:var(--tuerkis);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L4 16 L8 0 L12 16 L16 0 L20 16 L24 0 L28 16 L32 0 L36 16 L40 0 Z' fill='%23fff'/%3E%3C/svg%3E") repeat-x center/40px 16px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L4 16 L8 0 L12 16 L16 0 L20 16 L24 0 L28 16 L32 0 L36 16 L40 0 Z' fill='%23fff'/%3E%3C/svg%3E") repeat-x center/40px 16px;
}
.zacken.rot{background:var(--rot)}
.zacken.duenn{height:9px}

/* ---------- Sektionen ---------- */
section{position:relative;padding:110px 0}
.sek-kopf{max-width:640px;margin-bottom:52px}
.sek-kopf h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin:14px 0 18px;color:#F2ECDF}
.dunkler{background:var(--schwarz-2)}

/* Scroll-Reveal */
.zeig{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
.zeig.da{opacity:1;transform:none}
.zeig.v1{transition-delay:.09s}.zeig.v2{transition-delay:.18s}.zeig.v3{transition-delay:.27s}.zeig.v4{transition-delay:.36s}

/* ---------- Sage ---------- */
#sage{overflow:hidden}
.wasser{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;opacity:.5}
.wasser path{fill:none;stroke:var(--tuerkis-tief);stroke-width:1.2}
.sage-raster{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.sage-text p{margin-bottom:20px;color:#A9A296;font-size:16.5px}
.sage-text p:first-of-type::first-letter{
  font-family:'Cinzel',serif;font-size:3.4rem;line-height:.9;float:left;
  margin:6px 12px 0 0;color:var(--tuerkis);
}
.sage-text .fluester{
  font-family:'Cinzel',serif;color:var(--knochen);font-size:1.15rem;line-height:1.7;
  border-left:2px solid var(--tuerkis);padding-left:22px;margin:34px 0;
}
.sage-mehr{max-height:0;overflow:hidden;transition:max-height .8s cubic-bezier(.19,1,.22,1)}
.sage-mehr.offen{max-height:1400px}
.sage-bild{position:relative}
.sage-bild{position:sticky;top:96px}
.sage-bild img{
  width:100%;height:auto;max-height:70vh;object-fit:contain;
  border:1px solid #24262A;filter:grayscale(.2) brightness(.9);
  transition:filter .6s ease,transform .8s cubic-bezier(.19,1,.22,1);
}
.sage-bild:hover img{filter:grayscale(0) brightness(1);transform:scale(1.02)}
.sage-bild::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(12,12,13,.45),transparent 42%);
}

/* ---------- Häs ---------- */
.haes-schalter{display:inline-flex;border:1px solid #26282C;border-radius:2px;overflow:hidden;margin-bottom:44px}
.haes-schalter button{
  background:transparent;border:0;color:#8E887C;cursor:pointer;
  padding:11px 26px;font-family:'Inter',sans-serif;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;transition:background .3s,color .3s;
}
.haes-schalter button.aktiv{background:var(--tuerkis);color:#04252C}
.haes-schalter button.aktiv[data-art="daemon"]{background:var(--rot);color:#F5E4E4}
.haes-tafel{display:none}
.haes-tafel.aktiv{display:block;animation:sanft .7s cubic-bezier(.19,1,.22,1)}
@keyframes sanft{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.haes-raster{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.haes-text h3{font-size:1.7rem;margin-bottom:18px;color:#F2ECDF}
.haes-text p{color:#A9A296;margin-bottom:16px;font-size:16px}
.merkmale{list-style:none;margin-top:26px;border-top:1px solid #1F2124}
.merkmale li{
  padding:13px 0;border-bottom:1px solid #1F2124;display:flex;gap:16px;
  font-size:14.5px;color:#A9A296;
}
.merkmale li b{color:var(--tuerkis);font-weight:500;min-width:120px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding-top:3px}
.haes-tafel[data-art="daemon"] .merkmale li b{color:var(--rot-hell)}
.haes-bilder{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:start}
.haes-bilder a{
  position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--schwarz-3);display:block;
  border:1px solid #1B1D20;
}
.haes-bilder img{
  width:100%;height:100%;object-fit:contain;
  filter:grayscale(.3) brightness(.86);
  transition:transform .8s cubic-bezier(.19,1,.22,1),filter .5s ease;
}
.haes-bilder a:hover img{transform:scale(1.09);filter:grayscale(0) brightness(1)}
.haes-bilder a::after{
  content:'';position:absolute;inset:0;border:1px solid transparent;transition:border-color .4s;
}
.haes-bilder a:hover::after{border-color:var(--tuerkis)}
.haes-tafel[data-art="daemon"] .haes-bilder a:hover::after{border-color:var(--rot)}
.haes-bilder a.gross{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}

/* ---------- Galerie ---------- */
.galerie-filter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:34px}
.galerie-filter button{
  background:transparent;border:1px solid #26282C;color:#8E887C;cursor:pointer;
  padding:8px 17px;font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.1em;
  border-radius:2px;transition:all .3s;
}
.galerie-filter button:hover{border-color:#3E4145;color:var(--knochen)}
.galerie-filter button.aktiv{border-color:var(--tuerkis);color:var(--tuerkis)}
.galerie{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:6px;grid-auto-rows:84px;
}
.kachel{
  position:relative;overflow:hidden;background:var(--schwarz-3);cursor:pointer;
  border:1px solid #1B1D20;
  transition:opacity .4s,border-color .35s;
}
.kachel img{
  width:100%;height:100%;object-fit:contain;padding:5px;
  filter:grayscale(.35) brightness(.82);
  transition:transform .7s cubic-bezier(.19,1,.22,1),filter .4s;
}
.kachel:hover{border-color:var(--tuerkis-tief)}
.kachel:hover img{transform:scale(1.05);filter:grayscale(0) brightness(1)}
.kachel-label{
  position:absolute;left:0;right:0;bottom:0;padding:16px 7px 6px;
  background:linear-gradient(to top,rgba(12,12,13,.96) 40%,transparent);
  font-size:10.5px;color:var(--knochen);letter-spacing:.02em;line-height:1.3;
  transform:translateY(8px);opacity:0;transition:all .35s;
}
.kachel:hover .kachel-label{transform:none;opacity:1}
.kachel-jahr{font-size:9px;letter-spacing:.18em;color:var(--tuerkis);display:block;margin-bottom:2px;text-transform:uppercase}
.kachel.aus,.kachel.versteckt{display:none}
.galerie-fuss{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:26px;
}
.galerie-zaehler{font-size:12.5px;color:#6E6960;letter-spacing:.06em}

/* ---------- Zahlen ---------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:#1F2124;border:1px solid #1F2124}
.zahl{background:var(--schwarz);padding:36px 26px;text-align:center}
.zahl-wert{font-family:'Cinzel',serif;font-size:2.6rem;color:var(--tuerkis);line-height:1}
.zahl-name{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#6E6960;margin-top:11px}

/* ---------- Mitglieder ---------- */
.mit-gruppe{margin-bottom:52px}
.mit-gruppe-kopf{
  display:flex;align-items:baseline;gap:14px;margin-bottom:20px;
  padding-bottom:12px;border-bottom:1px solid #1F2124;
}
.mit-gruppe-kopf h3{font-size:1.25rem;color:#F2ECDF}
.mit-gruppe-kopf span{font-size:11px;letter-spacing:.18em;color:#6E6960;text-transform:uppercase}
.mit-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.mit{
  display:flex;align-items:center;gap:12px;padding:9px 12px;
  border:1px solid #1B1D20;border-radius:2px;background:var(--schwarz);
  transition:border-color .3s,background .3s,transform .3s;
}
.mit:hover{border-color:var(--tuerkis-tief);background:var(--schwarz-3);transform:translateY(-2px)}
.mit-zeichen{
  flex:0 0 34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:12.5px;letter-spacing:.04em;
  color:var(--tuerkis);background:rgba(18,178,212,.09);
  clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%);
  transition:background .3s,color .3s;
}
.mit:hover .mit-zeichen{background:var(--tuerkis);color:#04252C}
.mit-name{font-size:13.5px;color:#B9B2A4;line-height:1.3;transition:color .3s}
.mit:hover .mit-name{color:var(--knochen)}
.mit-gruppe.brut .mit-zeichen{color:var(--rot-hell);background:rgba(163,45,45,.12)}
.mit-gruppe.brut .mit:hover{border-color:var(--rot)}
.mit-gruppe.brut .mit:hover .mit-zeichen{background:var(--rot);color:#F5E4E4}
.mit-leer{
  border:1px dashed #26282C;border-radius:2px;padding:26px;text-align:center;
  color:#6E6960;font-size:14px;
}

/* ---------- Termine ---------- */
.termine{border-top:1px solid #1F2124}
.termin-monat{
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--tuerkis);
  padding:26px 8px 10px;border-bottom:1px solid #1F2124;
}
.termin-monat:first-child{padding-top:14px}
.termin{
  display:grid;grid-template-columns:88px 1fr auto;gap:24px;align-items:center;
  padding:20px 8px;border-bottom:1px solid #1F2124;
  transition:background .35s,padding-left .35s;
}
.termin:hover{background:var(--schwarz-3);padding-left:20px}
.termin-datum{font-family:'Cinzel',serif;color:var(--tuerkis);letter-spacing:.04em;line-height:1.25}
.termin-tag-name{display:block;font-size:10px;letter-spacing:.2em;color:#5F5A53;text-transform:uppercase}
.termin-zahl{display:block;font-size:15px}
.termin-titel{font-size:16px;color:#E7DFCC;line-height:1.35}
.termin-ort{font-size:13px;color:#6E6960;margin-top:3px}
.termin-tag{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid #2C2F33;padding:5px 12px;color:#8E887C;border-radius:2px;white-space:nowrap;
}
.termin-tag.nacht{border-color:var(--tuerkis-tief);color:var(--tuerkis)}
/* Eigene Veranstaltung hervorheben */
.termin.eigen{background:rgba(18,178,212,.05);border-left:2px solid var(--tuerkis);border-radius:0}
.termin.eigen .termin-titel{font-family:'Cinzel',serif;font-size:18px;color:#F2ECDF}
.termin-tag.eigen{border-color:var(--tuerkis);color:var(--tuerkis);background:rgba(18,178,212,.08)}
.termine-leer{color:#6E6960;font-size:14px;padding:24px 8px}
.termine-hinweis{margin-top:24px;font-size:12.5px;color:#4E4A44;line-height:1.7;max-width:70ch}
@media(max-width:900px){
  .termin{grid-template-columns:64px 1fr;gap:14px;row-gap:8px;padding:16px 6px}
  .termin-tag{grid-column:2;justify-self:start}
  .termin-zahl{font-size:13px}
}

/* ---------- Mitmachen ---------- */
.ruf{position:relative;overflow:hidden;text-align:center;padding:130px 0}
.ruf h2{font-size:clamp(1.9rem,4.4vw,3.2rem);margin-bottom:22px;color:#F2ECDF}
.ruf .lead{margin:0 auto 34px}

/* ---------- Footer ---------- */
footer{background:#08080A;padding:64px 0 30px;border-top:1px solid #1A1B1D}
.f-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;margin-bottom:44px}
footer h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tuerkis);margin-bottom:16px;font-family:'Inter',sans-serif;font-weight:500}
footer p,footer li{color:#6E6960;font-size:14px}
footer ul{list-style:none}
footer li{padding:5px 0}
footer li a:hover{color:var(--knochen)}
.f-unten{border-top:1px solid #1A1B1D;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#4E4A44}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:200;background:rgba(6,6,7,.96);
  display:none;align-items:center;justify-content:center;padding:40px;
  backdrop-filter:blur(6px);
}
.lightbox.auf{display:flex;animation:einblenden .3s ease forwards;opacity:0}
.lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;border:1px solid #2C2F33}
.lightbox-zu{position:absolute;top:22px;right:28px;background:none;border:0;color:var(--knochen);font-size:30px;cursor:pointer;line-height:1}
.lightbox-bild{position:relative;text-align:center}
.lightbox-titel{margin-top:14px;font-size:13px;color:#8E887C;letter-spacing:.08em}

/* ---------- Pforte (Eingangsschirm) ---------- */
.pforte{
  position:fixed;inset:0;z-index:300;background:#08080A;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;
  transition:opacity .9s ease,visibility .9s;
}
.pforte.fort{opacity:0;visibility:hidden;pointer-events:none}
.pforte-inhalt{max-width:480px;position:relative;z-index:2}
.pforte-logo{
  width:clamp(96px,14vw,150px);margin:0 auto 26px;display:block;opacity:.9;
  animation:pfortePuls 4.5s ease-in-out infinite;
}
@keyframes pfortePuls{
  0%,100%{filter:drop-shadow(0 0 16px rgba(18,178,212,.22));transform:scale(1)}
  50%{filter:drop-shadow(0 0 38px rgba(18,178,212,.55));transform:scale(1.035)}
}
.pforte-titel{font-size:clamp(1.5rem,3.4vw,2.1rem);color:#F2ECDF;margin:14px 0 28px}
.pforte-hinweis{margin-top:20px;font-size:12px;color:#4E4A44;letter-spacing:.08em}
.pforte-link{
  background:none;border:0;border-bottom:1px solid #3A3C40;color:#6E6960;
  cursor:pointer;font-family:inherit;font-size:12px;padding:0 0 1px;
}
.pforte-link:hover{color:var(--knochen);border-color:var(--knochen)}
.pforte-augen{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- Flackern ---------- */
.flacker{
  position:fixed;inset:0;z-index:290;pointer-events:none;opacity:0;
  background:var(--knochen);mix-blend-mode:screen;
}
.flacker.an{animation:flackern 1.5s steps(1,end) forwards}
@keyframes flackern{
  0%{opacity:0}
  4%{opacity:.5}   9%{opacity:0}
  30%{opacity:0}  34%{opacity:.34}  38%{opacity:0}
  62%{opacity:0}  66%{opacity:.2}   71%{opacity:0}
  100%{opacity:0}
}
.dunkelstoss{
  position:fixed;inset:0;z-index:289;pointer-events:none;opacity:0;background:#000;
}
.dunkelstoss.an{animation:stossen 1.5s steps(1,end) forwards}
@keyframes stossen{
  0%{opacity:0}  6%{opacity:.85}  11%{opacity:0}
  36%{opacity:.6}  41%{opacity:0}
  68%{opacity:.4}  73%{opacity:0}
  100%{opacity:0}
}

/* ---------- Ton-Schalter ---------- */
.ton-schalter{
  background:none;border:1px solid #26282C;border-radius:2px;color:#6E6960;
  cursor:pointer;padding:6px 11px;font-size:13px;line-height:1;margin-left:16px;
  transition:color .3s,border-color .3s;
}
.ton-schalter:hover{color:var(--tuerkis);border-color:var(--tuerkis-tief)}
.ton-schalter.stumm{color:#3A3C40}

/* ---------- Responsiv ---------- */
@media(max-width:900px){
  .nav-rechts{position:static}
  .nav-links{
    position:fixed;top:0;right:0;bottom:0;width:min(80vw,330px);
    height:100dvh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    background:#0A0A0B;
    flex-direction:column;gap:0;align-items:stretch;
    padding:calc(84px + env(safe-area-inset-top)) 30px calc(30px + env(safe-area-inset-bottom));
    transform:translateX(100%);
    transition:transform .4s cubic-bezier(.19,1,.22,1);
    border-left:1px solid #1F2124;
    z-index:80;visibility:hidden;
  }
  .nav-links.auf{transform:none;visibility:visible}
  .nav-links a{
    padding:17px 0;border-bottom:1px solid #17181A;font-size:16px;
    letter-spacing:.05em;color:#B9B2A4;
  }
  .nav-links a::after{display:none}
  .nav-links a.hier{color:var(--tuerkis)}
  /* Verdunkelung hinter der Schublade */
  /* Muss UNTER .nav liegen: .nav ist position:fixed mit z-index:60 und bildet
     damit einen eigenen Stapelkontext. Die z-index-Werte von .nav-links (80)
     und .burger (85) gelten nur innerhalb von .nav – nach außen zählt die 60.
     Ein Schleier mit z-index 75 läge also ÜBER dem Menü und würde alle
     Klicks abfangen. */
  .menue-schleier{
    position:fixed;inset:0;z-index:40;background:rgba(6,6,7,.72);
    opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
  }
  .menue-schleier.auf{opacity:1;visibility:visible}
  .burger{display:block;position:relative;z-index:85}
  .ton-schalter{position:relative;z-index:85}
  .sage-raster,.haes-raster,.f-raster{grid-template-columns:1fr;gap:36px}
  .sage-bild{position:static}
  .sage-bild img{max-height:none}
  .haes-bilder{grid-template-columns:repeat(2,1fr);gap:8px}
  .haes-bilder a.gross{grid-column:span 2;grid-row:span 1;aspect-ratio:4/3}
  section{padding:76px 0}
  .galerie{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));grid-auto-rows:70px;gap:5px}
  .galerie-fuss{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .zeig{opacity:1;transform:none}
  .hero h1 .zeile i{transform:none}
  .hero-wappen,.hero .eyebrow,.hero .vers,.hero-aktion{opacity:1}
  .hero-schatten{opacity:.06}
  .flacker.an,.dunkelstoss.an{animation:none;opacity:0}
}
/* ================= Mehrseiten-Ergänzungen ================= */
.nav-links a.hier{color:var(--tuerkis)}
.nav-links a.hier::after{width:100%}

/* Kopfbereich der Unterseiten */
.seitenkopf{
  position:relative;padding:150px 0 64px;overflow:hidden;
  border-bottom:1px solid #1A1B1D;
}
.seitenkopf .wrap{position:relative;z-index:5}
.seitenkopf h1{font-size:clamp(2rem,4.6vw,3.2rem);color:#F2ECDF;margin:14px 0 16px}
.seitenkopf .lead{font-size:17px}
.seitenkopf-schatten{
  position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:min(46vw,420px);opacity:.05;pointer-events:none;z-index:1;
}

/* Brotkrumen */
.krumen{font-size:12px;letter-spacing:.1em;color:#4E4A44;margin-bottom:4px}
.krumen a{color:#6E6960}
.krumen a:hover{color:var(--tuerkis)}

/* Mitglieder-Detail */
.mit[data-hat-detail="1"]{cursor:pointer}
.mit-bild{
  flex:0 0 40px;height:40px;border-radius:2px;overflow:hidden;
  background:var(--schwarz-3);border:1px solid #222427;
}
.mit-bild img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.9)}
.mit:hover .mit-bild img{filter:none}
.mit-rolle{font-size:11px;color:#6E6960;letter-spacing:.06em;margin-top:1px}

.blatt{
  position:fixed;inset:0;z-index:210;background:rgba(6,6,7,.94);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:32px 20px;
}
.blatt.auf{display:flex;animation:einblenden .28s ease forwards;opacity:0}
.blatt-karte{
  background:var(--schwarz-2);border:1px solid #24262A;border-radius:3px;
  max-width:660px;width:100%;max-height:88vh;overflow:auto;position:relative;
}
.blatt-kopf{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:26px 28px;border-bottom:1px solid #1F2124}
.blatt-portraet{
  width:120px;height:150px;object-fit:cover;background:var(--schwarz-3);
  border:1px solid #24262A;
}
.blatt-zeichen{
  width:120px;height:150px;display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:2.4rem;color:var(--tuerkis);
  background:rgba(18,178,212,.08);border:1px solid #24262A;
}
.blatt-kopf h3{font-size:1.55rem;color:#F2ECDF;margin-bottom:6px}
.blatt-genannt{font-family:'Cinzel',serif;color:var(--tuerkis);font-size:1rem;margin-bottom:14px}
.blatt-marke{
  display:inline-block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid #2C2F33;padding:4px 10px;color:#8E887C;border-radius:2px;
}
.blatt-daten{list-style:none;padding:22px 28px}
.blatt-daten li{
  display:grid;grid-template-columns:170px 1fr;gap:16px;
  padding:11px 0;border-bottom:1px solid #17181A;font-size:14.5px;color:#A9A296;
}
.blatt-daten li:last-child{border-bottom:0}
.blatt-daten b{
  color:var(--tuerkis);font-weight:500;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;padding-top:3px;
}
.blatt-fuss{padding:0 28px 26px;display:flex;gap:10px;flex-wrap:wrap}
.blatt-zu{
  position:absolute;top:14px;right:16px;background:none;border:0;
  color:#6E6960;font-size:26px;cursor:pointer;line-height:1;z-index:2;
}
.blatt-zu:hover{color:var(--knochen)}
.blatt-leer{padding:22px 28px;color:#6E6960;font-size:14px}
.blatt.brut .blatt-zeichen{color:var(--rot-hell);background:rgba(163,45,45,.1)}
.blatt.brut .blatt-daten b{color:var(--rot-hell)}
.blatt.brut .blatt-genannt{color:var(--rot-hell)}

/* Mitglieder-Suche */
.mit-suche{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:34px;
}
.mit-suche input{
  flex:1;min-width:220px;background:var(--schwarz-2);border:1px solid #26282C;
  color:var(--knochen);padding:11px 15px;font-family:inherit;font-size:14px;border-radius:2px;
}
.mit-suche input:focus{outline:none;border-color:var(--tuerkis-tief)}
.mit-suche input::placeholder{color:#4E4A44}
.mit-treffer{font-size:12.5px;color:#6E6960;letter-spacing:.06em}
.mit.weg{display:none}

/* Galerie-Seite: Kampagnen-Abschnitte */
.kampagne{margin-bottom:44px}
.kampagne-kopf{
  display:flex;align-items:baseline;gap:14px;margin-bottom:16px;
  padding-bottom:11px;border-bottom:1px solid #1F2124;
}
.kampagne-kopf h3{font-size:1.15rem;color:#F2ECDF}
.kampagne-kopf span{font-size:11px;letter-spacing:.18em;color:#6E6960;text-transform:uppercase}

/* Impressum / Fließtext */
.text-seite{max-width:760px}
.text-seite h2{font-size:1.5rem;color:#F2ECDF;margin:44px 0 16px}
.text-seite h3{font-size:1.1rem;color:#D6CFC0;margin:30px 0 12px}
.text-seite p{color:#A9A296;margin-bottom:15px;font-size:15.5px}
.text-seite a{color:var(--tuerkis);border-bottom:1px solid rgba(18,178,212,.4)}
.text-seite a:hover{border-color:var(--tuerkis)}
.karte{
  background:var(--schwarz-2);border:1px solid #1F2124;border-radius:3px;
  padding:26px 28px;margin-bottom:26px;
}
.karte p{margin-bottom:7px}

@media(max-width:900px){
  .seitenkopf{padding:112px 0 46px}
  .seitenkopf-schatten{display:none}
  .blatt-kopf{grid-template-columns:1fr;gap:16px}
  .blatt-portraet,.blatt-zeichen{width:100%;height:220px}
  .blatt-daten li{grid-template-columns:1fr;gap:3px}
}

/* Wappen als Platzhalter, wenn kein Foto vorliegt */
.mit-bild.ist-platzhalter,.blatt-rahmen.ist-platzhalter{
  background:rgba(18,178,212,.05);
  display:flex;align-items:center;justify-content:center;
}
.mit-bild img.platzhalter{
  width:70%;height:70%;object-fit:contain;opacity:.34;filter:none;
}
.mit:hover .mit-bild img.platzhalter{opacity:.6}
.blatt-rahmen{
  width:120px;height:150px;background:var(--schwarz-3);border:1px solid #24262A;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.blatt-rahmen .blatt-portraet{width:100%;height:100%;border:0}
.blatt-rahmen img.platzhalter{width:64%;height:64%;object-fit:contain;opacity:.3;filter:none}
.blatt.brut .mit-bild.ist-platzhalter,.blatt.brut .blatt-rahmen.ist-platzhalter{background:rgba(163,45,45,.06)}
@media(max-width:900px){ .blatt-rahmen{width:100%;height:220px} }

/* ---------- Ämter ---------- */
.mit-amt{
  display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tuerkis);margin-top:2px;
}
.mit.traegt-amt{border-color:rgba(18,178,212,.35)}
.blatt-marke.amt{border-color:var(--tuerkis-tief);color:var(--tuerkis)}

.vorstand-raster{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px;
}
.amtstraeger{
  background:var(--schwarz);border:1px solid #1B1D20;border-radius:2px;
  padding:0 0 16px;text-align:left;font:inherit;color:inherit;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;
  transition:border-color .3s,transform .3s;
}
.amtstraeger:hover{border-color:var(--tuerkis-tief);transform:translateY(-3px)}
.amt-rahmen{
  width:100%;aspect-ratio:4/5;background:var(--schwarz-3);overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  border-bottom:1px solid #1B1D20;
}
.amt-rahmen .blatt-portraet{width:100%;height:100%;border:0;object-fit:cover}
.amt-rahmen.ist-platzhalter{background:rgba(18,178,212,.05)}
.amt-rahmen img.platzhalter{width:56%;height:56%;object-fit:contain;opacity:.3;filter:none}
.amt-titel{
  display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tuerkis);padding:0 14px;margin-bottom:5px;
}
.amt-name{display:block;font-family:'Cinzel',serif;font-size:15px;color:#E7DFCC;padding:0 14px}
.amt-rolle{display:block;font-size:11.5px;color:#6E6960;padding:0 14px;margin-top:3px}
@media(max-width:900px){
  .vorstand-raster{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
}

/* ---------- NEMESIS-Credit ---------- */
.nemesis{
  display:inline-block;
  font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;color:#5F5A53;letter-spacing:normal;white-space:nowrap;
}
.nemesis:hover{color:#8E887C}
.nemesis b{color:#c1121f;font-weight:400}
.nemesis:hover b{color:#e02b33}
.nemesis-text{
  display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;
  border-right:2px solid transparent;padding-right:2px;
}
/* Breite kommt aus dem Skript (--breite), nicht aus ch:
   letter-spacing addiert sich sonst auf und schneidet das Ende ab. */
.nemesis-text.tippt{
  width:0;
  animation:nemesisTippen 2.4s steps(26,end) forwards, nemesisCursor .8s step-end infinite;
}
@keyframes nemesisTippen{ to{ width:var(--breite); } }
@keyframes nemesisCursor{ 0%,100%{border-right-color:#c1121f} 50%{border-right-color:transparent} }
@media(prefers-reduced-motion:reduce){
  .nemesis-text.tippt{width:auto;animation:none;border-right-color:transparent}
}

/* ---------- Partner & Unterstützer ---------- */
.partner-raster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;
}
.partner{
  display:flex;flex-direction:column;
  background:var(--schwarz);border:1px solid #1B1D20;border-radius:3px;
  overflow:hidden;transition:border-color .35s,transform .35s;
}
.partner:hover{border-color:var(--tuerkis-tief);transform:translateY(-3px)}
.partner-logo{
  height:170px;background:var(--schwarz-2);border-bottom:1px solid #1B1D20;
  display:flex;align-items:center;justify-content:center;padding:20px 24px;
}
.partner-logo img{max-width:78%;max-height:100%;width:auto;height:auto;object-fit:contain}
.partner-logo.ohne-logo{background:var(--schwarz-2)}
.partner-wortmarke{
  font-family:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  font-size:15px;letter-spacing:.06em;color:#c1121f;text-align:center;line-height:1.4;
}
.partner-plus{font-family:'Cinzel',serif;font-size:2rem;color:#2C2F33;line-height:1}
.partner-text{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.partner-rolle{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tuerkis);margin-bottom:7px;
}
.partner-name{font-family:'Cinzel',serif;font-size:16px;color:#E7DFCC;margin-bottom:8px}
.partner-zeile{font-size:13.5px;color:#8E887C;line-height:1.6;flex:1}
.partner-mehr{
  font-size:12px;letter-spacing:.08em;color:#5F5A53;margin-top:16px;
  transition:color .3s;
}
.partner:hover .partner-mehr{color:var(--tuerkis)}

.partner-frei{border-style:dashed;border-color:#26282C}
.partner-frei:hover{border-color:#3E4145;border-style:dashed}
.partner-frei .partner-rolle{color:#5F5A53}
.partner-frei .partner-name{color:#8E887C}
.partner-hinweis{
  margin-top:26px;font-size:12.5px;color:#4E4A44;line-height:1.7;max-width:70ch;
}
@media(max-width:900px){
  .partner-raster{grid-template-columns:1fr}
  .partner-logo{height:150px}
}