/* =============================================================
   RFV WEIBERN – DESIGNSYSTEM
   Vereinsfarben aus dem Wappen: Rot, Gold, Navy, Anthrazit
   ============================================================= */

:root{
  /* Marke */
  --rot:        #C8102E;
  --rot-tief:   #7E0C1D;
  --rot-hell:   #E8354F;
  --gold:       #F5B400;
  --gold-tief:  #C98F00;
  --navy:       #2A2A6E;
  --navy-tief:  #1B1B4A;

  /* Neutral */
  --schwarz:    #0C0D10;
  --anthrazit:  #16181D;
  --grau-900:   #1E2128;
  --grau-700:   #363B45;
  --grau-500:   #6E7683;
  --grau-300:   #B9BFC9;
  --grau-100:   #EDEFF3;
  --weiss:      #FFFFFF;

  /* Rollen – DUNKLES THEME (Standard) */
  --bg:         var(--schwarz);
  --bg-alt:     var(--anthrazit);
  --text:       #E9EBEF;
  --text-mute:  #9AA2AF;
  --line:       rgba(255,255,255,.10);
  --line-stark: rgba(255,255,255,.20);

  /* Flächen & Theme-abhängige Details */
  --surface:      rgba(255,255,255,.025);
  --surface-2:    rgba(255,255,255,.06);
  --surface-hover:rgba(255,255,255,.05);
  --surface-grad: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  --nav-bg:       rgba(12,13,16,.82);
  --menu-bg:      rgba(12,13,16,.97);
  --burger:       #FFFFFF;
  --kicker:       var(--gold);
  --num-a:        #FFFFFF;
  --num-b:        var(--grau-300);
  --invert-bg:    #FFFFFF;
  --invert-fg:    var(--schwarz);
  --gal-bg:       var(--grau-900);
  --hero-fade:    linear-gradient(180deg,rgba(12,13,16,.72) 0%,rgba(12,13,16,.30) 35%,rgba(12,13,16,.82) 78%,var(--bg) 100%);
  --phero-fade:   linear-gradient(180deg,rgba(12,13,16,.80),rgba(12,13,16,.45) 45%,rgba(12,13,16,.95));
  --marquee-filter: grayscale(1) brightness(1.6) contrast(.85);
  --card-shadow:  none;

  /* Maße */
  --max:        1240px;
  --radius:     18px;
  --radius-sm:  10px;
  --radius-lg:  28px;
  --nav-h:      74px;

  /* Typo */
  --font:       'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Schatten */
  --shadow:     0 20px 60px -20px rgba(0,0,0,.75);
  --shadow-sm:  0 8px 24px -10px rgba(0,0,0,.6);

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------- Basis ------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:var(--body-size,17px);line-height:var(--body-lh,1.65);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font);font-weight:var(--head-weight,800);line-height:1.05;letter-spacing:var(--head-spacing,-.025em);margin:0;}
h1{font-size:clamp(2.6rem,7vw,var(--h1-size,5.4rem));}
h2{font-size:clamp(2rem,4.6vw,var(--h2-size,3.4rem));}
h3{font-size:clamp(1.25rem,2.2vw,var(--h3-size,1.6rem));}
p{margin:0 0 1em;}
::selection{background:var(--rot);color:#fff;}

.wrap{width:min(100% - 2.5rem,var(--max));margin-inline:auto;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ------------------------------------------- Sektionen ------ */
section{position:relative;}
.sec{padding:clamp(var(--sec-pad-min,72px),10vw,var(--sec-pad,140px)) 0;}
.sec--klein{padding:clamp(40px,6vw,80px) 0;}
.sec--gross{padding:clamp(90px,13vw,190px) 0;}
.sec--dunkel{background:var(--schwarz);color:#E9EBEF;}
.sec--alt{background:var(--bg-alt);}
.sec--light{background:var(--grau-100);color:var(--schwarz);}
.sec--light .kicker{color:var(--rot);}
.sec--light .lead{color:var(--grau-700);}

.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font);font-size:.74rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--kicker);
  margin:0 0 1.1rem;
}
.kicker::before{content:"";width:26px;height:2px;background:currentColor;display:block;}
.kicker--center::before{display:none;}

.sec-head{max-width:720px;margin-bottom:clamp(2.5rem,5vw,4rem);}
.sec-head--center{margin-inline:auto;text-align:center;}
.lead{color:var(--text-mute);font-size:clamp(1.02rem,1.4vw,1.16rem);margin-top:1.1rem;}

/* ---------------------------------------------- Buttons ----- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:100px;border:1px solid transparent;
  font-family:var(--font);font-weight:700;font-size:.94rem;letter-spacing:.01em;
  transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn--primary{background:var(--rot);color:#fff;box-shadow:0 10px 30px -12px rgba(200,16,46,.9);}
.btn--primary:hover{background:var(--rot-hell);box-shadow:0 16px 36px -12px rgba(200,16,46,1);}
.btn--gold{background:var(--gold);color:#1a1400;}
.btn--gold:hover{background:#ffc422;}
.btn--ghost{border-color:var(--line-stark);color:var(--text);backdrop-filter:blur(6px);}
.btn--ghost:hover{border-color:currentColor;background:var(--surface-2);}
.btn--dark{background:var(--schwarz);color:#fff;}
.btn--dark:hover{background:var(--grau-900);}
.btn svg{width:18px;height:18px;flex:none;}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font);
  font-weight:700;font-size:.9rem;color:var(--rot-hell);
}
.link-arrow svg{width:16px;height:16px;transition:transform .25s var(--ease);}
.link-arrow:hover svg{transform:translateX(4px);}

/* ------------------------------------------------- Nav ------ */
.nav{
  position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;
  transition:background .35s,backdrop-filter .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:var(--nav-bg);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line);
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(100% - 2.5rem,var(--max));margin-inline:auto;}
.nav__brand{display:flex;align-items:center;gap:.75rem;flex:none;font-family:var(--font);font-weight:800;letter-spacing:-.02em;white-space:nowrap;}
.nav__brand img{height:var(--logo-h,42px);width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));}
.nav__brand span{font-size:.98rem;line-height:1.15;}
.nav__brand small{display:block;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--kicker);}
.nav__links{display:flex;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0;}
.nav__links a{
  display:block;padding:.55rem .8rem;border-radius:100px;white-space:nowrap;
  font-family:var(--font);font-weight:600;font-size:.85rem;color:var(--text-mute);
  transition:color .2s,background .2s;
}
.nav__links a:hover,.nav__links a.is-active{color:var(--text);background:var(--surface-2);}
.nav__cta{display:flex;align-items:center;gap:.6rem;flex:none;}
.nav__cta .btn{padding:.7rem 1.25rem;font-size:.85rem;}
.nav__burger{
  display:none;width:44px;height:44px;border:1px solid var(--line-stark);border-radius:12px;
  background:var(--surface);position:relative;color:var(--text);
}
.nav__burger span{position:absolute;left:12px;right:12px;height:2px;background:var(--burger);border-radius:2px;transition:transform .3s var(--ease),opacity .2s;}
.nav__burger span:nth-child(1){top:15px;}
.nav__burger span:nth-child(2){top:21px;}
.nav__burger span:nth-child(3){top:27px;}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(6px) rotate(45deg);}
body.menu-open .nav__burger span:nth-child(2){opacity:0;}
body.menu-open .nav__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.mobilenav{
  position:fixed;inset:var(--nav-h) 0 0 0;z-index:99;background:var(--menu-bg);
  backdrop-filter:blur(18px);padding:2rem 1.25rem;
  display:flex;flex-direction:column;gap:.25rem;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .3s,transform .3s var(--ease),visibility .3s;
}
body.menu-open .mobilenav{opacity:1;visibility:visible;transform:none;}
.mobilenav a{
  font-family:var(--font);font-weight:700;font-size:clamp(1.05rem,4.2vw,1.25rem);
  padding:.62rem .5rem;
  border-bottom:1px solid var(--line);
}
.mobilenav .btn{margin-top:1.5rem;}

