:root{
    --bg:#0a1122;--bg2:#0c1426;--surface:#111c33;--surface2:#16233d;
    --line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.16);
    --fg:#f3f6fc;--muted:#93a1bd;--muted2:#7d8bab;
    --accent:#EA0907;  /* Akzent = Wappenrot, nur fuer Details */
    --accent-text:#F5342F;--accent-soft:#FF9B98;--on-accent:#ffffff;  /* Text auf Rotflaechen = Weiss */
    --primary:#2f6fe0;--primary-deep:#1e5bc6;   /* Primär = Blau */
    --blue:#3a7bf0;
    --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;
    --r-sm:8px;--r-md:12px;--r-lg:18px;--r-pill:999px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Source Sans 3',system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{text-decoration:none;color:inherit}
  img{display:block;max-width:100%}
  .display{font-family:'Barlow Condensed',sans-serif;font-weight:800;line-height:.98;letter-spacing:.01em;text-transform:uppercase}
  .container{max-width:1160px;margin:0 auto;padding:0 24px}
  section{padding:var(--s7) 0}
  .eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:15px;color:var(--accent-text);margin-bottom:var(--s2);display:inline-flex;align-items:center;gap:12px}
  .eyebrow::before{content:"";width:28px;height:2px;background:currentColor;flex-shrink:0}
  svg{display:block}
  .ico{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .btn{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:16px;padding:11px 22px;border-radius:var(--r-sm);cursor:pointer;border:none;transition:transform .18s,filter .2s,background .2s,color .2s,border-color .2s;display:inline-flex;align-items:center;gap:8px;line-height:1}
  .btn-primary{background:var(--primary);color:#fff}
  .btn-primary:hover{transform:translateY(-2px);filter:brightness(1.07)}
  .btn-red{background:var(--accent);color:var(--on-accent)}
  .btn-red:hover{transform:translateY(-2px);filter:brightness(1.08)}
  .btn-outline{border:1.5px solid var(--line-strong);color:var(--fg);background:transparent}
  .btn-outline:hover{border-color:var(--accent);color:var(--accent-text)}
  .btn .ico{width:18px;height:18px}

  /* ---------- Topbar ---------- */
  .topbar{background:var(--bg2);border-bottom:1px solid var(--line);font-size:13.5px}
  .topbar .row{display:flex;align-items:center;justify-content:space-between;height:42px;gap:16px}
  .topbar .left{display:flex;align-items:center;gap:20px;color:var(--muted)}
  .topbar .left span{display:inline-flex;align-items:center;gap:7px}
  .topbar .left .ico{width:15px;height:15px;color:var(--accent-text)}
  .topbar .right{display:flex;align-items:center;gap:10px}
  .topbar .shop-link{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:var(--on-accent);font-weight:700;padding:6px 13px;border-radius:var(--r-pill);font-size:13px;letter-spacing:.02em;transition:filter .2s}
  .topbar .shop-link:hover{filter:brightness(1.1)}
  .topbar .shop-link .ico{width:15px;height:15px}
  .topbar .soc{display:inline-flex;gap:8px;color:var(--muted)}
  .topbar .soc a:hover{color:var(--accent-text)}
  .topbar .soc .ico{width:17px;height:17px}

  /* ---------- Header ---------- */
  header{position:sticky;top:0;z-index:50;background:rgba(10,17,34,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .bar{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
  .brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
  .brand img{width:46px;height:46px;object-fit:contain}
  .brand b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;letter-spacing:.02em;text-transform:uppercase;line-height:1}
  .brand span{display:block;font-size:11px;letter-spacing:.22em;color:var(--accent-text);font-weight:600;margin-top:3px}
  nav>ul{display:flex;gap:2px;list-style:none;align-items:center}
  nav>ul>li>a{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;letter-spacing:.04em;text-transform:uppercase;padding:9px 11px;border-radius:var(--r-sm);color:var(--fg);transition:color .2s,background .2s;cursor:pointer;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
  nav>ul>li>a:hover{color:var(--accent-text);background:rgba(255,255,255,.06)}
  nav>ul>li>a .ico{width:13px;height:13px;opacity:.7}
  .has-sub{position:relative}
  .submenu{position:absolute;top:100%;left:0;min-width:240px;margin-top:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:8px;display:flex;flex-direction:column;gap:1px;box-shadow:0 24px 60px -22px rgba(0,0,0,.75);z-index:60;opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .22s}
  /* invisible bridge closes the gap between trigger and menu so hover never drops */
  .submenu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .has-sub:hover .submenu,.has-sub:focus-within .submenu{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .16s ease,transform .16s ease,visibility 0s}
  .submenu a{padding:9px 12px;border-radius:var(--r-sm);font-size:15px;font-weight:600;color:var(--muted);transition:background .18s,color .18s}
  .submenu a:hover{background:rgba(255,255,255,.06);color:var(--fg)}
  .submenu .grp{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);padding:8px 12px 4px;font-weight:700}
  /* current page: underline mark on the top level, tinted row in submenus */
  nav>ul>li>a.active,nav>ul>li>a.active-parent{color:var(--accent-text);position:relative}
  nav>ul>li>a.active::after,nav>ul>li>a.active-parent::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:var(--accent);border-radius:2px}
  .submenu a.active{color:var(--fg);background:rgba(235,106,10,.14);font-weight:700}
  .mobile-menu a.active{color:var(--accent-text)}
  .nav-cta{display:flex;align-items:center;gap:8px;flex-shrink:0}
  .burger{display:none;background:none;border:none;color:var(--fg);cursor:pointer}

  /* ---------- Hero ---------- */
  .hero{min-height:calc(100vh - 72px);display:flex;align-items:center;position:relative;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 72% 18%,rgba(58,123,240,.22),transparent 60%),radial-gradient(70% 60% at 18% 92%,rgba(235,106,10,.16),transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg))}
  .hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 46px)}
  .hero .container{position:relative;z-index:2;width:100%}
  .hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s5);align-items:center}
  .hero .eyebrow{display:flex;align-items:center;gap:12px}
  .hero .eyebrow::before{content:"";width:38px;height:2px;background:var(--accent)}
  .hero h1{font-size:clamp(44px,6.4vw,84px);margin-bottom:var(--s3)}
  .hero h1 .red{color:var(--accent-text)}
  .hero .lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:470px;margin-bottom:var(--s5)}
  .hero .cta{display:flex;gap:var(--s2);flex-wrap:wrap}
  .hero-badge{display:flex;align-items:center;justify-content:center}
  .hero-badge .ring{width:min(540px,44vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
  .hero-badge img{width:100%;filter:drop-shadow(0 24px 60px rgba(0,0,0,.55))}
  .scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;color:var(--muted2);animation:bob 1.8s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}
  .fade{opacity:0;transform:translateY(20px);animation:fade .7s cubic-bezier(.2,.7,.3,1) forwards}
  .d1{animation-delay:.05s}.d2{animation-delay:.16s}.d3{animation-delay:.28s}.d4{animation-delay:.4s}.d5{animation-delay:.52s}
  @keyframes fade{to{opacity:1;transform:none}}

  /* ---------- Section head ---------- */
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5);flex-wrap:wrap}
  .sec-head h2{font-size:clamp(30px,4.4vw,48px)}
  .sec-head .eyebrow{margin-bottom:10px}

  /* ---------- Abteilungen ---------- */
  .depts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
  .dept{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s3);transition:transform .2s,border-color .2s,background .2s;cursor:pointer}
  .dept:hover{transform:translateY(-6px);border-color:var(--accent);background:var(--surface2)}
  .dept .badge{width:52px;height:52px;border-radius:var(--r-md);background:rgba(235,106,10,.15);color:var(--accent-text);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s3)}
  .dept .badge svg{width:26px;height:26px}
  .dept h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:23px;letter-spacing:.02em;margin-bottom:6px}
  .dept p{color:var(--muted);font-size:15px}

  /* ---------- Stats ---------- */
  .stats-wrap{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .stats{display:grid;grid-template-columns:repeat(4,1fr)}
  .stat{text-align:center;padding:var(--s3) var(--s2);border-right:1px solid var(--line)}
  .stat:last-child{border-right:none}
  .stat .num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(36px,5vw,54px);line-height:1}
  .stat .num em{color:var(--accent-text);font-style:normal}
  .stat .lbl{color:var(--muted);font-size:14px;font-weight:600;letter-spacing:.04em;margin-top:8px;text-transform:uppercase}

  /* ---------- News ---------- */
  .rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:var(--s3);overflow-x:auto;padding-bottom:var(--s2);scroll-snap-type:x mandatory}
  /* Bei ein oder zwei Beiträgen würde 1fr die Kachel über die volle Breite ziehen.
     Dann feste Kachelbreite und linksbündig – sonst wirkt ein Beitrag wie ein Banner. */
  .rail.rail-wenig{grid-auto-columns:minmax(300px,400px);justify-content:start}
  .rail::-webkit-scrollbar{height:6px}
  .rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
  .ncard{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
  /* Nur Kacheln mit echtem Ziel reagieren – sonst verspricht der Hover etwas, das nicht passiert. */
  a.ncard{cursor:pointer;text-decoration:none;color:inherit;display:flex}
  a.ncard:hover{transform:translateY(-5px);border-color:var(--accent)}
  a.ncard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .ncard .img{aspect-ratio:16/10;position:relative;background:linear-gradient(135deg,#274b8c,#0e1e3c);overflow:hidden}
  .ncard:nth-child(2) .img{background:linear-gradient(135deg,#8a1410,#3a0705)}
  .ncard:nth-child(4) .img{background:linear-gradient(135deg,#8a1410,#3a0705)}
  .ncard .img::after{content:"";position:absolute;right:-14%;bottom:-16%;width:62%;height:118%;background:url(logo.svg) center/contain no-repeat;opacity:.16;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));transition:opacity .2s,transform .2s}
  a.ncard:hover .img::after{opacity:.24;transform:scale(1.05)}
  .ncard .tag{position:absolute;left:14px;top:14px;background:var(--bg);color:var(--accent-text);font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:12px;padding:5px 11px;border-radius:var(--r-pill)}
  .ncard .in{padding:var(--s3);display:flex;flex-direction:column;flex:1}
  .ncard .date{color:var(--accent-text);font-weight:700;font-size:14px;margin-bottom:8px}
  .ncard h3{font-size:19px;font-weight:700;line-height:1.3;margin-bottom:10px}
  .ncard p{color:var(--muted);font-size:15px;flex:1}
  .ncard .more{margin-top:var(--s2);display:inline-flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:15px}
  .ncard .more .ico{width:16px;height:16px;color:var(--accent-text)}

  /* ---------- Teams ---------- */
  .teams-block{margin-bottom:var(--s5)}
  .teams-block h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:.03em;margin-bottom:var(--s3);display:flex;align-items:center;gap:10px}
  .teams-block h3 .dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
  .chips{display:flex;flex-wrap:wrap;gap:12px}
  .chip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 18px;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:17px;transition:border-color .2s,background .2s,transform .15s;cursor:pointer;display:flex;align-items:center;gap:9px}
  .chip small{font-family:'Source Sans 3';font-weight:600;text-transform:none;letter-spacing:0;font-size:12px;color:var(--muted)}
  .chip:hover{border-color:var(--accent);background:var(--surface2);transform:translateY(-2px)}
  .coord{color:var(--muted);font-size:15px;margin-top:var(--s3)}
  .coord b{color:var(--fg)}

  /* ---------- Shop band (prominent) ---------- */
  .shop{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--primary-deep),var(--primary));border-radius:var(--r-lg)}
  .shop::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 40px)}
  .shop .in{position:relative;display:flex;align-items:center;gap:var(--s5);padding:var(--s6) var(--s5);flex-wrap:wrap}
  .shop .cart{width:92px;height:92px;border-radius:var(--r-lg);background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .shop .cart .ico{width:46px;height:46px;color:#fff}
  .shop .txt{flex:1;min-width:260px;color:#fff}
  .shop .txt .eyebrow{color:rgba(255,255,255,.85);margin-bottom:8px}
  .shop .txt h2{font-size:clamp(28px,4vw,44px);margin-bottom:8px}
  .shop .txt p{font-size:17px;color:#fff;max-width:520px}
  .shop .btn-white{background:#fff;color:var(--primary-deep)}
  .shop .btn-white:hover{transform:translateY(-2px);filter:brightness(1.02)}

  /* ---------- Sponsoren (prominent) ---------- */
  .sponsors{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .sp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
  .sp{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);height:96px;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;transition:border-color .2s,transform .15s;cursor:pointer}
  .sp img{max-height:100%;max-width:100%;object-fit:contain}
  .sp:hover{border-color:var(--accent);color:var(--fg);transform:translateY(-3px)}
  .sp-cta{margin-top:var(--s5);text-align:center}
  .sp-cta p{color:var(--muted);font-size:17px;margin-bottom:var(--s3)}

  /* ---------- Split cards (Förderverein / Vereinsheim / Talent) ---------- */
  .split{display:grid;grid-template-columns:1fr 1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .split .txt{padding:var(--s6)}
  .split h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:var(--s3)}
  .split p{color:var(--muted);font-size:17px;margin-bottom:var(--s4);max-width:440px}
  .split .links{display:flex;flex-wrap:wrap;gap:12px}
  .split .pic{position:relative;background:linear-gradient(135deg,#274b8c,#0a1122);min-height:320px;display:flex;align-items:center;justify-content:center;padding:var(--s4);text-align:center}
  .split .pic.red{background:linear-gradient(135deg,#7a3d10,#0a1122)}
  .split .pic .k .display{font-size:26px;color:#fff}
  .split .pic .k .display em{color:var(--accent-soft);font-style:normal;display:block;font-size:42px;margin-top:6px}
  .hours{list-style:none;color:var(--muted);font-size:16px}
  .hours li{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-bottom:1px solid var(--line);max-width:340px}
  .hours li b{color:var(--fg);font-weight:600}
  .hours li.closed span{color:var(--muted2)}

  /* ---------- Downloads ---------- */
  .dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .dl{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;transition:border-color .2s,transform .15s;cursor:pointer}
  .dl:hover{border-color:var(--accent);transform:translateY(-2px)}
  .dl .ico-box{width:40px;height:40px;border-radius:var(--r-sm);background:rgba(47,111,224,.16);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .dl .ico-box .ico{width:20px;height:20px}
  .dl b{font-weight:700;font-size:16px}
  .dl small{display:block;color:var(--muted);font-size:13px;margin-top:2px}

  /* ---------- Kontakt ---------- */
  .kontakt{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
  .k-info{display:flex;flex-direction:column;gap:var(--s3)}
  .k-item{display:flex;gap:14px}
  .k-item .ico-box{width:44px;height:44px;border-radius:var(--r-md);background:rgba(235,106,10,.14);color:var(--accent-text);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .k-item h3,.k-item h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:16px;margin-bottom:3px}
  .k-item p{color:var(--muted);font-size:16px}
  .k-map{background:var(--surface2);border:1px solid var(--line);border-radius:var(--r-lg);min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted2);text-align:center;padding:var(--s4)}
  .k-map .ico{width:44px;height:44px;color:var(--accent-text)}

  /* ---------- Footer ---------- */
  footer{background:var(--bg2);border-top:1px solid var(--line);padding:var(--s6) 0 var(--s4)}
  .f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:var(--s4)}
  .f-brand img{width:58px;height:58px;margin-bottom:var(--s2)}
  .f-brand b{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:19px;display:block;line-height:1.05}
  .f-brand p{color:var(--muted);font-size:14.5px;margin-top:10px}
  .f-brand .soc{display:flex;gap:10px;margin-top:var(--s2)}
  .f-brand .soc a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .2s}
  .f-brand .soc a:hover{border-color:var(--accent);color:var(--accent-text)}
  .f-brand .soc .ico{width:18px;height:18px}
  .f-col h3,.f-col h4{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);font-size:14px;margin-bottom:var(--s2)}
  .f-col a{display:block;color:var(--muted);font-size:14.5px;margin-bottom:9px;transition:color .2s}
  .f-col a:hover{color:var(--fg)}
  .f-bottom{border-top:1px solid var(--line);margin-top:var(--s5);padding-top:var(--s3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:var(--muted2);font-size:13px}

  /* ---------- Spiele / FuPa ---------- */
  .matches{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s3)}
  .next-match{background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);position:relative;overflow:hidden}
  .next-match::after{content:"";position:absolute;inset:0;opacity:.05;background-image:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 40px);pointer-events:none}
  .nm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s4);position:relative;gap:12px;flex-wrap:wrap}
  .nm-comp{font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-text);font-size:15px}
  .nm-when-tag{font-size:13px;color:var(--fg);border:1px solid var(--line-strong);padding:4px 12px;border-radius:var(--r-pill);font-weight:600}
  .nm-teams{display:flex;align-items:center;justify-content:center;gap:var(--s4);position:relative}
  .nm-team{flex:1;text-align:center}
  .nm-team img{width:78px;height:78px;margin:0 auto 10px;object-fit:contain}
  .nm-team .ph{width:78px;height:78px;margin:0 auto 10px;border-radius:50%;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted2);font-family:'Barlow Condensed';font-weight:800;font-size:26px}
  .nm-team b{font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;font-size:18px;display:block;line-height:1.05}
  .nm-vs{font-family:'Barlow Condensed';font-weight:800;font-size:26px;color:var(--muted2)}
  .nm-when{text-align:center;margin-top:var(--s4);color:var(--muted);position:relative;font-size:15px}
  .nm-when b{color:var(--fg);font-size:18px;font-family:'Barlow Condensed';letter-spacing:.03em;display:block;margin-bottom:2px}
  .match-list{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3);display:flex;flex-direction:column}
  .match-list h3,.match-list h4{font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:19px;padding:6px 8px var(--s2)}
  .mrow{display:flex;align-items:center;gap:14px;padding:13px 8px;border-top:1px solid var(--line)}
  .mrow .d{font-family:'Barlow Condensed';font-weight:700;color:var(--accent-text);font-size:14px;width:50px;flex-shrink:0;text-align:center;line-height:1.15}
  .mrow .t{font-size:15.5px;font-weight:600;flex:1}
  .mrow .t small{display:block;color:var(--muted2);font-size:12.5px;font-weight:500}
  .match-list .allfupa{margin-top:auto;padding-top:var(--s3)}
  .fupa-note{margin-top:var(--s3);font-size:13px;color:var(--muted2);display:flex;align-items:flex-start;gap:9px;line-height:1.4}
  .fupa-note b{color:var(--accent-text)}
  .fupa-note .ico{width:16px;height:16px;color:var(--accent-text);flex-shrink:0;margin-top:2px}

  /* ---------- Live-Slot: Platzhalter fuer das FuPa-Widget ----------
     Rahmen markiert den Bereich, der spaeter live aus FuPa kommt.
     Beim Einbau des echten Widgets bleibt der Rahmen, nur .live-slot-body
     wird durch den Embed-Code ersetzt. */
  .live-slot{border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
  .live-slot-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:13px 20px;background:var(--surface2);border-bottom:1px solid var(--line)}
  .live-slot-bar .live-dot{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.16);flex-shrink:0;animation:livepulse 2.2s ease-in-out infinite}
  @keyframes livepulse{0%,100%{box-shadow:0 0 0 3px rgba(74,222,128,.14)}50%{box-shadow:0 0 0 7px rgba(74,222,128,.05)}}
  @media(prefers-reduced-motion:reduce){.live-slot-bar .live-dot{animation:none}}
  .live-slot-bar b{font-family:'Barlow Condensed',sans-serif;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg)}
  .live-slot-bar span.txt{font-size:14px;color:var(--muted);line-height:1.4;flex:1;min-width:220px}
  .live-slot-tag{margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-soft);border:1px solid rgba(235,106,10,.45);border-radius:var(--r-pill);padding:4px 11px;white-space:nowrap}
  .live-slot-body{padding:var(--s3)}
  /* Team-Umschalter ueber dem Slot */
  .fupa-tabs{display:flex;gap:8px;margin-top:var(--s3);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .fupa-tabs::-webkit-scrollbar{display:none}
  .fupa-tab{flex:0 0 auto;font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:9px 18px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
  .fupa-tab:hover{color:var(--fg);border-color:var(--muted2)}
  .fupa-tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
  .fupa-swipe{display:none;margin-top:8px;font-size:12px;color:var(--muted2)}
  @media(max-width:700px){.fupa-swipe{display:block}}
  .fupa-tabs+.fupa-swipe+.live-slot,.fupa-tabs+.live-slot{margin-top:var(--s3)}
  /* Scrollbereich: begrenzt die Hoehe wie beim FuPa-Widget-Einbau */
  .fupa-scroll{max-height:600px;overflow-y:auto;overscroll-behavior:contain}
  .fupa-panel[hidden]{display:none}
  .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .live-slot-foot{display:flex;align-items:center;gap:9px;padding:12px 20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted2);line-height:1.4}
  .live-slot-foot .ico{width:16px;height:16px;color:var(--accent-text);flex-shrink:0}
  @media(max-width:560px){
    .live-slot-bar{padding:12px 14px;gap:9px}
    .live-slot-tag{margin-left:0}
    .live-slot-body,.live-slot-foot{padding-left:14px;padding-right:14px}
  }

  /* ---------- Sponsor carousel ---------- */
  /* Bricht kontrolliert aus dem Container aus: max. 3 cm je Seite,
     immer begrenzt auf den tatsaechlich freien Rand (min. 16px Luft). */
  .marquee{--bleed:min(113px,max(0px,calc((100vw - 1112px) / 2 - 16px)));
    margin-inline:calc(var(--bleed) * -1);
    overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .marquee+.marquee{margin-top:18px}
  .marquee .track{display:flex;gap:18px;width:max-content;animation:scroll 55s linear infinite}
  .marquee:hover .track{animation-play-state:paused}
  .marquee.rev .track{animation-duration:64s;animation-direction:reverse}
  @keyframes scroll{to{transform:translateX(calc(-50% - 9px))}}
  .marquee .sp{flex:0 0 200px}
  @media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}

  .proto{background:rgba(220,38,38,.1);border-bottom:1px solid rgba(220,38,38,.3);color:#ff9ba0;text-align:center;font-size:13px;font-weight:600;padding:7px}

  @media(max-width:1024px){
    .depts{grid-template-columns:repeat(2,1fr)}
    .sp-grid{grid-template-columns:repeat(4,1fr)}
    .dl-grid{grid-template-columns:repeat(2,1fr)}
    .f-top{grid-template-columns:1fr 1fr 1fr}
  }
  @media(max-width:820px){
    nav,.topbar .left span.hide{display:none}
    .nav-cta .btn{display:none}
    .burger{display:block}
    .hero-grid{grid-template-columns:1fr;gap:var(--s5)}
    .hero-badge{order:-1;justify-content:flex-start}
    .hero-badge .ring{width:180px}
    .stats{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(2){border-right:none}
    .split,.kontakt,.matches{grid-template-columns:1fr}
    .sp-grid{grid-template-columns:repeat(2,1fr)}
    .f-top{grid-template-columns:1fr 1fr}
    .shop .in{padding:var(--s5) var(--s4)}
  }

/* ============ SUBPAGES ============ */
.subhero{position:relative;overflow:hidden;min-height:calc(100vh - 72px);display:flex;align-items:center;border-bottom:1px solid var(--line)}
.subhero::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 74% 16%,rgba(58,123,240,.26),transparent 60%),radial-gradient(72% 70% at 16% 96%,rgba(235,106,10,.20),transparent 60%),repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 1px,transparent 1px 46px),linear-gradient(180deg,var(--bg2),var(--bg))}
.subhero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s5);align-items:center;position:relative;z-index:2;width:100%}
.subhero .subhero-text{min-width:0}
.subhero .container{position:relative;z-index:2}
.subhero h1{font-size:clamp(38px,6vw,72px)}
.subhero h1 .red{color:var(--accent)}
.subhero .sub{color:var(--muted);font-size:clamp(17px,2vw,20px);max-width:640px;margin-top:var(--s3)}
.breadcrumb{display:flex;gap:8px;align-items:center;color:var(--muted2);font-size:14px;margin-bottom:var(--s3);flex-wrap:wrap}
.breadcrumb a:hover{color:var(--accent-text)}
.breadcrumb .sep{opacity:.5}
.prose{max-width:760px}
.prose h2{font-size:clamp(26px,3.4vw,38px);margin:var(--s5) 0 var(--s2)}
.prose h3{font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:22px;margin:var(--s4) 0 var(--s1)}
.prose p{color:var(--muted);font-size:17px;margin-bottom:var(--s2);line-height:1.65}
.prose ul{color:var(--muted);font-size:17px;margin:0 0 var(--s2) 20px;line-height:1.6}
.prose li{margin-bottom:6px}
.prose strong{color:var(--fg)}
.prose a{color:var(--blue)}
.layout{display:grid;grid-template-columns:1fr 320px;gap:var(--s6);align-items:start}
/* inside the narrow two-column layout, h2 acts as a subhead, not a section title */
.layout .prose h2{font-size:clamp(22px,2.5vw,28px);margin:var(--s4) 0 10px}
.layout .prose>.lede+h2{margin-top:var(--s5)}
.aside{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);position:sticky;top:130px}
.aside h3,.aside h4{font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;font-size:18px;margin-bottom:var(--s2)}
.aside .row{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--muted);font-size:15px}
.aside .row:first-of-type{border-top:none}
.aside .row .ico{width:18px;height:18px;color:var(--accent-text);flex-shrink:0;margin-top:3px}
.aside .row>div{min-width:0}
.aside .row b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;color:var(--accent-text);margin-bottom:2px}
.aside .row span{display:block;color:var(--fg);font-size:15px;line-height:1.45}
.aside .btn{width:100%;justify-content:center;margin-top:var(--s3)}
.aside .hours li{max-width:none;padding:11px 0;font-size:15px}
.aside .hours li:first-child{padding-top:0}
.aside .hours li:last-child{border-bottom:none}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.card-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);transition:border-color .2s,transform .15s}
.card-item:hover{border-color:var(--accent);transform:translateY(-4px)}
.card-item .badge{width:48px;height:48px;border-radius:var(--r-md);background:rgba(235,106,10,.14);color:var(--accent-text);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s3)}
.card-item .badge .ico{width:24px;height:24px}
.card-item h3{font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;font-size:21px;margin-bottom:8px}
.card-item p{color:var(--muted);font-size:15px;line-height:1.5}
.person-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.person{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4);text-align:center}
.person .av{width:84px;height:84px;border-radius:50%;margin:0 auto var(--s2);background:linear-gradient(135deg,#274b8c,#0e1e3c);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:800;font-size:30px;color:#fff}
.person b{font-size:18px;display:block}
.person .role{color:var(--accent-text);font-size:14px;font-weight:600;margin-top:2px}
.person .contact{color:var(--muted);font-size:14px;margin-top:8px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
table.tbl{width:100%;border-collapse:collapse;min-width:480px}
table.tbl th,table.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);font-size:15px}
table.tbl th{font-family:'Barlow Condensed';text-transform:uppercase;letter-spacing:.04em;color:var(--accent-text);font-size:14px}
table.tbl td{color:var(--muted)}
table.tbl tr:last-child td{border-bottom:none}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery .ph{aspect-ratio:4/3;border-radius:var(--r-md);background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted2)}
.gallery .ph .ico{width:30px;height:30px}
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.form{display:grid;gap:var(--s2)}
.form .frow{display:grid;gap:var(--s2);grid-template-columns:1fr 1fr}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;color:var(--fg);font:inherit;font-size:15px}
.field input:focus,.field textarea:focus{outline:2px solid var(--primary);border-color:transparent}
.field textarea{min-height:130px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.check input{width:18px;height:18px;margin-top:2px;flex-shrink:0}
.check a{color:var(--blue)}
.field label .req{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--muted2);margin-left:6px}
/* error text stays hidden until the field is actually marked invalid */
.err{display:none;color:var(--accent-text);font-size:13.5px;margin-top:7px;line-height:1.4}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid textarea{border-color:var(--accent)}
.field.invalid input:focus,.field.invalid textarea:focus{outline-color:var(--accent)}
.form-status{font-size:14.5px;margin-top:var(--s1);min-height:1.4em}
.form-status.ok{color:#7fd6a2}
.form-status.bad{color:var(--accent-text)}
.form-note{color:var(--muted2);font-size:13px;margin-top:var(--s2)}
.cta-band{background:linear-gradient(120deg,var(--primary-deep),var(--primary));border-radius:var(--r-lg);padding:var(--s6) var(--s5);text-align:center;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 40px)}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(28px,4.4vw,46px);color:#fff;margin-bottom:10px}
.cta-band p{color:#fff;font-size:18px;margin-bottom:var(--s4);max-width:560px;margin-left:auto;margin-right:auto}
.cta-band .btn-white{background:#fff;color:var(--primary-deep)}
.cta-band .btn-white:hover{transform:translateY(-2px);filter:brightness(1.02)}
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.pkg{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4)}
.pkg.feat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pkg .tier{font-family:'Barlow Condensed';font-weight:800;text-transform:uppercase;font-size:22px;margin-bottom:6px}
.pkg .price{font-family:'Barlow Condensed';font-weight:800;font-size:32px;color:var(--accent-text);margin-bottom:var(--s2)}
.pkg ul{list-style:none;color:var(--muted);font-size:15px}
.pkg ul li{padding:8px 0;border-top:1px solid var(--line);display:flex;gap:8px}
.pkg ul li .ico{width:16px;height:16px;color:var(--accent-text);flex-shrink:0;margin-top:3px}
.section-tight{padding:var(--s6) 0}
@media(max-width:900px){.layout{grid-template-columns:1fr}.aside{position:static}.cards,.cards.four,.person-grid,.pkg-grid{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}.form .frow{grid-template-columns:1fr}}

/* ============ MOBILE MENU ============ */
.mobile-menu{position:fixed;inset:0;z-index:100;background:var(--bg);padding:76px 24px 48px;overflow-y:auto;transform:translateY(-100%);transition:transform .32s cubic-bezier(.2,.7,.3,1);display:flex;flex-direction:column}
body.menu-open{overflow:hidden}
body.menu-open .mobile-menu{transform:none}
.mobile-menu a{padding:15px 6px;font-family:'Barlow Condensed';font-weight:700;text-transform:uppercase;font-size:21px;letter-spacing:.02em;border-bottom:1px solid var(--line);color:var(--fg)}
.mobile-menu a:hover{color:var(--accent-text)}
.mobile-menu .grp{color:var(--accent-text);font-size:13px;letter-spacing:.1em;padding:18px 6px 4px;border:none}
.m-close{display:none;position:fixed;top:16px;right:20px;z-index:101;background:none;border:none;color:var(--fg);cursor:pointer}
body.menu-open .m-close{display:block}
.m-close .ico{width:30px;height:30px}

/* ============ SOCIAL MEDIA ============ */
.marquee .sp{flex:0 0 247px;height:114px;padding:20px}
@media(max-width:900px){}

/* ============ STATS HIGHLIGHT BAND ============ */
.stats-band{background:linear-gradient(120deg,var(--primary-deep),var(--primary));position:relative;overflow:hidden;padding:var(--s2) 0}
.stats-band .s .ico{width:22px;height:22px;color:rgba(255,255,255,.65);margin:0 auto 6px}
.stats-band::after{content:"";position:absolute;inset:0;opacity:.1;background-image:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 42px);pointer-events:none}
.stats-band .container{position:relative}
.stats-band .eyebrow{color:rgba(255,255,255,.85);text-align:center;margin-bottom:var(--s4)}
.stats-band .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stats-band .s{text-align:center;padding:6px 16px;border-right:1px solid rgba(255,255,255,.22)}
.stats-band .s:last-child{border-right:none}
.stats-band .n{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(26px,3.1vw,38px);color:#fff;line-height:1}
.stats-band .n em{font-style:normal;opacity:.85}
.stats-band .l{color:rgba(255,255,255,.9);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13.5px;margin-top:5px}
@media(max-width:820px){.stats-band .grid{grid-template-columns:repeat(2,1fr);gap:32px 0}.stats-band .s{border-right:none}}

/* ============ SOCIAL MEDIA CARDS ============ */
.sm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:var(--s4);align-items:start}
.sm-col{display:flex;flex-direction:column;gap:16px}
.sm-card,.sm-btn{flex:0 0 auto}
.sm-card{border-radius:var(--r-lg);border:2px solid transparent;overflow:hidden}
.sm-card.sm-ig{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#833ab4,#e1306c,#fcb045) border-box}
.sm-card.fb{background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#1877f2,#0a52c9) border-box}
.sm-top{display:flex;align-items:center;gap:16px;padding:22px 24px}
.sm-logo{width:54px;height:54px;object-fit:contain;flex-shrink:0}
.sm-name b{font-size:18px;display:block;line-height:1.2}
.sm-name .sub{color:var(--muted);font-size:15px}
.sm-stats{border-top:1px solid var(--line);padding:14px 24px;display:flex;gap:26px;font-size:15px;color:var(--muted)}
.sm-stats b{color:var(--fg);font-weight:700}
.sm-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;border-radius:var(--r-md);font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:17px;color:#fff;transition:transform .18s,filter .2s}
.sm-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.sm-btn.sm-ig{background:linear-gradient(90deg,#833ab4,#c13584,#cc2a5d)}
.sm-btn.fb{background:#1560c4}
.sm-btn .ico{width:18px;height:18px}
@media(max-width:820px){.sm-grid{grid-template-columns:1fr}}

/* ============ TIMELINE ============ */
/* Alternating both-sided timeline: one continuous spine, items left/right of it,
   so a 700px-tall block uses the full column instead of clinging to the left edge. */
.timeline{position:relative;margin-top:var(--s5)}
.timeline::before{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,var(--accent),var(--primary));border-radius:2px}
.tl-item{position:relative;width:calc(50% - 46px);padding-bottom:var(--s4)}
.tl-item:last-child{padding-bottom:0}
.tl-item:nth-child(odd){text-align:right}
.tl-item:nth-child(even){margin-left:auto}
/* node sits on the spine, on whichever side the item is */
.tl-item::before{content:"";position:absolute;top:4px;width:16px;height:16px;border-radius:50%;background:var(--bg);border:3px solid var(--accent);box-shadow:0 0 0 4px rgba(235,106,10,.12);z-index:1}
.tl-item:nth-child(odd)::before{right:-54px}
.tl-item:nth-child(even)::before{left:-54px}
/* short connector from the item to the spine */
.tl-item::after{content:"";position:absolute;top:11px;width:30px;height:2px;background:var(--line-strong)}
.tl-item:nth-child(odd)::after{right:-38px}
.tl-item:nth-child(even)::after{left:-38px}
.tl-item .yr{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(22px,2.6vw,30px);color:var(--accent-text);letter-spacing:.02em;line-height:1.05}
.tl-item .tx{color:var(--muted);font-size:16px;line-height:1.55;margin-top:5px}
@media(max-width:820px){
  .timeline::before{left:9px;transform:none}
  .tl-item{width:100%;padding:0 0 28px 42px}
  .tl-item:nth-child(odd){text-align:left}
  .tl-item:nth-child(even){margin-left:0}
  .tl-item:nth-child(odd)::before,.tl-item:nth-child(even)::before{left:2px;right:auto}
  .tl-item::after{display:none}
}
@media(max-width:820px){.subhero{min-height:auto;padding:72px 0 56px}.subhero-grid{grid-template-columns:1fr}.subhero .hero-badge{display:none}}

/* ============ STANDINGS + RESULTS (FuPa) ============ */
.standings{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:start}
table.tbl th.c,table.tbl td.c{text-align:center}
table.tbl tr.me{background:rgba(47,111,224,.14)}
table.tbl tr.me td{color:var(--fg);font-weight:700}
table.tbl td .club{display:flex;align-items:center;gap:9px}
table.tbl td .club img{width:20px;height:20px;object-fit:contain}
.res{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3)}
.res h3,.res h4{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:19px;padding:4px 6px var(--s2)}
.res-row{display:flex;align-items:center;gap:12px;padding:12px 6px;border-top:1px solid var(--line);font-size:15px}
.res-row .rd{color:var(--muted2);font-size:13px;width:56px;flex-shrink:0;line-height:1.15}
.res-row .rt{flex:1;font-weight:600}
.res-row .rt small{display:block;color:var(--muted2);font-size:12.5px;font-weight:500}
.res-row .rs{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;padding:4px 11px;border-radius:6px;background:var(--surface2);letter-spacing:.02em}
.res-row .rs.w{background:rgba(47,111,224,.22);color:#8fb6ff}
.res-row .rs.d{background:rgba(255,255,255,.09);color:var(--muted)}
.res-row .rs.l{background:rgba(220,38,38,.16);color:#ff9ba0}
@media(max-width:820px){.standings{grid-template-columns:1fr}}

.subhero .cta{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4)}

/* ============ ACCESSIBILITY ============ */
/* keyboard users need to see where they are; mouse users never see this */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--on-accent);font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:12px 20px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .fade{opacity:1;transform:none}
}

/* ============ SECTION RHYTHM ============ */
/* alternating band so pages stop reading as one flat stack of equal boxes */
.band{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-tight{padding:var(--s6) 0}
.sec-wide{padding:calc(var(--s7) + var(--s4)) 0}
/* .prose p is more specific, so the lede needs the nested selector to survive inside prose */
.lede,.prose .lede{font-size:clamp(19px,2.3vw,24px);color:var(--fg);max-width:720px;line-height:1.45;font-weight:400;margin-bottom:var(--s3)}
.lede b{font-weight:700}

/* ============ LINK ROW (compact hand-off to another page) ============ */
/* a one-sentence teaser does not deserve a full section of empty space */
.linkrow{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);transition:border-color .2s}
.linkrow:hover{border-color:var(--accent)}
.linkrow p{color:var(--muted);font-size:16.5px;max-width:660px;line-height:1.55;margin:0}
.linkrow p b{color:var(--fg)}
.linkrow .btn{flex-shrink:0}
.note{display:flex;align-items:flex-start;gap:10px;color:var(--muted2);font-size:14px;line-height:1.5;max-width:720px;margin:var(--s4) auto 0;justify-content:center;text-align:center}
.note b{color:var(--fg)}

/* ============ MULTI-COLUMN PROSE ============ */
/* narrative text that would otherwise sit as a tall narrow slab in a wide container */
.cols{column-count:2;column-gap:var(--s6);margin-top:var(--s4)}
.cols p{color:var(--muted);font-size:16.5px;line-height:1.62;margin-bottom:var(--s2)}
.cols p:last-child{margin-bottom:0}
.cols strong{color:var(--fg)}
.cols>*:first-child{margin-top:0}
@media(max-width:820px){.cols{column-count:1}}

/* ============ STEP FLOW (numbered, no cards) ============ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:var(--s5);counter-reset:st}
.steps.three{grid-template-columns:repeat(3,1fr)}
/* wrapping variant: dividers must reset per row, not run across the wrap */
.steps.wrap3{grid-template-columns:repeat(3,1fr);row-gap:var(--s5)}
.steps.wrap3 .step:nth-child(3n+1){border-left:none;padding-left:0}
.steps.wrap3 .step:not(:nth-child(3n+1)){border-left:1px solid var(--line);padding-left:var(--s3)}
.step{position:relative;padding:0 var(--s3) 0 0}
.step+.step{padding-left:var(--s3);border-left:1px solid var(--line)}
.step .n{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(46px,5.6vw,68px);line-height:.9;color:var(--accent-text);opacity:.9;letter-spacing:-.02em}
.step h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:20px;letter-spacing:.02em;margin:var(--s2) 0 8px}
.step p{color:var(--muted);font-size:15.5px;line-height:1.55}
@media(max-width:900px){.steps,.steps.three,.steps.wrap3{grid-template-columns:1fr 1fr}.steps.wrap3 .step:nth-child(3n+1){border-left:1px solid var(--line);padding-left:var(--s3)}.steps.wrap3 .step:nth-child(odd){border-left:none;padding-left:0}.step{padding:0 var(--s2) var(--s3) 0}.step:nth-child(odd)+.step{border-left:1px solid var(--line)}.step:nth-child(odd){border-left:none;padding-left:0}}
@media(max-width:560px){.steps,.steps.three,.steps.wrap3{grid-template-columns:1fr}.steps.wrap3 .step,.steps.wrap3 .step:nth-child(3n+1){border-left:none;padding-left:0}.step,.step+.step{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:var(--s3)}.step:first-child{border-top:none;padding-top:0}}

/* ============ THANK-YOU STATEMENT (opens the sponsor wall) ============ */
.thanks{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:center;padding-bottom:var(--s5);margin-bottom:var(--s5);border-bottom:1px solid var(--line)}
.thanks .mark{font-size:clamp(64px,9.5vw,132px);line-height:.8;letter-spacing:-.025em;color:var(--accent-text);white-space:nowrap}
.thanks p{color:var(--fg);font-size:clamp(18px,2.1vw,23px);line-height:1.5;max-width:640px;font-weight:400}
@media(max-width:820px){.thanks{grid-template-columns:1fr;gap:var(--s3);align-items:start}}

/* ============ LEAD ARGUMENT (the one pitch that must land) ============ */
.arg-lead{position:relative;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s6);align-items:center;background:linear-gradient(135deg,var(--surface2),var(--surface));border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:var(--s6);margin:var(--s4) 0 var(--s6)}
.arg-lead::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--primary))}
.arg-lead::after{content:"";position:absolute;right:-14%;bottom:-34%;width:40%;height:150%;background:url(logo.svg) center/contain no-repeat;opacity:.035;pointer-events:none}
.arg-lead>*{position:relative;z-index:2}
.arg-flag{display:inline-flex;align-items:center;gap:9px;background:rgba(235,106,10,.16);color:var(--accent-soft);font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:13px;padding:7px 15px;border-radius:var(--r-pill);margin-bottom:var(--s3)}
.arg-lead h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.8vw,44px);line-height:1.02;letter-spacing:.01em;margin-bottom:var(--s3)}
.arg-lead h3 em{font-style:normal;color:var(--accent-text)}
.arg-lead p{color:var(--muted);font-size:17px;line-height:1.62;max-width:560px}
.arg-lead p+p{margin-top:var(--s2)}
.arg-points{list-style:none;display:flex;flex-direction:column;gap:var(--s2)}
.arg-points li{display:flex;gap:14px;align-items:flex-start;padding:var(--s3);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.arg-points li .ico{width:20px;height:20px;color:var(--accent-text);flex-shrink:0;margin-top:2px}
.arg-points li b{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:17px;margin-bottom:3px}
.arg-points li span{color:var(--muted);font-size:15px;line-height:1.5}
@media(max-width:900px){.arg-lead{grid-template-columns:1fr;gap:var(--s4);padding:var(--s4)}}

/* ============ FEATURE ROWS (editorial, alternating) ============ */
.frows{margin-top:var(--s4);border-top:1px solid var(--line)}
.frow-item{display:grid;grid-template-columns:88px 1fr auto;gap:var(--s4);align-items:start;padding:var(--s4) 0;border-bottom:1px solid var(--line);transition:background .25s}
.frow-item:hover{background:rgba(255,255,255,.02)}
.frow-item>div{min-width:0}
.frow-item h3 a{transition:color .2s}
.frow-item:hover h3 a{color:var(--accent-text)}
.frow-item .idx{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:44px;line-height:.85;color:var(--muted2);letter-spacing:-.01em;transition:color .25s}
.frow-item:hover .idx{color:var(--accent-text)}
.frow-item h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3vw,34px);letter-spacing:.01em;line-height:1.02}
.frow-item p{color:var(--muted);font-size:16px;margin-top:10px;max-width:560px;line-height:1.55}
.frow-item .meta{display:flex;flex-direction:column;gap:6px;align-items:flex-end;text-align:right;padding-top:6px}
.frow-item .meta .k{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--accent-text);white-space:nowrap}
.frow-item .meta .v{color:var(--muted2);font-size:14px;white-space:nowrap}
@media(max-width:820px){.frow-item{grid-template-columns:56px 1fr;gap:var(--s3)}.frow-item .idx{font-size:32px}.frow-item .meta{grid-column:2;align-items:flex-start;text-align:left;flex-direction:row;gap:14px;flex-wrap:wrap}}

