/* ============================================================
   Blue Devils Hohenems — DARK "WOW" THEME
   Farbwelt aus dem Corporate Design Handbuch V1.0:
   Tiefblau #002B7F · Vereinsblau #003F8B · Stahlblau #3F6FB5
   Eis #E6E7E7 · Weiß #FFFFFF · Tinte #0B0F16 · Meister-Gold #C9A227
   Schriften: Barlow Condensed (Display, Großbuchstaben) · Inter (Text)
   ============================================================ */
:root{
  --tiefblau:#002B7F; --vereinsblau:#003F8B; --stahlblau:#3F6FB5;
  --eis:#E6E7E7; --weiss:#FFFFFF; --tinte:#0B0F16;
  --gold:#C9A227;
  --base:#04070E; --base2:#070C18; --surface:rgba(0,43,127,.20); --surface2:rgba(0,43,127,.34);
  --line:rgba(63,111,181,.28); --line2:rgba(63,111,181,.16);
  --txt:#F2F5FA; --txt2:#A9B6CE; --txt3:#6F7C96;
  --f-display:"Barlow Condensed",Impact,sans-serif;
  --f-text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --maxw:1280px;
  --glow:0 0 60px rgba(63,111,181,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-text);background:var(--base);color:var(--txt);line-height:1.62;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
table{border-collapse:collapse;width:100%}
::selection{background:var(--gold);color:var(--tinte)}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  line-height:.98;letter-spacing:.005em;color:#fff}
h1{font-size:clamp(2.8rem,7vw,6rem)}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:clamp(1.25rem,2vw,1.65rem)}
p{color:var(--txt2)}
.lead{font-size:1.08rem;color:var(--txt2);max-width:66ch}
.label{font-size:.76rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--stahlblau);display:inline-block}
.gold{color:var(--gold)}
.tnum{font-variant-numeric:tabular-nums}
.accent-stroke{color:transparent;-webkit-text-stroke:2px var(--gold)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.pad{padding:clamp(64px,9vw,130px) 0}
.pad-sm{padding:clamp(48px,6vw,80px) 0}
.center{text-align:center}
.mt2{margin-top:16px}.mt3{margin-top:24px}.mt4{margin-top:32px}.mt5{margin-top:48px}.mt6{margin-top:72px}

/* Goldlinie */
.goldline{width:104px;height:4px;background:var(--gold);margin-top:22px;border-radius:1px;
  box-shadow:0 0 24px rgba(201,162,39,.45)}
.goldline.center{margin-left:auto;margin-right:auto}

/* ---------- Scroll-Progress ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:linear-gradient(90deg,var(--tiefblau),var(--stahlblau),var(--gold))}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:1.04rem;padding:15px 32px;border-radius:2px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s,color .25s,border-color .25s}
.btn-primary{background:linear-gradient(135deg,var(--tiefblau),var(--vereinsblau));color:#fff;
  border:1px solid rgba(63,111,181,.5);box-shadow:0 10px 34px rgba(0,43,127,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(63,111,181,.6)}
.btn-ghost{border:1.5px solid var(--line);color:#fff;background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(201,162,39,.12);transform:translateY(-2px)}
.btn-light{background:var(--eis);color:var(--tiefblau)}
.btn-light:hover{background:#fff;transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,#D9B23A,var(--gold));color:var(--tinte);
  box-shadow:0 10px 34px rgba(201,162,39,.35)}
.btn-gold:hover{transform:translateY(-2px)}

/* ---------- Header ---------- */
header.site{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;
  transition:background .35s,backdrop-filter .35s,padding .35s,border-color .35s;
  border-bottom:1px solid transparent}
header.site.scrolled{background:rgba(4,7,14,.86);backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:var(--line);padding:8px 0}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:46px;width:auto;filter:drop-shadow(0 6px 18px rgba(63,111,181,.5))}
.brand-txt b{display:block;font-family:var(--f-display);font-weight:700;font-size:1.16rem;
  text-transform:uppercase;letter-spacing:.03em;color:#fff;line-height:1}
.brand-txt span{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--stahlblau);font-weight:600}
nav.main{display:flex;align-items:center;gap:26px}
nav.main a{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  font-size:1.06rem;color:var(--eis);padding:6px 0;position:relative;opacity:.9;transition:.2s}
nav.main a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .3s}
nav.main a:hover{opacity:1}
nav.main a:hover::after,nav.main a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:26px;height:2px;background:#fff;transition:.3s}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding-bottom:80px;background:var(--base)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(4,7,14,.72) 0%,rgba(0,43,127,.42) 34%,rgba(4,7,14,.9) 82%,var(--base) 100%)}
.hero-grain{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:3px 3px;opacity:.5;mix-blend-mode:overlay}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{margin:18px 0 22px;text-shadow:0 14px 60px rgba(0,0,0,.75)}
.hero p{color:rgba(242,245,250,.86);max-width:58ch;font-size:1.08rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-badges{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px;padding-top:26px;
  border-top:1px solid var(--line2)}
.hero-badges div{min-width:120px}
.hero-badges b{display:block;font-family:var(--f-display);font-size:2.3rem;line-height:1;
  font-variant-numeric:tabular-nums;color:#fff}
.hero-badges b.gold{color:var(--gold)}
.hero-badges span{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);font-weight:600}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--txt3)}
.scroll-hint .mouse{width:22px;height:36px;border:1.5px solid var(--line);border-radius:12px;position:relative}
.scroll-hint .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;
  border-radius:3px;background:var(--gold);transform:translateX(-50%);animation:wheel 1.7s infinite}
@keyframes wheel{0%{opacity:0;top:7px}35%{opacity:1}70%{opacity:0;top:19px}100%{opacity:0}}

/* ---------- Marquee ---------- */
.marquee{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);overflow:hidden;
  background:linear-gradient(90deg,rgba(0,43,127,.35),rgba(4,7,14,.6),rgba(0,43,127,.35))}
.mq-track{display:flex;gap:56px;white-space:nowrap;padding:18px 0;width:max-content;
  animation:slide 34s linear infinite}
.mq-track span{font-family:var(--f-display);font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(230,231,231,.55)}
.mq-track span b{color:var(--gold)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Flächen ---------- */
.sec-surface{background:linear-gradient(180deg,var(--base2),var(--base))}
.sec-blau{background:linear-gradient(160deg,var(--tiefblau),#001A4F 60%,var(--base2));position:relative}
.sec-blau::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:3px 3px;opacity:.5;pointer-events:none}
.sec-eis{background:linear-gradient(180deg,rgba(0,43,127,.16),rgba(4,7,14,.2))}
.sec-blau .wrap,.sec-eis .wrap{position:relative;z-index:2}

/* ---------- Karten ---------- */
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;background:linear-gradient(180deg,rgba(0,43,127,.28),rgba(7,12,24,.5));
  border:1px solid var(--line);border-radius:4px;padding:34px 28px;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.card:hover{transform:translateY(-6px);border-color:rgba(201,162,39,.5);box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.card::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);opacity:0;transition:opacity .35s}
.card:hover::after{opacity:1}
.card h3{margin-bottom:12px}
.card p{font-size:.96rem}
.card .num{font-family:var(--f-display);font-size:1rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stahlblau);font-weight:700}
.card.blau{background:linear-gradient(160deg,var(--tiefblau),rgba(0,43,127,.35));border-color:rgba(63,111,181,.5)}
.card.eis{background:linear-gradient(180deg,rgba(230,231,231,.06),rgba(7,12,24,.4))}

