/* =============================================================================
   SG BBM Breitensport - Design "Trikotkante"
   Gemeinsames Stylesheet fuer alle Seiten. Wird NACH css/style.css geladen.

   Zwei Materialien, konsequent durchgezogen:
     Blau-Polish   linear-gradient(165deg,#0a1cd6,#0616a8 55%,#04127e)
                   -> Flaechen: Sections (.dsn-card), Hero, Karten, Chips
     Off-White     linear-gradient(160deg,#FCFBF9,#EFEDE8 52%,#E2DED5)
                   -> alles Bedienbare: Buttons, Navbar, Partner-Leiste

   Wiederkehrende Motive:
     Trikotsaum    senkrechte Streifen des Trikots (dunkel/hell Blau x3,
                   dunkel/hell Rot x3). Gross am Sectionrand (8px-Raster,
                   schraeg nach oben auslaufend), klein als 12px-Naht links
                   an Buttons und inneren Karten, 48px an den Leisten.
     Ghost-Wort    ein Wort in 24rem, 5.5% Weiss, rechts oben je Section.
                   Kommt aus data-ghost am <i class="fx2">.
     Kicker        Flex-Zeile, roter 3px-Strich nimmt die Restbreite links.

   Markup-Haken pro Section:
     <section class="... dsn-card">
       <div class="ns-layer nb-fx" aria-hidden="true">
         <i class="fx1"></i><i class="fx2" data-ghost="Wort"></i></div>
   ============================================================================= */

/* ===========================================================================
   Uebernommen 1:1 aus beispiel.html, Block <style id="scrollfx">
   Reihenfolge unveraendert - die Kaskade dieser Datei entspricht exakt der
   Kaskade, die beispiel.html inline hatte.
   =========================================================================== */

/* Landingpage: Headlines in Saira Condensed 900 (Black) — gleiche Familie, deutlich fetter */
h1, h2, h3, h4 { font-weight: 900; }
/* ===== Scrolleffekt-Banner als Section-Header ===== */
.sbanner{ --p:0; --blau:#0818d8; --blau2:#0016a8; --rot:#f82818; --rot2:#ff4433;
  --cmax:1200px; --cpad:clamp(1.25rem,5vw,4rem); --taper:145px;   /* feste, sehr spitze Spitze -> links & rechts gleich */
  --gutter:calc(max(0px, (100vw - var(--cmax)) / 2) + var(--cpad));   /* Viewport-Rand -> Container-Content-Kante */
  position:relative;
  --gap:clamp(1rem,3vw,2rem);
  display:flex; align-items:center; gap:var(--gap);
  padding:0 0 clamp(1.5rem,4vw,2.5rem) 0; }   /* im Container: Titel fluchtet rechts zur Kartenkante */
.sbanner .frame{ position:relative; flex:1 1 auto; min-width:0; z-index:1;
  margin-left:calc(-1 * var(--gutter));   /* Balken bleedet links bis zum Viewport-Rand */
  height:96px;
  clip-path:polygon(0 0, calc(100% - var(--taper)) 0, 100% 50%, calc(100% - var(--taper)) 100%, 0 100%);
  overflow:hidden;
  transform:translateX(calc((var(--p) - 1) * 100%));   /* Spitze wandert von links rein */
  filter:drop-shadow(0 12px 26px rgba(0,0,40,0.45)); }