/* ------------------------------------------------ Hero ------ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:clamp(3rem,7vw,6rem);}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    var(--hero-fade),
    radial-gradient(120% 80% at 15% 90%,rgba(200,16,46,.30),transparent 60%);
}
.hero__inner{position:relative;z-index:1;width:min(100% - 2.5rem,var(--max));margin-inline:auto;padding-top:calc(var(--nav-h) + 3rem);}
.hero h1{max-width:14ch;}
.hero h1 .accent{
  background:linear-gradient(100deg,var(--rot-hell),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__text{max-width:52ch;color:#D6DAE1;font-size:clamp(1.02rem,1.6vw,1.18rem);margin-top:1.6rem;}
.hero__actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem;}
.hero__scroll{
  position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:2;
  font-family:var(--font);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.hero__scroll::after{content:"";width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:drop 1.8s infinite;}
@keyframes drop{0%{opacity:0;transform:scaleY(.3);transform-origin:top;}50%{opacity:1;}100%{opacity:0;transform:scaleY(1);transform-origin:bottom;}}

/* Kompakter Seiten-Hero (Unterseiten) */
.phero{position:relative;min-height:clamp(460px,62vh,620px);display:flex;align-items:flex-end;overflow:hidden;padding-bottom:clamp(2.5rem,5vw,4.5rem);}
.phero__media{position:absolute;inset:0;}
.phero__media img{width:100%;height:100%;object-fit:cover;}
.phero__media::after{content:"";position:absolute;inset:0;background:var(--phero-fade);}
.phero__inner{position:relative;z-index:1;width:min(100% - 2.5rem,var(--max));margin-inline:auto;padding-top:calc(var(--nav-h) + 2rem);}
.phero h1{font-size:clamp(2.4rem,6vw,4.6rem);}
.crumbs{font-size:.82rem;color:var(--text-mute);margin-bottom:1.2rem;font-family:var(--font);font-weight:600;}
.crumbs a:hover{color:var(--gold);}

/* ----------------------------------------------- Stats ------ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line);}
.stat{background:var(--bg);padding:clamp(1.8rem,3.5vw,2.8rem) 1.4rem;text-align:center;}
.stat__num{font-family:var(--font);font-weight:800;font-size:clamp(2rem,4.2vw,3.2rem);letter-spacing:-.03em;line-height:1;
  background:linear-gradient(160deg,var(--num-a),var(--num-b));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat__label{margin-top:.7rem;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);font-family:var(--font);font-weight:600;}

/* ---------------------------------------------- Ueber ------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5rem);align-items:center;}
.split__media{position:relative;}
.split__media img{border-radius:var(--radius-lg);width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:var(--shadow);}
.split__media .float{
  position:absolute;right:-1.5rem;bottom:-2rem;width:44%;border-radius:var(--radius);
  aspect-ratio:1;object-fit:cover;border:6px solid var(--bg);box-shadow:var(--shadow);
}
.sec--light .split__media .float{border-color:var(--grau-100);}
.ticks{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.75rem;}
.ticks li{display:flex;gap:.8rem;align-items:flex-start;font-size:.98rem;}
.ticks li::before{
  content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:50%;
  background:var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* --------------------------------------------- Highlights --- */
.hl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.5vw,2rem);}
.hl{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:clamp(400px,48vw,540px);
  display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.6rem,3vw,2.6rem);
  isolation:isolate;border:1px solid var(--line);
}
.hl img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease);}
.hl::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,13,16,.15) 0%,rgba(12,13,16,.72) 55%,rgba(12,13,16,.96) 100%);}
.hl:hover img{transform:scale(1.06);}
.hl__kicker{font-family:var(--font);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem;}
.hl h3{font-size:clamp(1.9rem,3.4vw,2.9rem);}
.hl p{color:#CBD0D9;margin:.9rem 0 1.3rem;font-size:.98rem;max-width:46ch;}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.4rem;}
.tag{
  font-family:var(--font);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  padding:.35rem .75rem;border-radius:100px;border:1px solid var(--line-stark);
  background:rgba(255,255,255,.06);backdrop-filter:blur(4px);
}

/* ---------------------------------------------- Termine ----- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;}
.sortleiste{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;margin:0 0 1.8rem;
}
.filters + .sortleiste{margin-top:-1.1rem;}
.sortleiste__text{
  font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--kicker);
}
.sortleiste__wahl{display:flex;flex-wrap:wrap;gap:.4rem;}
.sortleiste .chip{padding:.42rem .9rem;font-size:.78rem;}
@media (max-width:560px){
  .filters + .sortleiste{margin-top:-.6rem;}
  .sortleiste__wahl{width:100%;}
  .sortleiste .chip{flex:1 1 auto;}
}
.chip{
  padding:.5rem 1.05rem;border-radius:100px;border:1px solid var(--line);
  background:transparent;color:var(--text-mute);font-family:var(--font);font-weight:600;font-size:.82rem;
  transition:all .2s;
}
.chip:hover{color:var(--text);border-color:var(--line-stark);}
.chip.is-active{background:var(--invert-bg);color:var(--invert-fg);border-color:var(--invert-bg);}

.termine{display:grid;gap:.7rem;}
.termin{
  display:grid;grid-template-columns:88px 1fr auto;gap:1.4rem;align-items:center;
  padding:1.2rem 1.5rem;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-grad);box-shadow:var(--card-shadow);
  transition:border-color .3s,transform .3s var(--ease),background .3s;
}
.termin:hover{border-color:var(--line-stark);transform:translateX(4px);background:var(--surface-hover);}
.termin--hl{border-color:rgba(200,16,46,.55);background:linear-gradient(100deg,rgba(200,16,46,.12),var(--surface));}
.termin--hl:hover{border-color:var(--rot);}
.termin__date{text-align:center;border-right:1px solid var(--line);padding-right:1rem;}
.termin__day{font-family:var(--font);font-weight:800;font-size:1.9rem;line-height:1;}
.termin__mon{font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.16em;color:var(--kicker);margin-top:.3rem;}
.termin__tags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .7rem;}
.termin__body h3{font-size:1.12rem;margin:0;line-height:1.3;}
.termin__meta{font-size:.8rem;color:var(--text-mute);margin-top:.2rem;font-family:var(--font);font-weight:600;}
.termin__body p{margin:.5rem 0 0;font-size:.92rem;color:var(--text-mute);max-width:70ch;}
.termin__go{flex:none;}
.badge{
  font-family:var(--font);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.32rem .7rem;border-radius:100px;background:var(--surface-2);color:var(--text-mute);
}
.badge--rot{background:var(--rot);color:#fff;}
.badge{display:inline-block;}
.badge--past{background:transparent;border:1px solid var(--line-stark);color:var(--grau-500);}
.termin__tags .badge{margin-left:0;}
.termin--past{opacity:.48;}
.termin--past:hover{opacity:.8;}
.termin--past .termin__mon{color:var(--grau-500);}

/* ------------------------------------------------ News ------ */
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
.news{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:var(--card-shadow);
  display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .3s;
}
.news:hover{transform:translateY(-6px);border-color:var(--line-stark);}
.news__img{aspect-ratio:4/3;overflow:hidden;}
.news__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.news:hover .news__img img{transform:scale(1.07);}
.news__body{padding:1.3rem;flex:1;display:flex;flex-direction:column;}
.news__date{font-family:var(--font);font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--kicker);text-transform:uppercase;}
.news h3{font-size:1.05rem;margin:.6rem 0 .55rem;}
.news p{font-size:.88rem;color:var(--text-mute);margin:0;}

/* --------------------------------------------- Galerie ------ */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;}
.gal__item{
  position:relative;overflow:hidden;border-radius:var(--radius-sm);aspect-ratio:1;
  background:var(--gal-bg);cursor:zoom-in;
}
.gal__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s;}
.gal__item:hover img{transform:scale(1.08);filter:brightness(1.06);}
.gal__item--wide{grid-column:span 2;aspect-ratio:2/1;}
.gal__item--tall{grid-row:span 2;aspect-ratio:1/2;}

.album{margin-bottom:clamp(3rem,5vw,4.5rem);}
.album__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;padding-bottom:.9rem;border-bottom:1px solid var(--line);}
.album__head h3{font-size:clamp(1.3rem,2.4vw,1.8rem);}
.album__count{font-family:var(--font);font-size:.78rem;color:var(--text-mute);letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
.album__text{max-width:62ch;margin:-.4rem 0 1.2rem;color:var(--text-mute);font-size:.95rem;}
.album__mehr{margin-top:1rem;display:flex;justify-content:center;}
.album--teil .gal__item--mehr{display:none;}
.album--teil.is-offen .gal__item--mehr{display:block;}
.album[hidden]{display:none;}
.album-leer{padding:2.4rem 0;color:var(--text-mute);text-align:center;}

/* Lightbox */
.lb{
  position:fixed;inset:0;z-index:200;background:rgba(6,7,9,.95);backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
}
.lb.is-open{opacity:1;visibility:visible;}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;box-shadow:var(--shadow);}
.lb__btn{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line-stark);background:rgba(255,255,255,.07);color:#fff;
  display:grid;place-items:center;transition:background .2s;
}
.lb__btn:hover{background:rgba(255,255,255,.18);}
.lb__prev{left:1.2rem;} .lb__next{right:1.2rem;}
.lb__close{position:absolute;top:1.2rem;right:1.2rem;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line-stark);background:rgba(255,255,255,.07);color:#fff;display:grid;place-items:center;}
.lb__close:hover{background:rgba(255,255,255,.18);}
.lb__count{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);font-family:var(--font);font-size:.82rem;color:var(--text-mute);letter-spacing:.1em;}

/* ------------------------------------------------ Video ----- */
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;}
.videocard{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--card-shadow);}
.videocard video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;}
.videocard__cap{padding:.9rem 1.2rem;font-family:var(--font);font-weight:600;font-size:.9rem;}