/* ============ SPEC LIST (statement panel + divided list) ============ */
.spec{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s6);align-items:start;margin-top:var(--s4)}
.spec-claim .display{font-size:clamp(28px,4vw,44px);line-height:1}
.spec-claim .display em{font-style:normal;color:var(--accent-text);display:block}
.spec-claim p{color:var(--muted);font-size:16.5px;margin-top:var(--s3);line-height:1.6}
.spec-list{list-style:none}
.spec-list li{display:flex;gap:16px;align-items:flex-start;padding:var(--s3) 0;border-top:1px solid var(--line)}
.spec-list li:first-child{border-top:none;padding-top:0}
.spec-list li>div{flex:1;min-width:0}
/* two-up variant when the list stands alone rather than beside a claim panel */
.spec-list.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s5);border-top:1px solid var(--line)}
.spec-list.contact-split li:first-child{padding-top:var(--s3)}
@media(max-width:820px){.spec-list.contact-split{grid-template-columns:1fr}.spec-list.contact-split li:first-child{padding-top:var(--s3)}}
.spec-list li .ico{width:22px;height:22px;color:var(--accent-text);flex-shrink:0;margin-top:2px}
.spec-list li b{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.02em;display:block;margin-bottom:3px}
.spec-list li span{color:var(--muted);font-size:15.5px;line-height:1.5}
@media(max-width:900px){.spec{grid-template-columns:1fr;gap:var(--s4)}}