/* ---------- Kennzahlen ---------- */
.kpi b{display:block;font-family:var(--f-display);font-size:clamp(2.8rem,5.4vw,4.4rem);line-height:1;
  font-variant-numeric:tabular-nums;color:#fff;
  background:linear-gradient(180deg,#fff,rgba(63,111,181,.85));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.kpi b.gold{background:linear-gradient(180deg,#E9C64E,var(--gold));-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.kpi span{display:block;margin-top:14px;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stahlblau);font-weight:600}
.kpi p{margin-top:8px;font-size:.92rem}

/* ---------- Listen ---------- */
ul.ticks{list-style:none;display:grid;gap:10px}
ul.ticks li{position:relative;padding-left:22px;font-size:.96rem;color:var(--txt2)}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  background:var(--gold);border-radius:1px;transform:rotate(45deg)}

/* ---------- Nächstes Spiel ---------- */
.next{background:linear-gradient(180deg,var(--base2),var(--base))}
.next-inner{display:grid;grid-template-columns:1.4fr 1fr;border:1px solid var(--line);border-radius:4px;
  overflow:hidden;background:linear-gradient(135deg,rgba(0,43,127,.5),rgba(4,7,14,.7));
  box-shadow:0 50px 100px -50px rgba(0,0,0,.95)}
.next-main{padding:clamp(28px,4vw,52px)}
.vs-row{display:flex;align-items:center;gap:clamp(16px,3vw,40px);margin:24px 0}
.vs-team{flex:1;text-align:center}
.vs-crest{width:84px;height:84px;margin:0 auto 12px;display:grid;place-items:center;border-radius:4px;
  background:linear-gradient(135deg,var(--tiefblau),var(--vereinsblau));
  border:1px solid rgba(63,111,181,.5);font-family:var(--f-display);font-size:2rem;color:#fff;
  box-shadow:var(--glow)}
.vs-crest.away{background:linear-gradient(135deg,#1B2233,#2C3549);border-color:var(--line)}
.vs-team small{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt3);font-weight:600}
.vs-team b{display:block;font-family:var(--f-display);font-size:1.5rem;text-transform:uppercase;margin-top:6px}
.vs-row .vs{font-family:var(--f-display);font-size:2.4rem;color:var(--gold)}
.next-meta{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:.88rem;color:var(--txt2);letter-spacing:.04em}
.next-side{padding:clamp(28px,4vw,46px);border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(63,111,181,.14),transparent);
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.cd{display:flex;gap:12px;margin:20px 0 24px}
.cd .u{min-width:72px;padding:15px 10px;background:rgba(4,7,14,.6);border:1px solid var(--line);border-radius:4px}
.cd .u b{display:block;font-family:var(--f-display);font-size:2.1rem;line-height:1;
  font-variant-numeric:tabular-nums;color:#fff}
.cd .u span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stahlblau);font-weight:600}

/* ---------- Spielplan ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 26px}
.chip{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:1rem;padding:11px 24px;border:1px solid var(--line);color:var(--eis);border-radius:999px;
  transition:.22s;background:rgba(255,255,255,.02)}
.chip:hover{border-color:var(--gold)}
.chip.active{background:linear-gradient(135deg,var(--tiefblau),var(--vereinsblau));
  border-color:rgba(63,111,181,.6);color:#fff;box-shadow:0 8px 26px rgba(0,43,127,.55)}
.fixture{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:center;
  padding:22px 26px;border:1px solid var(--line);border-radius:4px;margin-bottom:10px;
  background:linear-gradient(90deg,rgba(0,43,127,.22),rgba(7,12,24,.5));transition:.28s}
.fixture:hover{border-color:rgba(201,162,39,.45);transform:translateX(5px)}
.fx-date b{display:block;font-family:var(--f-display);font-size:1.55rem;line-height:1.1;
  font-variant-numeric:tabular-nums;color:#fff}
.fx-date span{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stahlblau);font-weight:600}
.fx-match b{display:block;font-family:var(--f-display);font-size:1.22rem;text-transform:uppercase}
.fx-match small{display:block;font-size:.84rem;color:var(--txt3)}
.tag{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:8px 16px;
  border:1px solid var(--line);color:var(--txt3);border-radius:999px;white-space:nowrap}
.tag.home{background:linear-gradient(135deg,var(--tiefblau),var(--vereinsblau));border-color:transparent;color:#fff}

/* ---------- News ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.ncard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,43,127,.2),rgba(7,12,24,.5));transition:.35s}
.ncard:hover{transform:translateY(-7px);border-color:rgba(201,162,39,.45)}
.ncard .thumb{aspect-ratio:16/9;overflow:hidden;position:relative;background:var(--base2)}
.ncard .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.ncard:hover .thumb img{transform:scale(1.07)}
.ncard .body{padding:26px;display:flex;flex-direction:column;gap:10px;flex:1}
.ncard time{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stahlblau);font-weight:600}
.ncard h3{font-size:1.22rem}
.ncard p{font-size:.92rem;flex:1}
.ncard .more{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:.98rem;color:var(--gold)}

/* ---------- Timeline ---------- */
.timeline{margin-top:52px;position:relative;padding-left:10px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--gold),rgba(63,111,181,.15),transparent)}
.tl{position:relative;padding:0 0 38px 48px}
.tl::before{content:"";position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;
  background:var(--base);border:2px solid var(--gold);box-shadow:0 0 0 5px rgba(201,162,39,.12)}
.tl .y{font-family:var(--f-display);font-size:1.6rem;color:var(--gold);font-variant-numeric:tabular-nums}
.tl h3{font-size:1.2rem;margin:2px 0 6px}
.tl p{font-size:.94rem;max-width:62ch}

/* ---------- Sponsoren ---------- */
.sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.sp{padding:32px 26px;border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(180deg,rgba(0,43,127,.24),rgba(7,12,24,.5));transition:.3s}
.sp:hover{border-color:rgba(201,162,39,.5);transform:translateY(-5px)}
.sp .tier{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stahlblau);font-weight:600}
.sp h3{margin:10px 0 8px}
.sp .price{font-family:var(--f-display);font-size:1.6rem;color:var(--gold);
  font-variant-numeric:tabular-nums;margin-bottom:16px}

