/* ═══════════════════════════════════════════════════════════
   TSV MARDORF e.V. — Stadium Bold · Vereinsfarben
   Redesign 2026 · 100 Jahre Jubiläum
   ═══════════════════════════════════════════════════════════ */

:root{
  --ink:#0a1a3a;
  --ink-dark:#050d1f;
  --paper:#ffffff;
  --paper-warm:#eef3fb;
  --paper-cream:#f6f3ea;
  --blue:#1e62d0;
  --blue-dark:#154a9e;
  --blue-bright:#2e7ef0;
  --gold:#e8b730;
  --gold-dark:#c29617;
  --grass:#1e7a3e;
  --red-loss:#a8142e;
  --navy:#0a1a3a;
  --muted:#5a6478;

  --font-display:'Archivo Black','Arial Black',sans-serif;
  --font-head:'Bebas Neue','Arial Narrow',sans-serif;
  --font-body:'Archivo',system-ui,sans-serif;
  --font-mono:'Space Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Grain overlay — very subtle */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;z-index:9999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* Helper classes used by existing HTML */
.a11y-opt-left{flex:1;min-width:0}
.cookie-text{flex:1;min-width:0}
.footer-copy{white-space:nowrap}
.legal-page{min-height:60vh}
.maps-header-left{display:flex;flex-direction:column;gap:2px}
.qr-info{flex:1;min-width:0}

a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}

/* Accessibility skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--gold);color:var(--ink);
  padding:10px 16px;
  font-family:var(--font-display);font-size:13px;
  text-transform:uppercase;letter-spacing:.1em;
  z-index:10001;
}
.skip-link:focus{left:16px;top:16px}

/* ═══════════════ COOKIE BANNER ═══════════════ */
.cookie-banner{
  position:fixed;bottom:20px;left:20px;right:20px;
  max-width:680px;margin:0 auto;
  background:var(--ink);
  color:var(--paper);
  border:3px solid var(--gold);
  box-shadow:6px 6px 0 rgba(0,0,0,.25);
  padding:24px;
  z-index:9000;
  transition:opacity .3s,transform .3s;
  display:none;
}
.cookie-banner.show{display:block;animation:cookieIn .3s ease-out}
@keyframes cookieIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.cookie-inner{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.cookie-icon{font-size:36px;line-height:1}
.cookie-title{
  font-family:var(--font-display);
  font-size:18px;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--gold);
  margin-bottom:8px;
}
.cookie-desc{font-size:13px;line-height:1.6;opacity:.9}
.cookie-link{
  background:none;border:none;padding:0;color:var(--gold);
  text-decoration:underline;cursor:pointer;font:inherit;
}
.cookie-actions{
  grid-column:1 / -1;
  display:flex;gap:12px;flex-wrap:wrap;margin-top:16px;
}
.cookie-btn-ess,.cookie-btn-all{
  padding:11px 20px;
  font-family:var(--font-display);font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;
  border:2px solid var(--paper);
  cursor:pointer;transition:all .15s;
}
.cookie-btn-ess{background:transparent;color:var(--paper)}
.cookie-btn-ess:hover{background:var(--paper);color:var(--ink)}
.cookie-btn-all{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.cookie-btn-all:hover{background:var(--gold-dark);border-color:var(--gold-dark)}

/* ═══════════════ NAV ═══════════════ */
.nav{
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;
  gap:32px;
}
.nav-logo{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  background:none;border:none;padding:0;font:inherit;color:inherit;
  outline:none;
}
.nav-logo:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.nav-logo img{
  width:52px;height:52px;
  transition:transform .2s;
}
.nav-logo:hover img{transform:rotate(-5deg) scale(1.05)}
.nav-wordmark{line-height:1}
.nav-wordmark strong{
  display:block;
  font-family:var(--font-display);
  font-size:20px;letter-spacing:-.02em;
  color:var(--ink);
}
.nav-wordmark span{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--blue);font-weight:700;
}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-btn{
  background:transparent;border:2px solid transparent;
  color:var(--ink);
  font-family:var(--font-body);font-weight:800;
  font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  padding:10px 16px;cursor:pointer;
  transition:all .15s;
}
.nav-btn:hover,.nav-btn.active{background:var(--ink);color:var(--paper)}
.nav-cta{
  background:var(--blue);color:var(--paper);
  border:2px solid var(--ink);
  font-family:var(--font-display);font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;
  padding:11px 20px;cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:all .15s;
  margin-left:8px;
}
.nav-cta:hover{
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink);
  background:var(--blue-bright);
}

.nav-mobile-btn{
  display:none;
  background:var(--ink);border:none;
  width:44px;height:44px;
  padding:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;
  gap:4px;
}
.nav-mobile-btn span{
  display:block;width:20px;height:2px;background:var(--paper);
}