/* --------------------------------------------- Sponsoren ---- */
.marquee{overflow:hidden;position:relative;padding:1.5rem 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee__track{display:flex;gap:3.5rem;width:max-content;animation:slide 42s linear infinite;}
.marquee:hover .marquee__track{animation-play-state:paused;}
@keyframes slide{to{transform:translateX(-50%);}}
.marquee img{
  /* Auch im Band ganz zu sehen: Die Höhe gibt das Maß, sehr breite
     Logos bremst zusätzlich eine Obergrenze in der Breite. */
  height:60px;width:auto;max-width:240px;object-fit:contain;filter:var(--marquee-filter);
  opacity:.6;transition:opacity .3s,filter .3s;
}
.marquee img:hover{opacity:1;filter:none;}
.sec--light .marquee img{filter:grayscale(1) contrast(.9);}
.sec--light .marquee img:hover{filter:none;}

/* ------------------------------------------------ Fakten ---- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.fact{background:var(--bg-alt);padding:1.5rem 1.4rem;}
.facts{box-shadow:var(--card-shadow);}
.fact__l{font-family:var(--font);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);font-weight:600;}
.fact__v{font-family:var(--font);font-weight:800;font-size:1.35rem;margin-top:.4rem;letter-spacing:-.02em;}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;background:var(--surface);box-shadow:var(--card-shadow);}
.card h4{font-family:var(--font);font-size:1rem;margin:0 0 .9rem;color:var(--kicker);letter-spacing:.02em;}
.card ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;font-size:.92rem;color:var(--text-mute);}
.card li{padding-left:1rem;position:relative;}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--rot);}

/* Preis-Boxen */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;}
.price{border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;text-align:center;background:var(--surface-grad);box-shadow:var(--card-shadow);}
.price__w{font-family:var(--font);font-weight:600;font-size:.88rem;color:var(--text-mute);letter-spacing:.1em;text-transform:uppercase;}
.price__p{font-family:var(--font);font-weight:800;font-size:2.6rem;margin-top:.5rem;letter-spacing:-.03em;color:var(--kicker);}

/* Tabelle */
.tbl{width:100%;border-collapse:collapse;font-size:.94rem;}
.tbl th{
  text-align:left;font-family:var(--font);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-mute);font-weight:700;padding:.9rem 1rem;border-bottom:1px solid var(--line-stark);
}
.tbl td{padding:1rem;border-bottom:1px solid var(--line);}
.tbl tr:hover td{background:rgba(255,255,255,.03);}
.tbl td:first-child{font-family:var(--font);font-weight:700;}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);}

/* Downloads */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.7rem;}
.dl{
  display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.2rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--card-shadow);
  font-family:var(--font);font-weight:600;font-size:.92rem;transition:all .25s var(--ease);
}
.dl:hover{border-color:var(--rot);transform:translateY(-2px);background:rgba(200,16,46,.08);}
.dl svg{width:20px;height:20px;flex:none;color:var(--kicker);}

/* Hinweis */
.note{
  display:flex;gap:1rem;padding:1.3rem 1.5rem;border-radius:var(--radius);
  border:1px solid rgba(245,180,0,.35);background:rgba(245,180,0,.08);font-size:.94rem;
}
.note svg{width:22px;height:22px;flex:none;color:var(--gold);margin-top:2px;}

/* Countdown */
.countdown{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem;}
.cd{min-width:86px;padding:1rem .8rem;border-radius:var(--radius-sm);border:1px solid var(--line-stark);
  background:rgba(255,255,255,.06);backdrop-filter:blur(8px);text-align:center;}
.cd__n{font-family:var(--font);font-weight:800;font-size:1.9rem;line-height:1;letter-spacing:-.03em;}
.cd__l{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mute);margin-top:.4rem;font-family:var(--font);font-weight:600;}

/* ------------------------------------------------ CTA ------- */
.cta{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:clamp(2.5rem,6vw,4.5rem);
  text-align:center;border:1px solid var(--line);
  background:radial-gradient(120% 140% at 50% 0%,rgba(200,16,46,.28),transparent 60%),var(--bg-alt);
}
.cta h2{max-width:18ch;margin-inline:auto;}
.cta p{max-width:56ch;margin:1.1rem auto 2rem;color:var(--text-mute);}
.cta__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;}

/* --------------------------------------------- Kontakt ------ */
.kontakt{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.kbox{border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;background:var(--surface);box-shadow:var(--card-shadow);}
.kbox__l{font-family:var(--font);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--kicker);font-weight:700;}
.kbox__v{font-family:var(--font);font-weight:700;font-size:1.12rem;margin-top:.6rem;}
.kbox a:hover{color:var(--rot-hell);}