/* ---------- Formulare ---------- */
form.stack{display:grid;gap:16px}
.field{display:grid;gap:7px}
label{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stahlblau);font-weight:600}
input,select,textarea{font-family:inherit;font-size:.98rem;padding:15px 18px;border:1px solid var(--line);
  background:rgba(4,7,14,.65);color:var(--txt);border-radius:3px;width:100%}
input::placeholder,textarea::placeholder{color:var(--txt3)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
  background:rgba(0,43,127,.28)}
textarea{min-height:140px;resize:vertical}
select option{background:var(--base2);color:var(--txt)}
.msg{font-size:.9rem;min-height:1.3em;font-weight:600}

/* ---------- Newsletter ---------- */
.nl{background:linear-gradient(135deg,var(--tiefblau),#00143D);position:relative;overflow:hidden}
.nl::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,162,39,.18),transparent 70%)}
.nl-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.nl-form{display:flex;flex-wrap:wrap;gap:12px}
.nl-form input{flex:1;min-width:220px;background:rgba(4,7,14,.5);border:1px solid rgba(255,255,255,.28);color:#fff}
.nl-form input:focus{border-color:var(--gold)}

/* ---------- Modal ---------- */
.overlay{position:fixed;inset:0;z-index:1500;background:rgba(4,7,14,.82);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .35s}
.overlay.open{opacity:1;pointer-events:auto}
.modal{width:min(900px,100%);background:var(--base2);border:1px solid var(--line);border-top:4px solid var(--gold);
  border-radius:4px;display:grid;grid-template-columns:1fr 1fr;max-height:92vh;overflow:auto;position:relative;
  transform:translateY(26px) scale(.98);transition:transform .45s cubic-bezier(.2,.9,.25,1)}
.overlay.open .modal{transform:none}
.modal .vis{position:relative;min-height:330px;background:var(--tiefblau)}
.modal .vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.modal .vis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,43,127,.3),rgba(4,7,14,.9))}
.modal .body{padding:clamp(26px,4vw,44px);display:flex;flex-direction:column;gap:14px;justify-content:center}
.modal-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;
  background:rgba(4,7,14,.8);border:1px solid var(--line);font-size:1.3rem;z-index:5;transition:.2s}
.modal-close:hover{background:var(--gold);color:var(--tinte)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:.96rem;
  padding:10px 20px;border:1px solid var(--line);color:var(--eis);border-radius:999px;transition:.22s}
.chips button.active{background:linear-gradient(135deg,var(--tiefblau),var(--vereinsblau));
  border-color:transparent;color:#fff}

/* ---------- Footer ---------- */
footer.site{background:var(--base2);border-top:1px solid var(--line);padding:72px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
footer.site p{color:var(--txt3);font-size:.92rem}
.foot-col h4{font-family:var(--f-display);font-size:.96rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px}
.foot-col a{display:block;color:var(--txt2);font-size:.94rem;padding:5px 0;transition:.2s}
.foot-col a:hover{color:#fff;padding-left:5px}
.foot-bottom{margin-top:52px;padding-top:26px;border-top:1px solid var(--line2);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;color:var(--txt3);font-size:.86rem}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  transition:.25s;color:var(--eis)}
.socials a:hover{background:var(--gold);border-color:transparent;color:var(--tinte);transform:translateY(-3px)}

/* ---------- Seitenkopf ---------- */
.pagehead{position:relative;background:linear-gradient(160deg,var(--tiefblau),#00133C 70%,var(--base));
  padding:clamp(130px,14vw,190px) 0 clamp(48px,6vw,80px);overflow:hidden}
.pagehead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}
.pagehead p{color:rgba(242,245,250,.82);margin-top:16px;max-width:64ch}

/* ---------- Rechtliches ---------- */
.prose{max-width:840px;padding:64px 24px 110px;margin:0 auto}
.prose h2{font-size:1.55rem;margin:40px 0 12px}
.prose h3{font-size:1.15rem;margin:26px 0 8px}
.prose p,.prose li{color:var(--txt2);font-size:.96rem;margin-bottom:10px}
.prose a{color:var(--gold);border-bottom:1px solid var(--line)}

/* ---------- Tabellen ---------- */
table.tbl{font-size:.86rem;margin-top:18px}
table.tbl th{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stahlblau);
  text-align:left;padding:13px 10px;border-bottom:2px solid var(--line)}
table.tbl td{padding:13px 10px;border-bottom:1px solid var(--line2);color:var(--txt2)}
table.tbl tr:hover td{background:rgba(0,43,127,.2)}

/* ---------- Reveal (nur wenn JS aktiv) ---------- */
.js .reveal{opacity:0;transform:translateY(34px);
  transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}

/* ---------- Nach oben ---------- */
#toTop{position:fixed;right:22px;bottom:22px;z-index:900;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--tiefblau),var(--vereinsblau));border:1px solid var(--line);
  display:grid;place-items:center;font-size:1.2rem;box-shadow:var(--glow);
  opacity:0;pointer-events:none;transition:.35s;transform:translateY(14px)}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{transform:translateY(-3px);border-color:var(--gold)}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  nav.main{position:fixed;inset:0 0 0 auto;width:min(340px,86vw);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:24px;padding:44px;
    background:rgba(4,7,14,.98);backdrop-filter:blur(18px);transform:translateX(104%);
    transition:transform .45s cubic-bezier(.2,.9,.25,1)}
  nav.main.open{transform:none}
  nav.main a{font-size:1.6rem}
  .burger{display:flex;z-index:1200}
  .g4,.g3,.news-grid,.sp-grid{grid-template-columns:1fr 1fr}
  .next-inner,.nl-inner,.modal{grid-template-columns:1fr}
  .next-side{border-left:0;border-top:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .g4,.g3,.g2,.news-grid,.sp-grid,.foot-grid{grid-template-columns:1fr}
  .fixture{grid-template-columns:1fr;gap:12px}
  .vs-row{flex-direction:column}
  .cd{flex-wrap:wrap;justify-content:center}
  .modal .vis{min-height:170px}
  .hero-badges{gap:20px}
}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
  .hero-bg img{transform:none}
  .mq-track{animation:none}
}
@media print{.overlay,.burger,header.site,#toTop,#progress{display:none}}

/* ============================================================
   ERWEITERUNGEN — Red Bull / Luzern Lions / Warriors Referenzen
   ============================================================ */

/* ---------- Durchlaufendes Sponsoren-Carousel ---------- */
.sponsor-rail{position:relative;overflow:hidden;border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);background:linear-gradient(90deg,rgba(0,43,127,.28),rgba(4,7,14,.7),rgba(0,43,127,.28));
  padding:30px 0}