/* ============ METRIC BAND (editorial, distinct from stats-band) ============ */
.metrics{margin-top:var(--s4);display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--accent);border-bottom:1px solid var(--line)}
.metric{padding:var(--s4) var(--s3) var(--s4) 0;border-right:1px solid var(--line)}
.metric:last-child{border-right:none}
.metric:not(:first-child){padding-left:var(--s3)}
.metric .m-n{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(40px,5.2vw,62px);line-height:.92;letter-spacing:-.015em}
.metric .m-n sup{font-size:.42em;vertical-align:super;color:var(--accent-text);font-weight:800;margin-left:2px}
.metric .m-l{color:var(--muted);font-size:14.5px;margin-top:10px;line-height:1.45}
.metric .m-l b{color:var(--fg);font-weight:700;display:block;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-size:14px;margin-bottom:2px}
@media(max-width:820px){.metrics{grid-template-columns:1fr 1fr}.metric:nth-child(2){border-right:none}.metric:nth-child(3),.metric:nth-child(4){border-top:1px solid var(--line)}}

/* ============ LEAD STORY (news hierarchy) ============ */
.lead-story{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:var(--s5);transition:transform .2s,border-color .2s;text-decoration:none;color:inherit;cursor:pointer}
.lead-story:hover{transform:translateY(-4px);border-color:var(--accent)}
.lead-story:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.lead-story .ls-img{position:relative;min-height:340px;background:linear-gradient(135deg,#274b8c,#0e1e3c);overflow:hidden}
.lead-story .ls-img::after{content:"";position:absolute;right:-10%;bottom:-14%;width:70%;height:120%;background:url(logo.svg) center/contain no-repeat;opacity:.18}
.lead-story .ls-tag{position:absolute;left:18px;top:18px;z-index:2;background:var(--accent);color:var(--on-accent);font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:12.5px;padding:6px 13px;border-radius:var(--r-pill)}
.lead-story .ls-txt{padding:var(--s5);display:flex;flex-direction:column;justify-content:center}
.lead-story .ls-date{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:13.5px;color:var(--accent-text);margin-bottom:var(--s2)}
.lead-story h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.6vw,42px);line-height:1.02;letter-spacing:.01em}
.lead-story p{color:var(--muted);font-size:17px;margin-top:var(--s2);line-height:1.6}
.lead-story .more{margin-top:var(--s3);display:inline-flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:16px;color:var(--accent-text)}
.lead-story .more .ico{width:17px;height:17px}
@media(max-width:820px){.lead-story{grid-template-columns:1fr}.lead-story .ls-img{min-height:200px}.lead-story .ls-txt{padding:var(--s4)}}