/* ---------------------------------------------- Footer ------ */
.footer{background:var(--anthrazit);border-top:3px solid var(--rot);padding:clamp(3rem,6vw,4.5rem) 0 2rem;}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;}
.footer__brand img{height:var(--logo-h-foot,76px);margin-bottom:1.1rem;}
.footer__brand p{font-size:.9rem;color:var(--text-mute);max-width:34ch;}
.footer h4{font-family:var(--font);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem;font-weight:700;}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.footer a{font-size:.92rem;color:var(--text-mute);transition:color .2s;}
.footer a:hover{color:#fff;}
.socials{display:flex;gap:.6rem;margin-top:1.2rem;}
.socials a{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);display:grid;place-items:center;transition:all .25s;}
.socials a:hover{background:var(--rot);border-color:var(--rot);color:#fff;transform:translateY(-2px);}
.socials svg{width:19px;height:19px;}
.footer__bottom{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size:.82rem;color:var(--grau-500);
}

/* =============================================================
   HELLES THEME
   Aktivierung:  <html lang="de" data-theme="hell">
   Umschalter in der Navigation setzt dasselbe Attribut zur Laufzeit.
   ============================================================= */
:root[data-theme="hell"]{
  --bg:         #FFFFFF;
  --bg-alt:     #F3F5F8;
  --text:       #12141A;
  --text-mute:  #59616F;
  --line:       rgba(12,13,16,.11);
  --line-stark: rgba(12,13,16,.26);

  --surface:      #FFFFFF;
  --surface-2:    rgba(12,13,16,.06);
  --surface-hover:rgba(12,13,16,.035);
  --surface-grad: linear-gradient(180deg,#FFFFFF,#FAFBFC);
  --nav-bg:       rgba(255,255,255,.88);
  --menu-bg:      rgba(255,255,255,.98);
  --burger:       #12141A;
  --kicker:       var(--rot);
  --num-a:        #12141A;
  --num-b:        #4B5464;
  --invert-bg:    var(--schwarz);
  --invert-fg:    #FFFFFF;
  --gal-bg:       #E4E7EC;
  --hero-fade:    linear-gradient(180deg,rgba(12,13,16,.62) 0%,rgba(12,13,16,.22) 32%,rgba(12,13,16,.40) 62%,rgba(255,255,255,.72) 90%,var(--bg) 100%);
  --phero-fade:   linear-gradient(180deg,rgba(12,13,16,.70),rgba(12,13,16,.38) 45%,rgba(12,13,16,.62) 82%,rgba(255,255,255,.55) 96%,var(--bg) 100%);
  --marquee-filter: grayscale(1) contrast(.95) opacity(.85);
  --card-shadow:  0 2px 4px -2px rgba(12,13,16,.06), 0 12px 28px -18px rgba(12,13,16,.20);
  --shadow:       0 24px 60px -26px rgba(12,13,16,.35);
}

/* Helles Theme – Feinschliff */
:root[data-theme="hell"] body{background:var(--bg);}
:root[data-theme="hell"] .nav.is-stuck .nav__brand img{filter:none;}
:root[data-theme="hell"] .link-arrow{color:var(--rot);}
:root[data-theme="hell"] .stats{background:var(--line);}
:root[data-theme="hell"] .stat{background:var(--bg);}
:root[data-theme="hell"] .badge--past{color:var(--grau-500);}
:root[data-theme="hell"] .termin--hl{background:linear-gradient(100deg,rgba(200,16,46,.09),#fff);}
:root[data-theme="hell"] .cta{
  background:radial-gradient(120% 140% at 50% 0%,rgba(200,16,46,.12),transparent 62%),var(--bg-alt);
}
:root[data-theme="hell"] .note{border-color:rgba(200,16,46,.28);background:rgba(200,16,46,.06);}
:root[data-theme="hell"] .note svg{color:var(--rot);}
:root[data-theme="hell"] .tbl-wrap{background:var(--surface);box-shadow:var(--card-shadow);}
:root[data-theme="hell"] .tbl tr:hover td{background:rgba(12,13,16,.03);}
:root[data-theme="hell"] .dl:hover{background:rgba(200,16,46,.06);}
:root[data-theme="hell"] .split__media .float{border-color:var(--bg);}
:root[data-theme="hell"] .hl{border-color:transparent;box-shadow:var(--card-shadow);}
:root[data-theme="hell"] .videocard{border-color:var(--line);}
:root[data-theme="hell"] .price__p{color:var(--rot);}
:root[data-theme="hell"] .themetoggle{border-color:var(--line-stark);}

/* Bereiche, die in BEIDEN Themes dunkel bleiben ------------------
   (Text liegt dort auf Fotos bzw. auf dunklem Grund)             */

/* Navigation über dem Hero-Foto – immer heller Text */
.nav:not(.is-stuck) .nav__brand{color:#fff;}
.nav:not(.is-stuck) .nav__brand small{color:var(--gold);}
.nav:not(.is-stuck) .nav__links a{color:rgba(255,255,255,.78);}
.nav:not(.is-stuck) .nav__links a:hover,
.nav:not(.is-stuck) .nav__links a.is-active{color:#fff;background:rgba(255,255,255,.14);}
.nav:not(.is-stuck) .themetoggle{color:#fff;border-color:rgba(255,255,255,.32);}
.nav:not(.is-stuck) .themetoggle:hover{background:rgba(255,255,255,.14);}
.nav:not(.is-stuck) .nav__burger{color:#fff;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.07);}
.nav:not(.is-stuck) .nav__burger span{background:#fff;}
/* Bei offenem Mobilmenü passt sich die Leiste dem Menü an */
body.menu-open .nav{background:var(--menu-bg);border-bottom-color:var(--line);}
body.menu-open .nav:not(.is-stuck) .nav__brand{color:var(--text);}
body.menu-open .nav:not(.is-stuck) .nav__burger{color:var(--text);border-color:var(--line-stark);background:var(--surface);}
body.menu-open .nav:not(.is-stuck) .themetoggle{color:var(--text);border-color:var(--line-stark);}
body.menu-open .nav__burger span{background:var(--burger);}

.hero,.phero{color:#fff;}
.hero h1,.phero h1{color:#fff;}
.hero .hero__text,.phero .hero__text{color:#D6DAE1;}
.hero .kicker,.phero .kicker{color:var(--gold);}
.phero .crumbs{color:rgba(255,255,255,.72);}
.hero .btn--ghost,.phero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.34);}
.hero .btn--ghost:hover,.phero .btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;}
.hero .cd,.phero .cd{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.10);}
.hero .cd__n,.phero .cd__n{color:#fff;}
.hero .cd__l,.phero .cd__l{color:rgba(255,255,255,.72);}
.hero__scroll{color:rgba(255,255,255,.7);}

.hl{color:#fff;}
.hl h3{color:#fff;}
.hl p{color:#CBD0D9;}
.hl .tag{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.10);color:#fff;}
.hl .hl__kicker{color:var(--gold);}

/* Footer bleibt in beiden Themes dunkel */
.footer{
  --text-mute:#9AA2AF;
  --line:rgba(255,255,255,.10);
  --kicker:var(--gold);
  color:#E9EBEF;
}
.footer .socials a{color:#E9EBEF;}

/* Theme-Umschalter */
.themetoggle{
  width:42px;height:42px;flex:none;border-radius:100px;
  border:1px solid var(--line-stark);background:transparent;color:var(--text);
  display:grid;place-items:center;transition:background .25s,border-color .25s,transform .25s var(--ease);
}
.themetoggle:hover{background:var(--surface-2);transform:translateY(-2px);}
.themetoggle svg{width:19px;height:19px;}
.themetoggle .ico-sonne{display:none;}
:root[data-theme="hell"] .themetoggle .ico-sonne{display:block;}
:root[data-theme="hell"] .themetoggle .ico-mond{display:none;}
.mobilenav .themetoggle{width:auto;height:auto;padding:.7rem 1.2rem;gap:.6rem;grid-auto-flow:column;
  font-family:var(--font);font-weight:700;font-size:.95rem;margin-top:.8rem;}

/* --------------------------------------------- Animation ---- */
[data-anim]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
[data-anim].is-in{opacity:1;transform:none;}
[data-anim][data-delay="1"]{transition-delay:.08s;}
[data-anim][data-delay="2"]{transition-delay:.16s;}
[data-anim][data-delay="3"]{transition-delay:.24s;}
[data-anim][data-delay="4"]{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important;}
  [data-anim]{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

/* ------------------------------------------- Responsive ----- */
@media (max-width:1220px){
  .nav__cta .btn{display:none;}
}
@media (max-width:1080px){
  .news-grid{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2rem;}
}
@media (max-width:900px){
  :root{--nav-h:64px;}
  .nav__links,.nav__cta .btn{display:none;}
  .nav__burger{display:block;}
  .split{grid-template-columns:1fr;}
  .split__media .float{width:38%;right:-.5rem;bottom:-1.2rem;}
  .hl-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .gal{grid-template-columns:repeat(2,1fr);}
  .gal__item--tall{grid-row:span 1;aspect-ratio:1;}
  .video-grid{grid-template-columns:1fr;}
  .kontakt{grid-template-columns:1fr;}
  .facts{grid-template-columns:repeat(2,1fr);}
  .termin{grid-template-columns:64px 1fr;gap:1rem;padding:1rem 1.1rem;}
  .termin__go{grid-column:2;justify-self:start;}
  .termin__day{font-size:1.5rem;}

  /* Ab hier liegen die runden Knöpfe fest über der Seite. Damit der
     Kopfbereich nicht dahinter verschwindet, endet er darüber –
     Text und Schaltflächen rücken nach oben. */
  .hero{padding-bottom:calc(1.4rem + 76px + env(safe-area-inset-bottom,0px));}
  .hero__inner{padding-top:calc(var(--nav-h) + 2rem);}
}
@media (max-width:560px){
  body{font-size:16px;}
  .news-grid{grid-template-columns:1fr;}
  .gal__item--wide{grid-column:span 2;}
  .footer__grid{grid-template-columns:1fr;}
  .hero__actions .btn{width:100%;}
  .lb__prev{left:.4rem;} .lb__next{right:.4rem;}
}

/* =============================================================
   BEDIENELEMENTE
   Back-to-Top rechts · Cookie und Barrierefreiheit links
   ============================================================= */
.uibar{
  position:fixed;inset:auto 0 0 0;z-index:150;pointer-events:none;
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:clamp(1rem,2.5vw,1.6rem);
}
.uibar__links,.uibar__rechts{display:flex;gap:.6rem;pointer-events:auto;}

.uibtn{
  position:relative;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--line-stark);background:var(--uibtn-bg,rgba(22,24,29,.92));
  color:var(--text);backdrop-filter:blur(14px) saturate(1.3);
  display:grid;place-items:center;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
  transition:transform .28s var(--ease),background .25s,border-color .25s,opacity .3s,visibility .3s;
}
:root[data-theme="hell"] .uibtn{--uibtn-bg:rgba(255,255,255,.94);box-shadow:0 10px 30px -14px rgba(12,13,16,.35);}
.uibtn:hover{transform:translateY(-3px);border-color:var(--rot);color:var(--rot);}
.uibtn svg{width:23px;height:23px;}
.uibtn--top{opacity:0;visibility:hidden;transform:translateY(12px);}
.uibtn--top.is-in{opacity:1;visibility:visible;transform:none;}
.uibtn--a11y{border-color:rgba(200,16,46,.45);}
.uibtn__tip{
  position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--invert-bg);color:var(--invert-fg);font-family:var(--font);font-weight:700;
  font-size:.72rem;letter-spacing:.02em;padding:.35rem .7rem;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease);
}
.uibar__rechts .uibtn__tip{left:auto;right:0;transform:translateY(4px);}
.uibtn:hover .uibtn__tip,.uibtn:focus-visible .uibtn__tip{opacity:1;transform:translateX(-50%) translateY(0);}
.uibar__rechts .uibtn:hover .uibtn__tip{transform:translateY(0);}

/* ---------------------------------------------------- Panels */
.uipanel{
  position:fixed;bottom:calc(clamp(1rem,2.5vw,1.6rem) + 64px);left:clamp(1rem,2.5vw,1.6rem);
  z-index:151;width:min(94vw,410px);max-height:min(76vh,640px);
  display:flex;flex-direction:column;
  background:var(--panel-bg,rgba(18,20,25,.97));backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--line-stark);border-radius:20px;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.98);transform-origin:bottom left;
  transition:opacity .28s,transform .28s var(--ease),visibility .28s;
}
:root[data-theme="hell"] .uipanel{--panel-bg:rgba(255,255,255,.99);box-shadow:0 30px 70px -28px rgba(12,13,16,.40);}
.uipanel.is-open{opacity:1;visibility:visible;transform:none;}
.uipanel__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.3rem;border-bottom:1px solid var(--line);
}
.uipanel__head h3{font-size:1.02rem;letter-spacing:-.01em;}
.uipanel__close{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--text-mute);display:grid;place-items:center;flex:none;transition:all .2s;
}
.uipanel__close:hover{color:var(--text);border-color:var(--line-stark);background:var(--surface-2);}
.uipanel__close svg{width:16px;height:16px;}
.uipanel__body{padding:.4rem 1.3rem 1rem;overflow-y:auto;overscroll-behavior:contain;}
.uipanel__text{font-size:.88rem;color:var(--text-mute);margin:.9rem 0 1.1rem;line-height:1.6;}
.uipanel__fein{font-size:.78rem;color:var(--text-mute);margin:1rem 0 .2rem;}
.uipanel__fein a{color:var(--rot-hell);text-decoration:underline;}
:root[data-theme="hell"] .uipanel__fein a{color:var(--rot);}
.uipanel__foot{padding:1rem 1.3rem;border-top:1px solid var(--line);display:flex;gap:.5rem;}
.uipanel__foot--3{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.uipanel__foot--3 .btn:last-child{grid-column:1 / -1;}
.uipanel__foot .btn{width:100%;}

.uirow{padding:.85rem 0;border-bottom:1px solid var(--line);}
.uirow:last-child{border-bottom:0;}
.uirow--switch{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;}
.uirow__label{font-family:var(--font);font-weight:700;font-size:.87rem;}
.uirow__hint{font-size:.78rem;color:var(--text-mute);margin-top:.25rem;line-height:1.5;max-width:30ch;}
.uitag{
  font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.16rem .45rem;border-radius:100px;background:var(--surface-2);color:var(--text-mute);
  margin-left:.4rem;vertical-align:middle;
}

/* Segment-Umschalter */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:.7rem;}
.seg--4{grid-template-columns:repeat(4,1fr);}
.seg button{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem .5rem;border-radius:10px;border:1px solid var(--line);
  background:transparent;color:var(--text-mute);
  font-family:var(--font);font-weight:600;font-size:.78rem;transition:all .2s;
}
.seg button svg{width:15px;height:15px;}
.seg button:hover{color:var(--text);border-color:var(--line-stark);}
.seg button.is-active{background:var(--rot);border-color:var(--rot);color:#fff;}

/* Schalter */
.switch{
  width:50px;height:28px;border-radius:100px;flex:none;
  border:1px solid var(--line-stark);background:var(--surface-2);
  position:relative;transition:background .25s,border-color .25s;
}
.switch span{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--text-mute);transition:transform .25s var(--ease),background .25s;
}
.switch.is-on{background:var(--rot);border-color:var(--rot);}
.switch.is-on span{transform:translateX(22px);background:#fff;}
.switch.is-locked{opacity:.6;cursor:not-allowed;}

.btn--sm{padding:.6rem 1rem;font-size:.82rem;}
.btn--sm svg{width:15px;height:15px;}

/* ------------------------------------------------ Cookie-Banner */
.cookiebanner{
  position:fixed;inset:auto 0 0 0;z-index:149;
  background:var(--panel-bg,rgba(18,20,25,.98));backdrop-filter:blur(20px);
  border-top:1px solid var(--line-stark);
  transform:translateY(105%);transition:transform .45s var(--ease);
}
:root[data-theme="hell"] .cookiebanner{--panel-bg:rgba(255,255,255,.99);box-shadow:0 -14px 40px -26px rgba(12,13,16,.4);}
.cookiebanner.is-open{transform:none;}
.cookiebanner__inner{
  width:min(100% - 2.5rem,var(--max));margin-inline:auto;
  padding:1.2rem 0 calc(1.2rem + 64px);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.cookiebanner__text{max-width:64ch;font-size:.86rem;color:var(--text-mute);line-height:1.6;}
.cookiebanner__text strong{display:block;font-family:var(--font);font-size:.98rem;color:var(--text);margin-bottom:.3rem;}
.cookiebanner__actions{display:flex;gap:.5rem;flex-wrap:wrap;}

/* =============================================================
   BARRIEREFREIHEITS-MODI
   ============================================================= */
:root{--a11y-scale:1;}
body{font-size:calc(var(--body-size,17px) * var(--a11y-scale));}

.a11y-abstand body,body.a11y-abstand{line-height:1.95;letter-spacing:.02em;word-spacing:.09em;}
:root.a11y-abstand body{line-height:1.95;letter-spacing:.02em;word-spacing:.09em;}
:root.a11y-abstand p,:root.a11y-abstand li,:root.a11y-abstand td{line-height:2;}

:root.a11y-links a:not(.btn):not(.uibtn):not(.nav__brand){text-decoration:underline;text-underline-offset:.22em;}

:root.a11y-lesehilfe body,
:root.a11y-lesehilfe h1,:root.a11y-lesehilfe h2,:root.a11y-lesehilfe h3,:root.a11y-lesehilfe h4{
  font-family:Verdana,Tahoma,'Segoe UI',system-ui,sans-serif;letter-spacing:0;
}

:root.a11y-ruhe *,:root.a11y-ruhe *::before,:root.a11y-ruhe *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important;
}
:root.a11y-ruhe [data-anim]{opacity:1 !important;transform:none !important;}
:root.a11y-ruhe .marquee__track{animation:none !important;}
:root.a11y-ruhe .hero__scroll::after{animation:none !important;}

/* Hoher Kontrast */
:root.a11y-kontrast{
  --text:#FFFFFF;--text-mute:#E2E6EC;
  --line:rgba(255,255,255,.34);--line-stark:rgba(255,255,255,.62);
  --rot-hell:#FF6B7E;--kicker:#FFD34D;
  --surface:rgba(255,255,255,.07);--surface-2:rgba(255,255,255,.14);
}
:root.a11y-kontrast[data-theme="hell"]{
  --text:#000000;--text-mute:#22262E;
  --line:rgba(12,13,16,.40);--line-stark:rgba(12,13,16,.70);
  --kicker:#A00A22;--rot-hell:#A00A22;
  --surface:#FFFFFF;--surface-2:rgba(12,13,16,.10);
}
:root.a11y-kontrast .lead,:root.a11y-kontrast .uirow__hint,
:root.a11y-kontrast .news p,:root.a11y-kontrast .termin__body p{color:var(--text-mute);}
:root.a11y-kontrast .hero__media::after,:root.a11y-kontrast .phero__media::after{
  background:var(--hero-fade),linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35));
}
:root.a11y-kontrast .hl::after{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.82) 45%,rgba(0,0,0,.97) 100%);}
:root.a11y-kontrast .hl p{color:#F0F2F5;}
:root.a11y-kontrast .marquee img{filter:none;opacity:1;}
:root.a11y-kontrast .btn--ghost{border-width:2px;}

/* Sichtbarer Fokus überall */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px;}
:root[data-theme="hell"] :focus-visible{outline-color:var(--rot);}

/* Sprunglink */
.skiplink{
  position:fixed;top:-100px;left:50%;transform:translateX(-50%);z-index:200;
  background:var(--rot);color:#fff;padding:.85rem 1.6rem;border-radius:0 0 12px 12px;
  font-family:var(--font);font-weight:700;font-size:.9rem;transition:top .25s var(--ease);
}
.skiplink:focus{top:0;}

@media (max-width:640px){
  .uipanel{left:.75rem;right:.75rem;width:auto;transform-origin:bottom center;}
  .uibtn{width:48px;height:48px;}
  .uibtn svg{width:21px;height:21px;}
  .cookiebanner__inner{padding-bottom:calc(1.2rem + 60px);}
  .cookiebanner__actions .btn{flex:1;min-width:140px;}
}

/* =============================================================
   NEUE UNTERSEITEN
   ============================================================= */
.wrap--schmal{width:min(100% - 2.5rem,760px);}
.sec-head--breit{max-width:900px;}
.phero--klein{min-height:clamp(380px,48vh,480px);}
.h1--klein{font-size:clamp(1.9rem,4.4vw,3.3rem);max-width:22ch;}

/* ------------------------------------------------- Chronik */
.chronik{list-style:none;margin:0;padding:0;position:relative;}
.chronik::before{
  content:"";position:absolute;left:calc(var(--chronik-spalte,140px) - 1px);top:.6rem;bottom:.6rem;
  width:2px;background:linear-gradient(var(--rot),var(--gold),transparent);
}
.chronik__item{
  display:grid;grid-template-columns:var(--chronik-spalte,140px) 1fr;gap:2rem;
  padding:0 0 2.4rem;position:relative;
}
.chronik__item:last-child{padding-bottom:0;}
.chronik__jahr{
  font-family:var(--font);font-weight:800;font-size:clamp(1.2rem,2.2vw,1.7rem);
  letter-spacing:-.02em;color:var(--kicker);text-align:right;padding-right:2rem;
}
.chronik__body{position:relative;padding-left:.4rem;}
.chronik__body::before{
  content:"";position:absolute;left:-2.35rem;top:.55em;width:13px;height:13px;border-radius:50%;
  background:var(--rot);border:3px solid var(--bg);box-shadow:0 0 0 2px var(--rot);
}
.sec--alt .chronik__body::before{border-color:var(--bg-alt);}
.chronik__body h3{font-size:1.14rem;}
.chronik__body p{margin:.5rem 0 0;color:var(--text-mute);font-size:.95rem;max-width:62ch;}

/* ------------------------------------------ Termine-Archiv */
.termine-leer{
  padding:3rem 1.5rem;text-align:center;color:var(--text-mute);
  border:1px dashed var(--line-stark);border-radius:var(--radius);font-size:.95rem;
}

/* -------------------------------------------- Neuigkeiten */
.news-grid--3{grid-template-columns:repeat(3,1fr);}
.news h3 a:hover{color:var(--rot-hell);}
:root[data-theme="hell"] .news h3 a:hover{color:var(--rot);}
.news__img{display:block;}

.beitrag{font-size:1.04rem;line-height:1.8;}
.beitrag__lead{
  font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.6;color:var(--text);
  font-family:var(--font);font-weight:600;letter-spacing:-.01em;margin-bottom:1.8rem;
}
.beitrag p{color:var(--text-mute);}
.beitrag__foot{
  display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.5rem;
  padding-top:2rem;border-top:1px solid var(--line);
}

/* ------------------------------------------------ Formular */
.split--form{grid-template-columns:1.25fr .75fr;align-items:start;}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.feld{display:flex;flex-direction:column;gap:.45rem;}
.feld--voll{grid-column:1 / -1;}
.feld__label{
  font-family:var(--font);font-weight:700;font-size:.8rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);
}
.feld__label em{color:var(--rot-hell);font-style:normal;}
:root[data-theme="hell"] .feld__label em{color:var(--rot);}
.feld input,.feld select,.feld textarea{
  width:100%;padding:.9rem 1rem;border-radius:var(--radius-sm);
  border:1px solid var(--line-stark);background:var(--surface);color:var(--text);
  font-family:var(--font-body);font-size:.96rem;line-height:1.5;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.feld textarea{resize:vertical;min-height:140px;}
.feld select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA2AF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:16px;padding-right:2.6rem;}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none;border-color:var(--rot);box-shadow:0 0 0 3px rgba(200,16,46,.18);
}
.feld.has-fehler input,.feld.has-fehler select,.feld.has-fehler textarea{border-color:var(--rot);}
.feld__fehler{font-size:.78rem;color:var(--rot-hell);min-height:1em;}
:root[data-theme="hell"] .feld__fehler{color:var(--rot);}
.feld.has-fehler .feld__fehler::before{content:"⚠ ";}

.check{flex-direction:row;align-items:flex-start;gap:.75rem;font-size:.88rem;color:var(--text-mute);line-height:1.6;}
.check input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--rot);padding:0;}
.check a{color:var(--rot-hell);text-decoration:underline;}
:root[data-theme="hell"] .check a{color:var(--rot);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}

