/* =========================================================
   SV Blau-Weiß Perleberg — Design System
   Fonts: Anton (Display) · Manrope (Body) — self-hosted (DSGVO)
   Farben: Blau #2b65ad · Weiß · Gelb #f5ee4d
   ========================================================= */

@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/anton-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("../assets/fonts/manrope-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/manrope-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/manrope-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:800;font-display:swap;src:url("../assets/fonts/manrope-latin-800-normal.woff2") format("woff2")}

:root{
  --blue:#2b65ad;
  --blue-600:#245691;
  --blue-700:#1c4576;
  --blue-800:#15355c;
  --blue-900:#0d2342;
  --ink:#0b1a2e;
  --yellow:#f5ee4d;
  --yellow-deep:#e4da27;
  --paper:#eef2f8;
  --paper-2:#e4ebf4;
  --white:#ffffff;
  --muted:#5b6b80;
  --line:rgba(11,26,46,.10);

  --maxw:1200px;
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 4px 18px rgba(13,35,66,.08);
  --shadow:0 18px 50px rgba(13,35,66,.16);
  --shadow-lg:0 30px 80px rgba(13,35,66,.28);

  --font-display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

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

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  overflow-x:hidden;
  font-weight:500;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* selection */
::selection{background:var(--yellow);color:var(--ink)}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:clamp(64px,9vw,128px) 0;position:relative}
.section--tight{padding:clamp(48px,6vw,80px) 0}

/* ---------- Typo ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:.98;letter-spacing:.5px;text-transform:uppercase}
.display{font-size:clamp(2.8rem,8vw,7rem)}
h2.headline{font-size:clamp(2.2rem,5.2vw,4.4rem)}
h3{font-size:clamp(1.4rem,2.4vw,2rem)}
p{max-width:62ch}
.lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--muted);font-weight:600}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:800;text-transform:uppercase;
  letter-spacing:.18em;font-size:.78rem;color:var(--blue);
}
.kicker::before{content:"";width:28px;height:3px;background:var(--yellow);display:inline-block}
.kicker--light{color:var(--yellow)}
.kicker--light::before{background:var(--yellow)}

.section-head{max-width:760px;margin-bottom:clamp(36px,5vw,64px)}
.section-head h2{margin:14px 0 18px}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--yellow);--fg:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:800;font-size:1rem;
  padding:16px 28px;border-radius:999px;cursor:pointer;border:2px solid transparent;
  background:var(--bg);color:var(--fg);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(13,35,66,.25)}
.btn:active{transform:translateY(-1px)}
.btn .arrow{transition:transform .25s var(--ease)}
.btn:hover .arrow{transform:translateX(5px)}
.btn--blue{--bg:var(--blue);--fg:#fff}
.btn--ghost{--bg:transparent;--fg:#fff;border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn--ink{--bg:var(--ink);--fg:#fff}
.btn--lg{padding:19px 34px;font-size:1.08rem}
.btn--block{display:flex;width:100%;justify-content:center}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .3s var(--ease),box-shadow .3s,padding .3s;
  padding:16px 0;
}
.site-header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);box-shadow:var(--shadow-sm);padding:10px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:13px;font-family:var(--font-display);font-size:1.18rem;text-transform:uppercase;letter-spacing:.5px;color:#fff;transition:color .3s}
.brand img{width:46px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))}
.brand b{color:var(--yellow)}
.brand span{line-height:1;display:block}
.brand .b2{font-size:.7rem;font-family:var(--font-body);font-weight:800;letter-spacing:.28em;opacity:.85}
.scrolled .brand{color:var(--ink)}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links>li>a{
  display:block;padding:10px 15px;font-weight:800;font-size:.95rem;color:#fff;
  border-radius:999px;transition:background .2s,color .2s;position:relative;
}
.scrolled .nav-links>li>a{color:var(--ink)}
.nav-links>li>a:hover{background:rgba(255,255,255,.16)}
.scrolled .nav-links>li>a:hover{background:var(--paper-2)}
.nav-links a.active{color:var(--yellow)}
.scrolled .nav-links a.active{color:var(--blue)}

/* dropdown */
.has-drop{position:relative}
.drop{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:10px;min-width:210px;
  opacity:0;visibility:hidden;transition:.22s var(--ease);
}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;color:var(--ink);font-weight:700;font-size:.93rem}
.drop a:hover{background:var(--paper);color:var(--blue)}
.drop a .dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}

.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:12px 22px;font-size:.92rem}

.burger{display:none;width:48px;height:48px;border:none;background:rgba(255,255,255,.14);border-radius:12px;cursor:pointer;position:relative}
.scrolled .burger{background:var(--paper-2)}
.burger span{position:absolute;left:13px;right:13px;height:2.5px;background:#fff;border-radius:2px;transition:.3s var(--ease)}
.scrolled .burger span{background:var(--ink)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:29px}
body.menu-open .burger span:nth-child(1){top:23px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:23px;transform:rotate(-45deg)}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--blue-900);
  padding:110px 28px 40px;transform:translateX(100%);transition:transform .4s var(--ease);
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;
}
body.menu-open .mobile-menu{transform:translateX(0)}
body.menu-open{overflow:hidden} /* Seite hinter offenem Menü nicht mitscrollen */
.mobile-menu a{color:#fff;font-family:var(--font-display);font-size:1.8rem;text-transform:uppercase;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-menu a.sub{font-family:var(--font-body);font-size:1.05rem;font-weight:700;padding:10px 0 10px 18px;opacity:.8;border:none}
.mobile-menu .mm-cta{margin-top:22px}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:radial-gradient(120% 120% at 80% 0%,var(--blue-700) 0%,var(--blue-900) 55%,#091a30 100%);
  color:#fff;overflow:hidden;padding-top:120px;
}
.hero__rays{
  position:absolute;top:-30%;right:-10%;width:80vw;height:80vw;max-width:1000px;max-height:1000px;
  background:conic-gradient(from 0deg,
     rgba(245,238,77,.16) 0deg 12deg,transparent 12deg 30deg,
     rgba(245,238,77,.16) 30deg 42deg,transparent 42deg 60deg,
     rgba(245,238,77,.16) 60deg 72deg,transparent 72deg 90deg,
     rgba(245,238,77,.16) 90deg 102deg,transparent 102deg 120deg,
     rgba(245,238,77,.16) 120deg 132deg,transparent 132deg 150deg,
     rgba(245,238,77,.16) 150deg 162deg,transparent 162deg 180deg,
     rgba(245,238,77,.16) 180deg 192deg,transparent 192deg 210deg,
     rgba(245,238,77,.16) 210deg 222deg,transparent 222deg 240deg,
     rgba(245,238,77,.16) 240deg 252deg,transparent 252deg 270deg,
     rgba(245,238,77,.16) 270deg 282deg,transparent 282deg 300deg,
     rgba(245,238,77,.16) 300deg 312deg,transparent 312deg 330deg,
     rgba(245,238,77,.16) 330deg 342deg,transparent 342deg 360deg);
  border-radius:50%;animation:spin 90s linear infinite;opacity:.7;
}
@keyframes spin{to{transform:rotate(360deg)}}
.hero__photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.30;z-index:0;mix-blend-mode:luminosity}
.hero__ghost{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);font-family:var(--font-display);font-size:clamp(6rem,22vw,20rem);line-height:.75;-webkit-text-stroke:2px rgba(255,255,255,.05);color:transparent;white-space:nowrap;z-index:1;pointer-events:none}
.hero__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent);
}
.hero__diag{position:absolute;bottom:-2px;left:0;right:0;height:120px;background:var(--paper);clip-path:polygon(0 100%,100% 100%,100% 35%,0 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero__inner{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center}
.hero__badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);padding:9px 16px;border-radius:999px;font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.hero__badge .pulse{width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 0 rgba(245,238,77,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(245,238,77,0)}100%{box-shadow:0 0 0 0 rgba(245,238,77,0)}}
.hero h1{margin:24px 0 18px}
.hero h1 .o{-webkit-text-stroke:2px var(--yellow);color:transparent}
.hero h1 .y{color:var(--yellow)}
.hero p.lead{color:rgba(255,255,255,.82);margin-bottom:34px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__shield{position:relative;display:flex;justify-content:center}
.hero__shield img{width:min(340px,80%);filter:drop-shadow(0 40px 60px rgba(0,0,0,.45));animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-16px)}}
.hero__shield::after{content:"";position:absolute;inset:auto 0 -10px 0;height:30px;margin:0 auto;width:60%;background:rgba(0,0,0,.35);filter:blur(22px);border-radius:50%}

/* ---------- Stat strip ---------- */
.stats{background:var(--ink);color:#fff;position:relative;z-index:3}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08)}
.stat{background:var(--ink);padding:40px 26px;text-align:center;position:relative}
.stat .num{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4rem);color:var(--yellow);line-height:1}
.stat .lbl{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:rgba(255,255,255,.7);margin-top:8px}