.sbanner .stripes{ position:absolute; inset:0; display:flex; flex-direction:column;
  --fadew:18%;                                          /* weiche Kante Richtung Text, ab Anfang */
  -webkit-mask:linear-gradient(90deg,#000 0,#000 calc(100% - var(--fadew)),transparent 100%);
          mask:linear-gradient(90deg,#000 0,#000 calc(100% - var(--fadew)),transparent 100%); }
.sbanner .stripe{ flex:1 1 0; }
.sbanner .b-blau{background:var(--blau2)} .sbanner .b-blau2{background:var(--blau)}   /* helle Sektion (#0818d8): außen dunkelblau */
.section-alt .sbanner .b-blau{background:var(--blau)} .section-alt .sbanner .b-blau2{background:var(--blau2)}   /* dunkle Sektion (#0016a8): außen hellblau (hell/dunkel/hell) */
.sbanner .b-rot{background:var(--rot)} .sbanner .b-rot2{background:var(--rot2)}
.sbanner .medallion{ position:absolute; left:12px; top:50%; transform:translateY(-50%);
  height:70%; aspect-ratio:1/1; display:grid; place-items:center; z-index:3;
  opacity:min(1,calc(var(--p)*3)); }
.sbanner .medallion img{ width:100%; height:100%; object-fit:contain; max-width:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,50,0.6)) drop-shadow(0 0 1px rgba(255,255,255,0.5)); }
/* gespiegelter Balken vom rechten Rand */
.sbanner .frame.right{ position:absolute; top:0; right:calc(-1 * var(--gutter)); z-index:0;
  width:max(0px, calc(var(--gutter) - var(--gap)));   /* Spitze bei Titel-Rechtskante + gap (wie links) */
  height:96px; flex:none; margin:0;
  transform:translateX(calc((1 - var(--p)) * 100%));                                   /* wandert von rechts rein */
  clip-path:polygon(var(--taper) 0, 100% 0, 100% 100%, var(--taper) 100%, 0 50%); }    /* Spitze links, im rechten Gutter */
.sbanner .frame.right .stripes{
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 var(--fadew),#000 100%);
          mask:linear-gradient(90deg,transparent 0,#000 var(--fadew),#000 100%); }
.sbanner .frame.right .medallion{ display:none; }   /* rechter Balken ohne Logo */
.sbanner-title{ flex:0 0 auto; text-align:right; padding:0 0 0 clamp(.4rem,1.5vw,1rem); position:relative; z-index:2;
  opacity:clamp(0, calc((var(--p) - 0.7) / 0.25), 1);
  transform:translateX(calc((1 - var(--p)) * -40px)); }
.sbanner-title .kicker{ display:block; color:#ff4433; font-weight:800; font-size:.85rem; letter-spacing:.18em; margin-bottom:.2rem; }
.sbanner-title h2{ margin:0; font-size:clamp(1.5rem,3.5vw,2.4rem); line-height:1.05; }

/* "Unsere Mannschaften" — Karten im Stil des Scrollbalkens (Chevron rechts + Streifen-Kante + Fade) */
.team-cat-grid .team-cat{ position:relative; overflow:hidden;
  background:linear-gradient(120deg,#0016a8,#0818d8);
  border:0; border-radius:0; padding:1.6rem 2.6rem 1.6rem 1.5rem;
  filter:drop-shadow(0 8px 18px rgba(6,10,35,.4)); }
.team-cat-grid .team-cat::before{ content:""; position:absolute; left:0; top:0; height:6px; width:100%;
  background:linear-gradient(90deg,#cc1d0a 0%,#f82818 50%,#ff4433 100%); }
.team-cat-grid .team-cat::after{ display:none; }          /* 01/02/03 entfernt */
.team-cat-grid .team-cat .count small{ color:#ff4433; }

/* News: Bento-Mosaik (wie Löwen) — Featured groß links, kleinere rechts, breite Karte unten */
.news-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  grid-auto-rows:clamp(230px,24vw,340px);
  width:min(1500px, calc(100vw - 3rem)); margin-left:50%; transform:translateX(-50%);
  box-sizing:border-box; }   /* breiter als Container, aber begrenzt + zentriert */
@media (max-width:900px){ .news-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .news-grid{ grid-template-columns:1fr; } }
.news-grid .news-card{ position:relative; aspect-ratio:auto; height:auto; overflow:hidden;
  display:block; background:#0016a8; border:0; box-shadow:0 6px 16px rgba(0,0,40,.35); }
.news-grid .news-card:first-child{ grid-column:span 2; }        /* Featured: 2 Spalten breit */
.news-grid .news-card:nth-child(6){ grid-column:span 2; }       /* breite Karte unten rechts */
@media (max-width:560px){
  .news-grid .news-card:first-child, .news-grid .news-card:nth-child(6){ grid-column:span 1; } }
/* Bild füllt die Karte */
.news-grid .news-card .nc-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease; }
.news-grid .news-card .nc-scrim{ display:block; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 32%, rgba(0,0,45,.88) 100%); }
/* Text unten über dem Bild */
.news-grid .news-card .nc-content{ position:absolute; inset:auto 0 0 0; z-index:2;
  padding:1.1rem 1.2rem; color:#fff; display:block; }
.news-grid .news-card .nc-content::after, .news-grid .news-card .nc-content::before{ display:none; }
.news-grid .news-card .meta{ font-family:'SG Display',sans-serif; letter-spacing:.06em;
  font-size:.86rem; color:rgba(255,255,255,.85); margin:0 0 .25rem; }
.news-grid .news-card .teaser{ display:none; }                  /* Overlay: nur Datum + Titel */
.news-grid .news-card .nc-content{ padding:1.3rem 1.4rem; }
.news-grid .news-card h3{ margin:0; font-size:1.2rem; line-height:1.15; }
.news-grid .news-card:first-child h3{ font-size:clamp(1.6rem,2.8vw,2.5rem); }
.news-grid .news-card:nth-child(6) h3{ font-size:clamp(1.3rem,2.1vw,1.9rem); }
/* 6 News im Mosaik, Rest über "Alle News" */
.news-grid .news-card:nth-child(n+7){ display:none; }
.news-foot .nf-controls{ display:none; }
/* "Alle News" auf Grid-Breite, rechtsbündig unter dem rechten Bild */
.news-foot{ width:min(1500px, calc(100vw - 3rem)); margin-left:50%; transform:translateX(-50%);
  justify-content:flex-end; }
/* Nächste-Spiele-Tabelle im Balken-Stil */
.table-wrap{ position:relative; border:0; border-radius:0; box-shadow:none; padding-top:6px;
  background:linear-gradient(120deg,#0016a8,#0818d8);
  filter:drop-shadow(0 8px 18px rgba(0,0,40,.4)); }
.table-wrap::before{ content:""; position:absolute; left:0; top:0; height:6px; width:100%; z-index:2;
  background:linear-gradient(90deg,#a80000 0%,#f82818 50%,#ff4433 100%); }
.table-wrap .schedule{ background:transparent; }
.table-wrap .schedule th{ background:transparent; }
.table-wrap .schedule td:last-child, .table-wrap .schedule th:last-child{ padding-right:2rem; }

/* CTA "Lust auf Handball?" im Balken-Stil (ohne Fade, damit der Button sichtbar bleibt) */
.cta-band .card{ position:relative; overflow:hidden; border:0; border-radius:0; box-shadow:none;
  background:linear-gradient(120deg,#0016a8,#0818d8);
  filter:drop-shadow(0 8px 18px rgba(0,0,40,.4)); }
.cta-band .card::before{ content:""; top:0; left:0; right:auto; bottom:auto; width:100%; height:6px; transform:none;
  opacity:1;   /* Basisregel blendet auf 0.08 -> Zierstreifen sichtbar machen */
  background:linear-gradient(90deg,#cc1d0a 0%,#f82818 50%,#ff4433 100%); }

/* "Alle News" + "Kompletter Spielplan" im Stil vom Partner-Button */
.text-link[href="news.html"], .text-link[href="spielplan.html"]{
  display:inline-flex; align-items:center; gap:.55rem; position:relative; overflow:hidden; isolation:isolate;
  padding:.7rem 1.5rem; background:#0818d8; color:#fff !important;
  font-family:'SG Display',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  box-shadow:0 10px 30px rgba(0,0,40,.42); text-decoration:none;
  transition:transform .2s, box-shadow .2s; }
.text-link[href="news.html"]:hover, .text-link[href="spielplan.html"]:hover{
  transform:translateY(-2px); box-shadow:0 16px 38px rgba(0,0,40,.5); }
.text-link[href="news.html"]::after, .text-link[href="spielplan.html"]::after{ content:none; }
.text-link[href="news.html"]::before, .text-link[href="spielplan.html"]::before{
  content:""; position:absolute; z-index:-1; top:-25%; right:-14%; width:48%; height:150%;
  background:linear-gradient(160deg,#f82818 0%,#a80000 100%); transform:skewX(-14deg); }
.text-link[href="news.html"] img, .text-link[href="spielplan.html"] img{ height:24px; width:auto; flex:none; }
.text-link[href="sponsoren.html"]{ color:#ff4433; }
.text-link[href="sponsoren.html"]:hover{ color:#ff6a6a; }

/* Hero: roter Bereich rechts als Streifen-Block, faded links transparent in die Slide */
.hero::before{
  top:0; right:calc(-18% + 19px);          /* Fortsetzung der Header-Diagonale (Header-Höhe ~77px * tan14 ≈ 19px) */
  transform-origin:top;
  background:repeating-linear-gradient(180deg, #f82818 0 16px, #ff4433 16px 32px);
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 55%, #000 100%);
          mask:linear-gradient(90deg, transparent 0, #000 55%, #000 100%); }

/* Hero-Textbox im Streifen-/Karten-Stil: flaches Blau + rote Kante oben + Schatten (Schräge bleibt) */
.hero .inner::before{ display:none; }
/* bessere Lesbarkeit: sanfter dunkler Verlauf am unteren Hero über die volle Breite (über Foto, unter Text) */
.hero-slides::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,22,.8) 0%, rgba(0,0,22,.4) 26%, transparent 56%); }
.hero .inner{ text-align:right; }                   /* Text rechtsbündig */
.hero .inner .actions{ justify-content:flex-end; }
.hero .inner .actions .button-primary{ border:0; box-shadow:none; }   /* kein blauer Rand/Halo im Hero */
/* Text hebt sich klar vom Foto ab */
.hero .inner .kicker, .hero .inner h1, .hero .inner .sub{
  text-shadow:0 2px 4px rgba(0,0,20,.9), 0 6px 20px rgba(0,0,20,.85), 0 0 2px rgba(0,0,20,.95); }

/* Impressionen-Bildslider (volle Bildschirmbreite, horizontales Schieben) */
.fslider{ position:relative; overflow:hidden; width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(260px,32vw,440px); box-shadow:0 12px 30px rgba(0,0,40,.35); }
.fstrack{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none; }
.fstrack::-webkit-scrollbar{ display:none; }
.fslide{ flex:0 0 auto; width:clamp(280px,33.334vw,560px); height:100%; scroll-snap-align:start;
  background-size:cover; background-position:center 30%; }
.fs-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border:0; cursor:pointer;
  background:rgba(0,0,40,.45); color:#fff; font-family:'SG Display',sans-serif; font-size:1.7rem; line-height:1; }
.fs-arrow:hover{ background:#f82818; }
.fs-prev{ left:12px; } .fs-next{ right:12px; }

@media (prefers-reduced-motion:reduce){
  .sbanner .frame{transform:none} .sbanner-title{opacity:1;transform:none} .sbanner .medallion{opacity:1}
  .fstrack{scroll-behavior:auto} }

/* ===========================================================================
   Uebernommen 1:1 aus beispiel.html, Block <style id="newssplit">
   Reihenfolge unveraendert - die Kaskade dieser Datei entspricht exakt der
   Kaskade, die beispiel.html inline hatte.
   =========================================================================== */

/* SGBBM-News-Section: Hintergrund = "40 Großer Split" (matchday-komposition-2) */
.news-split, .cta-split{ position:relative; isolation:isolate; overflow:hidden;
  background:#f82818 !important; background-image:none !important;
  --rot:#f82818; --blau:#0818d8; --weiss:#EFEDE8; }
.news-split > .container, .cta-split > .container{ position:relative; z-index:1; }
.news-split .ns-layer, .cta-split .ns-layer{ position:absolute; inset:0; pointer-events:none; }
.news-split .ns-weiss, .cta-split .ns-weiss{ z-index:-2; background:var(--weiss); clip-path:polygon(50% 0,100% 0,100% 55%); }
.news-split .ns-blau, .cta-split .ns-blau{ z-index:-2; background:var(--blau); clip-path:polygon(0 45%,100% 85%,100% 100%,0 100%); }
.news-split .ns-band, .cta-split .ns-band{ z-index:-1; background:repeating-linear-gradient(90deg,var(--blau) 0 14px,transparent 14px 32px); clip-path:polygon(70% 0,100% 0,100% 30%); }
.news-split .ns-grain, .cta-split .ns-grain{ z-index:-1; opacity:.13; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Wasserzeichen der Partnervereine entlang der Blau-Kante.
   Kante = Oberkante von .ns-blau: y = 45% + 40% * x. Die Logos sitzen mit der
   Unterkante knapp darueber (1.2% Luft) und werden auf den roten Bereich
   oberhalb der Kante beschnitten. Dunkelrot, weil gleiches Rot auf Rot nicht liest. */
.news-split .ns-wm, .teams-split .ns-wm{ z-index:-1; }
/* Feste Groesse statt Prozent der Sectionhoehe: die Sections sind unterschiedlich
   hoch, 8% haetten in Teams nur rund die halbe Wappengroesse ergeben. */
.news-split .ns-wm img, .teams-split .ns-wm img{ position:absolute; width:auto;
  height:clamp(52px,5.5vw,84px); transform:translate(-50%,-100%); }
.news-split .ns-wm{ clip-path:polygon(0 0,100% 0,100% 85%,0 45%); }
/* Viadukt im blauen Bereich: linksbuendig, steht auf der Unterkante der Section.
   Clip = exakt die Blau-Flaeche (.ns-blau), nichts laeuft ins Rot.
   Blau-tief (#0016a8), weil das Wasserzeichen-Blau #0818d8 die Flaechenfarbe selbst ist. */
/* Band auf der Unterkante der blauen Flaeche: Viadukt / Schriftzug im Wechsel.
   space-evenly verteilt die Luft gleich gross zwischen alle Elemente UND an beide
   Raender - Randabstand = Abstand Text/Viadukt. Dafuer muss die Reihe hineinpassen,
   die Elemente sind entsprechend schmaler als beim durchlaufenden Band vorher. */
.news-split .ns-wm-blau{ z-index:-1; clip-path:polygon(0 45%,100% 85%,100% 100%,0 100%);
  display:flex; align-items:flex-end; justify-content:space-evenly; flex-wrap:nowrap; gap:0; }
.news-split .ns-wm-blau img{ flex:none; width:min(16%,260px); height:auto; }
/* Schrift auf dieselbe Grundlinie und Blockhoehe wie die Viadukte:
   Viadukt 1200:320 -> Hoehe = Breite / 3.75 = rund 69px bei 260px Breite.
   Zwei Zeilen a 0.92 Zeilenhoehe treffen das bei rund 37px Schriftgrad. */
.news-split .ns-wm-blau .wm-text{ flex:none; margin:0; text-align:center; white-space:nowrap;
  font-family:'SG Display',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(18px,2.2vw,37px); line-height:.92; letter-spacing:.02em;
  color:#0016a8; opacity:.55; }
/* Teams: roter Bereich wird von zwei Kanten begrenzt -
   Rot/Blau  y = 68% + 24% * x   (Oberkante .ns-blau, sichtbar bis x = 58.7%)
   Rot/Weiss y = 100% - 106.9% * (x - 42%)  (Kante .ns-weiss, sichtbar ab x = 58.7%)
   Schnittpunkt der beiden bei (58.7% | 82.1%). */
.teams-split .ns-wm{ clip-path:polygon(0 0,100% 0,100% 38%,58.7% 82.1%,0 68%); }

/* Titel lesbar (liegt ueber weissem Keil / Streifen oben rechts) */
.news-split .sbanner-title h2{ color:#0616a8; }
.news-split .sbanner-title .kicker{ color:#0616a8; }

/* Exklusiv-Partner- & Teams-Section: Hintergrund = "27 Nachbau der Vorlage" (matchday-komposition) */
.partner-split, .teams-split, .sponsoren-split{ position:relative; isolation:isolate; overflow:hidden;
  background:#f82818 !important; background-image:none !important;
  --rot:#f82818; --blau:#0818d8; --weiss:#EFEDE8; }
.partner-split > .container, .partner-split .marquee, .teams-split > .container, .sponsoren-split > .container, .sponsoren-split .marquee{ position:relative; z-index:1; }
.partner-split .ns-layer, .teams-split .ns-layer, .sponsoren-split .ns-layer{ position:absolute; inset:0; pointer-events:none; }
.partner-split .ns-blau, .teams-split .ns-blau, .sponsoren-split .ns-blau{ z-index:-2; background:var(--blau); clip-path:polygon(0 68%,100% 92%,100% 100%,0 100%); }
.partner-split .ns-weiss, .teams-split .ns-weiss, .sponsoren-split .ns-weiss{ z-index:-1; background:var(--weiss); clip-path:polygon(100% 38%,100% 100%,42% 100%); }
/* Teams + Sponsoren: Streifenband an der linken Kante (rechts entfaellt) */
.teams-split .ns-band, .sponsoren-split .ns-band{ z-index:-1; background:repeating-linear-gradient(90deg,var(--blau) 0 14px,transparent 14px 32px);
  clip-path:polygon(0 0,30% 0,0 38%); }
/* Exklusiv-Partner: Streifenband nur an der linken Kante */
.partner-split .ns-band-l{ z-index:-1; background:repeating-linear-gradient(90deg,var(--blau) 0 14px,transparent 14px 32px);
  clip-path:polygon(0 0,30% 0,0 38%); }
/* Sponsoren: blaues Band ueber den weissen Keil legen -> laeuft ungebrochen bis zur
   rechten Kante und geht nahtlos in das Blau des Footers ueber. */
.sponsoren-split .ns-weiss{ z-index:-2; }
.sponsoren-split .ns-blau{ z-index:-1; }
/* dunkelblaue Streifen des Footers nach oben in dieses Band verlaengern.
   Spitze liegt AUF der Randlinie des blauen Bereichs (y = 68% + 24% * x): bei 35%
   ergibt das 76.4%. Von dort laeuft die Oberkante auf der Diagonale nach rechts,
   die Unterkante faellt zur Sectionkante bei 65% - dort setzt der Footer-Keil an. */
.sponsoren-split .ns-bandblau{ z-index:-1;
  background:repeating-linear-gradient(90deg,#0016a8 0 14px,transparent 14px 32px);
  clip-path:polygon(35% 76.4%,100% 92%,100% 100%,65% 100%); }
.partner-split .ns-grain, .teams-split .ns-grain, .sponsoren-split .ns-grain{ z-index:-1; opacity:.13; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Kopf ohne Scrollbalken: SG-Logo direkt neben dem Titel, laeuft scroll-gekoppelt
   vom linken Viewport-Rand bis zur Endposition. Breite wie das News-Band ->
   rechte Textkante fluchtet mit dem "Alle News"-Button. */
.partner-split .container, .news-split .container, .spiele-split .container, .teams-split .container, .sponsoren-split .container{
  max-width:none; width:min(1500px, calc(100vw - 3rem)); padding:0; }
.container:has(> .ph-head){ position:relative; }   /* Bezug fuer die Distanz-Messung des Kopfes */
.ph-head{ --p:0; display:flex; align-items:center; gap:clamp(.8rem,2vw,1.3rem);
  width:fit-content; margin-left:auto; margin-bottom:clamp(1.5rem,4vw,2.5rem); text-align:right;
  /* --dist = Abstand linke Viewport-Kante -> Endposition (setzt JS); p=0 am linken Rand, p=1 rechtsbündig */
  transform:translateX(calc((var(--p) - 1) * var(--dist, 60vw))); will-change:transform; }
@media (prefers-reduced-motion:reduce){ .ph-head{ transform:none; } }
.ph-logo{ height:clamp(56px,7vw,84px); width:auto; flex:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,50,.5)); }
.ph-txt .kicker{ display:block; color:#EFEDE8; font-weight:800; font-size:.85rem;
  letter-spacing:.18em; margin-bottom:.2rem; }
.ph-txt h2{ margin:0; font-size:clamp(1.5rem,3.5vw,2.4rem); line-height:1.05; color:#fff; }
/* News-Kopf: dunkle Schrift beibehalten (liegt auf dem weissen Keil) */
.news-split .ph-txt .kicker, .news-split .ph-txt h2{ color:#0616a8; }

/* ===== Blaue Zierleisten an den weissen Sektions-Koepfen =====
   Obere Leiste ueber dem Kicker, untere unter der Headline -> rahmt den ganzen Kopf. */
.partner-split .ph-txt, .teams-split .ph-txt, .sponsoren-split .ph-txt{
  position:relative; padding-block:.7rem; }
.partner-split .ph-txt::before, .partner-split .ph-txt::after,
.teams-split  .ph-txt::before, .teams-split  .ph-txt::after,
.sponsoren-split .ph-txt::before, .sponsoren-split .ph-txt::after{
  content:""; position:absolute; left:0; right:0; height:3px; background:#0818d8; }
.partner-split .ph-txt::before, .teams-split .ph-txt::before, .sponsoren-split .ph-txt::before{ top:0; }
.partner-split .ph-txt::after, .teams-split .ph-txt::after, .sponsoren-split .ph-txt::after{ bottom:0; }
/* dunkle Koepfe (auf dem weissen Keil): rote Zierleisten */
.news-split .ph-txt, .spiele-split .ph-txt{ position:relative; padding-block:.7rem; }
.news-split .ph-txt::before, .news-split .ph-txt::after,
.spiele-split .ph-txt::before, .spiele-split .ph-txt::after{
  content:""; position:absolute; left:0; right:0; height:3px; background:#f82818; }
.news-split .ph-txt::before, .spiele-split .ph-txt::before{ top:0; }
.news-split .ph-txt::after, .spiele-split .ph-txt::after{ bottom:0; }

/* Nächste-Spiele-Section: Hintergrund = "29 Blau gestreift" (matchday-komposition) */
.spiele-split{ position:relative; isolation:isolate; overflow:hidden;
  background:#f82818 !important; background-image:none !important;
  --blau:#0818d8; --blau-tief:#0016a8; --weiss:#EFEDE8; }
.spiele-split > .container{ position:relative; z-index:1; }
.spiele-split .ns-layer{ position:absolute; inset:0; pointer-events:none; }
/* gleiche Komposition wie SGBBM News: "40 Großer Split" */
.spiele-split .sp-topblau{ z-index:-2; background:var(--blau);
  clip-path:polygon(0 0,42% 0,0 22%); }   /* fuehrt das Blau der Section darueber weiter -> keine Trennkante */
.spiele-split .sp-blau{ z-index:-2; background:var(--blau); clip-path:polygon(0 45%,100% 85%,100% 100%,0 100%); }
.spiele-split .sp-weiss{ z-index:-2; background:var(--weiss); clip-path:polygon(42% 0,100% 0,100% 55%); }   /* startet bündig am Weiss der Section darüber */
.spiele-split .sp-band{ z-index:-1; background:repeating-linear-gradient(90deg,var(--blau) 0 14px,transparent 14px 32px);
  clip-path:polygon(70% 0,100% 0,100% 30%); }
.spiele-split .sp-grain{ z-index:-1; opacity:.13; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Balken + Kicker auf die Kompositions-Farben abgestimmt */
.spiele-split .sbanner{ --blau:#0818d8; --blau2:#0016a8; --rot:#f82818; --rot2:#ff4433; }
.spiele-split .sbanner-title .kicker{ color:#EFEDE8; }
/* Kopf liegt auf dem weissen Keil -> dunkle Schrift wie bei den News */
.spiele-split .ph-txt .kicker, .spiele-split .ph-txt h2{ color:#0616a8; }
/* Alle Schriften in Section rechtsbündig */
.partner-split .container{ text-align:right; }
.spiele-split .container{ text-align:right; }
.teams-split .container{ text-align:right; }
.sponsoren-split .container{ text-align:right; }
/* Spieltag-Tabelle in den Kompositions-Toenen (Blau-Flaeche + rote Zierlinie) */
.table-wrap{ background:linear-gradient(120deg,#0016a8,#0818d8); }
/* ===== Footer: Hintergrund = "34 Blau/Weiß, Rot als Kante" (matchday-komposition) ===== */
.site-footer{ background:#0818d8 !important; background-image:none !important;
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:clamp(4rem,7vw,6rem) 2.5rem;
  --rot:#f82818; --rot-tief:#cc1d0a; --blau:#0818d8; --blau-tief:#0016a8; --weiss:#EFEDE8; }
.site-footer::before{ display:none !important; }   /* alter schraeger Rot-Block raus */
.site-footer .container{ position:relative; z-index:1;
  max-width:none; width:min(1500px, calc(100vw - 3rem)); padding:0; }
.site-footer .ns-layer{ position:absolute; inset:0; pointer-events:none; }
/* Keil flacher als in der Vorlage: der Footer ist deutlich niedriger als eine Content-Section,
   so bleibt die Schnittlinie unter den Spalten statt mitten durch die Links zu laufen. */
.site-footer .fs-weiss{ z-index:-2; background:var(--weiss); clip-path:polygon(100% 62%,100% 100%,76% 100%); }
.site-footer .fs-band{ z-index:-1; background:repeating-linear-gradient(90deg,var(--blau-tief) 0 14px,transparent 14px 32px);
  clip-path:polygon(65% 0,100% 0,100% 35%); }
.site-footer .fs-kante{ z-index:-1; background:var(--rot); clip-path:polygon(100% 60%,100% 63.5%,77.5% 100%,73.5% 100%); }
.site-footer .fs-grain{ z-index:-1; opacity:.13; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1 1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* Inhalt liegt auf Rot bzw. dem blauen Band -> durchgehend weisse Schrift */
.site-footer, .site-footer h4, .site-footer .f-brand .name{ color:#fff; }
.site-footer a{ color:rgba(255,255,255,.85); }
.site-footer a:hover{ color:#fff; }
/* Trennlinie als Marken-Zierstreifen statt grauer Linie */
.site-footer .footer-grid{ border-bottom:0; position:relative; }
.site-footer .footer-grid::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--rot-tief) 0%,var(--rot) 100%); }   /* Rot als Kante, auf Blau UND Weiss lesbar */
/* Bottom-Zeile auf das gleiche Raster wie das Footer-Grid -> "Made by DV" sitzt
   buendig in der Spalte "SG BBM Familie", unter der roten Linie, auf Blau. */
.site-footer .footer-bottom{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem 2.5rem;
  align-items:center; justify-content:initial; }
@media (max-width:760px){ .site-footer .footer-bottom{ grid-template-columns:1fr; } }
/* "Made by DV" ohne Chip; Kontur-Schatten haelt die hellen Logo-Teile auf jedem Grund lesbar. */
.site-footer .made-by{ background:none; padding:0; margin:0; justify-self:start; }
.site-footer .made-by img{ opacity:1;
  filter:drop-shadow(0 0 1px rgba(15,22,54,1)) drop-shadow(0 0 1px rgba(15,22,54,.9)) drop-shadow(0 1px 3px rgba(15,22,54,.55)); }
.site-footer .made-by:hover img{ transform:translateY(-1px);
  filter:drop-shadow(0 0 1px rgba(15,22,54,1)) drop-shadow(0 0 2px rgba(15,22,54,.95)) drop-shadow(0 2px 5px rgba(15,22,54,.6)); }
body{ background:#0F1636; }   /* Grund hinter der Seite ebenfalls Nacht */
.table-wrap::before{ background:linear-gradient(90deg,#cc1d0a 0%,#f82818 50%,#ff4433 100%); }

/* ===== Buttons auf die Kompositions-Palette umgestellt =====
   Blau #0818d8/#0016a8 -> #0818d8/#0016a8 · Rot #f82818/#a80000/#ff4433 -> #f82818/#cc1d0a/#ff4433 */
.button-primary{ background:#0818d8; }
.button-primary::after{ background:linear-gradient(160deg,#f82818 0%,#cc1d0a 100%); }
.button-primary:hover{ background:#0818d8; }
.button-blue{ background:#0818d8; }
.button-blue:hover{ background:#2B49E8; }
.text-link[href="news.html"], .text-link[href="spielplan.html"]{ background:#0818d8; }
.text-link[href="news.html"]::before, .text-link[href="spielplan.html"]::before{
  background:linear-gradient(160deg,#f82818 0%,#cc1d0a 100%); }
.partner-fab{ background:#0818d8; }
.partner-fab::before{ background:linear-gradient(160deg,#f82818 0%,#cc1d0a 100%); }

/* ===== Navbar: "19 Schwebende Leiste über Hero-Fläche" =====
   Header selbst transparent, die Leiste schwebt mit Abstand ueber dem Hero. */
.site-header{ background:transparent !important; border:0 !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  position:fixed !important; left:0; right:0; top:0;   /* Hero rutscht dahinter bis an den Bildschirmrand */
  padding-top:1.25rem; }
.site-header::before, .site-header::after{ display:none !important; }   /* alter Fade + roter Splitter weg */
.site-header .inner{ position:relative; isolation:isolate; overflow:hidden;
  max-width:none !important; margin:0 auto; min-height:84px;
  background:#0016a8; box-shadow:0 18px 40px rgba(6,10,35,.55);
  padding-inline:clamp(1rem,2.5vw,2rem) !important; }
.site-header .inner > *{ position:relative; z-index:1; }
/* Leiste haelt seitlich Abstand zum Bildschirmrand und bleibt sauber auf Containerbreite */
.site-header{ padding-inline:clamp(.75rem,2vw,1.5rem); }
.site-header .inner{ width:min(1440px,100%); }   /* Leiste breiter */
/* Nav-Buttons im Design der Team-Karten ("Unsere Mannschaften"):
   blauer 120deg-Verlauf, 6px roter Zierstreifen oben, kantig, Drop-Shadow.
   Der Streifen laeuft ueber ::after - ::before bleibt das SG-Logo aus style.css. */
.main-nav .button-primary.nav-cta{ background:linear-gradient(120deg,#0016a8,#0818d8) !important;
  box-shadow:none; border:0; border-radius:0; position:relative; overflow:hidden;
  filter:drop-shadow(0 8px 18px rgba(6,10,35,.4));
  min-width:215px; padding:.85rem 1rem .6rem; justify-content:center; white-space:nowrap; }
.main-nav .button-primary.nav-cta::after{ display:block !important; content:"" !important;
  position:absolute; left:0; top:0; right:auto; bottom:auto; z-index:2;
  width:100%; height:6px; transform:none;
  background:linear-gradient(90deg,#cc1d0a 0%,#f82818 50%,#ff4433 100%) !important; }
.main-nav .button-primary.nav-cta:hover{ background:linear-gradient(120deg,#0016a8,#0818d8) !important;
  box-shadow:none; filter:drop-shadow(0 12px 24px rgba(6,10,35,.5)); }
.main-nav{ gap:clamp(.8rem,1.6vw,1.5rem); }
/* Exklusiv-Partner-Zeile: Blau-Ton der Leiste; beim Andocken unter der Navbar
   nimmt sie deren Breite an (schwebender Block) */
.partner-bar{ background:#0016a8 !important; border-bottom:0 !important;
  width:100%; margin-inline:auto;
  transition:padding .25s ease, width .3s ease, box-shadow .3s ease; }
.partner-bar.is-stuck{ width:min(1440px,100%);
  box-shadow:0 18px 40px rgba(6,10,35,.55); }

@media (max-width:1180px){
  .brand .brand-text{ font-size:.88rem; }
  .brand .brand-text small{ display:none; }   /* schmale Fenster: Zusatzzeile weg statt abgeschnitten */
  .brand img{ height:44px; }
  .main-nav{ gap:.7rem; }
  .main-nav a{ font-size:.85rem; }
  .main-nav .button-primary.nav-cta{ padding:.75rem .85rem .5rem; }
}

/* ===== Hero-Fläche dazu: Nacht->Blau-tief-Verlauf ===== */
.hero{ background:linear-gradient(160deg,#0F1636,#0016a8) !important; }
.hero-slides .slide.navy{ background:linear-gradient(160deg,#0F1636,#0016a8) !important; }
.hero::before{ display:none; }

/* ===== Politur: die Flaechen sollen nicht wie flach gefuellte Kloetze wirken =====
   1. Verlaeufe statt Volltoenen - gleiche Markentoene, nur mit Tiefe
   2. Schlagschatten an den geclippten Keilen - die Flaechen liegen sichtbar
      uebereinander statt stumpf aneinanderzustossen. Richtung folgt jeweils der
      freiliegenden Kante des Clips, deshalb pro Keiltyp eine eigene Regel.
   3. Vignette pro Section - Raender fallen leicht ab, Mitte bleibt offen. */

/* --- 1. Verlaeufe --------------------------------------------------------- */
.news-split, .cta-split, .partner-split, .teams-split, .sponsoren-split, .spiele-split{
  background-image:linear-gradient(155deg,#ff3a26 0%,#f82818 45%,#d81b0c 100%) !important; }
.news-split .ns-blau, .cta-split .ns-blau, .partner-split .ns-blau,
.teams-split .ns-blau, .sponsoren-split .ns-blau,
.spiele-split .sp-blau, .spiele-split .sp-topblau{
  background:linear-gradient(150deg,#0b1ee6 0%,#0818d8 42%,#000f8e 100%); }
.news-split .ns-weiss, .cta-split .ns-weiss, .partner-split .ns-weiss,
.teams-split .ns-weiss, .sponsoren-split .ns-weiss, .spiele-split .sp-weiss,
.site-footer .fs-weiss{
  background:linear-gradient(150deg,#F7F5F1 0%,#EFEDE8 45%,#DEDAD1 100%); }
.site-footer{ background-image:linear-gradient(155deg,#0b1ee6 0%,#0818d8 45%,#000f8e 100%) !important; }

/* --- 2. Kanten mit Tiefe --------------------------------------------------- */
/* Weisser Keil oben rechts -> Kante zeigt nach unten links */
.news-split .ns-weiss, .cta-split .ns-weiss, .spiele-split .sp-weiss{
  filter:drop-shadow(-9px 9px 18px rgba(6,10,45,.3)); }
/* Weisser Keil unten rechts -> Kante zeigt nach oben links */
.partner-split .ns-weiss, .teams-split .ns-weiss, .sponsoren-split .ns-weiss,
.site-footer .fs-weiss{
  filter:drop-shadow(-9px -9px 18px rgba(6,10,45,.3)); }
/* Blaues Band unten -> Kante zeigt nach oben */
.news-split .ns-blau, .cta-split .ns-blau, .partner-split .ns-blau,
.teams-split .ns-blau, .sponsoren-split .ns-blau, .spiele-split .sp-blau{
  filter:drop-shadow(0 -10px 20px rgba(6,10,45,.32)); }
/* Blauer Zwickel oben links -> Kante zeigt nach unten rechts */
.spiele-split .sp-topblau{ filter:drop-shadow(9px 9px 18px rgba(6,10,45,.3)); }

/* --- 3. Vignette ----------------------------------------------------------- */
.news-split::after, .cta-split::after, .partner-split::after, .teams-split::after,
.sponsoren-split::after, .spiele-split::after, .site-footer::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(135% 95% at 50% 38%, transparent 58%, rgba(4,8,40,.2) 100%); }


/* =====================================================================
   DESIGN "TRIKOTKANTE" (aus news-design.html, Variante 7 - schraeg nach oben)
   Gilt fuer alle Sections mit .dsn-card und den Footer. Die bisherigen
   Kompositionen (rote Grundflaeche, Keile, Streifenbaender, Wasserzeichen-
   Ketten) sind aus dem Markup entfernt; ihre CSS-Regeln weiter oben sind
   damit tot, aber harmlos - Aufraeumen ist ein eigener Schritt.
   Hero und Exklusiv-Partner-Leiste bleiben randlos (kein .dsn-card).
   ===================================================================== */
body{ background:#fff !important; }

/* --- Karte: blauer Polish-Grund, schwebt auf Weiss ------------------ */
.dsn-card{ position:relative; isolation:isolate; overflow:hidden;
  background:#0818d8 !important;
  background-image:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%) !important;
  width:min(1640px, calc(100vw - clamp(1.5rem,5vw,5rem))); margin-inline:auto;
  margin-block:clamp(1.5rem,5vw,5rem); border-radius:0;
  box-shadow:0 26px 64px rgba(6,10,45,.22); }
.dsn-card::after{ background:none; }                          /* Politur-Vignette aus */
.dsn-card :is(.ns-grain,.sp-grain,.fs-grain){ opacity:.07; }

/* --- Effekt-Ebene: Trikotsaum links + Ghost-Wort rechts oben -------- */
.dsn-card .nb-fx{ position:absolute; inset:0; pointer-events:none; z-index:-1; }
.dsn-card .nb-fx i{ position:absolute; display:block; font-style:normal; }
/* Saum: ein Trikot-Zyklus a 12 Streifen a 8px = 96px (vorher zwei Zyklen).
   Auslauf schraeg nach oben (Achse 25deg): unten links voll, entlang einer
   Diagonale Richtung oben rechts weg. Kein box-shadow - die Maske wuerde ihn
   ohnehin mitschneiden. */
.dsn-card .nb-fx .fx1{ left:0; top:0; bottom:0; width:clamp(170px,17%,270px);
  background:repeating-linear-gradient(90deg,
    #0016a8 0 8px,#0818d8 8px 16px,#0016a8 16px 24px,#0818d8 24px 32px,#0016a8 32px 40px,#0818d8 40px 48px,
    #cc1d0a 48px 56px,#f82818 56px 64px,#cc1d0a 64px 72px,#f82818 72px 80px,#cc1d0a 80px 88px,#f82818 88px 96px);
  -webkit-mask-image:linear-gradient(25deg,#000 0 30%,rgba(0,0,0,.6) 52%,rgba(0,0,0,0) 78%);
          mask-image:linear-gradient(25deg,#000 0 30%,rgba(0,0,0,.6) 52%,rgba(0,0,0,0) 78%); }
/* Ghost-Wort aus data-ghost am <i>, 5.5% Weiss, liegt hinter dem Kopf */
.dsn-card .nb-fx .fx2{ right:-.04em; top:-.12em;
  font-family:'SG Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(9rem,26vw,24rem); line-height:1; letter-spacing:-.02em; color:rgba(255,255,255,.055); }
.dsn-card .nb-fx .fx2::before{ content:attr(data-ghost); }

/* --- Kopf: grosse Headline, Kicker mit rotem Strich auf seiner Hoehe -- */
.dsn-card .ph-txt::before, .dsn-card .ph-txt::after{ content:none; }
.dsn-card .ph-txt h2{ color:#fff; font-size:clamp(2.2rem,5vw,4rem);
  letter-spacing:-.01em; line-height:.95; text-shadow:none; }
.dsn-card .ph-txt .kicker{ display:flex; align-items:center; gap:.9rem;
  color:#EFEDE8; font-size:.8rem; letter-spacing:.28em; text-shadow:none; }
.dsn-card .ph-txt .kicker::before{ content:""; flex:1 1 auto; height:3px; background:#f82818; }
.dsn-card .ph-logo{ filter:none; }

/* --- Innenmasse: von 100vw (randlos) auf Kartenbreite ----------------- */
.dsn-card .container{ width:min(1440px, calc(100% - clamp(1.5rem,4vw,3.5rem))) !important;
  max-width:none; margin-inline:auto; padding:0; position:relative; z-index:1; }
.dsn-card .news-grid, .dsn-card .news-foot{ width:100%; margin-left:0; transform:none; }
.dsn-card .fslider{ width:100%; margin-left:0; }

/* --- Buttons "Alle News" / "Kompletter Spielplan": Off-White mit Naht -- */
.dsn-card .text-link[href="news.html"], .dsn-card .text-link[href="spielplan.html"]{
  color:#0616a8 !important; padding:.75rem 1.5rem .75rem 1.9rem;
  background:linear-gradient(160deg,#FCFBF9 0%,#EFEDE8 52%,#E2DED5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(4,8,40,.10),
             0 14px 30px rgba(4,8,40,.38); }
.dsn-card .text-link[href="news.html"]::before, .dsn-card .text-link[href="spielplan.html"]::before{
  top:0; bottom:0; left:0; right:auto; width:12px; height:auto; transform:none;
  background:repeating-linear-gradient(90deg,
    #0016a8 0 2px,#0818d8 2px 4px,#0016a8 4px 6px,#cc1d0a 6px 8px,#f82818 8px 10px,#cc1d0a 10px 12px); }
.dsn-card .text-link[href="news.html"]:hover, .dsn-card .text-link[href="spielplan.html"]:hover{
  color:#0616a8 !important;
  background:linear-gradient(160deg,#FFFFFF 0%,#F6F4F0 52%,#EAE6DE 100%);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(4,8,40,.10), 0 20px 40px rgba(4,8,40,.45); }

/* --- News-Karten: blauer Polish statt Schwarz-Navy -------------------- */
.news-grid .news-card{ background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(4,8,40,.42);
  transition:transform .3s ease, box-shadow .3s ease; }
.news-grid .news-card .nc-scrim{
  background:linear-gradient(180deg, rgba(4,18,126,0) 30%, rgba(6,22,168,.58) 68%, rgba(4,18,126,.94) 100%); }

/* --- Alle Buttons im Trikotkante-Design -----------------------------------
   Flaeche seit 30.10.2026: dezenter Silberblau-Polish von rechts nach links in Weiss
   (270deg #D5DCE8 > #FFFFFF), Hover etwas heller.
   Ein Rezept fuer alles: Off-White-Verlauf, Navy-Schrift, 1px-Licht- und
   Schattenkante, Trikotnaht als 12px-Saum links (2px-Raster). Welcher
   Pseudo den Saum traegt, haengt davon ab, was frei ist:
     .button-primary  -> ::after  (::before ist das SG-Logo aus style.css)
     .button-blue     -> ::before
     .partner-fab     -> ::before (war der rote Schraegkeil)
     Partner werden   -> ::before (::after war das " »") */
.button-primary, .button-blue, .partner-fab, .text-link[href="sponsoren.html"]{
  position:relative; overflow:hidden; isolation:isolate;
  color:#0616a8 !important;
  background:linear-gradient(270deg,#D5DCE8 0%,#E6EBF3 30%,#F4F6FA 62%,#FFFFFF 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(4,8,40,.10),
             0 14px 30px rgba(4,8,40,.38); }
.button-primary:hover, .button-blue:hover, .partner-fab:hover, .text-link[href="sponsoren.html"]:hover{
  color:#0616a8 !important;
  background:linear-gradient(270deg,#DEE4EE 0%,#ECF0F6 30%,#F8FAFC 62%,#FFFFFF 100%) !important;
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(4,8,40,.10), 0 20px 40px rgba(4,8,40,.45); }
/* Saum */
.button-primary::after, .button-blue::before, .partner-fab::before, .text-link[href="sponsoren.html"]::before{
  content:"" !important; display:block !important; position:absolute; z-index:-1;
  top:0; bottom:0; left:0; right:auto; width:12px !important; height:auto !important; transform:none;
  background:repeating-linear-gradient(90deg,
    #0016a8 0 2px,#0818d8 2px 4px,#0016a8 4px 6px,#cc1d0a 6px 8px,#f82818 8px 10px,#cc1d0a 10px 12px) !important; }
/* Platz fuer den Saum */
.button-primary, .button-blue{ padding-left:2.1rem; }
.partner-fab{ padding-left:1.3rem; }
.button-blue{ display:inline-flex; align-items:center; justify-content:center; }

/* Nav-CTAs: Team-Karten-Look (Verlauf + roter Streifen oben) raus, gleiches Rezept.
   Das obere Padding war Platz fuer den 6px-Streifen, der Saum sitzt jetzt links. */
.main-nav .button-primary.nav-cta{ filter:none;
  background:linear-gradient(270deg,#D5DCE8 0%,#E6EBF3 30%,#F4F6FA 62%,#FFFFFF 100%) !important;
  padding:.6rem 1rem .6rem 1.45rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(4,8,40,.10), 0 10px 24px rgba(4,8,40,.35); }
.main-nav .button-primary.nav-cta:hover{ filter:none;
  background:linear-gradient(270deg,#DEE4EE 0%,#ECF0F6 30%,#F8FAFC 62%,#FFFFFF 100%) !important;
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(4,8,40,.10), 0 14px 30px rgba(4,8,40,.42); }
@media (max-width:1180px){ .main-nav .button-primary.nav-cta{ padding:.5rem .85rem .5rem 1.3rem; } }

/* "Partner werden" war ein reiner Textlink - wird zum Button gleicher Bauart */
.text-link[href="sponsoren.html"]{ display:inline-flex; align-items:center;
  padding:.75rem 1.5rem .75rem 1.9rem; text-decoration:none; }
.text-link[href="sponsoren.html"]::after{ content:none; }

/* Zwei Spezifitaets-Faellen nachziehen:
   - Hero-Buttons haben in style.css/oben (0,4,0)-Regeln fuer padding und box-shadow,
     die das (0,1,0)-Rezept schlagen wuerden -> gleich stark nachlegen.
   - FAB-Kleintext war #ffd0d0 (hellrosa fuer Blau) - auf Off-White unlesbar. */
.hero .inner .actions .button-primary, .hero .inner .actions .button-blue{
  padding-left:1.7rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(4,8,40,.10), 0 14px 30px rgba(4,8,40,.38); }
.hero .inner .actions .button-primary:hover, .hero .inner .actions .button-blue:hover{
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(4,8,40,.10), 0 20px 40px rgba(4,8,40,.45); }
.partner-fab .pf-txt small{ color:#cc1d0a; }

/* Nav-CTAs: Naht + Schrift wie die weissen Nav-Links.
   Der Saum war hier nicht sichtbar: die Streifen-oben-Regel von vorhin
   (.main-nav .button-primary.nav-cta::after, Spezifitaet 0,3,1) schlaegt das
   generische .button-primary::after (0,1,1) - also gleich stark nachlegen.
   Schrift: siehe Block "Schrift 1:1 wie der FAB" weiter unten. */
.main-nav .button-primary.nav-cta::after{
  top:0; bottom:0; left:0; right:auto; width:12px !important; height:auto !important;
  z-index:-1; transform:none;
  background:repeating-linear-gradient(90deg,
    #0016a8 0 2px,#0818d8 2px 4px,#0016a8 4px 6px,#cc1d0a 6px 8px,#f82818 8px 10px,#cc1d0a 10px 12px) !important; }

/* Partner-FAB zurueck an den rechten Rand: das Sammel-Rezept oben setzt
   position:relative (fuer die Naht) und hat damit das position:fixed des
   FAB ueberschrieben - der Button rutschte in den Dokumentfluss ans Seitenende. */
.partner-fab{ position:fixed; }

/* Ein Schatten fuer alle: die Nav-CTAs hatten eine leichtere Variante
   (10px/24px/.35) - auf das FAB-Mass (14px/30px/.38) gezogen, Hover ebenso.
   Damit tragen alle Buttons exakt denselben Polish und Schatten. */
.main-nav .button-primary.nav-cta{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(4,8,40,.10), 0 14px 30px rgba(4,8,40,.38); }
.main-nav .button-primary.nav-cta:hover{ transform:translateY(-2px);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(4,8,40,.10), 0 20px 40px rgba(4,8,40,.45); }

/* Schrift 1:1 wie "Unterstuetze deinen Verein" (FAB, .pf-txt b):
   Saira Condensed 700, .98rem, .03em, Versalien - auf jedem Button.
   Hero (0,4,0) und Nav (0,3,1) haben eigene, staerkere Groessenregeln,
   deshalb stehen sie mit gleicher Spezifitaet mit in der Liste. */
.button-primary, .button-blue,
.text-link[href="news.html"], .text-link[href="spielplan.html"], .text-link[href="sponsoren.html"],
.main-nav a.button-primary.nav-cta, .hero .inner .actions .button{
  font-family:var(--font-display); font-weight:700; font-size:.98rem;
  letter-spacing:.03em; text-transform:uppercase; }

/* ===================================================================
   SEITENKOPF "ETIKETT": Hero randlos mit Trikotsaum, Ghost-Wort und
   blauem Scrim; Navbar und Exklusiv-Partner-Leiste im Button-Material
   (Off-White, Naht, Navy-Schrift), Nav-CTAs invers in Blau.
   =================================================================== */

/* Bausteine fuer Hero und beide Leisten */
.hero-slides::after{                 /* Scrim in Blau statt Schwarz */
  background:linear-gradient(to top, rgba(4,18,126,.88) 0%, rgba(6,22,168,.5) 26%, transparent 58%); }
.hero::after{                        /* Spielfeldlinien raus, Ghost-Wort rein */
  content:"Handball"; inset:auto; right:-.04em; top:-.12em; background:none;
  font-family:'SG Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(9rem,26vw,24rem); line-height:1; letter-spacing:-.02em;
  color:rgba(255,255,255,.055); z-index:2; }
.hero::before{                       /* Trikotsaum wie auf den Karten */
  content:""; display:block; position:absolute; z-index:4; pointer-events:none;
  top:0; bottom:0; left:0; right:auto; width:clamp(170px,17%,270px); height:auto;
  transform:none; opacity:1;
  background:repeating-linear-gradient(90deg,
    #0016a8 0 8px,#0818d8 8px 16px,#0016a8 16px 24px,#0818d8 24px 32px,#0016a8 32px 40px,#0818d8 40px 48px,
    #cc1d0a 48px 56px,#f82818 56px 64px,#cc1d0a 64px 72px,#f82818 72px 80px,#cc1d0a 80px 88px,#f82818 88px 96px);
  /* weicher als auf den Karten: frueher Beginn, sechs Stops als S-Kurve, langer Auslauf */
  -webkit-mask-image:linear-gradient(25deg,#000 0 20%,rgba(0,0,0,.85) 32%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 96%);
          mask-image:linear-gradient(25deg,#000 0 20%,rgba(0,0,0,.85) 32%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 96%); }
.hero .inner .kicker,
.hero .inner h1,
.hero .inner .sub{ text-shadow:0 2px 6px rgba(4,8,40,.7), 0 10px 30px rgba(4,8,40,.6); }
/* duenne Naht fuer Leisten: ein Zyklus a 4px = 48px */
.site-header .inner::before,
.partner-bar::before{
  content:""; position:absolute; top:0; bottom:0; left:0; width:48px; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(90deg,
    #0016a8 0 4px,#0818d8 4px 8px,#0016a8 8px 12px,#0818d8 12px 16px,#0016a8 16px 20px,#0818d8 20px 24px,
    #cc1d0a 24px 28px,#f82818 28px 32px,#cc1d0a 32px 36px,#f82818 36px 40px,#cc1d0a 40px 44px,#f82818 44px 48px); }
.partner-bar{ position:sticky; }      /* ::before braucht einen Bezug - sticky reicht */
.partner-bar .inner{ position:relative; z-index:1; }
.site-header .inner{ padding-left:calc(48px + clamp(1rem,2.5vw,2rem)) !important; }
.partner-bar .inner{ padding-left:48px; }

/* --- Etikett: Leisten im Button-Material (Off-White + Naht), Hero
   randlos als dunkle Buehne darunter. Helles Chrom auf dunkler Flaeche -
   und die Sponsorenlogos mit ihren weissen Kacheln gehen im Off-White auf,
   statt auf Blau wie aufgeklebt zu wirken. ------------------------------ */
.site-header .inner{
  background:linear-gradient(160deg,#FCFBF9 0%,#EFEDE8 52%,#E2DED5 100%);
  width:min(1640px, calc(100vw - clamp(1.5rem,5vw,5rem)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(4,8,40,.10), 0 14px 30px rgba(4,8,40,.38); }
.main-nav a{ color:#3a4270; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:#0616a8; }
.main-nav a::after{ background:#f82818; }
.brand .brand-text{ color:#0616a8; }
.nav-sub-label{ color:#3a4270; }
/* Nav-CTAs invers, sonst Off-White auf Off-White */
.main-nav .button-primary.nav-cta{ color:#fff !important;
  background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px rgba(4,8,40,.38); }
.main-nav .button-primary.nav-cta:hover{ color:#fff !important;
  background:linear-gradient(165deg,#0f24f0 0%,#0818d8 55%,#0616a8 100%) !important; }
.hero{ background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%) !important; }
.partner-bar{
  width:min(1640px, calc(100vw - clamp(1.5rem,5vw,5rem))) !important; margin-inline:auto;
  margin-top:clamp(1.5rem,5vw,5rem); margin-bottom:clamp(1.5rem,5vw,5rem);
  background:linear-gradient(160deg,#FCFBF9 0%,#EFEDE8 52%,#E2DED5 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(4,8,40,.10), 0 14px 30px rgba(4,8,40,.38); }
.partner-bar.is-stuck{ width:min(1640px, calc(100vw - clamp(1.5rem,5vw,5rem))) !important; }
.partner-bar .label{ color:#0616a8; }


/* Nav-Links in der Schrift der Buttons: Saira Condensed 700 / .98rem / .03em.
   Bisher 500 / .95rem / .06em - schmaler und leichter als die CTAs daneben.
   Unter 1180px schrumpfen Links UND Nav-CTAs gemeinsam auf .88rem, damit
   die Leiste nicht ueberlaeuft und beide trotzdem gleich bleiben. */
.main-nav a, .main-nav .nav-sub-label{
  font-family:var(--font-display); font-weight:700; font-size:.98rem;
  letter-spacing:.03em; text-transform:uppercase; }
@media (max-width:1180px){
  .main-nav a, .main-nav .nav-sub-label, .main-nav a.button-primary.nav-cta{ font-size:.88rem; } }

/* --- Saeume transparenter (Hero + Karten) --------------------------------- */
.dsn-card .nb-fx .fx1, .hero::before{ opacity:.7; }

/* --- Hero-Text im Karten-Design ------------------------------------------
   Kicker wie auf den Karten (Flex-Zeile, roter Strich davor, .28em),
   Headline eng und gross, Sub in Off-White. Spezifitaet (0,3,x) wie die
   inline-Regeln oben, spaeter im Stylesheet -> gewinnt. */
.hero .inner .kicker{ display:flex; align-items:center; justify-content:flex-end; gap:.9rem;
  font-weight:700; font-size:.8rem; letter-spacing:.28em; color:#EFEDE8; margin-bottom:.9rem; }
/* Zeilenhoehe 1.08 statt .95: die .line-Spans schneiden ueber overflow:hidden
   (Einblend-Animation), bei .95 lagen die Umlautpunkte von "fuer" ausserhalb. */
.hero .inner h1{ font-size:clamp(2.4rem,5.6vw,4.4rem); letter-spacing:-.01em; line-height:1.08; }
.hero .inner h1 .accent-line{ color:#FF2814; }   /* exakt das Rot aus SG_Logo_Splitter.svg */
.hero .inner .sub{ color:#EFEDE8; font-size:clamp(.95rem,1.15vw,1.05rem); line-height:1.5; }

/* --- Innere Karten jeder Section: Tabelle, Team-Kacheln, CTA-Karte ------
   Bisher 120deg-Verlauf + roter 6px-Streifen oben + drop-shadow.
   Jetzt derselbe Bau wie News-Karten und Buttons: 165deg-Polish,
   1px-Lichtkante, Trikotnaht als 12px-Saum links statt des Streifens. */
.table-wrap, .team-cat-grid .team-cat, .cta-band .card{
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(4,8,40,.42); }
.table-wrap::before, .team-cat-grid .team-cat::before, .cta-band .card::before{ content:none; }
.table-wrap{ padding-top:0; }
.team-cat-grid .team-cat{ padding-left:1.5rem; }
.cta-band .card{ padding-left:clamp(2rem,5vw,3.5rem); }
.team-cat-grid .team-cat:hover, .cta-band .card:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 24px 52px rgba(4,8,40,.5); }

/* Tabelle: Kopfzeile im Kicker-Stil, Trennlinien in Weiss statt Grau */
table.schedule th{ background:transparent; color:#EFEDE8; font-family:var(--font-display);
  font-weight:700; font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.18); }
table.schedule td{ border-top-color:rgba(255,255,255,.12); }

/* --- Exklusiv-Partner-Label in der Staerke von "Unterstuetze deinen Verein" --- */
.partner-bar .label{ font-weight:700; color:#0616a8; border-right-color:rgba(4,8,40,.18); }

/* --- Navbar + Partner-Leiste: nahtloses Andocken ---------------------------
   Drei Ursachen fuer die sichtbare Kante, drei Massnahmen:
   1. Beide Leisten hatten einen 160deg-Verlauf ueber ihre EIGENE Box - an
      der Nahtstelle traf die Unterkante des einen Verlaufs auf die Oberkante
      des anderen, mit unterschiedlichem Ton pro x-Position. Jetzt 90deg:
      die Farbe haengt nur noch von x ab, bei gleicher Breite ist sie an der
      Naht auf beiden Seiten identisch.
   2. (entfallen - die Leiste dockt nicht mehr an, siehe unten)
   3. Die Leiste hatte oben eine 1px-Lichtkante, der Header unten eine
      1px-Schattenkante -> beides an der Naht weg. */
.site-header .inner{ background:linear-gradient(90deg,#FCFBF9 0%,#EFEDE8 52%,#E2DED5 100%); }
.partner-bar{ background:linear-gradient(90deg,#FCFBF9 0%,#EFEDE8 52%,#E2DED5 100%) !important; }
.partner-bar.is-stuck{ box-shadow:inset 0 -1px 0 rgba(4,8,40,.10), 0 14px 30px rgba(4,8,40,.38); }

/* --- Nav-CTAs ohne Aussenschatten: auf der hellen Leiste wirkte der Schatten
   als dunkler Hof. Bleibt nur die 1px-Lichtkante oben, auch im Hover. --- */
.main-nav .button-primary.nav-cta, .main-nav .button-primary.nav-cta:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }

/* --- Partner-Leiste scrollt mit: kein Andocken mehr -------------------------
   Sie laeuft hinter der Navbar durch und verschwindet wie jede andere Section.
   main.js schaltet is-stuck weiter, sobald die Leiste unter der Navbar liegt -
   dort ist sie aber verdeckt (Header z 50, Leiste z 45), Breite ist ohnehin
   schon Kartenmass; die Kompaktierung passiert also unsichtbar. */
.partner-bar{ position:relative !important; top:auto !important; }

/* --- Spieltag-Tabelle: Kopfzeile buendig zum Inhalt -------------------------
   Die Section setzt text-align:right, die td erben das; die th hatten aus
   style.css text-align:left -> Kopf und Inhalt liefen auseinander.
   Jetzt pro Spalte gleich: Datum/Liga/Halle rechts, Begegnung links (dort
   steht der Heimverein im Raster am linken Rand). Die .22em Laufweite der
   Kopfzeile haengt als Leerraum HINTER dem letzten Buchstaben - bei rechts-
   buendigem Text stuende der Kopf um genau so viel weiter links als der Inhalt,
   deshalb das rechte Padding um .22em verkuerzt. */
table.schedule td{ text-align:right; }
table.schedule th{ text-align:right; padding-right:calc(1rem - .22em); }
.table-wrap .schedule th:last-child{ padding-right:calc(2rem - .22em); }
/* Begegnung linksbuendig - ueber Klassen statt ueber die Spaltennummer:
   die Startseite hat 4 Spalten (Datum|Begegnung|Liga|Halle), der Spielplan 5
   bzw. 6 (mit Team und Ergebnis). Eine nth-child-Regel traf dort die falsche. */
table.schedule td.pairing, table.schedule th.c-pairing{ text-align:left; padding-right:1rem; }

/* --- Social-Icons: flache Glyphen statt der glaenzenden Verlaufskacheln -----
   Die PNGs waren opake Farbquadrate mit Blau-Rot-Verlauf - als Bild nicht
   einfaerbbar und im kantigen, flachen System ein Fremdkoerper. Jetzt
   inline-SVG mit currentColor; das Grund-CSS war ohnehin auf svg ausgelegt.
   Navbar (Off-White): Navy-Glyphe, Chip mit feiner Navy-Kontur; Hover
   Logo-Rot. Footer (Blau): Off-White-Glyphe, Hover Rot hell. */
.nav-social a{ color:#0616a8; border:1px solid rgba(4,8,40,.28); }
.nav-social a:hover{ background:#0F1636; border-color:#0F1636; color:#EFEDE8; }
.nav-social svg{ width:18px; height:18px; }
.footer-grid .f-social{ color:rgba(255,255,255,.85); }
.footer-grid .f-social svg{ width:16px; height:16px; }
.footer-grid .f-social:hover{ color:#ff4433; }

/* --- Social-Chips in der Navbar im Polish-Blau, wie die Nav-CTAs --------- */
.nav-social a{ color:#fff; border:0;
  background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }
.nav-social a:hover{ color:#fff; border:0; transform:translateY(-2px);
  background:linear-gradient(165deg,#0f24f0 0%,#0818d8 55%,#0616a8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14); }


/* --- Sektionskoepfe der Unterseiten -----------------------------------------
   beispiel.html benutzt .ph-head/.ph-txt, die Unterseiten .sbanner-title bzw.
   .section-head. Gleiche Behandlung fuer alle drei: grosse weisse Headline,
   Kicker als Flex-Zeile mit rotem Strich, Fliesstext in Off-White. */
.dsn-card :is(.sbanner-title,.section-head) h2{ color:#fff;
  font-size:clamp(2.2rem,5vw,4rem); letter-spacing:-.01em; line-height:.95; }
.dsn-card :is(.sbanner-title,.section-head) .kicker{
  display:flex; align-items:center; gap:.9rem;
  color:#EFEDE8; font-weight:700; font-size:.8rem; letter-spacing:.28em; }
.dsn-card :is(.sbanner-title,.section-head) .kicker::before{
  content:""; flex:1 1 auto; height:3px; background:#f82818; }
.dsn-card .section-head .lead, .dsn-card .lead, .dsn-card p{ color:#EFEDE8; }
.dsn-card :is(h3,h4,dt,th,.count,.name){ color:#fff; }
.dsn-card a:not(.button):not(.text-link):not(.f-social){ color:#fff; }

/* Inhaltskarten der Unterseiten (Team-Kacheln, Info-Karten, Formular-Box)
   im selben Bau wie Tabelle und CTA-Karte: Polish + 12px-Naht links. */
.dsn-card .card:not(.news-card):not(.team-cat){ position:relative; overflow:hidden;
  border:0; border-radius:0;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(4,8,40,.42); }
.dsn-card .card:not(.news-card):not(.team-cat)::before{ content:none; }
/* Die Zierleiste am oberen Rand abschalten: style.css gibt .team-card,
   .match-card und .card-stripe ein 7px-Navy-Band (::before) plus einen roten
   Schraegsplitter (::after). Das ::before ist hier die Naht, das ::after war
   noch der alte Splitter - er lag quer ueber der Kartenoberkante. */
.dsn-card .card:not(.news-card):not(.team-cat)::after{ content:none; }

/* Formularfelder auf dem blauen Grund */
.dsn-card :is(input,textarea,select){ background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:0; }
.dsn-card :is(input,textarea,select)::placeholder{ color:rgba(255,255,255,.55); }
.dsn-card :is(input,textarea,select):focus{ outline:2px solid #f82818; outline-offset:1px; }
.dsn-card label{ color:#EFEDE8; }

/* --- Wasserzeichen aus den Karten nehmen -----------------------------------
   Zwei Quellen: die SG-Logo-Figuren <img class="wm-fig"> im Markup (entfernt)
   und das Viadukt-Band, das style.css als background-image auf JEDE Section
   legt (section:not(.section-alt):not(.hero):not(.cta-band), repeat-x unten).
   Letzteres kam auf den Karten wieder hoch, weil .dsn-card nur background und
   background-image der Section setzt - Position, Groesse und Repeat blieben
   stehen. Deshalb hier explizit abgeraeumt. */
/* Verlauf (05.11.2026): laeuft von unten rechts (tiefstes Blau) nach oben, wird zur Mitte heller und endet oben
   links wieder in der Farbtiefe #04127e. */
.dsn-card{ background-image:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%) !important;
  background-repeat:no-repeat !important; background-position:0 0 !important;
  background-size:auto !important; }
.wm-fig{ display:none !important; }

/* ===========================================================================
   Seitenkopf (.page-head) und Team-Karten im Trikotkante-Design
   =========================================================================== */

/* --- Seitenkopf: eigene Karte wie die Sections -----------------------------
   Bisher randlos blau (#0000e4) mit rotem Splitter-Keil rechts, der die
   Header-Diagonale fortsetzte. Die Diagonale gibt es im neuen Kopf nicht mehr,
   der Keil haette ins Leere gezeigt - ersetzt durch Trikotsaum und Ghost-Wort
   wie bei jeder anderen Karte. */
.page-head{ position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%);
  width:min(1640px, calc(100vw - clamp(1.5rem,5vw,5rem)));
  margin-inline:auto; margin-block:clamp(1.5rem,5vw,5rem);
  border-radius:0; box-shadow:0 26px 64px rgba(6,10,45,.22);
  padding-block:clamp(3rem,7vw,5rem); }
.page-head::before{                                   /* roter Keil -> Trikotsaum */
  content:""; position:absolute; z-index:-1; pointer-events:none;
  top:0; bottom:0; left:0; right:auto;
  width:clamp(170px,17%,270px); height:auto; transform:none; opacity:.7;
  background:repeating-linear-gradient(90deg,
    #0016a8 0 8px,#0818d8 8px 16px,#0016a8 16px 24px,#0818d8 24px 32px,#0016a8 32px 40px,#0818d8 40px 48px,
    #cc1d0a 48px 56px,#f82818 56px 64px,#cc1d0a 64px 72px,#f82818 72px 80px,#cc1d0a 80px 88px,#f82818 88px 96px);
  -webkit-mask:linear-gradient(25deg,#000 0 20%,rgba(0,0,0,.85) 32%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 96%);
          mask:linear-gradient(25deg,#000 0 20%,rgba(0,0,0,.85) 32%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 96%); }
.page-head::after{                                    /* Ghost-Wort rechts oben */
  content:attr(data-ghost); position:absolute; z-index:-1; pointer-events:none;
  right:-.04em; top:-.12em;
  font-family:'SG Display',sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(9rem,26vw,24rem); line-height:1; letter-spacing:-.02em;
  color:rgba(255,255,255,.055); }
.page-head .inner{ width:min(1440px, calc(100% - clamp(1.5rem,4vw,3.5rem))) !important;
  max-width:none; margin-inline:auto; padding:0; }
.page-head h1{ color:#fff; font-size:clamp(2.4rem,5.6vw,4.4rem);
  letter-spacing:-.01em; line-height:.95; }
.page-head p{ color:#EFEDE8; }

/* --- Team-Karten: gleicher Bau wie News-Karten und Tabelle ----------------- */
.team-grid .team-card{ border:0; border-radius:0; padding-left:1.5rem;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(4,8,40,.42);
  transition:transform .3s ease, box-shadow .3s ease; }
.team-grid .team-card:hover{ transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 24px 52px rgba(4,8,40,.5); }
/* style.css nutzt ::before/::after fuer Ecklinien - ::before wird die Naht,
   ::after abgeschaltet. Die Naht laeuft neben dem Foto weiter bis nach unten. */
.team-grid .team-card::before{ content:none; }
.team-grid .team-card::after{ content:none; }
/* Foto randlos, aber rechts der Naht */
.team-grid .team-card .tc-photo{ margin:-1.6rem -1.5rem 1.1rem; }
.team-grid .team-card h3{ color:#fff; }
.team-grid .team-card .league{ color:#ff4433; }
/* Funktionen (Abteilungsleitung, Sportliche Leitung, Jugendleitung ...) im selben Rot wie die Ligen (08.11.2026) */
html body:not(#r1):not(#r2):not(#r3):not(#r4) .org-body span.org-role{ color:#ff4433 !important; }
@media (max-width:767px){ html body:not(#r1):not(#r2):not(#r3):not(#r4) .org-body span.org-role{ color:#FFB3A8 !important; } }
.team-grid .team-card dt{ color:#EFEDE8; opacity:.75;
  font-family:var(--font-display); font-weight:700; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; }
.team-grid .team-card dd{ color:#fff; }
.team-grid .team-card dd a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.team-grid .team-card dd a:hover{ color:#ff4433; }

/* Sponsorplakette auf dem Foto: Off-White-Material wie die Buttons */
.team-card .team-sponsor{ border:0; border-radius:0;
  background:linear-gradient(160deg,#FCFBF9 0%,#EFEDE8 52%,#E2DED5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(4,8,40,.35); }
.team-card .team-sponsor .ts-label{ color:#3a4270; }

/* Organisations-Karten (Ansprechpartner) im selben Material */
.org-card{ border:0; border-radius:0; position:relative; overflow:hidden;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(4,8,40,.42); }
.org-card::before{ content:none; }
.org-card::after{ content:none; }
.org-photo-placeholder{ background:linear-gradient(165deg,#0f24f0,#04127e); color:#fff; }
.org-contact a{ color:#EFEDE8; }
.org-contact a:hover{ color:#ff4433; }

/* --- Foto-Platzhalter -------------------------------------------------------
   Aufbau wie eine Section im Kleinen: ruhige Polish-Flaeche, Trikotsaum am
   rechten Rand, schraeg auslaufend.
   Das SG-Zeichen sitzt zentral darauf, siehe Hinweis weiter unten. */
.team-card .tc-photo-empty{ position:relative; overflow:hidden;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%); }
.team-card .tc-photo-empty::before{ content:""; position:absolute; z-index:1;
  top:0; bottom:0; right:0; left:auto; width:clamp(56px,26%,110px);
  background:repeating-linear-gradient(90deg,
    #0016a8 0 4px,#0818d8 4px 8px,#0016a8 8px 12px,#0818d8 12px 16px,#0016a8 16px 20px,#0818d8 20px 24px,
    #cc1d0a 24px 28px,#f82818 28px 32px,#cc1d0a 32px 36px,#f82818 36px 40px,#cc1d0a 40px 44px,#f82818 44px 48px);
  /* 205deg statt 25deg: Achse gespiegelt - am rechten Rand muss der Saum dort
     voll stehen und nach oben links auslaufen, sonst liefe er falsch herum. */
  -webkit-mask:linear-gradient(205deg,#000 0 20%,rgba(0,0,0,.85) 32%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 96%);
          mask:linear-gradient(205deg,#000 0 20%,rgba(0,0,0,.85) 32%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 96%); }
/* SG-Zeichen: kein CSS-mask mehr. Eine externe SVG-Maske wird unter file://
   von Chromium als fremder Ursprung behandelt und stillschweigend verworfen -
   das Zeichen blieb unsichtbar. Der Verlauf steckt jetzt IM SVG
   (sg-buchstaben-polish.svg), das <img> wird ganz normal angezeigt. */
.team-card .tc-photo-empty{ display:grid; place-items:center; }
.team-card .tc-photo-empty img{ position:relative; z-index:2; visibility:visible;
  width:auto; height:46%; max-height:46%; max-width:52%; object-fit:contain; opacity:1;
  filter:drop-shadow(0 6px 18px rgba(4,8,40,.55)); }
/* SG im Silberblau-Polish (rechts Silberblau, nach links Weiss): per CSS statt im HTML, weil der Admin teams.html neu schreibt.
   Saum um 180 Grad gedreht: steht oben voll, laeuft nach unten links aus,
   Streifenfolge gespiegelt. */
.team-card .tc-photo-empty img{ content:url("../img/wasserzeichen/sg-buchstaben-polish-silberblau.svg"); }
.team-card .tc-photo-empty::before{ transform:rotate(180deg); }

/* Ansprechpartner-Platzhalter: gleiche Flaeche, Saum schmaler (kleines Format) */
.org-photo-placeholder{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%); }
.org-photo-placeholder::before{ content:""; position:absolute; z-index:0;
  top:0; bottom:0; right:0; left:auto; width:30%;
  background:repeating-linear-gradient(90deg,
    #0016a8 0 2px,#0818d8 2px 4px,#0016a8 4px 6px,#cc1d0a 6px 8px,#f82818 8px 10px,#cc1d0a 10px 12px);
  -webkit-mask:linear-gradient(205deg,#000 0 24%,rgba(0,0,0,.6) 52%,rgba(0,0,0,0) 90%);
          mask:linear-gradient(205deg,#000 0 24%,rgba(0,0,0,.6) 52%,rgba(0,0,0,0) 90%); }
.org-photo-placeholder span{ position:relative; z-index:1; }

/* --- Dropdown "Shops" -------------------------------------------------------
   Lief noch im hellen Grund-Theme: weisses Panel, graue Kontur, oben eine
   3px-Akzentlinie, Hover in Grau. Auf der Off-White-Navbar war die Kontur
   kaum zu sehen und das Panel verschmolz mit der Leiste.
   Jetzt Polish-Blau wie die Nav-CTAs, Naht links statt Linie oben,
   kantig, und ohne den Versatz aus der Leistenmitte. */
.main-nav .nav-sub{ position:absolute; left:0; transform:translate(0,8px);
  min-width:200px; padding:0; overflow:hidden;
  border:0; border-radius:0;
  background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px rgba(4,8,40,.45); }
.has-sub:hover .nav-sub, .has-sub:focus-within .nav-sub{ transform:translate(0,0); }
.main-nav .nav-sub::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:12px;
  background:repeating-linear-gradient(90deg,
    #0016a8 0 2px,#0818d8 2px 4px,#0016a8 4px 6px,#cc1d0a 6px 8px,#f82818 8px 10px,#cc1d0a 10px 12px); }
.main-nav .nav-sub a{ position:relative; padding:.7rem 1.25rem .7rem calc(1.25rem + 12px);
  color:#EFEDE8; }
.main-nav .nav-sub a + a{ box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.main-nav .nav-sub a:hover{ color:#fff; background:rgba(255,255,255,.1); }
/* Pfeil dreht beim Oeffnen mit */
.nav-sub-label::after{ display:inline-block; transition:transform .18s ease; }
.has-sub:hover .nav-sub-label::after,
.has-sub:focus-within .nav-sub-label::after{ transform:rotate(180deg); }
.has-sub:hover .nav-sub-label, .has-sub:focus-within .nav-sub-label{ color:#0616a8; }

@media (max-width:900px){
  /* mobil aufgeklappt: kein Panel, nur die Naht als Einzug */
  .main-nav .nav-sub{ position:static; transform:none; background:none; box-shadow:none;
    margin:0 0 .35rem .75rem; min-width:0; }
  .main-nav .nav-sub::before{ width:4px; }
  .main-nav .nav-sub a{ padding-left:calc(.75rem + 4px); color:#3a4270; }
  .main-nav .nav-sub a + a{ box-shadow:none; }
  .main-nav .nav-sub a:hover{ color:#0616a8; background:none; }
}

/* --- Sponsorenschild auf dem Mannschaftsfoto (Detailseiten) -----------------
   In der Teamkarte positioniert style.css das Schild bereits (top:7px, links).
   Auf der Detailseite ist .team-photo eine <figure> ohne Bezug - hier setzen. */
.team-photo{ position:relative; }
.team-photo > .team-sponsor{ position:absolute; top:0; left:0; z-index:2; margin:0;
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .8rem;
  border:0; border-radius:0;
  background:linear-gradient(160deg,#FCFBF9 0%,#EFEDE8 52%,#E2DED5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(4,8,40,.35); }
.team-photo > .team-sponsor .ts-label{ color:#3a4270; font-size:.56rem;
  letter-spacing:.14em; padding-right:.55rem; border-right:1px solid rgba(4,8,40,.18); }
.team-photo > .team-sponsor img{ height:30px; width:auto; display:block; }

/* --- Karten ohne Zierbalken -------------------------------------------------
   Die Karten tragen links keinen Streifen mehr. Die ::before-Regeln stehen
   weiter als content:none da - sie schalten damit auch die Basisdekoration
   aus style.css ab (7px-Navy-Band oben ueber .team-card/.org-card/.card-stripe),
   die sonst wieder durchkaeme. Innenabstaende sind zurueckgenommen.
   Buttons, Nav-CTAs und die Bildvorschau behalten ihre gestreifte Naht -
   dort trennt das Muster Bedienbares von Flaeche. */

/* --- Dropdown muss aus der Leiste heraus und ueber alles ---------------------
   Zwei Blocker, beide in der Navbar-Regel weiter oben:
   1. .site-header .inner hat overflow:hidden (fuer die Naht am linken Rand) -
      das Panel wurde an der Leistenunterkante abgeschnitten. Der Rand bleibt
      trotzdem sauber: die Naht wird jetzt per clip-path auf die Leiste
      begrenzt statt per overflow.
   2. isolation:isolate erzeugt einen eigenen Stapelkontext - ein hohes
      z-index am Panel wirkt darin nur relativ zur Leiste. Aufgehoben, damit
      das Panel gegen Hero, Partner-Leiste und Karten gewinnt. */
.site-header .inner{ overflow:visible; isolation:auto; }
.site-header .inner::before{ clip-path:inset(0); }   /* Naht bleibt in der Leiste */
.site-header{ z-index:60; }
.main-nav .has-sub{ position:relative; z-index:70; }
.main-nav .nav-sub{ z-index:70; }

@media (max-width:900px){
  /* mobil klappt das Untermenue inline auf - dort darf nichts ueberdecken */
  .main-nav .nav-sub{ z-index:auto; }
}

/* ===========================================================================
   Spielbetrieb auf den Mannschaftsseiten (Reiter Spiele / Tabelle / Statistik)
   =========================================================================== */

/* --- Reiterleiste im blauen Buttondesign (wie die Nav-CTAs) ----------------
   Inaktiv: Polish-Blau mit Lichtkante. Aktiv: eine Stufe heller, angehoben und
   mit rotem Fuss - so ist der gewaehlte Reiter auch auf blauem Grund eindeutig. */
.dsn-card .sb-tabs{ border-bottom:0; gap:8px; margin-bottom:1.5rem; }
.dsn-card .sb-tab{ position:relative; margin-bottom:0; border-bottom:0;
  padding:.62rem 1.3rem; border-radius:0;
  font-family:var(--font-display); font-weight:700; font-size:.98rem;
  letter-spacing:.03em; text-transform:uppercase; color:#EFEDE8;
  background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.dsn-card .sb-tab:hover{ color:#fff;
  background:linear-gradient(165deg,#0f24f0 0%,#0818d8 55%,#0616a8 100%); }
.dsn-card .sb-tab.is-active{ color:#fff; transform:translateY(-2px);
  background:linear-gradient(165deg,#1229ff 0%,#0818d8 55%,#0616a8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px rgba(4,8,40,.42); }
.dsn-card .sb-tab.is-active::after{ content:""; position:absolute;
  left:0; right:0; bottom:0; height:3px; background:#f82818; }
/* nicht anwaehlbare Reiter (keine Daten) bleiben sichtbar, aber zurueckgenommen */
.dsn-card .sb-tab[disabled], .dsn-card .sb-tab[aria-disabled="true"]{
  opacity:.45; cursor:default; transform:none; }

/* --- Ligatabelle: deckende Karte statt transparenter Flaeche ---------------
   Die Tabelle lag ohne eigenen Grund direkt auf der Section - der Trikotsaum
   und das Ghost-Wort schienen durch die Zeilen. Jetzt eine eigene Flaeche im
   Polish, wie die Spieltagstabelle auf der Startseite. */
.dsn-card .tt-wrap, .dsn-card .tk-table-wrap{
  position:relative; overflow-x:auto;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(4,8,40,.42);
  padding:.4rem clamp(.6rem,2vw,1.2rem); }
.dsn-card .tt-table thead th{ color:#EFEDE8; font-size:.72rem; letter-spacing:.18em;
  border-bottom:1px solid rgba(255,255,255,.2); }
.dsn-card .tt-table th, .dsn-card .tt-table td{ border-bottom-color:rgba(255,255,255,.12); }
.dsn-card .tt-table td{ color:#EFEDE8; }
.dsn-card .tt-table .c-rk{ color:rgba(255,255,255,.55); }
.dsn-card .tt-table tbody tr:last-child td{ border-bottom:0; }
/* eigene Mannschaft hervorheben - Markenrot statt weisser Aufhellung */
.dsn-card .tt-table tbody tr.is-ours{ background:rgba(248,40,24,.18); }
.dsn-card .tt-table tbody tr.is-ours td{ color:#fff; font-weight:700; }
.dsn-card .tt-table tbody tr.is-ours .c-rk{ color:#ff4433; }
.dsn-card .tt-empty, .dsn-card .ts-empty, .dsn-card .ts-source{ color:rgba(255,255,255,.6); }

/* Statistik-Tabelle im selben Ton */
.dsn-card .tk-table thead th{ color:#EFEDE8; border-bottom:1px solid rgba(255,255,255,.2); }
.dsn-card .tk-table td{ color:#EFEDE8; border-bottom-color:rgba(255,255,255,.12); }

/* --- Spielpaarungen: Karten im Seitendesign ------------------------------- */
.dsn-card .team-sched h3{ color:#fff; font-size:1.05rem; letter-spacing:.03em; }
.dsn-card .team-sched h3::after{ background:#f82818; transform:none; width:48px; }
.dsn-card .ts-item{ position:relative; overflow:hidden;
  border:0; border-radius:0; padding:.7rem 1rem;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(4,8,40,.34);
  transition:transform .25s ease, box-shadow .25s ease; }
.dsn-card .ts-item[data-game]{ cursor:pointer; }
.dsn-card .ts-item[data-game]:hover{ transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 16px 34px rgba(4,8,40,.44); }
.dsn-card .ts-item .d{ color:#ff4433; letter-spacing:.16em; }
.dsn-card .ts-item .p{ color:#fff; }
.dsn-card .ts-item .m{ color:rgba(255,255,255,.72); }
/* Ergebnis als Off-White-Plakette, Sieg invers in Rot */
.dsn-card .ts-item .score{ padding:.1rem .6rem; color:#0616a8;
  background:linear-gradient(160deg,#FCFBF9 0%,#EFEDE8 52%,#E2DED5 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.dsn-card .ts-item .score.win{ color:#fff;
  background:linear-gradient(160deg,#ff4433 0%,#f82818 52%,#cc1d0a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28); }

/* --- 3D-Schild im Hero: Faktor 1.3 --------------------------------------
   Das statische Logo bleibt bei clamp(160px,22vw,300px) - es ist nur der
   Fallback, bis die Szene "sg3d-ready" meldet. Die 3D-Version bekommt die
   1.3-fache Groesse; aspect-ratio haelt die Proportion, die Hoehe waechst mit. */
.hero .hero-logo-3d{ width:clamp(208px, 28.6vw, 390px); }
/* Hero-Logo statt 3D-Schild (08.11.2026): normales SG-Logo in seiner urspruenglichen Groesse (ueberdeckt die Hero-Schrift nicht),
   mit dunklem Schlagschatten, damit es sich vom Foto abhebt. Das 3D-Schild ist aus den Startseiten entfernt. */
html body .hero #heroLogoStatic{ width:clamp(160px, 22vw, 300px);
  filter:drop-shadow(0 18px 30px rgba(0,0,20,.65)) drop-shadow(0 4px 8px rgba(0,0,20,.5)); }   /* Variante A (08.11.2026): dunkler Schlagschatten statt weissem Leuchten */

/* ===========================================================================
   Mobil (bis 640px)
   =========================================================================== */
@media (max-width:640px){
  /* Trikotsaum links weg: auf schmalem Schirm frisst er rund ein Viertel der
     Breite und laeuft dem Hero-Text in die Quere. Karten und Seitenkopf
     behalten ihn, dort steht er neben dem Inhalt, nicht darunter.
     Auch das Ghost-Wort raus - bei 26vw ueberdeckt es mobil den halben Hero.
     style.css schaltet beide Pseudos hier ohnehin schon ab; die Regel steht
     trotzdem hier, weil der Trikotkante-Block sie oben wieder aktiviert. */
  .hero::before, .hero::after{ display:none; }

  /* News: genau drei Karten untereinander, eine Spalte.
     Die Featured-Karte und die breite Karte unten sind mobil nicht breiter
     als die anderen - span 2 wuerde in einer Einspaltigkeit ins Leere greifen. */
  .news-grid{ grid-template-columns:1fr; grid-auto-rows:clamp(200px,52vw,260px); }
  .news-grid .news-card:first-child,
  .news-grid .news-card:nth-child(6){ grid-column:span 1; }
  .news-grid .news-card:nth-child(n+4){ display:none; }
  .news-grid .news-card:first-child h3{ font-size:1.3rem; }
  .news-grid .news-card:nth-child(6) h3{ font-size:1.2rem; }
}

/* ===========================================================================
   Trikotsaum ist ein Desktop-Motiv (bis 900px komplett aus)
   Auf Handy und Tablet nimmt der Saum zu viel Breite und schiebt sich unter
   den Text. Er faellt deshalb ueberall weg: Hero, Section-Karten, Seitenkopf.
   Bewusst als eigener Block ganz am Ende der Datei - so gewinnt er gegen jede
   der Saum-Regeln weiter oben, unabhaengig von deren Spezifitaet.
   =========================================================================== */
@media (max-width:900px){
  .hero::before,
  .dsn-card .nb-fx .fx1,
  .page-head::before,
  .team-card .tc-photo-empty::before,
  .org-photo-placeholder::before{ display:none !important; }
}

/* ===========================================================================
   Hamburger-Menue im Trikotstreifen-Blau
   Die drei Balken standen in --fg (hell) — auf der Off-White-Navbar kaum zu
   sehen. Jetzt in der Blaustaffel des Trikotsaums: aussen dunkel, Mitte hell.
   Beim Oeffnen wird das Kreuz rot, damit der Zustand eindeutig ist.
   =========================================================================== */
.nav-toggle{ padding:.5rem .4rem; }
.nav-toggle span{ width:28px; height:3px; margin:5px 0; border-radius:0;
  transition:transform .3s ease, opacity .3s ease, background .2s ease; }
.nav-toggle span:nth-child(1){ background:#0016a8; }
.nav-toggle span:nth-child(2){ background:#0818d8; }
.nav-toggle span:nth-child(3){ background:#0016a8; }
.nav-toggle:hover span:nth-child(1),
.nav-toggle:hover span:nth-child(3){ background:#0818d8; }
.nav-toggle:hover span:nth-child(2){ background:#2B49E8; }
.nav-toggle[aria-expanded="true"] span{ background:#f82818; }

/* Aufgeklapptes Menue: Off-White-Material wie die Leiste, Naht als Abschluss */
@media (max-width:900px){
  .main-nav{ background:linear-gradient(160deg,#FCFBF9 0%,#EFEDE8 52%,#E2DED5 100%);
    border-bottom:0; box-shadow:0 18px 40px rgba(4,8,40,.32); }
  .main-nav::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
    background:repeating-linear-gradient(90deg,
      #0016a8 0 4px,#0818d8 4px 8px,#0016a8 8px 12px,#0818d8 12px 16px,#0016a8 16px 20px,#0818d8 20px 24px,
      #cc1d0a 24px 28px,#f82818 28px 32px,#cc1d0a 32px 36px,#f82818 36px 40px,#cc1d0a 40px 44px,#f82818 44px 48px); }
}

/* ===========================================================================
   Hintergrundschrift (Ghost-Wort) mobil auf die Kartenbreite bringen
   Problem war der Sockel im clamp: font-size:clamp(9rem,26vw,24rem) — die
   9rem sind 144px und greifen auf jedem Handy, weil 26vw dort darunter
   liegen. Ein Wort wie "BETREUERTEAM" ist damit ueber 1000px breit und
   laeuft weit ueber die Karte hinaus.
   Unter 900px daher rein proportional (kein Sockel). 12vw haelt auch das
   laengste verbleibende Wort (12 Zeichen ~ 60vw) sicher in der Karte.
   =========================================================================== */

/* ===========================================================================
   Spieltagstabelle auf dem Handy: jede Zeile wird zur Karte
   Eine Tabelle mit vier bis sechs Spalten ist auf 390px nicht lesbar — bisher
   half nur horizontales Scrollen. Unter 720px loest sich das Tabellenraster
   deshalb auf: thead weg, jede Zeile eine eigene Flaeche, jede Zelle eine
   Zeile mit ihrer Spaltenueberschrift davor (aus data-label).
   Ausnahme Begegnung: die steht ohne Label gross und allein.
   =========================================================================== */
@media (max-width:720px){
  .table-wrap{ overflow-x:visible; }
  table.schedule, table.schedule tbody, table.schedule tr, table.schedule td{ display:block; width:auto; }
  table.schedule thead{ display:none; }

  /* gleicher Bau wie die uebrigen Karten: Polish-Verlauf, Lichtkante, Schatten */
  table.schedule tr{ position:relative; margin:0 0 .7rem; padding:.85rem 1rem;
    background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(4,8,40,.34); }
  table.schedule tr[data-game]{ cursor:pointer; }
  table.schedule tr:last-child{ margin-bottom:0; }
  table.schedule tbody tr:hover td{ background:none; }

  table.schedule td{ border:0; padding:.15rem 0; text-align:left;
    display:grid; grid-template-columns:5.2rem 1fr; gap:.6rem; align-items:baseline; }
  table.schedule td::before{ content:attr(data-label);
    font-family:var(--font-display); font-weight:700; font-size:.68rem;
    letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
  table.schedule td:empty{ display:none; }

  /* Begegnung als Kopf der Karte: ohne Label, ueber die volle Breite */
  table.schedule td.pairing{ display:block; margin:.1rem 0 .5rem;
    font-size:1.02rem; font-weight:700; color:#fff; }
  table.schedule td.pairing::before{ content:none; }
  table.schedule td.pairing .club{ display:inline-flex; align-items:center; gap:.4rem; }
  table.schedule td.pairing .vs::after{ margin:0 .3rem; color:#ff4433; }

  /* rechte Spalte nicht mehr extra einruecken (Desktop-Regel) */
  .table-wrap .schedule td:last-child, .table-wrap .schedule th:last-child{ padding-right:0; }
  table.schedule td{ text-align:left; }
}

/* ===========================================================================
   Ghost-Wort: Desktop und Handy getrennt
   Desktop bleibt beim urspruenglichen Entwurf — grosses Wort in der oberen
   rechten Kartenecke, Groesse ueber clamp(9rem,26vw,24rem) an der Section.
   Nur auf dem Handy haengt es stattdessen am Kopfblock (rechtsbuendig zur
   Ueberschrift): dort lief die vw-Variante entweder aus der Karte heraus
   oder schrumpfte in die Ecke.
   Beide Varianten schliessen sich per Media Query gegenseitig aus.
   =========================================================================== */

/* --- Handy: Wort am Kopfblock, Groesse relativ zur Ueberschrift ----------- */
@media (max-width:900px){
  .dsn-card .nb-fx .fx2, .page-head::after, .hero::after{ display:none !important; }

  .dsn-card :is(.ph-txt,.sbanner-title,.section-head)[data-ghost],
  .page-head .inner[data-ghost]{ position:relative; isolation:isolate; }
  .dsn-card :is(.ph-txt,.sbanner-title,.section-head)[data-ghost]::before,
  .page-head .inner[data-ghost]::before{
    content:attr(data-ghost); position:absolute; z-index:-1; pointer-events:none;
    right:-.04em; top:50%; transform:translateY(-82%);
    font-family:'SG Display',sans-serif; font-weight:900; text-transform:uppercase;
    font-size:var(--ghost-fs, 5.6em); line-height:.9; letter-spacing:-.02em; white-space:nowrap;   /* --ghost-fs: js/main.js passt das Wort in die Karte ein */
    color:rgba(255,255,255,.07); }
}

/* --- Desktop: der Kopfblock-Ghost bleibt aus, die Effekt-Ebene traegt ihn -- */
@media (min-width:901px){
  .dsn-card :is(.ph-txt,.sbanner-title,.section-head)[data-ghost]::before,
  .page-head .inner[data-ghost]::before{ content:none; }
}

/* ===========================================================================
   Mannschaftskarten (teams.html) kompakter
   Das Foto nahm mit bis zu 290px den groessten Teil der Karte ein, darunter
   folgten grosszuegige Abstaende. Bei 18 Mannschaften wird die Seite dadurch
   sehr lang. Foto und Innenabstaende zurueckgenommen, Zeilen enger — die
   Angaben bleiben vollstaendig lesbar.
   =========================================================================== */
.team-grid{ gap:1.1rem; }
.team-grid .team-card{ padding:1.1rem 1.2rem; padding-left:1.2rem; }
/* Fotofenster ueber aspect-ratio statt fester Hoehe.
   Die feste Hoehe (zuletzt clamp(200px,22vw,290px)) haengt an der Fensterbreite,
   die Fotobreite aber an der Kartenbreite — beide laufen auseinander. Bei
   schmaleren Fenstern blieb deshalb nur rund 68% der Bildhoehe sichtbar, und
   weil die obersten Koepfe in den Mannschaftsfotos bei 17% liegen, wurden sie
   angeschnitten.
   Mit aspect-ratio:1.66 ist das Verhaeltnis fest: bei einem Bildverhaeltnis von
   1.482 (1761x1188) sind immer 89% der Bildhoehe im Fenster, also 5.5% bis
   94.5% — die Koepfe bei 17% und die Fuesse bei 88% liegen sicher drin.
   Das Foto wird dadurch rund 340px hoch statt 290px, die Karte entsprechend
   hoeher. */
.team-grid .team-card .tc-photo{ margin:-1.1rem -1.2rem .8rem;
  height:auto; aspect-ratio:1.66; }
.team-grid .team-card .tc-photo:not(.tc-photo-empty) > img{ height:100%; object-position:center 50%; }
.team-grid .team-card h3{ font-size:1.08rem; }
.team-grid .team-card .league{ margin-top:.25rem; font-size:.74rem; letter-spacing:.14em; }
.team-grid .team-card dl{ margin-top:.7rem; gap:.2rem .8rem; font-size:.86rem; }
.team-grid .team-card dt{ font-size:.68rem; letter-spacing:.12em; }
.team-grid .team-card .text-link{ margin-top:.7rem; font-size:.82rem; }
/* Sponsorplakette mitschrumpfen, sonst ueberdeckt sie das kleinere Foto */
.team-grid .team-card .team-sponsor{ padding:.24rem .5rem; }
.team-grid .team-card .team-sponsor img{ height:20px; }

@media (max-width:900px){
  .team-grid{ gap:.9rem; }
  .team-grid .team-card .tc-photo{ height:clamp(190px,46vw,260px); }
}

/* ===========================================================================
   Impressionen-Slider: ein Bild pro Ansicht
   Bisher lagen drei Bilder nebeneinander (33.334vw je Slide). Jetzt fuellt
   ein Bild die ganze Breite; die Pfeile blaettern genau eins weiter, weil
   main.js die Schrittweite aus der Slide-Breite liest (step()).
   Hoehe angehoben, ein einzelnes Bild traegt mehr Flaeche.
   =========================================================================== */
.dsn-card .fslide{ width:100%; }
.dsn-card .fslider{ height:clamp(220px,42vw,560px); }
.dsn-card .fslide{ background-position:center 35%; }

/* Pfeile im Seitendesign: kantig, Polish-Blau, rot beim Hover */
.dsn-card .fs-arrow{ width:52px; height:52px; border-radius:0;
  background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(4,8,40,.45);
  transition:background .2s ease, transform .2s ease; }
.dsn-card .fs-arrow:hover{ transform:translateY(-50%) scale(1.06);
  background:linear-gradient(165deg,#ff4433 0%,#f82818 55%,#cc1d0a 100%); }
.dsn-card .fs-prev{ left:14px; } .dsn-card .fs-next{ right:14px; }

@media (max-width:640px){
  .dsn-card .fs-arrow{ width:44px; height:44px; font-size:1.4rem; }
  .dsn-card .fs-prev{ left:8px; } .dsn-card .fs-next{ right:8px; }
}

/* ===========================================================================
   Footer auf dem Handy
   Die Spalten stapeln zwar schon (760px), der Rest blieb aber auf Desktop-
   Mass: Markenblock nebeneinander mit 60px-Logo, Rechtslinks in einer Zeile
   mit 1.25rem Einzug (bricht unschoen um), "Made by DV" rechts abgesetzt.
   =========================================================================== */
@media (max-width:760px){
  .site-footer .container{ width:min(1440px, calc(100% - 2rem)) !important; }

  /* Spalten mit klarer Trennung statt uebergangslos gestapelt */
  .site-footer .footer-grid{ gap:1.6rem; }
  .site-footer .footer-grid > *  + *{ padding-top:1.4rem;
    border-top:1px solid rgba(255,255,255,.14); }

  /* Markenblock: Logo ueber den Text, zentriert wirkt hier unruhig -> linksbuendig */
  .site-footer .f-brand{ gap:.8rem; }
  .site-footer .f-brand img{ height:46px; }
  .site-footer .f-brand p{ max-width:none; font-size:.86rem; }

  .site-footer h4{ font-size:.78rem; letter-spacing:.18em; margin-bottom:.5rem; }
  .site-footer .footer-grid ul{ display:grid; gap:.45rem; }
  .site-footer .footer-grid a{ display:inline-flex; padding:.15rem 0; }

  /* Schlusszeile: untereinander, linksbuendig, klare Abstaende */
  .site-footer .footer-bottom{ grid-template-columns:1fr; gap:.9rem;
    padding-top:1.4rem; text-align:left; }
  .site-footer .footer-bottom .legal{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; }
  .site-footer .footer-bottom .legal a{ margin-left:0; }
  .site-footer .made-by{ justify-self:start; }
  .site-footer .made-by img{ height:26px; width:auto; }
}

/* ===========================================================================
   Navbar und Menue auf dem Handy
   Die Leiste lief mit min-height:84px und 52px-Logo auf Desktop-Mass weiter
   und fraß ein Viertel des Bildschirms. Das aufgeklappte Menue hatte keine
   Struktur: alle Punkte gleich gross untereinander, Untermenue ohne Absetzung,
   CTAs mittendrin.
   =========================================================================== */
@media (max-width:900px){
  /* --- Leiste kompakt ---------------------------------------------------- */
  .site-header{ padding-top:.6rem; padding-inline:.6rem; }
  .site-header .inner{ min-height:58px; padding-inline:.8rem !important;
    padding-left:calc(28px + .8rem) !important; }
  .site-header .inner::before{ width:28px; }     /* schmalere Naht */
  .brand img{ height:38px; }
  .brand .brand-text{ font-size:.8rem; line-height:1.1; }
  .brand .brand-text small{ font-size:.62rem; }
  .nav-social{ display:none; }                   /* im Menue ohnehin nicht, spart Breite */

  /* --- Aufgeklapptes Menue ----------------------------------------------- */
  .main-nav{ padding:.5rem 0 0; gap:0;
    max-height:calc(100vh - 72px); overflow-y:auto; }
  /* Reihenfolge: erst die Seiten, dann Shops, die beiden CTAs ans Ende.
     Im Markup steht "Bundesliga Maenner" ganz vorne - auf dem Handy gehoert
     ein Button nicht an den Anfang der Navigation. */
  .main-nav > a:not(.nav-cta){ order:1; }
  .main-nav .has-sub{ order:2; }
  .main-nav .button-primary.nav-cta{ order:3; }

  /* jeder Punkt eine eigene Zeile mit Trennlinie statt gleichfoermiger Liste */
  .main-nav > a:not(.nav-cta){ width:100%; padding:.85rem 1rem; font-size:1rem;
    color:#0616a8; border-top:1px solid rgba(4,8,40,.1); }
  .main-nav > a:not(.nav-cta):hover,
  .main-nav > a:not(.nav-cta)[aria-current="page"]{ background:rgba(4,8,40,.05); }
  .main-nav > a:not(.nav-cta)[aria-current="page"]{ box-shadow:inset 3px 0 0 #f82818; }
  .main-nav > a::after{ display:none; }          /* Desktop-Unterstrich weg */

  /* Untermenue "Shops" als eingerueckte Gruppe */
  .main-nav .has-sub{ width:100%; border-top:1px solid rgba(4,8,40,.1); }
  .main-nav .nav-sub-label{ display:block; padding:.85rem 1rem .35rem; font-size:1rem; color:#3a4270; }
  .main-nav .nav-sub{ margin:0 1rem .5rem; padding-left:0; }
  .main-nav .nav-sub a{ padding:.55rem 0 .55rem .9rem; font-size:.92rem; }

  /* CTAs abgesetzt am Ende, volle Breite, untereinander */
  .main-nav .button-primary.nav-cta{ width:calc(100% - 2rem); margin:.5rem 1rem 0;
    min-width:0; justify-content:center; }
  .main-nav .button-primary.nav-cta:last-of-type{ margin-bottom:1rem; }
  .main-nav .nav-social{ order:4; }
}

@media (max-width:420px){
  .brand .brand-text small{ display:none; }      /* Zusatzzeile weg statt Umbruch */
  .brand img{ height:34px; }
  .site-header .inner{ min-height:52px; }
}

/* ===========================================================================
   Aufgeklapptes Menue: Markenkopf und saubere Buttons
   =========================================================================== */
@media (max-width:900px){
  /* Menue ueber die volle Breite der Leiste, mit etwas Luft nach aussen.
     Es haengt absolut an .site-header .inner - dessen linkes Padding fuer die
     Naht (28px) wuerde die Buttons sonst verschieben. */
  .main-nav{ left:0; right:0; margin-left:calc(-28px - .8rem); }

  /* Markenkopf im Menue: Wappen und Vereinsname ueber "Home".
     Als ::before statt eigenem Markup - so aendert sich nichts an den 32 Seiten,
     und der Bildpfad stimmt von hier aus fuer Wurzel und teams/ gleichermassen. */
  .main-nav::before{ content:"SG BBM Bietigheim"; order:0;
    display:flex; align-items:center; width:100%;
    padding:.9rem 1rem .9rem calc(1rem + 40px + .7rem);
    background:url(../img/SG_Logo_Splitter.svg) no-repeat left 1rem center / 40px auto;
    font-family:var(--font-display); font-weight:700; font-size:1rem;
    letter-spacing:.03em; text-transform:uppercase; color:#0616a8;
    border-bottom:2px solid rgba(4,8,40,.12); }

  /* Buttons: gleiche Breite wie die Menuepunkte, Text optisch mittig trotz Naht */
  .main-nav .button-primary.nav-cta{ width:calc(100% - 2rem); margin:.55rem 1rem 0;
    min-width:0; padding:.8rem 1rem .8rem calc(1rem + 12px);
    justify-content:center; gap:.6rem; }
  .main-nav .button-primary.nav-cta:last-of-type{ margin-bottom:1.1rem; }
}

/* ===========================================================================
   Geoeffnetes Menue: Leiste links raeumen, Schliessen-X an den Markenkopf
   Logo und Vereinsname stehen dann doppelt - einmal in der Leiste, einmal im
   Menuekopf. Bei offenem Menue verschwindet die linke Haelfte der Leiste,
   und das X wandert neben die Schrift im Menuekopf.
   :has() liest den Zustand vom Button (aria-expanded); faellt es aus, bleibt
   nur die Doppelung sichtbar - nichts bricht.
   =========================================================================== */
@media (max-width:900px){
  .site-header .inner:has(.nav-toggle[aria-expanded="true"]) .brand{ visibility:hidden; }
  .site-header .inner:has(.nav-toggle[aria-expanded="true"])::before{ opacity:0; }

  /* X sitzt auf der Hoehe des Markenkopfs (Zeile ist rund 62px hoch), rechts */
  .nav-toggle[aria-expanded="true"]{ position:absolute; z-index:80;
    top:calc(100% + 31px); right:1rem; transform:translateY(-50%);
    padding:.35rem; }
  .nav-toggle[aria-expanded="true"] span{ width:24px; }
}

/* ===========================================================================
   Menuebreite: "Bundesliga Maenner" ist die laengste Beschriftung
   Die Leiste haelt seitlich Abstand zum Bildschirmrand (.site-header hat
   padding-inline), das Menue hing an deren Innenbreite. Auf schmalen Geraeten
   blieb fuer den Button zu wenig Platz - die Beschriftung stand gedraengt bis
   umgebrochen. Das Menue reicht jetzt bis an beide Bildschirmkanten, die
   Buttons bekommen dadurch rund 1.2rem mehr Breite.
   =========================================================================== */
@media (max-width:900px){
  .main-nav{
    margin-left:calc(-28px - .8rem - .6rem);   /* Naht + Innen- + Leistenabstand */
    margin-right:calc(-.8rem - .6rem);
    left:0; right:0; }

  .main-nav .button-primary.nav-cta{
    width:calc(100% - 1.6rem); margin-inline:.8rem;
    padding:.8rem .8rem .8rem calc(.8rem + 12px);
    font-size:.92rem; letter-spacing:.02em; white-space:nowrap; }

  /* Markenkopf und Menuepunkte auf denselben Innenrand wie die Buttons */
  .main-nav::before{ padding-left:calc(.8rem + 40px + .7rem); padding-right:.8rem;
    background-position:left .8rem center; }
  .main-nav > a:not(.nav-cta){ padding-inline:.8rem; }
  .main-nav .nav-sub-label{ padding-inline:.8rem; }
  .main-nav .nav-sub{ margin-inline:.8rem; }
  .nav-toggle[aria-expanded="true"]{ right:.8rem; }
}

/* ===========================================================================
   Schliessen-X sichtbar machen
   .site-header .inner > * setzt z-index:1 auf ALLE direkten Kinder — also auch
   auf .main-nav. Bei gleichem z-index entscheidet die Dokumentreihenfolge,
   und <nav> steht hinter <button>: das Menue lag damit ueber dem X.
   Der Markenkopf bekommt zusaetzlich eine feste Hoehe, damit der Versatz des
   X (halbe Zeilenhoehe) exakt passt statt geschaetzt zu sein.
   =========================================================================== */
@media (max-width:900px){
  .site-header .inner > .main-nav{ z-index:1; }
  .main-nav::before{ min-height:64px; box-sizing:border-box;
    padding-right:3.2rem; }          /* Platz fuer das X, damit nichts kollidiert */

  .site-header .inner > .nav-toggle[aria-expanded="true"]{
    position:absolute; z-index:120;
    top:calc(100% + 32px); right:.8rem; transform:translateY(-50%);
    display:block; padding:.35rem; }
}

/* ===========================================================================
   Trikotsaum mobil wieder auf die Karten
   Zuvor war er unter 900px ueberall abgeschaltet. Auf den Hintergrundkarten
   soll er bleiben — nur schmaler, damit er neben dem Inhalt steht und nicht
   darunter. Der Hero bleibt mobil ohne Saum (dort verdeckt er den Text).
   =========================================================================== */
@media (max-width:900px){
  .dsn-card .nb-fx .fx1,
  .page-head::before,
  .team-card .tc-photo-empty::before,
  .org-photo-placeholder::before{ display:block !important; }

  .dsn-card .nb-fx .fx1,
  .page-head::before{ width:clamp(56px,11%,96px); }

  .hero::before{ display:none !important; }   /* Hero bleibt frei */
}

/* ===========================================================================
   Menue als rechtes Panel statt volle Breite
   Links bleibt die Seite sichtbar (Hero, Karten) — das Menue legt sich nur
   ueber die rechte Haelfte. Das X wird blau statt rot: Rot ist auf der Seite
   die Farbe fuer Aktionen (Buttons, aktive Seite), zum Schliessen passt der
   ruhigere Blauton besser und hebt sich vom Off-White des Panels ab.
   =========================================================================== */
@media (max-width:900px){
  .main-nav{ left:auto; right:0; width:min(82%,360px);
    margin-left:0; margin-right:calc(-.8rem - .6rem); }

  /* X innerhalb des Panels, buendig zu dessen rechtem Innenrand */
  .site-header .inner > .nav-toggle[aria-expanded="true"]{ right:-.6rem; }
  .nav-toggle[aria-expanded="true"] span{ background:#0016a8; }
  .nav-toggle[aria-expanded="true"]:hover span{ background:#0818d8; }
}

/* ===========================================================================
   Impressionen-Slider: zwei Bilder nebeneinander
   Die Pfeile blaettern weiterhin um genau ein Bild — main.js liest die
   Schrittweite aus der Slide-Breite (step()), die Haelfte der Ansicht.
   Auf dem Handy bleibt es bei einem Bild, zwei waeren dort zu klein.
   =========================================================================== */
.dsn-card .fslide{ width:50%; }
.dsn-card .fslider{ height:clamp(220px,26vw,380px); }

@media (max-width:720px){
  .dsn-card .fslide{ width:100%; }
  .dsn-card .fslider{ height:clamp(200px,46vw,320px); }
}

/* ===========================================================================
   Mannschaftsseiten: Fotolegende und Mannschafts-News im Seitendesign
   Beide liefen noch im Vollton #0000c4 mit grauen Fremdtoenen aus dem alten
   Theme (--fg-dim, --fg-faint, --bg-3). Jetzt derselbe Bau wie alle Karten:
   165deg-Polish, Lichtkante, Schatten, Off-White fuer Fliesstext.
   Die Regeln stehen hier statt in den Seiten, damit sie zentral bleiben —
   die seiteneigenen <style>-Bloecke laden vor dieser Datei.
   =========================================================================== */

/* ===========================================================================
   Fotolegende auf den Mannschaftsseiten
   Reihen des Mannschaftsfotos, im Admin gepflegt. Die Regeln standen als
   <style> in einer einzelnen Seite — jede Mannschaft kann jetzt eine Legende
   fuehren, also gehoeren sie hierher. Farbe und Material kommen aus dem
   .dsn-card-Block weiter unten.
   =========================================================================== */
.photo-legend{ margin:1.6rem 0 2rem; padding:1.1rem 1.5rem; display:grid; gap:.7rem; }
.photo-legend .pl-head{ font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; font-size:.9rem; margin-bottom:.1rem; }
.pl-row{ display:grid; grid-template-columns:8.5rem 1fr; gap:.3rem 1.2rem; align-items:baseline; }
.pl-label{ font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; font-size:.8rem; white-space:nowrap; }
.pl-players{ font-size:1rem; line-height:1.5; }
.pl-players b{ font-family:var(--font-display); font-weight:700; letter-spacing:.02em; }
.pl-note{ font-size:.8rem; font-style:italic; margin-top:.15rem; }
@media (max-width:560px){ .pl-row{ grid-template-columns:1fr; gap:.1rem; } }

/* Trainingszeiten in den Mannschaftskarten: je Termin eine Zeile */
.team-card .tr-slot{ display:block; }
.team-card .tr-slot + .tr-slot{ margin-top:.25rem; }
.team-card .tr-slot b{ font-weight:700; }

/* --- Legende unter dem Mannschaftsfoto ----------------------------------- */
.dsn-card .photo-legend{ position:relative; overflow:hidden;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(4,8,40,.42);
  padding:1.1rem 1.4rem; }
.dsn-card .photo-legend .pl-head{ color:#fff; font-size:.78rem; letter-spacing:.22em; }
.dsn-card .pl-label{ color:#ff4433; }                 /* Reihenbezeichnung im Akzent */
.dsn-card .pl-players{ color:#fff; }
.dsn-card .pl-players b{ color:#fff; }
.dsn-card .pl-players .pl-role{ color:rgba(255,255,255,.66); }
.dsn-card .pl-note{ color:rgba(255,255,255,.6); }

/* ===========================================================================
   Mannschafts-News auf den Teamseiten
   Der Aufbau lag bisher als <style> in einer einzigen Mannschaftsseite. Die
   Meldungen werden jetzt im Admin gepflegt und auf jeder Teamseite erzeugt —
   also gehoert auch das Layout hierher. Farben und Material stehen im
   .dsn-card-Block darunter.
   =========================================================================== */
.tnews{ display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(1rem,2.4vw,1.9rem); align-items:stretch; }
.tnews a{ text-decoration:none; }
/* Einzelne Meldung: keine leere zweite Spalte */
.tnews-solo{ grid-template-columns:1fr; }

.tnews-feature, .tnews-item{ overflow:hidden; border-radius:0; }
.tnews-img{ display:block; aspect-ratio:16 / 10; overflow:hidden; }
.tnews-img img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease; }
.tnews-feature:hover .tnews-img img{ transform:scale(1.04); }
.tnews-body{ padding:clamp(1rem,2vw,1.4rem) clamp(1.1rem,2.2vw,1.5rem) clamp(1.2rem,2.4vw,1.6rem); }
.tnews-date{ display:block; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; font-size:.72rem; letter-spacing:.16em; margin-bottom:.35rem; }
.tnews-feature h3{ font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.1; margin:0 0 .55rem; }
.tnews-body p{ margin:0; }

.tnews-list{ display:grid; grid-template-rows:repeat(3,1fr); gap:clamp(.8rem,1.7vw,1.1rem); }
.tnews-item{ display:grid; grid-template-columns:40% 1fr;
  gap:clamp(.7rem,1.4vw,1rem); align-items:stretch; min-height:0; }
.tnews-thumb{ display:block; overflow:hidden; height:100%; }
.tnews-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tnews-itembody{ padding:clamp(.6rem,1.4vw,.85rem) clamp(.8rem,1.6vw,1rem) clamp(.6rem,1.4vw,.85rem) 0;
  align-self:center; }
.tnews-item .tnews-date{ font-size:.66rem; margin-bottom:.2rem; }
.tnews-item h4{ font-size:1.02rem; line-height:1.15; text-transform:uppercase; margin:0 0 .3rem; }
.tnews-itembody p{ margin:0; font-size:.86rem; line-height:1.4; }

/* Platzhalter ohne eigenes Bild: SG-Zeichen mittig statt leerer Flaeche */
:is(.tnews-img,.tnews-thumb).is-empty{ display:grid; place-items:center; }
:is(.tnews-img,.tnews-thumb).is-empty img{ width:auto; height:auto;
  object-fit:contain; transform:none; }
.tnews-img.is-empty img{ max-width:34%; max-height:60%; }
.tnews-thumb.is-empty img{ max-width:52%; max-height:62%; }

@media (max-width:820px){
  .tnews{ grid-template-columns:1fr; }
  .tnews-list{ grid-template-rows:none; }
  .tnews-thumb{ height:auto; aspect-ratio:4 / 3; }
}
@media (max-width:480px){
  .tnews-item{ grid-template-columns:1fr; }
  .tnews-thumb{ aspect-ratio:16 / 9; }
}

/* --- Mannschafts-News ----------------------------------------------------- */
.dsn-card :is(.tnews-feature,.tnews-item){ position:relative; overflow:hidden;
  border:0; border-radius:0;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px rgba(4,8,40,.42);
  transition:transform .3s ease, box-shadow .3s ease; }
.dsn-card :is(.tnews-feature,.tnews-item):hover{ transform:translateY(-4px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 24px 52px rgba(4,8,40,.5); }
.dsn-card .tnews-date{ color:#ff4433; letter-spacing:.16em; }
.dsn-card :is(.tnews-feature h3 a,.tnews-item h4 a){ color:#fff; }
.dsn-card :is(.tnews-feature h3 a,.tnews-item h4 a):hover{ color:#ff4433; }
.dsn-card .tnews-body p{ color:#EFEDE8; }

/* Platzhalter ohne Bild: Trikotmuster wie bei den Teamkarten statt Grau */
.dsn-card :is(.tnews-img,.tnews-thumb).is-empty{
  background:linear-gradient(165deg,#0f24f0 0%,#0818d8 55%,#0616a8 100%); }
.dsn-card :is(.tnews-img,.tnews-thumb).is-empty img{ opacity:.9;
  filter:drop-shadow(0 4px 14px rgba(4,8,40,.6)); }

/* ===========================================================================
   Menue-Panel und Schliessen-X, deterministisch
   Vorher haing das X ueber top:calc(100% + 32px) an der Hoehe von
   .site-header .inner — dessen Geometrie aendert sich mit Padding, Logo und
   Breakpoint, und als absolut positioniertes Kind kaempfte es ausserdem mit
   der Stapelung des Menues. Jetzt position:fixed am Viewport, die Balkenhoehe
   steckt in --bar. Damit ist die Lage unabhaengig von der Leiste.
   =========================================================================== */
@media (max-width:900px){
  .site-header{ --bar:58px; --randluft:.6rem; }

  /* Panel schmaler, damit links mehr von der Seite stehenbleibt.
     Der weiche 40px-Schatten legte einen Schleier ueber die halbe Seite —
     jetzt eng am Panel. */
  .main-nav{ left:auto; right:0; width:min(74%,320px);
    margin-left:0; margin-right:calc(-.8rem - var(--randluft));
    box-shadow:-8px 0 24px rgba(4,8,40,.28); }

  /* X mittig auf der Markenzeile (64px hoch), am rechten Bildschirmrand */
  .site-header .inner > .nav-toggle[aria-expanded="true"]{
    position:fixed; z-index:200;
    top:calc(var(--randluft) + var(--bar) + 32px);
    right:1rem; left:auto; transform:translateY(-50%);
    display:block; padding:.35rem; background:none; border:0; }
  .nav-toggle[aria-expanded="true"] span{ background:#0016a8; width:24px; }
  .nav-toggle[aria-expanded="true"]:hover span{ background:#0818d8; }

  /* Platz fuer das X in der Markenzeile */
  .main-nav::before{ padding-right:3.4rem; }
}

@media (max-width:420px){
  .site-header{ --bar:52px; }
}

/* Marke und Naht in der Leiste ausblenden, solange das Menue offen ist.
   Ueber body.nav-open statt :has() — funktioniert in jedem Browser. */
@media (max-width:900px){
  body.nav-open .site-header .inner .brand{ visibility:hidden; }
  body.nav-open .site-header .inner::before{ opacity:0; }
}

/* ===========================================================================
   Menue-Panel: kein Schleier mehr, Kante als Trikotnaht
   Der Schlagschatten legte sich auch bei engem Radius ueber die Seite links.
   Er faellt ganz weg; die Panelkante markiert stattdessen eine 4px-Naht —
   das ist ohnehin das Motiv der Seite und braucht keine Flaeche.
   Markenzeile auf feste 72px, damit das X exakt zwischen den beiden
   Textzeilen sitzt (36px = halbe Zeilenhoehe) statt geschaetzt.
   =========================================================================== */
@media (max-width:900px){
  .main-nav{ box-shadow:none; }
  .main-nav::before{ min-height:72px; }

  /* Naht an der linken Panelkante, senkrecht ueber die ganze Hoehe */
  .main-nav{ border-left:4px solid transparent;
    border-image:repeating-linear-gradient(180deg,
      #0016a8 0 4px,#0818d8 4px 8px,#0016a8 8px 12px,#0818d8 12px 16px,#0016a8 16px 20px,#0818d8 20px 24px,
      #cc1d0a 24px 28px,#f82818 28px 32px,#cc1d0a 32px 36px,#f82818 36px 40px,#cc1d0a 40px 44px,#f82818 44px 48px) 4; }

  .site-header .inner > .nav-toggle[aria-expanded="true"]{
    top:calc(var(--randluft) + var(--bar) + 36px); }
}

/* ===========================================================================
   Schliessen-Knopf im Menue, Zierleiste raus
   Der Hamburger blieb in der Leiste; das X ist ein eigener Knopf INNERHALB
   von .main-nav (von main.js eingefuegt). Als Kind des Panels sitzt er ueber
   top:36px exakt auf der Mitte der 72px hohen Markenzeile — ohne Rechnerei
   mit Balkenhoehe und Randluft, die je nach Breakpoint danebenlag.
   =========================================================================== */
.nav-close{ display:none; }

@media (max-width:900px){
  /* Naht an der Panelkante wieder entfernen */
  .main-nav{ border-left:0; border-image:none; box-shadow:none; }

  .nav-close{ display:block; position:absolute; z-index:5;
    top:36px; right:1rem; transform:translateY(-50%);
    width:34px; height:34px; padding:0; border:0; background:none; cursor:pointer; }
  .nav-close span{ position:absolute; left:5px; right:5px; top:50%; height:3px;
    background:#0016a8; transition:background .2s ease; }
  .nav-close span:first-child{ transform:rotate(45deg); }
  .nav-close span:last-child{ transform:rotate(-45deg); }
  .nav-close:hover span{ background:#f82818; }

  /* Hamburger in der Leiste bleibt an seinem Platz und verschwindet beim Oeffnen */
  .site-header .inner > .nav-toggle[aria-expanded="true"]{
    position:relative; top:auto; right:auto; transform:none; visibility:hidden; }
}

/* ===========================================================================
   URSACHE der weissen Flaeche links: .site-header .inner > * setzt
   position:relative auf ALLE direkten Kinder — also auch auf .main-nav.
   Diese Regel (0,2,0) schlaegt das position:absolute aus style.css (0,1,0).
   Das Menue lag dadurch mobil IM Textfluss der Leiste: es wurde zum
   Flex-Element neben der (nur per visibility versteckten, aber weiterhin
   Platz belegenden) Marke, und die Leiste wuchs auf Menuehoehe — die
   Off-White-Flaeche links war der aufgeblaehte Balken.
   Hier wird die absolute Positionierung mit hoeherer Spezifitaet zurueckgeholt.
   =========================================================================== */
@media (max-width:900px){
  .site-header .inner > .main-nav{ position:absolute; top:100%; }

  /* Marke aus dem Fluss nehmen statt nur unsichtbar schalten, sonst haelt sie
     weiter ihre Breite frei */
  body.nav-open .site-header .inner .brand{ display:none; }

  /* Buttons sauber: gleiche Breite, gleicher Abstand, Text mittig */
  .main-nav .button-primary.nav-cta{
    width:calc(100% - 1.6rem); margin:.5rem .8rem 0;
    padding:.85rem .9rem .85rem calc(.9rem + 12px);
    font-size:.94rem; letter-spacing:.02em; white-space:nowrap;
    justify-content:center; gap:.55rem; }
  .main-nav .button-primary.nav-cta:last-of-type{ margin-bottom:1rem; }
  .main-nav .button-primary.nav-cta img{ height:20px; }
}

/* ===========================================================================
   Leiste bei offenem Menue transparent
   Marke und Naht sind dort ohnehin ausgeblendet, uebrig blieb nur die leere
   Off-White-Flaeche. Ohne sie schaut der Hero auch oben links durch; das
   Menue haengt frei darueber. Der Hamburger ist beim Oeffnen unsichtbar,
   geschlossen wird ueber das X im Panel.
   =========================================================================== */
@media (max-width:900px){
  /* Hoehe MUSS bleiben: das Menue haengt an top:100% der Leiste — mit
     min-height:0 wuerde es an den oberen Bildschirmrand springen. */
  body.nav-open .site-header .inner{ background:none; box-shadow:none; }
}

/* ===========================================================================
   "Partner werden" rechts auf der Karte
   Der Button steht in einem eigenen .container am Ende der Sponsoren-Section.
   Der erbt kein text-align von der Section (die Regel greift nur auf
   .sponsoren-split .container, und dieser hier hat ein inline-style-margin),
   deshalb hier ausdruecklich rechtsbuendig — Desktop wie Handy.
   =========================================================================== */
/* Der Button steht im letzten .container der Section (davor: Kopf und
   Laufband). Flex statt text-align, weil der Button inzwischen ein
   inline-flex-Element ist — margin-left:auto schiebt ihn zuverlaessig nach
   rechts, ohne auf :has() angewiesen zu sein. */
.sponsoren-split > .container:last-of-type{ display:flex; justify-content:flex-end; }
.sponsoren-split .text-link[href="sponsoren.html"]{ margin-left:auto; }
/* Dieselbe Ausrichtung im Partnerabschnitt der Startseite. Der trug die Klasse
   sponsoren-split nie, deshalb stand "Partner werden" dort links. Angesprochen
   ueber die Beschriftung des Abschnitts statt ueber :has(), das die Seite
   sonst nirgends braucht. Die Schaltflaeche ist inline-flex — text-align
   genuegt, ein Flexrahmen ist nicht noetig. */
section[aria-labelledby="sponsoren-title"] > .container:last-of-type{ text-align:right; }

@media (max-width:640px){
  /* mobil buendig zur Kartenkante, nicht auf halber Breite haengend */
  .sponsoren-split .text-link[href="sponsoren.html"]{ width:auto; }
}

/* ===========================================================================
   Spielbericht- und Hallen-Popup, Saisonarchiv
   ---------------------------------------------------------------------------
   Das Popup lief noch im alten Theme (--bg, --navy) und fiel gegen die Karten
   der Seite ab. Es bekommt jetzt denselben Bau wie jede Karte: Blau-Polish,
   Trikotsaum am linken Rand, Lichtkante, Off-White als Schriftfarbe.
   Dazu die Bausteine fuer die neuen Inhalte — Bericht, Aufstellung mit
   Torzahl, Hallendaten, Wochenplan und Saisonarchiv.
   =========================================================================== */

/* --- Fenster ------------------------------------------------------------- */
.gm-modal{ position:fixed; overflow:hidden;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 34px 76px rgba(4,8,40,.58); }
/* Trikotsaum wie auf den Karten, nur schmaler und ohne Schraege — im Fenster
   waere ein Auslauf nach oben bei 80vh Hoehe nicht mehr lesbar. */
.gm-modal::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:10px;
  background:repeating-linear-gradient(90deg,
    #0016a8 0 4px,#0818d8 4px 8px,#0016a8 8px 12px,#0818d8 12px 16px,
    #cc1d0a 16px 20px,#f82818 20px 24px);
  opacity:.9; pointer-events:none; z-index:3; }
.gm-overlay{ background:rgba(2,6,32,.72); backdrop-filter:blur(2px); }

.gm-head{ background:none; padding:1.5rem 1.75rem 1.15rem 2.2rem;
  border-bottom:1px solid rgba(255,255,255,.14); }
.gm-head::before{ content:none; }          /* schiefer Block des alten Themes */
.gm-head h2{ color:#fff; font-family:var(--font-display); }
.gm-league{ color:#ff4433; }
.gm-score{ color:#fff; }
.gm-half, .gm-meta, .gm-vs{ color:rgba(255,255,255,.68); }
.gm-meta a{ color:#EFEDE8; text-decoration:underline; text-underline-offset:2px; }
.gm-close{ color:rgba(255,255,255,.7); }
.gm-close:hover{ color:#fff; }
.gm-body{ padding:1.25rem 1.75rem 1.5rem 2.2rem; color:#EFEDE8; }
.gm-body h3{ color:#fff; }
.gm-none{ color:rgba(255,255,255,.6); }

/* --- Reiter: gleiche Sprache wie die Reiter auf den Mannschaftsseiten ----- */
.gm-tabs{ border-bottom:0; gap:.3rem; margin-bottom:1.1rem; }
.gm-tab{ position:relative; padding:.55rem 1.1rem; border:0; border-radius:0;
  font-family:var(--font-display); font-weight:700; font-size:.92rem;
  letter-spacing:.03em; text-transform:uppercase; color:#EFEDE8; cursor:pointer;
  background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.gm-tab:hover{ color:#fff; background:linear-gradient(165deg,#0f24f0 0%,#0818d8 55%,#0616a8 100%); }
.gm-tab.active{ color:#fff; transform:translateY(-2px);
  background:linear-gradient(165deg,#1229ff 0%,#0818d8 55%,#0616a8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px rgba(4,8,40,.42); }
.gm-tab.active::after{ content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; background:#f82818; }

/* --- Bericht ------------------------------------------------------------- */
.gm-rep-head{ font-family:var(--font-display); font-weight:900; text-transform:none;
  font-size:1.12rem; line-height:1.25; letter-spacing:0; color:#fff; margin-bottom:.6rem; }
.gm-rep-lead{ color:#fff; font-size:.95rem; line-height:1.5; margin-bottom:.9rem;
  padding-left:.9rem; border-left:3px solid #f82818; }
.gm-pane p{ color:#EFEDE8; font-size:.9rem; line-height:1.62; margin-bottom:.7rem; }
.gm-rep-note{ color:rgba(255,255,255,.45) !important; font-size:.76rem !important;
  margin-top:1rem; }
/* .gm-pane p oben ist spezifischer als .gm-none — Hinweiszeilen blieben sonst
   in voller Schriftfarbe stehen. */
.gm-pane p.gm-none, .gm-pane p.ar-empty{ color:rgba(255,255,255,.6); }

/* Disziplinarbilanz: Zahl gross, Klammerwert Heim/Gast */
.gm-disc{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; margin-top:1rem;
  padding-top:.9rem; border-top:1px solid rgba(255,255,255,.14); }
.gm-disc span{ font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.62); }
.gm-disc b{ font-family:var(--font-display); font-size:1rem; color:#fff; margin-right:.25rem; }

/* --- Aufstellung --------------------------------------------------------- */
.gm-lineup-team h4{ font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:.86rem; letter-spacing:.1em; text-transform:uppercase;
  padding-bottom:.4rem; border-bottom:2px solid #f82818; margin-bottom:.5rem; }
.gm-lineup th{ color:rgba(255,255,255,.6); border-bottom-color:rgba(255,255,255,.2); }
.gm-lineup td{ color:#EFEDE8; border-bottom-color:rgba(255,255,255,.1); }
.gm-lineup td.nm{ color:#fff; }
.gm-lineup td.st{ text-align:right; font-family:var(--font-display); color:#fff; }
.gm-officials{ margin-top:.5rem; font-size:.78rem !important; line-height:1.45;
  color:rgba(255,255,255,.62) !important; }
.gm-officials span{ display:block; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.42); }

/* --- Hallendaten --------------------------------------------------------- */
.gm-gym-name, .gm-gym-title{ font-family:var(--font-display); color:#fff; }
.gm-gym{ display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem;
  font-size:.86rem; margin:.2rem 0 .8rem; }
.gm-gym dt{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.45); padding-top:.15rem; }
.gm-gym dd{ color:#EFEDE8; margin:0; }
.gm-gym a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* Schaltflaeche, die wie ein Link aussieht — im Fliesstext und in Tabellen */
.gm-link{ background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:#ff4433; text-decoration:underline; text-underline-offset:3px; }
.gm-link:hover{ color:#fff; }

/* --- Wochenplan einer Halle ---------------------------------------------- */
.gw-nav{ display:flex; align-items:center; justify-content:space-between;
  gap:.8rem; margin-bottom:.8rem; padding-bottom:.6rem;
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:.8rem; color:rgba(255,255,255,.7); }
.gw-row{ display:grid; grid-template-columns:auto 1fr auto; gap:.2rem .8rem;
  padding:.5rem .2rem; border-bottom:1px solid rgba(255,255,255,.1);
  font-size:.84rem; align-items:baseline; }
.gw-row .gw-t{ font-family:var(--font-display); color:rgba(255,255,255,.62); white-space:nowrap; }
.gw-row .gw-l{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.42); }
.gw-row .gw-p{ grid-column:1 / 3; color:#EFEDE8; }
.gw-row .gw-s{ grid-row:1 / 3; align-self:center; font-family:var(--font-display);
  font-weight:700; color:#fff; }
.gw-row.is-ours{ background:rgba(248,40,24,.16); cursor:pointer; }
.gw-row.is-ours .gw-p{ color:#fff; font-weight:700; }
.gw-row.is-ours:hover{ background:rgba(248,40,24,.26); }

/* Hallenname in den Spielplantabellen wird anklickbar */
.hall-link{ background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:inherit; text-align:inherit;
  text-decoration:underline dotted; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.35); }
.hall-link:hover{ color:#fff; text-decoration-color:#f82818; }

/* --- Kaderhinweis auf den Mannschaftsseiten ------------------------------ */
.tk-note{ margin-top:.6rem; font-size:.74rem; letter-spacing:.04em;
  color:rgba(255,255,255,.45); }

/* ===========================================================================
   Saisonarchiv (spielplan.html)
   =========================================================================== */
.dsn-card .ar-lead{ color:#EFEDE8; max-width:46ch; margin:0; flex:1 1 20rem; }

/* Kopfzeile des Abschnitts: Hinweis links, Auswahl rechts. Die Auswahl stand
   vorher allein unter der Ueberschrift — die Karte wirkte dadurch leer und das
   aufgeklappte Menue deckte sie komplett zu. */
.ar-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1rem 2rem; margin:1.2rem 0 1.8rem; padding-bottom:1.1rem;
  border-bottom:1px solid rgba(255,255,255,.14); }
.ar-field{ flex:0 0 auto; min-width:min(100%,clamp(260px,30vw,360px)); }
/* Off-White wie die Schaltflaechen der Seite — die Auswahl ist bedienbares
   Element, kein Untergrund. */
/* --- Eigene Auswahl statt <select> ---------------------------------------
   Das aufgeklappte Menue eines Systemfelds zeichnet das Betriebssystem; es
   laesst sich nicht gestalten und fiel aus dem Seitenbild. Schaltflaeche und
   Liste sind deshalb eigene Elemente — Off-White-Material wie alle
   bedienbaren Teile, Liste im Blau-Polish der Karten.
   -------------------------------------------------------------------------- */
.ar-label{ display:block; margin-bottom:.35rem;
  font-family:var(--font-display); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:#EFEDE8; }

.ar-drop{ position:relative; }
.ar-drop-btn{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; border:0; border-radius:0; cursor:pointer; text-align:left;
  padding:.7rem 1rem; font-family:var(--font-display); font-weight:700;
  font-size:.95rem; letter-spacing:.02em; color:#0616a8;
  background:linear-gradient(270deg,#D5DCE8 0%,#E6EBF3 30%,#F4F6FA 62%,#FFFFFF 100%);
  box-shadow:var(--btn-innen), var(--btn-auf), var(--btn-raum);
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease; }
.ar-drop-btn::after{ content:""; flex:none; width:0; height:0;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid #0F1636; transition:transform .2s ease; }
.ar-drop-btn:hover{ background:linear-gradient(270deg,#DEE4EE 0%,#ECF0F6 30%,#F8FAFC 62%,#FFFFFF 100%);
  transform:translateY(-2px);
  box-shadow:var(--btn-innen-hover), var(--btn-auf-hover), var(--btn-raum-hover); }
.ar-drop-btn:focus-visible{ outline:3px solid #f82818; outline-offset:3px; }
.ar-drop-btn[aria-expanded="true"]{ transform:none; }
.ar-drop-btn[aria-expanded="true"]::after{ transform:rotate(180deg); }

/* Die Liste liegt ganz normal unter der Schaltflaeche und legt sich ueber
   das, was darunter steht — die Ergebnistabelle. Ein fruehrer Versuch mit
   position:fixed und Berechnung im JavaScript war fehleranfaellig: der
   Fokuswechsel beim Aufklappen liess die Seite darunter wegscrollen.
   Die Karte ist hoch genug, dass die Liste hineinpasst. */
.ar-drop-list{ position:absolute; z-index:40; left:0; right:0; top:calc(100% + .4rem);
  margin:0; padding:.3rem 0; list-style:none;
  max-height:24rem; overflow-y:auto;
  background:linear-gradient(160deg,#FCFBF9 0%,#EFEDE8 52%,#E2DED5 100%);
  box-shadow:var(--btn-innen), 0 4px 9px rgba(4,8,40,.28), 0 22px 44px rgba(4,8,40,.38); }
.ar-drop-list li{ padding:.6rem 1rem; cursor:pointer; color:#0616a8;
  font-size:.94rem; line-height:1.3; }
.ar-drop-list li + li{ box-shadow:inset 0 1px 0 rgba(4,8,40,.08); }
.ar-drop-list li:hover, .ar-drop-list li:focus{ outline:0;
  background:linear-gradient(160deg,#FFFFFF 0%,#F6F4F0 52%,#EAE6DE 100%); }
.ar-drop-list li[aria-selected="true"]{ font-weight:700;
  box-shadow:inset 3px 0 0 #f82818; }
/* Bildlaufleiste im Materialton statt im Systemgrau */
.ar-drop-list{ scrollbar-width:thin; scrollbar-color:rgba(4,8,40,.35) transparent; }

.ar-head{ font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.05; color:#fff; margin:0 0 .2rem; }
.ar-result > .ar-sub:first-of-type{ margin-top:1.1rem; }
.ar-head span{ color:#ff4433; }
.ar-sub{ font-family:var(--font-display); font-weight:700; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:#EFEDE8;
  margin:1.6rem 0 .7rem; padding-bottom:.35rem;
  border-bottom:2px solid rgba(248,40,24,.7); }
.ar-note{ margin-top:1rem; font-size:.78rem; color:rgba(255,255,255,.5); }
.ar-empty{ color:rgba(255,255,255,.6); font-size:.9rem; }

@media (max-width:600px){
  .ar-bar{ flex-direction:column; align-items:stretch; gap:1rem; }
  .ar-field{ min-width:0; width:100%; }
  .gm-body, .gm-head{ padding-left:1.5rem; }
}

/* ===========================================================================
   Hero mit mehreren Slides: je Bild ein eigener Textblock
   Bisher lag unter den wechselnden Bildern ein fester Text. Die Medienpflege
   kann jetzt je Slide Kicker, Ueberschrift, Fliesstext und bis zu zwei
   Schaltflaechen setzen — der Textblock wechselt mit dem Bild.
   Alle Bloecke liegen in derselben Rasterzelle: die Hoehe richtet sich nach
   dem laengsten, es gibt also keinen Sprung beim Wechsel.
   =========================================================================== */
.hero .hero-texts{ width:100%; display:grid; position:relative; z-index:1; }
.hero .hero-texts > .inner{ grid-area:1 / 1;
  opacity:0; visibility:hidden; transition:opacity .55s ease, visibility .55s; }
.hero .hero-texts > .inner.is-active{ opacity:1; visibility:visible; }
@media (prefers-reduced-motion:reduce){
  .hero .hero-texts > .inner{ transition:none; }
}

/* ===========================================================================
   Schaltflaechen: Abhebung vom Untergrund
   ---------------------------------------------------------------------------
   Bisher trug jeder Knopf genau einen weichen Schatten (0 14px 30px). Auf dem
   dunkelblauen Grund der Karten verschwindet ein dunkler, weicher Schatten
   nahezu vollstaendig — die helle Flaeche lag flach auf dem Blau. Auf der
   hellen Navigationsleiste fehlte umgekehrt jede Kante zwischen Off-White auf
   Off-White.

   Deshalb zwei leichte Schattenebenen statt einer schweren — und bewusst
   keine Kontur, die Knoepfe sollen nicht umrandet wirken:

     1. Aufsatz  kurzer Schatten direkt unter der Kante — er laesst den Knopf
                 aufsitzen statt schweben
     2. Raum     weiter, weicher Schatten — die eigentliche Hoehe

   Dazu innen eine Lichtkante oben und eine leichte Abdunklung unten: das gibt
   der Flaeche Dicke. Beim Druecken faellt der Knopf sichtbar zusammen.
   Die Werte stehen als Variablen, damit alle Familien dieselbe Sprache
   sprechen — Hero, Navigation, Karten, Partner-Schaltflaeche, Auswahlfelder.
   =========================================================================== */
:root{
  --btn-innen:       inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(4,8,40,.12);
  --btn-innen-hover: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(4,8,40,.12);
  --btn-auf:         0 2px 4px rgba(4,8,40,.20);
  --btn-raum:        0 10px 22px rgba(4,8,40,.26);
  --btn-auf-hover:   0 3px 7px rgba(4,8,40,.24);
  --btn-raum-hover:  0 16px 32px rgba(4,8,40,.32);
  --btn-druck:       0 1px 2px rgba(4,8,40,.24);
}

/* --- Grundrezept: alle Off-White-Schaltflaechen --------------------------- */
.button-primary, .button-blue, .partner-fab,
.text-link[href="sponsoren.html"],
.text-link[href="news.html"], .text-link[href="spielplan.html"],
.dsn-card .text-link[href="news.html"], .dsn-card .text-link[href="spielplan.html"],
.hero .inner .actions .button-primary, .hero .inner .actions .button-blue,
.main-nav .button-primary.nav-cta{
  box-shadow: var(--btn-innen), var(--btn-auf), var(--btn-raum);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease, color .2s ease; }

.button-primary:hover, .button-blue:hover, .partner-fab:hover,
.text-link[href="sponsoren.html"]:hover,
.text-link[href="news.html"]:hover, .text-link[href="spielplan.html"]:hover,
.dsn-card .text-link[href="news.html"]:hover, .dsn-card .text-link[href="spielplan.html"]:hover,
.hero .inner .actions .button-primary:hover, .hero .inner .actions .button-blue:hover,
.main-nav .button-primary.nav-cta:hover{
  transform: translateY(-3px);
  box-shadow: var(--btn-innen-hover), var(--btn-auf-hover), var(--btn-raum-hover); }

/* Gedrueckt: der Knopf setzt auf, die Hoehe faellt weg */
.button-primary:active, .button-blue:active, .partner-fab:active,
.text-link[href="sponsoren.html"]:active,
.text-link[href="news.html"]:active, .text-link[href="spielplan.html"]:active,
.hero .inner .actions .button-primary:active, .hero .inner .actions .button-blue:active,
.main-nav .button-primary.nav-cta:active{
  transform: translateY(0);
  box-shadow: var(--btn-innen), var(--btn-druck); }

/* Tastaturbedienung deutlich sichtbar machen — der rote Ring liegt ausserhalb
   der Kontur und ist auf jedem Untergrund erkennbar. */
.button-primary:focus-visible, .button-blue:focus-visible, .partner-fab:focus-visible,
.text-link[href="sponsoren.html"]:focus-visible,
.text-link[href="news.html"]:focus-visible, .text-link[href="spielplan.html"]:focus-visible,
.main-nav .button-primary.nav-cta:focus-visible{
  outline: 3px solid #f82818; outline-offset: 3px; }

/* --- Blaue Schaltflaechen auf hellem Grund -------------------------------
   Die Reiter der Mannschaftsseiten und des Popups sind blau auf blauer Karte.
   Sie bekommen dieselbe Staffelung, nur mit heller Kontur — eine dunkle waere
   auf dunklem Grund wirkungslos. */
.dsn-card .sb-tab, .gm-tab{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(4,8,40,.20); }
.dsn-card .sb-tab:hover, .gm-tab:hover{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 7px rgba(4,8,40,.24); }
.dsn-card .sb-tab.is-active, .gm-tab.active{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 7px rgba(4,8,40,.24), 0 14px 28px rgba(4,8,40,.3); }


/* --- Umrandete Schaltflaechen (z. B. "Offizieller Spielbericht") ---------- */
.gm-pdf, .button-outline{
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5), 0 2px 4px rgba(4,8,40,.20); }
.gm-pdf:hover, .button-outline:hover{
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.8), 0 3px 7px rgba(4,8,40,.24), 0 14px 28px rgba(4,8,40,.3); }

/* --- Pfeile des Bilderstreifens ------------------------------------------
   Sie liegen auf dem Bild und brauchen dieselbe Trennung wie die uebrigen
   Schaltflaechen: helle Kontur nach aussen, Aufsatz und Raum darunter. */
.dsn-card .fs-arrow{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 5px rgba(4,8,40,.24), 0 12px 26px rgba(4,8,40,.3); }
.dsn-card .fs-arrow:hover{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 4px 9px rgba(4,8,40,.28), 0 18px 34px rgba(4,8,40,.34); }
.dsn-card .fs-arrow:active{ transform:translateY(-50%) scale(.98);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(4,8,40,.24); }
.dsn-card .fs-arrow:focus-visible{ outline:3px solid #f82818; outline-offset:3px; }

/* --- Navigations-Schaltflaechen ohne Lichtkante oben ----------------------
   Auf den blauen Karten setzt die weisse Innenkante die Off-White-Flaeche
   plastisch ab. In der Navigationsleiste liegt sie jedoch auf Off-White —
   dort liest sich dieselbe Kante als heller Strich am oberen Rand. Fuer die
   Knoepfe der Leiste bleibt deshalb nur die leichte Abdunklung unten. */
.main-nav .button-primary.nav-cta{
  box-shadow: inset 0 -1px 0 rgba(4,8,40,.12), var(--btn-auf), var(--btn-raum); }
.main-nav .button-primary.nav-cta:hover{
  box-shadow: inset 0 -1px 0 rgba(4,8,40,.12), var(--btn-auf-hover), var(--btn-raum-hover); }
.main-nav .button-primary.nav-cta:active{
  box-shadow: inset 0 -1px 0 rgba(4,8,40,.12), var(--btn-druck); }

/* ===========================================================================
   Newsseite: Meldungen ohne eigenes Bild
   Die Karten leben sonst vom formatfuellenden Foto. Fehlt es, traegt statt
   dessen der Blau-Polish der Karten das Feld, mit dem SG-Zeichen mittig —
   dieselbe Loesung wie bei den Fotoplatzhaltern der Mannschaftskarten.
   =========================================================================== */
.news-card.nc-empty{
  background:linear-gradient(165deg,#0f24f0 0%,#0818d8 55%,#0616a8 100%); }
/* Ohne Bild traegt die Karte nichts, was ihr Hoehe gaebe — die Kacheln sind
   absolut gesetzt. Deshalb ein Mindestmass, sonst faellt eine Zeile aus
   lauter bildlosen Meldungen in sich zusammen. */
.news-grid .news-card.nc-empty{ min-height:clamp(200px,24vw,300px); }
/* Der Verlauf darf das Zeichen nicht zudecken, nur den Text absetzen */
.news-card.nc-empty .nc-scrim{
  background:linear-gradient(to top, rgba(2,6,60,.88) 0%, rgba(2,6,60,.45) 38%, transparent 62%); }

.news-empty{ color:rgba(255,255,255,.7); font-size:.95rem; line-height:1.6; }

/* ===========================================================================
   Newsseite: Klick statt Hover
   Der Anrisstext klappte beim Ueberfahren auf und das Bild zoomte — auf
   Beruehrungsbildschirmen gibt es das nicht, und ein halber Text unter dem
   Mauszeiger liest sich schlecht. Die ganze Karte ist jetzt ein Link auf die
   Meldung; der unsichtbare Flaechenlink liegt ueber der Karte, damit nicht nur
   die Ueberschrift trifft.
   =========================================================================== */
.news-grid .news-card{ transition:transform .2s ease, box-shadow .2s ease; }
.news-grid .news-card:hover .nc-img{ transform:none; }
.news-grid .news-card:hover .teaser{ -webkit-line-clamp:3; }
.news-grid .news-card .nc-scrim{ transition:none; }
/* Das Nachdunkeln beim Ueberfahren stammte aus der Zeit, als der Text
   aufklappte — ohne Aufklappen wirkt es wie ein halb geoeffnetes Fenster. */
.news-grid .news-card:hover .nc-scrim{
  background:linear-gradient(180deg, rgba(4,18,126,0) 30%, rgba(6,22,168,.58) 68%, rgba(4,18,126,.94) 100%); }
.news-grid .news-card.nc-empty:hover .nc-scrim{
  background:linear-gradient(to top, rgba(2,6,60,.88) 0%, rgba(2,6,60,.45) 38%, transparent 62%); }
.news-grid .news-card:hover{ transform:translateY(-3px);
  box-shadow:0 3px 7px rgba(4,8,40,.24), 0 16px 32px rgba(4,8,40,.32); }
.news-grid .news-card:focus-within{ outline:3px solid #f82818; outline-offset:3px; }
/* Flaechenlink: eigenes Element ueber der ganzen Karte. Als ::after am Titel
   lag er innerhalb von .nc-content — und das ist absolut gesetzt, der Link
   deckte deshalb nur den Textstreifen unten ab, nicht das Bild. */
.news-grid .news-card .nc-link{ position:absolute; inset:0; z-index:4; }
.nc-link, .tnews-link{ display:block; }
/* Derselbe Flaechenlink auf den Mannschaftsseiten */
.tnews-feature, .tnews-item{ position:relative; }
.tnews-link{ position:absolute; inset:0; z-index:4; }
/* Bild- und Titellinks liegen darueber, damit sie ihr eigenes Ziel behalten */
.tnews-img, .tnews-thumb, .tnews-feature h3 a, .tnews-item h4 a{ position:relative; z-index:5; }
.news-grid .news-card .nc-content::after{
  content:"Meldung lesen"; display:inline-block; margin-top:.7rem;
  font-family:'SG Display',sans-serif; font-weight:700; font-size:.74rem;
  letter-spacing:.18em; text-transform:uppercase; color:#ff9d9d; }
.news-grid .news-card:hover .nc-content::after{ color:#fff; }

/* ===========================================================================
   Newsdetail: Textflaeche auf der Karte
   Der Bericht sitzt als eigene, etwas hellere Flaeche auf der Karte — mittig
   unter dem Bild und breiter als die Textspalte, damit er die Karte traegt
   statt darin zu schwimmen. Ohne Saum am linken Rand: die Flaeche liegt
   ohnehin schon auf einer Karte, ein zweiter Akzentstreifen daneben waere
   eine Wiederholung.
   =========================================================================== */
/* Breite ohne eigenes Mass: die Flaeche fuellt die Artikelspalte und steht
   damit immer genau so breit wie das Bild darueber. Ein max-width haette bei
   grossen Fenstern eine schmalere Karte unter ein breiteres Bild gesetzt. */
.nd-textcard{ position:relative; overflow:hidden;
  margin:clamp(1.4rem,2.8vw,2.2rem) 0 0;
  padding:clamp(1.8rem,3.4vw,2.8rem) clamp(1.8rem,3.4vw,3rem);
  /* Blau-Polish wie die Karten der Seite: 165 Grad, drei Stufen.
     Lichtkante oben und zwei leichte Schatten setzen sie vom Untergrund ab —
     dieselbe Staffelung wie bei den Schaltflaechen. */
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(4,8,40,.20),
             0 10px 22px rgba(4,8,40,.26); }
.dsn-card .nd-textcard .nd-lead{ margin-top:0; font-size:clamp(1.05rem,1.7vw,1.25rem); }
.dsn-card .nd-textcard .nd-body p{ font-size:clamp(1rem,1.3vw,1.08rem); line-height:1.75; }
.dsn-card .nd-textcard p:last-child{ margin-bottom:0; }

/* Der Artikel darf jetzt die volle Breite nutzen — die Zeilenlaenge begrenzt
   die Textflaeche selbst. */
.dsn-card .nd-article{ max-width:none; }

/* ===========================================================================
   Newsdetailseite (news/<mannschaft>-<titel>.html)
   Aufbau nach dem Vorbild der Bundesligaseite: Datum, Ueberschrift, Bild,
   Fliesstext — daneben eine schmale Spalte mit dem naechsten Spiel und einem
   Ausschnitt der Tabelle. Unter 900px wandert die Spalte unter den Artikel.
   =========================================================================== */
.nd-layout{ display:grid; grid-template-columns:minmax(0,1fr) clamp(260px,26%,340px);
  gap:clamp(1.5rem,3.5vw,3rem); align-items:start; }
@media (max-width:900px){ .nd-layout{ grid-template-columns:1fr; } }

.page-head .nd-date{ font-family:'SG Display',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  color:#ff4433; margin:.2rem 0 .1rem; }

/* Die Ueberschrift steht schon im Seitenkopf — im Artikel nur fuer Vorleser */
.nd-sr{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

.nd-img{ margin:0 0 1.4rem; overflow:hidden; }
.nd-img img{ display:block; width:100%; height:auto; }
.dsn-card .nd-lead{ color:#fff; font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.55;
  padding-left:1rem; border-left:3px solid #f82818; margin:0 0 1.3rem; }
.dsn-card .nd-body p{ color:#EFEDE8; font-size:.98rem; line-height:1.7; margin:0 0 .9rem; }
/* "Alle Meldungen" rechts unter der Berichtskarte — am Ende des Textes,
   wo der Blick nach dem Lesen ohnehin steht. */
.dsn-card .nd-back{ margin-top:1.3rem; text-align:right; }

/* --- Begleitspalte -------------------------------------------------------- */
.nd-side{ display:grid; gap:1.2rem; }
/* Blau-Polish wie die Textflaeche und die Karten der Seite.
   Die Kaesten waren frueher <section>-Elemente und fingen sich dadurch die
   Regel section:not(.section-alt)… ein, die das Viadukt-Wasserzeichen als
   Hintergrundbild setzt — mit hoeherer Spezifitaet als die Klasse hier.
   Jetzt sind es <div>, damit greift die Regel gar nicht erst.
   background-image:none bleibt als Sicherung, falls die Kaesten je wieder in
   einem Element landen, das die Sektionsregel trifft. */
.nd-box{ position:relative; padding:1.2rem 1.3rem;
  background-image:none;
  background:linear-gradient(345deg,#020a52 0%,#0616a8 38%,#0a1cd6 60%,#04127e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(4,8,40,.20),
             0 10px 22px rgba(4,8,40,.26); }
.dsn-card .nd-box h2{ font-family:'SG Display',sans-serif; font-weight:700;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:#EFEDE8;
  margin:0 0 .8rem; padding-bottom:.4rem; border-bottom:2px solid rgba(248,40,24,.75); }

.nd-when{ font-family:'SG Display',sans-serif; font-weight:700; font-size:.86rem;
  letter-spacing:.06em; color:#fff; margin:0 0 .6rem; }
.nd-pair{ display:grid; gap:.45rem; }
.nd-pair .club{ color:#fff; font-size:.94rem; }
.nd-vs{ font-family:'SG Display',sans-serif; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.55); }
.dsn-card .nd-where{ color:#EFEDE8; font-size:.84rem; margin:.7rem 0 0; }
.dsn-card .nd-liga{ color:rgba(255,255,255,.55); font-size:.74rem; letter-spacing:.06em;
  text-transform:uppercase; margin:.5rem 0 0; }

.nd-box .tt-table{ width:100%; font-size:.82rem; }
.nd-box .tt-table th, .nd-box .tt-table td{ padding:.3rem .35rem; }
.dsn-card .nd-more{ margin:.9rem 0 0; }


/* --- Platzhalter der Begleitspalte ---------------------------------------
   Sie stehen im Quelltext und werden ersetzt, sobald Daten da sind. Die
   Spalte hat dadurch von Anfang an ihre Hoehe — beim Nachladen springt
   nichts. Zurueckgenommen dargestellt, damit niemand die Striche fuer echte
   Werte haelt. */
.nd-side .is-placeholder{ opacity:.55; }
.nd-ph-line{ display:inline-block; width:100%; max-width:11rem; height:.62rem;
  vertical-align:middle; border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.1) 60%,
             rgba(255,255,255,.18) 100%); }
.nd-side .is-placeholder .tt-table td{ color:rgba(255,255,255,.5); }
.nd-side .is-placeholder .nd-when{ color:rgba(255,255,255,.5); }
@media (prefers-reduced-motion:no-preference){
  .nd-side .is-placeholder{ animation:nd-puls 1.6s ease-in-out infinite; }
  @keyframes nd-puls{ 0%,100%{ opacity:.45; } 50%{ opacity:.65; } }
}

/* Mannschafts-News ohne Bild: kein Platzhalterzeichen, die Meldung nimmt die
   ganze Breite. Vorher stand dort das SG-Zeichen — es wirkte wie ein
   Wasserzeichen ueber dem Text. */
.tnews-item.no-img{ grid-template-columns:1fr; }
.tnews-item.no-img .tnews-itembody{ padding:clamp(.8rem,1.6vw,1.1rem) clamp(.9rem,1.8vw,1.2rem); }
.tnews-feature.no-img .tnews-body{ padding-top:clamp(1.2rem,2.4vw,1.7rem); }

/* Zeitraumzeile ueber der Spieltagstabelle der Startseite */
.dsn-card .sched-range{ margin:.2rem 0 1rem; font-family:'SG Display',sans-serif;
  font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:#EFEDE8; }
.dsn-card .sched-range:empty{ display:none; }

/* Ligen, die der Verband nicht herausgibt (Bundesliga, Jugendbundesliga):
   sichtbar, aber nicht waehlbar — mit Grund statt stiller Sackgasse. */
.ar-drop-list .ar-hint{ display:block; font-size:.72rem; letter-spacing:.02em;
  color:#8a90ad; margin-top:.1rem; }

/* Männer-Bundesliga: Verweis statt Tabelle — die Opel HBL zeigt ihre Daten
   über ein lizenziertes Widget, ein offenes Format gibt es dort nicht. */
.dsn-card .ar-extern{ color:#EFEDE8; max-width:60ch; margin:.6rem 0 1.2rem; line-height:1.6; }
.ar-extern-links{ display:flex; flex-wrap:wrap; gap:.8rem; margin:0; }
.ar-extern-links .button{ font-size:.85rem; }

/* ===========================================================================
   Werbebande im Mannschaftsfoto
   Wie eine Hallenbande am unteren Bildrand: heller Streifen, roter Strich an
   der Oberkante, Logos in einer Reihe. Frueher stand das nur als <style> in
   teams/frauen-1.html - jetzt gilt es fuer alle Mannschaftsseiten, gespeist
   aus teams.json (Teamsponsor + weitere Partner, siehe team-generator.php).
   Die Spaltenzahl kommt als --sw-spalten aus dem Erzeuger, damit vier Logos
   nicht in acht Spalten verloren gehen.
   --------------------------------------------------------------------------- */
.team-photo{ position:relative; }
.sponsor-wall{ position:absolute; left:6%; right:6%; bottom:0; top:80%;
  background:linear-gradient(180deg,#eef0f2 0%,#e2e4e7 55%,#d7d9dd 100%);
  border-top:1px solid rgba(0,0,140,.4);
  box-shadow:0 -6px 14px rgba(0,0,20,.28), inset 0 13px 20px -12px rgba(0,0,30,.55);
  display:flex; flex-direction:column; overflow:hidden;
  padding:clamp(.3rem,.8vw,.6rem) clamp(.55rem,1.6vw,1.2rem); }
.sponsor-wall::before{ content:""; position:absolute; left:0; right:0; top:1px; height:2px;
  background:rgba(150,0,0,.5); }
.sw-logos{ flex:1 1 auto; display:grid; gap:clamp(.3rem,.9vw,.7rem);
  grid-template-columns:repeat(var(--sw-spalten,8),1fr);
  align-items:center; justify-items:center; }
.sw-logos img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  mix-blend-mode:multiply; filter:grayscale(.15) saturate(.9) contrast(.96); opacity:.9;
  transition:opacity .38s ease; }
/* Wechsel der Partnerlogos (js/main.js, Block "Werbebanden") */
.sw-logos img.sw-aus{ opacity:0; }
/* Teamsponsor: etwas praesenter als die uebrigen Partner und mit feiner Linie
   abgesetzt - er traegt die Mannschaft, nicht nur den Verein. */
.sw-logos .sw-team{ opacity:1; filter:none; transform:scale(1.12);
  padding-right:clamp(.3rem,.9vw,.7rem);
  border-right:1px solid rgba(0,0,60,.18); }

@media (max-width:700px){
  .sponsor-wall{ top:70%; left:3%; right:3%; }
  /* Auf schmalen Schirmen hoechstens vier Logos je Reihe, der Rest bricht um */
  .sw-logos{ grid-template-columns:repeat(4,1fr); }
  .sw-logos .sw-team{ transform:none; }
}

/* Werbebande auch auf der Kartenvorschau (teams.html): dieselben Bausteine wie
   auf der Mannschaftsseite, nur schmaler. Die Karte ist rund ein Drittel so
   breit wie das Foto der Detailseite - Bandenhoehe und Abstaende muessen
   deshalb mitschrumpfen, sonst frisst die Werbung das Mannschaftsfoto. */
.team-card .tc-photo{ position:relative; }
.team-grid .team-card .sponsor-wall{ left:4%; right:4%; top:auto; height:22%;
  padding:.2rem .35rem; box-shadow:0 -4px 9px rgba(0,0,20,.24), inset 0 9px 14px -10px rgba(0,0,30,.5); }
.team-grid .team-card .sw-logos{ gap:.25rem; }
.team-grid .team-card .sw-logos .sw-team{ transform:none; padding-right:.25rem; }

@media (max-width:700px){
  /* Auf der Karte bleibt die Bande einreihig - zwei Reihen waeren in diesem
     schmalen Streifen nicht mehr lesbar. */
  .team-grid .team-card .sw-logos{ grid-template-columns:repeat(var(--sw-spalten,8),1fr); }
}

/* Ergebnisspalte ohne Ergebnis: nur der Gedankenstrich, keine Plakette.
   Die rote .score-Plakette stand sonst auch in jeder noch nicht gespielten
   Zeile und sah wie eine Markierung des Spiels aus. */
table.schedule .score-leer{ color:rgba(255,255,255,.45); font-weight:600; }

/* ===========================================================================
   Trikotsaum: feste Folge Blau + Rot + Blau + Rot + Blau, danach laeuft das
   letzte Blau weich in den Kartenhintergrund aus (horizontaler Fade). Vorher
   war der Saum ein endloses Muster, das je nach Breite mitten im Rot abbrach.
   --bar = Breite eines Farbblocks (6 Streifen), --fade = Laenge des Auslaufs.
   Die schraege Ausblendung (--diag) bleibt wie gehabt je Element.
   Bewusst ganz am Ende der Datei: gewinnt gegen alle Saum-Regeln oben.
   =========================================================================== */
.dsn-card .nb-fx .fx1,
.hero::before,
.page-head::before,
.team-card .tc-photo-empty::before,
.org-photo-placeholder::before{
  --bar:48px; --fade:64px;
  --diag:linear-gradient(25deg,#000 0 30%,rgba(0,0,0,.6) 52%,rgba(0,0,0,0) 78%);
  width:calc(var(--bar) * 5 + var(--fade));
  background:linear-gradient(90deg,
    #0016a8 calc(var(--bar)*0/6) calc(var(--bar)*1/6),
    #0818d8 calc(var(--bar)*1/6) calc(var(--bar)*2/6),
    #0016a8 calc(var(--bar)*2/6) calc(var(--bar)*3/6),
    #0818d8 calc(var(--bar)*3/6) calc(var(--bar)*4/6),
    #0016a8 calc(var(--bar)*4/6) calc(var(--bar)*5/6),
    #0818d8 calc(var(--bar)*5/6) calc(var(--bar)*6/6),
    #cc1d0a calc(var(--bar)*6/6) calc(var(--bar)*7/6),
    #f82818 calc(var(--bar)*7/6) calc(var(--bar)*8/6),
    #cc1d0a calc(var(--bar)*8/6) calc(var(--bar)*9/6),
    #f82818 calc(var(--bar)*9/6) calc(var(--bar)*10/6),
    #cc1d0a calc(var(--bar)*10/6) calc(var(--bar)*11/6),
    #f82818 calc(var(--bar)*11/6) calc(var(--bar)*12/6),
    #0016a8 calc(var(--bar)*12/6) calc(var(--bar)*13/6),
    #0818d8 calc(var(--bar)*13/6) calc(var(--bar)*14/6),
    #0016a8 calc(var(--bar)*14/6) calc(var(--bar)*15/6),
    #0818d8 calc(var(--bar)*15/6) calc(var(--bar)*16/6),
    #0016a8 calc(var(--bar)*16/6) calc(var(--bar)*17/6),
    #0818d8 calc(var(--bar)*17/6) calc(var(--bar)*18/6),
    #cc1d0a calc(var(--bar)*18/6) calc(var(--bar)*19/6),
    #f82818 calc(var(--bar)*19/6) calc(var(--bar)*20/6),
    #cc1d0a calc(var(--bar)*20/6) calc(var(--bar)*21/6),
    #f82818 calc(var(--bar)*21/6) calc(var(--bar)*22/6),
    #cc1d0a calc(var(--bar)*22/6) calc(var(--bar)*23/6),
    #f82818 calc(var(--bar)*23/6) calc(var(--bar)*24/6),
    #0016a8 calc(var(--bar)*24/6) calc(var(--bar)*25/6),
    #0818d8 calc(var(--bar)*25/6) calc(var(--bar)*26/6),
    #0016a8 calc(var(--bar)*26/6) calc(var(--bar)*27/6),
    #0818d8 calc(var(--bar)*27/6) calc(var(--bar)*28/6),
    #0016a8 calc(var(--bar)*28/6) calc(var(--bar)*29/6),
    #0818d8 calc(var(--bar)*29/6) calc(var(--bar)*30/6),
    #0016a8 calc(var(--bar)*30/6) calc(var(--bar)*31/6),
    #0818d8 calc(var(--bar)*31/6) calc(var(--bar)*32/6),
    #0016a8 calc(var(--bar)*32/6) calc(var(--bar)*33/6),
    #0818d8 calc(var(--bar)*33/6) calc(var(--bar)*34/6),
    #0016a8 calc(var(--bar)*34/6) calc(var(--bar)*35/6),
    #0818d8 calc(var(--bar)*35/6) calc(var(--bar)*36/6),
    #0016a8 calc(var(--bar)*36/6) calc(var(--bar)*37/6),
    #0818d8 calc(var(--bar)*37/6) calc(var(--bar)*38/6),
    #0016a8 calc(var(--bar)*38/6) calc(var(--bar)*39/6),
    #0818d8 calc(var(--bar)*39/6) calc(var(--bar)*40/6),
    #0016a8 calc(var(--bar)*40/6) calc(var(--bar)*41/6),
    #0818d8 calc(var(--bar)*41/6) calc(var(--bar)*42/6));
  -webkit-mask:var(--diag), linear-gradient(90deg,#000 calc(var(--bar) * 4.4), rgba(0,0,0,0) calc(var(--bar) * 5 + var(--fade)));
  -webkit-mask-composite:source-in;
          mask:var(--diag), linear-gradient(90deg,#000 calc(var(--bar) * 4.4), rgba(0,0,0,0) calc(var(--bar) * 5 + var(--fade)));
          mask-composite:intersect; }
.hero::before,
.page-head::before{ --diag:linear-gradient(25deg,#000 0 20%,rgba(0,0,0,.85) 32%,rgba(0,0,0,.6) 46%,rgba(0,0,0,.32) 62%,rgba(0,0,0,.1) 80%,rgba(0,0,0,0) 96%); }
@media (max-width:900px){
  .dsn-card .nb-fx .fx1,
  .page-head::before,
  .team-card .tc-photo-empty::before,
  .org-photo-placeholder::before{ --bar:16px; --fade:28px; width:calc(var(--bar) * 5 + var(--fade)); }
}

/* ===========================================================================
   Menueleiste und Exklusiv-Partner-Leiste ohne Zierleisten: der 48px-Saum
   links (.site-header .inner::before, .partner-bar::before) und die 12px-Naht
   am Nav-CTA entfallen, die dafuer reservierte Innenluft links ebenfalls.
   =========================================================================== */
.site-header .inner::before,
.partner-bar::before,
.main-nav .button-primary.nav-cta::after{ display:none !important; content:none !important; }
.site-header .inner{ padding-left:clamp(1.25rem,3vw,2.5rem) !important; }
.partner-bar .inner{ padding-left:clamp(1.25rem,3vw,2.5rem); }

/* Nav-CTA (Tickets / Probetraining): SG-Logo groesser, Schrift fetter */
.main-nav .button-primary.nav-cta{ font-weight:800 !important; letter-spacing:.05em; gap:.6rem; }
.main-nav .button-primary.nav-cta::before{ width:30px; height:30px; }

/* ===========================================================================
   Abschnittskoepfe einheitlich (Bundesliga UND Verein & Jugend) (Vorbild News-Abschnitt der Startseite)
   Zeile 1: roter Zierbalken (beginnt an der linken Logokante) + Kicker, rechtsbuendig
   Zeile 2: SG-Logo + Hintergrundwort (data-ghost) als Wasserzeichen in sauberem Abstand
   Die eigentliche Ueberschrift (h2) bleibt fuer Screenreader im Dokument, ist aber unsichtbar.
   Schriftgroesse des Wasserzeichens: --ghost-fs aus js/main.js (passt lange Woerter ein).
   =========================================================================== */
.ph-sr{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0 !important; }
body:has(#mainNav a.nav-switch) section.dsn-card:has(> .container > .ph-head){ padding-top:clamp(1.4rem,3vw,2.4rem) !important; }
body:has(#mainNav a.nav-switch) .dsn-card .ph-head{ display:grid !important; grid-template-columns:1fr max-content max-content; column-gap:.75rem; row-gap:.55rem;
  align-items:center; width:100% !important; transform:none !important; position:relative; margin-top:0 !important; }
body:has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-txt{ display:contents; }
body:has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-txt .kicker{ grid-column:2 / -1; grid-row:1; display:flex !important; align-items:center; gap:.9rem; width:0; min-width:100%; margin:0 !important; }   /* width:0 + min-width:100%: Kicker bestimmt die Spaltenbreiten nicht mit, Text bricht um */
body:has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-txt .kicker::before{ content:"" !important; display:block !important; flex:1 1 auto; min-width:2rem; height:3px; background:#f82818; }
body:has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-logo{ grid-column:2; grid-row:2; height:clamp(52px,6vw,72px); width:auto !important; max-width:none !important; margin:0 !important; transform:none !important; }
body:has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-txt[data-ghost] :is(h1,h2){ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0 !important; padding:0 !important; }
body:has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-txt[data-ghost]::before{ content:attr(data-ghost) !important; display:block !important; grid-column:3; grid-row:2; align-self:center;
  position:static !important; transform:none !important; inset:auto !important; z-index:auto !important;
  font-family:'SG Display',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-.02em; white-space:nowrap;
  font-size:var(--ghost-fs, clamp(4.6rem,9vw,7rem)) !important; line-height:.8; color:rgba(255,255,255,.1); text-shadow:none; }
/* ohne Logo im Kopf: Balken beginnt am Wasserzeichen */
body:has(#mainNav a.nav-switch) .dsn-card .ph-head:not(:has(.ph-logo)) .ph-txt .kicker{ grid-column:3; }
/* grosses Eck-Wasserzeichen der Section entfaellt, das Wort steht jetzt im Kopf */
body:has(#mainNav a.nav-switch) .dsn-card:has(> .container > .ph-head) > .nb-fx .fx2{ display:none !important; }
body:has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-txt .kicker{ text-align:right; justify-content:flex-end; }
@media (max-width:900px){
  body:has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-txt .kicker{ font-size:.7rem; letter-spacing:.18em; line-height:1.35; }
}
/* Bundesliga-Newsletter: Aufzaehlung etwas nach rechts eingerueckt */
.bl-newsletter .nl-points{ padding-left:clamp(4.5rem,11vw,7.5rem) !important; }
/* ===========================================================================
   Bundesliga-Startseite, Karte "Letztes Spiel": Textteil aufgeraeumt
   Kicker - Ergebnis gross mit Paarung daneben - Trennlinie - Statistik-Link und Button auf einer Zeile
   =========================================================================== */
.bl-trio .bl-last .body{ display:grid !important; grid-template-columns:1fr auto; grid-template-areas:"kick kick" "score score" "stat btn"; grid-template-rows:auto auto 1fr; align-items:end;
  column-gap:1rem; row-gap:.7rem; padding:1.1rem 1.2rem 1.2rem !important; }
.bl-last .body > .kicker{ grid-area:kick; margin:0 !important; }
.bl-last .body > .scoreline{ grid-area:score; display:flex !important; align-items:center !important; gap:1rem !important; flex-wrap:nowrap !important;
  padding-bottom:.9rem; border-bottom:1px solid rgba(255,255,255,.16); margin:0 !important; }
.bl-last .body > .scoreline .res{ font-family:var(--font-hero); font-size:clamp(2.6rem,9vw,3.4rem); line-height:.9; flex:none; }
.bl-last .body > .scoreline .teams{ display:block !important; font-size:.8rem; line-height:1.35; letter-spacing:.06em; color:#fff; }
.bl-last .body > .stats-link{ grid-area:stat; margin:0 !important; padding:0 !important; text-decoration:none; min-width:0; }
.bl-last .body > .stats-link .stats:empty{ display:none; }
.bl-last .body > .stats-link .more{ display:inline-block; margin:0 !important; padding:0 !important; font-size:.72rem; letter-spacing:.06em; line-height:1.3; }
.bl-last .body > .button{ grid-area:btn; margin:0 !important; min-width:0 !important; width:auto !important; justify-self:end; white-space:nowrap;
  padding:.75rem 1rem .75rem 1.9rem !important; font-size:.8rem; }
/* Bundesliga mobil: Suche und Hamburger nur als weisse Symbole auf dem Hero-Slide, ohne blaue Kachel;
   dunkler Schattensaum, damit sie auf hellen Bildstellen lesbar bleiben */
@media (max-width:900px){
  body:has(#mainNav a.nav-switch) .site-header :is(.nav-search-mob, .nav-toggle){ background:none !important; box-shadow:none !important; border:0 !important;
    color:#fff !important; filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 3px 8px rgba(0,0,0,.55)); }
  body:has(#mainNav a.nav-switch) .site-header :is(.nav-search-mob, .nav-toggle)::before, body:has(#mainNav a.nav-switch) .site-header :is(.nav-search-mob, .nav-toggle)::after{ display:none !important; }
  body:has(#mainNav a.nav-switch) .site-header .nav-search-mob svg{ width:26px; height:26px; }
  body:has(#mainNav a.nav-switch) .site-header .nav-toggle span{ background:#fff !important; }
}
/* Hamburger-Menue (Bundesliga UND seit 30.10.2026 auch Verein & Jugend): Menue im Farbdesign von Verein & Jugend (Polish-Blau, weisse Schrift, Buttons Polish-Weiss) - uebernommen aus css/mobil-verein.css */
@media (max-width:900px){
  /* ---------- Hamburger-Menue: Polish-Blau, Kopfzeile ebenfalls, Schrift weiss ---------- */
  body:has(#mainNav a.nav-switch) .site-header .main-nav { background: linear-gradient(165deg, #0a1cd6 0%, #0616a8 55%, #04127e 100%) !important; box-shadow: 0 18px 40px rgba(4,8,40,.45) !important; border-left: 0 !important; border-image: none !important; }
  body:has(#mainNav a.nav-switch) .site-header .inner > .main-nav.open::before, body:has(#mainNav a.nav-switch) .site-header .main-nav::before { background-color: transparent !important; color: #fff !important; border-bottom: 1px solid rgba(255,255,255,.18) !important; background: url("../img/SG_Logo_Splitter.svg") no-repeat left .8rem center / 40px auto transparent !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav::after { display: none !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a:not(.button), body:has(#mainNav a.nav-switch) .site-header .main-nav .nav-sub-label, body:has(#mainNav a.nav-switch) .site-header .main-nav .nav-sub a { color: #fff !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a:not(.button):hover, body:has(#mainNav a.nav-switch) .site-header .main-nav a[aria-current="page"] { color: #fff !important; background: rgba(255,255,255,.12) !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a[aria-current="page"] { box-shadow: inset 4px 0 0 #E2412B !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a::after { background: #E2412B !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav > a, body:has(#mainNav a.nav-switch) .site-header .main-nav .has-sub { border-color: rgba(255,255,255,.14) !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav .nav-sub { background: rgba(4,8,60,.25) !important; border-radius: 0 !important; }
  /* Kopfzeile des Menues hoeher (72 px), Wappen 48 px, X mittig auf der Zeile */
  body:has(#mainNav a.nav-switch) .site-header .inner > .main-nav.open::before, body:has(#mainNav a.nav-switch) .site-header .main-nav::before { min-height: calc(72px + env(safe-area-inset-top)) !important; height: auto !important;
    padding: calc(env(safe-area-inset-top) + 12px) 4rem 12px calc(1rem + 48px + .75rem) !important; background-position: 1rem calc(env(safe-area-inset-top) + 12px) !important; background-size: 48px 48px !important;
    font-size: 1.05rem !important; display: flex !important; align-items: center !important; }
  body:has(#mainNav a.nav-switch) .site-header .inner > .main-nav.open > .nav-close, body:has(#mainNav a.nav-switch) .site-header .nav-close { position: absolute !important; top: calc(env(safe-area-inset-top) + 36px) !important; bottom: auto !important; transform: translateY(-50%) !important; right: 1rem !important; width: 36px !important; height: 36px !important; margin: 0 !important; }
  /* Abstaende im Menue: Bundesliga-Button oben/unten gleich (14 px), nach "Kontakt" ein Trennstrich, dann Probetraining */
  body:has(#mainNav a.nav-switch) .site-header .inner > .main-nav.open > a.button-primary.nav-cta.nav-switch, body:has(#mainNav a.nav-switch) .site-header .main-nav a.button-primary.nav-cta.nav-switch { margin: 14px .8rem !important; margin-bottom: 14px !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a[href$="kontakt.html"]:not(.nav-cta) { border-bottom: 1px solid rgba(255,255,255,.14) !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a.button-primary.nav-cta:not(.nav-switch) { margin: 14px .8rem 0 !important; }
  body:has(#mainNav a.nav-switch) .site-header .nav-close span { background: #fff !important; }
  body:has(#mainNav a.nav-switch) .site-header .nav-close:hover span { background: #E2412B !important; }
  /* Buttons im Menue (Bundesliga, Probetraining): Polish-Weiss mit blauer Schrift, SG in Blau */
  body:has(#mainNav a.nav-switch) .site-header .main-nav a.button-primary.nav-cta { background: linear-gradient(270deg,#D5DCE8 0%,#E6EBF3 30%,#F4F6FA 62%,#FFFFFF 100%) !important; color: #1019C9 !important; border-radius: 0 !important; box-shadow: 0 8px 18px rgba(4,8,40,.35) !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a.button-primary.nav-cta::after { display: none !important; content: none !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a.button-primary.nav-cta::before { background-image: url("../img/SG_Logo_Splitter.svg") !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a.button-primary.nav-cta img { display: none; }
  /* Social-Kacheln im Menue: weiss mit blauem Symbol */
  body:has(#mainNav a.nav-switch) .site-header .nav-social a, body:has(#mainNav a.nav-switch) .site-header .nav-social a svg { background: #fff !important; color: #1019C9 !important; border-radius: 0 !important; }
  body:has(#mainNav a.nav-switch) .site-header .nav-social a svg { background: transparent !important; }
  body:has(#mainNav a.nav-switch) .site-header .nav-social a:hover { background: #fff !important; color: #E2412B !important; }
  /* DYN-Button: eigenes DYN-Logo (dunkle Variante auf Polish-Weiss) statt SG-Zeichen */
  body:has(#mainNav a.nav-switch) .site-header .main-nav a.button-primary.nav-cta.nav-dyn::before{ display:none !important; content:none !important; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a.button-primary.nav-cta.nav-dyn{ gap:.5rem; }
  body:has(#mainNav a.nav-switch) .site-header .main-nav a.button-primary.nav-cta.nav-dyn img.dyn-wm{ display:block !important; content:url("../img/social/dyn-logo-blau.svg"); height:26px; width:auto; margin:0 !important; }
  /* Trennstrich nach dem letzten Menuepunkt (Presse) */
  body:has(#mainNav a.nav-switch) .site-header .main-nav > a[href$="presse.html"]:not(.nav-cta){ border-bottom:1px solid rgba(255,255,255,.14) !important; }
}
/* Handy: Statusleiste/Ueberscrollen oben im Polish-Blau (theme-color in jeder Seite, hier der Hintergrund hinter dem Seitenrand) */
@media (max-width:900px){
  html{ background:#1019C9; }
}
/* Mannschaftsfoto anklickbar (js/main.js): Lupen-Zeiger; Grossansicht ohne Blaetter-Pfeile */
img.is-zoombar{ cursor:zoom-in; }
img.is-zoombar:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.team-lightbox img{ max-width:96vw; max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:4px; }
/* Mannschaftsseite mobil: Werbebande wie auf der Kartenvorschau (teams.html) - einreihig, schmaler Streifen,
   damit sie das Mannschaftsfoto nicht verdeckt */
@media (max-width:700px){
  .team-photo .sponsor-wall{ left:4%; right:4%; top:auto; height:22%;
    padding:.2rem .35rem; box-shadow:0 -4px 9px rgba(0,0,20,.24), inset 0 9px 14px -10px rgba(0,0,30,.5); }
  .team-photo .sw-logos{ gap:.25rem; grid-template-columns:repeat(var(--sw-spalten,8),1fr); }
  .team-photo .sw-logos .sw-team{ transform:none; padding-right:.25rem; }
}
/* ===========================================================================
   Bundesliga-Startseite, Spieltag-Karten (Endstand / Match Day / Spielplan): Textteil kompakt
   Die Social-Cards bleiben unveraendert. Keine Streckung auf gleiche Hoehe, keine Leerflaechen:
   Buttons folgen direkt dem Inhalt. Naechstes Spiel: Vorbericht | Tickets | Live bei DYN in einer Reihe.
   =========================================================================== */
/* unten buendig: Karten gleich hoch, die Button-Zeilen sitzen in allen drei Karten auf derselben Unterkante */
.bl-trio{ align-items:stretch !important; }
.bl-trio > *{ display:flex !important; flex-direction:column; }
.bl-trio .body{ flex:1 1 auto !important; display:flex !important; flex-direction:column; gap:.6rem !important; padding-top:1rem !important; padding-bottom:1.1rem !important; }
.bl-trio .body > .nc-actions{ margin-top:auto !important; }
.bl-trio .nc-actions{ margin-top:.2rem !important; display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem !important; align-self:stretch !important; }
.bl-trio .nc-actions .button{ width:100% !important; min-width:0 !important; height:46px !important; padding-left:.7rem !important; padding-right:.7rem !important; font-size:.8rem !important; white-space:nowrap; justify-content:center; }
.bl-trio .nc-actions .nc-dyn{ grid-column:1 / -1; }      /* Vorbericht | Tickets, darunter Live bei DYN ueber die volle Breite */
.bl-trio .body > .button{ margin-top:0 !important; }
.bl-nextcard .body > .nc-countdown{ margin:.1rem 0 !important; }
.bl-nextcard .body > .nc-countdown .cd-now{ padding:.35rem .9rem; }
/* Match-Day-Karte: Countdown als Leiste am unteren Rand der Card (nur in den letzten 2 Tagen vor Spielbeginn, js/main.js) */
.bl-nextcard .card-frame .nc-overlay{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:3; margin:0 !important;
  display:flex; gap:.35rem; padding:.45rem .55rem; border-radius:12px; pointer-events:none;
  background:rgba(4,8,60,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 8px 20px rgba(4,8,40,.45); }
.bl-nextcard .card-frame .nc-overlay[hidden]{ display:none !important; }
.bl-nextcard .card-frame .nc-overlay > span{ min-width:3rem; padding:.3rem .35rem .25rem; background:rgba(255,255,255,.1); border-radius:8px; }
.bl-nextcard .card-frame .nc-overlay b{ font-size:1.35rem; color:#fff; }
.bl-nextcard .card-frame .nc-overlay small{ color:rgba(255,255,255,.75); }
/* Spielplan-Karte: Gruss fuellt den freien Platz zwischen Card und Buttons */
.bl-plan .body > .bl-plan-gruss{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; margin:0; text-align:center; }
.bl-plan .bl-plan-gruss .kicker{ display:block; }
/* gleiche Schrift wie "Sa · 17.10.2026 · 19:00 Uhr" in der Nachbarkarte */
.bl-plan .bl-plan-gruss .gruss{ font-family:var(--font-body); font-weight:700; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; line-height:1.5; color:#EFEDE8; max-width:26ch; }
/* Bundesliga-Startseite, Spielplan (Handy): Reiter "Letzte Ergebnisse" / "Naechste Spiele" (js/main.js) */
.bl-sp-tabs{ display:none; }
@media (max-width:767.98px){
  /* Reiter im Stil des News-Filters der Bundesliga (bereich.css .news-filter): eckig, dunkel transparent, aktiv rot */
  .bl-sp-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 14px; }
  .bl-sp-tabs[hidden]{ display:none; }
  body.bl-home section[aria-labelledby="spiele-title"] :is(h3.bl-sub, .table-wrap)[hidden]{ display:none !important; }
  html body:not(#st1):not(#st2):not(#st3):not(#st4) .bl-sp-tabs [role="tab"]{ flex:none; min-height:0; border-radius:0; cursor:pointer;
    font-family:var(--font-display); font-weight:800; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; line-height:1.2;
    padding:.45rem .9rem; border:1px solid rgba(255,255,255,.28); background:rgba(0,0,40,.25); color:#fff; box-shadow:none; transition:background .2s; }
  html body:not(#st1):not(#st2):not(#st3):not(#st4) .bl-sp-tabs [role="tab"]:hover{ background:rgba(0,0,40,.45); }
  html body:not(#st1):not(#st2):not(#st3):not(#st4) .bl-sp-tabs [role="tab"][aria-selected="true"]{ background:#d90000; border-color:#d90000; color:#fff; }
  .bl-sp-tabs [role="tab"]:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
  .table-wrap.bl-sp-in-r{ animation:blSpInR .35s cubic-bezier(.22,1,.36,1) both; }
  .table-wrap.bl-sp-in-l{ animation:blSpInL .35s cubic-bezier(.22,1,.36,1) both; }
  @keyframes blSpInR{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } }
  @keyframes blSpInL{ from{ opacity:0; transform:translateX(-28px); } to{ opacity:1; transform:none; } }
}
@media (prefers-reduced-motion:reduce){ .table-wrap.bl-sp-in-r, .table-wrap.bl-sp-in-l{ animation:none; } .bl-sp-tabs [role="tab"]{ transition:none; } }
/* ===========================================================================
   Spieltabellen in mittleren Fensterbreiten (721-1100 px): Die Tabelle bleibt eine Tabelle, war aber zu schmal -
   Vereinsnamen brachen Buchstabe fuer Buchstabe um. Jetzt: Logo ueber dem Namen (mehr Platz fuer den Namen),
   Umbruch nur zwischen Woertern, und als Sicherheit eine Mindestbreite mit seitlichem Scrollen statt Zerreissen.
   =========================================================================== */
@media (min-width:721px) and (max-width:1100px){
  .table-wrap{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  table.schedule:has(td.pairing){ min-width:720px; }
  table.schedule td{ overflow-wrap:normal !important; word-break:normal !important; hyphens:manual !important; }   /* Woerter nie zerreissen; zu lange Inhalte -> Tabelle wird breiter und scrollt */
  table.bl-hometable td{ white-space:normal !important; }
  table.bl-hometable td :is(.res-link, .button){ white-space:nowrap !important; }
  table.bl-hometable th:nth-child(1), table.bl-hometable td:nth-child(1){ width:16% !important; }
  table.bl-hometable th:nth-child(2), table.bl-hometable td:nth-child(2){ width:13% !important; }
  table.bl-hometable th:nth-child(3), table.bl-hometable td:nth-child(3){ width:33% !important; }
  table.bl-hometable th:nth-child(4), table.bl-hometable td:nth-child(4){ width:16% !important; }
  table.bl-hometable th:nth-child(5), table.bl-hometable td:nth-child(5){ width:22% !important; }
  table.schedule td.pairing .pair{ gap:.3rem .5rem !important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important; }
  /* Begegnung bekommt immer genug Platz fuer zwei Vereinsnamen nebeneinander; reicht die Breite nicht, scrollt die Tabelle */
  table.schedule:has(td.pairing){ table-layout:auto !important; }
  table.schedule td.pairing{ min-width:240px; }
  table.schedule:not(.bl-hometable) td.pairing{ width:30%; }
  /* Datum und Spieltag duerfen umbrechen (vorher nowrap -> Tabelle lief rechts heraus) */
  table.schedule:has(td.pairing) td:is([data-label="Datum"], [data-label="Spieltag"]){ white-space:normal !important; width:auto; }
  /* "Flensburg-Handewitt": nur am Bindestrich umbrechen, nie mitten im Wort */
  table.schedule td.pairing .club-nm{ overflow-wrap:normal !important; }
  table.schedule td.pairing .club{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center; gap:.3rem !important; text-align:center; min-width:0; }
  table.schedule td.pairing .club-nm{ display:block; min-width:0; overflow-wrap:normal !important; word-break:normal !important; hyphens:manual !important; line-height:1.2; font-size:.82rem; }
  table.schedule td.pairing .club-ic img, table.schedule td.pairing .club-logo{ max-width:30px !important; max-height:30px !important; }
}
/* Hamburger-Menue: Buttons, Kacheln und Untermenue mit 90-Grad-Ecken */
@media (max-width:900px){ #mainNav :is(.button, .nav-cta, .nav-social a, .nav-sub, .nav-close){ border-radius:0 !important; } }

/* Hamburger-Menue (Handy und alles bis 900 px, wo das Menue als Klappleiste erscheint): immer 90-Grad-Ecken, auf allen Seiten */
@media (max-width:900px){
  html body:not(#hm1):not(#hm2):not(#hm3):not(#hm4) #mainNav,
  html body:not(#hm1):not(#hm2):not(#hm3):not(#hm4) #mainNav *,
  html body:not(#hm1):not(#hm2):not(#hm3):not(#hm4) #mainNav *::before,
  html body:not(#hm1):not(#hm2):not(#hm3):not(#hm4) #mainNav *::after,
  html body:not(#hm1):not(#hm2):not(#hm3):not(#hm4) #mainNav::before,
  html body:not(#hm1):not(#hm2):not(#hm3):not(#hm4) #mainNav::after{ border-radius:0 !important; }
}
/* ===========================================================================
   HBL-Styleguide 26.08.2026: Logos nur aus dem Dateipaket, unveraendert.
   Footer: Opel-HBL-Primaerlogo (keine weisse Fassung, keine Transparenz), Mindesthoehe digital 32 px, Schutzzone = halbe Hoehe.
   DHB-Pokal-Spiele: Eventlogo in der Version mit Basisform (Pflichtversion ausserhalb des HBL-Brandings).
   =========================================================================== */
.site-footer .f-league img{ opacity:1 !important; filter:none !important; height:56px; margin:28px 0; }
.site-footer .f-league a:hover img{ opacity:1 !important; }
td.st-pokal-zelle{ white-space:normal !important; }
td.st-pokal-zelle .st-pokal{ display:block; height:34px; width:auto; margin:8px 0 6px; }
td.st-pokal-zelle span{ display:block; font-size:.82em; line-height:1.25; }
td.st-pokal-zelle{ text-align:center !important; }
td.st-pokal-zelle .st-pokal{ margin:8px auto 6px; }
@media (max-width:720px){
  html body table.schedule td.st-pokal-zelle{ display:inline-flex !important; align-items:center; gap:.5rem; vertical-align:middle; }
  html body table.schedule td.st-pokal-zelle .st-pokal{ height:32px; margin:0 !important; }
  html body table.schedule td.st-pokal-zelle span{ display:inline; }
}
/* Opel-HBL-Spieltage: Primaerlogo in der Spieltag-Spalte (gleicher Aufbau wie DHB-Pokal), digital mind. 32 px hoch */
td.st-liga-zelle{ white-space:normal !important; text-align:center !important; }
td.st-liga-zelle .st-liga{ display:block; height:34px; width:auto; margin:8px auto 6px; }
td.st-liga-zelle span{ display:block; font-size:.82em; line-height:1.25; }
@media (max-width:720px){
  html body table.schedule td.st-liga-zelle{ display:inline-flex !important; align-items:center; gap:.5rem; vertical-align:middle; }
  html body table.schedule td.st-liga-zelle .st-liga{ height:32px; margin:0 !important; }
  html body table.schedule td.st-liga-zelle span{ display:inline; }
}
/* Spielplan "Naechste Spiele": Tickets- und DYN-Knopf gleich gross; DYN mit dem Originallogo (unveraendert, weisse Schrift auf #002F60) */
table.bl-hometable .res-link.aktion{ display:inline-flex !important; flex-direction:column; align-items:center; justify-content:center; box-sizing:border-box;
  width:7.2rem !important; min-width:7.2rem !important; height:3.4rem !important; padding:.35rem .5rem !important; }
table.bl-hometable .res-link.res-dyn small{ display:inline-flex !important; align-items:center; gap:.3rem; }
table.bl-hometable .res-link.res-dyn .dyn-orig{ display:block; height:16px; width:auto; }
html body:not(#rd1):not(#rd2):not(#rd3):not(#rd4) table.bl-hometable .res-link.aktion{ flex-direction:column !important; justify-content:center !important; align-items:center !important; gap:.15rem !important; line-height:1.1 !important; }
html body:not(#rd1):not(#rd2):not(#rd3):not(#rd4) table.bl-hometable .res-link.aktion small{ display:flex !important; align-items:center; justify-content:center; gap:.3rem; margin:0 !important; line-height:1 !important; }

/* Spielplan Startseite: alle Knoepfe gleich gross (Ergebnis, Tickets, Live), DYN in Polish-Blau direkt hinter "Live" */
html body:not(#rd1):not(#rd2):not(#rd3):not(#rd4) table.bl-hometable .res-link{ display:inline-flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; box-sizing:border-box;
  width:7.2rem !important; min-width:7.2rem !important; height:3.4rem !important; padding:.35rem .5rem !important; gap:.15rem !important; line-height:1.1 !important; }
html body:not(#rd1):not(#rd2):not(#rd3):not(#rd4) table.bl-hometable .res-link small{ display:block !important; margin:0 !important; line-height:1 !important; }
html body:not(#rd1):not(#rd2):not(#rd3):not(#rd4) table.bl-hometable .res-link.res-dyn .dyn-zeile{ display:inline-flex; align-items:center; gap:.35rem; }
html body:not(#rd1):not(#rd2):not(#rd3):not(#rd4) table.bl-hometable .res-link.res-dyn .dyn-blau{ display:block; height:20px; width:auto; }

/* ===========================================================================
   Bundesliga-Startseite: Spielerkarten-Band "Das Team" (Endlosschleife ueber dem Newsletter).
   Markup erzeugt api/lib-bl.php (bl_kader_loop_html) aus bundesliga/data/kader.json.
   Die Karten stehen zweimal in der Spur, die Animation schiebt genau eine Runde weiter.
   =========================================================================== */
.bl-kaderloop .kl-loop{ position:relative; overflow:hidden; padding:1.4rem 0 .6rem;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); }
.bl-kaderloop .kl-track{ display:flex; gap:18px; width:max-content; animation:kl-run calc(var(--kl-n, 18) * 3.2s) linear infinite; }
.bl-kaderloop .kl-loop:is(:hover, :focus-within) .kl-track{ animation-play-state:paused; }
@keyframes kl-run{ to{ transform:translateX(calc(-50% - 9px)); } }
.bl-kaderloop .kl-card{ position:relative; flex:none; display:block; width:190px; height:272px; overflow:hidden; text-decoration:none; border-radius:0;
  background:linear-gradient(160deg,#FFFFFF 0%,#F6F4F0 52%,#E8E4DC 100%); box-shadow:0 14px 30px rgba(2,6,50,.42);
  transition:transform .3s ease, box-shadow .3s ease; }
/* Trikotstreifen hinter der Figur, nach rechts oben auslaufend (wie die Deck-Karten auf team.html) */
.bl-kaderloop .kl-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:70%; z-index:0;
  background:repeating-linear-gradient(90deg,#0016a8 0 6px,#0818d8 6px 12px,#0016a8 12px 18px,#0818d8 18px 24px,#cc1d0a 24px 30px,#f82818 30px 36px,#cc1d0a 36px 42px,#f82818 42px 48px);
  -webkit-mask-image:linear-gradient(70deg,#000 0 22%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.18) 66%,transparent 88%); mask-image:linear-gradient(70deg,#000 0 22%,rgba(0,0,0,.6) 42%,rgba(0,0,0,.18) 66%,transparent 88%); }
.bl-kaderloop .kl-nr{ position:absolute; top:.35rem; right:.6rem; z-index:1; font-family:var(--font-display); font-weight:900; font-size:3.6rem; line-height:1; color:#0616a8; opacity:.16; }
.bl-kaderloop .kl-fig{ position:absolute; left:50%; bottom:66px; z-index:2; height:198px; width:auto; max-width:none; transform:translateX(-50%);
  filter:drop-shadow(0 10px 16px rgba(0,0,30,.35)); transition:transform .3s ease; }
.bl-kaderloop .kl-txt{ position:absolute; left:0; right:0; bottom:0; z-index:3; display:block; padding:.55rem .75rem .6rem;
  background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%); color:#fff; text-align:left; }
.bl-kaderloop .kl-vn{ display:block; font:700 .74rem/1.15 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.bl-kaderloop .kl-nn{ display:block; font-family:var(--font-display); font-weight:900; font-size:1.3rem; line-height:1.02; text-transform:uppercase; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-kaderloop .kl-pos{ display:block; margin-top:.15rem; font:700 .66rem/1.2 var(--font-body); letter-spacing:.06em; text-transform:uppercase; color:#FFB3A8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-kaderloop .kl-card:is(:hover, :focus-visible){ transform:translateY(-6px); box-shadow:0 20px 38px rgba(2,6,50,.5); outline:none; }
.bl-kaderloop .kl-card:is(:hover, :focus-visible) .kl-fig{ transform:translateX(-50%) scale(1.04); }
.bl-kaderloop .kl-card:focus-visible{ box-shadow:0 0 0 3px #f82818, 0 20px 38px rgba(2,6,50,.5); }
.bl-kaderloop .kl-mehr{ margin:1.6rem 0 0; text-align:right; }
@media (max-width:720px){
  .bl-kaderloop .kl-track{ gap:12px; }
  @keyframes kl-run{ to{ transform:translateX(calc(-50% - 6px)); } }
  .bl-kaderloop .kl-card{ width:150px; height:218px; }
  .bl-kaderloop .kl-fig{ height:156px; bottom:58px; }
  .bl-kaderloop .kl-nr{ font-size:2.8rem; }
  .bl-kaderloop .kl-nn{ font-size:1.08rem; }
}
/* Bewegung reduziert: keine Animation, das Band laesst sich von Hand wischen, die doppelte Runde entfaellt */
@media (prefers-reduced-motion: reduce){
  .bl-kaderloop .kl-track{ animation:none; }
  .bl-kaderloop .kl-loop{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .bl-kaderloop .kl-card[aria-hidden="true"]{ display:none; }
}
/* Spielerpate/Partner unter jeder Karte (wie auf sgbbm.de): weisse Leiste unter dem Namensfeld */
.bl-kaderloop .kl-card:has(.kl-pate){ height:334px; }
.bl-kaderloop .kl-card:has(.kl-pate) .kl-txt{ bottom:62px; }
.bl-kaderloop .kl-card:has(.kl-pate) .kl-fig{ bottom:128px; }
.bl-kaderloop .kl-pate{ position:absolute; left:0; right:0; bottom:0; z-index:3; height:62px; display:flex; align-items:center; justify-content:center; padding:8px 14px; box-sizing:border-box; background:#fff; border-top:3px solid #f82818; }
.bl-kaderloop .kl-pate img{ display:block; max-width:100%; max-height:42px; width:auto; height:auto; object-fit:contain; }
@media (max-width:720px){
  .bl-kaderloop .kl-card:has(.kl-pate){ height:270px; }
  .bl-kaderloop .kl-card:has(.kl-pate) .kl-txt{ bottom:52px; }
  .bl-kaderloop .kl-card:has(.kl-pate) .kl-fig{ bottom:110px; }
  .bl-kaderloop .kl-pate{ height:52px; padding:6px 10px; }
  .bl-kaderloop .kl-pate img{ max-height:34px; }
}
/* Nachnamen besser lesbar: groesser, leicht gesperrt, Groesse passt sich der Namenslaenge an (--kl-len setzt der Generator) */
.bl-kaderloop .kl-nn{ font-size:min(1.75rem, calc(252px / var(--kl-len, 8))); letter-spacing:.03em; line-height:1.05; margin:.1rem 0 .05rem;
  text-overflow:clip; text-shadow:0 2px 6px rgba(0,0,40,.45); }
@media (max-width:720px){ .bl-kaderloop .kl-nn{ font-size:min(1.4rem, calc(186px / var(--kl-len, 8))); } }
/* Wasserzeichen im Kopf (05.11.2026): Railroad Gothic Black hat hohe Akzente (Ä, Ö, Ü reichen bis .93 em),
   bei line-height .8 ragten die Punkte in den roten Balken. Abstand oben, damit der Balken immer ueber der Schrift steht. */
body:has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-txt[data-ghost]::before{ padding-top:.15em !important; }
/* Luecke im roten Balken ueber Umlaut-Punkten des Wasserzeichens (Maske setzt js/main.js als --kl-mask, 08.11.2026) */
body:has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-txt .kicker::before{ -webkit-mask-image:var(--kl-mask, none); mask-image:var(--kl-mask, none); }
/* Startseite Verein & Jugend, Abschnitt Spieltag: Hinweisbox zur Teamwahl rechtsbuendig */
section[aria-labelledby="spiele-title"] .dq-verweis.sp-teamhinweis{ margin-left:auto !important; margin-right:0 !important; }

/* ===========================================================================
   Startseite Verein & Jugend (05.11.2026): Abschnitte "Spieltag" und "Profis" ueber die volle Breite,
   statt kleiner Kaesten rechts bzw. in der Mitte mit viel leerem Blau daneben.
   =========================================================================== */
/* Spieltag: Text links, Mannschaften rechts */
.sp-start{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(1.2rem,3vw,2.8rem); align-items:center;
  padding:clamp(1.3rem,3vw,2.2rem); margin-top:clamp(1rem,2vw,1.6rem);
  background:linear-gradient(160deg,#FFFFFF 0%,#F4F6FA 34%,#E6EBF3 68%,#D5DCE8 100%); color:#0b1440;
  border-top:4px solid #f82818; box-shadow:0 18px 40px rgba(2,8,40,.35); }
.sp-start__txt .kicker{ display:block; color:#f82818; font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.5rem; }
.sp-start__txt h3{ margin:0 0 .6rem; font-family:var(--font-display); font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1; color:#0616a8; text-transform:uppercase; }
.sp-start__txt p{ margin:0 0 1.2rem; color:#26305e; line-height:1.55; max-width:46ch; }
.sp-start__label{ display:block; font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#4a5488; margin-bottom:.7rem; }
.sp-start__chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr)); gap:.5rem; }
.sp-start__chips a{ display:flex; align-items:center; justify-content:center; min-height:44px; padding:.5rem .7rem; text-align:center;
  font-weight:800; font-size:.9rem; letter-spacing:.03em; text-decoration:none; color:#fff;
  background:linear-gradient(165deg,#0a1cd6 0%,#0616a8 55%,#04127e 100%); box-shadow:0 6px 14px rgba(4,18,126,.28);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.sp-start__chips a:hover, .sp-start__chips a:focus-visible{ transform:translateY(-2px); box-shadow:0 10px 20px rgba(4,18,126,.38);
  background:linear-gradient(165deg,#ff4433 0%,#f82818 52%,#cc1d0a 100%); }
@media (max-width:860px){ .sp-start{ grid-template-columns:1fr; } }
@media (max-width:480px){ .sp-start__chips{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; } .sp-start__chips a{ min-height:42px; font-size:.82rem; padding:.4rem .3rem; } }

/* Profis: Begegnung links, Termin, Countdown und Buttons rechts */
@media (min-width:900px){
  html body:not(#pf1):not(#pf2):not(#pf3):not(#pf4):not(#pf5):not(#pf6):not(#pf7):not(#pf8):not(#pf9):not(#pf10) section[aria-labelledby="profis-title"] .bl-next{
    display:grid !important; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1.25fr) !important; align-items:center !important;
    column-gap:clamp(1rem,2.4vw,2.4rem) !important; row-gap:0 !important; width:100% !important; max-width:none !important; margin:clamp(1rem,2vw,1.6rem) 0 0 !important;
    padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem) !important; }
  html body:not(#pf1):not(#pf2):not(#pf3):not(#pf4):not(#pf5):not(#pf6):not(#pf7):not(#pf8):not(#pf9):not(#pf10) section[aria-labelledby="profis-title"] .bl-next .team{
    flex-direction:column !important; text-align:center !important; gap:.7rem !important; }
  html body:not(#pf1):not(#pf2):not(#pf3):not(#pf4):not(#pf5):not(#pf6):not(#pf7):not(#pf8):not(#pf9):not(#pf10) section[aria-labelledby="profis-title"] .bl-next .team img{ height:clamp(84px,8vw,118px) !important; }
  html body:not(#pf1):not(#pf2):not(#pf3):not(#pf4):not(#pf5):not(#pf6):not(#pf7):not(#pf8):not(#pf9):not(#pf10) section[aria-labelledby="profis-title"] .bl-next .when{
    grid-column:4 !important; grid-row:1 !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; text-align:center !important;
    gap:.5rem !important; margin:0 !important; padding:0 0 0 clamp(1rem,2.4vw,2.4rem) !important; border-top:0 !important; border-left:1px solid rgba(6,22,168,.18) !important; }
}
html body:not(#pf1):not(#pf2):not(#pf3):not(#pf4):not(#pf5):not(#pf6):not(#pf7):not(#pf8):not(#pf9):not(#pf10) section[aria-labelledby="profis-title"] .bl-next__btns{
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:.6rem !important; margin:.6rem 0 0 !important; width:100% !important; }
html body:not(#pf1):not(#pf2):not(#pf3):not(#pf4):not(#pf5):not(#pf6):not(#pf7):not(#pf8):not(#pf9):not(#pf10) section[aria-labelledby="profis-title"] .bl-next__btns .button{ width:100% !important; margin:0 !important; }
/* Nachschaerfung: helle Karte, also dunkle Ueberschrift (die Abschnittsregeln faerben h3 weiss), Buttons ohne Mindestbreite und Unterstrich */
html body:not(#sq1):not(#sq2):not(#sq3):not(#sq4):not(#sq5):not(#sq6):not(#sq7):not(#sq8):not(#sq9):not(#sq10):not(#sq11):not(#sq12) .sp-start .sp-start__txt h3{
  color:#0616a8 !important; -webkit-text-fill-color:#0616a8 !important; background:none !important; text-shadow:none !important; }
html body:not(#sq1):not(#sq2):not(#sq3):not(#sq4):not(#sq5):not(#sq6):not(#sq7):not(#sq8):not(#sq9):not(#sq10):not(#sq11):not(#sq12) .sp-start .sp-start__txt p{ color:#26305e !important; }
html body:not(#sq1):not(#sq2):not(#sq3):not(#sq4):not(#sq5):not(#sq6):not(#sq7):not(#sq8):not(#sq9):not(#sq10):not(#sq11):not(#sq12) .sp-start .sp-start__chips a{ color:#fff !important; -webkit-text-fill-color:#fff !important; text-decoration:none !important; }
html body:not(#sq1):not(#sq2):not(#sq3):not(#sq4):not(#sq5):not(#sq6):not(#sq7):not(#sq8):not(#sq9):not(#sq10):not(#sq11):not(#sq12) section[aria-labelledby="profis-title"] .bl-next__btns .button{
  min-width:0 !important; padding-left:.8rem !important; padding-right:.8rem !important; text-decoration:none !important; }
html body:not(#sq1):not(#sq2):not(#sq3):not(#sq4):not(#sq5):not(#sq6):not(#sq7):not(#sq8):not(#sq9):not(#sq10):not(#sq11):not(#sq12) section[aria-labelledby="profis-title"] .bl-next__btns .button *{ text-decoration:none !important; }
@media (max-width:1100px){
  html body:not(#sq1):not(#sq2):not(#sq3):not(#sq4):not(#sq5):not(#sq6):not(#sq7):not(#sq8):not(#sq9):not(#sq10):not(#sq11):not(#sq12) section[aria-labelledby="profis-title"] .bl-next__btns{ grid-template-columns:1fr !important; }
}

/* Section-Koepfe kompakter (Wunsch 05.11.2026): weniger Luft ueber der Kicker-Linie, zwischen Linie und
   Logo/Wasserzeichen-Wort und bis zum Inhalt darunter. Gilt fuer alle Sections mit Kopf (Videos, News, Heimspiel ...).
   Abstand Kopf bis Inhalt wie bei News freigegeben, Luft ueber der Kicker-Linie nochmals verringert. */
html body:has(#mainNav a.nav-switch) section.dsn-card:has(> .container > .ph-head){ padding-top:clamp(.55rem,1vw,.8rem) !important; }
html body:has(#mainNav a.nav-switch) .dsn-card .ph-head{ row-gap:.3rem; margin-bottom:clamp(.8rem,1.6vw,1.2rem) !important; }
/* Gleicher Abstand Kopf bis Inhalt wie bei News (Wunsch 05.11.2026), auch wo der Inhalt eigene Innenabstaende mitbringt */
html body:not(#kp1):not(#kp2):not(#kp3):has(#mainNav a.nav-switch) .dsn-card .ph-head + :is(.sp-start, .nl-grid){ margin-top:0 !important; }
html body:not(#kp1):not(#kp2):not(#kp3):not(#kp4):not(#kp5):not(#kp6):not(#kp7):not(#kp8):not(#kp9):not(#kp10):not(#kp11):not(#kp12):has(#mainNav a.nav-switch) .dsn-card .ph-head + .bl-next{ margin-top:calc(clamp(.8rem,1.6vw,1.2rem) - 7px) !important; }   /* Karte bringt 7 px Innenabstand oben mit */
html body:has(#mainNav a.nav-switch) .dsn-card .ph-head + h3{ margin-top:0 !important; }
@media (min-width:721px){ html body:has(#mainNav a.nav-switch) .dsn-card .ph-head:has(+ .news-filter){ margin-bottom:calc(clamp(.8rem,1.6vw,1.2rem) + 8px) !important; } }
/* Kicker-Linie direkt ueber Logo und Wasserzeichen-Wort (Wunsch 05.11.2026, Skizze Newsletter): Linie und Text
   ruecken nach unten, bis gut 12 px ueber der Logo-Oberkante. Verschiebung waechst wie Logo und Wort mit der Breite. */
/* 08.11.2026 noch enger: 6 px von der Linie bis zum Logo, auf allen Breiten. js/main.js rechnet die Verschiebung
   je Kopf aus (--kick-shift), weil die Koepfe je nach Wortlaenge unterschiedlich hoch sind. Ohne Skript gilt der Naeherungswert. */
html body:not(#kk1):not(#kk2):not(#kk3):not(#kk4):has(#mainNav a.nav-switch) .dsn-card .ph-head .ph-txt .kicker{
  position:relative; top:var(--kick-shift, clamp(10px,1.95vw,24px)); }
/* Ueberall gleicher Abstand Kopf (Logo + Wasserzeichen-Wort) bis Inhalt wie bei News (Wunsch 05.11.2026):
   PC 19 px (Rand unter dem Kopf), Handy 13 px. Das Element direkt unter dem Kopf bringt keinen eigenen Abstand mit. */
html body:not(#ga1):not(#ga2):not(#ga3):not(#ga4):not(#ga5):not(#ga6):not(#ga7):not(#ga8):not(#ga9):not(#ga10):not(#ga11):not(#ga12):not(#ga13) .ph-head + :is(.fan-gallery, .mm-steps, .mm-tiles, .mm-tarife, .mm-faq, .mm-split, .mm-benefits, .mm-cta, .sp-group, img.team){ margin-top:0 !important; }
html body:not(#ga1):not(#ga2):not(#ga3):not(#ga4):not(#ga5):not(#ga6):not(#ga7):not(#ga8):not(#ga9):not(#ga10):not(#ga11):not(#ga12):not(#ga13) .ps-team-txt:has(> .ph-head:last-child){ padding-bottom:0 !important; }
html body:not(#ga1):not(#ga2):not(#ga3):not(#ga4):not(#ga5):not(#ga6):not(#ga7):not(#ga8):not(#ga9):not(#ga10):not(#ga11):not(#ga12):not(#ga13) .container:has(> .ph-head:last-child) + .partner-bar{ margin-top:0 !important; }
@media (max-width:720px){ html body:not(#ga1):not(#ga2):not(#ga3):not(#ga4):not(#ga5):not(#ga6):not(#ga7):not(#ga8):not(#ga9):not(#ga10):not(#ga11):not(#ga12):not(#ga13) .ph-head + .sp-group{ margin-top:-2px !important; } }
@media (max-width:720px){ html body:not(#ga1):not(#ga2):not(#ga3):not(#ga4):not(#ga5):not(#ga6):not(#ga7):not(#ga8):not(#ga9):not(#ga10):not(#ga11):not(#ga12):not(#ga13):has(#mainNav a.nav-switch:not([href*="bundesliga"])) .ph-head:has(+ .news-filter){ margin-bottom:21px !important; } }
/* Geoeffnete News (08.11.2026): Text ueber die volle Breite des Bildes.
   Bundesliga: Textspalte nicht mehr auf 70 Zeichen begrenzt (die Begrenzung steht inline im Generator api/lib-bl.php).
   Verein & Jugend: Text buendig mit dem Bild. Die Box behaelt ihren deckenden Hintergrund, sonst scheinen die
   Streifen der Section durch den Text (Regel "Cards auf dem Balken-Hintergrund"), nur der Rand links und rechts entfaellt. */
html body:not(#nf1):not(#nf2):not(#nf3) .prose[itemprop="articleBody"],
html body:not(#nf1):not(#nf2):not(#nf3) .prose[itemprop="articleBody"] :is(p, ul, ol, blockquote, h2, h3){ max-width:none !important; }
html body:not(#nf1):not(#nf2):not(#nf3) .nd-textcard{ padding-left:0 !important; padding-right:0 !important; }
/* Geoeffnete News als Artikelblatt (08.11.2026): Bild, Ueberschrift und Text liegen gemeinsam auf einer Flaeche
   in tieferem Polish-Blau, die links und rechts etwas uebersteht. Oben die rote Linie wie bei den Section-Koepfen,
   dazu ein weicher Schatten. Text und Bild bleiben gleich breit, die Streifen der Section sind verdeckt
   (Regel "Cards auf dem Balken-Hintergrund"). Die Flaeche ist ein ::before, die Breiten der Inhalte bleiben unberuehrt. */
html body:not(#nk1):not(#nk2):not(#nk3):not(#nk4):not(#nk5) :is(.bl-article > .container:has(> .prose[itemprop="articleBody"]), .nd-article){
  --blatt-x: clamp(10px, 1.8vw, 26px); --blatt-y: clamp(14px, 2vw, 28px); --blatt-pt: clamp(2.5rem, 6vw, 4.5rem);
  position:relative; z-index:1; isolation:isolate; }
html body:not(#nk1):not(#nk2):not(#nk3):not(#nk4):not(#nk5) :is(.bl-article > .container:has(> .prose[itemprop="articleBody"]), .nd-article)::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:calc(-1 * var(--blatt-x)); right:calc(-1 * var(--blatt-x)); top:calc(-1 * var(--blatt-y)); bottom:calc(-1 * var(--blatt-y));
  background:
    linear-gradient(90deg, #f82818 0%, #f82818 38%, rgba(248,40,24,0) 100%) top left / 100% 3px no-repeat,
    linear-gradient(115deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(rgba(3,9,80,.32), rgba(3,9,80,.32)),
    var(--deck-blau);
  box-shadow: 0 26px 54px rgba(2,6,50,.42), inset 0 1px 0 rgba(255,255,255,.08); }
/* Bundesliga: das Blatt beginnt knapp ueber dem Kicker, nicht am oberen Innenabstand der Section */
html body:not(#nk1):not(#nk2):not(#nk3):not(#nk4):not(#nk5) .bl-article > .container:has(> .prose[itemprop="articleBody"])::before{
  top:calc(var(--blatt-pt, 72px) - var(--blatt-y)); bottom:calc(var(--blatt-pt, 72px) - var(--blatt-y)); }
/* Kein Kasten im Blatt: Textbox (Verein) und Textspalte (Bundesliga) ohne eigenen Grund und Schatten */
html body:not(#nk1):not(#nk2):not(#nk3):not(#nk4):not(#nk5) .nd-textcard,
html body.mv-page:not(#nk1):not(#nk2):not(#nk3):not(#nk4):not(#nk5) #main .nd-textcard,
html body:not(#nk1):not(#nk2):not(#nk3):not(#nk4):not(#nk5) .prose[itemprop="articleBody"]{
  background:none !important; box-shadow:none !important; }
/* Handy (Verein): .nd-article ist dort schon eine Karte (css/mobil-verein.css), nur die rote Oberkante wie am PC */
html body.mv-page:not(#nk1):not(#nk2):not(#nk3):not(#nk4):not(#nk5) #main .nd-article{
  background: linear-gradient(90deg, #f82818 0%, #f82818 38%, rgba(248,40,24,0) 100%) top left / 100% 3px no-repeat, var(--sg-polish) !important;
  padding-top: 3px; }