.sponsor-rail::before,.sponsor-rail::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:3;pointer-events:none}
.sponsor-rail::before{left:0;background:linear-gradient(90deg,var(--base),transparent)}
.sponsor-rail::after{right:0;background:linear-gradient(270deg,var(--base),transparent)}
.rail-track{display:flex;gap:56px;width:max-content;animation:rail 38s linear infinite;align-items:center}
.sponsor-rail:hover .rail-track{animation-play-state:paused}
@keyframes rail{to{transform:translateX(-50%)}}
.rail-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-width:190px;height:76px;padding:0 26px;border:1px solid var(--line);border-radius:4px;
  background:rgba(4,7,14,.55);transition:.3s}
.rail-item:hover{border-color:var(--gold);background:rgba(0,43,127,.3)}
.rail-item b{font-family:var(--f-display);font-size:1.25rem;text-transform:uppercase;
  letter-spacing:.04em;color:rgba(242,245,250,.82);white-space:nowrap}
.rail-item.tier-gold b{color:var(--gold)}
.rail-cap{text-align:center;margin-top:20px}

/* ---------- Gameday-Karten (Luzern-Lions-Stil) ---------- */
.gd-list{display:grid;gap:14px}
.gd{display:grid;grid-template-columns:132px 1fr auto;gap:24px;align-items:center;
  padding:22px 26px;border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(90deg,rgba(0,43,127,.26),rgba(7,12,24,.55));transition:.3s}
.gd:hover{border-color:rgba(201,162,39,.45);transform:translateX(5px)}
.gd-date{text-align:center;border-right:1px solid var(--line2);padding-right:20px}
.gd-date .dow{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--stahlblau);font-weight:600}
.gd-date b{display:block;font-family:var(--f-display);font-size:2.3rem;line-height:1;
  font-variant-numeric:tabular-nums;color:#fff}
.gd-date span{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt3);font-weight:600}
.gd-teams{display:grid;gap:8px}
.gd-team{display:flex;align-items:center;gap:12px}
.gd-badge{flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;border-radius:3px;
  background:linear-gradient(135deg,var(--tiefblau),var(--vereinsblau));border:1px solid rgba(63,111,181,.45);
  font-family:var(--f-display);font-size:.92rem;color:#fff}
.gd-badge.opp{background:linear-gradient(135deg,#1B2233,#2C3549);border-color:var(--line);color:var(--txt2)}
.gd-team b{font-family:var(--f-display);font-size:1.14rem;text-transform:uppercase;font-weight:700;color:#fff}
.gd-team em{font-style:normal;margin-left:auto;font-family:var(--f-display);font-size:1.5rem;
  font-variant-numeric:tabular-nums;color:var(--gold)}
.gd-meta{text-align:right;display:grid;gap:8px;justify-items:end}
.gd-meta small{font-size:.8rem;color:var(--txt3);letter-spacing:.06em}
.gd-link{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:.92rem;
  color:var(--stahlblau);letter-spacing:.06em;transition:.2s}
.gd-link:hover{color:var(--gold)}

/* ---------- Tabelle ---------- */
.standings{border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:8px}
.standings table{font-size:.9rem}
.standings th{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stahlblau);
  font-weight:600;text-align:left;padding:14px 16px;background:rgba(0,43,127,.34);
  border-bottom:1px solid var(--line)}
.standings td{padding:14px 16px;border-bottom:1px solid var(--line2);color:var(--txt2)}
.standings tr:last-child td{border-bottom:0}
.standings tr.me td{background:rgba(201,162,39,.10);color:#fff;font-weight:600}
.standings td.n{font-variant-numeric:tabular-nums;text-align:right}
.standings .pos{font-family:var(--f-display);font-size:1.1rem;color:#fff;font-variant-numeric:tabular-nums}

/* ---------- Trainer / Training-Block ---------- */
.trainbox{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;
  padding:30px 32px;border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(120deg,rgba(0,43,127,.4),rgba(7,12,24,.6))}
.trainbox .when b{display:block;font-family:var(--f-display);font-size:2.4rem;line-height:1;
  color:var(--gold);font-variant-numeric:tabular-nums}
.trainbox .when span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stahlblau);font-weight:600}

/* ---------- Feature-Karten mit Bild (Red-Bull-Stil) ---------- */
.feature{position:relative;display:block;overflow:hidden;border-radius:4px;border:1px solid var(--line);
  min-height:340px;background:var(--base2);transition:.4s}
.feature:hover{border-color:rgba(201,162,39,.5);transform:translateY(-6px)}
.feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.feature:hover img{transform:scale(1.06)}
.feature::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,7,14,.15) 0%,rgba(0,43,127,.55) 55%,rgba(4,7,14,.94) 100%)}
.feature .fc{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:flex-end;padding:30px 28px;gap:10px}
.feature .tagline{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.feature h3{font-size:1.5rem}
.feature p{font-size:.92rem;color:rgba(242,245,250,.85)}
.feature .go{font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:#fff;margin-top:6px}
.feature:hover .go{color:var(--gold)}

/* ---------- Zitat-Band ---------- */
.quoteband{border-left:3px solid var(--gold);padding:8px 0 8px 32px}
.quoteband p{font-family:var(--f-display);font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.14;
  text-transform:uppercase;color:#fff}
.quoteband em{font-style:italic;color:var(--gold)}
.quoteband cite{display:block;margin-top:16px;font-style:normal;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--stahlblau);font-weight:600}

/* ---------- Ablauf-Schritte ---------- */
.steps{display:grid;gap:26px;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.step .sn{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);background:rgba(0,43,127,.3);font-family:var(--f-display);
  font-size:1.3rem;color:var(--gold)}
.step h3{font-size:1.2rem;margin-bottom:6px}

/* ---------- Teamfinder-Karte ---------- */
.finder{padding:34px;border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(140deg,rgba(0,43,127,.42),rgba(7,12,24,.6))}
.finder .row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:20px}
.finder .row .field{flex:1;min-width:180px}
.finder-out{margin-top:20px;padding:18px 20px;border-left:3px solid var(--gold);
  background:rgba(201,162,39,.08);display:none}
.finder-out.show{display:block}
.finder-out b{font-family:var(--f-display);font-size:1.35rem;text-transform:uppercase;color:var(--gold)}

@media(max-width:820px){
  .gd{grid-template-columns:1fr;gap:14px}
  .gd-date{text-align:left;border-right:0;border-bottom:1px solid var(--line2);padding:0 0 10px}
  .gd-meta{text-align:left;justify-items:start}
  .trainbox{grid-template-columns:1fr;gap:16px}
  .feature{min-height:280px}
}

/* ============================================================
   HERO V2 — Layered Player (Referenz: Red-Bull/FIFA-Hero)
   ============================================================ */
.hero2{position:relative;min-height:100svh;overflow:hidden;background:var(--base);
  display:flex;align-items:flex-end;padding:130px 0 46px}
.hero2 .glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 55% at 62% 58%, rgba(0,43,127,.85), transparent 72%),
    radial-gradient(38% 42% at 78% 72%, rgba(63,111,181,.42), transparent 70%),
    radial-gradient(30% 34% at 20% 18%, rgba(201,162,39,.16), transparent 72%),
    linear-gradient(180deg, rgba(4,7,14,.9), rgba(4,7,14,.35) 42%, var(--base) 100%)}