/* ============ NAME-LED ROSTER (alumni, no fake avatars) ============ */
.roster{border-top:1px solid var(--line);margin-top:var(--s4)}
.roster-item{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.roster-item .rn{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.8vw,30px);letter-spacing:.01em;line-height:1.05}
.roster-item .rn small{display:block;font-family:'Source Sans 3',sans-serif;font-weight:400;text-transform:none;letter-spacing:0;font-size:15.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.roster-item .rc{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:14px;color:var(--accent-text);text-align:right;white-space:nowrap}
@media(max-width:640px){.roster-item{grid-template-columns:1fr}.roster-item .rc{text-align:left}}

/* ============ PERSON CARD REFINEMENT ============ */
.person{text-align:left;display:flex;flex-direction:column}
.person .av{width:60px;height:60px;border-radius:var(--r-md);margin:0 0 var(--s3);font-size:22px;letter-spacing:.02em;background:linear-gradient(135deg,var(--primary-deep),#0e1e3c);border:1px solid var(--line-strong)}
.person .role{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:13.5px}

/* ============ PICTURE PANEL REFINEMENT ============ */
.split .pic::after{content:"";position:absolute;right:-12%;bottom:-14%;width:64%;height:118%;background:url(logo.svg) center/contain no-repeat;opacity:.14;pointer-events:none}
.split .pic .k{position:relative;z-index:2}

/* ============ FLIPBOOK ============ */
.flip-wrap{max-width:560px;margin:0 auto}
#flipbook{margin:0 auto;box-shadow:0 30px 90px -30px rgba(0,0,0,.7)}
#flipbook img{max-width:none}
.flip-ctrls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:var(--s4)}
.flip-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,color .2s,transform .15s}
.flip-btn:hover{border-color:var(--accent);color:var(--accent-text);transform:translateY(-2px)}
.flip-page{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.05em;color:var(--muted);min-width:78px;text-align:center;font-size:17px}
.flip-hint{text-align:center;color:var(--muted2);font-size:14px;margin-top:14px}
.flip-hint a{color:var(--blue)}

/* Mannschafts-Chips mit FuPa-Verlinkung */
.chip-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease;}
.chip-link:hover{border-color:var(--accent);transform:translateY(-1px);}
.chip-ico{width:13px;height:13px;flex:none;fill:none;stroke:var(--accent-text);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85;}
.fupa-hint{font-size:14px;color:var(--muted);margin:10px 0 0;max-width:62ch;}