.mobile-nav{
  display:none;
  background:var(--ink);
  padding:8px 16px 16px;
  border-bottom:3px solid var(--gold);
  position:sticky;top:80px;z-index:99;
}
.mobile-nav.open{display:flex;flex-direction:column;gap:4px}
.mobile-nav .nav-btn{
  color:var(--paper);
  text-align:left;
  border-color:transparent;
}
.mobile-nav .nav-btn:hover,.mobile-nav .nav-btn.active{
  background:var(--blue);color:var(--paper);
}

/* ═══════════════ PAGE SYSTEM ═══════════════ */
.page{display:none}
.page.active{display:block;animation:pageIn .35s ease-out}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ═══════════════ SHARED ELEMENTS ═══════════════ */
.wrap{max-width:1280px;margin:0 auto;padding:80px 32px}

.sec-eye{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--blue);font-weight:700;
  display:inline-flex;align-items:center;gap:14px;
  margin-bottom:8px;
}
.sec-eye::before{content:"";width:32px;height:2px;background:var(--blue)}
.sec-h{
  font-family:var(--font-display);
  font-size:clamp(36px,5vw,64px);
  line-height:.95;text-transform:uppercase;letter-spacing:-.03em;
  margin-bottom:16px;
  color:var(--ink);
}
.sec-rule{
  display:flex;align-items:center;gap:12px;
  margin-bottom:40px;
}
.sec-rule-line{flex:0 0 60px;height:2px;background:var(--ink)}
.sec-rule-dot{width:10px;height:10px;background:var(--gold);border:2px solid var(--ink);border-radius:50%}

.divider{
  border:none;
  height:2px;
  background:var(--ink);
  max-width:1280px;
  margin:0 auto;
}

/* ═══════════════ HERO (HOME) ═══════════════ */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:100px 32px 140px;
  overflow:hidden;
  border-bottom:3px solid var(--gold);
}
.pitch-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(30,98,208,.35),transparent 55%),
    radial-gradient(ellipse at 80% 70%,rgba(232,183,48,.12),transparent 55%);
}
.pitch-svg{
  position:absolute;inset:0;
  width:100%;height:100%;
  opacity:.5;
  pointer-events:none;
}
.pitch-vignette{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(5,13,31,.6) 100%);
  pointer-events:none;
}
.hero-content{
  position:relative;z-index:2;
  max-width:1280px;margin:0 auto;
  text-align:center;
}

/* Jubilee badge wrap */
.jubilee-wrap{
  display:flex;flex-direction:column;align-items:center;gap:0;
  margin-bottom:32px;
}
.jub-line-top,.jub-line-bot{
  width:280px;max-width:70%;height:1px;background:rgba(232,183,48,.6);
}
.jubilee-badge{
  display:flex;align-items:center;gap:14px;
  padding:12px 24px;
}
.jub-dot{
  width:8px;height:8px;background:var(--gold);border-radius:50%;
}
.jub-year{
  font-family:var(--font-head);
  font-size:24px;letter-spacing:.04em;
  color:var(--gold);line-height:1;
}
.jub-dash{color:rgba(232,183,48,.5)}
.jub-center{text-align:center;padding:0 8px}
.jub-title{
  display:block;
  font-family:var(--font-display);font-size:14px;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--paper);
}
.jub-sub{
  display:block;
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-top:2px;
}

.hero-emblem{
  margin:32px auto 28px;
  filter:drop-shadow(6px 6px 0 rgba(0,0,0,.35));
  transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.hero-emblem:hover{transform:rotate(-6deg) scale(1.08)}

.hero-h1{
  font-family:var(--font-display);
  font-size:clamp(56px,10vw,140px);
  line-height:.86;
  text-transform:uppercase;
  letter-spacing:-.04em;
  margin-bottom:24px;
}
.hero-h1 .accent{
  color:var(--gold);
  -webkit-text-stroke:2px var(--gold);
  -webkit-text-fill-color:transparent;
}

.hero-meta{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:40px;opacity:.9;
}

.hero-btns{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
}
.hbtn{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 32px;
  font-family:var(--font-display);font-size:13px;
  text-transform:uppercase;letter-spacing:.12em;
  text-decoration:none;cursor:pointer;
  border:2px solid var(--paper);
  background:transparent;color:var(--paper);
  transition:all .2s;
}
.hbtn-solid{
  background:var(--gold);color:var(--ink);border-color:var(--gold);
  box-shadow:5px 5px 0 var(--paper);
}
.hbtn-solid:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--paper);
  background:var(--paper);border-color:var(--paper);
}
.hbtn-outline:hover{background:var(--paper);color:var(--ink)}

.join-banner{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--gold);
  color:var(--ink);
  padding:16px 32px;
  border-top:3px solid var(--ink);
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.06em;
}
.jb-text{font-size:16px}
.jb-text em{font-style:normal;color:var(--blue-dark)}
.jb-btn{
  background:var(--ink);color:var(--gold);
  border:2px solid var(--ink);
  padding:10px 20px;
  font-family:var(--font-display);font-size:12px;
  text-transform:uppercase;letter-spacing:.12em;
  cursor:pointer;
  transition:all .15s;
}
.jb-btn:hover{background:var(--paper);color:var(--ink)}