.hero2 .rays{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background:repeating-linear-gradient(105deg, rgba(255,255,255,.045) 0 2px, transparent 2px 120px)}
.hero2 .photo{position:absolute;inset:0;z-index:0}
.hero2 .photo img{width:100%;height:100%;object-fit:cover;opacity:.3}
.hero2-grid{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.hcopy{max-width:min(62%,760px)}
.hline{font-family:var(--f-display);font-weight:700;text-transform:uppercase;line-height:.9;
  letter-spacing:.005em;color:#fff;text-shadow:0 14px 60px rgba(0,0,0,.7)}
.hback{position:relative;z-index:1;font-size:clamp(2.2rem,5.6vw,5.2rem)}
.hfront{position:relative;z-index:3;font-size:clamp(3.4rem,11vw,10rem);line-height:.82;
  color:var(--gold);text-shadow:0 20px 70px rgba(0,0,0,.85)}
.hfront .dot{color:#fff}
.hback2{position:relative;z-index:1;font-size:clamp(1.5rem,3.4vw,3rem);margin-top:.18em}
.hcopy p{position:relative;z-index:4;margin-top:26px;max-width:46ch;color:rgba(242,245,250,.86)}
.hcopy .label{position:relative;z-index:4;color:var(--gold)}
.hcopy .hero-actions{position:relative;z-index:4}
.hcopy .hero-badges{position:relative;z-index:4}
.hero2 .player{position:absolute;right:2%;bottom:0;z-index:2;height:min(94%,900px);
  width:auto;pointer-events:none;filter:drop-shadow(0 40px 80px rgba(0,0,0,.85))
  drop-shadow(0 0 60px rgba(63,111,181,.35))}
.hero2 .playbtn{position:absolute;right:min(38%,430px);bottom:44%;z-index:4;width:74px;height:74px;
  border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(4,7,14,.42);
  backdrop-filter:blur(6px);display:grid;place-items:center;color:#fff;font-size:1.1rem;transition:.25s}
.hero2 .playbtn:hover{background:var(--gold);border-color:transparent;color:var(--tinte);transform:scale(1.07)}
.hero2 .playbtn::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.22);opacity:0}100%{opacity:0}}
.heroquote{position:absolute;right:2%;bottom:22%;z-index:4;max-width:340px;text-align:right;
  font-size:.98rem;font-style:italic;color:rgba(242,245,250,.9);line-height:1.5;
  border-right:2px solid var(--gold);padding-right:16px}
.roster{position:absolute;left:24px;bottom:40px;z-index:5;display:flex;align-items:stretch;
  background:rgba(255,255,255,.97);border-radius:6px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95)}