/* ---------- Department cards ---------- */
.dept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.dept{
  position:relative;background:#fff;border-radius:var(--radius);padding:30px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  border:1px solid var(--line);display:flex;flex-direction:column;min-height:280px;
}
.dept::before{content:"";position:absolute;top:0;left:0;width:100%;height:6px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.dept:hover{transform:translateY(-10px);box-shadow:var(--shadow)}
.dept:hover::before{transform:scaleX(1)}
.dept__icon{width:62px;height:62px;border-radius:16px;background:var(--paper);display:grid;place-items:center;font-size:1.9rem;margin-bottom:20px;transition:.35s var(--ease)}
.dept:hover .dept__icon{background:var(--yellow);transform:rotate(-6deg) scale(1.05)}
.dept h3{margin-bottom:10px}
.dept p{color:var(--muted);font-size:.96rem;font-weight:500;flex:1}
.dept__more{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--blue);text-transform:uppercase;font-size:.85rem;letter-spacing:.05em}
.dept__more .arrow{transition:transform .25s var(--ease)}
.dept:hover .dept__more .arrow{transform:translateX(5px)}
.dept--feat{background:linear-gradient(150deg,var(--blue) 0%,var(--blue-800) 100%);color:#fff}
.dept--feat p{color:rgba(255,255,255,.82)}
.dept--feat .dept__icon{background:rgba(255,255,255,.14)}
.dept--feat .dept__more{color:var(--yellow)}
.dept--feat .tag{position:absolute;top:22px;right:22px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;padding:5px 12px;border-radius:999px}

/* ---------- Split / feature blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.split--rev .split__media{order:2}
.media-card{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(150deg,var(--blue) 0%,var(--blue-900) 100%);min-height:420px;display:grid;place-items:center;box-shadow:var(--shadow)}
.media-card img{width:62%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.4))}
.media-card .rays-bg{position:absolute;inset:0;background:conic-gradient(from 10deg,rgba(245,238,77,.12) 0 10deg,transparent 10deg 30deg,rgba(245,238,77,.12) 30deg 40deg,transparent 40deg 60deg,rgba(245,238,77,.12) 60deg 70deg,transparent 70deg 90deg,rgba(245,238,77,.12) 90deg 100deg,transparent 100deg 120deg,rgba(245,238,77,.12) 120deg 130deg,transparent 130deg 150deg,rgba(245,238,77,.12) 150deg 160deg,transparent 160deg 180deg,rgba(245,238,77,.12) 180deg 190deg,transparent 190deg 210deg,rgba(245,238,77,.12) 210deg 220deg,transparent 220deg 240deg,rgba(245,238,77,.12) 240deg 250deg,transparent 250deg 270deg,rgba(245,238,77,.12) 270deg 280deg,transparent 280deg 300deg,rgba(245,238,77,.12) 300deg 310deg,transparent 310deg 330deg,rgba(245,238,77,.12) 330deg 340deg,transparent 340deg 360deg);animation:spin 80s linear infinite}
.feature-list{margin-top:26px;display:grid;gap:14px}
.feature-list li{display:flex;gap:14px;align-items:flex-start;font-weight:600}
.feature-list .ck{flex:none;width:28px;height:28px;border-radius:8px;background:var(--yellow);display:grid;place-items:center;font-weight:900;color:var(--ink)}

/* band */
.band{background:linear-gradient(120deg,var(--blue) 0%,var(--blue-800) 100%);color:#fff;position:relative;overflow:hidden}
.band--ink{background:var(--ink)}
.band__rays{position:absolute;top:50%;left:50%;width:140%;height:140%;transform:translate(-50%,-50%);opacity:.5;background:inherit}

/* ---------- Training table ---------- */
.train{display:grid;gap:14px}
.train__row{display:grid;grid-template-columns:140px 150px 1fr;gap:18px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;transition:.25s var(--ease)}
.train__row:hover{border-color:var(--blue);transform:translateX(6px)}
.train__day{font-family:var(--font-display);font-size:1.15rem;color:var(--blue)}
.train__time{font-weight:800}
.train__who{color:var(--muted);font-weight:600}
.train__loc{font-size:.85rem;color:var(--muted)}

/* ---------- Abteilung section ---------- */
.abt{scroll-margin-top:110px}
.abt + .abt{margin-top:clamp(48px,7vw,96px)}
.abt__head{display:flex;align-items:center;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.abt__emoji{width:78px;height:78px;border-radius:20px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:2.4rem;box-shadow:var(--shadow-sm)}
.abt__lead{display:flex;flex-direction:column}
.abt__lead .kicker{margin-bottom:6px}
.lead-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px;display:flex;gap:16px;align-items:center;box-shadow:var(--shadow-sm);flex-wrap:wrap}
.lead-card .av{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:1.3rem}
.lead-card b{display:block;font-size:1.05rem}
.lead-card span{color:var(--muted);font-size:.9rem;font-weight:600}
.lead-card a{margin-left:auto;font-weight:800;color:var(--blue)}

/* ---------- Handball specials ---------- */
.hb-hero{background:radial-gradient(120% 120% at 20% 0%,var(--blue-700),var(--blue-900) 60%,#08182d);color:#fff;padding-top:150px}
.scoreboard{display:grid;gap:14px}
.match{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;box-shadow:var(--shadow-sm)}
.match .team{font-weight:800;font-size:1rem}
.match .team.right{text-align:right}
.match .score{font-family:var(--font-display);font-size:1.8rem;background:var(--ink);color:#fff;padding:6px 16px;border-radius:12px;white-space:nowrap}
.match .score.win{background:var(--blue)}
.match .meta{grid-column:1/-1;text-align:center;font-size:.8rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}

.standings{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.standings th,.standings td{padding:14px 16px;text-align:left;font-size:.95rem}
.standings th{background:var(--ink);color:#fff;font-family:var(--font-body);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.78rem}
.standings td{border-top:1px solid var(--line)}
.standings tr.us{background:var(--yellow)}
.standings tr.us td{font-weight:800}
.standings .pos{font-family:var(--font-display);color:var(--blue);width:46px}
.standings tr.us .pos{color:var(--ink)}

.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.team-chip{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;text-align:center;box-shadow:var(--shadow-sm);transition:.3s var(--ease)}
.team-chip:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--blue)}
.team-chip .ic{font-size:2rem}
.team-chip b{display:block;margin-top:10px;font-family:var(--font-display);font-size:1.2rem;letter-spacing:.5px}
.team-chip span{color:var(--muted);font-size:.85rem;font-weight:600}

/* schedule */
.sched{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden}
.sched__row{display:grid;grid-template-columns:120px 70px 1fr 1fr;gap:14px;padding:14px 20px;border-top:1px solid var(--line);align-items:center;font-size:.93rem}
.sched__row:first-child{border-top:none}
.sched__row.head{background:var(--paper);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.74rem;color:var(--muted)}
.sched__row .date{font-weight:800;color:var(--blue)}
.sched__row .home,.sched__row .guest{font-weight:600}
.sched__row.home-game{background:rgba(245,238,77,.14)}
.sched__wrap{max-height:520px;overflow:auto}

/* news */
.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.news{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-sm);transition:.3s var(--ease);position:relative;overflow:hidden}
.news:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.news .date{font-weight:800;color:var(--blue);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.news h4{font-family:var(--font-display);font-size:1.25rem;margin:8px 0 10px;text-transform:none;line-height:1.1}
.news p{color:var(--muted);font-size:.94rem}

/* ---------- Chronik slider ---------- */
.chronik{background:var(--ink);color:#fff;overflow:hidden}
.chronik__track-wrap{position:relative;margin-top:40px}
.chronik__track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 30px;scrollbar-width:none}
.chronik__track::-webkit-scrollbar{display:none}
.cyear{scroll-snap-align:center;flex:0 0 320px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:28px;position:relative;transition:.4s var(--ease)}
.cyear:hover{border-color:var(--yellow);transform:translateY(-8px)}
.cyear .yr{font-family:var(--font-display);font-size:3.2rem;color:var(--yellow);line-height:.9}
.cyear .yr-line{width:46px;height:4px;background:var(--blue);margin:14px 0 18px}
.cyear p{color:rgba(255,255,255,.8);font-size:.96rem;font-weight:500}
.cyear.big{flex-basis:360px;background:linear-gradient(160deg,var(--blue),var(--blue-800))}
.cyear.big .yr{color:#fff}
.cyear.big .yr-line{background:var(--yellow)}
.chronik__nav{display:flex;gap:12px;margin-top:8px}
.cbtn{width:54px;height:54px;border-radius:50%;border:2px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:1.3rem;cursor:pointer;transition:.25s var(--ease);display:grid;place-items:center}
.cbtn:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.chronik__hint{font-size:.82rem;color:rgba(255,255,255,.5);font-weight:700;align-self:center;margin-left:auto}

/* ---------- Vorstand ---------- */
.board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.board{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center;box-shadow:var(--shadow-sm);transition:.3s var(--ease)}
.board:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.board .av{width:84px;height:84px;border-radius:50%;margin:0 auto 16px;background:linear-gradient(150deg,var(--blue),var(--blue-800));color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:1.8rem}
.board .role{font-weight:800;color:var(--blue);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.board b{display:block;font-size:1.15rem;margin:4px 0}
.board a{color:var(--muted);font-weight:700;font-size:.9rem}
.board.lead-acc .av{background:linear-gradient(150deg,var(--yellow),var(--yellow-deep));color:var(--ink)}

/* ---------- Sponsors ---------- */
.spon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.spon{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;align-items:center;gap:14px;font-weight:800;box-shadow:var(--shadow-sm);transition:.3s var(--ease);min-height:84px}
.spon:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--blue)}
.spon .mk{width:42px;height:42px;border-radius:10px;background:var(--paper);display:grid;place-items:center;font-family:var(--font-display);color:var(--blue);font-size:1.1rem;flex:none}
.spon small{display:block;color:var(--muted);font-weight:600;font-size:.78rem}
.spon-tier{margin:0 0 14px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;color:var(--blue)}

/* ---------- Forms ---------- */
.form-shell{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,42px);box-shadow:var(--shadow)}
.tabs{display:flex;gap:8px;background:var(--paper);padding:6px;border-radius:14px;margin-bottom:30px}
.tab{flex:1;padding:14px;border:none;background:transparent;border-radius:10px;font-family:var(--font-body);font-weight:800;cursor:pointer;color:var(--muted);transition:.25s var(--ease);text-transform:uppercase;letter-spacing:.03em;font-size:.9rem}
.tab.active{background:#fff;color:var(--blue);box-shadow:var(--shadow-sm)}
.field{margin-bottom:20px}
.field label{display:block;font-weight:800;margin-bottom:8px;font-size:.9rem}
.field label .req{color:#d94646}
.field input,.field select,.field textarea{
  width:100%;padding:15px 16px;border:2px solid var(--paper-2);border-radius:12px;font-family:var(--font-body);
  font-size:1rem;font-weight:600;background:var(--paper);transition:.2s var(--ease);color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(43,101,173,.12)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hint{font-size:.82rem;color:var(--muted);margin-top:6px;font-weight:600}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.minor-box{background:var(--paper);border:2px dashed var(--paper-2);border-radius:12px;padding:18px;margin-bottom:20px;display:none}
.minor-box.show{display:block;animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(-6px)}}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;font-weight:600;color:var(--muted);margin-bottom:18px}
.consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--blue)}

.info-aside{position:sticky;top:100px;display:grid;gap:18px}
.info-box{background:linear-gradient(160deg,var(--blue),var(--blue-800));color:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow)}
.info-box h3{font-size:1.4rem;margin-bottom:14px}
.fee{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.15);font-weight:700}
.fee:last-child{border:none}
.fee .amt{font-family:var(--font-display);font-size:1.6rem;color:var(--yellow)}
.info-box.light{background:#fff;color:var(--ink);border:1px solid var(--line)}
.info-box.light .step{display:flex;gap:14px;margin-bottom:16px;align-items:flex-start}
.info-box.light .step .n{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}

/* toast / confirmation */
.confirm{display:none;text-align:center;padding:20px}
.confirm.show{display:block;animation:fade .4s var(--ease)}
.confirm .big-ck{width:90px;height:90px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;margin:0 auto 22px;font-size:3rem}

/* ---------- CTA band ---------- */
.cta-band{background:var(--yellow);color:var(--ink);text-align:center}
.cta-band h2{font-size:clamp(2rem,5vw,3.8rem);margin-bottom:16px}
.cta-band p{margin:0 auto 28px;color:#3a4456;font-weight:600}
.cta-band .btn--ink:hover{box-shadow:0 14px 30px rgba(0,0,0,.25)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(255,255,255,.7);padding:70px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.foot-brand{display:flex;align-items:center;gap:14px;margin-bottom:18px;color:#fff;font-family:var(--font-display);font-size:1.3rem;text-transform:uppercase}
.foot-brand img{width:54px}
.site-footer h5{color:#fff;font-family:var(--font-body);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;margin-bottom:18px}
.site-footer a{display:block;padding:6px 0;transition:.2s;font-weight:600}
.site-footer a:hover{color:var(--yellow);transform:translateX(4px)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem}
.foot-bottom a{display:inline;padding:0}
.foot-funding{display:flex;align-items:center;gap:8px;font-size:.8rem;opacity:.7}

/* ---------- Page hero (interior) ---------- */
.page-hero{background:radial-gradient(120% 120% at 80% 0%,var(--blue-700),var(--blue-900) 70%);color:#fff;padding:160px 0 90px;position:relative;overflow:hidden}
.page-hero__rays{position:absolute;top:-40%;right:-15%;width:60vw;height:60vw;background:inherit;opacity:.4}
.page-hero .crumb{font-weight:700;font-size:.85rem;color:rgba(255,255,255,.6);margin-bottom:18px;letter-spacing:.05em}
.page-hero .crumb a:hover{color:var(--yellow)}
.page-hero h1{font-size:clamp(2.6rem,7vw,5.5rem)}
.page-hero p{color:rgba(255,255,255,.82);margin-top:18px;font-size:1.15rem;font-weight:600}
.page-hero__diag{position:absolute;bottom:-2px;left:0;right:0;height:90px;background:var(--paper);clip-path:polygon(0 100%,100% 100%,100% 40%,0 100%)}

/* ---------- Reveal animation ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-delay="1"]{transition-delay:.08s}
[data-reveal][data-delay="2"]{transition-delay:.16s}
[data-reveal][data-delay="3"]{transition-delay:.24s}
[data-reveal][data-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav-links,.nav-cta .btn{display:none}
  .burger{display:block}
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__shield{display:none}
  .hero{min-height:auto;padding:140px 0 90px}
  .split{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .form-shell{grid-template-columns:1fr}
  .info-aside{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  .train__row{grid-template-columns:1fr;gap:6px}
  .sched__row{grid-template-columns:90px 1fr;grid-auto-rows:auto}
  .sched__row .guest{grid-column:2}
  .match{grid-template-columns:1fr auto 1fr}
  .field-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .cyear{flex-basis:260px}
  .stat{padding:28px 14px}
}

/* ---------- Ghost background typography ---------- */
.ghost{position:absolute;font-family:var(--font-display);text-transform:uppercase;line-height:.8;pointer-events:none;white-space:nowrap;z-index:0;letter-spacing:2px}
.ghost--stroke{-webkit-text-stroke:2px rgba(11,26,46,.06);color:transparent}
.ghost--stroke-light{-webkit-text-stroke:2px rgba(255,255,255,.06);color:transparent}
.section,.band,.chronik{overflow:hidden}
.section>.wrap,.band>.wrap,.chronik>.wrap{position:relative;z-index:2}

/* ---------- Sportarten Kacheln (diagonal, ghost) ---------- */
.cat-tiles{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.cat{
  position:relative;overflow:hidden;border-radius:18px;min-height:340px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px;color:#fff;background:linear-gradient(160deg,var(--blue) 0%,var(--blue-900) 100%);
  box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease);text-decoration:none;
}
.cat:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
/* Bild-Layer: einfach style="background-image:url('assets/deinbild.jpg')" auf .cat__photo setzen */
.cat__photo{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transition:transform .6s var(--ease)}
.cat:hover .cat__photo{transform:scale(1.06)}
.cat__shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,26,46,.15) 0%,rgba(11,26,46,.55) 55%,rgba(11,26,46,.92) 100%)}
.cat>*:not(.cat__photo):not(.cat__shade):not(.cat__rays){position:relative;z-index:2}
.cat__rays{position:absolute;inset:0;opacity:.5;background:conic-gradient(from 10deg,rgba(245,238,77,.14) 0 10deg,transparent 10deg 30deg,rgba(245,238,77,.14) 30deg 40deg,transparent 40deg 60deg,rgba(245,238,77,.14) 60deg 70deg,transparent 70deg 90deg,rgba(245,238,77,.14) 90deg 100deg,transparent 100deg 120deg,rgba(245,238,77,.14) 120deg 130deg,transparent 130deg 150deg,rgba(245,238,77,.14) 150deg 160deg,transparent 160deg 180deg,rgba(245,238,77,.14) 180deg 190deg,transparent 190deg 210deg,rgba(245,238,77,.14) 210deg 220deg,transparent 220deg 240deg,rgba(245,238,77,.14) 240deg 250deg,transparent 250deg 270deg,rgba(245,238,77,.14) 270deg 280deg,transparent 280deg 300deg,rgba(245,238,77,.14) 300deg 310deg,transparent 310deg 330deg,rgba(245,238,77,.14) 330deg 340deg,transparent 340deg 360deg);transition:transform .8s var(--ease)}
.cat:hover .cat__rays{transform:scale(1.15) rotate(20deg)}
.cat__big{position:absolute;top:-12px;right:-6px;font-family:var(--font-display);font-size:7rem;line-height:.8;-webkit-text-stroke:2px rgba(255,255,255,.16);color:transparent;z-index:1}
.cat__ic{font-size:2.4rem;position:relative;z-index:2}
.cat__name{font-family:var(--font-display);font-size:2rem;text-transform:uppercase;margin:10px 0 6px;position:relative;z-index:2;line-height:.95}
.cat__txt{position:relative;z-index:2;color:rgba(255,255,255,.82);font-size:.92rem;font-weight:600;max-width:34ch}
.cat__go{position:relative;z-index:2;margin-top:16px;display:inline-flex;align-items:center;gap:8px;font-weight:800;text-transform:uppercase;font-size:.82rem;letter-spacing:.05em;color:var(--yellow)}
.cat .arrow{transition:transform .25s var(--ease)}
.cat:hover .arrow{transform:translateX(5px)}
.cat--feat{background:linear-gradient(160deg,var(--ink),var(--blue-900))}
.cat--feat .tag{position:absolute;top:22px;left:22px;z-index:3;background:var(--yellow);color:var(--ink);font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;padding:6px 13px;border-radius:999px}
.cat--yellow{background:linear-gradient(160deg,var(--yellow),var(--yellow-deep));color:var(--ink)}
.cat--yellow .cat__txt{color:#3a4456}
.cat--yellow .cat__go{color:var(--blue)}
.cat--yellow .cat__big{-webkit-text-stroke:2px rgba(11,26,46,.18)}
.cat--yellow .cat__rays{opacity:.18;background:conic-gradient(from 10deg,rgba(11,26,46,.2) 0 10deg,transparent 10deg 40deg,rgba(11,26,46,.2) 40deg 50deg,transparent 50deg 90deg,rgba(11,26,46,.2) 90deg 100deg,transparent 100deg 140deg,rgba(11,26,46,.2) 140deg 150deg,transparent 150deg 190deg,rgba(11,26,46,.2) 190deg 200deg,transparent 200deg 240deg,rgba(11,26,46,.2) 240deg 250deg,transparent 250deg 290deg,rgba(11,26,46,.2) 290deg 300deg,transparent 300deg 340deg,rgba(11,26,46,.2) 340deg 360deg)}
.span-6{grid-column:span 6}
.span-4{grid-column:span 4}
.span-3{grid-column:span 3}
.span-8{grid-column:span 8}
@media (max-width:900px){.span-6,.span-4,.span-3,.span-8{grid-column:span 6}}
@media (max-width:560px){.span-6,.span-4,.span-3,.span-8{grid-column:span 12}.cat{min-height:240px}.cat__big{font-size:5rem}}

/* ---------- Wappen-Pattern Hintergrund ---------- */
.logo-pattern{position:relative;background-color:var(--blue)}
.logo-pattern::before{content:"";position:absolute;inset:0;background-image:url('../assets/pattern-tile.png');background-size:78px;background-repeat:repeat;opacity:.07;z-index:0}
.logo-pattern--dense::before{background-size:58px;opacity:.06}
.logo-pattern--ink{background-color:var(--ink)}
.logo-pattern>.wrap{position:relative;z-index:2}

/* ---------- Mission ---------- */
.mission{color:#fff;text-align:center}
.mission .wrap{max-width:980px}
.mission h2{font-size:clamp(2.4rem,6vw,5rem);color:#fff;margin:16px 0 22px}
.mission h2 .y{color:var(--yellow)}
.mission p.lead{color:rgba(255,255,255,.85);margin:0 auto 0;max-width:62ch}
.mission .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;text-align:left}
.mission .pillar{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:28px;transition:.35s var(--ease)}
.mission .pillar:hover{transform:translateY(-8px);background:rgba(255,255,255,.12)}
.mission .pillar .pic{width:56px;height:56px;border-radius:14px;background:var(--yellow);color:var(--ink);display:grid;place-items:center;font-size:1.6rem;margin-bottom:16px}
.mission .pillar h3{font-size:1.4rem;margin-bottom:8px}
.mission .pillar p{color:rgba(255,255,255,.78);font-weight:500;font-size:.96rem}
@media(max-width:760px){.mission .pillars{grid-template-columns:1fr}}

/* ---------- Next-Match Board ---------- */
.matchboard{position:relative;background:linear-gradient(135deg,var(--ink) 0%,var(--blue-900) 60%,var(--blue-800) 100%);border-radius:24px;padding:clamp(28px,5vw,56px);color:#fff;overflow:hidden;box-shadow:var(--shadow-lg)}
.matchboard__ghost{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-size:clamp(5rem,16vw,13rem);-webkit-text-stroke:2px rgba(255,255,255,.05);color:transparent;white-space:nowrap;z-index:0}
.matchboard__inner{position:relative;z-index:2;text-align:center}
.matchboard .vs-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin:24px 0 30px}
.matchboard .side{display:flex;flex-direction:column;align-items:center;gap:12px}
.matchboard .side img{width:84px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.matchboard .side .crest-alt{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);display:grid;place-items:center;font-family:var(--font-display);font-size:1.6rem;color:var(--yellow)}
.matchboard .side b{font-family:var(--font-display);font-size:1.3rem;text-transform:uppercase;letter-spacing:.5px;text-align:center;line-height:1}
.matchboard .vs{font-family:var(--font-display);font-size:2.6rem;color:var(--yellow)}
.countdown{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cd{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 10px;min-width:84px}
.cd .n{font-family:var(--font-display);font-size:2.6rem;color:#fff;line-height:1}
.cd .l{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6);font-weight:800;margin-top:4px}
.matchboard .when{font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:.85rem;color:var(--yellow)}
.matchboard .where{color:rgba(255,255,255,.7);font-weight:600;margin-top:6px;font-size:.92rem}
@media(max-width:560px){.matchboard .vs-row{gap:8px}.matchboard .side img,.matchboard .side .crest-alt{width:56px;height:56px}.matchboard .side b{font-size:.95rem}.cd{min-width:64px;padding:12px 6px}.cd .n{font-size:1.8rem}}

/* ---------- Marquee partner strip ---------- */
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__row{display:flex;gap:50px;width:max-content;animation:marq 32s linear infinite;align-items:center}
.marquee:hover .marquee__row{animation-play-state:paused}
.marquee__row span{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;color:var(--muted);opacity:.7;letter-spacing:1px;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Bild mit blauem Overlay ---------- */
.imgband{position:relative;min-height:clamp(360px,55vh,560px);display:flex;align-items:center;overflow:hidden;border-radius:0}
.imgband__img{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.imgband__ov{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,var(--blue-900) 0%,rgba(43,101,173,.86) 45%,rgba(13,35,66,.35) 100%)}
.imgband--ink .imgband__ov{background:linear-gradient(115deg,rgba(11,26,46,.94) 0%,rgba(11,26,46,.75) 50%,rgba(11,26,46,.25) 100%)}
.imgband .wrap{position:relative;z-index:2;color:#fff}
.imgband h2{color:#fff}
.imgband p{color:rgba(255,255,255,.88)}
.imgband__rounded{border-radius:var(--radius);margin:0 24px}

/* ---------- Galerie ---------- */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(12,1fr)}
.gallery figure{position:relative;overflow:hidden;border-radius:14px;margin:0;cursor:pointer;background:var(--blue-900);box-shadow:var(--shadow-sm)}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,26,46,.5));opacity:0;transition:opacity .35s var(--ease)}
.gallery figure:hover img{transform:scale(1.07)}
.gallery figure:hover::after{opacity:1}
.gallery figure .zoom{position:absolute;right:12px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--blue);display:grid;place-items:center;font-weight:900;opacity:0;transform:scale(.7);transition:.3s var(--ease)}
.gallery figure:hover .zoom{opacity:1;transform:scale(1)}
.g-wide{grid-column:span 6}.g-tall{grid-column:span 3;grid-row:span 2}.g-sq{grid-column:span 3}.g-x4{grid-column:span 4}.g-x8{grid-column:span 8}
.gallery figure.g-tall img{min-height:100%}
@media(max-width:760px){.g-wide{grid-column:span 6}.g-tall{grid-column:span 6;grid-row:span 1}.g-sq{grid-column:span 6}.g-x4,.g-x8{grid-column:span 12}}

/* ---------- Slider ---------- */
.slider{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--blue-900)}
.slider__track{display:flex;transition:transform .6s var(--ease);will-change:transform}
.slider__slide{min-width:100%;position:relative;aspect-ratio:16/9;background:var(--blue-900)}
.slider__slide img{width:100%;height:100%;object-fit:cover;display:block}
.slider__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 30px 24px;background:linear-gradient(0deg,rgba(11,26,46,.85),transparent);color:#fff}
.slider__cap b{font-family:var(--font-display);font-size:1.5rem;text-transform:uppercase;letter-spacing:.5px}
.slider__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:var(--blue);font-size:1.4rem;cursor:pointer;display:grid;place-items:center;transition:.25s var(--ease)}
.slider__btn:hover{background:var(--yellow)}
.slider__btn.prev{left:16px}.slider__btn.next{right:16px}
.slider__dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;gap:8px;justify-content:center}
.slider__dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:.25s}
.slider__dots button.active{background:var(--yellow);width:24px;border-radius:6px}
@media(max-width:560px){.slider__slide{aspect-ratio:4/3}.slider__btn{width:42px;height:42px}}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,18,32,.94);display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.show{display:flex;animation:fade .25s var(--ease)}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox .lb-close,.lightbox .lb-nav{position:absolute;background:rgba(255,255,255,.12);border:none;color:#fff;cursor:pointer;border-radius:50%;width:52px;height:52px;font-size:1.6rem;display:grid;place-items:center;transition:.2s}
.lightbox .lb-close:hover,.lightbox .lb-nav:hover{background:var(--yellow);color:var(--ink)}
.lightbox .lb-close{top:24px;right:24px}
.lightbox .lb-nav.prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox .lb-nav.next{right:24px;top:50%;transform:translateY(-50%)}

/* ---------- Map consent ---------- */
.map-consent{min-height:440px;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,var(--blue-800),var(--blue-900));color:#fff;padding:30px}
.map-consent .mc-inner{max-width:440px}
.map-consent .ic{font-size:2.4rem;margin-bottom:12px}

/* ---------- Cookie Banner ---------- */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:1100;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);padding:24px;max-width:560px;margin:0 auto;display:none}
.cookie.show{display:block;animation:cookieUp .45s var(--ease)}
@keyframes cookieUp{from{opacity:0;transform:translateY(20px)}}
.cookie h4{font-family:var(--font-display);font-size:1.3rem;text-transform:uppercase;margin-bottom:8px}
.cookie p{font-size:.9rem;color:var(--muted);font-weight:500;margin-bottom:14px}
.cookie p a{color:var(--blue);font-weight:700}
.cookie .opts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.cookie .opt{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:700}
.cookie .opt input{width:20px;height:20px;accent-color:var(--blue)}
.cookie .opt input:disabled{opacity:.6}
.cookie .opt small{color:var(--muted);font-weight:500;margin-left:auto}
.cookie .c-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie .c-actions .btn{flex:1;justify-content:center;padding:13px 18px;font-size:.9rem}
@media(max-width:480px){.cookie .c-actions{flex-direction:column}.cookie .c-actions .btn{width:100%}}