/* ═══════════════ STATS BAR ═══════════════ */
.stats-bar{
  background:var(--ink-dark);
  color:var(--paper);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-bottom:3px solid var(--gold);
}
.stat{
  padding:40px 20px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.1);
}
.stat:last-child{border-right:none}
.sn{
  font-family:var(--font-display);
  font-size:clamp(42px,5vw,72px);
  line-height:.9;letter-spacing:-.03em;
  color:var(--gold);
}
.sl{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  margin-top:8px;opacity:.75;
}

/* ═══════════════ NEWS GRID ═══════════════ */
.news-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:24px;
}
.nc{
  background:var(--paper);
  border:3px solid var(--ink);
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
  box-shadow:5px 5px 0 var(--ink);
}
.nc:hover{
  transform:translate(-3px,-3px);
  box-shadow:8px 8px 0 var(--ink);
}
.nc-highlight{
  grid-column:span 2;
  box-shadow:5px 5px 0 var(--gold);
}
.nc-highlight:hover{box-shadow:8px 8px 0 var(--gold)}
.nc-top{
  padding:18px 22px;
  color:var(--paper);
  display:flex;justify-content:space-between;align-items:center;
  background:linear-gradient(135deg,var(--ink),var(--blue))!important;
  border-bottom:3px solid var(--ink);
}
.nc-tag{
  display:inline-block;
  padding:5px 12px;
  font-family:var(--font-display);font-size:10px;
  text-transform:uppercase;letter-spacing:.14em;
  background:var(--gold);color:var(--ink);
  border:2px solid var(--ink);
}
.nc-icon{font-size:24px}
.nc-body{padding:24px 22px}
.nc-body h3{
  font-family:var(--font-display);
  font-size:18px;line-height:1.2;
  text-transform:uppercase;letter-spacing:-.01em;
  margin-bottom:10px;color:var(--ink);
}
.nc-body p{font-size:14px;color:var(--muted);margin-bottom:12px;line-height:1.55}
.nc-date{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);font-weight:700;
}
.nc-ticket-badge{
  display:inline-block;
  background:var(--gold);color:var(--ink);
  padding:5px 12px;font-family:var(--font-display);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:12px;border:2px solid var(--ink);
}
.nc-ticket-list{
  list-style:none;margin:12px 0;
  font-size:13px;
}
.nc-ticket-list li{
  padding:8px 0;
  border-bottom:1px dashed rgba(10,26,58,.2);
  display:flex;align-items:center;gap:8px;
}
.nc-ticket-list li:last-child{border-bottom:none}
.nc-tick-icon{opacity:.7}

/* News card video — for Kreiselball/TC Mardorf cooperation */
.nc-video-wrap{
  position:relative;
  background:#000;
  border-top:3px solid var(--ink);
  border-bottom:3px solid var(--ink);
  aspect-ratio:16/9;
  overflow:hidden;
}
.nc-video-wrap video{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.nc-partner-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 22px;
  background:var(--paper-warm);
  border-bottom:2px solid var(--ink);
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);font-weight:700;
}
.nc-partner-row strong{color:var(--blue)}

/* Pilates meta list (Wann/Wo/Wer/Kosten) */
.nc-meta-list{
  list-style:none;margin:14px 0 0;
  font-size:13px;
  background:var(--paper-warm);
  padding:14px 18px;
  border-left:4px solid var(--blue);
}
.nc-meta-list li{
  padding:5px 0;
  display:flex;gap:10px;
  line-height:1.4;
}
.nc-meta-list .k{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);font-weight:700;
  min-width:90px;flex-shrink:0;padding-top:2px;
}
.nc-meta-list .v{color:var(--ink)}

/* ═══════════════ MATCH LIST ═══════════════ */
.match-list{
  display:flex;flex-direction:column;
  border:3px solid var(--ink);
  background:var(--ink);gap:0;
}
.match{
  background:var(--paper);
  display:grid;
  grid-template-columns:110px 1fr auto auto;
  gap:20px;align-items:center;
  padding:20px 24px;
  border-bottom:2px solid var(--ink);
  position:relative;
}
.match:last-child{border-bottom:none}
.match.home::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--blue);
}
.match.away::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--gold);
}
.m-day{
  font-family:var(--font-display);
  font-size:36px;line-height:.9;color:var(--ink);
}
.m-date{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-top:4px;
}
.m-home{
  font-family:var(--font-body);font-weight:800;
  font-size:16px;color:var(--ink);
}
.m-sub{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:4px;
}
.m-score{
  font-family:var(--font-display);
  font-size:22px;letter-spacing:-.02em;
  padding:6px 12px;background:var(--ink);color:var(--paper);
  min-width:60px;text-align:center;
}
.mbadge{
  font-family:var(--font-display);
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  padding:6px 12px;
  border:2px solid var(--ink);
  white-space:nowrap;
}
.mb-plan{background:transparent;color:var(--ink)}
.mb-sieg{background:var(--grass);color:var(--paper);border-color:var(--grass)}
.mb-unent{background:var(--gold);color:var(--ink);border-color:var(--ink)}
.mb-nied{background:var(--red-loss);color:var(--paper);border-color:var(--red-loss)}