.form__foot{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.6rem;}
.form__hinweis{font-size:.8rem;color:var(--text-mute);margin:0;}
.form__hinweis em{color:var(--rot-hell);font-style:normal;}
.form__meldung{
  margin-top:1.2rem;padding:1rem 1.2rem;border-radius:var(--radius-sm);font-size:.9rem;
  border:1px solid var(--line-stark);background:var(--surface);
}
.form__meldung.is-ok{border-color:rgba(46,160,67,.5);background:rgba(46,160,67,.10);}
.form__meldung.is-fehler{border-color:rgba(200,16,46,.55);background:rgba(200,16,46,.10);}

.kontakt-link{color:var(--rot-hell);text-decoration:underline;text-underline-offset:.18em;}
:root[data-theme="hell"] .kontakt-link{color:var(--rot);}

@media (max-width:1080px){
  .news-grid--3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .split--form{grid-template-columns:1fr;}
  .chronik{--chronik-spalte:64px;}
  .chronik__item{gap:1.2rem;}
  .chronik__jahr{padding-right:1rem;font-size:1.05rem;}
  .chronik__body::before{left:-1.55rem;}
}
@media (max-width:640px){
  .news-grid--3{grid-template-columns:1fr;}
  .form__grid{grid-template-columns:1fr;}
}