.roster .pitch{width:118px;background:linear-gradient(160deg,var(--tiefblau),var(--vereinsblau));
  display:grid;place-items:center;color:#fff}
.roster .pitch b{font-family:var(--f-display);font-size:1.7rem;line-height:1;text-align:center}
.roster .pitch span{display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.75);margin-top:6px}
.roster .info{padding:16px 22px;display:grid;gap:6px}
.roster .info .lbl{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stahlblau);font-weight:700}
.roster .info b{font-family:var(--f-display);font-size:1.15rem;text-transform:uppercase;color:var(--tinte);line-height:1.1}
.roster .info small{font-size:.76rem;color:#5A6478}
.roster .vs{display:flex;align-items:center;gap:8px;margin-top:2px}
.roster .vs i{width:26px;height:26px;display:grid;place-items:center;border-radius:3px;
  background:var(--tiefblau);color:#fff;font-style:normal;font-size:.6rem;font-weight:700}
.roster .vs i.o{background:#2C3549}
.hero2 .scroll-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:5}

/* Nav-Countdown */
.nav-cd{display:flex;align-items:center;gap:6px;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-weight:600;margin-top:5px;justify-content:center}
.nav-cd b{font-family:var(--f-display);font-size:.92rem;font-variant-numeric:tabular-nums;color:#fff}
.nav-stack{display:grid;justify-items:center}

@media(max-width:1100px){
  .heroquote{display:none}
  .hero2 .playbtn{right:auto;left:52%;bottom:56%}
}
@media(max-width:820px){
  .hero2{min-height:auto;padding:120px 0 60px}
  .hcopy{max-width:100%}
  .hero2 .player{position:relative;right:auto;bottom:auto;height:auto;width:74%;margin:26px auto 0;
    display:block;opacity:.96}
  .hero2 .playbtn{position:relative;left:auto;bottom:auto;margin:18px auto 0;right:auto}
  .roster{position:relative;left:auto;bottom:auto;margin:28px 0 0;width:100%}
  .hfront{font-size:clamp(3rem,15vw,6rem)}
}
/* Feinjustierung Hero V2 */
@media(min-width:821px){.hero2{padding-bottom:186px}}
@media(max-width:1024px){.nav-cd{display:none}}
.heroquote{text-shadow:0 6px 26px rgba(0,0,0,.9)}
.roster{max-width:min(420px,52vw)}

/* ============================================================
   HERO V2 — mehr Luft zum Rand (Feinschliff)
   ============================================================ */
@media(min-width:821px){
  .hero2{padding:clamp(150px,16vh,200px) 0 clamp(150px,17vh,204px)}
  .hero2-grid{padding:0 clamp(40px,6vw,104px)}
  .roster{left:clamp(40px,6vw,104px);bottom:clamp(58px,7vh,88px)}
  .heroquote{right:clamp(40px,6vw,104px);bottom:clamp(155px,17vh,200px)}
  .hero2 .player{right:clamp(10px,2.6vw,54px)}
  .hero2 .scroll-hint{bottom:26px}
}
@media(max-width:820px){
  .hero2{padding:120px 0 72px}
  .hero2-grid{padding:0 26px}
}

/* ============================================================
   HERO V2 — Randabstand Runde 2 (Nav, Player, Karten)
   ============================================================ */
@media(min-width:821px){
  header.site .nav{padding-left:clamp(40px,6vw,104px);padding-right:clamp(40px,6vw,104px)}
  .hero2{padding-top:clamp(150px,17vh,210px);padding-bottom:clamp(190px,23vh,260px)}
  .hero2 .player{right:clamp(26px,4.2vw,84px);bottom:clamp(26px,4.5vh,58px);height:min(88%,860px)}
  .hero2 .scroll-hint{bottom:36px}
  .roster{left:clamp(40px,6vw,104px);bottom:clamp(74px,9vh,116px)}
  .heroquote{right:clamp(40px,6vw,104px);bottom:clamp(200px,24vh,268px)}
}
@media(max-width:820px){
  header.site .nav{padding-left:26px;padding-right:26px}
}

/* ============================================================
   MOBILE-FEINSCHLIFF — kompakte Geräte ab iPhone 15 (393px)
   Ziel: alles lesbar, nichts angeschnitten, Tap-Ziele >= 44px
   ============================================================ */
@media(max-width:820px){
  .wrap,.hero2-grid{padding-left:20px;padding-right:20px}

  /* --- Header --- */
  header.site .nav{padding:12px 18px;gap:10px}
  header.site .brand img{height:40px;width:auto}
  header.site .brand-txt b{font-size:1.05rem;line-height:1}
  header.site .brand-txt span{display:none}
  .nav-cta{gap:8px}
  .nav-cta>.btn-ghost{display:none}          /* Newsletter liegt im Footer */
  .nav-cta .btn{padding:11px 18px;font-size:.92rem;min-height:44px}
  .burger{width:44px;height:44px;padding:11px}

  /* --- Hero --- */
  .hero2{padding:104px 0 56px;min-height:auto;display:block}
  .hcopy{max-width:100%}
  .hback{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .hfront{font-size:clamp(3.4rem,17.5vw,5rem);line-height:.84}
  .hback2{font-size:clamp(1.35rem,6.4vw,1.9rem)}
  .hcopy p{margin-top:20px;font-size:1rem;max-width:100%}
  .hcopy .hero-actions{margin-top:26px;display:grid;gap:12px}
  .hcopy .hero-actions .btn{width:100%;justify-content:center;min-height:52px}
  .hero-badges{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;margin-top:34px}
  .hero-badges b{font-size:1.6rem}
  .hero-badges span{font-size:.72rem}
  .hero2 .player{position:relative;right:auto;bottom:auto;height:auto;width:min(86%,420px);
    margin:30px auto 0;display:block;filter:drop-shadow(0 26px 50px rgba(0,0,0,.8))}
  .hero2 .playbtn{position:absolute;right:auto;left:50%;bottom:auto;top:auto;margin:0;
    transform:translateX(-50%);width:64px;height:64px}
  .roster{position:relative;left:auto;bottom:auto;margin:30px 0 0;width:100%;max-width:none}
  .roster .pitch{width:92px}
  .roster .pitch b{font-size:1.4rem}
  .roster .info{padding:14px 16px}
  .roster .info b{font-size:1.05rem}
  .heroquote{display:none}
  .hero2 .scroll-hint{display:none}

  /* --- Sektionen & Typografie --- */
  .pad{padding:64px 0}
  .pad-sm{padding:44px 0}
  h1{font-size:clamp(2.1rem,9vw,2.9rem)}
  h2{font-size:clamp(1.7rem,7.4vw,2.3rem)}
  h3{font-size:clamp(1.15rem,4.6vw,1.4rem)}
  .lead{font-size:1rem}
  .label{letter-spacing:.18em;font-size:.7rem}
  .goldline{width:78px}

  /* --- Karten, Tabellen, Raster --- */
  .g2,.g3,.g4,.news-grid,.sp-grid,.foot-grid,.nl-inner,.next-inner,.trainbox,
  .gd,.fixture{grid-template-columns:1fr}
  .card,.sp,.ncard{padding:22px}
  .sp .price{font-size:1.7rem}
  .feature{min-height:260px}
  .feature h3{font-size:1.5rem}
  .rail-item{min-width:150px;height:62px;font-size:.86rem}
  .rail-track{gap:30px}
  .sponsor-rail::before,.sponsor-rail::after{width:60px}
  .standings-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .standings{min-width:560px}
  .quoteband{padding:28px 22px}
  .quoteband p{font-size:1.35rem}
  .next-side{padding-top:22px}
  .cd{gap:10px}
  .cd .u{min-width:62px}

  /* --- Buttons & Formulare (kein iOS-Zoom) --- */
  .btn{min-height:48px;padding:14px 22px;font-size:1rem}
  .btn-wide,.center .btn{width:100%;justify-content:center}
  input,select,textarea{font-size:16px!important;min-height:48px}
  .nl-form{flex-direction:column;gap:12px}
  .nl-form input,.nl-form .btn{width:100%}
  #toTop{right:14px;bottom:14px;width:46px;height:46px}
  .modal .body{padding:22px}
  footer.site{padding:52px 0 34px}
  .foot-bottom{flex-direction:column;gap:8px;text-align:center;align-items:center}
}
@media(max-width:400px){
  .hfront{font-size:clamp(3rem,18vw,4.2rem)}
  .hero2 .player{width:92%}
  .hero-badges{grid-template-columns:1fr 1fr;gap:14px}
  .roster .pitch{width:80px}
}

/* Off-Canvas-Menü im geschlossenen Zustand sicher ausblenden
   (verhindert Darstellung/Fokus außerhalb des Viewports) */
@media(max-width:1024px){
  nav.main{visibility:hidden;
    transition:transform .45s cubic-bezier(.2,.9,.25,1),visibility 0s linear .45s}
  nav.main.open{visibility:visible;
    transition:transform .45s cubic-bezier(.2,.9,.25,1),visibility 0s}
}

/* Header: Marke und Menü kollidieren auf schmaleren Desktops nicht mehr */
header.site .nav{flex-wrap:nowrap;min-width:0}
header.site .brand{flex:0 0 auto;min-width:0}
header.site .brand-txt{white-space:nowrap}
header.site nav.main{flex:1 1 auto;min-width:0;justify-content:center}
header.site nav.main a{white-space:nowrap}
header.site .nav-cta{flex:0 0 auto}
@media(max-width:1500px){header.site .brand-txt span{display:none}}
@media(max-width:1280px){
  header.site .nav{padding-left:clamp(24px,3vw,56px);padding-right:clamp(24px,3vw,56px)}
  header.site nav.main{gap:clamp(14px,1.7vw,26px)}
  header.site nav.main a{font-size:clamp(.82rem,1.05vw,.98rem);letter-spacing:.05em}
  header.site .nav-cta .btn{padding:12px 20px;font-size:.92rem}
}

/* Header-Entlastung auf mittleren Desktops (keine Kollision Marke/Menü) */
@media(min-width:821px) and (max-width:1440px){
  header.site .nav{padding-left:clamp(22px,3vw,54px);padding-right:clamp(22px,3vw,54px)}
  header.site .brand img{height:46px;width:auto}
  header.site .brand-txt b{font-size:1.12rem}
  header.site nav.main{gap:clamp(11px,1.35vw,22px)}
  header.site nav.main a{font-size:.93rem;letter-spacing:.045em}
  header.site .nav-cta>.btn-ghost{display:none}   /* Newsletter: Footer + Popup */
  header.site .nav-cta .btn{padding:12px 22px;font-size:.95rem}
}
@media(min-width:821px) and (max-width:1100px){
  header.site .brand img{height:42px}
  header.site nav.main a{font-size:.88rem}
}

/* ============================================================
   TABLET-FEINSCHLIFF (821–1100px) + Play-Button mobil in den Fluss
   ============================================================ */
@media(min-width:821px) and (max-width:1100px){
  .hero2{padding:150px 0 200px}
  .hcopy{max-width:100%}
  .hback{font-size:clamp(2rem,4.8vw,3.4rem)}
  .hfront{font-size:clamp(4rem,12vw,7.4rem)}
  .hback2{font-size:clamp(1.35rem,3.2vw,2.1rem)}
  .hero2 .player{height:min(72%,620px);right:clamp(8px,2vw,40px);bottom:clamp(20px,3vh,44px)}
  .roster{position:relative;left:auto;bottom:auto;margin-top:36px;max-width:520px}
  .heroquote{display:none}
  .hero2 .playbtn{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:22px 0 0}
  .g3{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .hero2 .playbtn{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;margin:20px auto 0}
  .hero2 .player{margin-bottom:0}
}

/* ============================================================
   MOBILE MENÜ V2 — echtes Overlay-Panel (fix + Scrim + Kopf/Fuß)
   ============================================================ */
.menu-head,.menu-foot{display:none}
.menu-links{display:flex;align-items:center;gap:26px}
.menu-links a i{display:none}
.burger span{transform-origin:center}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1024px){
  /* backdrop-filter am Header erzeugt sonst einen Bezugsrahmen für das fixe Panel */
  header.site,header.site.scrolled{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  header.site.scrolled{background:rgba(4,7,14,.96)}

  nav.main{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(360px,88vw);height:100dvh;
    z-index:1600;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:0;background:#070C18;border-left:1px solid var(--line);
    box-shadow:-30px 0 80px rgba(0,0,0,.75);overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;transform:translateX(104%);
    transition:transform .42s cubic-bezier(.2,.9,.25,1),visibility 0s linear .42s}
  nav.main.open{transform:none;visibility:visible;
    transition:transform .42s cubic-bezier(.2,.9,.25,1),visibility 0s}

  .menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:16px 18px;border-bottom:1px solid var(--line2);background:rgba(0,43,127,.22)}
  .menu-brand{display:flex;align-items:center;gap:12px}
  .menu-head img{height:36px;width:auto}
  .menu-head b{font-family:var(--f-display);font-size:1.05rem;text-transform:uppercase;color:#fff}
  .menu-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
    display:grid;place-items:center;font-size:1.6rem;line-height:1;color:#fff;transition:.25s}
  .menu-close:hover{background:var(--gold);color:var(--tinte);border-color:transparent}

  .menu-links{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:10px 12px;flex:1 1 auto}
  .menu-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;
    font-family:var(--f-display);font-size:1.45rem;letter-spacing:.02em;text-transform:uppercase;
    color:#fff;padding:15px 12px;border-radius:4px;border-bottom:1px solid rgba(63,111,181,.16);opacity:1}
  .menu-links a::after{display:none}
  .menu-links a i{display:block;font-style:normal;color:var(--stahlblau);font-size:1.1rem}
  .menu-links a.active{background:rgba(0,43,127,.42)}
  .menu-links a.active i{color:var(--gold)}
  .menu-links a:active{background:rgba(0,43,127,.55)}

  .menu-foot{display:grid;gap:10px;padding:16px 18px calc(22px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line2);background:rgba(0,43,127,.18)}
  .menu-foot .btn{width:100%;justify-content:center;min-height:48px}
  .menu-foot .nav-cd{display:flex;justify-content:center;margin-top:4px}

  .menu-scrim{position:fixed;inset:0;z-index:1500;background:rgba(4,7,14,.74);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;
    transition:opacity .35s}
  .menu-scrim.open{opacity:1;pointer-events:auto}
}

/* ============================================================
   MOBILE MENÜ V3 — Korrektur Stapelreihenfolge & Panelhöhe
   Ursache: Scrim (z-index 1500) lag ÜBER dem Panel, weil das Panel
   im Header-Stacking-Context (z-index 1000) liegt -> Panel wurde
   abgedunkelt/verwaschen dargestellt.
   ============================================================ */
@media(max-width:1024px){
  .menu-scrim{z-index:900}
  nav.main{top:0;bottom:0;height:auto;max-height:100vh;min-height:100vh}
  .menu-links{display:flex!important;flex-direction:column!important;
    align-items:stretch!important;gap:0!important}
  .menu-links a{display:flex!important;width:100%;justify-content:space-between!important}
  .menu-links a::after{display:none!important}
  .menu-foot{display:grid!important;grid-template-columns:1fr!important;gap:10px}
  .menu-foot .btn{width:100%!important}
}

/* ============================================================
   MOBILES MENÜ V4 — eigenes Overlay außerhalb des Headers
   (immun gegen Stacking-/Containing-Block-Effekte des Headers)
   ============================================================ */
.msheet{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(360px,88vw);height:100vh;
  display:flex;flex-direction:column;background:#070C18;border-left:1px solid var(--line);
  box-shadow:-30px 0 80px rgba(0,0,0,.8);z-index:2000;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(104%);visibility:hidden;
  transition:transform .42s cubic-bezier(.2,.9,.25,1),visibility 0s linear .42s}
.msheet.open{transform:none;visibility:visible;
  transition:transform .42s cubic-bezier(.2,.9,.25,1),visibility 0s}
.msheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line2);background:rgba(0,43,127,.25)}
.msheet-brand{display:flex;align-items:center;gap:12px}
.msheet-head img{height:38px;width:auto}
.msheet-head b{font-family:var(--f-display);font-size:1.1rem;text-transform:uppercase;
  letter-spacing:.03em;color:#fff}
.msheet-close{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:1.7rem;line-height:1;color:#fff;transition:.25s}
.msheet-close:hover{background:var(--gold);color:var(--tinte);border-color:transparent}
.msheet-links{display:flex;flex-direction:column;padding:8px 12px;flex:1 1 auto}
.msheet-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--f-display);font-weight:700;font-size:1.45rem;text-transform:uppercase;
  letter-spacing:.02em;color:#fff;padding:15px 12px;border-radius:4px;
  border-bottom:1px solid rgba(63,111,181,.16)}
.msheet-links a i{font-style:normal;color:var(--stahlblau);font-size:1.3rem}
.msheet-links a.active{background:rgba(0,43,127,.45)}
.msheet-links a.active i{color:var(--gold)}
.msheet-foot{display:grid;grid-template-columns:1fr;gap:10px;
  padding:16px 18px calc(22px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line2);background:rgba(0,43,127,.2)}
.msheet-foot .btn{width:100%;justify-content:center;min-height:48px}
.msheet-foot .nav-cd{display:flex;justify-content:center;margin-top:4px}
@media(min-width:1025px){.msheet,.menu-scrim{display:none!important}}
@media(max-width:1024px){
  header.site nav.main{display:none}
  .menu-scrim{z-index:1900}
  .menu-scrim.open{opacity:1;pointer-events:auto}
}

/* ============================================================
   HEADER-ENTZERRUNG DESKTOP — keine Kollision Marke/Menü/CTA
   Ursache: Summe aus Marke + 7 Links + Newsletter + CTA war
   breiter als der 1280px-Container -> Flex-Items überlappten.
   ============================================================ */
header.site .nav{gap:clamp(14px,2vw,40px)}
header.site nav.main{flex:1 1 auto;min-width:0;justify-content:center;
  gap:clamp(12px,1.5vw,26px);overflow:visible}
header.site nav.main a{font-size:clamp(.84rem,1.02vw,1.04rem);letter-spacing:.045em;padding:6px 0}
header.site .nav-cta{flex:0 0 auto;margin-left:auto}
header.site .nav-cta>.btn-ghost{display:none}      /* Newsletter nur in Footer + Popup */

/* Mittlere Desktops: Marke kompakter, Menü kleiner */
@media(min-width:1121px) and (max-width:1500px){
  header.site .brand img{height:44px}
  header.site .brand-txt b{font-size:1.06rem}
  header.site .brand-txt span{display:none}
  header.site .nav-cta .btn{padding:12px 20px;font-size:.94rem}
}
/* Bis 1120px: Burger statt gequetschter Links */
@media(max-width:1120px){
  header.site nav.main{display:none}
  header.site .burger{display:flex}
}
@media(min-width:1121px){
  .msheet,.menu-scrim{display:none!important}
}

/* Spieler darf den Header nicht überlagern (Kollision mit Countdown/CTA) */
@media(min-width:1121px){
  .hero2 .player{height:min(78%,760px);bottom:clamp(20px,3.5vh,48px)}
  header.site{background:linear-gradient(180deg,rgba(4,7,14,.72),rgba(4,7,14,0))}
  header.site.scrolled{background:rgba(4,7,14,.94)}
}

/* ============================================================
   SPONSOREN — Top-Partner-Kacheln, Wall of Fame, Unterstützer
   ============================================================ */
.sp-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.sp-tile{display:grid;gap:8px;align-content:center;min-height:132px;padding:22px;
  border:1px solid var(--line);border-radius:6px;background:linear-gradient(160deg,rgba(0,43,127,.30),rgba(4,7,14,.6));
  transition:.3s;text-align:center;justify-items:center}
.sp-tile:hover{border-color:var(--stahlblau);transform:translateY(-3px)}
.sp-tile b{font-family:var(--f-display);font-size:1.35rem;text-transform:uppercase;color:#fff;line-height:1.05}
.sp-tile small{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);font-weight:600}
.sp-tile img{max-height:56px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.92}
.sp-tile.gold{border-color:rgba(201,162,39,.55);background:linear-gradient(160deg,rgba(201,162,39,.16),rgba(4,7,14,.6))}
.sp-tile.gold small{color:var(--gold)}

.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px}
.wall-chip{display:grid;gap:2px;padding:12px 14px;border:1px dashed var(--line);border-radius:4px;
  background:rgba(4,7,14,.5)}
.wall-chip span{font-family:var(--f-display);font-size:.9rem;color:var(--txt3);line-height:1}
.wall-chip b{font-family:var(--f-display);font-size:1.05rem;text-transform:uppercase;color:var(--txt3);line-height:1.1}
.wall-chip.taken{border-style:solid;border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.1)}
.wall-chip.taken span{color:var(--gold)}
.wall-chip.taken b{color:#fff}
.wall-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.wall-count{display:flex;align-items:baseline;gap:12px}
.wall-count b{font-family:var(--f-display);font-size:2.4rem;color:var(--gold);line-height:1}
.wall-count span{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt2)}

.supp-chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.supp-chip{display:grid;gap:4px;padding:16px 18px;border:1px solid var(--line2);border-radius:4px;
  background:rgba(0,43,127,.16)}
.supp-chip b{font-family:var(--f-display);font-size:1.1rem;text-transform:uppercase;color:var(--eis)}
.supp-chip small{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stahlblau);font-weight:600}
.rail-item{flex-direction:column;gap:4px}
.rail-item small{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--txt3);font-weight:600}
.rail-item img{max-height:44px;width:auto;filter:brightness(0) invert(1);opacity:.9}
@media(max-width:640px){
  .sp-tiles{grid-template-columns:1fr 1fr;gap:12px}
  .sp-tile{min-height:112px;padding:16px}
  .sp-tile b{font-size:1.1rem}
  .wall{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .supp-chips{grid-template-columns:1fr}
  .wall-foot{justify-content:flex-start}
}

/* Sponsoren-Namensliste (schlicht) */
.sp-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;list-style:none}
.sp-names li{padding:14px 18px;border:1px solid var(--line2);border-radius:4px;background:rgba(4,7,14,.45);
  font-family:var(--f-display);font-size:1.15rem;text-transform:uppercase;color:var(--eis)}