.match-divider{
  height:3px;background:var(--gold);
  display:block;
}

/* ═══════════════ ABOUT GRID ═══════════════ */
.about-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:40px;
}
.about-prose p{
  font-size:16px;
  margin-bottom:16px;
  color:var(--ink);
  line-height:1.7;
}
.about-prose strong{color:var(--blue-dark)}
.about-dark{
  background:var(--ink);
  color:var(--paper);
  padding:32px;
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--gold);
  align-self:start;
}
.adr{
  display:flex;justify-content:space-between;
  padding:12px 0;
  border-bottom:1px dashed rgba(255,255,255,.15);
  gap:16px;
}
.adr:last-child{border-bottom:none}
.adr-k{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);opacity:.9;
}
.adr-v{
  font-family:var(--font-body);font-weight:700;
  font-size:14px;text-align:right;
}

/* ═══════════════ PAGE HEADERS ═══════════════ */
.ph{
  background:var(--ink);
  color:var(--paper);
  padding:90px 32px 70px;
  text-align:center;
  position:relative;
  border-bottom:3px solid var(--gold);
  overflow:hidden;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(30,98,208,.3),transparent 50%),
    radial-gradient(ellipse at 80% 70%,rgba(232,183,48,.1),transparent 55%);
}
.ph-eye,.ph-h,.ph-sub{position:relative;z-index:1}
.ph-eye{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:12px;
}
.ph-h{
  font-family:var(--font-display);
  font-size:clamp(48px,8vw,96px);
  line-height:.9;text-transform:uppercase;letter-spacing:-.04em;
  margin-bottom:10px;
}
.ph-sub{
  font-family:var(--font-mono);
  font-size:13px;letter-spacing:.15em;text-transform:uppercase;
  opacity:.75;
}

/* ═══════════════ FUSSBALL LINK BOX ═══════════════ */
.fussball-link-box{
  background:var(--gold);
  border:3px solid var(--ink);
  padding:28px 32px;
  margin-top:32px;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  box-shadow:6px 6px 0 var(--ink);
}
.flb-left{display:flex;align-items:center;gap:20px}
.flb-icon{font-size:40px}
.flb-title{
  font-family:var(--font-display);
  font-size:18px;text-transform:uppercase;letter-spacing:-.01em;
  color:var(--ink);
}
.flb-sub{font-size:13px;color:var(--ink);opacity:.85;margin-top:4px}
.flb-btn{
  background:var(--ink);color:var(--gold);
  padding:14px 22px;
  font-family:var(--font-display);font-size:12px;
  text-transform:uppercase;letter-spacing:.12em;
  border:2px solid var(--ink);
  text-decoration:none;cursor:pointer;
  transition:all .15s;
}
.flb-btn:hover{background:var(--paper);color:var(--ink)}

.venue-box{
  margin-top:24px;
  padding:24px 28px;
  background:var(--paper-warm);
  border:3px solid var(--ink);
  border-left:8px solid var(--blue);
}
.venue-label{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);font-weight:700;margin-bottom:6px;
}
.venue-name{
  font-family:var(--font-display);
  font-size:22px;text-transform:uppercase;letter-spacing:-.01em;
  color:var(--ink);
}
.venue-addr{
  font-family:var(--font-mono);font-size:12px;
  letter-spacing:.1em;color:var(--muted);margin-top:6px;
}

/* ═══════════════ ARCHIV ═══════════════ */
.archiv-hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:100px 32px 80px;
  overflow:hidden;
  border-bottom:3px solid var(--gold);
}
.archiv-bg-layer,.archiv-glow,.archiv-tri{
  position:absolute;inset:0;
  pointer-events:none;
}
.archiv-bg-layer{
  background:
    radial-gradient(ellipse at 20% 30%,rgba(30,98,208,.3),transparent 50%);
}
.archiv-glow{
  background:radial-gradient(ellipse at 80% 70%,rgba(232,183,48,.15),transparent 55%);
}
.archiv-tri{opacity:.15}
.archiv-pitch-svg{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.6;pointer-events:none;
}
.archiv-hero-content{
  position:relative;z-index:2;
  max-width:1280px;margin:0 auto;
  text-align:center;
}
.archiv-h1{
  font-family:var(--font-display);
  font-size:clamp(56px,9vw,120px);
  line-height:.9;text-transform:uppercase;letter-spacing:-.04em;
  margin-bottom:16px;
}
.archiv-h1 span{
  color:var(--gold);
  -webkit-text-stroke:2px var(--gold);
  -webkit-text-fill-color:transparent;
}
.archiv-desc{
  max-width:600px;margin:0 auto 32px;
  font-size:16px;opacity:.9;
}
.archiv-meta-row{
  display:flex;justify-content:center;gap:48px;flex-wrap:wrap;
  padding-top:24px;
  border-top:1px solid rgba(232,183,48,.3);
}
.archiv-meta-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.archiv-meta-item strong{
  font-family:var(--font-head);
  font-size:32px;letter-spacing:.02em;color:var(--gold);
}
.archiv-meta-item span{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  opacity:.7;
}