/* ---------- Fly-by Galerie (scroll-3D) ---------- */
.flyby{padding:0}
.flyby.is-3d{height:420vh;overflow:clip}
.flyby.is-3d .flyby-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  background:radial-gradient(ellipse 65% 55% at 50% 42%, rgba(245,238,77,.16), transparent 72%), var(--blue-900)}
.flyby-pin::after{content:"";position:absolute;inset:0;background-image:url('../assets/pattern-tile.png');background-size:70px;opacity:.05;z-index:0}
.flyby-head{position:absolute;top:12vh;left:0;right:0;text-align:center;z-index:5;padding:0 24px}
.flyby-head .kicker{justify-content:center;color:var(--yellow)}
.flyby-head h2{color:#fff;font-size:clamp(1.8rem,5vw,3.4rem);margin-top:10px}
.flyby-viewport{position:relative;z-index:2}
.flyby.is-3d .flyby-viewport{height:clamp(420px,74vh,800px)}
.flyby-gallery{position:relative;width:90%;max-width:1180px;margin:0 auto}
.flyby.is-3d .flyby-gallery{width:100%;max-width:none;height:100%;perspective:1100px;perspective-origin:50% 50%}
.flyby-item{background:#fff;border:1px solid rgba(255,255,255,.5);border-radius:16px;box-shadow:0 22px 50px rgba(0,0,0,.55);overflow:hidden}
.flyby-item img{display:block;width:100%;height:auto}
.flyby.is-3d .flyby-item{position:absolute;top:50%;width:30%;opacity:0;will-change:opacity,transform;backface-visibility:hidden}
.flyby.is-3d .flyby-l{left:31%}
.flyby.is-3d .flyby-r{left:69%}
.flyby-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;background:linear-gradient(0deg,rgba(11,26,46,.8),transparent);color:#fff;font-weight:800;font-size:.95rem;display:flex;align-items:center;gap:8px}
.flyby-cap .dot{width:9px;height:9px;border-radius:50%;background:var(--yellow)}
.flyby.is-3d .flyby-item.flyby-end{left:50%;width:80%;max-width:760px;background:linear-gradient(150deg,var(--blue),var(--blue-900));border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.flyby-end-content{padding:clamp(30px,5vw,56px);text-align:center;color:#fff}
.flyby-end-logo{height:64px;margin:0 auto 18px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
.flyby-end-title{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.8rem);line-height:1;margin-bottom:22px}
.flyby-end-title .accent{color:var(--yellow)}
.flyby:not(.is-3d) .flyby-head{position:static;padding:0 24px}
.flyby:not(.is-3d) .flyby-pin{padding:clamp(48px,8vw,90px) 0}
.flyby:not(.is-3d) .flyby-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:40px 24px 0}
.flyby:not(.is-3d) .flyby-item{position:relative;opacity:1!important}
.flyby:not(.is-3d) .flyby-item.flyby-end{grid-column:1/-1}
@media (max-width:760px){
  .flyby.is-3d{height:360vh}
  .flyby.is-3d .flyby-item{width:54%}
  .flyby.is-3d .flyby-l{left:27%} .flyby.is-3d .flyby-r{left:73%}
  .flyby.is-3d .flyby-item.flyby-end{width:82%}
}

/* ---------- Help-Center ---------- */
.help-search{max-width:620px;margin:0 auto;position:relative}
.help-search input{width:100%;padding:18px 22px 18px 54px;border:2px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-family:var(--font-body);font-weight:600;font-size:1.05rem}
.help-search input::placeholder{color:rgba(255,255,255,.6)}
.help-search input:focus{outline:none;border-color:var(--yellow);background:rgba(255,255,255,.16)}
.help-search .si{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:1.2rem}
.help-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.help-chips a{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;padding:9px 16px;border-radius:999px;font-weight:700;font-size:.88rem;transition:.2s}
.help-chips a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

.faq-cat{scroll-margin-top:110px;margin-bottom:48px}
.faq-cat__head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.faq-cat__ic{width:56px;height:56px;border-radius:14px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.7rem;flex:none}
.faq-cat h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.accordion{border-top:1px solid var(--line)}
.accordion-item{border-bottom:1px solid var(--line)}
.accordion-trigger{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;cursor:pointer;padding:22px 4px;font-family:var(--font-body);font-size:1.08rem;font-weight:800;color:var(--ink);text-align:left}
.acc-icon{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--paper-2);color:var(--blue);font-size:1.3rem;transition:transform .3s var(--ease)}
.accordion-item.open .acc-icon{transform:rotate(45deg);background:var(--yellow)}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc-inner{padding:0 4px 24px;color:var(--muted);font-weight:500;max-width:760px}
.acc-inner a{color:var(--blue);font-weight:700}
.faq-noresult{display:none;text-align:center;color:var(--muted);font-weight:700;padding:30px}

/* ---------- Sport-Finder Modal ---------- */
.sf-overlay{position:fixed;inset:0;z-index:1050;background:rgba(8,18,32,.7);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.sf-overlay.show{display:flex;animation:fade .3s var(--ease)}
.sf-modal{background:var(--paper);border-radius:24px;max-width:560px;width:100%;box-shadow:var(--shadow-lg);overflow:hidden;position:relative;max-height:92vh;display:flex;flex-direction:column}
.sf-head{background:linear-gradient(150deg,var(--blue),var(--blue-900));color:#fff;padding:26px 28px;position:relative;overflow:hidden}
.sf-head::after{content:"";position:absolute;inset:0;background-image:url('../assets/pattern-tile.png');background-size:64px;opacity:.07}
.sf-head .kicker{color:var(--yellow);position:relative}
.sf-head h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.7rem;margin-top:8px;position:relative}
.sf-close{position:absolute;top:18px;right:18px;z-index:3;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.18);color:#fff;font-size:1.2rem;cursor:pointer;transition:.2s}
.sf-close:hover{background:var(--yellow);color:var(--ink)}
.sf-progress{height:5px;background:rgba(255,255,255,.2);position:relative;z-index:2;border-radius:3px;margin-top:16px;overflow:hidden}
.sf-progress span{display:block;height:100%;background:var(--yellow);width:0;transition:width .4s var(--ease)}
.sf-body{padding:28px;overflow-y:auto}
.sf-q{font-family:var(--font-display);text-transform:uppercase;font-size:1.4rem;line-height:1.05;margin-bottom:20px}
.sf-opts{display:grid;gap:12px}
.sf-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border:2px solid var(--paper-2);border-radius:14px;background:#fff;cursor:pointer;font-weight:700;transition:.2s var(--ease);text-align:left;font-family:var(--font-body);font-size:1rem;color:var(--ink)}
.sf-opt:hover{border-color:var(--blue);transform:translateX(4px)}
.sf-opt .em{font-size:1.5rem}
.sf-result{text-align:center}
.sf-result .crest{width:120px;margin:0 auto 16px;filter:drop-shadow(0 14px 24px rgba(13,35,66,.3))}
.sf-result .rec-label{font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);font-size:.8rem}
.sf-result h3{font-family:var(--font-display);text-transform:uppercase;font-size:2.4rem;margin:6px 0 12px}
.sf-result p{color:var(--muted);font-weight:500;margin:0 auto 22px;max-width:42ch}
.sf-result .sf-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.sf-restart{background:none;border:none;color:var(--muted);font-weight:700;cursor:pointer;margin-top:16px;text-decoration:underline;font-family:var(--font-body)}

/* =========================================================
   CLEAN v2 — Refinement Layer (minimalistisch, ruhig)
   überschreibt frühere Regeln (späterer Quelltext gewinnt)
   ========================================================= */
:root{
  --paper:#f3f6fa;
  --paper-2:#f6f8fb;
  --accent:#2b65ad;            /* Akzent = Blau statt Gelb */
  --shadow-sm:0 2px 10px rgba(13,35,66,.06);
  --shadow:0 14px 40px rgba(13,35,66,.10);
  --shadow-lg:0 24px 60px rgba(13,35,66,.18);
}

/* — Dekoration entfernen: rotierende Sonnen, Pattern, Riesen-Ghostwörter — */
.hero__rays,.hero__grid,.hero__ghost,.hero__shield,
.cat__rays,.cat__big,.media-card .rays-bg,
.ghost,.matchboard__ghost{display:none!important}
.logo-pattern::before,.flyby-pin::after,.sf-head::after{display:none!important}
.band__rays{display:none!important}

/* — Marke: „Blau-Weiß" in Blau statt Gelb — */
.brand b,.scrolled .brand b{color:var(--blue)!important}

/* — Kicker dezent blau — */
.kicker{color:var(--blue)!important;letter-spacing:.16em}
.kicker::before{background:var(--blue)!important;width:22px;height:2px}
.kicker--light{color:#fff!important}
.kicker--light::before{background:#fff!important}

/* — Buttons: Primär = Blau; auf dunklem Grund = Weiß — */
.btn{background:var(--blue);color:#fff}
.btn:hover{box-shadow:0 10px 24px rgba(43,101,173,.28)}
.hero .btn:not(.btn--ghost),.page-hero .btn:not(.btn--ghost),
.band .btn:not(.btn--ghost),.imgband .btn:not(.btn--ghost),
.cta-band .btn,.flyby .btn,.matchboard .btn,.mission .btn{
  background:#fff!important;color:var(--ink)!important;border-color:#fff!important
}
.hero .btn--ghost,.page-hero .btn--ghost{border-color:rgba(255,255,255,.45)!important;color:#fff!important}

/* — HERO: ruhig, fotobasiert, einspaltig — */
.hero{min-height:auto;padding:clamp(130px,18vh,180px) 0 clamp(80px,12vh,120px);
  background:linear-gradient(180deg,var(--blue-900),var(--blue-800))}
.hero__inner{grid-template-columns:1fr!important;max-width:840px}
.hero__photo{opacity:.45!important;mix-blend-mode:normal!important}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(9,18,32,.92) 0%,rgba(9,18,32,.6) 55%,rgba(9,18,32,.25) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(2.6rem,7vw,5.6rem)}
.hero h1 .y,.hero h1 .o{color:#fff!important;-webkit-text-stroke:0!important}
.hero__badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);font-weight:700}
.hero__badge .pulse{background:#fff;animation:none!important;box-shadow:none!important}

/* — Page-Hero (Unterseiten): ruhiges Navy — */
.page-hero{background:linear-gradient(180deg,var(--blue-900),var(--blue-800))}
.hb-hero{background:linear-gradient(180deg,var(--blue-900),var(--blue-800))!important}

/* — Stats: clean, kein Gelb — */
.stats{background:var(--ink)}
.stat .num{color:#fff!important}
.stat .lbl{color:rgba(255,255,255,.55);font-weight:700}

/* — Sektionen luftiger & ruhiger — */
.section{padding:clamp(64px,8vw,110px) 0}
h2.headline{letter-spacing:.3px}

/* — Sportarten-Kacheln: ruhiger, ohne Spielereien — */
.cat{border-radius:16px}
.cat__name{letter-spacing:.4px}
.cat__go{color:#fff!important}
.dept--feat .dept__more{color:#fff!important}
.dept:hover .dept__icon{background:#e7eef7!important;transform:none!important}
.dept__icon{border-radius:12px}
.feature-list .ck{background:var(--blue)!important;color:#fff!important;border-radius:6px}

/* — Mission: solides Navy statt Pattern — */
.mission.logo-pattern,.logo-pattern{background:var(--blue-900)!important}
.mission h2 .y{color:#fff!important}
.mission .pillar{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-radius:14px}
.mission .pillar .pic{background:rgba(255,255,255,.12)!important;color:#fff!important}

/* — Chronik: Blau/Weiß statt Gelb — */
.cyear .yr{color:#fff!important}
.cyear .yr-line{background:var(--blue)!important}
.cyear.big{background:rgba(255,255,255,.05)!important}
.cbtn:hover{background:#fff!important;color:var(--ink)!important;border-color:#fff!important}

/* — Vorstand / Infoboxen — */
.board.lead-acc .av{background:var(--blue)!important;color:#fff!important}
.info-box .fee .amt{color:#fff!important}

/* — Handball-Tabelle/Spielplan: blaue Hervorhebung — */
.standings tr.us{background:var(--blue)!important;color:#fff}
.standings tr.us td,.standings tr.us .pos{color:#fff!important}
.sched__row.home-game{background:rgba(43,101,173,.07)!important}
.team-chip a{color:#fff!important}
.matchboard .vs,.matchboard .when{color:#fff!important}

/* — CTA-Band: Navy statt Gelb — */
.cta-band{background:var(--ink)!important;color:#fff!important}
.cta-band h2{color:#fff!important}
.cta-band .kicker{color:#fff!important}
.cta-band p,.cta-band .lead{color:rgba(255,255,255,.7)!important}

/* — Fly-by: ruhige Bühne, kleines Logo — */
.flyby.is-3d .flyby-pin{background:radial-gradient(ellipse 60% 50% at 50% 42%,rgba(43,101,173,.28),transparent 70%),var(--blue-900)!important}
.flyby.is-3d .flyby-item.flyby-end{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:0 24px 60px rgba(0,0,0,.45)!important}
.flyby-end-logo{height:38px!important;opacity:.85}
.flyby-end-title{font-size:clamp(1.5rem,3.4vw,2.4rem)}
.flyby-end-title .accent{color:#9db8db!important}
.flyby-cap .dot{background:#fff!important}
.flyby-head .kicker{color:#fff!important}

/* — Help-Center / Sport-Finder Akzente — */
.help-search input:focus{border-color:#fff!important}
.help-chips a:hover{background:#fff!important;color:var(--ink)!important;border-color:#fff!important}
.accordion-item.open .acc-icon{background:var(--blue)!important;color:#fff!important}
.sf-progress span{background:#fff!important}
.sf-head .kicker{color:#fff!important}

/* — Nav aktiv dezent — */
.nav-links a.active{color:#fff!important}
.scrolled .nav-links a.active{color:var(--blue)!important}

/* =========================================================
   MOBILE — sauber & gut bedienbar
   ========================================================= */
@media (max-width:768px){
  .section{padding:56px 0}
  .hero{padding:120px 0 64px}
  .hero h1{font-size:clamp(2.2rem,9vw,3.2rem)}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%;justify-content:center}
  .section-head{margin-bottom:30px}
  .matchboard{padding:26px 18px}
  .standings th,.standings td{padding:11px 10px;font-size:.85rem}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .stats__grid{grid-template-columns:1fr 1fr}
  .stat{padding:24px 12px}
  .cat{min-height:220px;padding:22px}
  .cat__name{font-size:1.6rem}
  .train__row{grid-template-columns:1fr;gap:4px;padding:14px 16px}
  .lead-card{flex-direction:column;align-items:flex-start;gap:10px}
  .lead-card a{margin-left:0}
  .match{grid-template-columns:1fr;text-align:center;gap:8px}
  .match .team.right{text-align:center}
  .board-grid,.team-grid,.dept-grid,.spon-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .cta-band .btn,.btn--lg{width:100%;justify-content:center}
  .help-chips{gap:8px}
  .gallery{gap:10px}
  .g-tall{grid-row:span 1}
}
@media (max-width:380px){
  .board-grid,.team-grid,.dept-grid,.spon-grid{grid-template-columns:1fr}
}

/* =========================================================
   FINAL v3 — Identity Polish
   Gelb (Wappen-Sonne) kehrt als chirurgischer Akzent zurück.
   Ruhe von v2 bleibt — aber mit Vereins-Seele.
   ========================================================= */

/* — Akzentfarbe: Kicker-Linien wieder gelb — */
.kicker::before{background:var(--yellow)!important;height:3px}
.kicker--light::before{background:var(--yellow)!important}

/* — HERO: Foto präsenter, ein gelbes Wort, Wappen zurück — */
.hero__photo{opacity:.5!important}
.hero::after{background:linear-gradient(90deg,rgba(9,18,32,.9) 0%,rgba(9,18,32,.55) 50%,rgba(9,18,32,.18) 100%)}
.hero h1 .o{color:var(--yellow)!important;-webkit-text-stroke:0!important}
.hero__badge .pulse{background:var(--yellow)!important;animation:pulse 2.4s infinite!important;box-shadow:0 0 0 0 rgba(245,238,77,.55)}
.hero__shield{display:flex!important}
.hero__shield img{animation:floaty 7s ease-in-out infinite;width:min(300px,76%)}
@media(min-width:1025px){.hero__inner{grid-template-columns:1.2fr .8fr!important;max-width:none}}
@media(max-width:1024px){.hero__shield{display:none!important}}

/* — Primärer CTA auf dunklem Grund = Gelb (Markenmoment) — */
.hero .btn:not(.btn--ghost),.page-hero .btn:not(.btn--ghost),
.band .btn:not(.btn--ghost),.imgband .btn:not(.btn--ghost),
.cta-band .btn:not(.btn--ghost),.flyby .btn,.matchboard .btn,
.mission .btn,.mobile-menu .btn{
  background:var(--yellow)!important;color:var(--ink)!important;border-color:var(--yellow)!important;
}
.hero .btn:not(.btn--ghost):hover,.flyby .btn:hover,.cta-band .btn:not(.btn--ghost):hover{
  box-shadow:0 14px 34px rgba(245,238,77,.25)!important;
}
/* Nav-CTA: gelb auf transparentem Header, blau nach Scroll */
.site-header:not(.scrolled) .nav-cta .btn{background:var(--yellow);color:var(--ink)}
.site-header.scrolled .nav-cta .btn{background:var(--blue);color:#fff}
/* Brand „Blau-Weiß": gelb auf dunklem Header, blau auf weißem */
.site-header:not(.scrolled) .brand b{color:var(--yellow)!important}

/* — Stats: Zahlen in Gelb (wie die Wappen-Sonne) — */
.stat .num{color:var(--yellow)!important}
/* Kontrast-Fix: Labels auf blauen Stat-Kacheln (WCAG AA) */
.stat[style*="--blue"] .lbl{color:rgba(255,255,255,.95)}

/* — Page-Hero: gelber Akzentstrich unter jeder Seiten-Headline — */
.page-hero h1::after{content:"";display:block;width:64px;height:5px;background:var(--yellow);margin-top:20px;border-radius:3px}
.ph-center h1::after{margin-left:auto;margin-right:auto}

/* — Mission: Icon-Kacheln gelb — */
.mission .pillar .pic{background:var(--yellow)!important;color:var(--ink)!important}

/* — Foto-Treatment: einheitliche Farbwelt über alle Bilder — */
.cat__photo,.slider__slide img,.gallery img,.imgband__img,.flyby-item img,.media-card--photo img{
  filter:saturate(.82) contrast(1.05);
}

/* — Media-Card mit Foto (statt Logo-Wiederholung) — */
.media-card--photo{min-height:420px;background:var(--ink)}
.media-card--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-card--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(15deg,rgba(11,26,46,.72) 0%,rgba(11,26,46,.1) 55%)}
.media-card--photo .mc-cap{position:absolute;left:22px;bottom:18px;z-index:2;color:#fff;font-weight:800;font-size:.92rem;display:flex;align-items:center;gap:9px}
.media-card--photo .mc-cap::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--yellow)}

/* — Chronik & Infoboxen: gezielte Lichtpunkte — */
.cyear.big .yr-line{background:var(--yellow)!important}
.cyear:hover{border-color:var(--yellow)!important}
.info-box .fee .amt{color:var(--yellow)!important}
.matchboard .when{color:var(--yellow)!important}
.flyby-cap .dot{background:var(--yellow)!important}
.flyby-end-title .accent{color:var(--yellow)!important}

/* — Tastatur-Navigation: Dropdown & Fokus-Ringe — */
.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.hero :focus-visible,.page-hero :focus-visible,.band :focus-visible,.stats :focus-visible,
.site-footer :focus-visible,.mission :focus-visible,.flyby :focus-visible,.chronik :focus-visible,
.cta-band :focus-visible,.imgband :focus-visible,.mobile-menu :focus-visible,
.site-header:not(.scrolled) :focus-visible{outline-color:var(--yellow)}
.site-header.scrolled :focus-visible{outline-color:var(--blue)}

/* =========================================================
   v4 — Struktur-Ausbau (Sportseiten, Footer 5 Spalten, FAQ)
   ========================================================= */

/* — Fix: Kachel-Tag („Aushängeschild") darf nicht als Flex-Item stretchen — */
.cat .tag{position:absolute!important;top:22px;left:22px;width:max-content;align-self:flex-start}
.cat__go{align-self:flex-start;width:max-content}

/* — Mobile: Hero-Badge kompakter, wenn der Text umbricht — */
@media (max-width:560px){
  .hero__badge{font-size:.68rem;padding:8px 14px;letter-spacing:.08em;text-align:center;justify-content:center}
}

/* — Fix: Flyby-Endcard-Logo nicht quetschen (width:100% der flyby-item img aufheben) — */
.flyby-end-logo{width:auto!important;height:60px!important;margin:0 auto 18px;opacity:1}

/* — Footer: 5 Spalten — */
.foot-grid{grid-template-columns:1.3fr 1fr 1fr 1fr 1fr}
@media (max-width:1024px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* — Dropdown: „Alle Abteilungen"-Zeile — */
.drop .drop-all{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;color:var(--blue);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}

/* — Mobile-Menu: Ghost-CTA — */
.mm-ghost{background:transparent!important;border:2px solid rgba(255,255,255,.4)!important;color:#fff!important}

/* — Fakten-Chips (Sportseiten / Kindersport) — */
.fact-chips{display:flex;flex-wrap:wrap;gap:10px}
.fact-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:700;font-size:.88rem;box-shadow:var(--shadow-sm)}
.fact-chip .ic{font-size:1.05rem}
.page-hero .fact-chips{margin-top:22px}
.page-hero .fact-chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;box-shadow:none}

/* — FAQ auf Inhaltsseiten — */
.faq-sec .accordion{border-top:1px solid var(--line);max-width:860px}

/* — Kinderschutz: Versprechen-Karten & Kontaktkarte — */
.promise-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.promise{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-sm)}
.promise .pic{width:52px;height:52px;border-radius:13px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.5rem;margin-bottom:14px}
.promise h3{font-size:1.15rem;margin-bottom:8px}
.promise p{color:var(--muted);font-size:.93rem;font-weight:500}
.trust-band{background:linear-gradient(150deg,var(--blue),var(--blue-800));border-radius:var(--radius);padding:clamp(26px,4vw,44px);color:#fff;box-shadow:var(--shadow)}
.trust-band h3{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:10px}
.trust-band .btn{background:var(--yellow)!important;color:var(--ink)!important;border-color:var(--yellow)!important}
@media(max-width:760px){.trust-band [style*="grid-template-columns"]{display:block!important}.trust-band .btn{margin-top:18px}}
.trust-band p{color:rgba(255,255,255,.85)}
.helpline{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:16px 18px;margin-top:14px}
.helpline .hl-ic{font-size:1.5rem}
.helpline b{display:block}
.helpline a{color:var(--yellow);font-weight:800}
.helpline span{font-size:.85rem;color:rgba(255,255,255,.7);font-weight:600}

/* — Download-Karte (PDF) — */
.dl-card{display:flex;align-items:center;gap:18px;background:#fff;border:2px solid var(--blue);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-sm);transition:.25s var(--ease);max-width:560px}
.dl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.dl-card .dl-ic{width:54px;height:54px;border-radius:13px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.5rem;flex:none}
.dl-card b{display:block;font-size:1.05rem}
.dl-card span{color:var(--muted);font-size:.85rem;font-weight:600}
.dl-card .dl-go{margin-left:auto;font-weight:800;color:var(--blue);white-space:nowrap}

/* — Ortskarten (Prignitz-Seite) — */
.ort-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.ort{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow-sm)}
.ort b{font-family:var(--font-display);font-size:1.25rem;text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px}
.ort .km{color:var(--blue);font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.ort p{color:var(--muted);font-size:.9rem;font-weight:500;margin-top:8px}

/* ---------- Print (forms) ---------- */
@media print{
  .site-header,.mobile-menu,.site-footer,.form-actions,.tabs,.info-aside,.page-hero__diag,.no-print{display:none!important}
  body{background:#fff}
  .form-card{box-shadow:none;border:none;padding:0}
  .print-letter{display:block!important}
}
.print-letter{display:none}

/* =========================================================
   v5 — Feedback-Runde (Juni 2026) · Etappe 1
   Startseite + globale Basis-Fixes
   ========================================================= */

/* — FIX Header/Buttons auf Unterseiten klickbar (Stacking-Bug) —
   Auf den Unterseiten lag die dekorative Schräge (.page-hero__diag)
   über den Hero-Buttons und hat Klicks abgefangen. Inhalt nach vorn,
   Deko ohne Maus-Interaktion. */
.page-hero .wrap{position:relative;z-index:3}
.page-hero__diag,.page-hero__rays,
.hero__diag,.hero__rays,.hero__grid,.hero__ghost,.hero__photo,.hero__video{pointer-events:none}

/* — Vektor-Icons (ersetzen ALLE Emojis, per data-icon in main.js injiziert) — */
.ic{display:inline-flex;align-items:center;justify-content:center;line-height:0;vertical-align:middle}
.ic svg{width:1em;height:1em;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* — HERO: Hintergrund-Video + blaue Schräge (kein Weiß mehr) — */
.hero__video{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__video iframe{position:absolute;top:50%;left:50%;width:max(135%,240vh);height:max(135%,76vw);transform:translate(-50%,-50%);border:0}
.hero{position:relative}
/* Schräge zwischen Hero und Zahlen: vorher weiß -> jetzt blau */
.hero__diag{background:var(--blue-700)!important;height:120px;z-index:1}
.hero__sports{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.hero__sports .chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 15px;border-radius:999px;font-weight:700;font-size:.9rem}
.hero__sports .chip .ic{font-size:1.05rem;color:var(--yellow)}

/* — Abschnitt auf blauem Grund (Sportarten) — */
.on-blue{background:var(--blue-900);position:relative}
.on-blue h2,.on-blue h2.headline,.on-blue h3{color:#fff}
.on-blue .lead{color:rgba(255,255,255,.82)}
.on-blue .kicker{color:#fff!important}
.on-blue .kicker::before{background:var(--yellow)!important}

/* — Sportkacheln: Hover-Markierung in Blau (keine feste Hervorhebung mehr) — */
.cat__blue{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .35s var(--ease);
  background:linear-gradient(160deg,rgba(43,101,173,.78),rgba(13,35,66,.92))}
.cat:hover .cat__blue,.cat:focus-visible .cat__blue{opacity:1}
.cat__ic{position:relative;z-index:2}
.cat__ic .ic{font-size:2.4rem;color:#fff}

/* — Multi-Sport-Highlights-Slider (Startseite, ersetzt Handball-Band) — */
.sport-slider{background:var(--ink)}
.sport-slider .slider__slide{min-width:100%;aspect-ratio:auto;background:transparent}
.hl-slide{display:grid;grid-template-columns:1.02fr .98fr;min-height:clamp(420px,52vh,520px)}
.hl-slide__media{position:relative;overflow:hidden;background:var(--blue-900)}
.hl-slide__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hl-slide__body{background:linear-gradient(160deg,var(--blue),var(--blue-900));color:#fff;
  padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.hl-slide__body .kicker{color:var(--yellow)!important}
.hl-slide__body .kicker::before{background:var(--yellow)!important}
.hl-slide__body h3{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1;margin:12px 0 18px}
.hl-slide__list{display:grid;gap:13px;margin-bottom:26px}
.hl-slide__list li{display:flex;gap:13px;align-items:flex-start;font-weight:600;color:rgba(255,255,255,.92)}
.hl-slide__list .ic{flex:none;width:27px;height:27px;border-radius:8px;background:rgba(255,255,255,.16);color:#fff;font-size:15px;margin-top:1px}
.hl-slide__body .btn{align-self:flex-start;background:var(--yellow)!important;color:var(--ink)!important;border-color:var(--yellow)!important}
.sport-slider .slider__btn{background:rgba(255,255,255,.92)}
.sport-slider .slider__cap{display:none}
@media(max-width:760px){
  .hl-slide{grid-template-columns:1fr}
  .hl-slide__media{position:relative;height:230px}
}

/* — Termine (Teaser auf Startseite + Terminseite) — */
.termin-list{display:grid;gap:16px}
.termin{display:grid;grid-template-columns:90px 1fr;gap:20px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-sm);transition:.25s var(--ease)}
.termin:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue)}
.termin__date{background:linear-gradient(160deg,var(--blue),var(--blue-800));color:#fff;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px 6px;text-align:center}
.termin__date .d{font-family:var(--font-display);font-size:2rem;line-height:1}
.termin__date .m{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;margin-top:3px}
.termin__date .y{font-weight:700;font-size:.66rem;opacity:.7;margin-top:2px}
.termin__body{min-width:0}
.termin__tag{display:inline-flex;align-items:center;gap:7px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;font-size:.72rem;color:var(--blue);margin-bottom:5px}
.termin__tag .ic{font-size:.95rem}
.termin__body h3{font-family:var(--font-display);text-transform:none;font-size:1.3rem;line-height:1.1;margin-bottom:7px}
.termin__meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-weight:700;font-size:.85rem;margin-bottom:8px}
.termin__meta span{display:inline-flex;align-items:center;gap:6px}
.termin__meta .ic{font-size:.95rem;color:var(--blue)}
.termin__body p{color:var(--muted);font-weight:500;font-size:.95rem;max-width:62ch}
.termin--past .termin__date{background:linear-gradient(160deg,var(--blue-900),var(--ink))}
.termin__fotos{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.termin__fotos img{width:96px;height:70px;object-fit:cover;border-radius:9px;cursor:pointer;transition:.25s var(--ease)}
.termin__fotos img:hover{transform:scale(1.04)}
.termin-empty{color:var(--muted);font-weight:600;padding:24px;text-align:center;border:1px dashed var(--line);border-radius:14px}
@media(max-width:560px){.termin{grid-template-columns:66px 1fr;gap:14px;padding:16px}.termin__date .d{font-size:1.55rem}}

/* — FAQ volle Breite (gilt für alle Inhaltsseiten) — */
.faq-sec .accordion{max-width:none}

/* — Hero-Overlay blau getönt (Video bleibt lesbar, Tönung in Vereinsfarbe) — */
.hero::after{background:linear-gradient(90deg,rgba(13,35,66,.93) 0%,rgba(13,35,66,.66) 46%,rgba(43,101,173,.4) 100%)!important}

/* — Buttons auf blauem Abschnitt (.on-blue) lesbar machen — */
.on-blue .btn:not(.btn--ghost){background:var(--yellow)!important;color:var(--ink)!important;border-color:var(--yellow)!important}
.on-blue .btn--ghost{--fg:#fff;border-color:rgba(255,255,255,.5)!important;color:#fff!important}
.on-blue .btn--ghost:hover{border-color:var(--yellow)!important;color:var(--yellow)!important}

/* =========================================================
   v6 — Feedback-Runde · Etappe 2 (Sportseiten)
   ========================================================= */

/* — Galerie: volle Breite + lückenlose Masonry (Spalten) — */
.gallery-bleed{width:100vw;margin-left:calc(50% - 50vw);padding:0 clamp(16px,4vw,46px)}
.masonry{columns:4 250px;column-gap:14px}
.masonry figure{position:relative;break-inside:avoid;margin:0 0 14px;border-radius:14px;overflow:hidden;cursor:pointer;background:var(--blue-900);box-shadow:var(--shadow-sm)}
.masonry img{width:100%;display:block;transition:transform .6s var(--ease)}
.masonry figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,26,46,.5));opacity:0;transition:opacity .35s var(--ease)}
.masonry figure:hover img{transform:scale(1.06)}
.masonry figure:hover::after{opacity:1}
.masonry .zoom{position:absolute;right:12px;bottom:12px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--blue);display:grid;place-items:center;font-weight:900;opacity:0;transform:scale(.7);transition:.3s var(--ease)}
.masonry figure:hover .zoom{opacity:1;transform:scale(1)}
@media(max-width:560px){.masonry{columns:2 140px;column-gap:10px}.masonry figure{margin-bottom:10px}}

/* — Portrait-Foto in Avataren (lead-card & Vorstand) — */
.av--photo{padding:0!important;overflow:hidden;background:var(--blue-900)}
.av--photo img{width:100%;height:100%;object-fit:cover;display:block}

/* — Sport-Finder-Box (unter den FAQ) — */
.sf-promo{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  background:linear-gradient(150deg,var(--blue),var(--blue-900));color:#fff;border-radius:var(--radius);
  padding:clamp(28px,4vw,46px);box-shadow:var(--shadow);position:relative;overflow:hidden}
.sf-promo__txt{max-width:600px;position:relative;z-index:2}
.sf-promo .kicker{color:var(--yellow)!important}
.sf-promo .kicker::before{background:var(--yellow)!important}
.sf-promo h2{color:#fff;margin:10px 0 10px;font-size:clamp(1.7rem,3.4vw,2.6rem)}
.sf-promo p{color:rgba(255,255,255,.85);font-weight:500;margin:0;max-width:54ch}
.sf-promo .btn{background:var(--yellow)!important;color:var(--ink)!important;border-color:var(--yellow)!important;flex:none;position:relative;z-index:2}
.sf-promo__ic{position:absolute;right:-20px;bottom:-30px;font-size:0;color:rgba(255,255,255,.08);z-index:1}
.sf-promo__ic .ic{font-size:200px}

/* — Beach-Band: Foto-Akzent (eigene Beachanlage) — */
.beach-band .feature-list .ck{background:var(--yellow)!important;color:var(--ink)!important}

/* — Trainings-Karte mit Hallen-Map (consent) — */
.hallenmap{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);margin-top:8px}
.hallenmap .map-consent{min-height:300px}

/* =========================================================
   v7 — Etappe 3 (Vermietung, Satzung, Kontakt-Karten)
   ========================================================= */

/* — Ausstattung (Vermietung) — */
.amenity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.amenity{display:flex;gap:15px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow-sm);transition:.25s var(--ease)}
.amenity:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--blue)}
.amenity .am-ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--paper);color:var(--blue);display:grid;place-items:center;font-size:1.35rem}
.amenity b{display:block;font-size:1.02rem;margin-bottom:2px}
.amenity span{color:var(--muted);font-size:.88rem;font-weight:500}

/* — Preis-/Kondition-Highlight — */
.price-card{background:linear-gradient(155deg,var(--blue),var(--blue-900));color:#fff;border-radius:var(--radius);padding:clamp(26px,4vw,40px);box-shadow:var(--shadow);text-align:center}
.price-card .price{font-family:var(--font-display);font-size:clamp(3rem,8vw,5rem);line-height:1;color:var(--yellow)}
.price-card .price small{display:block;font-family:var(--font-body);font-size:1rem;font-weight:700;color:rgba(255,255,255,.8);margin-top:8px;letter-spacing:.02em}
.kond-list{display:grid;gap:14px;margin-top:6px}
.kond{display:flex;gap:14px;align-items:flex-start;font-weight:600}
.kond .am-ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.1rem}
.kond b{display:block}
.kond span{color:var(--muted);font-size:.92rem;font-weight:500}

/* — Belegungskalender — */
.cal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:20px}
.cal{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow-sm)}
.cal__title{font-family:var(--font-display);text-transform:uppercase;font-size:1.2rem;margin-bottom:12px;color:var(--blue);letter-spacing:.5px}
.cal__wd{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal__wd span{text-align:center;font-weight:800;font-size:.68rem;color:var(--muted);text-transform:uppercase}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__day{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;font-weight:700;font-size:.85rem}
.cal__day--empty{visibility:hidden}
.cal__day.is-free{background:rgba(43,101,173,.08);color:var(--ink)}
.cal__day.is-booked{background:var(--blue);color:#fff}
.cal__day.is-past{color:var(--muted);opacity:.35}
.cal-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:20px;font-weight:700;font-size:.86rem}
.cal-legend span{display:inline-flex;align-items:center;gap:9px}
.cal-legend i{width:16px;height:16px;border-radius:5px;display:inline-block}
.cal-legend i.free{background:rgba(43,101,173,.18)}
.cal-legend i.booked{background:var(--blue)}

/* — Satzung — */
.satz-part{margin-bottom:40px}
.satz-part__head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.satz-part__no{flex:none;width:54px;height:54px;border-radius:14px;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-size:1.5rem}
.satz-part h2{font-size:clamp(1.4rem,3vw,2rem)}
.satz-acc .accordion-trigger{font-size:1rem}
.satz-acc .acc-inner{max-width:none}
.satz-acc .acc-inner ol{margin:0 0 0 18px;display:grid;gap:8px}
.satz-acc .acc-inner ol li{font-weight:500}
.satz-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:8px}
.satz-fact{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow-sm)}
.satz-fact .am-ic{width:44px;height:44px;border-radius:11px;background:var(--paper);color:var(--blue);display:grid;place-items:center;font-size:1.3rem;margin-bottom:12px}
.satz-fact b{display:block;font-size:1.05rem;margin-bottom:3px}
.satz-fact span{color:var(--muted);font-size:.9rem;font-weight:500}

/* — Kontakt: zwei Karten nebeneinander — */
.map-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:760px){.map-duo{grid-template-columns:1fr}}
.map-card-label{display:flex;align-items:center;gap:10px;font-weight:800;margin-bottom:12px;font-size:.95rem}
.map-card-label .ic{color:var(--blue);font-size:1.2rem}

/* =========================================================
   v8 — Korrekturen (Hero-Kante, Termine-Box, Kachel-Ränder)
   ========================================================= */

/* — Subseiten-Hero: weiße Schräge + Deko-Quadrat raus, sauberer blauer Verlauf,
     diagonaler Abschluss per clip-path (kein weißer Keil mehr). — */
.page-hero__rays{display:none!important}
.page-hero__diag{display:none!important}
.page-hero{clip-path:polygon(0 0,100% 0,100% calc(100% - 52px),0 100%)}
.page-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(13,35,66,.9) 0%,rgba(13,35,66,.58) 52%,rgba(43,101,173,.32) 100%)}
.page-hero .hero__photo{opacity:.55!important;z-index:0}

/* — Termine: blaue Datums-Box quadratisch — */
.termin{align-items:start}
.termin__date{aspect-ratio:1;align-self:start}

/* — Sportkacheln: leichte weiße Ränder wegcroppen (Bild 3px überfüllen) — */
.cat__photo{inset:-3px}

/* =========================================================
   v9 — Social Media (Instagram-Karten)
   ========================================================= */
.insta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.insta-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:26px;box-shadow:var(--shadow-sm);transition:.3s var(--ease);color:var(--ink)}
.insta-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--blue)}
.insta-card__head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.insta-card__ic{flex:none;width:54px;height:54px;border-radius:15px;color:#fff;display:grid;place-items:center;font-size:1.55rem;
  background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.insta-card__handle{font-weight:800;font-size:1.02rem;word-break:break-word;line-height:1.2}
.insta-card__sub{color:var(--muted);font-size:.88rem;font-weight:600;margin-top:3px}
.insta-card .insta-go{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:.9rem;color:#fff;
  background:linear-gradient(45deg,#dc2743,#cc2366,#bc1888);padding:13px 18px;border-radius:999px}
.insta-card:hover .insta-go .arrow{transform:translateX(5px)}
.insta-go .arrow{transition:transform .25s var(--ease)}

/* =========================================================
   v10 — Feinschliff: Footer-Linie, CTA-Abstand, Konditionen-Icons
   ========================================================= */
/* Schlichte Trennlinie zum Footer – auf allen Seiten */
.site-footer{border-top:1px solid rgba(255,255,255,.16)}

/* CTA-Band: mehr Luft zwischen Kicker und Überschrift */
.cta-band .kicker{display:flex;justify-content:center;margin:0 0 22px}

/* Vermietung – Konditionen-Icons klar erkennbar (größer, dickerer Strich) */
.kond .am-ic{width:48px;height:48px;border-radius:12px;font-size:1.5rem}
.kond .am-ic .ic svg{stroke-width:2.3}

/* =========================================================
   v11 — Großes Feedback-Paket (Galerien, Termine, Flyby, Hero,
          Sponsoren, Kontakt, Highlights-Tabs, FAQ-Link, Druck)
   ========================================================= */

/* Hero: mehr Luft zwischen Badge und Titel (alle Seiten) */
.hero__badge + h1{margin-top:clamp(16px,2.4vw,26px)}

/* Highlights-Tabs (Startseite, über dem Slider) */
.hl-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 28px}
.hl-tab{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;
  font-family:var(--font-body);font-weight:800;font-size:.92rem;cursor:pointer;transition:.25s var(--ease)}
.hl-tab .ic{font-size:1.05rem;color:var(--yellow)}
.hl-tab:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.12)}
.hl-tab.active{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.hl-tab.active .ic{color:var(--ink)}

/* Termine-Karten: blaue Datums-Box mittig + Kategorie rechts oben */
.termin{align-items:center;position:relative}
.termin__date{align-self:center}
.termin__cat{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;
  background:var(--paper);color:var(--blue);font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  font-size:.72rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.termin__cat .ic{font-size:.9rem}
.termin__body{padding-right:112px}
@media(max-width:560px){
  .termin__cat{top:10px;right:10px;font-size:.62rem;padding:4px 9px}
  .termin__body{padding-right:80px}
}

/* Flyby: Bilder fliegen ÜBER den Text (z-index) */
.flyby-viewport{z-index:6}
.flyby-head{z-index:2}

/* Galerien: aufgeräumte Tiles, gleichmäßiger unterer Abschluss, sauberes Laden */
.masonry{columns:auto!important;column-gap:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.masonry figure{margin:0!important;break-inside:auto;aspect-ratio:4/3}
.masonry img{width:100%;height:100%;object-fit:cover}
@media(max-width:560px){.masonry{grid-template-columns:repeat(2,1fr);gap:8px}}

/* Sponsoren-Seite: weißer Keil über den Zahlen weg (Hero ohne Schräge, wenn Stats folgen) */
.page-hero:has(+ .stats){clip-path:none}
.page-hero:has(+ .stats)::after{background:linear-gradient(180deg,rgba(13,35,66,.72),rgba(13,35,66,.94))}

/* Sponsoren: aufgeräumtes Logo-Raster (logo-ready) */
.spon{flex-direction:column;text-align:center;gap:12px;min-height:128px;justify-content:center;padding:22px 16px}
.spon .mk{width:58px;height:58px;border-radius:14px;font-size:1.2rem;background:var(--paper)}
.spon small{margin-top:2px}

/* Kontakt: blaue Info-Box oben bündig mit der Überschrift (nur 2-spaltig) */
@media(min-width:1025px){.form-shell .info-aside{margin-top:clamp(24px,4vw,42px)}}

/* FAQ: dezenter Verweis auf den Hilfebereich */
.faq-more{margin-top:24px;font-weight:600;color:var(--muted)}
.faq-more a{color:var(--blue);font-weight:800;text-decoration:none;border-bottom:2px solid rgba(43,101,173,.28);padding-bottom:1px}
.faq-more a:hover{border-bottom-color:var(--blue)}

/* Druck: nur den aktiven Antrag drucken, alles andere ausblenden */
@media print{
  @page{margin:16mm}
  .print-letter{display:none!important}
  body.printing .site-header,body.printing .mobile-menu,body.printing .site-footer,
  body.printing .flyby,body.printing .page-hero,body.printing .section,
  body.printing .cta-band,body.printing .stats,body.printing .cookie{display:none!important}
  body.printing .print-letter.is-active{display:block!important}
}

/* =========================================================
   v12 — Hero-Video: nur Video sichtbar, Foto-Poster als Fallback
   ========================================================= */
/* Foto liegt zuerst ÜBER dem Video und blendet aus, sobald das Video läuft.
   Bleibt stehen, wenn das Video nicht startet -> sauberes Fallback, kein Play-Button. */
.hero__poster{position:absolute;inset:0;z-index:1;background-size:cover;background-position:center;
  pointer-events:none;transition:opacity 1s ease}
.hero__poster.is-hidden{opacity:0}
/* API-Video bildschirmfüllend einpassen, ohne Maus-Interaktion (keine YT-Hover-Steuerung).
   Bewusst ~35 % ÜBER "cover" skaliert: so liegen die Player-Ecken (YouTube-Wasserzeichen
   unten rechts, Titel-Leiste oben) immer außerhalb des sichtbaren Ausschnitts. */
.hero__video iframe{position:absolute;top:50%;left:50%;width:max(135%,240vh);height:max(135%,76vw);
  transform:translate(-50%,-50%);border:0;pointer-events:none}
/* Bei reduzierter Bewegung kein Autoplay-Video -> das Foto bleibt als Hero-Bild stehen */
@media(prefers-reduced-motion:reduce){.hero__video{display:none!important}}

/* =========================================================
   v13 — Galerien als hochwertiges Mosaik (gemischte Formate, im Container)
          + Help-Center linksbündig, volle Breite, klickbare Suche
   ========================================================= */

/* Galerien wieder IM Container (kein Full-Bleed mehr) */
.gallery-bleed{width:100%;max-width:var(--maxw);margin-left:auto;margin-right:auto;padding:0 24px}
@media(max-width:640px){.gallery-bleed{padding:0 16px}}

/* Mosaik: Hoch-, Quer- und Quadratbilder behalten ihr echtes Format (Grid-Masonry per JS) */
.masonry{columns:auto!important;column-gap:0!important;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));grid-auto-rows:8px;gap:14px}
.masonry figure{margin:0!important;aspect-ratio:auto!important;grid-row-end:span 28;border-radius:16px;overflow:hidden}
.masonry img{width:100%!important;height:auto!important;object-fit:initial!important;display:block}
@media(max-width:640px){.masonry{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:430px){.masonry{grid-template-columns:1fr}}

/* Help-Center: Kopf, Suche & Chips linksbündig */
.help-search{margin:0!important;max-width:640px}
.help-chips{justify-content:flex-start!important}

/* Help-Center: Suche mit klickbaren Treffern */
.help-results{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);max-height:62vh;overflow:auto;z-index:40;display:none;text-align:left}
.help-results.show{display:block}
.help-res{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 18px;background:#fff;border:0;border-bottom:1px solid var(--line);cursor:pointer;
  font-family:var(--font-body);transition:background .15s}
.help-res:last-child{border-bottom:0}
.help-res:hover{background:var(--paper)}
.help-res__q{font-weight:700;color:var(--ink);font-size:.97rem;line-height:1.25}
.help-res__c{flex:none;font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--blue);background:var(--paper);padding:5px 11px;border-radius:999px;white-space:nowrap}
.help-no{padding:16px 18px;color:var(--muted);font-weight:600}

/* Help-Center: getroffene Frage kurz hervorheben */
.accordion-item.faq-flash{animation:faqFlash 1.8s ease}
@keyframes faqFlash{0%,15%{background:rgba(245,238,77,.35)}100%{background:transparent}}

/* Highlights-Slider: Fortschritts-Dots in die rechte untere Ecke (besser sichtbar) */
.sport-slider .slider__dots{left:auto;right:20px;bottom:16px;justify-content:flex-end;width:auto}
.sport-slider .slider__dots button{background:rgba(255,255,255,.45)}
.sport-slider .slider__dots button.active{background:var(--yellow)}

/* Kicker-Überschriften (z.B. VEREINSLEBEN) etwas größer – bessere Proportion zur Headline */
.kicker{font-size:clamp(.86rem,1.05vw,.96rem)}

/* =========================================================
   v14 — Hero-Sport-Chips Hover + Highlights-Slider ohne Pfeile
   ========================================================= */
/* Cooler Hover auf den Hero-Chips (Handball / Volleyball / Judo / Aikido) */
.hero__sports .chip{transition:transform .28s var(--ease),background .28s var(--ease),
  border-color .28s var(--ease),color .28s var(--ease),box-shadow .28s var(--ease)}
.hero__sports .chip .ic{transition:transform .28s var(--ease),color .28s var(--ease)}
.hero__sports .chip:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink);
  transform:translateY(-3px) scale(1.04);box-shadow:0 10px 24px rgba(245,238,77,.28)}
.hero__sports .chip:hover .ic{color:var(--ink);transform:rotate(-8deg) scale(1.14)}

/* Highlights-Slider: Pfeil-Buttons raus (verdecken sonst Text; Tabs + Dots + Wischen reichen) */
.sport-slider .slider__btn{display:none!important}

/* Footer-Brand: dezenter Hover (Logo kippt & wächst, Schriftzug wird gelb) */
.foot-brand{width:fit-content;transition:color .35s var(--ease)}
.foot-brand img{transition:transform .5s var(--ease)}
.foot-brand:hover{color:var(--yellow)}
.foot-brand:hover img{transform:rotate(-10deg) scale(1.1)}

/* =========================================================
   v15 — Highlights-Slider als Crossfade (robust) + Nav-Box unten rechts
   ========================================================= */
/* Slides liegen übereinander und blenden sanft – kein Verschwinden, kein Ruckeln, kein Rück-Sprung */
.sport-slider .slider__track{display:grid}
.sport-slider .slider__slide{grid-area:1/1;opacity:0;transition:opacity .55s ease;pointer-events:none}
.sport-slider .slider__slide.is-active{opacity:1;pointer-events:auto;z-index:2}
/* Navigation als kleine Box in der rechten unteren Ecke */
.sport-slider .slider__dots{left:auto;right:18px;bottom:16px;width:auto;justify-content:flex-end;
  background:rgba(13,35,66,.55);padding:9px 13px;border-radius:999px;backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.28);z-index:5}

/* =========================================================
   v16 — Feedback: Heimspiele wieder GELB (Legende), Flyby-Skip-Button
   ========================================================= */
/* Spielplan: Heimspiel-Zeilen gelb hinterlegt (passend zur Legende "Gelb hinterlegt") */
.sched__row.home-game{background:rgba(245,238,77,.32)!important;box-shadow:inset 4px 0 0 var(--yellow)}

/* Flyby (3D-Scroll): kleiner Sprung-Button unten rechts zum Überspringen */
.flyby-skip{position:absolute;right:20px;bottom:20px;z-index:7;display:inline-flex;align-items:center;gap:8px;
  background:rgba(13,35,66,.7);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  padding:10px 16px;font-family:var(--font-body);font-weight:800;font-size:.8rem;letter-spacing:.04em;
  cursor:pointer;backdrop-filter:blur(6px);transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.flyby-skip:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}