/* ============================================================================
   DESIGN V2 — Angleichung der Seite an den Matchday-Hero
   Wird per <link> eingebunden; wirkt nur, wenn body[data-design="v2"] gesetzt ist
   (body[data-design="v1"] = bisheriges Design, zum direkten Vergleich).
   Übernimmt aus dem Hero: Anton-Headlines in Versalien, Bebas-Neue-Labels mit
   Laufweite, Diagonalschnitt-Buttons (Bebas Neue, Versalien) mit dunkler
   Rückebene (kein Gold-Akzent mehr), festes Hero-Rot mit Dunkelrot-Noise auf
   roten Flächen.
   ============================================================================ */

[data-design="v2"]{
  --font-impact:'Anton','Bebas Neue',sans-serif;
  --font-accent:'smashing','Bebas Neue',Anton,sans-serif;   /* Akzent-Schrift (Pinsel-Optik): rote Bänder / Intro-Bänder, nicht für normale Überschriften */
  --font-label:'bebas-neue','Bebas Neue',Anton,sans-serif;
  --font-script:'scribo-pro','Scribo Pro','Mrs Saint Delafield',cursive;
  --hero-red:#8c0a2c;
  --hero-red-deep:#5c0518;
  --ivory:#f3f1ec;
  --btn-back:#5c0518;
}
[data-design="v2"][data-theme="dark"],[data-theme="dark"] [data-design="v2"]{ --btn-back:#a3263f; }

/* ---------- Noise-Ebenen (Grundregeln; auf der Startseite steht dasselbe zusätzlich im Hero-CSS) ---------- */
.mh-noise{display:none;position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.88;}
.mh-noise--b{mix-blend-mode:normal;}
[data-tex="noise"] .mh-noise--a,[data-tex="noise-red"] .mh-noise--b{display:block;}

/* ---------- Headlines: Anton, Versalien (wie "MATCH DAY") ---------- */
[data-design="v2"] h1,
[data-design="v2"] h2,
[data-design="v2"] .widget-head h3{
  font-family:var(--font-impact);font-weight:400;text-transform:uppercase;letter-spacing:.012em;line-height:.98;
}
[data-design="v2"] .section-head h2{font-size:clamp(36px,4.4vw,54px);}
[data-design="v2"] .widget-head h3{font-size:27px;}

/* ---------- Labels: Bebas Neue, Laufweite, Versalien (wie die Infozeile im Hero) ---------- */
[data-design="v2"] .primary-nav{font-family:var(--font-label);font-weight:400;font-size:20px;letter-spacing:.08em;text-transform:uppercase;gap:30px;}
[data-design="v2"] .view-all{font-family:var(--font-label);font-weight:400;font-size:17px;letter-spacing:.1em;text-transform:uppercase;}
[data-design="v2"] .match-spotlight .tag{font-family:var(--font-label);font-weight:400;font-size:15px;letter-spacing:.12em;}
[data-design="v2"] .post-cat{font-family:var(--font-label);font-weight:400;font-size:14px;letter-spacing:.16em;}
[data-design="v2"] .footer-col h4{font-family:var(--font-label);font-weight:400;font-size:18px;letter-spacing:.14em;}
[data-design="v2"] .date-block small,
[data-design="v2"] .cal-date small{font-family:var(--font-label);font-weight:400;font-size:11px;letter-spacing:.08em;}

/* ---------- Buttons: Diagonalschnitt (zwei gegenüberliegende Ecken abgeschrägt) + versetzte Rückebene ---------- */
/* Bebas Neue in Versalien wie die Infozeile im Hero. Vorderseite = ::after, Rückebene = ::before (dunkler Ton, um --o versetzt).
   Hover hebt den Button an, Klick drückt ihn in die Rückebene. Größen: Standard (Header) · .btn-lg (CTA-Bänder) · .btn-compact/.btn-sm (Karten) */
[data-design="v2"] .btn{
  --fs:19px;--o:4px;--c:calc(var(--fs) * .62);--t:2px;--k:calc(var(--t) * .4142);
  --shape:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)));
  /* Rahmen (Ghost): dieselbe Form als Umriss — äußere Kontur + Schlitz + innere, um --t eingerückte Kontur (Abschrägung um --k nachgeführt) */
  --frame:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)),0 0,var(--t) var(--t),var(--t) calc(100% - var(--c) - var(--k)),calc(var(--c) + var(--k)) calc(100% - var(--t)),calc(100% - var(--t)) calc(100% - var(--t)),calc(100% - var(--t)) calc(var(--c) + var(--k)),calc(100% - var(--c) - var(--k)) var(--t),var(--t) var(--t));
  gap:9px;padding:12px 22px 10px;border:0;border-radius:0;background:transparent;transform:none;
  font-family:var(--font-label);font-weight:400;font-size:var(--fs);letter-spacing:.09em;text-transform:uppercase;line-height:1;
  transition:transform .16s ease;
}
[data-design="v2"] .btn-lg{--fs:23px;--o:6px;gap:12px;padding:17px 32px 14px;}
[data-design="v2"] .btn-compact{--fs:16px;--o:3px;gap:7px;padding:9px 16px 7px;}
[data-design="v2"] .btn-sm{--fs:15px;--o:3px;gap:7px;padding:8px 14px 6px;}
[data-design="v2"] .btn::after,
[data-design="v2"] .btn::before{
  content:"";position:absolute;inset:0;border-radius:0;clip-path:var(--shape);
}
[data-design="v2"] .btn::after{z-index:-1;background:var(--brand-red);}
[data-design="v2"] .btn::before{z-index:-2;background:var(--btn-back);transform:translate(var(--o),var(--o));transition:transform .16s ease;}
[data-design="v2"] .btn:hover{transform:translate(calc(var(--o) * -.4),calc(var(--o) * -.4));}
[data-design="v2"] .btn:hover::before{transform:translate(calc(var(--o) * 1.4),calc(var(--o) * 1.4));}
[data-design="v2"] .btn:active{transform:translate(calc(var(--o) * .6),calc(var(--o) * .6));}
[data-design="v2"] .btn:active::before{transform:translate(calc(var(--o) * .4),calc(var(--o) * .4));}
[data-design="v2"] .btn svg{width:1.05em;height:1.05em;flex:none;margin-top:-.08em;}