.archiv-section{
  background:var(--paper);
  padding:80px 32px;
}
.archiv-section-inner{max-width:1100px;margin:0 auto}
.archiv-video-header{
  display:flex;justify-content:space-between;align-items:end;
  margin-bottom:24px;flex-wrap:wrap;gap:16px;
}
.archiv-film-no{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--blue);font-weight:700;
}
.archiv-film-title{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,44px);
  text-transform:uppercase;letter-spacing:-.02em;
  color:var(--ink);
}
.archiv-hist-badge{
  background:var(--gold);color:var(--ink);
  padding:6px 14px;
  font-family:var(--font-display);font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;
  border:2px solid var(--ink);
}

.video-card{
  background:var(--ink);
  border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--blue);
  overflow:hidden;
}
.video-card-header{
  padding:16px 24px;
  background:var(--ink-dark);
  color:var(--paper);
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:2px solid var(--gold);
  flex-wrap:wrap;gap:12px;
}
.video-card-title{
  font-family:var(--font-display);
  font-size:14px;text-transform:uppercase;letter-spacing:.1em;
}
.video-card-year{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);
}
.video-ratio{
  position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  background:#000;
}
.video-ratio video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
}
.video-caption{
  padding:20px 24px;
  color:var(--paper);
  background:var(--ink);
}
.video-caption p{font-size:14px;opacity:.9;line-height:1.6}

.archiv-images-section{margin-top:60px}
.archiv-images-header{margin-bottom:24px}
.archiv-images-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  margin-bottom:24px;
}
.archiv-img-placeholder{
  aspect-ratio:4/3;
  background:var(--paper-warm);
  border:3px dashed var(--blue);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;
}
.archiv-img-icon{font-size:44px;opacity:.4}
.archiv-img-label{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.archiv-images-notice{
  padding:20px 24px;
  background:var(--ink);color:var(--paper);
  border:3px solid var(--ink);
  display:flex;align-items:center;gap:14px;
  font-size:14px;
}
.archiv-notice-icon{
  font-size:24px;color:var(--gold);
  flex-shrink:0;
}
.archiv-images-notice button.inline-link{
  background:none;border:none;color:var(--gold);
  text-decoration:underline;cursor:pointer;font:inherit;font-weight:700;
}

.archiv-stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin-top:60px;
  border:3px solid var(--ink);
}
.archiv-stat{
  padding:36px 24px;
  text-align:center;
  background:var(--paper);
  border-right:2px solid var(--ink);
}
.archiv-stat:last-child{border-right:none}
.archiv-stat:nth-child(2){background:var(--paper-warm)}
.archiv-stat-n{
  font-family:var(--font-display);
  font-size:clamp(32px,4vw,52px);
  line-height:.9;letter-spacing:-.02em;
  color:var(--blue);
}
.archiv-stat-l{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-top:10px;
}

/* ═══════════════ KONTAKT ═══════════════ */
.kontakt-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:40px;
}
.info-block{display:flex;flex-direction:column;gap:28px}
.info-section{
  background:var(--ink);
  color:var(--paper);
  padding:28px;
  border:3px solid var(--ink);
}
.info-section:nth-of-type(2){
  box-shadow:6px 6px 0 var(--gold);
}
.info-section:nth-of-type(1){
  box-shadow:6px 6px 0 var(--blue);
}
.info-sec-title{
  font-family:var(--font-display);
  font-size:18px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gold);margin-bottom:20px;
  padding-bottom:12px;
  border-bottom:2px solid rgba(232,183,48,.3);
}
.info-item{
  padding:10px 0;
  border-bottom:1px dashed rgba(255,255,255,.1);
}
.info-item:last-child{border-bottom:none}
.info-item-label{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);opacity:.85;margin-bottom:4px;
}
.info-item-val{font-size:14px;line-height:1.5}
.info-item-val a{
  color:var(--paper);text-decoration:none;
  border-bottom:1px solid transparent;
}
.info-item-val a:hover{border-bottom-color:var(--gold)}

.qr-card{
  background:var(--gold);
  color:var(--ink);
  padding:24px;
  border:3px solid var(--ink);
  display:flex;gap:20px;align-items:center;
}
.qr-image-wrap{
  background:var(--paper);
  padding:10px;
  border:3px solid var(--ink);
  flex-shrink:0;
}
.qr-tag{
  display:inline-block;
  background:var(--ink);color:var(--gold);
  padding:4px 10px;
  font-family:var(--font-display);font-size:10px;
  text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:8px;
}
.qr-title{
  font-family:var(--font-display);
  font-size:20px;line-height:1;text-transform:uppercase;letter-spacing:-.01em;
}
.qr-sub{font-size:12px;margin-top:10px;line-height:1.5}