/* Ghost-Buttons in Panels: kein zweiter Weichzeichner über dem Panel-Blur */
.uipanel .btn--ghost,.cookiebanner .btn--ghost{backdrop-filter:none;background:var(--surface-2);}
.uipanel .btn--ghost:hover,.cookiebanner .btn--ghost:hover{background:var(--surface-hover);border-color:var(--text-mute);}
:root[data-theme="hell"] .uipanel .btn--ghost,
:root[data-theme="hell"] .cookiebanner .btn--ghost{background:#fff;border-color:var(--line-stark);}
:root[data-theme="hell"] .uipanel .btn--ghost:hover,
:root[data-theme="hell"] .cookiebanner .btn--ghost:hover{background:var(--bg-alt);}

/* ------------------------------------------------------------
   Nachtrag: Fotoarchiv, Linkkarten ohne Bild, Dreierraster
   ------------------------------------------------------------ */

/* Dreispaltige Bildkarten – ab Tablet, darunter greift das
   Responsive-Raster weiter oben. */
@media (min-width:901px){
  .hl-grid--3{grid-template-columns:repeat(3,1fr);}
}

/* Bildkarte ohne Hintergrundbild: keine weiße Schrift auf Leere,
   sondern normale Flächenfarben. Doppelte Klasse, damit die Regel
   die allgemeinen .hl-Regeln weiter oben sicher überschreibt. */
.hl.hl--flaeche{
  min-height:0;justify-content:flex-start;
  background:var(--surface);color:var(--text);
  padding:clamp(1.4rem,2.4vw,1.9rem);
}
/* Der dunkle Verlauf gehört zum Bild – ohne Bild muss er weg,
   sonst steht dunkle Schrift auf dunklem Grund. */
.hl.hl--flaeche::after{display:none;}
.hl.hl--flaeche h3{color:var(--text);font-size:clamp(1.2rem,2vw,1.55rem);}
.hl.hl--flaeche p{color:var(--text-mute);margin:.7rem 0 0;}
.hl.hl--flaeche .hl__kicker{color:var(--kicker);margin-bottom:.55rem;}
.hl.hl--flaeche .tag{border-color:var(--line);background:transparent;color:var(--text-mute);}
.hl.hl--flaeche:hover{border-color:var(--rot);}
.hl.hl--flaeche > div:last-child{margin-top:1.2rem;}

/* Hervorgehobener Download-Verweis (aktueller Jahrgang) */
.dl--aktiv{border-color:var(--rot);background:rgba(200,16,46,.08);}

/* ------------------------------------------------------------
   Partnerlogos einfarbig
   ------------------------------------------------------------
   In der dunklen Ansicht sollen die Logos weiß erscheinen, in der
   hellen schwarz – und in beiden Fällen ohne Hintergrundkasten.

   Viele Logos liegen als JPG mit weißem Hintergrund vor, echte
   Transparenz gibt es also nicht überall. Deshalb wird der
   Hintergrund weggerechnet statt freigestellt:

   Ein SVG-Filter rechnet die Helligkeit in Transparenz um: Weiß
   wird durchsichtig, dunkle Stellen werden voll deckend – und
   bekommen die gewünschte Farbe. Das wirkt auf jedem Hintergrund
   und kommt ohne Überlagerungsmodus aus (der vertrüge sich nicht
   mit der weichen Maske am Rand des Logobands).

   Wo ein Logo damit nicht gut aussieht, lässt es sich in der
   Administration je Sponsor auf „unverändert" stellen.
   ------------------------------------------------------------ */

.logo-filter{position:absolute;width:0;height:0;overflow:hidden;}

.marquee img.logo--ton{
  filter:url(#rfv-logo-weiss);
  opacity:.78;
}
.marquee img.logo--ton:hover{opacity:1;}

:root[data-theme="hell"] .marquee img.logo--ton{
  filter:url(#rfv-logo-schwarz);
  opacity:.66;
}
:root[data-theme="hell"] .marquee img.logo--ton:hover{opacity:1;}

/* Unverändert gewünschte Logos behalten die bisherige Darstellung. */
.marquee img.logo--roh{filter:var(--marquee-filter);}
.marquee img.logo--roh:hover{filter:none;}

/* Bei hohem Kontrast zählt Lesbarkeit mehr als Einheitlichkeit. */
:root.a11y-kontrast .marquee img.logo--ton,
:root.a11y-kontrast .marquee img.logo--roh{
  filter:none;mix-blend-mode:normal;opacity:1;
}

/* ------------------------------------------------------------
   Instagram-Beiträge
   ------------------------------------------------------------ */
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);}
.ig-grid--4{grid-template-columns:repeat(4,1fr);}
.ig-grid--2{grid-template-columns:repeat(2,1fr);}

.ig{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--card-shadow);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.ig:hover{transform:translateY(-4px);border-color:var(--rot);}
.ig__bild{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:var(--bg-alt);}
.ig__bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.ig:hover .ig__bild img{transform:scale(1.05);}
.ig__video{
  position:absolute;right:.7rem;bottom:.7rem;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:.72rem;
  backdrop-filter:blur(4px);
}
.ig__body{display:block;padding:.95rem 1.1rem 1.15rem;}
.ig__datum{
  display:block;font-family:var(--font);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--kicker);margin-bottom:.4rem;
}
.ig__text{display:block;font-size:.92rem;line-height:1.5;color:var(--text-mute);}