/* Ghost: nur Umrandung (2px) in der Diagonalschnitt-Form, keine Füllung, keine Rückebene. Hover füllt die Fläche.
   .btn-ghost-light = auf Rot/Navy (weißer Rahmen) · .btn-ghost-gold = auf hellem Grund (roter Rahmen; Gold gibt es bei Buttons nicht mehr) */
[data-design="v2"] .btn-ghost-light,
[data-design="v2"] .btn-ghost-gold{--gl:rgba(255,255,255,.85);--gf:var(--ivory);--gt:var(--hero-red);color:#fff;}
[data-design="v2"] .btn-ghost-gold{--gl:var(--brand-red);--gf:var(--brand-red);--gt:#fff;color:var(--brand-red);}
[data-design="v2"] .btn-ghost-light::after,
[data-design="v2"] .btn-ghost-gold::after{background:var(--gl);clip-path:var(--frame);}
[data-design="v2"] .btn-ghost-light::before,
[data-design="v2"] .btn-ghost-gold::before,
[data-design="v2"] .btn-ghost-light:hover::before,
[data-design="v2"] .btn-ghost-gold:hover::before,
[data-design="v2"] .btn-ghost-light:active::before,
[data-design="v2"] .btn-ghost-gold:active::before{background:var(--gf);transform:none;opacity:0;transition:opacity .16s ease;}
[data-design="v2"] .btn-ghost-light:hover,
[data-design="v2"] .btn-ghost-gold:hover,
[data-design="v2"] .btn-ghost-light:active,
[data-design="v2"] .btn-ghost-gold:active{transform:none;background:transparent;color:var(--gt);}
[data-design="v2"] .btn-ghost-light:hover::before,
[data-design="v2"] .btn-ghost-gold:hover::before,
[data-design="v2"] .btn-ghost-light:active::before,
[data-design="v2"] .btn-ghost-gold:active::before{opacity:1;}
[data-design="v2"] .btn-ghost-light:hover::after,
[data-design="v2"] .btn-ghost-gold:hover::after,
[data-design="v2"] .btn-ghost-light:active::after,
[data-design="v2"] .btn-ghost-gold:active::after{background:var(--gf);}

/* ---------- Rote Fläche (Mitglieder-Banner): Verlauf statt Noise-SVG, Anton, heller Blob-Button ----------
   Bewusst KEIN eigenes .mh-noise mehr hier (siehe noise-defs.js-Kommentar): der Hero ist der einzige
   Noise-Moment je Seite. Der radiale Verlauf (identisch zu .gfx/.tc.big/.tm-stage) gibt trotzdem Tiefe. */
[data-design="v2"] .cta-banner{background:radial-gradient(85% 135% at 76% 26%,#a91330 0%,#8c0a2c 44%,#650620 100%);isolation:isolate;}
[data-design="v2"] .cta-banner .texture-wash{display:none;}
/* Eigentliche Ursache des Überlaufs (nicht das max-width auf dem h2 selbst): .cta-inner ist ein
   Flex-Container, und Flex-Kinder haben standardmäßig min-width:auto statt 0 — der Textblock durfte
   sich also nie unter seine Inhaltsbreite zusammendrücken lassen. Bei einem einzelnen langen Wort
   in der Überschrift (z. B. "Geschäftsstelle", 16 Zeichen ohne Leerzeichen) drückte das den ganzen
   Block über den verfügbaren Platz hinaus, egal was h2 selbst für ein max-width hatte. */
.cta-inner > div{min-width:0;}
/* max-width:16ch bemisst sich an der (recht breiten) Akzent-Schrift; overflow-wrap bricht einzelne
   lange Wörter, falls selbst das nicht reicht (deutsche Komposita haben oft keine Leerstelle). */
[data-design="v2"] .cta-banner h2{font-family:var(--font-accent);font-weight:500;text-transform:none;letter-spacing:0;line-height:1.02;font-size:clamp(34px,4.6vw,60px);max-width:16ch;overflow-wrap:break-word;hyphens:auto;}
/* Button auf der roten Fläche: Elfenbein-Vorderseite, dunkelrote Rückebene (Form/Bewegung kommt aus dem Diagonalschnitt oben) */
/* (im Markup trägt der Button noch .btn-ghost-light — hier bewusst als gefüllter Primary-Button gestaltet, daher alle Zustände einzeln überschrieben) */
[data-design="v2"] .cta-banner .btn,
[data-design="v2"] .news-stage .btn,
[data-design="v2"] .th-hero .btn-primary{color:var(--hero-red);}
[data-design="v2"] .cta-banner .btn::after,
[data-design="v2"] .news-stage .btn::after,
[data-design="v2"] .th-hero .btn-primary::after{background:var(--ivory);clip-path:var(--shape);}
[data-design="v2"] .cta-banner .btn::before,
[data-design="v2"] .news-stage .btn::before,
[data-design="v2"] .th-hero .btn-primary::before{background:var(--hero-red-deep);opacity:1;transform:translate(var(--o),var(--o));transition:transform .16s ease;}
[data-design="v2"] .cta-banner .btn:hover,
[data-design="v2"] .news-stage .btn:hover,
[data-design="v2"] .th-hero .btn-primary:hover{transform:translate(calc(var(--o) * -.4),calc(var(--o) * -.4));color:var(--hero-red);}
[data-design="v2"] .cta-banner .btn:hover::before,
[data-design="v2"] .news-stage .btn:hover::before,
[data-design="v2"] .th-hero .btn-primary:hover::before{transform:translate(calc(var(--o) * 1.4),calc(var(--o) * 1.4));}
[data-design="v2"] .cta-banner .btn:active,
[data-design="v2"] .news-stage .btn:active,
[data-design="v2"] .th-hero .btn-primary:active{transform:translate(calc(var(--o) * .6),calc(var(--o) * .6));color:var(--hero-red);}
[data-design="v2"] .cta-banner .btn:active::before,
[data-design="v2"] .news-stage .btn:active::before,
[data-design="v2"] .th-hero .btn-primary:active::before{transform:translate(calc(var(--o) * .4),calc(var(--o) * .4));}

/* Noise-Ebene im Banner (gleiche Technik wie im Hero; nur in V2 sichtbar) */
.cta-banner > .mh-noise{display:none;}
[data-design="v2"][data-tex="noise-red"] .cta-banner > .mh-noise--b{display:block;}
[data-design="v2"][data-tex="noise"] .cta-banner > .mh-noise--a{display:block;}

/* ---------- News-Bereich: volle Boxed-Breite, "Rote Bühne" + flache Karten ---------- */
/* Die News liegen über die gesamte Boxed-Breite (max. 1240px), die Widgets (Kommende Spiele · Tabelle · Kalender) als Bento-Raster darunter
   (siehe Bento-Raster unten). Der neueste Beitrag steht auf einer roten Bühne (Hero-Rot + Noise, Foto mit Schrägschnitt),
   darunter fünf flache Karten mit Linie oben. Beiträge ohne Foto bekommen eine Spielgrafik (Hero-Rot + beide Wappen + Ergebnis).
   Markup: .news-v2 — nur in V2 sichtbar; das alte .blog-grid bleibt für die Ansicht "Bisher". */
[data-design="v2"] .split-grid{grid-template-columns:1fr;gap:72px;}
[data-design="v2"] .sidebar{display:none;}   /* die Widgets stehen in V2 im Bento-Raster (.bento-v2, siehe unten) */
.news-v2{display:none;}
[data-design="v2"] .news-v2{display:block;}
[data-design="v2"] .blog-grid{display:none;}

.news-v2 .cat{font-family:var(--font-label);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--hero-red);line-height:1.1;}
.news-v2 .dt{font-family:var(--font-label);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);line-height:1.1;}
.news-v2 .m{position:relative;overflow:hidden;container-type:size;background:#2a3040;}
.news-v2 .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .6s ease;}
.news-v2 .hv:hover .ph{transform:scale(1.045);}
.news-v2 img{display:block;max-width:100%;}

/* Wappen-Kachel an der oberen linken Bildecke (Vor-/Nachberichte mit Foto): WHV auf Rot, Gegner auf Weiß */
.news-v2 .chip{position:absolute;left:0;top:0;display:flex;z-index:3;box-shadow:0 2px 12px rgba(0,0,0,.2);}
.news-v2 .chip .c{width:46px;height:46px;display:grid;place-items:center;padding:7px;}
.news-v2 .chip .c img{max-width:100%;max-height:100%;object-fit:contain;}
.news-v2 .chip .c.r{background:var(--hero-red);}
.news-v2 .chip .c.w{background:#fff;}
.news-v2 .chip .c small{font:400 9.5px/1.05 var(--font-label);letter-spacing:.05em;text-align:center;color:var(--hero-red);text-transform:uppercase;}

/* Spielgrafik (Beitrag ohne Foto): Hero-Rot + Noise + beide Wappen (+ Ergebnis); --u = 1 % der Bezugsgröße des Containers */
.news-v2 .gfx{--u:min(1cqh,.58cqw);position:absolute;inset:0;isolation:isolate;background:radial-gradient(85% 135% at 76% 26%,#a91330 0%,#8c0a2c 44%,#650620 100%);display:grid;place-items:center;overflow:hidden;color:#fff;}
.news-v2 .gfx .gx{position:relative;display:flex;align-items:center;justify-content:center;gap:calc(var(--u) * 7);z-index:1;}
.news-v2 .gfx .cr{height:calc(var(--u) * 34);width:auto;}
.news-v2 .gfx .cr.big{height:calc(var(--u) * 46);}
.news-v2 .gfx .opp{height:calc(var(--u) * 34);width:calc(var(--u) * 34);background:#fff;padding:calc(var(--u) * 3.4);object-fit:contain;}
.news-v2 .gfx .opp.nm{display:grid;place-items:center;padding:calc(var(--u) * 1.6);text-align:center;font:400 calc(var(--u) * 6.2)/1.05 var(--font-label);letter-spacing:.05em;color:var(--hero-red);text-transform:uppercase;}
.news-v2 .gfx .sc{font-family:var(--font-impact);font-size:calc(var(--u) * 24);line-height:1;}
.news-v2 .gfx .vs{font-family:var(--font-label);font-size:calc(var(--u) * 9);letter-spacing:.14em;opacity:.85;}
.news-v2 .gfx .lb{position:absolute;left:0;right:0;bottom:calc(var(--u) * 5);text-align:center;font:400 calc(var(--u) * 6)/1 var(--font-label);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);z-index:1;}
@container (max-aspect-ratio:1/1){
  .news-v2 .gfx{--u:1cqw;}
  .news-v2 .gfx .gx{flex-direction:column;gap:calc(var(--u) * 3.4);}
}

/* Rote Bühne */
/* Verlauf statt eigenem .mh-noise (der Hero ist der einzige Noise-Moment je Seite, siehe noise-defs.js) */
.news-stage{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(85% 135% at 76% 26%,#a91330 0%,#8c0a2c 44%,#650620 100%);color:#fff;display:grid;grid-template-columns:1fr 1.1fr;min-height:430px;}
.news-stage .nb{padding:48px 20px 48px 52px;display:flex;flex-direction:column;justify-content:center;gap:16px;position:relative;z-index:2;}
.news-stage .cat{color:rgba(255,255,255,.85);}
.news-stage h3{font-family:var(--font-impact);font-weight:400;font-size:clamp(30px,3.7vw,50px);line-height:1;text-transform:uppercase;letter-spacing:.01em;}
.news-stage h3 a{color:#fff;}
.news-stage p{color:rgba(255,255,255,.88);font-size:16px;max-width:50ch;}
.news-stage .rw{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:6px;}
.news-stage .nf{position:relative;clip-path:polygon(72px 0,100% 0,100% 100%,0 100%);}
.news-stage .nf .m{position:absolute;inset:0;}
.news-stage .gfx{background:radial-gradient(85% 135% at 30% 26%,#7a0925 0%,#5c0518 72%);}
.news-stage .chip{display:none;}
.news-stage .res{display:flex;align-items:center;gap:14px;font-family:var(--font-impact);font-size:30px;line-height:1;}
.news-stage .res img{height:34px;width:auto;}
.news-stage .res .o{width:34px;height:34px;background:#fff;padding:4px;object-fit:contain;}
.news-stage .res .vs{font:400 15px var(--font-label);letter-spacing:.14em;opacity:.85;}
.news-stage .res .ot{font:400 12px/1 var(--font-label);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85);max-width:9ch;}
/* Button auf der Bühne: wie im Mitglieder-Banner (Elfenbein, dunkelrote Rückebene) — siehe Regeln des .cta-banner oben */

/* Flache Karten */
.news-row{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:36px;}
.news-card{position:relative;display:block;padding-top:18px;color:inherit;}
.news-card::before,.news-card::after{content:"";position:absolute;top:0;left:0;height:3px;}
.news-card::before{width:100%;background:var(--border);}
.news-card::after{width:0;background:var(--hero-red);transition:width .35s ease;}
.news-card:hover::after{width:100%;}
.news-card .m{aspect-ratio:4/3;}
.news-card .chip{transform:scale(.72);transform-origin:0 0;}
.news-card .nb{padding-top:14px;display:flex;flex-direction:column;gap:7px;}
.news-card h4{font-family:var(--font-body);font-weight:700;font-size:16.5px;line-height:1.28;letter-spacing:0;transition:color .2s ease;}
.news-card:hover h4{color:var(--hero-red);}

@media (max-width:1100px){
  .news-row{grid-template-columns:repeat(6,1fr);}
  .news-card{grid-column:span 2;}
  .news-card:nth-child(n+4){grid-column:span 3;}
}
@media (max-width:900px){
  .news-stage{grid-template-columns:1fr;}
  .news-stage .nb{padding:34px 26px 30px;}
  .news-stage .nf{order:2;aspect-ratio:16/10;clip-path:none;}
}
@media (max-width:640px){
  .news-row{grid-template-columns:repeat(2,1fr);gap:22px 16px;}
  .news-card,.news-card:nth-child(n+4){grid-column:auto;}
  .news-card:last-child:nth-child(odd){grid-column:span 2;}
}

/* ---------- Spielplan · Tabelle · Kalender: Bento-Raster, Diagonalschnitt + Versatz ---------- */
/* Anordnung: 12 Spalten — "Kommende Spiele" (vier Kacheln, 8 Spalten) links oben, die hohe Tabellen-Kachel (4 Spalten, 2 Zeilen) rechts, darunter der Kalender als Zeitleiste (8 Spalten).
   Gestaltung: Formsprache der Buttons — zwei Ecken abgeschrägt, dahinter eine um --bv-o versetzte Rückebene (--btn-back). Markup/Daten: assets/bento-v2.js (Spielplan aus whv_spiel). */
.bento-v2{display:none;}
[data-design="v2"] .bento-v2{display:block;}
.bento-v2{--bv-c:18px;--bv-o:6px;--bv-shape:polygon(0 0,calc(100% - var(--bv-c)) 0,100% var(--bv-c),100% 100%,var(--bv-c) 100%,0 calc(100% - var(--bv-c)));}
.bento-v2 .section-head{margin-bottom:34px;}
.bv-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 30px;align-items:start;}
.bv-fx{grid-column:span 8;}
.bv-tb{grid-column:span 4;grid-row:span 2;align-self:stretch;display:flex;flex-direction:column;}
.bv-tb .bv-panel{flex:1;}
.bv-tl{grid-column:span 8;}
.bv-th{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 14px;margin-bottom:18px;}
.bv-th h3{font-family:var(--font-impact);font-weight:400;font-size:26px;text-transform:uppercase;letter-spacing:.012em;line-height:1.05;}
.bv-th .bv-note{font-family:var(--font-label);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);}

/* gemeinsame Kachel-Technik: Vorderseite ::after, Rückebene ::before (Rückebene liegt hinter dem Noise der roten Kachel) */
.bv-cut{position:relative;isolation:isolate;transition:transform .16s ease;}
.bv-cut::after,.bv-cut::before{content:"";position:absolute;inset:0;clip-path:var(--bv-shape);}
.bv-cut::after{z-index:-2;background:var(--surface);}
.bv-cut::before{z-index:-3;background:var(--btn-back);transform:translate(var(--bv-o),var(--bv-o));transition:transform .16s ease;}
.bv-cut:hover{transform:translate(-2px,-2px);}
.bv-cut:hover::before{transform:translate(calc(var(--bv-o) + 2px),calc(var(--bv-o) + 2px));}
.bv-cut .mh-noise{clip-path:var(--bv-shape);}

.bv-fcs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.bv-fc{padding:16px 12px 18px;display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center;color:var(--ink);}
.bv-fc .bv-dt{font-family:var(--font-label);font-size:15px;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);}
.bv-pair{display:flex;align-items:center;gap:8px;}
.bv-fc .bv-vs{font-family:var(--font-label);font-size:13px;letter-spacing:.14em;color:var(--ink-muted);}
.bv-fc b{font:700 14px/1.25 var(--font-body);min-height:35px;display:flex;align-items:center;}
.bv-cc{display:inline-grid;place-items:center;width:54px;height:54px;background:#fff;padding:6px;flex:none;}
.bv-cc img{max-width:100%;max-height:100%;object-fit:contain;}
.bv-tag{display:inline-block;font:400 12px/1 var(--font-label);letter-spacing:.14em;text-transform:uppercase;padding:6px 9px 4px;clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));white-space:nowrap;}
.bv-tag.h{background:var(--hero-red);color:#fff;}
.bv-tag.a{background:var(--surface-sunken);color:var(--ink-soft);}
.bv-fc.nx::after{background:radial-gradient(85% 135% at 76% 26%,#a91330 0%,#8c0a2c 44%,#650620 100%);}
.bv-fc.nx{color:#fff;}
.bv-fc.nx .bv-dt,.bv-fc.nx .bv-vs{color:rgba(255,255,255,.85);}
.bv-fc.nx .bv-tag.h{background:#fff;color:var(--hero-red);}
.bv-none{padding:26px 26px 28px;font-size:15px;color:var(--ink-soft);}

.bv-panel{--bv-c:26px;--bv-o:8px;padding:24px 26px 26px;}
.bv-tl .bv-panel{--bv-c:22px;--bv-o:7px;padding:22px 8px;}
.bv-tbl{width:100%;border-collapse:collapse;font-size:14px;}
.bv-tbl th{font-family:var(--font-label);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);text-align:left;padding:0 8px 10px;}
.bv-tbl th:last-child,.bv-tbl td:last-child{text-align:right;}
.bv-tbl td{padding:10px 8px;border-bottom:1px solid var(--border);}
.bv-tbl .rk{font-family:var(--font-numerals);font-size:15px;color:var(--ink-muted);width:34px;}
.bv-tbl .cl{display:flex;align-items:center;gap:9px;font-weight:600;}
.bv-tbl .cl img{width:22px;height:22px;object-fit:contain;flex:none;background:#fff;}
.bv-tbl .pt{font-weight:800;}
.bv-tbl tr.me td{background:var(--brand-red-wash);}
.bv-tbl tr.me .rk,.bv-tbl tr.me .cl{color:var(--brand-red);}
.bv-tbl tr.gap td{text-align:center;color:var(--ink-muted);letter-spacing:.3em;padding:6px;}
.bv-tb .view-all{margin-top:16px;}
.bv-src{display:block;margin-top:8px;font-size:11px;color:var(--ink-muted);}

.bv-tls{display:grid;grid-template-columns:repeat(5,1fr);}
.bv-ti{padding:0 18px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}
.bv-ti:first-child{border-left:0;}
.bv-ti .bv-cd{font-family:var(--font-numerals);font-size:30px;line-height:1;color:var(--ink);}
.bv-ti .bv-cd small{font-family:var(--font-label);font-size:13px;letter-spacing:.14em;color:var(--ink-muted);margin-left:6px;text-transform:uppercase;}
.bv-ti .bv-r{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;font-weight:600;line-height:1.3;}
.bv-ti .bv-r svg{width:15px;height:15px;flex:none;margin-top:2px;}
.bv-ti .ic-s{color:var(--brand-red);} .bv-ti .ic-g{color:var(--brand-gold);}

@media (max-width:1000px){
  .bv-fx,.bv-tb,.bv-tl{grid-column:1 / -1;grid-row:auto;}
  .bv-fcs{grid-template-columns:repeat(2,1fr);row-gap:26px;}
  .bv-tls{grid-template-columns:repeat(2,1fr);gap:20px 0;}
  .bv-ti:nth-child(odd){border-left:0;}
}
@media (max-width:640px){
  .bv-panel{--bv-c:20px;--bv-o:6px;padding:20px 18px 22px;}
  .bv-tl .bv-panel{padding:20px 4px;}
}

/* ============================================================================
   TEAM-SUBNAV — zweite Header-Zeile auf den Team-Seiten (Team/Kader/Spieler/Teams-Übersicht),
   inspiriert von fcbayern.com/de/teams: alle echten Mannschaften direkt erreichbar, ohne erst zur
   Teams-Übersicht zurückzumüssen. Sitzt als zweite Zeile IM ".site-header" (selbe Sticky-Ebene).
   Breite Bildschirme: alle Mannschaften in einer Reihe (durch einen Trenner in Erwachsene/Jugend
   gegliedert). Schmale Bildschirme: zwei Reiter "Erwachsene"/"Jugend" (reiner CSS-Mechanismus über
   versteckte Radios — kein zusätzliches JS) schalten um, welche Gruppe darunter zu sehen ist.
   Bewusst KEINE Trennung nach Geschlecht bei der Jugend: die Jugend läuft als gemeinsame JSG
   (Wilhelmshavener HV, WSSV, TSV Jade), eine echte männlich/weiblich-Aufteilung liegt nicht vor
   (siehe assets/teams-demo-data.js) — stattdessen die echten Gruppennamen "Erwachsene"/"Jugend".
   ============================================================================ */
.team-subnav{border-top:1px solid var(--border);}
.team-subnav-bar{max-width:var(--max);margin:0 auto;padding:11px 32px;position:relative;}
.team-subnav input[type="radio"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.tsn-tabs{display:none;gap:8px;margin-bottom:10px;}
.tsn-tabs label{padding:6px 14px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;white-space:nowrap;transition:color .2s ease,background .2s ease,border-color .2s ease;}
.tsn-groups{display:flex;flex-wrap:wrap;align-items:center;gap:22px;}
.tsn-group{display:flex;flex-wrap:wrap;align-items:center;gap:22px;}
.tsn-group + .tsn-group{padding-left:22px;border-left:1px solid var(--border);}
[data-design="v2"] .team-subnav a{font-family:var(--font-label);font-weight:400;font-size:14px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;transition:color .2s ease;}
[data-design="v2"] .team-subnav a:hover{color:var(--ink);}
[data-design="v2"] .team-subnav a.active{color:var(--hero-red);}

@media (max-width:700px){
  .tsn-tabs{display:flex;}
  .tsn-groups{flex-wrap:nowrap;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tsn-groups::-webkit-scrollbar{display:none;}
  .tsn-group{display:none;flex-wrap:nowrap;gap:18px;padding-left:0;border-left:0;}
  .tsn-group + .tsn-group{padding-left:0;border-left:0;}
  #tsn-erwachsene:checked ~ .tsn-tabs label[for="tsn-erwachsene"],
  #tsn-jugend:checked ~ .tsn-tabs label[for="tsn-jugend"],
  #tsn-amateure:checked ~ .tsn-tabs label[for="tsn-amateure"]{background:var(--brand-red);border-color:var(--brand-red);color:#fff;}
  #tsn-erwachsene:checked ~ .tsn-groups .tsn-group[data-group="erwachsene"],
  #tsn-jugend:checked ~ .tsn-groups .tsn-group[data-group="jugend"],
  #tsn-amateure:checked ~ .tsn-groups .tsn-group[data-group="amateure"]{display:flex;}
}