.form-section{
  background:var(--paper);
  padding:36px;
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
}
.form-title{
  font-family:var(--font-display);
  font-size:28px;text-transform:uppercase;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:12px;
}
.form-confirm-hint{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;
  background:var(--paper-warm);
  padding:10px 14px;
  border-left:4px solid var(--blue);
  margin-bottom:24px;
  color:var(--ink);
}
.fg{margin-bottom:16px}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg label{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);font-weight:700;
  margin-bottom:6px;
}
.fg input,.fg textarea,.fg select{
  width:100%;padding:12px 14px;
  background:var(--paper);
  border:2px solid var(--ink);
  font-family:var(--font-body);font-size:15px;
  color:var(--ink);outline:none;
  transition:all .15s;
}
.fg input:focus,.fg textarea:focus,.fg select:focus{
  border-color:var(--blue);
  box-shadow:3px 3px 0 var(--blue);
}
.fg textarea{resize:vertical;min-height:120px}
.sub-btn{
  width:100%;
  padding:18px;
  background:var(--blue);color:var(--paper);
  border:2px solid var(--ink);
  font-family:var(--font-display);font-size:14px;
  text-transform:uppercase;letter-spacing:.12em;
  cursor:pointer;
  box-shadow:5px 5px 0 var(--ink);
  transition:all .15s;
  margin-top:8px;
}
.sub-btn:hover:not(:disabled){
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--ink);
  background:var(--blue-bright);
}
.sub-btn:disabled{opacity:.6;cursor:not-allowed}

.form-success{
  background:var(--grass);color:var(--paper);
  padding:40px 32px;
  border:3px solid var(--ink);
  text-align:center;
}
.form-success-icon{
  font-size:56px;margin-bottom:12px;
  color:var(--gold);
}
.form-success h3{
  font-family:var(--font-display);
  font-size:26px;text-transform:uppercase;letter-spacing:-.01em;
  margin-bottom:8px;
}
.form-success p{font-size:14px;line-height:1.6}

/* ═══════════════ MAPS ═══════════════ */
.maps-section{
  background:var(--ink);
  border-top:3px solid var(--gold);
}
.maps-header{
  max-width:1280px;margin:0 auto;
  padding:32px;
  display:flex;justify-content:space-between;align-items:end;
  gap:20px;flex-wrap:wrap;
  color:var(--paper);
}
.maps-label{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:4px;
}
.maps-title{
  font-family:var(--font-display);
  font-size:28px;text-transform:uppercase;letter-spacing:-.01em;
}
.maps-addr{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.1em;margin-top:4px;opacity:.8;
}
.maps-directions-btn{
  background:var(--gold);color:var(--ink);
  padding:14px 22px;
  font-family:var(--font-display);font-size:12px;
  text-transform:uppercase;letter-spacing:.12em;
  text-decoration:none;
  border:2px solid var(--ink);
  transition:all .15s;
}
.maps-directions-btn:hover{background:var(--paper);color:var(--ink)}
.maps-embed{max-width:1280px;margin:0 auto;padding:0 32px 32px}

/* ═══════════════ MITGLIED ═══════════════ */
.mitglied-hero{
  position:relative;
  background:var(--ink);color:var(--paper);
  padding:90px 32px 70px;
  overflow:hidden;
  border-bottom:3px solid var(--gold);
}
.mitglied-hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 20% 30%,rgba(30,98,208,.3),transparent 55%),
    radial-gradient(ellipse at 80% 70%,rgba(232,183,48,.12),transparent 55%);
}
.mitglied-hero-content{
  position:relative;z-index:1;
  max-width:1280px;margin:0 auto;
  text-align:center;
}
.mitglied-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:12px;
}
.mitglied-h1{
  font-family:var(--font-display);
  font-size:clamp(56px,8vw,110px);
  line-height:.9;text-transform:uppercase;letter-spacing:-.04em;
  margin-bottom:16px;
}
.mitglied-h1 span{
  color:var(--gold);
  -webkit-text-stroke:2px var(--gold);
  -webkit-text-fill-color:transparent;
}
.mitglied-sub{
  font-size:16px;opacity:.9;max-width:560px;margin:0 auto;
}