@media (max-width:900px){
  .ig-grid,.ig-grid--4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .ig-grid,.ig-grid--4,.ig-grid--2{grid-template-columns:1fr;}
}

/* Hinweis auf die technische Umsetzung – rutscht auf schmalen
   Geräten unter die anderen beiden Angaben. */
.footer__powered{flex-basis:100%;order:3;opacity:.72;}
.footer__powered a{color:inherit;border-bottom:1px solid transparent;}
.footer__powered a:hover{color:#fff;border-bottom-color:currentColor;}
@media (min-width:901px){
  .footer__powered{flex-basis:auto;order:0;width:100%;text-align:center;margin-top:.6rem;}
}

/* =============================================================
   Jahrgangskacheln – ein Klick aufs Jahr öffnet die Unterseite
   ============================================================= */
.jahre{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.9rem,1.8vw,1.4rem);
}
@media (max-width:1000px){ .jahre{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .jahre{grid-template-columns:1fr;} }
.jahr{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  aspect-ratio:4/3;overflow:hidden;isolation:isolate;
  border-radius:var(--radius);border:1px solid var(--line);
  padding:clamp(1rem,2vw,1.4rem);background:var(--gal-bg);color:#fff;
  transition:border-color .25s var(--ease),transform .35s var(--ease);
}
.jahr img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--ease);
}
.jahr::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,13,16,.25) 0%,rgba(12,13,16,.72) 58%,rgba(12,13,16,.94) 100%);
}
a.jahr:hover{border-color:var(--rot);transform:translateY(-3px);}
a.jahr:hover img{transform:scale(1.06);}
.jahr__nr{
  font-family:var(--font);font-weight:800;line-height:1;
  font-size:clamp(2.2rem,4.5vw,3.2rem);letter-spacing:-.02em;color:#fff;
}
.jahr__text{margin-top:.4rem;font-size:.86rem;color:#CBD0D9;}
.jahr__go{
  margin-top:.9rem;font-family:var(--font);font-size:.76rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
}
a.jahr .jahr__go::after{content:" →";}
/* Das Jahr, auf dessen Seite man gerade steht */
.jahr--aktiv{border-color:var(--rot);}
.jahr--aktiv .jahr__go{color:#fff;}
.jahr--aktiv::before{
  content:"";position:absolute;inset:0;z-index:-1;
  box-shadow:inset 0 0 0 2px var(--rot);border-radius:inherit;
}
/* Ohne Bild bleibt die Kachel trotzdem lesbar */
.jahr--leer{background:var(--surface-2);}
.jahr--leer::after{background:linear-gradient(180deg,transparent,rgba(12,13,16,.35));}

@media (max-width:560px){
  .jahre{grid-template-columns:repeat(2,1fr);}
  .jahr{aspect-ratio:1;}
}

/* Bildkacheln: dieselbe Kachel, nur mit einem Titel statt der
   Jahreszahl. Höchstens vier je Zeile, und die Kachel wächst mit dem
   Titel – ein fest vorgegebenes Seitenverhältnis würde lange
   Albumnamen oben abschneiden. */
.jahre--klein{grid-template-columns:repeat(3,1fr);}
.jahre--klein.jahre--4{grid-template-columns:repeat(4,1fr);}
.jahre--klein.jahre--2{grid-template-columns:repeat(2,1fr);}
.jahre--klein .jahr{
  aspect-ratio:auto;min-height:clamp(165px,13vw,205px);
}
.jahre--klein .jahr__nr{
  font-size:clamp(1rem,1.25vw,1.2rem);font-weight:700;letter-spacing:0;
  line-height:1.2;overflow-wrap:anywhere;
}
.jahre--klein .jahr__text{margin-top:.25rem;font-size:.8rem;}
.jahre--klein .jahr__go{margin-top:.7rem;font-size:.72rem;}
@media (max-width:1000px){
  .jahre--klein,.jahre--klein.jahre--4{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .jahre--klein,.jahre--klein.jahre--4,.jahre--klein.jahre--2{grid-template-columns:1fr;}
}

/* =============================================================
   Telefon: Platz für die runden Knöpfe unten
   Sie liegen fest über der Seite. Auf einem schmalen Bildschirm
   decken sie sonst beim Scrollen Text und Links zu – und ganz unten
   die letzte Zeile der Fußzeile. Deshalb werden sie kleiner, rücken
   enger in die Ecken, und die Seite bekommt unten Platz für sie.
   ============================================================= */
@media (max-width:760px){
  .uibar{padding:.7rem .7rem calc(.7rem + env(safe-area-inset-bottom,0px));}
  .uibtn{width:44px;height:44px;}
  .uibtn svg{width:20px;height:20px;}
  .uibtn__tip{display:none;}            /* auf dem Telefon nutzlos */

  /* Beim Scrollen nach unten treten die Knöpfe zurück (siehe ui.js). */
  .uibar{transition:opacity .25s var(--ease),transform .25s var(--ease);}
  .uibar--weg{opacity:0;transform:translateY(130%);pointer-events:none;}
  .uipanel{bottom:calc(.7rem + 52px + env(safe-area-inset-bottom,0px));left:.7rem;}

  /* Hier sind die Knöpfe 44 statt 52 Pixel groß und sitzen enger
     in der Ecke – der Kopfbereich braucht entsprechend weniger Platz. */
  .hero{padding-bottom:calc(1.7rem + 56px + env(safe-area-inset-bottom,0px));}
  .hero__inner{padding-top:calc(var(--nav-h) + 1.6rem);}
  .hero__text{margin-top:1.1rem;}
  .hero__actions{margin-top:1.5rem;gap:.7rem;}
  /* Der Hinweis zum Scrollen läge genau zwischen den Knöpfen. */
  .hero__scroll{display:none;}
}

/* Auf allen Geräten ohne Mausrand: die Fußzeile endet über den
   Knöpfen, nicht darunter – sonst liegt die letzte Zeile darunter. */
@media (max-width:900px){
  .footer{padding-bottom:calc(5.4rem + env(safe-area-inset-bottom,0px));}
  .cookiebanner__inner{padding-bottom:calc(1rem + 56px + env(safe-area-inset-bottom,0px));}
}

/* --------------------------------- Instagram: mehr Beiträge zeigen */
.ig--versteckt,
.news--versteckt{display:none;}
.ig-mehr{margin-top:1.8rem;text-align:center;}
.ig-mehr__rest{opacity:.65;font-weight:600;}

/* =============================================================
   SPONSORENWAND
   Die Logos behalten ihre Farben – dafür liegt hinter jedem eine
   Tafel, hell oder dunkel. Hauptsponsoren stehen zu dritt in einer
   Zeile und damit deutlich größer als die Partner zu fünft.
   ============================================================= */
.swand__kopf{
  font-family:var(--font);font-size:.76rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--kicker);
  margin:2.6rem 0 1.1rem;display:flex;align-items:center;gap:.9rem;
}
.swand__kopf::after{content:"";flex:1;height:1px;background:var(--line);}
.swand__kopf:first-child{margin-top:0;}

.swand{display:grid;gap:clamp(.9rem,1.8vw,1.5rem);}
.swand--haupt{grid-template-columns:repeat(3,1fr);}
.swand--partner{grid-template-columns:repeat(5,1fr);}

.swand__feld{
  display:flex;flex-direction:column;gap:.6rem;
  border-radius:var(--radius);
  transition:transform .3s var(--ease);
}
a.swand__feld:hover{transform:translateY(-4px);}

.swand__tafel{
  /* Eine einzige Zelle mit minmax(0,1fr): Erst dadurch hat die Zelle
     eine feste Größe, an der sich max-height des Logos messen kann.
     Mit schlichtem place-items behielt ein hohes Logo seine eigene
     Höhe und wurde oben und unten abgeschnitten. */
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  place-items:center;
  aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--radius);border:1px solid var(--line);
  padding:clamp(.8rem,1.7vw,1.3rem);
  box-shadow:var(--card-shadow);
  transition:border-color .3s,box-shadow .3s;
}
.swand__feld--gross .swand__tafel{
  padding:clamp(1.1rem,2.2vw,1.8rem);
}
.swand__tafel img{
  /* Ganz zu sehen, nie beschnitten – und nie größer als die eigene
     Auflösung, damit kleine Logos nicht verwaschen. */
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  min-width:0;min-height:0;
  object-fit:contain;display:block;
}
.swand__tafel--hell{background:#fff;}
.swand__tafel--dunkel{background:#111318;border-color:rgba(255,255,255,.14);}
a.swand__feld:hover .swand__tafel{border-color:var(--rot);box-shadow:0 16px 40px -18px rgba(200,16,46,.55);}

.swand__name{
  font-family:var(--font);font-size:.82rem;font-weight:600;
  color:var(--text-mute);text-align:center;line-height:1.35;
}
.swand__feld--gross .swand__name{font-size:.92rem;color:var(--text);}

@media (max-width:1000px){
  .swand--partner{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:860px){
  .swand--haupt{grid-template-columns:repeat(2,1fr);}
  .swand--partner{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .swand--haupt{grid-template-columns:1fr;}
  .swand--partner{grid-template-columns:repeat(2,1fr);}
  .swand__kopf{margin:2rem 0 .9rem;}
}

/* Mehr Kontrast: die Tafel bekommt einen deutlichen Rand. */
:root.a11y-kontrast .swand__tafel{border-width:2px;border-color:var(--text);}

/* =============================================================
   INTRO
   Beim Öffnen der Startseite: Das Rad zeichnet sich, das Wappen
   setzt sich hinein, dann teilt sich die Fläche und gibt die Seite
   frei. Alles über CSS – ohne JavaScript verschwindet es genauso,
   nur eben bei jedem Aufruf.
   Zeitplan: 0,15 s Ring · 0,55 s Speichen · 0,7 s Wappen ·
   1,0 s Schrift · 1,85 s Vorhang · 2,55 s weg.
   ============================================================= */
.intro{
  position:fixed;inset:0;z-index:4000;
  display:grid;place-items:center;
  pointer-events:auto;
  animation:intro-ende 0s linear 2.55s forwards;
}
@keyframes intro-ende{to{visibility:hidden;pointer-events:none;}}

/* Die zwei Hälften – sie tragen den Hintergrund und fahren am Ende
   auseinander. Getrennt vom Inhalt, damit der stehen bleiben kann. */
.intro__halb{
  position:absolute;left:0;right:0;height:50.5%;
  background:var(--bg);
  will-change:transform;
}
.intro__halb--oben{
  top:0;
  box-shadow:0 1px 0 var(--bg);
  animation:intro-auf-oben .8s cubic-bezier(.76,0,.24,1) 1.85s forwards;
}
.intro__halb--unten{
  bottom:0;
  animation:intro-auf-unten .8s cubic-bezier(.76,0,.24,1) 1.85s forwards;
}
@keyframes intro-auf-oben{to{transform:translateY(-101%);}}
@keyframes intro-auf-unten{to{transform:translateY(101%);}}

/* Ein feiner Lichtschein in Vereinsrot hinter dem Rad. Er gehört zur
   Mitte und nicht zu den Hälften – sonst liefe ein Saum durchs Bild. */
.intro__schein{
  position:absolute;top:50%;left:50%;
  width:min(760px,130vw);height:min(760px,130vw);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(200,16,46,.3),transparent 62%);
  opacity:0;animation:intro-schein 1.5s ease-out .2s forwards;
  pointer-events:none;z-index:1;
}
@keyframes intro-schein{40%{opacity:1;}to{opacity:.8;}}

.intro__mitte{
  position:relative;z-index:2;text-align:center;
  display:flex;flex-direction:column;align-items:center;
  padding:0 1.5rem;
  animation:intro-raus .55s cubic-bezier(.4,0,.2,1) 1.8s forwards;
}
@keyframes intro-raus{to{opacity:0;transform:scale(1.07);}}

/* ------------------------------------------------- Das Rad */
.intro__rad{
  position:relative;width:min(220px,46vw);aspect-ratio:1;margin:0 auto;
}
.intro__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}

.intro__kreis{
  fill:none;stroke:url(#introFarbe);stroke-width:3;stroke-linecap:round;
  /* 2πr bei r=92 ≈ 578 – der Umfang als Strichmuster, dann abgerollt. */
  stroke-dasharray:578;stroke-dashoffset:578;
  transform:rotate(-90deg);transform-origin:100px 100px;
  animation:intro-zeichnen 1.15s cubic-bezier(.65,0,.35,1) .15s forwards;
}
@keyframes intro-zeichnen{to{stroke-dashoffset:0;}}

.intro__speichen line{
  stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;
  opacity:0;transform-origin:100px 100px;
  animation:intro-speiche .5s ease-out forwards;
}
@keyframes intro-speiche{
  from{opacity:0;transform:scale(.4);}
  to{opacity:.55;transform:scale(1);}
}

.intro__logo{
  position:absolute;inset:20%;
  width:60%;height:60%;object-fit:contain;
  opacity:0;transform:scale(.82);
  animation:intro-logo .8s cubic-bezier(.34,1.3,.5,1) .7s forwards;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.45));
}
@keyframes intro-logo{to{opacity:1;transform:scale(1);}}

/* ---------------------------------------------- Die Schrift */
.intro__titel,.intro__unter{
  opacity:0;transform:translateY(14px);
  animation:intro-text .7s cubic-bezier(.22,1,.36,1) forwards;
}
.intro__titel{
  margin:1.6rem 0 0;font-family:var(--font);font-weight:800;
  font-size:clamp(1.15rem,3.4vw,1.7rem);letter-spacing:.01em;color:var(--text);
  animation-delay:1s;
}
.intro__unter{
  margin:.45rem 0 0;font-family:var(--font);font-weight:700;
  font-size:clamp(.66rem,1.8vw,.78rem);letter-spacing:.3em;
  text-transform:uppercase;color:var(--kicker);
  animation-delay:1.15s;
}
@keyframes intro-text{to{opacity:1;transform:none;}}

/* ------------------------------------------- Überspringen */
.intro__weg{
  position:absolute;z-index:3;
  right:clamp(1rem,3vw,2rem);bottom:calc(clamp(1rem,3vw,2rem) + env(safe-area-inset-bottom,0px));
  padding:.5rem 1rem;border-radius:100px;
  border:1px solid var(--line-stark);background:transparent;
  font-family:var(--font);font-size:.74rem;font-weight:600;letter-spacing:.08em;
  color:var(--text-mute);cursor:pointer;
  opacity:0;animation:intro-weg .4s ease-out .9s forwards;
  transition:color .2s,border-color .2s;
}
.intro__weg:hover{color:var(--text);border-color:var(--text);}
@keyframes intro-weg{to{opacity:1;}}

/* Vom Skript gesetzt: sofort weg, ohne Nachspiel. */
.intro--weg{animation:none !important;visibility:hidden !important;pointer-events:none !important;}
.intro--weg *{animation:none !important;}

/* Wer es ruhig mag, bekommt nur einen kurzen Hauch. Dasselbe gilt,
   wenn das Gerät auf „weniger Bewegung“ steht. */
@media (prefers-reduced-motion:reduce){
  .intro{animation-delay:.6s;}
  .intro *{animation-duration:.01s !important;animation-delay:0s !important;}
  .intro__halb{animation:intro-ruhe .45s ease-out .15s forwards !important;}
  .intro__weg{display:none;}
}
:root.a11y-ruhe .intro{animation-delay:.6s;}
:root.a11y-ruhe .intro *{animation-duration:.01s !important;animation-delay:0s !important;}
:root.a11y-ruhe .intro__halb{animation:intro-ruhe .45s ease-out .15s forwards !important;}
@keyframes intro-ruhe{to{opacity:0;}}

/* Solange das Intro läuft, bleibt die Seite darunter stehen. */
html.intro-laeuft{overflow:hidden;}
html.intro-laeuft body{overflow:hidden;}

/* In der hellen Ansicht braucht der Schein weniger Kraft, und die
   Speichen vertragen etwas mehr Kontrast. */
:root[data-theme="hell"] .intro__schein{
  background:radial-gradient(circle,rgba(200,16,46,.13),transparent 60%);
}
:root[data-theme="hell"] .intro__speichen line{stroke:var(--rot);}
:root[data-theme="hell"] .intro__logo{filter:drop-shadow(0 10px 26px rgba(12,13,16,.18));}

/* =============================================================
   NEUIGKEITEN AUS INSTAGRAM
   Dieselbe Karte wie eine geschriebene Neuigkeit – nur eine kleine
   Marke auf dem Bild verrät die Herkunft.
   ============================================================= */
.news__img{position:relative;}
.news__marke{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  display:inline-flex;align-items:center;gap:.36rem;
  padding:.3rem .6rem .3rem .5rem;border-radius:100px;
  background:rgba(12,13,16,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  font-family:var(--font);font-size:.68rem;font-weight:700;
  letter-spacing:.06em;color:#fff;
}
.news__marke svg{width:13px;height:13px;flex:none;}
.news__video{
  position:absolute;right:.7rem;bottom:.7rem;z-index:2;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(12,13,16,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:.7rem;padding-left:2px;
}
:root[data-theme="hell"] .news__marke,
:root[data-theme="hell"] .news__video{
  background:rgba(12,13,16,.78);border-color:rgba(255,255,255,.22);
}
:root.a11y-kontrast .news__marke,
:root.a11y-kontrast .news__video{background:#000;border-color:#fff;}