/* ---------- Instagram-Feed ---------- */
/* Instagram-Block: Kopfzeile, Beitraege und Button in einem Rahmen. */
.ig-block{margin-top:var(--s4);padding:var(--s3);border-radius:var(--r-lg);border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#833ab4,#e1306c,#fcb045) border-box}
.ig-kopf{display:flex;align-items:center;gap:16px;padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.ig-kopf .sm-name{flex:1 1 auto;min-width:0}
.ig-kopf .sm-name .sub{display:flex;align-items:center;gap:8px}
.ig-glyph{width:17px;height:17px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2}
.ig-block .ig-raster{margin-top:var(--s3)}
/* Facebook: gleicher Rahmen wie Instagram, blau statt Verlauf, ohne Beitraege. */
.fb-block{margin-top:var(--s3);background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,#1877f2,#0a52c9) border-box}
.fb-block .ig-kopf{padding-bottom:0;border-bottom:none}
@media(max-width:640px){
  .ig-block{padding:var(--s2)}
  .ig-kopf{flex-wrap:wrap}
  .ig-kopf .sm-btn{margin-left:0;width:100%}
  .fb-leiste{flex-wrap:wrap}
  .fb-cta{margin-left:0;width:100%;justify-content:center}
}
.ig-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-top:var(--s4)}
/* Hochformat wie bei den Vereinsflyern. object-fit:contain statt cover, damit
   nichts vom Motiv abgeschnitten wird - lieber schmale Raender als fehlender Text. */
.ig-kachel{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
/* Was neben dem Motiv frei bleibt, fuellt dasselbe Bild formatfuellend und
   stark weichgezeichnet. So traegt der Rand die Farben des Beitrags, statt als
   fremde Flaeche aufzufallen. */
.ig-kachel .ig-grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.25);filter:blur(26px) saturate(1.5);display:block}
.ig-kachel .ig-motiv{position:relative;width:100%;height:100%;object-fit:contain;display:block;transition:filter .3s}
.ig-kachel:hover .ig-motiv{filter:brightness(1.06)}
.ig-kachel:hover{border-color:var(--accent)}
.ig-kachel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ig-video{position:absolute;right:8px;top:8px;width:22px;height:22px;color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.ig-video svg{width:100%;height:100%}
@media(max-width:900px){.ig-raster{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ig-raster{grid-template-columns:1fr}}

/* ============ DOWNLOAD-KACHELN AUF DEM HANDY ============
   Das Raster blieb unter 1024px bei zwei Spalten. Auf 390px passte der
   laengste Kacheltext ("PDF · Nachwuchspartnerschaft") nicht in eine Spalte,
   und weil 1fr nicht unter die Mindestbreite des Inhalts geht, wurde das
   ganze Raster breiter als der Bildschirm. Der Browser hat daraufhin die
   komplette Seite auf 477px herausgezoomt -- betroffen war sichtbar nur
   /verein, dort steht der Download-Bereich. */
.dl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1024px){.dl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.dl-grid{grid-template-columns:1fr}}
.dl{min-width:0}
.dl b,.dl small{overflow-wrap:anywhere}

/* Honigtopf im Kontaktformular: fuer Menschen unsichtbar, fuer Skripte da.
   Nicht display:none -- manche Ausfueller ueberspringen versteckte Felder. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============ FOTO-HERO UND BILDBÄNDER ============
   Erste Fotos auf der Seite. Bis hierhin trugen Hero und Unterseiten reine
   Farbverläufe. Alles steht in diesem Block zusammen: Fällt die Entscheidung
   gegen Fotos, verschwinden sie mit diesem Abschnitt und den paar Aufrufen im
   HTML, nicht verstreut über zwölf Dateien. */

/* --- Hero mit Foto --------------------------------------------------------
   Das Gruppenbild liegt hinter dem Text. Der Verlauf deckt links kräftig, wo
   die Schrift steht, und läuft nach rechts aus, damit die Mannschaften frei
   stehen. Bewusst weniger abgedunkelt als bei Stockbildern: das hier ist ein
   echtes Vereinsfoto, es soll erkennbar bleiben. */
.hero.hero-foto{position:relative}
.hero.hero-foto .hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%;z-index:0}
.hero.hero-foto::before{
  background:
    linear-gradient(90deg,
      rgba(13,26,83,.94) 0%,
      rgba(14,28,90,.86) 30%,
      rgba(16,31,101,.55) 55%,
      rgba(19,37,119,.30) 78%,
      rgba(19,37,119,.24) 100%);
  z-index:1}
.hero.hero-foto::after{z-index:1}
.hero.hero-foto .container{position:relative;z-index:2}
/* Ohne Wappen steht der Text allein links, das Bild trägt die rechte Seite. */
.hero.hero-foto .hero-grid{grid-template-columns:minmax(0,640px)}

/* --- Bildband zwischen zwei Abschnitten -----------------------------------
   Eine Atempause, kein Schmuck. Alle Bänder gleich hoch, jedes trägt genau
   eine kurze Zeile über den Verein oder die Sponsoren. */
.bildband{position:relative;width:100%;overflow:hidden;background:var(--bg2)}
.bildband .bb-flaeche{position:relative;width:100%;height:clamp(210px,24vw,420px)}
.bildband img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bildband .bb-deck{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(13,26,83,.88) 0%,rgba(14,28,90,.66) 38%,rgba(16,31,101,.34) 70%,rgba(16,31,101,.28) 100%)}
.bildband .bb-zeile{position:absolute;inset:0;display:flex;align-items:center}
.bildband .bb-zeile .container{width:100%}
.bildband .bb-text{display:flex;align-items:center;gap:16px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,42px);line-height:1.05;color:#fff;letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.45)}
.bildband .bb-text::before{content:"";flex:none;width:4px;height:1.15em;
  background:var(--accent);border-radius:2px}
@media(max-width:820px){
  .bildband .bb-deck{background:linear-gradient(90deg,rgba(13,26,83,.90) 0%,rgba(14,28,90,.78) 55%,rgba(16,31,101,.55) 100%)}
}


/* Lange Einzelwörter in Seitentiteln (z. B. „Nachwuchsförderverein") passen auf schmalen Handys sonst nicht in die Zeile. */
@media (max-width:420px){.subhero h1{font-size:32px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}}
/* Header passt mit allen sechs Menüpunkten erst ab ~1440 px in eine Zeile. Darunter ragte er
   rechts aus dem Bild (bei 1366 px 14 px, bei 1024 px 253 px) und schnitt „Mitglied werden" ab.
   Stufe 1: Button „Mitglied werden" im Header ausblenden (bleibt in Hero, Seiten und Menü).
   Stufe 2: unter 1180 px auf das Burger-Menü umschalten. */
@media (max-width:1439px){.nav-cta .btn-primary{display:none}}
@media (max-width:1179px){nav{display:none}.nav-cta .btn{display:none}.burger{display:block}}