.beitr-section{
  padding:80px 32px;
  background:var(--paper);
}
.beitr-inner{max-width:1280px;margin:0 auto}
.beitr-header{text-align:center;margin-bottom:48px}
.beitr-header .sec-eye{display:inline-flex}
.beitr-header .sec-rule{justify-content:center}
.beitr-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.beitr{
  background:var(--paper);
  border:3px solid var(--ink);
  overflow:hidden;
  transition:transform .2s,box-shadow .2s;
  box-shadow:6px 6px 0 var(--ink);
  position:relative;
}
.beitr:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.beitr.featured{box-shadow:6px 6px 0 var(--gold)}
.beitr.featured:hover{box-shadow:9px 9px 0 var(--gold)}
.beitr-accent{
  height:12px;
  background:var(--blue);
}
.beitr.featured .beitr-accent{background:var(--gold)}
.beitr:nth-child(3) .beitr-accent{background:var(--blue-dark)}
.beitr-feat-tag{
  position:absolute;top:20px;right:20px;
  background:var(--ink);color:var(--gold);
  padding:5px 12px;
  font-family:var(--font-display);font-size:10px;
  text-transform:uppercase;letter-spacing:.1em;
  border:2px solid var(--gold);
  z-index:2;
}
.beitr-body{padding:28px}
.beitr-icon{font-size:40px;margin-bottom:8px}
.beitr-cat{
  font-family:var(--font-mono);
  font-size:10px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--blue);font-weight:700;margin-bottom:4px;
}
.beitr-title{
  font-family:var(--font-display);
  font-size:24px;text-transform:uppercase;letter-spacing:-.02em;
  color:var(--ink);margin-bottom:4px;
}
.beitr-desc{font-size:13px;color:var(--muted);margin-bottom:16px}
.beitr-divider{
  height:2px;background:var(--ink);margin:16px 0;
}
.beitr ul{list-style:none}
.beitr ul li{
  padding:7px 0 7px 22px;
  font-size:14px;
  position:relative;
}
.beitr ul li::before{
  content:"✓";
  position:absolute;left:0;top:7px;
  color:var(--blue);font-weight:800;
}
.beitr.featured ul li::before{color:var(--gold-dark)}

.antrag-section{
  padding:80px 32px;
  background:var(--paper-warm);
  border-top:3px solid var(--ink);
}
.antrag-inner{max-width:860px;margin:0 auto}
.antrag-header{text-align:center;margin-bottom:40px}
.antrag-header .sec-eye{display:inline-flex}
.antrag-header .sec-rule{justify-content:center}
.antrag-card{
  background:var(--paper);
  padding:40px;
  border:3px solid var(--ink);
  box-shadow:10px 10px 0 var(--ink);
}

/* ═══════════════ NEXT PAGE CTA ═══════════════ */
.next-page-cta{
  background:var(--ink);color:var(--paper);
  padding:60px 32px;
  border-top:3px solid var(--gold);
  text-align:center;
}
.npc-inner{max-width:800px;margin:0 auto}
.npc-label{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:700;margin-bottom:10px;
}
.npc-title{
  font-family:var(--font-display);
  font-size:clamp(32px,5vw,56px);
  line-height:.95;text-transform:uppercase;letter-spacing:-.02em;
  margin-bottom:10px;
}
.npc-sub{
  font-size:15px;opacity:.8;margin-bottom:24px;
}
.npc-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--ink);
  padding:16px 28px;
  font-family:var(--font-display);font-size:13px;
  text-transform:uppercase;letter-spacing:.12em;
  border:2px solid var(--gold);
  cursor:pointer;
  transition:all .15s;
}
.npc-btn:hover{background:var(--paper);border-color:var(--paper)}

/* ═══════════════ LEGAL PAGES ═══════════════ */
.legal-hero{
  background:var(--ink);
  color:var(--paper);
  padding:80px 32px 50px;
  text-align:center;
  border-bottom:3px solid var(--gold);
}
.legal-hero-eye{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.legal-hero-h{
  font-family:var(--font-display);
  font-size:clamp(40px,6vw,72px);
  line-height:.9;text-transform:uppercase;letter-spacing:-.03em;
}
.legal-content{
  max-width:860px;margin:0 auto;
  padding:60px 32px;
}
.legal-date{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);font-weight:700;
  margin-bottom:32px;
  padding:10px 14px;
  background:var(--paper-warm);
  border-left:4px solid var(--blue);
  display:inline-block;
}
.legal-content h2{
  font-family:var(--font-display);
  font-size:22px;text-transform:uppercase;letter-spacing:-.01em;
  color:var(--ink);
  margin:32px 0 12px;
  padding-top:20px;
  border-top:2px solid var(--ink);
}
.legal-content h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.legal-content p{
  font-size:15px;line-height:1.7;
  margin-bottom:12px;
  color:var(--ink);
}
.legal-content a{color:var(--blue);text-decoration:underline}
.legal-content strong{color:var(--ink)}