@media(max-width:640px){.sp-names{grid-template-columns:1fr 1fr;gap:8px}.sp-names li{padding:12px 14px;font-size:1rem}}

/* Play-Button etwas vom Ball weg, ruhiger platziert */
@media(min-width:1101px){
  .hero2 .playbtn{right:min(46%,520px);bottom:36%}
}

/* ============================================================
   SPONSOREN — eine einzige Logo-Wand (frei anordenbar)
   ============================================================ */
.sp-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(14px,1.6vw,24px)}
.sp-logo{display:grid;align-content:center;justify-items:center;gap:10px;
  min-height:150px;padding:26px 20px;border:1px solid var(--line);border-radius:6px;
  background:linear-gradient(160deg,rgba(0,43,127,.26),rgba(4,7,14,.55));
  transition:.3s;text-align:center}
.sp-logo:hover{border-color:var(--stahlblau);transform:translateY(-3px)}
.sp-logo b{font-family:var(--f-display);font-size:1.4rem;text-transform:uppercase;color:#fff;line-height:1.05}
.sp-logo small{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--txt3);font-weight:600}
.sp-logo img{max-height:72px;max-width:100%;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.9}
.sp-logo.gold{border-color:rgba(201,162,39,.5);
  background:linear-gradient(160deg,rgba(201,162,39,.14),rgba(4,7,14,.55))}
.sp-logo.gold small{color:var(--gold)}
@media(max-width:640px){
  .sp-logos{grid-template-columns:1fr 1fr;gap:10px}
  .sp-logo{min-height:118px;padding:18px 14px}
  .sp-logo b{font-size:1.05rem}
  .sp-logo img{max-height:52px}
}