/* ═══════════════ FOOTER ═══════════════ */
footer{
  background:var(--ink-dark);
  color:var(--paper);
  padding:60px 32px 24px;
  border-top:3px solid var(--gold);
}
.footer-in{max-width:1280px;margin:0 auto}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-logo{width:72px;height:72px}
.footer-brand p{font-size:13px;opacity:.85;line-height:1.65}
.footer-col h4{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.25em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.footer-col p,.footer-col a{
  display:block;
  color:var(--paper);opacity:.85;
  font-size:13px;line-height:1.85;
  text-decoration:none;cursor:pointer;
  background:none;border:none;padding:0;font-family:inherit;text-align:left;
}
.footer-col a:hover{opacity:1;color:var(--gold)}
.footer-bot{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:14px;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;
  color:rgba(255,255,255,.5);
}
.footer-legal-links{display:flex;gap:10px;align-items:center}
.footer-legal-links a{
  color:rgba(255,255,255,.5);text-decoration:none;cursor:pointer;
  background:none;border:none;padding:0;font:inherit;
}
.footer-legal-links a:hover{color:var(--gold)}
.footer-jub{
  color:var(--gold);letter-spacing:.15em;
}

/* ═══════════════ ACCESSIBILITY WIDGET ═══════════════ */
.a11y-trigger{
  position:fixed;bottom:20px;right:20px;
  width:56px;height:56px;
  background:var(--blue);color:var(--paper);
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  cursor:pointer;
  display:grid;place-items:center;
  z-index:8000;
  transition:all .15s;
}
.a11y-trigger:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--ink);
}
.a11y-panel{
  position:fixed;bottom:90px;right:20px;
  width:320px;max-width:calc(100vw - 40px);
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  display:none;
  z-index:8001;
}
.a11y-panel.open{display:block;animation:a11yIn .2s ease-out}
@keyframes a11yIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.a11y-panel-head{
  padding:16px 20px;
  background:var(--ink);color:var(--gold);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-display);
  font-size:14px;text-transform:uppercase;letter-spacing:.1em;
  border-bottom:2px solid var(--gold);
}
.a11y-close{
  background:none;border:none;color:var(--paper);
  font-size:24px;cursor:pointer;line-height:1;
}
.a11y-options{padding:12px}
.a11y-opt{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px;
  border-bottom:1px dashed rgba(10,26,58,.15);
  gap:12px;
}
.a11y-opt:last-child{border-bottom:none}
.a11y-opt-label{
  font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--ink);
}
.a11y-opt-desc{font-size:11px;color:var(--muted);margin-top:2px}
.a11y-toggle{
  position:relative;display:inline-block;
  width:48px;height:26px;flex-shrink:0;
}
.a11y-toggle input{opacity:0;width:0;height:0}
.a11y-slider{
  position:absolute;cursor:pointer;inset:0;
  background:#cbd5e1;border:2px solid var(--ink);
  transition:.2s;
}
.a11y-slider::before{
  position:absolute;content:"";
  height:14px;width:14px;
  left:3px;bottom:3px;
  background:var(--paper);border:2px solid var(--ink);
  transition:.2s;
}
.a11y-toggle input:checked + .a11y-slider{background:var(--blue)}
.a11y-toggle input:checked + .a11y-slider::before{transform:translateX(22px)}

/* A11y global modes */
.a11y-large-text{font-size:19px}
.a11y-dyslexia body{font-family:'Atkinson Hyperlegible','OpenDyslexic',var(--font-body);letter-spacing:.02em;line-height:1.8}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media(max-width:900px){
  .nav-links{display:none}
  .nav-mobile-btn{display:flex}
  .hero{padding:60px 20px 120px}
  .stats-bar{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1px solid rgba(255,255,255,.1)}
  .stat:nth-child(2){border-right:none}
  .nc-highlight{grid-column:span 1}
  .about-grid{grid-template-columns:1fr}
  .match{grid-template-columns:80px 1fr auto;gap:12px;padding:16px}
  .match .mbadge{display:none}
  .fussball-link-box{flex-direction:column;align-items:stretch}
  .kontakt-grid{grid-template-columns:1fr}
  .qr-card{flex-direction:column;text-align:center}
  .beitr-grid{grid-template-columns:1fr}
  .archiv-stats-grid{grid-template-columns:1fr}
  .archiv-stat{border-right:none;border-bottom:2px solid var(--ink)}
  .archiv-stat:last-child{border-bottom:none}
  .fg-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .wrap{padding:56px 20px}
  .jubilee-badge{flex-wrap:wrap;justify-content:center}
  .jub-line-top,.jub-line-bot{width:200px}
  .join-banner{text-align:center;flex-direction:column}
  .ph{padding:60px 20px 50px}
  .form-section{padding:24px}
  .antrag-card{padding:24px}
  .maps-header{flex-direction:column;align-items:start}
}

@media(max-width:540px){
  .nav{padding:12px 20px}
  .nav-wordmark strong{font-size:17px}
  .nav-wordmark span{font-size:9px}
  .hero-h1{font-size:52px}
  .hero-emblem{width:140px!important;height:auto}
  .ph-h{font-size:48px}
  .archiv-h1,.mitglied-h1{font-size:56px}
  .sec-h{font-size:36px}
  .nc-highlight{grid-column:span 1}
  .cookie-inner{grid-template-columns:1fr}
  .cookie-icon{font-size:28px}
  .footer-grid{grid-template-columns:1fr}
}