/* ============================================================
   HT HECKENGÄU — MASTER STYLESHEET
   style.css  |  Version 4.0 (bereinigt)

   INHALTSVERZEICHNIS
   ──────────────────
   01  CSS-TOKENS & RESET
   02  TYPO-UTILITIES
   03  BUTTON-SYSTEM
   04  TICKER
   05  NAVBAR
   06  HERO
   07  HECKENGÄU-TRIO (Stammvereine)
   08  PARTNER WALL
   09  NEWS-GRID
   10  SPIELPLAN / MATCH-CENTER
   11  TEAM-SEKTION (Kader, Trainer, Tabs)
   12  SCHIEDSRICHTER
   13  SOCIAL WALL
   14  RECRUITING CTA-BANNER
   15  SIDEBAR-WIDGETS
   16  FOOTER
   17  SUBPAGE-OVERLAY (Verein/SG)
   18  MATCH-DAY-MODE
   19  SG-BANNER
   20  JÜNGSTE (E/F/Minis)
   21  TERMINE
   22  GALERIE + LIGHTBOX
   23  NEWS-OVERLAY / ARCHIV
   24  MATCHDAY-BAR
   25  HERO SLIDESHOW
   26  LAYOUT: CONTENT + SPONSOR-LEISTE
   27  RESPONSIVE
============================================================ */


/* ============================================================
   01  CSS-TOKENS & RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Farben */
  --red:      #C8102E;
  --red-dk:   #9e0c24;
  --red-lt:   #e8314d;
  --black:    #0a0a0a;
  --black-2:  #141414;
  --black-3:  #1e1e1e;
  --black-4:  #2a2a2a;
  --white:    #ffffff;
  --off-white:#f8f7f5;
  --gray-1:   #ebebeb;
  --gray-2:   #d4d4d4;
  --gray-3:   #9a9a9a;
  --gray-4:   #5a5a5a;

  /* Schriften */
  --font-disp: 'Oswald', sans-serif;
  --font-cond: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;

  /* Animationen */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --max-w: 1600px;
  --pad-x: clamp(1.5rem, 4vw, 4rem);
}

html, body {
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-body);
  background: var(--off-white);
  color: var(--black);
  /* clip statt hidden: verhindert horizontales Scrollen, macht body aber
     NICHT zum Scroll-Container -> position:sticky (Partner-Leiste) bleibt heil */
  overflow-x: clip;
}
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul  { list-style: none; }
button { border: none; background: none; cursor: pointer; font: inherit; }


/* ============================================================
   02  TYPO-UTILITIES
============================================================ */
.label-red {
  font-family: var(--font-cond);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.section-title {
  font-family: var(--font-disp);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--black);
}
/* Section header row */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.4rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--black);
}
.sec-head.red-rule { border-bottom-color: var(--red); }

.sec-more {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: opacity 0.2s;
}
.sec-more::after  { content: '›'; font-size: 1.1em; }
.sec-more:hover   { opacity: 0.7; }


/* ============================================================
   03  BUTTON-SYSTEM
============================================================ */
/* Primär: rot, schräge Kante links unten */
.btn-red {
  display: inline-block;
  font-family: var(--font-disp);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  background: var(--red);
  padding: 0.8rem 1.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: background 0.2s, transform 0.2s;
  cursor: pointer;
  text-align: center;
}
.btn-red:hover  { background: var(--red-dk); transform: translateY(-2px); }

/* Sekundär: umrandet */
.btn-ghost {
  display: inline-block;
  font-family: var(--font-disp);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  background: transparent;
  padding: 0.8rem 1.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 2px;
  transition: border-color 0.2s, transform 0.2s;
  cursor: pointer;
  text-align: center;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.7); transform: translateY(-2px); }

/* Ticket-Badge */
.badge-ticket {
  display: inline-block;
  background: transparent;
  border: 1.5px solid var(--red);
  color: var(--red);
  font-family: var(--font-disp);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  transition: all 0.15s;
  cursor: pointer;
  border-radius: 1px;
}
.badge-ticket:hover { background: var(--red); color: var(--white); }
.badge-heim, .badge-aus {
  display: inline-block; font-family: var(--font-disp); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px; border-radius: 1px; border: 1.5px solid;
}
.badge-heim { color: var(--red); border-color: var(--red); background: rgba(200,16,46,0.06); }
.badge-aus  { color: var(--gray-3); border-color: var(--gray-2); background: transparent; }

/* Trainingszeiten im Team-Dialog */
.td-training { margin-top: .2rem; }
.td-training .tzh-item:last-child { border-bottom: none; }

/* Team-Tabelle (handball4all) im Team-Dialog */
.team-tab-wrap { margin-top: .3rem; }
.tt-loading, .tt-empty { font-family: var(--font-cond); font-size: .85rem; color: var(--gray-3); padding: .6rem 0; }
.tt-scroll { overflow-x: auto; }
.tt-table { width: 100%; border-collapse: collapse; font-family: var(--font-cond); font-size: .82rem; }
.tt-table th { text-align: center; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-3); font-weight: 700; padding: .35rem .3rem; border-bottom: 2px solid var(--gray-1); white-space: nowrap; }
.tt-table td { text-align: center; padding: .38rem .3rem; border-bottom: 1px solid var(--gray-1); color: var(--gray-4); }
.tt-table th.tt-team, .tt-table td.tt-team { text-align: left; }
.tt-table .tt-pl { width: 1.8rem; color: var(--gray-3); }
.tt-table .tt-team { font-weight: 600; color: var(--black); white-space: nowrap; }
.tt-table .tt-pkt { font-weight: 700; color: var(--black); }
.tt-table tr.tt-me td { background: rgba(200,16,46,.08); }
.tt-table tr.tt-me .tt-team { color: var(--red); font-weight: 700; }

/* Ergebnisse-Sektion */
.ergebnisse-section { margin-top: 2.2rem; }
.ergebnisse-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: .8rem; }
.erg-empty { grid-column: 1 / -1; font-family: var(--font-cond); color: var(--gray-3); font-size: .9rem; padding: 1rem 0; }
.erg-card { display: flex; gap: .7rem; align-items: center; background: var(--white); border: 1px solid var(--gray-1); border-left: 4px solid var(--gray-2); padding: .7rem .8rem; }
.erg-card.erg-win  { border-left-color: #1d6b34; }
.erg-card.erg-loss { border-left-color: #a11; }
.erg-card.erg-draw { border-left-color: #b8860b; }
.erg-badge { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-disp); font-weight: 700; font-size: .85rem; color: #fff; background: var(--gray-3); }
.erg-win .erg-badge  { background: #1d6b34; }
.erg-loss .erg-badge { background: #a11; }
.erg-draw .erg-badge { background: #b8860b; }
.erg-team { font-family: var(--font-cond); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--black); }
.erg-line { font-family: var(--font-cond); font-size: .9rem; color: var(--gray-4); }
.erg-line b { color: var(--black); }
.erg-meta { font-family: var(--font-cond); font-size: .72rem; color: var(--gray-3); }

/* „Alle Spiele & Termine"-Dialog */
.termine-modal { padding: 1.4rem 1.6rem 1.7rem; }
.termine-modal-head { font-family: var(--font-disp); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; color: var(--black); border-bottom: 3px solid var(--red); padding-bottom: .5rem; margin: 0 0 1.1rem; }
.termine-modal .termine-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.tm-filter { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tm-filter select { font-family: var(--font-cond); font-size: .9rem; font-weight: 600; padding: .5rem .7rem; border: 1px solid var(--gray-2); background: #fff; border-radius: 4px; color: var(--black); cursor: pointer; }

/* Back-to-top (nur mobil) */
.to-top { position: fixed; right: 14px; bottom: 16px; z-index: 900; width: 46px; height: 46px; border-radius: 50%; border: none;
  background: var(--red); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.to-top.show { opacity: 1; visibility: visible; }
@media (min-width: 769px) { .to-top { display: none; } }

/* Ticker: nächste Spiele */
.t-next-lead { color: var(--red); }
.t-next-aus { opacity: .7; }

/* Ticker: Live-Spiele */
.t-item.t-live { color: #fff; cursor: pointer; font-weight: 700; }
.t-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff2d2d; margin-right: .4rem; box-shadow: 0 0 0 0 rgba(255,45,45,.6); animation: tLivePulse 1.2s infinite; }
@keyframes tLivePulse { 0% { box-shadow: 0 0 0 0 rgba(255,45,45,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,45,45,0); } 100% { box-shadow: 0 0 0 0 rgba(255,45,45,0); } }

/* Spiel-Dialog (Klick auf ein Spiel) */
.sp-modal { padding: 1.7rem 1.8rem 1.9rem; text-align: center; }
.sp-liga { font-family: var(--font-cond); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 1rem; }
.sp-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.sp-team-name { font-family: var(--font-disp); font-weight: 700; font-size: 1.05rem; color: var(--black); text-transform: uppercase; line-height: 1.15; }
.sp-score { font-family: var(--font-disp); font-weight: 700; font-size: 1.9rem; color: var(--black); min-width: 3.5rem; }
.sp-score-live { color: var(--red); }
.sp-meta { font-family: var(--font-cond); font-size: .9rem; color: var(--gray-3); margin-top: .15rem; }
.sp-ticker { margin-top: 1.2rem; padding: .9rem 1rem; background: var(--gray-05,#f4f4f5); border-radius: 6px; font-family: var(--font-cond); font-size: .88rem; color: var(--gray-4); }
.sp-ticker-live { background: #fff0f0; color: #7a2531; display: flex; align-items: center; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.sp-live-badge { display: inline-flex; align-items: center; font-family: var(--font-disp); font-weight: 700; font-size: .8rem; letter-spacing: .08em; color: #ff2d2d; }
.sp-h4a { display: inline-block; margin-top: 1.1rem; font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; color: var(--red); text-decoration: none; }
.sp-h4a:hover { text-decoration: underline; }


/* ============================================================
   04  TICKER
============================================================ */
.ticker {
  background: var(--red);
  overflow: hidden;
  height: 42px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1002;
}
.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(to right, var(--red), transparent); }
.ticker::after  { right: 0; background: linear-gradient(to left,  var(--red), transparent); }

.ticker-track {
  display: flex;
  animation: ticker-scroll 38s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
@media (hover: hover) {
  .ticker:hover .ticker-track { animation-play-state: paused; }
}

.t-item {
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.t-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  flex-shrink: 0;
}

/* Ergebnis-Segment im Ticker (handball.net, Weg C) */
.t-erg-lead {
  color: var(--red); background: #fff; border-radius: 2px;
  padding: 0.12em 0.7em; letter-spacing: 0.12em;
}
.t-erg-lead .t-erg-arrow { margin-right: 0.35rem; font-size: 0.8em; }
.t-erg { gap: 0.45rem; }
.t-erg-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.3em; height: 1.3em; border-radius: 50%;
  font-size: 0.8em; font-weight: 700; color: #fff; flex-shrink: 0;
}
.t-win  .t-erg-badge { background: #0a8f3c; }
.t-loss .t-erg-badge { background: #141414; }
.t-draw .t-erg-badge { background: #5a5a5a; }
.t-erg b { color: #fff; margin: 0 0.05rem; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ============================================================
   05  NAVBAR
============================================================ */
.navbar {
  position: fixed;
  top: 42px; /* direkt unter dem Ticker */
  left: 0; right: 0;
  z-index: 1000;
  width: 100%;
  background: linear-gradient(
    90deg,
    rgba(8,8,8,0.97)    0%,
    rgba(30,30,30,0.97) 35%,
    rgba(80,10,10,0.97) 70%,
    rgba(180,10,30,0.97) 100%
  );
  border-bottom: 2px solid rgba(200,16,46,0.6);
  transition: top 0.3s ease, background 0.35s;
  backdrop-filter: blur(10px);
}
.navbar.scrolled {
  top: 42px;
  background: linear-gradient(
    90deg,
    rgba(5,5,5,0.99)    0%,
    rgba(20,20,20,0.99) 35%,
    rgba(70,8,8,0.99)   70%,
    rgba(200,16,46,0.99) 100%
  );
  border-bottom: 2px solid var(--red);
}

.nav-wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* HTH-Logo im Menüband ("ein Team") – bleibt beim Scrollen sichtbar */
.nav-hth-link  { display: flex; align-items: center; flex-shrink: 0; }
.nav-hth-logo  { height: 42px; width: auto; display: block; }
/* Reihenfolge: Menü links, dann HTH · Renningen · Rutesheim · Magstadt rechts */
.nav-links      { order: 0; margin-right: auto; }
.nav-hth-link   { order: 1; }
.nav-club-logos { order: 2; }
.burger         { order: 3; }

/* Logo */
.nav-logo      { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.logo-box {
  width: 48px; height: 48px;
  background: var(--red);
  display: flex; align-items: center; justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
}
.logo-ht       { font-family: var(--font-disp); font-size: 1.5rem; font-weight: 700; color: var(--white); letter-spacing: -0.02em; line-height: 1; }
.logo-texts    { display: flex; flex-direction: column; gap: 1px; }
.logo-name     { font-family: var(--font-disp); font-size: 1rem; font-weight: 700; color: var(--white); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.logo-sub      { font-family: var(--font-cond); font-size: 0.62rem; color: rgba(255,255,255,0.4); letter-spacing: 0.12em; text-transform: uppercase; }

/* Vereinslogos in der Navbar (natürliche Logoform) */
.nav-club-logos {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: auto;
}
.nav-club-logo {
  width: auto;
  height: 48px;
  max-width: 60px;
  border-radius: 0;
  border: none;
  object-fit: contain;
  opacity: 0.88;
  transition: opacity 0.2s, transform 0.2s;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}
.nav-club-logo:hover {
  opacity: 1;
  transform: scale(1.08) translateY(-1px);
}

/* Desktop Links */
.nav-links { display: flex; align-items: center; gap: 0; }
.nav-links a {
  font-family: var(--font-disp);
  font-size: 0.82rem; font-weight: 500;
  color: rgba(255,255,255,0.65);
  padding: 0.45rem 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0.85rem; right: 0.85rem;
  height: 2px; background: var(--red);
  transform: scaleX(0);
  transition: transform 0.2s var(--ease-out);
}
.nav-links a:hover { color: var(--white); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active        { color: var(--white); }

/* Dropdown „Spielbetrieb" */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-toggle { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }
.nav-dd-caret { font-size: 0.7em; transition: transform 0.15s; }
.nav-dd:hover .nav-dd-caret, .nav-dd:focus-within .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-menu {
  position: absolute; top: 100%; left: 0; min-width: 190px;
  background: var(--black); border-top: 2px solid var(--red);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; padding: 0.35rem 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s; z-index: 200;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-links .nav-dd-menu a { padding: 0.6rem 1.2rem; font-size: 0.8rem; color: rgba(255,255,255,0.6); white-space: nowrap; }
.nav-links .nav-dd-menu a::after { display: none; }
.nav-links .nav-dd-menu a:hover { color: #fff; background: rgba(255,255,255,0.06); }

.btn-live {
  background: var(--red) !important;
  color: var(--white) !important;
  padding: 0.45rem 1rem !important;
  margin-left: 0.5rem;
  clip-path: polygon(0 0,100% 0,100% 100%,8px 100%,0 calc(100% - 8px)) !important;
  transition: background 0.2s !important;
}
.btn-live:hover  { background: var(--red-dk) !important; }
.btn-live::after { display: none !important; }

/* Burger */
.burger { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.burger span { display: block; width: 24px; height: 2px; background: var(--white); transition: all 0.3s; border-radius: 1px; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.mobile-nav { display: none; background: var(--black-2); border-top: 1px solid rgba(255,255,255,0.06); }
.mobile-nav.open {
  display: block;
  /* Menue nie ueber den Bildschirm hinaus laufen lassen (iOS Safari):
     feste Maximalhoehe unter Ticker(36)+Navbar(60)=96px, dann eigener Scroll. */
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Waehrend das Menue offen ist, den teuren Blur der (dann sehr hohen) Navbar
   abschalten – vermeidet Render-/Ueberlagerungs-Glitches auf iOS. */
.navbar:has(.mobile-nav.open) { backdrop-filter: none; -webkit-backdrop-filter: none; }
.mobile-nav a {
  display: block;
  font-family: var(--font-disp);
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  padding: 0.85rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s, background 0.2s;
}
.mobile-nav a:hover   { color: var(--red); background: rgba(255,255,255,0.02); }
.mobile-nav .mob-live { background: var(--red); color: var(--white) !important; text-align: center; display: block; padding: 0.85rem 1.5rem; margin: 0.75rem; border-radius: 2px; }


/* ============================================================
   06  HERO
============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  background: var(--black);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Rotes Vignette-Glühen links */
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 0% 60%, rgba(200,16,46,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 40%, rgba(200,16,46,0.06) 0%, transparent 50%);
  z-index: 1;
}
.hero-pattern {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0.035;
  background-image: repeating-linear-gradient(-45deg, var(--white) 0px, var(--white) 1px, transparent 1px, transparent 12px);
}

/* Ausblend-Gradient unten: Hero → partner-wall */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(10,10,10,0.6) 40%,
    var(--black-2) 100%
  );
  z-index: 4;
  pointer-events: none;
}

/* Content-Bereich */
.hero-body {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 8rem var(--pad-x) 3rem; /* 8rem = Ticker(42px) + Navbar(72px) + Puffer */
}
.hero-left {
  flex: 0 0 auto;
  width: min(640px, 55%);
}

/* Logo + Schriftzug nebeneinander */
.hero-brand {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 0.8rem;
  line-height: 1;
}
.hero-logo-img {
  height: 130px;
  width: auto;
  flex-shrink: 0;
  align-self: flex-start;
  filter: drop-shadow(0 2px 16px rgba(200,16,46,0.45));
}
.hero-brand .hero-schriftzug { margin-bottom: 0; }

/* Schriftzug */
.hero-schriftzug  { margin-bottom: 0.8rem; }
.hero-schrift-top {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.6rem, 3.5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 0.06em;
}
.hero-schrift-handball { color: var(--white); }
.hero-schrift-team     { color: var(--red); margin-left: 0.15em; }
.hero-schrift-main {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.4rem, 5.3vw, 5.1rem);
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-bottom: 0.3em;
  white-space: nowrap;
}
.hero-schrift-cities {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(0.75rem, 1.4vw, 1rem);
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

/* Fallback hero-title / hero-eyebrow / hero-tagline */
.hero-eyebrow { display: none; }

.hero-title {
  font-family: var(--font-disp);
  font-size: clamp(3rem, 6.5vw, 6rem);
  font-weight: 700;
  color: var(--white);
  line-height: 0.88;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
}
.hero-title .accent { color: var(--red); display: block; }

.hero-tagline {
  font-family: var(--font-cond);
  font-size: clamp(0.95rem, 1.7vw, 1.25rem);
  font-weight: 600;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
  line-height: 1.25;
}
.hero-tagline-sub {
  display: inline-block;
  margin-top: 0.1rem;
  font-size: 0.78em;
  font-weight: 400;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.16em;
}

/* Counter-Stats */
.hero-stats    { display: flex; gap: 1.8rem; margin-bottom: 1.8rem; }
.hero-stat     { display: flex; flex-direction: column; gap: 2px; }
.stat-num      { font-family: var(--font-disp); font-size: 2.2rem; font-weight: 700; color: var(--white); line-height: 1; }
.stat-label    { font-family: var(--font-cond); font-size: 0.72rem; color: rgba(255,255,255,0.4); letter-spacing: 0.12em; text-transform: uppercase; }
.stat-divider  { width: 1px; background: rgba(255,255,255,0.1); align-self: stretch; }

.hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }


/* ============================================================
   07  HECKENGÄU-TRIO (Stammvereine-Kreise)
============================================================ */
.trio-bar {
  position: absolute;
  bottom: 88px; left: var(--pad-x);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.trio-label {
  font-family: var(--font-cond);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}
.trio-club {
  position: relative;
  width: 72px; height: 72px;
  flex-shrink: 0;
  cursor: default;
}
.trio-club-ring {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-disp);
  font-size: 0.65rem; font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-align: center; line-height: 1.2;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s, color 0.25s;
  overflow: hidden;
}
.trio-club-ring img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.trio-club-name {
  position: absolute;
  bottom: -20px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-disp);
  font-size: 0.6rem; font-weight: 700;
  color: var(--red);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.trio-club:hover .trio-club-ring {
  border-color: var(--red);
  background: rgba(200,16,46,0.18);
  box-shadow: 0 0 0 4px rgba(200,16,46,0.15), 0 0 16px rgba(200,16,46,0.3);
  color: var(--white);
}
.trio-club:hover .trio-club-ring img { transform: scale(1.08); }
.trio-club:hover .trio-club-name {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}


/* ============================================================
   08  PARTNER WALL
============================================================ */
.partner-wall {
  background: var(--black-2);
  width: 100vw;
  position: relative;
  margin-top: 0;
  padding: 3.5rem var(--pad-x) 3rem;
  border-top: 3px solid var(--red);
  box-shadow: 0 -1px 0 0 rgba(200,16,46,0.3);
}
/* Schmaler Off-White-Übergang nach unten */
.partner-wall::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 3px;
  background: var(--off-white);
}

.partner-wall-inner { max-width: var(--max-w); width: 100%; margin: 0 auto; }
.partner-wall-label {
  font-family: var(--font-cond); font-size: 0.72rem; font-weight: 600;
  color: var(--red); letter-spacing: 0.22em; text-transform: uppercase;
  text-align: center; margin-bottom: 2rem;
}

/* Hauptsponsor */
.partner-tier-main {
  display: flex; justify-content: center;
  margin-bottom: 2rem; padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.partner-main-slot {
  display: flex; align-items: center; justify-content: center;
  height: 80px; padding: 0 3rem; position: relative;
}
.partner-main-slot::before {
  content: 'HAUPTSPONSOR';
  position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-cond); font-size: 0.58rem; font-weight: 600;
  color: var(--red); letter-spacing: 0.2em; white-space: nowrap;
}
.partner-logo-main {
  font-family: var(--font-disp); font-size: 1.8rem; font-weight: 700;
  color: var(--gray-4); letter-spacing: 0.06em;
  filter: grayscale(100%) brightness(0.55);
  transition: filter 0.35s, color 0.35s;
}
.partner-logo-main img { height: 52px; width: auto; filter: inherit; transition: filter 0.35s; }
.partner-main-slot:hover .partner-logo-main { filter: grayscale(0%) brightness(1.1); color: var(--white); }

/* Partner-Zeile */
.partner-tier-row { display: flex; justify-content: center; flex-wrap: wrap; }
.partner-slot {
  display: flex; align-items: center; justify-content: center;
  height: 60px; padding: 0 2.2rem;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.partner-slot:last-child { border-right: none; }
.partner-logo {
  font-family: var(--font-disp); font-size: 1rem; font-weight: 700;
  color: var(--gray-4); letter-spacing: 0.05em; white-space: nowrap;
  filter: grayscale(100%) brightness(0.45);
  transition: filter 0.35s, color 0.35s;
}
.partner-logo img { height: 34px; width: auto; max-width: 110px; filter: inherit; transition: filter 0.35s; }
.partner-slot:hover .partner-logo { filter: grayscale(0%) brightness(1.1); color: var(--white); }
.partner-cta { text-align: center; margin-top: 1.8rem; }
.partner-cta a {
  font-family: var(--font-cond); font-size: 0.72rem; font-weight: 600;
  color: rgba(255,255,255,0.25); letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.12); padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.partner-cta a:hover { color: var(--red); border-color: var(--red); }

/* Untere Partner-Sektion: Durchlaufleiste (nur Mobile aktiv) */
.partner-marquee { display: none; }
@keyframes pmScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .partner-tier-row { display: none; }          /* statt Zeilenumbruch -> Durchlaufleiste */
  .partner-marquee {
    display: block; overflow: hidden; position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .partner-marquee .pm-inner { display: flex; width: max-content; animation: pmScroll linear infinite; }
  .partner-marquee:hover .pm-inner { animation-play-state: paused; }
  .partner-marquee .pm-group { display: flex; flex-shrink: 0; align-items: center; }
  .partner-marquee .partner-slot { border-right: none; height: 56px; padding: 0 1.3rem; }
  .partner-marquee .pw-logo-img { height: 30px; width: auto; max-width: 120px; object-fit: contain;
    filter: grayscale(100%) brightness(1.6); }
  .partner-marquee .pw-circle {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; color: #fff; font-family: var(--font-disp); font-weight: 700; font-size: 0.85rem;
  }
  .partner-marquee .pw-name {
    margin-left: 0.5rem; font-family: var(--font-cond); font-size: 0.72rem; font-weight: 700;
    color: var(--gray-4); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  }
}


/* ============================================================
   09  NEWS-GRID
============================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
  width: 100%;
}
.nc.nc-featured .nc-img { aspect-ratio: 16/10; }
.nc.nc-featured .nc-title { font-size: 0.9rem; line-height: 1.25; }
.nc.nc-featured .nc-body { padding: 0.8rem; }
.nc-small .nc-img { aspect-ratio: 16/10; }
.nc-small .nc-body { padding: 0.8rem; }
.nc-small .nc-title { font-size: 0.9rem; }

.nc {
  background: var(--white);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
  cursor: pointer;
}
.nc:hover { transform: translateY(-5px); box-shadow: 0 10px 28px rgba(0,0,0,0.13); }

.nc-img {
  aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  position: relative; overflow: hidden;
}
.nc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.4)); }

/* Placeholder-Hintergründe */
.nc-i1 { background: linear-gradient(135deg, #7a0010, #C8102E); }
.nc-i2 { background: linear-gradient(135deg, #0a0a0a, #2a2a2a); }
.nc-i3 { background: linear-gradient(135deg, #6a0010, #4a0008); }
.nc-i4 { background: linear-gradient(135deg, #1a1a1a, #C8102E 200%); }

.nc-badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--red);
  font-family: var(--font-cond); font-size: 0.6rem; font-weight: 700;
  color: var(--white); padding: 2px 8px; letter-spacing: 0.1em; text-transform: uppercase;
}
.nc-body { padding: 0.8rem; }
.nc-cat  { font-family: var(--font-cond); font-size: 0.62rem; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.3rem; }
.nc-title { font-family: var(--font-disp); font-size: 0.9rem; font-weight: 600; color: var(--black); line-height: 1.25; margin-bottom: 0.45rem; }
.nc-link { font-size: 0.7rem; color: var(--gray-3); display: flex; align-items: center; gap: 0.25rem; }
.nc-link::after { content: '›'; color: var(--red); font-size: 1em; }


/* ============================================================
   10  SPIELPLAN / MATCH-CENTER
============================================================ */
.match-section { margin-bottom: 3rem; width: 100%; }

/* Filter-Buttons */
.match-filter { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.mf-btn {
  font-family: var(--font-disp); font-size: 0.72rem; font-weight: 600;
  color: var(--gray-3); background: var(--white);
  border: 1px solid var(--gray-2); padding: 0.4rem 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: all 0.15s; cursor: pointer; border-radius: 1px;
}
.mf-btn:hover         { border-color: var(--black); color: var(--black); }
.mf-btn.active        { background: var(--black); color: var(--white); border-color: var(--black); }

.match-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; background: var(--white); }
.match-table thead th {
  background: var(--black); color: var(--white);
  font-family: var(--font-disp); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  padding: 0.6rem 0.9rem; text-align: left;
}
.match-table tbody tr { border-bottom: 1px solid var(--gray-1); transition: background 0.15s; }
.match-table tbody tr:hover { background: rgba(200,16,46,0.04); }
.match-table tbody tr.upcoming-next { border-left: 3px solid var(--red); }
.match-table td { padding: 0.65rem 0.9rem; vertical-align: middle; }

.td-date  { font-family: var(--font-disp); font-weight: 600; white-space: nowrap; font-size: 0.82rem; }
.td-time  { color: var(--gray-3); font-size: 0.78rem; }
.td-venue { color: var(--gray-3); font-size: 0.78rem; }

.team-chip  { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 500; }
.chip-icon  {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-size: 0.5rem; font-weight: 700;
  color: var(--white); flex-shrink: 0;
}
.ci-h { background: var(--red); }
.ci-d { background: #8B0000; }
.ci-y { background: var(--black-3); }

.badge-result { display: inline-block; font-family: var(--font-disp); font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 1px; }
.br-w { background: #145a22; color: #fff; }
.br-l { background: var(--red-dk); color: #fff; }
.br-d { background: #7a6200; color: #fff; }

/* handball.net Widget Container */
.widget-hn-wrapper {
  background: var(--white);
  border: 1px solid var(--gray-1);
  border-top: 3px solid var(--red);
  padding: 1rem;
  margin-top: 1.5rem;
}
.widget-hn-label {
  font-family: var(--font-disp); font-size: 0.82rem; font-weight: 600;
  color: var(--black); text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.5rem;
}
.widget-hn-label span { font-size: 0.65rem; color: var(--gray-3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.widget-hn-iframe { width: 100%; border: none; min-height: 300px; display: block; }

/* handball.net Placeholder */
.hn-placeholder {
  background: var(--gray-1);
  padding: 1.5rem 2rem;
  text-align: center;
  font-family: var(--font-cond);
  font-size: 0.82rem;
  color: var(--gray-3);
  letter-spacing: 0.06em;
}
.hn-placeholder small {
  font-size: 0.68rem;
  margin-top: 0.4rem;
  display: block;
  color: var(--gray-2);
}


/* ============================================================
   11  TEAM-SEKTION (Kader, Trainer, Tabs)
============================================================ */
.teams-section { margin-bottom: 3rem; width: 100%; }

/* Tab-Leiste */
.team-tabs {
  display: flex; gap: 0;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  border-bottom: 2px solid var(--gray-1);
  background: var(--white);
}
.team-tab {
  font-family: var(--font-disp); font-size: 0.8rem; font-weight: 600;
  color: var(--gray-3); padding: 0.65rem 1.3rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; background: transparent;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.team-tab:hover  { color: var(--black); background: var(--gray-0, #f7f7f7); }
.team-tab.active { color: var(--white); background: var(--black); border-bottom-color: var(--red); }

.team-panel        { display: none; }
.team-panel.active { display: block; }

/* Team-Header-Balken */
.team-header-bar {
  background: var(--black);
  padding: 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
  margin-bottom: 1.5rem;
  position: relative; overflow: hidden;
}
.team-header-bar::before {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 200px;
  background: linear-gradient(to left, rgba(200,16,46,0.15), transparent);
}
.thb-badge {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(200,16,46,0.15); border: 2px solid rgba(200,16,46,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-size: 1.1rem; font-weight: 700; color: var(--red);
  flex-shrink: 0;
}
.thb-name   { font-family: var(--font-disp); font-size: 1.5rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.2rem; }
.thb-league { font-family: var(--font-cond); font-size: 0.8rem; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-transform: uppercase; }
.thb-stats  { display: flex; gap: 1.5rem; margin-left: auto; padding-right: 1rem; }
.thb-stat-num { font-family: var(--font-disp); font-size: 1.6rem; font-weight: 700; color: var(--white); line-height: 1; }
.thb-stat-lbl { font-family: var(--font-cond); font-size: 0.6rem; color: rgba(255,255,255,0.35); letter-spacing: 0.1em; text-transform: uppercase; }

/* Trainer */
.trainer-row { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; margin-bottom: 1.5rem; }
.trainer-card {
  background: var(--white); border: 1px solid var(--gray-1);
  display: flex; align-items: center; gap: 1rem; padding: 1rem;
  transition: box-shadow 0.2s; border-top: 3px solid var(--black);
}
.trainer-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.09); }
.tc-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: var(--black);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-size: 1.1rem; font-weight: 700; color: var(--white); flex-shrink: 0;
}
.tc-role  { font-family: var(--font-cond); font-size: 0.62rem; font-weight: 600; color: var(--red); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2px; }
.tc-name  { font-family: var(--font-disp); font-size: 1rem; font-weight: 600; color: var(--black); line-height: 1.2; }
.tc-club  { font-size: 0.72rem; color: var(--gray-3); margin-top: 2px; }

/* Kader-Grid */
.kader-title { font-family: var(--font-cond); font-size: 0.75rem; font-weight: 700; color: var(--gray-3); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.75rem; }
.kader-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.85rem; }

.player-card {
  background: var(--white); border: 1px solid var(--gray-1);
  position: relative; overflow: hidden; cursor: pointer;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.player-card:hover             { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.12); }
.player-card:hover .pc-back    { opacity: 1; }
.player-card:hover .pc-front   { opacity: 0; }

.pc-front, .pc-back { transition: opacity 0.3s; }
.pc-back {
  position: absolute; inset: 0;
  background: var(--black);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  opacity: 0; padding: 0.75rem;
}
.pc-stat-row  { display: flex; gap: 0.75rem; }
.pc-stat-n    { font-family: var(--font-disp); font-size: 1.1rem; font-weight: 700; color: var(--red); line-height: 1; text-align: center; }
.pc-stat-l    { font-family: var(--font-cond); font-size: 0.55rem; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.pc-avatar    { width: 100%; aspect-ratio: 3/3.5; background: var(--gray-1); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; position: relative; }
.pc-avatar-inner {
  width: 60px; height: 60px; border-radius: 50%; background: var(--black-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-size: 1.2rem; font-weight: 700; color: var(--white);
  margin-bottom: 8px; position: relative; z-index: 1;
}
.pc-trikot {
  position: absolute; top: 6px; left: 6px;
  background: var(--red); color: var(--white);
  font-family: var(--font-disp); font-size: 0.72rem; font-weight: 700;
  padding: 1px 6px; line-height: 1.5; z-index: 2;
}
.pc-info   { padding: 0.5rem 0.6rem; }
.pc-name   { font-family: var(--font-disp); font-size: 0.82rem; font-weight: 600; color: var(--black); line-height: 1.2; margin-bottom: 2px; }
.pc-pos    { font-family: var(--font-cond); font-size: 0.62rem; color: var(--gray-3); letter-spacing: 0.06em; text-transform: uppercase; }
.pc-soon   { display:inline-block; margin-top: 0.35rem; font-family: var(--font-cond); font-size: 0.58rem; font-weight: 600;
             letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-3); background: var(--gray-1);
             padding: 1px 6px; border-radius: 3px; }
.pc-verein { font-size: 0.6rem; color: var(--red); margin-top: 1px; }

/* Team-Gruppen-Tabs (Herren / Damen / Jugend) */
.team-group-tabs {
  display: flex; gap: 0; margin-bottom: 0;
  border-bottom: 3px solid var(--black);
  flex-wrap: wrap;
}
.tgt {
  font-family: var(--font-disp); font-size: 0.85rem; font-weight: 700;
  color: var(--white); background: var(--gray-3);
  padding: 0.65rem 1.5rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: background 0.2s;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.tgt:hover  { background: var(--black-3); }
.tgt.active { background: var(--black); color: var(--white); }

.team-group        { display: none; }
.team-group.active { display: block; }

/* Team-Tabelle */
.team-table-wrap {
  margin-top: 2rem;
  border-top: 2px solid var(--gray-1);
  padding-top: 1rem;
  background: var(--white);
  border: 1px solid var(--gray-1);
  border-top: 3px solid var(--red);
  overflow: hidden;
}
.team-table-label {
  font-family: var(--font-disp);
  font-size: 0.78rem; font-weight: 600;
  color: var(--gray-4); text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 0.6rem;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.9rem 0.5rem;
  border-bottom: 1px solid var(--gray-1);
  background: var(--gray-0, #fafafa);
}
.team-table-label::before {
  content: ''; display: inline-block;
  width: 16px; height: 2px; background: var(--red);
}
.team-table-wrap .sw-foot {
  font-size: 0.68rem; color: var(--gray-3);
  padding: 0.4rem 0.9rem 0.55rem;
  border-top: 1px solid var(--gray-1);
  background: var(--gray-0, #fafafa);
}

/* team-page-link */
.team-page-link {
  font-family: var(--font-cond); font-size: 0.68rem; font-weight: 600;
  color: rgba(255,255,255,0.4); letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; border: 1px solid rgba(255,255,255,0.15);
  padding: 0.3rem 0.7rem; border-radius: 1px; transition: all 0.15s;
  white-space: nowrap;
}
.team-page-link:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }


/* ============================================================
   12  SCHIEDSRICHTER
============================================================ */
.sr-zone {
  background: var(--black-2);
  clip-path: polygon(0 36px, 100% 0, 100% calc(100% - 36px), 0 100%);
  padding: 5.5rem var(--pad-x) 5.5rem;
  margin: 2.5rem 0;
}
.sr-zone-inner { max-width: var(--max-w); width: 100%; margin: 0 auto; }
.sr-zone .sec-head { border-bottom-color: rgba(255,255,255,0.1); }
.sr-zone .section-title { color: var(--white); }
.sr-zone .sec-more { color: rgba(255,255,255,0.35); }
.sr-zone .sec-more:hover { color: var(--red); opacity: 1; }

/* Schiedsrichter/Spielleiter-Reiter */
.sr-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.sr-tab {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  font-family: var(--font-cond); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.6rem 1.1rem; border-radius: 999px; transition: all 0.15s;
}
.sr-tab:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.sr-tab.active { color: #fff; background: var(--red); border-color: var(--red); }
.sr-empty {
  grid-column: 1 / -1;
  font-family: var(--font-cond); font-size: 0.92rem; color: rgba(255,255,255,0.5);
  padding: 1.5rem; text-align: center;
  border: 1px dashed rgba(255,255,255,0.15); border-radius: 6px;
}

.sr-hero {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--red);
  position: relative; overflow: hidden;
}
.sr-hero::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0; width: 300px;
  background: repeating-linear-gradient(-45deg, rgba(200,16,46,0.03) 0px, rgba(200,16,46,0.03) 1px, transparent 1px, transparent 10px);
}
.sr-hero-title { font-family: var(--font-disp); font-size: 1.6rem; font-weight: 700; color: var(--white); text-transform: uppercase; margin-bottom: 0.4rem; }
.sr-hero-sub   { font-family: var(--font-cond); font-size: 0.9rem; color: rgba(255,255,255,0.4); letter-spacing: 0.08em; }

.sr-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 1.5rem; }
.sr-card {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  padding: 1.2rem; transition: transform 0.2s, box-shadow 0.2s, border-top-color 0.2s;
  cursor: pointer; border-top: 2px solid rgba(255,255,255,0.06);
}
.sr-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); border-top-color: var(--red); }

.sr-card-head  { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.sr-avatar     {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-size: 1rem; font-weight: 700;
  color: var(--white); flex-shrink: 0; background: var(--black);
}
.sr-name       { font-family: var(--font-disp); font-size: 1rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.sr-klasse     { font-family: var(--font-cond); font-size: 0.65rem; color: var(--red); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1px; }
.sr-details    { display: flex; flex-direction: column; gap: 0.3rem; }
.sr-detail-row { display: flex; justify-content: space-between; font-size: 0.75rem; }
.sr-detail-label { color: rgba(255,255,255,0.35); }
.sr-detail-val   { font-weight: 500; color: rgba(255,255,255,0.75); }

.sr-wart {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  padding: 1.2rem; display: flex; align-items: center; gap: 1rem;
}
.sr-wart-badge {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--red); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-size: 1.1rem; font-weight: 700; color: var(--white); flex-shrink: 0;
}
.sr-wart-role    { font-family: var(--font-cond); font-size: 0.65rem; font-weight: 600; color: var(--red); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 2px; }
.sr-wart-name    { font-family: var(--font-disp); font-size: 1.05rem; font-weight: 600; color: var(--white); }
.sr-wart-contact { font-size: 0.75rem; color: rgba(255,255,255,0.4); margin-top: 2px; }


/* ============================================================
   13  SOCIAL WALL (#HTHeckengäu)
============================================================ */
.social-wall {
  padding: 3rem 0;
  background: var(--off-white);
  border-top: 1px solid var(--gray-1);
  width: 100vw;
}
.social-wall-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.social-wall-head {
  text-align: center;
  margin-bottom: 2rem;
}
.social-wall-head .label-red { display: block; margin-bottom: 0.4rem; }
.social-wall-head h2 {
  font-family: var(--font-disp); font-size: 1.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--black);
  margin-bottom: 0.4rem;
}
.social-wall-head p { font-size: 0.85rem; color: var(--gray-3); }

.social-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.75rem; margin-bottom: 1.8rem; }
/* Instagram-Feed (Klick-zu-laden) */
.social-feed { display: block; margin-bottom: 1.8rem; }
.social-feed iframe { width: 100%; border: 0; display: block; border-radius: 8px; }
.social-load { width: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.22); border-radius: 8px; cursor: pointer; font-family: var(--font-cond); color: rgba(255,255,255,.75); }
.social-load:hover { background: rgba(255,255,255,.07); border-color: var(--red); }
.social-load .sl-ic { font-size: 2rem; }
.social-load .sl-cta { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; color: #fff; }
.social-load .sl-note { font-size: .78rem; color: rgba(255,255,255,.5); }

.social-post {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  cursor: pointer;
  background: var(--black-3);
}
.social-post-bg {
  width: 100%; height: 100%;
  transition: transform 0.35s var(--ease-out);
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
}
.social-post:hover .social-post-bg { transform: scale(1.06); }

.social-post-overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.72);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s;
}
.social-post:hover .social-post-overlay { opacity: 1; }

.social-heart {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.social-heart::before {
  content: '♥';
  font-size: 1.4rem;
  color: var(--white);
  filter: drop-shadow(0 0 6px rgba(200,16,46,0.8));
}
.social-post-tag {
  font-family: var(--font-cond); font-size: 0.72rem; font-weight: 600;
  color: rgba(255,255,255,0.85); letter-spacing: 0.08em;
}

/* Placeholder-Farben */
.sp-c1 { background: linear-gradient(135deg, #7a0010, #C8102E); }
.sp-c2 { background: linear-gradient(135deg, #0a0a0a, #1e1e1e); }
.sp-c3 { background: linear-gradient(135deg, #2a0005, #6a0015); }
.sp-c4 { background: linear-gradient(135deg, #1a1a1a, #C8102E 250%); }
.sp-c5 { background: linear-gradient(135deg, #3a0008, #C8102E 180%); }
.sp-c6 { background: linear-gradient(135deg, #0a0a0a, #3a0008); }
.sp-c7 { background: linear-gradient(135deg, #4a0010, #C8102E); }
.sp-c8 { background: linear-gradient(135deg, #1e1e1e, #2a0005); }

.social-wall-cta { text-align: center; }


/* ============================================================
   14  RECRUITING CTA-BANNER
============================================================ */
.cta-banner {
  background: var(--black);
  position: relative; overflow: hidden;
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}
.cta-banner::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 40%;
  width: 3px; background: var(--red);
  transform: skewX(-4deg); opacity: 0.35; pointer-events: none;
}
.cta-main {
  padding: 3rem 2.5rem;
  background: linear-gradient(135deg, rgba(200,16,46,0.08) 0%, transparent 60%);
  border-top: 3px solid var(--red);
  display: flex; flex-direction: column; justify-content: center;
}
.cta-eyebrow { font-family: var(--font-cond); font-size: 0.72rem; font-weight: 600; color: var(--red); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.6rem; }
.cta-title   { font-family: var(--font-disp); font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; margin-bottom: 0.75rem; }
.cta-sub     { font-size: 0.85rem; color: rgba(255,255,255,0.4); line-height: 1.6; max-width: 400px; }
.cta-actions { display: flex; flex-direction: column; }
.cta-block {
  flex: 1; padding: 2.5rem 2rem;
  display: flex; flex-direction: column; justify-content: center;
  border-left: 1px solid rgba(255,255,255,0.05);
  transition: background 0.2s;
}
.cta-block:hover { background: rgba(255,255,255,0.02); }
.cta-block + .cta-block { border-top: 1px solid rgba(255,255,255,0.05); }
.cta-block-icon  { font-family: var(--font-disp); font-size: 2rem; font-weight: 700; color: rgba(200,16,46,0.2); line-height: 1; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.cta-block-title { font-family: var(--font-disp); font-size: 1rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.3rem; }
.cta-block-sub   { font-size: 0.78rem; color: rgba(255,255,255,0.38); margin-bottom: 1rem; line-height: 1.5; }
.cta-block-link  { font-family: var(--font-cond); font-size: 0.78rem; font-weight: 700; color: var(--red); letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.2s; }
.cta-block-link::after { content: '→'; }
.cta-block-link:hover { gap: 0.65rem; }


/* ============================================================
   15  SIDEBAR-WIDGETS
============================================================ */
.widget { background: var(--white); border: 1px solid var(--gray-1); margin-bottom: 1.5rem; overflow: hidden; }
.widget-hd {
  background: var(--black);
  padding: 0.65rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.widget-hd-title { font-family: var(--font-disp); font-size: 0.85rem; font-weight: 600; color: var(--white); text-transform: uppercase; letter-spacing: 0.08em; }
.widget-hd-link  { font-family: var(--font-cond); font-size: 0.65rem; font-weight: 600; color: var(--red); letter-spacing: 0.1em; text-transform: uppercase; transition: opacity 0.2s; }
.widget-hd-link:hover { opacity: 0.7; }

/* Next Game Widget */
.ngw {
  background: linear-gradient(160deg, var(--black) 0%, #200008 100%);
  padding: 1.2rem; margin-bottom: 1.5rem;
  border-top: 3px solid var(--red);
  position: relative; overflow: hidden;
}
.ngw::after {
  content: '';
  position: absolute; bottom: -20px; right: -20px;
  width: 100px; height: 100px; border-radius: 50%;
  border: 20px solid rgba(200,16,46,0.08);
}
.ngw-label  { font-family: var(--font-cond); font-size: 0.65rem; font-weight: 600; color: var(--red); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.ngw-date   { font-family: var(--font-cond); font-size: 0.78rem; color: rgba(255,255,255,0.4); margin-bottom: 0.8rem; }
.ngw-match  { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.75rem; }
.ngw-team   { flex: 1; text-align: center; }
.ngw-badge  {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(200,16,46,0.15); border: 1.5px solid rgba(200,16,46,0.35);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.3rem;
  font-family: var(--font-disp); font-size: 0.65rem; font-weight: 700; color: var(--red);
}
.ngw-tname  { font-family: var(--font-disp); font-size: 0.78rem; font-weight: 600; color: var(--white); line-height: 1.2; }
.ngw-vs     { font-family: var(--font-disp); font-size: 1.3rem; font-weight: 300; color: rgba(255,255,255,0.12); flex-shrink: 0; }
.ngw-venue  { font-size: 0.68rem; color: rgba(255,255,255,0.3); margin-bottom: 1rem; }
.ngw .btn-red { width: 100%; clip-path: none; border-radius: 1px; font-size: 0.75rem; padding: 0.65rem; display: block; }

/* Next-Game Widget: Scoreboard-Stil */
.hng-eyebrow {
  font-family: var(--font-cond); font-size: 0.62rem; font-weight: 700;
  color: var(--red); letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.4rem;
}
.hng-countdown-date {
  font-family: var(--font-disp); font-size: 0.82rem; font-weight: 600;
  color: var(--white); letter-spacing: 0.08em;
  margin-bottom: 1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.hng-teams-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.hng-side { text-align: center; }
.hng-team-logo {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: contain;
  margin: 0 auto 0.4rem;
  display: block;
}
.hng-away-badge {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.4rem;
  font-family: var(--font-disp); font-size: 0.65rem; font-weight: 700;
  color: rgba(255,255,255,0.4);
}
.hng-side-name {
  font-family: var(--font-disp); font-size: 0.72rem; font-weight: 600;
  color: var(--white); line-height: 1.2;
}
.hng-side-tag {
  font-family: var(--font-cond); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.2rem;
}
.home-tag { color: var(--red); }
.away-tag { color: rgba(255,255,255,0.3); }
.hng-divider { text-align: center; }
.hng-vs-big {
  font-family: var(--font-disp); font-size: 1.4rem; font-weight: 700;
  color: rgba(255,255,255,0.15); display: block; line-height: 1;
  margin-bottom: 0.35rem;
}
.hng-last-chip {
  font-family: var(--font-disp); font-size: 0.65rem; font-weight: 700;
  padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}
.hng-last-chip.win  { background: rgba(76,175,125,0.2); color: #4caf7d; border: 1px solid rgba(76,175,125,0.3); }
.hng-last-chip.loss { background: rgba(200,16,46,0.2); color: var(--red); border: 1px solid rgba(200,16,46,0.3); }
.hng-info-row { font-size: 0.68rem; color: rgba(255,255,255,0.3); margin-bottom: 1rem; }
.hng-cta {
  width: 100%; clip-path: none;
  border-radius: 1px; font-size: 0.75rem; padding: 0.65rem;
  text-align: center;
}

/* Tabellen-Widget */
.sw-tabs  { display: flex; border-bottom: 1px solid var(--gray-1); }
.sw-tab   {
  font-family: var(--font-disp); font-size: 0.7rem; font-weight: 600;
  color: var(--gray-3); padding: 0.5rem 0.8rem;
  letter-spacing: 0.07em; text-transform: uppercase; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.sw-tab.active { color: var(--black); border-bottom-color: var(--red); }
.sw-panel        { display: none; }
.sw-panel.active { display: block; }
.sw-table { width: 100%; border-collapse: collapse; font-size: 0.73rem; }
.sw-table th { background: var(--off-white); font-family: var(--font-disp); font-size: 0.6rem; font-weight: 600; color: var(--gray-3); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.6rem; text-align: center; }
.sw-table th:nth-child(2) { text-align: left; }
.sw-table td { padding: 0.45rem 0.6rem; text-align: center; border-bottom: 1px solid var(--gray-1); color: var(--black); }
.sw-table td:first-child  { color: var(--gray-3); font-size: 0.68rem; }
.sw-table td:nth-child(2) { text-align: left; font-weight: 500; }
.sw-table tr:last-child td { border-bottom: none; }
.sw-table tr:hover td { background: rgba(200,16,46,0.04); }
.sw-table tr.my-team td { background: rgba(200,16,46,0.06); }
.sw-table tr.my-team td:nth-child(2) { color: var(--red); font-weight: 700; }
.pts-bold { font-weight: 700; }
.sw-foot  { padding: 0.4rem 0.8rem; font-size: 0.6rem; color: var(--gray-3); border-top: 1px solid var(--gray-1); }

/* Team-Zeilen */
.team-row { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1rem; border-bottom: 1px solid var(--gray-1); transition: background 0.15s; }
.team-row:last-child { border-bottom: none; }
.team-row:hover { background: rgba(200,16,46,0.03); }
.tr-left  { display: flex; align-items: center; gap: 0.7rem; }
.tr-icon  { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-disp); font-size: 0.52rem; font-weight: 700; color: var(--white); flex-shrink: 0; }
.tr-name  { font-family: var(--font-disp); font-size: 0.82rem; font-weight: 500; color: var(--black); }
.tr-venue { font-size: 0.67rem; color: var(--gray-3); margin-top: 1px; }

/* Sidebar-News */
.sn-item   { display: flex; gap: 0.7rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-1); transition: background 0.15s; cursor: pointer; }
.sn-item:last-child { border-bottom: none; }
.sn-item:hover { background: rgba(200,16,46,0.03); }
.sn-thumb  { width: 58px; height: 48px; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.sn-t1 { background: linear-gradient(135deg,#7a0010,#C8102E); }
.sn-t2 { background: linear-gradient(135deg,#0a0a0a,#2a2a2a); }
.sn-t3 { background: linear-gradient(135deg,#4a0008,#7a0010); }
.sn-cat    { font-family: var(--font-cond); font-size: 0.6rem; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; }
.sn-title  { font-family: var(--font-disp); font-size: 0.78rem; font-weight: 500; color: var(--black); line-height: 1.3; }


/* ============================================================
   16  FOOTER
============================================================ */
.site-footer { background: var(--black); color: var(--white); padding: 2.5rem 0 0; width: 100%; }
.footer-inner {
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x) 2.5rem;
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 2.2rem;
}
.footer-logo   { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.footer-box    { width: 44px; height: 44px; background: var(--red); display: flex; align-items: center; justify-content: center; clip-path: polygon(0 0,100% 0,100% 75%,75% 100%,0 100%); font-family: var(--font-disp); font-size: 1.3rem; font-weight: 700; color: var(--white); }
.footer-brand-name { font-family: var(--font-disp); font-size: 0.95rem; font-weight: 700; color: var(--white); letter-spacing: 0.05em; text-transform: uppercase; }
.footer-brand-sub  { font-family: var(--font-cond); font-size: 0.6rem; color: rgba(255,255,255,0.35); letter-spacing: 0.12em; text-transform: uppercase; }
.footer-desc       { font-size: 0.78rem; color: rgba(255,255,255,0.38); line-height: 1.65; margin-bottom: 1rem; }
.footer-stammvereine { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.footer-sv { font-family: var(--font-cond); font-size: 0.6rem; font-weight: 600; color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.12); padding: 2px 8px; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-col-title { font-family: var(--font-disp); font-size: 0.8rem; font-weight: 600; color: var(--white); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.9rem; padding-bottom: 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-col ul li { margin-bottom: 0.45rem; }
.footer-col ul li a { font-size: 0.78rem; color: rgba(255,255,255,0.42); transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--red); }
.footer-col ul li.f-plain { font-size: 0.78rem; color: rgba(255,255,255,0.42); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 1rem var(--pad-x); max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-copy   { font-size: 0.7rem; color: rgba(255,255,255,0.25); }
.footer-social { display: flex; gap: 0.5rem; }
.fsoc { width: 30px; height: 30px; background: rgba(255,255,255,0.06); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: var(--font-disp); font-size: 0.6rem; font-weight: 700; color: rgba(255,255,255,0.4); transition: background 0.2s, color 0.2s; cursor: pointer; }
.fsoc:hover { background: var(--red); color: var(--white); }
.footer-legal  { display: flex; gap: 1rem; }
.footer-legal a { font-size: 0.7rem; color: rgba(255,255,255,0.25); transition: color 0.2s; }
.footer-legal a:hover { color: var(--white); }


/* ============================================================
   17  SUBPAGE-OVERLAY (Verein / SG-Seite)
============================================================ */
.subpage {
  position: fixed; inset: 0; z-index: 2000;
  background: var(--white); overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out);
}
.subpage.open { transform: translateX(0); }

.subpage-bar {
  position: sticky; top: 0; z-index: 10;
  background: var(--black); border-bottom: 2px solid var(--red);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem; height: 60px;
}
.subpage-title { font-family: var(--font-disp); font-size: 1rem; font-weight: 700; color: var(--white); text-transform: uppercase; letter-spacing: 0.08em; }
.subpage-close { font-family: var(--font-disp); font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: center; gap: 0.4rem; cursor: pointer; transition: color 0.2s; padding: 0.4rem 0.8rem; border: 1px solid rgba(255,255,255,0.15); border-radius: 2px; }
.subpage-close:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }
.subpage-inner { max-width: 980px; margin: 0 auto; padding: 3rem 1.5rem; }

/* SG-Organigramm */
.sg-hero-section { background: var(--black); padding: 3rem 2rem; margin-bottom: 3rem; position: relative; overflow: hidden; }
.sg-hero-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(200,16,46,0.18) 0%, transparent 70%); }
.sg-title    { font-family: var(--font-disp); font-size: clamp(2rem,5vw,3.5rem); font-weight: 700; color: var(--white); text-transform: uppercase; text-align: center; margin-bottom: 0.5rem; position: relative; z-index: 1; }
.sg-title span { color: var(--red); }
.sg-subtitle { font-family: var(--font-cond); font-size: 1rem; color: rgba(255,255,255,0.4); letter-spacing: 0.15em; text-transform: uppercase; text-align: center; margin-bottom: 2rem; position: relative; z-index: 1; }
.sg-founding { display: flex; align-items: center; justify-content: center; gap: 2rem; position: relative; z-index: 1; flex-wrap: wrap; }
.sg-founding-num   { font-family: var(--font-disp); font-size: 1.8rem; font-weight: 700; color: var(--white); line-height: 1; text-align: center; }
.sg-founding-label { font-family: var(--font-cond); font-size: 0.65rem; color: rgba(255,255,255,0.35); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px; text-align: center; }
.sg-founding-div   { width: 1px; height: 40px; background: rgba(255,255,255,0.1); }

.sv-card { background: var(--white); border: 1px solid var(--gray-1); border-top: 3px solid var(--black); padding: 1.5rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.sv-emblem { width: 64px; height: 64px; border-radius: 50%; background: var(--off-white); border: 2px solid var(--gray-1); margin: 0 auto 0.8rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-disp); font-size: 1rem; font-weight: 700; color: var(--black); }
.sv-name { font-family: var(--font-disp); font-size: 1rem; font-weight: 700; color: var(--black); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.sv-year { font-family: var(--font-cond); font-size: 0.7rem; color: var(--gray-3); letter-spacing: 0.08em; margin-bottom: 0.8rem; }
.sv-tags { display: flex; justify-content: center; gap: 0.35rem; flex-wrap: wrap; }
.sv-tag  { font-family: var(--font-cond); font-size: 0.58rem; font-weight: 600; color: var(--gray-3); border: 1px solid var(--gray-2); padding: 2px 7px; letter-spacing: 0.06em; text-transform: uppercase; }

.vorstand-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-bottom: 3rem; }
.vorstand-card { background: var(--white); border: 1px solid var(--gray-1); padding: 1.2rem; text-align: center; transition: transform 0.2s, box-shadow 0.2s; }
.vorstand-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.09); }
.vc-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--black); display: flex; align-items: center; justify-content: center; font-family: var(--font-disp); font-size: 1.1rem; font-weight: 700; color: var(--white); margin: 0 auto 0.7rem; }
.vc-role   { font-family: var(--font-cond); font-size: 0.62rem; font-weight: 600; color: var(--red); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 3px; }
.vc-name   { font-family: var(--font-disp); font-size: 0.95rem; font-weight: 600; color: var(--black); }
.vc-club   { font-size: 0.7rem; color: var(--gray-3); margin-top: 2px; }

.why-sg { background: var(--off-white); border: 1px solid var(--gray-1); padding: 2rem; margin-bottom: 3rem; }
.why-sg-title { font-family: var(--font-disp); font-size: 1.2rem; font-weight: 700; color: var(--black); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.2rem; display: flex; align-items: center; gap: 0.7rem; }
.why-sg-title::before { content: ''; width: 3px; height: 1.2em; background: var(--red); }
.why-points { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.why-point  { display: flex; gap: 0.75rem; align-items: flex-start; }
.why-icon   { width: 32px; height: 32px; border-radius: 2px; background: var(--red); display: flex; align-items: center; justify-content: center; color: var(--white); font-family: var(--font-disp); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.why-text-title { font-family: var(--font-disp); font-size: 0.88rem; font-weight: 600; color: var(--black); margin-bottom: 2px; }
.why-text-desc  { font-size: 0.78rem; color: var(--gray-4); line-height: 1.5; }


/* ============================================================
   18  MATCH-DAY-MODE
============================================================ */
.is-matchday {
  animation: matchday-pulse 2s ease-in-out infinite;
}
@keyframes matchday-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,0.0),  0 2px 12px rgba(0,0,0,0.3); }
  50%       { box-shadow: 0 0 0 8px rgba(200,16,46,0.25), 0 2px 20px rgba(200,16,46,0.2); }
}


/* ============================================================
   19  SG-BANNER
============================================================ */
.sg-banner {
  width: 100%;
  background: var(--black);
  border-top: 3px solid var(--red);
  border-bottom: 3px solid var(--red);
  padding: 3rem var(--pad-x);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.sg-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(200,16,46,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.sg-banner-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 3rem;
  position: relative; z-index: 1;
}
.sg-banner-left {
  flex: 1;
  min-width: 0;
}
.sg-banner-label {
  font-family: var(--font-cond);
  font-size: 0.68rem; font-weight: 600;
  color: var(--red); letter-spacing: 0.22em;
  text-transform: uppercase; margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.sg-banner-label::before {
  content: ''; display: inline-block;
  width: 20px; height: 2px; background: var(--red);
}
.sg-banner-title {
  font-family: var(--font-disp);
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 700; color: var(--white);
  text-transform: uppercase; letter-spacing: 0.03em;
  line-height: 0.95; margin-bottom: 0.75rem;
}
.sg-banner-sub {
  font-size: 0.88rem; color: rgba(255,255,255,0.45);
  line-height: 1.6; max-width: 380px;
}

/* Vereine mit + Zeichen */
.sg-banner-clubs {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.sg-club-pill {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.5rem;
}
.sg-club-ring {
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid rgba(200,16,46,0.5);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 8px;
  transition: border-color 0.2s, transform 0.2s;
}
.sg-club-ring img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sg-club-pill:hover .sg-club-ring {
  border-color: var(--red);
  background: rgba(200,16,46,0.18);
}
.sg-club-pill span {
  font-family: var(--font-cond);
  font-size: 0.62rem; font-weight: 600;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.sg-club-plus {
  font-family: var(--font-disp);
  font-size: 1.4rem; font-weight: 300;
  color: rgba(200,16,46,0.4);
  line-height: 1;
  margin-bottom: 1.5rem;
}

.sg-banner-cta { flex-shrink: 0; }
.sg-banner-cta .btn-red {
  white-space: nowrap;
  clip-path: none;
  border-radius: 1px;
  padding: 0.85rem 2rem;
  font-size: 0.78rem;
}


/* ============================================================
   20  JÜNGSTE (E/F/Minis)
============================================================ */
.juengste-section {
  background: var(--off-white);
  padding: 3.5rem var(--pad-x);
  width: 100%;
}
.juengste-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.jt-intro {
  font-family: var(--font-cond); font-size: 0.88rem;
  color: var(--gray-3); letter-spacing: 0.06em;
  margin-bottom: 1.5rem;
}
.juengste-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.jt-main-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.jt-card {
  background: var(--white);
  border: 1px solid var(--gray-1);
  border-top: 3px solid var(--black);
  padding: 1.5rem 1.25rem 1.25rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.jt-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.09); }
.jt-minis { border-top-color: var(--red); }
.jt-icon {
  font-family: var(--font-disp);
  font-size: 2.2rem; font-weight: 700;
  color: var(--red); line-height: 1;
  margin-bottom: 0.5rem;
}
.jt-name {
  font-family: var(--font-disp);
  font-size: 1.1rem; font-weight: 700;
  color: var(--black); text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 0.2rem;
}
.jt-age {
  font-family: var(--font-cond);
  font-size: 0.68rem; font-weight: 600;
  color: var(--red); letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 0.75rem;
}
.jt-desc {
  font-size: 0.82rem; color: var(--gray-4);
  line-height: 1.55; margin-bottom: 0.75rem;
}
.jt-venue { font-size: 0.75rem; color: var(--gray-3); }

/* Jüngste: anklickbare Karten (Button oder Link) */
.jt-card.jt-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  border-radius: 0;
}
.jt-card.jt-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  border-top-color: var(--red);
}
.jt-card.jt-link .jt-icon { transition: transform 0.2s; }
.jt-card.jt-link:hover .jt-icon { transform: scale(1.1); }

/* Stammverein-Block */
.jt-verein-block { margin-bottom: 2.5rem; }
.jt-verein-block + .jt-verein-block {
  border-top: 1px solid var(--gray-1);
  padding-top: 2rem;
}
.jt-verein-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.jt-verein-logo {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gray-1);
}
.jt-verein-name {
  font-family: var(--font-disp);
  font-size: 1rem; font-weight: 700;
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.jt-vereine-logos {
  display: flex; gap: 0.4rem; margin-top: 0.75rem;
  padding-top: 0.75rem; border-top: 1px solid var(--gray-1);
  flex-wrap: wrap;
}
.jt-vereine-logos img {
  width: 26px; height: 26px;
  object-fit: contain; border-radius: 3px;
  opacity: 0.7;
}

.juengste-cta {
  display: flex; align-items: center;
  gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-1);
}
.juengste-cta p {
  font-size: 0.88rem; color: var(--gray-4);
  margin: 0; flex: 1;
}

/* Kinderhandball: Verweis-Kacheln zu den Stammvereinen */
.jt-club-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 1.75rem; }
.jt-club-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.6rem; padding: 1.75rem 1.25rem;
  background: var(--white); border: 1px solid var(--gray-1); border-top: 3px solid var(--red);
  text-decoration: none; transition: transform 0.15s, box-shadow 0.15s;
}
.jt-club-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.1); }
.jt-club-card img { width: 72px; height: 72px; object-fit: contain; }
.jt-club-name { font-family: var(--font-disp); font-weight: 700; font-size: 1.05rem; color: var(--black); text-transform: uppercase; }
.jt-club-link { font-family: var(--font-cond); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); }
@media (max-width: 700px) { .jt-club-grid { grid-template-columns: 1fr; } }


/* ============================================================
   21  TERMINE
============================================================ */
.termine-section { margin-bottom: 3rem; }
.termine-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--gray-1);
  background: var(--white);
  overflow: hidden;
}
.termin-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--gray-1);
  cursor: pointer;
  transition: background 0.15s;
}
.termin-card:last-child { border-bottom: none; }
.termin-card:hover { background: rgba(200,16,46,0.03); }
.termin-highlight { border-left: 3px solid var(--red); }

.termin-date-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  flex-shrink: 0;
}
.termin-day {
  font-family: var(--font-disp);
  font-size: 1.5rem; font-weight: 700;
  color: var(--black); line-height: 1;
}
.termin-month {
  font-family: var(--font-cond);
  font-size: 0.6rem; font-weight: 700;
  color: var(--red); letter-spacing: 0.15em;
  text-transform: uppercase;
}
.termin-body { flex: 1; min-width: 0; }
.termin-badge {
  display: inline-block;
  font-family: var(--font-cond); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 7px; margin-bottom: 0.2rem;
  background: var(--black); color: var(--white);
}
.termin-badge-event  { background: #7a4500; }
.termin-badge-jugend { background: #005a8e; }
.termin-badge-sr     { background: #3a3a3a; }
/* Spiele: Heim / Auswärts / Ergebnis / Live farblich unterscheiden */
.termin-badge.tb-heim { background: var(--red); }
.termin-badge.tb-aus  { background: #4a4a4a; }
.termin-badge.tb-erg  { background: #1d6b34; }
.termin-badge.tb-live { background: #ff2d2d; }
.termin-title {
  font-family: var(--font-disp);
  font-size: 0.88rem; font-weight: 600;
  color: var(--black); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.termin-meta { font-size: 0.72rem; color: var(--gray-3); margin-top: 0.15rem; }
.termin-arrow {
  font-family: var(--font-disp);
  font-size: 1.2rem; color: var(--gray-2);
  flex-shrink: 0; transition: color 0.15s;
}
.termin-card:hover .termin-arrow { color: var(--red); }


/* ============================================================
   22  GALERIE + LIGHTBOX
============================================================ */
.galerie-section {
  background: var(--black);
  padding: 4rem 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.galerie-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  box-sizing: border-box;
  overflow: hidden;
}
.galerie-inner .sec-head .section-title { color: var(--white); }
.galerie-inner .sec-head .sec-more { color: var(--red); }

.galerie-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 4px;
  margin-top: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.galerie-featured {
  grid-column: span 2;
  grid-row: span 2;
}
.galerie-item {
  position: relative; overflow: hidden; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.galerie-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s var(--ease-out);
}
.galerie-item:hover img  { transform: scale(1.05); }
.galerie-placeholder {
  font-size: 3rem; opacity: 0.4;
  transition: transform 0.3s, opacity 0.3s;
}
.galerie-item:hover .galerie-placeholder { transform: scale(1.15); opacity: 0.7; }
.galerie-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.3s;
  display: flex; align-items: flex-end; padding: 0.8rem 1rem;
}
.galerie-item:hover .galerie-overlay { opacity: 1; }
.galerie-titel {
  font-family: var(--font-disp); font-size: 0.82rem; font-weight: 600;
  color: var(--white); text-transform: uppercase; letter-spacing: 0.06em;
}

/* Lightbox */
#lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,0.95);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 1rem;
}
#lightbox.open { display: flex; }
.lb-img {
  width: min(80vw, 900px); height: min(60vh, 600px);
  background: #222; display: flex; align-items: center; justify-content: center;
  font-size: 5rem; position: relative; overflow: hidden;
}
.lb-img img { width: 100%; height: 100%; object-fit: contain; }
.lb-titel {
  font-family: var(--font-disp); font-size: 1.1rem; font-weight: 600;
  color: rgba(255,255,255,0.8); text-transform: uppercase; letter-spacing: 0.08em;
}
.lb-close {
  position: fixed; top: 1.5rem; right: 1.5rem;
  font-size: 1.5rem; color: rgba(255,255,255,0.6); background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  transition: color 0.2s;
}
.lb-close:hover { color: var(--white); }
.lb-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  font-size: 3rem; font-weight: 300; color: rgba(255,255,255,0.5);
  background: none; border: none; cursor: pointer; padding: 0 1rem;
  transition: color 0.2s;
}
.lb-nav:hover { color: var(--white); }
.lb-prev { left: 0.5rem; }
.lb-next { right: 0.5rem; }


/* ============================================================
   23  NEWS-OVERLAY / ARCHIV
============================================================ */
.news-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.nc-hero-card {
  grid-column: span 2;
  grid-row: span 2;
}
.nc-hero-card .nc-img { aspect-ratio: unset; height: 100%; min-height: 300px; }
.nc-hero-card .nc-title { font-size: 1.1rem; line-height: 1.2; }
.nc-hero-card .nc-body { padding: 1.1rem; }
.nc-excerpt {
  font-size: 0.82rem; color: var(--gray-4);
  line-height: 1.55; margin-bottom: 0.5rem;
}
.nc-date {
  font-family: var(--font-cond);
  font-size: 0.65rem; color: var(--gray-3);
  letter-spacing: 0.08em; margin-bottom: 0.3rem;
}

/* Filter + Pagination */
.nf-btn {
  font-family: var(--font-disp);
  font-size: 0.72rem; font-weight: 600;
  color: var(--gray-3); background: var(--white);
  border: 1px solid var(--gray-2); padding: 0.4rem 1rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: all 0.15s; cursor: pointer; border-radius: 1px;
}
.nf-btn:hover  { border-color: var(--black); color: var(--black); }
.nf-btn.active { background: var(--black); color: var(--white); border-color: var(--black); }

.np-btn {
  font-family: var(--font-disp); font-size: 0.78rem; font-weight: 600;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-2); background: var(--white);
  color: var(--gray-3); cursor: pointer; transition: all 0.15s;
}
.np-btn:hover  { border-color: var(--black); color: var(--black); }
.np-btn.active { background: var(--red); color: var(--white); border-color: var(--red); }


/* ============================================================
   RECRUIT-BANNER — "Nachwuchs gesucht" / "Werde Teil der Familie"
============================================================ */
.recruit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 2.5rem 0;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: 16px;
  background: linear-gradient(135deg, #1c1c1c 0%, #131313 55%, #1a0e11 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid var(--red);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.recruit-banner .rb-text { flex: 1 1 340px; min-width: 0; }
.recruit-banner .rb-eyebrow {
  font-family: var(--font-cond);
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--red-lt);
  margin-bottom: 0.5rem;
}
.recruit-banner .rb-title {
  font-family: var(--font-disp);
  font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700;
  line-height: 1.08; text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.recruit-banner .rb-sub {
  font-family: var(--font-cond);
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  line-height: 1.5;
  color: rgba(255,255,255,0.66);
  max-width: 60ch;
}
.recruit-banner .rb-actions {
  display: flex; align-items: center; gap: 0.75rem;
  flex-wrap: wrap; flex-shrink: 0;
}
@media (max-width: 768px) {
  .recruit-banner { flex-direction: column; align-items: flex-start; text-align: left; gap: 1.4rem; }
  .recruit-banner .rb-actions { width: 100%; }
  .recruit-banner .rb-actions .btn-red,
  .recruit-banner .rb-actions .btn-ghost { flex: 1 1 auto; text-align: center; justify-content: center; }
}
/* Recruit-Banner: Buttons direkt am Text statt per space-between nach ganz rechts */
#sr-cta, #kontakt { justify-content: flex-start; gap: 1.5rem; }
#sr-cta .rb-text, #kontakt .rb-text { flex: 0 1 auto; }


/* ============================================================
   24  MATCHDAY-BAR
============================================================ */
.matchday-bar {
  width: 100%;
  background: var(--black);
  border-top: 3px solid var(--red);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0.85rem var(--pad-x);
  /* Live-Bar bleibt beim Scrollen unter Ticker+Navbar stehen */
  position: sticky;
  top: 114px;   /* Ticker(42) + Navbar(72) */
  z-index: 40;
}
@media (max-width: 768px) { .matchday-bar { top: 96px; } }   /* Ticker(36) + Navbar(60) */
.matchday-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Live-Bar (nur bei laufenden Spielen) */
.livebar-inner { max-width: var(--max-w); margin: 0 auto; }
.lb-head { display:flex; align-items:center; gap:.5rem; font-family:var(--font-cond); font-size:.62rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:#ffb3bd; padding:.5rem 0 .35rem; }
.lb-dot { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(200,16,46,.55);
  animation:tLivePulse 1.25s infinite; flex-shrink:0; }
.lb-game { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:.4rem 1rem; padding:.5rem 0;
  border-top:1px solid rgba(255,255,255,.07); cursor:pointer; }
.lb-game:first-of-type { border-top:none; }
.lb-game:hover { background:rgba(255,255,255,.03); }
.lb-team { font-family:var(--font-disp); font-weight:700; text-transform:uppercase; color:#fff; font-size:.95rem; line-height:1.1; }
.lb-opp { color:rgba(255,255,255,.55); font-weight:600; }
.lb-meta { display:block; font-family:var(--font-cond); font-size:.72rem; color:rgba(255,255,255,.5); text-transform:none; letter-spacing:0; margin-top:2px; }
.lb-score { font-family:var(--font-disp); font-weight:700; font-size:1.4rem; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; }
.lb-sep { color:rgba(255,255,255,.5); margin:0 .1em; }
.lb-chip { font-family:var(--font-cond); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff;
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:.25rem .6rem; white-space:nowrap; }
.lb-score.lb-goal { animation: lbGoal .9s ease; }
@keyframes lbGoal { 0%{ transform:scale(1); color:#fff } 22%{ transform:scale(1.35); color:#ffd23f } 100%{ transform:scale(1); color:#fff } }
@media (prefers-reduced-motion:reduce){ .lb-score.lb-goal{ animation:none } }
/* Karussell: immer genau EIN Live-Spiel sichtbar, ‹ › in der Kopfzeile (Höhe bleibt konstant). */
.lb-topline { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.lb-topline .lb-head { padding-bottom:0; }
.lb-stage { min-width:0; }
.lb-stage .lb-game { border-top:none; }
.lb-stage .lb-team { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.lb-pager { display:flex; align-items:center; gap:.35rem; flex-shrink:0; position:static; }
.lb-arrow { -webkit-appearance:none; appearance:none; cursor:pointer; width:30px; height:30px; line-height:1;
  border-radius:50%; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.06); color:#fff;
  font-size:1.2rem; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0; transition:background .15s; }
.lb-arrow:hover { background:rgba(255,255,255,.16); }
.lb-arrow:active { transform:scale(.92); }
.lb-count { font-family:var(--font-cond); font-size:.7rem; font-weight:700; color:rgba(255,255,255,.6);
  font-variant-numeric:tabular-nums; min-width:2.4em; text-align:center; }
@media (max-width:560px){ .lb-chip{ display:none; } .lb-score{ font-size:1.2rem; } .lb-arrow{ width:34px; height:34px; } }
.mdb-label {
  font-family: var(--font-cond); font-size: 0.65rem; font-weight: 700;
  color: var(--red); letter-spacing: 0.2em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.35rem;
  flex-shrink: 0;
}
.mdb-date {
  font-family: var(--font-disp); font-size: 0.78rem; font-weight: 600;
  color: rgba(255,255,255,0.7); letter-spacing: 0.06em;
  flex-shrink: 0;
}
.mdb-match {
  display: flex; align-items: center; gap: 1rem;
  flex: 1; justify-content: center;
}
.mdb-team { display: flex; align-items: center; gap: 0.5rem; }
.mdb-logo {
  width: 32px; height: 32px;
  border-radius: 50%; object-fit: contain;
  flex-shrink: 0;
}
.mdb-away-crest {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.04);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-size: 0.55rem; font-weight: 700;
  color: rgba(255,255,255,0.4); flex-shrink: 0;
}
.mdb-name {
  font-family: var(--font-disp); font-size: 0.85rem; font-weight: 700;
  color: var(--white); white-space: nowrap;
}
.mdb-center { text-align: center; flex-shrink: 0; }
.mdb-vs {
  font-family: var(--font-disp); font-size: 1rem; font-weight: 700;
  color: var(--red); display: block; line-height: 1;
}
.mdb-chip {
  font-family: var(--font-disp); font-size: 0.6rem; font-weight: 700;
  padding: 2px 8px; border-radius: 2px; white-space: nowrap;
  display: inline-block; margin-top: 3px;
}
.mdb-chip.win  { background: rgba(76,175,125,0.2); color: #4caf7d; border: 1px solid rgba(76,175,125,0.3); }
.mdb-chip.loss { background: rgba(200,16,46,0.2);  color: var(--red); border: 1px solid rgba(200,16,46,0.3); }
.mdb-venue {
  font-size: 0.7rem; color: rgba(255,255,255,0.35);
  flex-shrink: 0; white-space: nowrap;
}
.mdb-btn {
  clip-path: none; border-radius: 1px;
  padding: 0.5rem 1.25rem; font-size: 0.72rem;
  flex-shrink: 0; margin-left: auto;
}


/* ============================================================
   25  HERO SLIDESHOW
============================================================ */
.hero-slideshow {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 55%;
  z-index: 2;
  overflow: hidden;
}

/* Verlauf links: Text lesbar */
.hero-slideshow::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--black) 0%, rgba(10,10,10,0.55) 30%, transparent 60%);
  z-index: 3;
  pointer-events: none;
}
/* Verlauf unten */
.hero-slideshow::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(to top, var(--black) 0%, transparent 100%);
  z-index: 3;
  pointer-events: none;
}

/* Slides */
.hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease-in-out;
}
.hs-slide.active  { opacity: 1; z-index: 1; }
.hs-slide.leaving { opacity: 0; z-index: 0; }
.hs-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Pfeil-Buttons */
.hs-arrow {
  position: absolute; top: 50%; z-index: 10;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  font-size: 1.6rem; font-weight: 300;
  width: 36px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  backdrop-filter: blur(4px);
  padding: 0; line-height: 1;
}
.hs-arrow:hover {
  background: rgba(200,16,46,0.6);
  color: #fff;
  border-color: rgba(200,16,46,0.8);
}
.hs-prev { left: 8px; }
.hs-next { right: 8px; }

/* Dot-Indikatoren */
.hs-dots {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 6px;
  z-index: 10;
}
.hs-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  border: none; cursor: pointer;
  transition: background 0.25s, transform 0.25s;
  padding: 0;
}
.hs-dot.active {
  background: var(--red);
  transform: scale(1.3);
}
.hs-dot:hover { background: rgba(255,255,255,0.7); }


/* ============================================================
   26  LAYOUT: CONTENT + SPONSOR-LEISTE
============================================================ */
/* Haupt-Content-Bereich */
.site-main {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
  padding: 2rem var(--pad-x);
  box-sizing: border-box;
}
.content-col { width: 100%; }

/* Sidebar als horizontale Widget-Zeile */
.sidebar-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 3rem;
}
.sidebar-col .ngw,
.sidebar-col .widget {
  width: 100%;
  box-sizing: border-box;
}

/* Puls-Dot (Live-Indikator) */
.pulse-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  animation: pulse-anim 1.5s ease infinite;
}
@keyframes pulse-anim {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* Layout: Content-Bereich + vertikale Sponsor-Leiste */
.page-with-sponsors {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 0;
  width: 100%;
  max-width: 100%;
  align-items: start;
}
/* Sponsoren-Bereich ausgeblendet (Soft-Launch) -> Inhalt nimmt die volle Breite */
body.bereich-off-sponsoren .page-with-sponsors { grid-template-columns: 1fr; }

/* Trainingszeiten auf der Startseite */
.tzh-court { width: 100%; height: 220px; border-radius: 12px; overflow: hidden; margin: 0 0 1.5rem;
  border: 1px solid var(--gray-1); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.tzh-court img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
@media (max-width: 600px) { .tzh-court { height: 150px; } }

/* Shop: Nav-Link + Fanshop-Teaser */
.nav-shop { color: var(--red-lt) !important; font-weight: 700; }
.shop-teaser { background: linear-gradient(135deg,#1b1b1b 0%,#2a0d12 100%); color: #fff; padding: 2.4rem var(--pad-x); }
.shop-teaser-inner { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.shop-teaser-eyebrow { font-family: var(--font-cond); font-weight: 700; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red-lt); margin-bottom: .4rem; }
.shop-teaser h2 { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; font-size: clamp(1.3rem,3vw,1.9rem); margin: 0 0 .3rem; line-height: 1.05; }
.shop-teaser p { color: rgba(255,255,255,.7); margin: 0; font-size: .98rem; }
.shop-teaser-btn { background: var(--red); color: #fff; font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .9rem 1.6rem; border-radius: 6px; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: background .15s, transform .15s; }
.shop-teaser-btn:hover { background: var(--red-dk); transform: translateY(-2px); }
@media (max-width: 600px) { .shop-teaser-inner { flex-direction: column; align-items: flex-start; } .shop-teaser-btn { width: 100%; text-align: center; } }
.tzh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.tzh-team { background: var(--white); border: 1px solid var(--gray-1); border-top: 3px solid var(--red); padding: 1rem 1.1rem; }
.tzh-team h3 { font-family: var(--font-disp); font-size: 1rem; margin: 0 0 .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--black); }
.tzh-item { padding: .45rem 0; border-bottom: 1px solid var(--gray-1); }
.tzh-item:last-child { border-bottom: none; }
.tzh-line { display: flex; justify-content: space-between; gap: .6rem; font-family: var(--font-cond); font-size: .9rem; }
.tzh-day { font-weight: 600; color: var(--black); }
.tzh-time { color: var(--red); font-weight: 600; white-space: nowrap; }
.tzh-hall { font-family: var(--font-cond); font-size: .78rem; color: var(--gray-3); margin-top: .15rem; }

/* Unsere SG — inline auf der Startseite (ehemals Overlay) */
.sg-inline { padding: 2.5rem var(--pad-x) 3rem; background: var(--off-white); border-top: 1px solid var(--gray-1); }
.sg-inline .subpage-inner { max-width: var(--max-w); margin: 0 auto; }
/* Anker-Sprung nicht unter der fixen Navbar verstecken */
:target { scroll-margin-top: 120px; }

/* ── Dialog-System (js/dialog.js) ───────────────────────── */
.hth-dialog {
  border: none; border-radius: 16px; padding: 0; width: min(92vw, 640px);
  max-height: 88vh; overflow: hidden; background: var(--white);
  box-shadow: 0 30px 80px rgba(0,0,0,.45); position: fixed; inset: 0; margin: auto;
}
.hth-dialog.wide { width: min(94vw, 920px); }
.hth-dialog::backdrop { background: rgba(10,10,12,.6); backdrop-filter: blur(3px); }
/* SG-Inhalt im Dialog: Innenabstand, damit es nicht am Rand klebt */
.hth-dialog .subpage-inner { max-width: none; padding: 1.5rem 1.5rem 2rem; }
.hth-dialog[open] { animation: hthDlgIn .18s ease; }
@keyframes hthDlgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hth-dialog-body { max-height: 88vh; overflow-y: auto; }
.hth-dialog-close {
  position: absolute; top: 10px; right: 12px; z-index: 5;
  width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.45); color: #fff; font-size: 1.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.hth-dialog-close:hover { background: var(--red); }

/* News-Dialog */
.nd-hero { aspect-ratio: 16/9; background: var(--gray-1); position: relative; display: flex; align-items: center; justify-content: center; }
.nd-hero img { width: 100%; height: 100%; object-fit: cover; }
.nd-hero .nd-badge { position: absolute; left: 14px; bottom: 14px; background: var(--red); color: #fff;
  font-family: var(--font-cond); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .7rem; }
.nd-content { padding: 1.6rem 1.7rem 2rem; }
.nd-meta { font-family: var(--font-cond); font-size: .78rem; color: var(--gray-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .5rem; }
.nd-title { font-family: var(--font-disp); font-size: clamp(1.3rem,3.5vw,1.9rem); font-weight: 700; color: var(--black); line-height: 1.15; margin-bottom: .9rem; }
.nd-text { font-size: .98rem; color: var(--gray-4); line-height: 1.7; white-space: pre-line; }

/* ── Teams: Kacheln ─────────────────────────────────────── */
.team-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.team-card { display:flex; align-items:center; gap:1rem; text-align:left; cursor:pointer; width:100%;
  background:var(--white); border:1px solid var(--gray-1); border-left:4px solid var(--tc,#C8102E);
  padding:1rem 1.1rem; font:inherit; transition:transform .12s, box-shadow .12s; }
.team-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.team-card-badge { width:48px; height:48px; flex-shrink:0; border-radius:50%; background:var(--tc,#C8102E); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-weight:700; font-size:.95rem; }
.team-card-info { display:flex; flex-direction:column; min-width:0; flex:1; }
.team-card-name { font-family:var(--font-disp); font-weight:700; color:var(--black); text-transform:uppercase; letter-spacing:.02em; }
.team-card-liga { font-family:var(--font-cond); font-size:.82rem; color:var(--gray-3); }
.team-card-arrow { color:var(--tc,#C8102E); font-size:1.4rem; font-weight:700; }

/* ── Team-Dialog ────────────────────────────────────────── */
.td-head { display:flex; align-items:center; gap:1rem; padding:1.6rem 1.7rem; color:#fff;
  background:linear-gradient(135deg, var(--tc,#C8102E), rgba(0,0,0,.55)); }
.td-badge { width:60px; height:60px; flex-shrink:0; border-radius:50%; background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-weight:700; font-size:1.2rem; }
.td-name { font-family:var(--font-disp); font-weight:700; font-size:1.5rem; text-transform:uppercase; line-height:1; }
.td-liga { font-family:var(--font-cond); opacity:.85; margin-top:.3rem; }
.td-content { padding:1.2rem 1.7rem 2rem; }
.td-sec { font-family:var(--font-disp); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--gray-3);
  margin:1.4rem 0 .8rem; display:flex; align-items:center; gap:.5rem; }
.td-sec:first-child { margin-top:0; }
.td-sec::before { content:''; width:16px; height:2px; background:var(--red); display:inline-block; }

/* Reiter im Team-Dialog */
.td-tabs { display:flex; gap:2px; border-bottom:2px solid var(--gray-1); margin-bottom:1rem; overflow-x:auto; scrollbar-width:none; }
.td-tabs::-webkit-scrollbar { display:none; }
.td-tab { flex-shrink:0; background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px;
  padding:.6rem .85rem; font-family:var(--font-cond); font-weight:700; font-size:.82rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--gray-3); cursor:pointer; white-space:nowrap; }
.td-tab:hover { color:var(--black); }
.td-tab.active { color:var(--red); border-bottom-color:var(--red); }
/* Kopf (Team-Name + Reiter) beim Scrollen im Dialog stehen lassen */
.hth-dialog .td-stickyhead { position: sticky; top: 0; z-index: 4; background: var(--white); }
.td-stickyhead .td-tabs { padding: 0 1.7rem; margin-bottom: 0; background: var(--white); }
.td-panel { display:none; }
.td-panel.active { display:block; }
.td-spiele { display:grid; gap:.5rem; }
.td-empty { font-family:var(--font-cond); color:var(--gray-3); font-size:.85rem; }
.td-players { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.7rem; }
.td-player { display:flex; flex-direction:column; align-items:center; gap:.2rem; text-align:center; cursor:pointer;
  background:var(--off-white); border:1px solid var(--gray-1); padding:.9rem .5rem; font:inherit; transition:.12s; position:relative; }
.td-player:hover { border-color:var(--red); transform:translateY(-2px); }
.td-player-av { width:46px; height:46px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-disp); font-weight:700; overflow:hidden; }
.td-player-av img { width:100%; height:100%; object-fit:cover; }
.td-player-nr { position:absolute; top:.4rem; right:.5rem; font-family:var(--font-disp); font-weight:700; color:var(--gray-2); font-size:.8rem; }
.td-player-name { font-family:var(--font-cond); font-weight:600; font-size:.85rem; color:var(--black); margin-top:.3rem; }
.td-player-pos { font-family:var(--font-cond); font-size:.72rem; color:var(--gray-3); }

/* ── Spieler-Detail (im selben Dialog) ──────────────────── */
.td-backbar { padding:.7rem 1rem; border-bottom:1px solid var(--gray-1); }
.td-back { background:none; border:none; cursor:pointer; font:inherit; font-family:var(--font-cond); font-weight:600; color:var(--red); }
.pd-hero { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:2rem; color:#fff;
  background:linear-gradient(135deg, var(--tc,#C8102E), rgba(0,0,0,.55)); }
.pd-av { width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.15); border:3px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-disp); font-weight:700; font-size:2.2rem; overflow:hidden; }
.pd-av img { width:100%; height:100%; object-fit:cover; }
.pd-soon { font-family:var(--font-cond); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); padding:2px 10px; border-radius:20px; }
.pd-nr { font-family:var(--font-disp); font-weight:700; font-size:1.1rem; opacity:.9; }
.pd-content { padding:1.4rem 1.7rem 2rem; text-align:center; }
.pd-name { font-family:var(--font-disp); font-weight:700; font-size:1.6rem; color:var(--black); text-transform:uppercase; }
.pd-meta { font-family:var(--font-cond); color:var(--red); font-weight:600; margin-top:.3rem; }
.pd-team { font-family:var(--font-cond); color:var(--gray-3); margin-top:.2rem; }

/* Handball Kids Dialog (kd-) */
.kd-hero { display:flex; align-items:center; gap:1.25rem; padding:2rem 1.7rem; color:#fff;
  background:linear-gradient(135deg, var(--red), rgba(0,0,0,.6)); }
.kd-badge { width:88px; height:88px; border-radius:50%; flex-shrink:0; background:rgba(255,255,255,.15);
  border:3px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-disp); font-weight:700; font-size:2.1rem; }
.kd-title { font-family:var(--font-disp); font-weight:700; font-size:1.7rem; text-transform:uppercase; line-height:1; }
.kd-age { font-family:var(--font-cond); color:rgba(255,255,255,.75); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; font-size:.78rem; margin-top:.4rem; }
.kd-content { padding:1.5rem 1.7rem 2rem; }
.kd-desc { font-size:.92rem; color:var(--gray-4); line-height:1.6; margin-bottom:1.4rem; }
.kd-label { font-family:var(--font-cond); font-size:.72rem; font-weight:700; color:var(--red);
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.kd-label::before { content:''; width:18px; height:2px; background:var(--red); display:inline-block; }
.kd-clubs { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.kd-club { background:var(--off-white); border:1px solid var(--gray-1); border-top:3px solid var(--black); padding:1.1rem; }
.kd-club-head { display:flex; align-items:center; gap:.7rem; margin-bottom:.85rem; }
.kd-club-logo { width:42px; height:42px; object-fit:contain; border-radius:4px; }
.kd-club-name { font-family:var(--font-disp); font-weight:700; font-size:.9rem; color:var(--black);
  text-transform:uppercase; letter-spacing:.03em; line-height:1.1; }
.kd-club-row { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
  font-family:var(--font-cond); font-size:.82rem; padding:.35rem 0; border-top:1px solid var(--gray-1); }
.kd-club-row span { color:var(--gray-3); letter-spacing:.06em; text-transform:uppercase; font-size:.68rem; }
.kd-club-row b { color:var(--black); font-weight:600; text-align:right; }
.kd-cta { margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--gray-1);
  font-size:.88rem; color:var(--gray-4); line-height:1.6; }
.kd-cta a { color:var(--red); text-decoration:none; font-weight:600; }
@media (max-width:768px) { .kd-clubs { grid-template-columns:1fr; } }

/* Termine-Filter (Spiele / Events) */
.termin-filter { display:flex; gap:0.5rem; margin:0 0 1.1rem; flex-wrap:wrap; }
.tf-btn {
  font-family:var(--font-cond); font-weight:600; font-size:0.8rem;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:0.42rem 0.95rem; border:1px solid var(--gray-2);
  background:var(--white); color:var(--gray-4); border-radius:2px;
  cursor:pointer; transition:background 0.15s, color 0.15s, border-color 0.15s;
}
.tf-btn:hover { border-color:var(--red); color:var(--red); }
.tf-btn.active { background:var(--red); border-color:var(--red); color:#fff; }

/* SG-Dialog: Kontakt (Geschäftsstelle), Ansprechpartner-Kontakt, Hallen */
.vc-contact { margin-top:.45rem; font-family:var(--font-cond); font-size:.8rem; }
.vc-contact a { color:var(--red); text-decoration:none; display:block; word-break:break-word; }
.vc-contact a:hover { text-decoration:underline; }
.sg-kontakt-box { background:var(--white); border:1px solid var(--gray-1); border-left:4px solid var(--red); padding:1.2rem 1.4rem; }
.sg-kontakt-box .name { font-family:var(--font-disp); font-weight:700; font-size:1.1rem; color:var(--black); }
.sg-kontakt-box .desc { font-family:var(--font-cond); color:var(--gray-3); margin:.3rem 0 .6rem; }
.sg-kontakt-box div { font-family:var(--font-cond); font-size:.9rem; }
.sg-kontakt-box a { color:var(--red); text-decoration:none; }
.sg-kontakt-box a:hover { text-decoration:underline; }
.sg-hallen { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.8rem; }
.sg-hall { background:var(--white); border:1px solid var(--gray-1); border-top:3px solid var(--red); padding:1rem 1.1rem; }
.sg-hall .hn { font-family:var(--font-disp); font-weight:700; color:var(--black); }
.sg-hall .ha { font-family:var(--font-cond); font-size:.82rem; color:var(--gray-3); margin-top:.2rem; }
.sg-hall-link { cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; }
.sg-hall-link:hover { box-shadow:0 6px 18px rgba(0,0,0,.1); transform:translateY(-2px); }
.sg-hall .hmap-hint { font-family:var(--font-cond); font-size:.74rem; font-weight:600; color:var(--red); margin-top:.55rem; text-transform:uppercase; letter-spacing:.05em; }

/* Hallen-Dialog (Adresse + Google Maps, Klick-zu-laden) */
.halle-modal { padding:1.6rem 1.8rem 1.8rem; }
.halle-modal h2 { font-family:var(--font-disp); font-weight:700; font-size:1.45rem; text-transform:uppercase; color:var(--black); border-bottom:3px solid var(--red); padding-bottom:.5rem; margin:0 0 1rem; }
.halle-modal .hm-adr { font-size:.98rem; color:var(--black); margin:0 0 .1rem; font-weight:600; }
.halle-modal .hm-ort { font-size:.9rem; color:var(--gray-3); margin:0 0 1.1rem; }
.hm-map { margin:0 0 1rem; }
.hm-map-load { width:100%; min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem;
  background:var(--gray-05,#f4f4f5); border:1px dashed var(--gray-2,#ccc); border-radius:6px; cursor:pointer; color:var(--gray-3); font-family:var(--font-cond); }
.hm-map-load:hover { background:#eee; border-color:var(--red); }
.hm-map-ic { font-size:2rem; }
.hm-map-cta { font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:.95rem; color:var(--black); }
.hm-map-note { font-size:.74rem; color:var(--gray-3); }
.hm-frame { width:100%; height:300px; border:0; border-radius:6px; display:block; }
.hm-open { display:inline-block; font-family:var(--font-cond); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.86rem; color:var(--red); text-decoration:none; }
.hm-open:hover { text-decoration:underline; }

/* Förderverein-Dialog */
.fv-modal { padding:1.7rem 1.8rem 1.9rem; }
.fv-modal h2 { font-family:var(--font-disp); font-weight:700; font-size:1.5rem; text-transform:uppercase; color:var(--black); border-bottom:3px solid var(--red); padding-bottom:.5rem; margin:0 0 1rem; }
.fv-modal p { font-size:.92rem; color:var(--gray-4); line-height:1.65; margin:0 0 1.1rem; }
.fv-btn { display:inline-block; background:var(--red); color:#fff; font-family:var(--font-cond); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:.92rem; padding:.75rem 1.4rem; text-decoration:none; border-radius:2px; }
.fv-btn:hover { opacity:.9; }
.fv-note { font-size:.76rem !important; color:var(--gray-3) !important; margin:.9rem 0 0 !important; }

/* Schiedsrichter-Info-Modal */
.sri-modal { padding:1.7rem 1.8rem 1.9rem; }
.sri-modal h2 { font-family:var(--font-disp); font-weight:700; font-size:1.5rem; text-transform:uppercase; color:var(--black); border-bottom:3px solid var(--red); padding-bottom:.5rem; margin:0 0 1rem; }
.sri-modal > p { font-size:.92rem; color:var(--gray-4); line-height:1.6; margin:0 0 1.2rem; }
.sri-h { font-family:var(--font-cond); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin:0 0 .7rem; }
.sri-vorteile { display:flex; flex-direction:column; gap:.6rem; margin:0 0 1.3rem; }
.sri-v { display:flex; align-items:flex-start; gap:.7rem; font-size:.86rem; color:var(--gray-4); line-height:1.5; }
.sri-v strong { color:var(--black); }
.sri-v-ic { width:26px; height:26px; border-radius:50%; background:rgba(200,16,46,.1); display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; margin-top:1px; }
.sri-stufen { display:flex; flex-direction:column; gap:.6rem; margin:0 0 1.4rem; }
.sri-stufe { border:1px solid var(--gray-1); border-left:4px solid var(--red); padding:.7rem .9rem; background:var(--white); }
.sri-stufe-nr { font-family:var(--font-cond); font-size:.6rem; font-weight:700; color:var(--red); letter-spacing:.16em; text-transform:uppercase; margin-bottom:.15rem; }
.sri-stufe-name { font-family:var(--font-disp); font-size:.95rem; font-weight:600; color:var(--black); text-transform:uppercase; margin-bottom:.25rem; }
.sri-stufe-desc { font-size:.8rem; color:var(--gray-4); line-height:1.5; }

/* Trainingszeiten-Filter */
.tzh-filter { display:flex; align-items:center; gap:.6rem; margin:0 0 1.1rem; flex-wrap:wrap; }
.tzh-filter label { font-family:var(--font-cond); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-4); }
.tzh-filter select { font-family:var(--font-cond); font-size:.9rem; padding:.45rem .8rem; border:1px solid var(--gray-2); background:var(--white); color:var(--black); border-radius:2px; cursor:pointer; min-width:220px; }
.tzh-filter select:focus { outline:none; border-color:var(--red); }

/* Downloads & Formulare (SG-Dialog) */
.sg-downloads { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem; }
.sg-dl { display:flex; align-items:center; gap:.7rem; background:var(--white); border:1px solid var(--gray-1); border-left:4px solid var(--red); padding:.8rem 1rem; text-decoration:none; color:var(--black); transition:box-shadow .15s, transform .15s; }
.sg-dl:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.sg-dl-ic { font-family:var(--font-cond); font-weight:700; font-size:.68rem; color:#fff; background:var(--red); border-radius:3px; padding:.35rem .5rem; letter-spacing:.05em; flex-shrink:0; }
.sg-dl-t { font-family:var(--font-disp); font-weight:700; font-size:.92rem; display:flex; flex-direction:column; line-height:1.15; }
.sg-dl-t small { font-family:var(--font-cond); font-weight:600; color:var(--gray-3); font-size:.7rem; letter-spacing:.04em; margin-top:.15rem; }

/* Impressum / Datenschutz im Modal */
.legal-modal { padding:1.6rem 1.8rem 2rem; }
.legal-modal .wrap { max-width:100%; margin:0; }
.legal-modal .legal-modal-head { font-family:var(--font-disp); font-weight:700; font-size:1.5rem; text-transform:uppercase; color:var(--black); border-bottom:3px solid var(--red); padding-bottom:.5rem; margin-bottom:1.2rem; }
.legal-modal h1 { display:none; }
.legal-modal h2 { font-family:var(--font-disp); font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--black); margin:1.6rem 0 .45rem; padding-top:1.1rem; border-top:1px solid var(--gray-1); }
.legal-modal h2:first-of-type { border-top:none; padding-top:0; margin-top:0; }
.legal-modal p, .legal-modal li { font-size:.9rem; color:var(--gray-4); line-height:1.65; }
.legal-modal ul { padding-left:1.3rem; margin:.4rem 0; }
.legal-modal a { color:var(--red); text-decoration:none; }
.legal-modal a:hover { text-decoration:underline; }
.legal-modal .note { background:#fff5f6; border:1px solid #f2c9cf; border-left:4px solid var(--red); padding:.9rem 1.1rem; border-radius:4px; margin-bottom:1.2rem; font-size:.85rem; color:#7a2531; }
.legal-modal .todo { color:var(--gray-3); font-style:italic; }

.page-content-area {
  min-width: 0;
  grid-column: 1;
}
.sponsor-sidebar {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 110px;
  /* volle Zeilenhöhe (überschreibt align-items:start des Grids) ->
     gibt der sticky-Leiste den nötigen Laufweg beim Scrollen */
  align-self: stretch;
}
.sponsor-sidebar-inner {
  position: sticky;
  top: 114px; /* Ticker(42) + Navbar(72) */
  background: var(--white);
  border-left: 1px solid var(--gray-1);
  border-top: 3px solid var(--red);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 0 1rem;
  min-height: 300px;
  overflow: visible;
}
.sponsor-sidebar-label {
  font-family: var(--font-cond);
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 0.85rem;
}
.sponsor-slot {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 5px;
  border-bottom: 1px solid var(--gray-1);
  min-height: 70px;
  text-decoration: none;
  transition: background 0.15s;
  cursor: pointer;
}
/* Rotierende Leiste: festes Fenster (4 Logos), Track blendet automatisch durch */
#sponsorSlots { width: 100%; }
#sponsorSlots.rotating {
  height: 284px;              /* 4 × 71px */
  overflow: hidden;
  position: relative;
}
#sponsorSlots.rotating .ssp-track { display: flex; flex-direction: column; will-change: transform; }
#sponsorSlots.rotating .sponsor-slot {
  height: 71px; min-height: 71px; box-sizing: border-box; flex-shrink: 0;
}
.sponsor-slot:hover { background: rgba(200,16,46,0.05); }
.sponsor-dummy {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp);
  font-size: 0.75rem; font-weight: 700;
  color: white; flex-shrink: 0;
  transition: transform 0.2s;
}
.sponsor-slot:hover .sponsor-dummy { transform: scale(1.08); }
.sponsor-slot img {
  max-width: 80px; max-height: 38px;
  object-fit: contain;
  filter: grayscale(80%) opacity(0.6);
  transition: filter 0.25s;
}
.sponsor-slot:hover img { filter: grayscale(0%) opacity(1); }
.sponsor-slot-name {
  font-family: var(--font-cond);
  font-size: 0.58rem; font-weight: 700;
  color: rgba(0,0,0,0.35);
  letter-spacing: 0.05em; text-transform: uppercase;
  text-align: center; line-height: 1.2;
}
.sponsor-slot:hover .sponsor-slot-name { color: var(--black); }
.sponsor-sidebar-cta {
  font-family: var(--font-cond);
  font-size: 0.5rem; font-weight: 700;
  color: rgba(200,16,46,0.4);
  letter-spacing: 0.12em; text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid var(--gray-1);
  text-decoration: none; transition: color 0.2s;
}
.sponsor-sidebar-cta:hover { color: var(--red); }


/* ============================================================
   27  RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
  .news-grid       { grid-template-columns: repeat(2, 1fr); }
  .footer-inner    { grid-template-columns: 1fr 1fr; }
  .social-grid     { grid-template-columns: repeat(3,1fr); }
  .sidebar-col     { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  :root { --pad-x: clamp(1rem, 3vw, 2.5rem); }
}
@media (max-width: 900px) {
  :root { --pad-x: 1.25rem; }
  .news-grid       { grid-template-columns: repeat(2, 1fr); }
  .sr-zone         { clip-path: polygon(0 20px,100% 0,100% calc(100% - 20px),0 100%); padding: 4rem var(--pad-x); }
  .cta-banner      { grid-template-columns: 1fr; }
  .cta-actions     { flex-direction: row; }
  .cta-block+.cta-block { border-top: none; border-left: 1px solid rgba(255,255,255,0.05); }
  .sidebar-col     { grid-template-columns: 1fr 1fr; }
  .sr-grid         { grid-template-columns: repeat(2,1fr); }
  .trainer-row     { grid-template-columns: 1fr; }
  .vorstand-grid   { grid-template-columns: repeat(2,1fr); }
  .why-points      { grid-template-columns: 1fr; }
  .social-grid     { grid-template-columns: repeat(2,1fr); }
  .hero-slideshow  { width: 70%; opacity: 0.45; }
  .hero-logo-img   { height: 100px; }
  .sg-banner-inner { flex-wrap: wrap; gap: 2rem; }
  .sg-banner-left  { flex: 100%; }
  .sg-banner-clubs { order: 3; }
  .sg-banner-cta   { order: 2; }
  .page-with-sponsors { grid-template-columns: 1fr; }
  .sponsor-sidebar { display: none; }
  .galerie-grid    { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .galerie-featured { grid-column: span 2; grid-row: span 1; }
  .news-archive-grid { grid-template-columns: repeat(2, 1fr); }
  .nc-hero-card    { grid-column: span 2; grid-row: auto; }
  .nc-hero-card .nc-img { height: auto; min-height: unset; }
  .matchday-bar    { padding: 0.55rem var(--pad-x); }
  .matchday-bar-inner { gap: 0.55rem; }
  .mdb-venue       { display: block; font-size: 0.74rem; margin-top: 0.1rem; }
}
@media (max-width: 768px) {
  .nav-links       { display: none; }
  .nav-club-logos  { display: none; }
  .burger          { display: flex; }
  .hero            { min-height: 420px; }
  .hero-stats      { gap: 1.2rem; }
  .stat-num        { font-size: 1.4rem; }
  .news-grid       { grid-template-columns: repeat(2, 1fr); }
  .sr-grid         { grid-template-columns: 1fr; }
  .footer-inner    { grid-template-columns: 1fr 1fr; }
  .kader-grid      { grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); }
  .trio-bar        { gap: 0.75rem; }
  .trio-club       { width: 54px; height: 54px; }
  .sidebar-col     { grid-template-columns: 1fr; }
  .juengste-grid   { grid-template-columns: 1fr 1fr; }
  .tgt             { font-size: 0.75rem; padding: 0.55rem 1rem; }
  .hero-brand      { gap: 0.8rem; }
  .hero-logo-img   { height: 72px; }
}
@media (max-width: 600px) {
  :root { --pad-x: 1rem; }
}
@media (max-width: 540px) {
  .news-grid        { grid-template-columns: 1fr; }
  .sidebar-col      { grid-template-columns: 1fr; }
  .hero-title       { font-size: 3rem; }
  .hero-stats       { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.8rem; }
  .stat-divider     { display: none; }
  .footer-inner     { grid-template-columns: 1fr; }
  .footer-bottom    { flex-direction: column; text-align: center; }
  .trainer-row      { grid-template-columns: 1fr; }
  .social-grid      { grid-template-columns: repeat(2,1fr); }
  .juengste-grid    { grid-template-columns: 1fr; }
  .team-group-tabs  { flex-direction: column; }
  .tgt              { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .galerie-grid     { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .news-archive-grid { grid-template-columns: 1fr; }
  .nc-hero-card     { grid-column: span 1; }
  .sg-banner-clubs  { gap: 0.6rem; }
  .sg-club-ring     { width: 52px; height: 52px; font-size: 0.65rem; }
  .sg-club-plus     { font-size: 1.1rem; }
  .termin-title     { white-space: normal; }
  /* Meta-Zeile (Datum · Uhrzeit · Halle) auch mobil zeigen – nur kompakter/umbruchfähig */
  .termin-meta      { display: block; font-size: 0.68rem; white-space: normal; line-height: 1.35; }
}
@media (min-width: 1200px) {
  .hero-logo-img    { height: 130px; }
}



/* ============================================================
   28  MOBILE NAVBAR (≤768px)
   Burger links, dann alle 4 Logos gleichmäßig verteilt
============================================================ */
@media (max-width: 768px) {
  .nav-wrap {
    height: 60px;
    padding: 0 0.75rem;
    gap: 0;
  }
  .burger {
    display: flex;
    flex-shrink: 0;
    order: 0;
    margin-right: 0.5rem;
  }
  .nav-links { display: none; }
  .nav-club-logos {
    display: flex !important;
    flex: 0 0 auto;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0;
    order: 2;
  }
  .nav-club-logo {
    height: 38px !important;
    max-width: 52px !important;
    width: auto !important;
    object-fit: contain !important;
    opacity: 0.9;
    border-radius: 0 !important;
    border: none !important;
    filter: none !important;
  }
  .nav-hth-link { order: 1; flex-shrink: 0; margin: 0 0.5rem 0 auto; }
  .nav-hth-logo {
    height: 40px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(200,16,46,0.5) !important;
    padding: 2px;
    background: rgba(0,0,0,0.2);
  }
  .ticker { height: 36px; }
  .navbar { top: 36px !important; }
  .navbar.scrolled { top: 36px !important; }
  body { padding-top: 36px; } /* mobile ticker height */
}


/* ============================================================
   29  MOBILE HERO (≤640px)
   Logo zentriert → Schriftzug volle Breite → Stats | Buttons
============================================================ */
@media (max-width: 640px) {

  /* Slideshow als Vollbild-Hintergrund */
  .hero-slideshow {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 1;
  }
  .hero-slideshow::before {
    background: linear-gradient(
      160deg,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.62) 50%,
      rgba(0,0,0,0.75) 100%
    ) !important;
  }
  .hero-slideshow::after { height: 50% !important; }
  .hs-arrow { display: none; }
  .hs-dots  { bottom: 8px; }

  /* Hero-Höhe durch Content bestimmt */
  .hero { min-height: 0 !important; }

  /* Abstand für Ticker(36) + Navbar(60) */
  .hero-body {
    padding-top:    6rem !important;
    padding-bottom: 0.5rem !important;
    align-items: flex-start;
  }

  /* Alles in hero-left zentrieren */
  .hero-left {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Eyebrow zentriert */
  .hero-eyebrow { justify-content: center; margin-bottom: 0.6rem; }

  /* hero-brand: Logo OBEN zentriert, Schriftzug darunter */
  .hero-brand {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    width: 100%;
  }
  .hero-logo-img {
    height: 80px !important;
    width: auto;
    align-self: center;
    filter: drop-shadow(0 2px 12px rgba(200,16,46,0.5));
  }
  .hero-brand .hero-schriftzug { margin-bottom: 0; }
  .hero-schriftzug {
    width: 100%;
    text-align: center;
  }
  .hero-schrift-top  { font-size: clamp(1.4rem, 7.2vw, 2.3rem) !important; margin-bottom: 0.32em !important; }
  /* Mehr Kopffreiheit, damit die Ä-Pünktchen von HECKENGÄU nicht in die TEAM-Zeile ragen */
  .hero-schrift-main { font-size: clamp(3.1rem, 15vw, 5.1rem) !important; line-height: 1.06; }
  .hero-schrift-cities { font-size: 0.68rem !important; letter-spacing: 0.12em; }

  /* Tagline kompakt zentriert zeigen, Trio ausblenden */
  .hero-tagline {
    display: block;
    font-size: 1.02rem !important;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.7);
    margin: 0.15rem 0 0.5rem;
    line-height: 1.3;
  }
  .hero-tagline-sub { font-size: 0.82rem; margin-top: 0.18rem; letter-spacing: 0.08em; }
  .trio-bar { display: none; }

  /* Stats + Buttons nebeneinander */
  .hero-stats-cta-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 1rem;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
  }

  /* Stats: 2×2 */
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.8rem;
    margin-bottom: 0;
    text-align: left;
  }
  .stat-divider { display: none; }
  .stat-num     { font-size: 1.5rem !important; line-height: 1; }
  .stat-label   { font-size: 0.57rem; }

  /* Buttons: gestapelt */
  .hero-cta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
  }
  .hero-cta .btn-red,
  .hero-cta .btn-ghost {
    font-size: 0.65rem     !important;
    padding: 0.5rem 0.9rem !important;
    clip-path: none        !important;
    border-radius: 2px     !important;
    letter-spacing: 0.07em !important;
    white-space: nowrap;
    text-align: center;
    display: block;
    min-width: 100px;
  }
}


/* ============================================================
   30  MOBILE SPONSOR-STRIP
   Erscheint nach der Matchday-Bar (im HTML direkt danach).
   Nur auf ≤900px sichtbar, Desktop: unsichtbar.
============================================================ */
.sponsor-strip-mobile {
  display: none; /* Desktop: immer versteckt */
}

@media (max-width: 900px) {
  .sponsor-strip-mobile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    background: var(--white);
    border-top: 2px solid var(--red);
    border-bottom: 3px solid var(--gray-1);
    padding: 0.6rem var(--pad-x);
    box-sizing: border-box;
    box-shadow: 0 3px 10px rgba(0,0,0,0.07);
    /* Partner-Leiste scrollt normal mit (nur die Matchday-Bar bleibt sticky). */
  }

  .ssm-label {
    font-family: var(--font-cond);
    font-size: 0.55rem; font-weight: 700;
    color: var(--red); letter-spacing: 0.2em;
    text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
  }
  /* Vertikales Karussell: zeigt 2 Slots, scrollt automatisch nach oben */
  .ssm-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    /* Höhe = genau 2 Slots à ~52px */
    height: 52px;
  }
  .ssm-inner {
    display: flex;
    flex-direction: column;  /* vertikal */
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ssm-slot {
    display: flex;
    flex-direction: row;     /* Kreis + Name nebeneinander */
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 4px;
    transition: background 0.15s;
    cursor: pointer;
    height: 52px;            /* eine Slot-Höhe */
    box-sizing: border-box;
  }
  .ssm-slot:hover { background: rgba(200,16,46,0.06); }
  .ssm-dot {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-family: var(--font-disp); font-size: 0.8rem;
    font-weight: 700; color: white;
  }
  .ssm-slot img { width: 32px; height: 32px; object-fit: contain; }
  .ssm-slot span {
    font-family: var(--font-cond); font-size: 0.7rem; font-weight: 700;
    color: var(--gray-4); letter-spacing: 0.04em; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ssm-cta {
    font-family: var(--font-cond); font-size: 0.52rem; font-weight: 700;
    color: rgba(200,16,46,0.5); letter-spacing: 0.1em; text-transform: uppercase;
    white-space: nowrap; flex-shrink: 0; text-decoration: none;
    transition: color 0.2s;
  }
  .ssm-cta:hover { color: var(--red); }

  /* Luft unter dem Strip zum Content */
  .page-with-sponsors { padding-top: 1rem; }
}


/* ============================================================
   31  COOKIE-BANNER (DSGVO)
============================================================ */
#cookieBanner {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 9999; background: var(--black-2);
  border-top: 2px solid var(--red);
  padding: 1rem var(--pad-x);
  transform: translateY(0);
  transition: transform 0.35s var(--ease-out), opacity 0.35s;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
}
#cookieBanner.cb-hide { transform: translateY(110%); opacity: 0; }
.cb-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.cb-text { flex: 1; font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.5; }
.cb-text strong {
  display: block; font-family: var(--font-disp); font-size: 0.9rem;
  font-weight: 600; color: var(--white); letter-spacing: 0.05em;
  text-transform: uppercase; margin-bottom: 0.25rem;
}
.cb-link { color: var(--red); text-decoration: underline; margin-left: 0.4rem; }
.cb-actions { display: flex; gap: 0.65rem; flex-shrink: 0; }
.cb-btn {
  font-family: var(--font-disp); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.6rem 1.4rem; border-radius: 1px; cursor: pointer;
  border: 1.5px solid transparent; transition: all 0.15s;
}
.cb-accept    { background: var(--red); color: var(--white); border-color: var(--red); }
.cb-accept:hover { background: var(--red-dk); }
.cb-necessary { background: transparent; color: rgba(255,255,255,0.55); border-color: rgba(255,255,255,0.2); }
.cb-necessary:hover { color: var(--white); border-color: rgba(255,255,255,0.5); }
@media (max-width: 640px) {
  .cb-inner    { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .cb-actions  { flex-direction: row; width: 100%; }
  .cb-btn      { flex: 1; text-align: center; padding: 0.7rem 0.5rem; }
}


/* ============================================================
   32  MOBILE TABS — kein sichtbarer Scrollbalken
============================================================ */
@media (max-width: 768px) {
  .team-tabs, .team-group-tabs {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
  }
  .team-tabs::-webkit-scrollbar, .team-group-tabs::-webkit-scrollbar { display: none; }
  .team-tab, .tgt { scroll-snap-align: start; flex-shrink: 0; }
  .match-filter {
    overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  .match-filter::-webkit-scrollbar { display: none; }
  .mf-btn { flex-shrink: 0; }
}


/* ============================================================
   33  SPIELE & ERGEBNISSE — Wochen-Tabelle (Liga integriert)
============================================================ */
.se-section { margin: 2.2rem 0 2.6rem; }   /* Abstand oben (News) + unten (Termine) */
.se-controls {
  display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: end;
  background: var(--white); border: 1px solid var(--gray-1);
  border-radius: 12px; padding: 0.9rem 1rem; margin-bottom: 1.1rem;
}
.se-week { display: flex; align-items: center; gap: 0.4rem; }
.se-wbtn {
  width: 40px; height: 40px; cursor: pointer; border: 1px solid var(--gray-2);
  background: #fff; border-radius: 8px; color: var(--red);
  font-family: var(--font-cond); font-weight: 700; font-size: 1.15rem; line-height: 1;
  transition: all 0.15s;
}
.se-wbtn:hover { background: var(--red); color: #fff; border-color: var(--red); }
.se-wlbl {
  min-width: 172px; text-align: center; font-family: var(--font-cond);
  font-weight: 700; font-size: 1rem; color: var(--black);
}
.se-today {
  cursor: pointer; border: 1px solid var(--gray-2); background: #fff; border-radius: 8px;
  font-family: var(--font-cond); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.78rem; color: var(--gray-4); padding: 0 0.75rem; height: 40px;
  transition: all 0.15s;
}
.se-today:hover { border-color: var(--red); color: var(--red); }
.se-sel, .se-search {
  font-family: var(--font-cond); font-size: 0.98rem; height: 40px;
  border: 1px solid var(--gray-2); background: #fff; color: var(--black);
  border-radius: 8px; padding: 0 0.7rem;
}
.se-sel { cursor: pointer; }
.se-search { flex: 1; min-width: 150px; }
.se-sel:focus, .se-search:focus { outline: none; border-color: var(--red); }

.se-weekhead {
  font-family: var(--font-disp); font-weight: 600; color: var(--red);
  font-size: 1.1rem; text-transform: uppercase; margin: 0.2rem 0 1rem; letter-spacing: 0.02em;
}
.se-weekhead span {
  color: var(--gray-4); font-family: var(--font-cond); font-weight: 500;
  text-transform: none; font-size: 0.92rem; display: block; letter-spacing: 0;
}

.se-tblwrap { overflow-x: auto; border: 1px solid var(--gray-1); border-radius: 12px; background: var(--white); }
table.se-tbl { width: 100%; border-collapse: collapse; font-family: var(--font-cond); font-size: 1rem; min-width: 720px; }
table.se-tbl thead th {
  background: #f3efe8; color: var(--red); text-align: left; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.74rem;
  padding: 0.6rem 0.8rem; border-bottom: 2px solid rgba(200,16,46,0.25);
  position: sticky; top: 0; z-index: 1;
}
table.se-tbl thead th.c { text-align: center; }
table.se-tbl tbody td { padding: 0.58rem 0.8rem; border-top: 1px solid var(--gray-1); vertical-align: middle; }
tr.se-g { cursor: pointer; transition: background 0.12s; }
tr.se-g:hover { background: rgba(200,16,46,0.05); }
tr.se-g:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
tr.se-g.grp td { border-top: 2px solid #e0dad0; }
.se-staffel a {
  color: var(--red); font-family: var(--font-disp); font-weight: 600; text-transform: uppercase;
  font-size: 0.82rem; text-decoration: none; line-height: 1.15; display: inline-block; cursor: pointer;
}
.se-staffel a:hover { text-decoration: underline; }
.se-when { white-space: nowrap; font-weight: 600; color: var(--black); }
.se-when small { display: block; color: var(--gray-4); font-weight: 500; }
.se-team { color: var(--black); }
.se-team.hth { color: var(--red); font-weight: 700; }
.se-erg { text-align: center; white-space: nowrap; font-family: var(--font-disp); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.se-erg.win { color: #1d6b34; } .se-erg.loss { color: #b3261e; } .se-erg.draw { color: #8a6d0b; }
.se-pill {
  display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-cond);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.68rem;
  padding: 0.16rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.se-pill.heim { background: rgba(200,16,46,0.12); color: var(--red-dk); }
.se-pill.aus  { background: #ecebe8; color: #555; }
.se-pill.live { background: #e0201c; color: #fff; }
.se-pill.live .lv { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: sePulse 1.1s infinite; }
@keyframes sePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.se-venue { color: var(--gray-4); white-space: nowrap; font-size: 0.92rem; }
.se-empty {
  background: var(--white); border: 1px dashed var(--gray-2); border-radius: 12px;
  padding: 2rem; text-align: center; color: var(--gray-4); font-family: var(--font-cond); font-size: 1.05rem;
}
.termine-empty {
  grid-column: 1 / -1;
  background: var(--white); border: 1px dashed var(--gray-2); border-radius: 12px;
  padding: 1.6rem; text-align: center; color: var(--gray-4); font-family: var(--font-cond); font-size: 1.02rem;
}
.se-legend { display: flex; gap: 0.9rem; flex-wrap: wrap; color: var(--gray-4); font-family: var(--font-cond); font-size: 0.86rem; margin: -0.4rem 0 1rem; align-items: center; }

/* Mobil-Karten (Liga in der Box) – Desktop zeigt die Tabelle, Mobil die Karten */
.se-cards { display: none; }
.se-card { background: var(--white); border: 1px solid var(--gray-1); border-radius: 12px; padding: 0.65rem 0.75rem; margin-bottom: 0.55rem; cursor: pointer; transition: border-color 0.12s; }
.se-card:hover { border-color: var(--gray-2); }
.se-card:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.se-card-liga { font-family: var(--font-disp); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--red); margin-bottom: 0.35rem; }
.se-card-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.se-card-when { font-family: var(--font-cond); color: var(--gray-4); font-size: 0.86rem; }
.se-card-teams { font-family: var(--font-cond); font-weight: 600; font-size: 1.04rem; line-height: 1.2; }
.se-card-vs { color: var(--gray-3); font-weight: 500; margin: 0 0.32rem; }

@media (max-width: 620px) {
  #seOut .se-tblwrap { display: none; }
  #seOut .se-cards { display: block; }
}

/* Staffel-Modal (im HTHDialog) */
.se-modal { font-family: var(--font-cond); max-width: 660px; margin-inline: auto; }
/* Kopf (Titel + Wochenwechsler) bleibt beim Scrollen stehen */
.hth-dialog .se-m-head { position: sticky; top: 0; z-index: 3; background: var(--white); padding: 1.4rem 1.5rem 0.8rem; box-shadow: 0 1px 0 var(--gray-1); }
.se-m-body { padding: 0.5rem 1.5rem 2rem; }
.se-m-body > .se-m-label:first-child { margin-top: 0.4rem; }
.se-m-liga { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; color: var(--black); line-height: 1.1; padding-right: 2.6rem; }
.se-m-sub  { color: var(--gray-4); font-size: 0.92rem; margin-bottom: 0.4rem; }
.se-m-label { font-family: var(--font-disp); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.82rem; color: var(--red); margin: 1.15rem 0 0.5rem; }

/* Wochenwechsler im Modal */
.se-mweek { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0.9rem 0 0.2rem; }
.se-mwbtn { width: 36px; height: 36px; border: 1px solid var(--gray-2); background: #fff; border-radius: 8px; cursor: pointer; font-family: var(--font-cond); font-weight: 700; color: var(--red); font-size: 1.05rem; transition: all 0.15s; }
.se-mwbtn:hover:not([disabled]) { background: var(--red); color: #fff; border-color: var(--red); }
.se-mwbtn[disabled] { opacity: 0.35; cursor: default; }
.se-mwlbl { font-family: var(--font-cond); font-weight: 700; font-size: 0.98rem; min-width: 190px; text-align: center; color: var(--black); }

/* Spieltag-Tabelle (alle Vereine) */
.se-m-gwrap { border: 1px solid var(--gray-1); border-radius: 10px; overflow: hidden; }
table.se-m-games { width: 100%; border-collapse: collapse; }
table.se-m-games td { padding: 0.5rem 0.55rem; font-size: 0.95rem; vertical-align: middle; }
/* Trennlinie nach jeder Partie – bei HTH-Spielen erst nach der Hallen-Zeile */
table.se-m-games tr:not(.hthrow) td { border-bottom: 1px solid var(--gray-1); }
table.se-m-games tr.se-mg-vrow td   { border-bottom: 1px solid var(--gray-1); }
table.se-m-games tr:last-child td   { border-bottom: none; }
table.se-m-games tr.hthrow td       { background: rgba(200,16,46,0.05); }
table.se-m-games tr.hthrow td:first-child,
table.se-m-games tr.se-mg-vrow td:first-child { border-left: 3px solid var(--red); }
.se-mg-when { white-space: nowrap; color: var(--gray-4); font-size: 0.8rem; line-height: 1.15; }
.se-mg-when small { display: block; color: var(--black); font-weight: 600; font-size: 0.9rem; }
.se-mg-home  { text-align: right; }
.se-mg-guest { text-align: left; }
.se-mg-home.hth, .se-mg-guest.hth { color: var(--red); font-weight: 700; }
.se-mg-sc { text-align: center; white-space: nowrap; font-family: var(--font-disp); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3rem; }
.se-mg-vs { color: var(--gray-3); font-weight: 400; }
.se-mg-vrow td { color: var(--gray-4); font-size: 0.8rem; padding-top: 0; padding-bottom: 0.5rem; background: rgba(200,16,46,0.05); }

/* Tabellenstand */
.se-m-tabwrap { overflow-x: auto; border: 1px solid var(--gray-1); border-radius: 10px; }
table.se-m-tab { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
table.se-m-tab th { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--red); background: #f3efe8; font-weight: 700; padding: 0.45rem 0.35rem; white-space: nowrap; }
table.se-m-tab th.l, table.se-m-tab td.l { text-align: left; }
table.se-m-tab th:not(.l) { text-align: center; }
table.se-m-tab td { padding: 0.42rem 0.35rem; text-align: center; border-top: 1px solid var(--gray-1); white-space: nowrap; }
table.se-m-tab td.l { white-space: normal; }
table.se-m-tab tr.me td { background: rgba(200,16,46,0.1); font-weight: 700; color: var(--red-dk); }
.se-m-link {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1.1rem;
  font-family: var(--font-cond); font-weight: 600; color: #fff; background: var(--red);
  text-decoration: none; padding: 0.6rem 1.1rem; border-radius: 8px;
}
.se-m-link:hover { background: var(--red-dk); }
.se-m-note { color: var(--gray-4); font-size: 0.85rem; margin: 0.8rem 0 0; }

@media (max-width: 640px) {
  .se-controls { flex-direction: column; align-items: stretch; gap: 0.55rem; padding: 0.6rem; }
  .se-controls .se-week { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
  .se-controls .se-wbtn { width: 36px; height: 36px; flex: 0 0 auto; font-size: 1rem; }
  .se-controls .se-wlbl { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* „Heute" rutscht in eine eigene, volle Zeile darunter -> Zeile 1 (‹ Label ›) passt immer */
  .se-controls .se-today { order: 1; flex: 1 0 100%; height: 34px; padding: 0 0.6rem; font-size: 0.72rem; }
  .se-controls .se-sel, .se-controls .se-search { width: 100%; height: 38px; }
}


/* ============================================================
   34  INTRO-POPUP (News-Abo + Ticker-Hinweis)
============================================================ */
.hth-intro-ov {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(10,10,12,0.6); backdrop-filter: blur(3px); animation: hthIntroFade 0.2s ease;
}
@keyframes hthIntroFade { from { opacity: 0; } to { opacity: 1; } }
.hth-intro { background: var(--white); color: var(--black); max-width: 430px; width: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.hth-intro-head { background: linear-gradient(120deg, var(--black), var(--red-dk)); color: #fff; padding: 1.3rem 1.4rem; }
.hth-intro-head h3 { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; margin: 0; letter-spacing: 0.01em; }
.hth-intro-head p { margin: 0.3rem 0 0; font-family: var(--font-cond); font-size: 1rem; opacity: 0.9; }
.hth-intro-body { padding: 1.2rem 1.4rem 1.4rem; }
.hth-intro-pt { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 0.95rem; font-family: var(--font-cond); }
.hth-intro-pt .ic { font-size: 1.5rem; line-height: 1.1; flex-shrink: 0; }
.hth-intro-pt b { display: block; font-weight: 700; font-size: 1.02rem; color: var(--black); }
.hth-intro-pt span { color: var(--gray-4); font-size: 0.92rem; line-height: 1.4; }
.hth-intro-actions { display: flex; gap: 0.6rem; margin-top: 1.1rem; flex-wrap: wrap; }
.hth-intro-btn { flex: 1 1 140px; border: 0; cursor: pointer; font-family: var(--font-cond); font-weight: 700; padding: 0.72rem 1rem; border-radius: 9px; font-size: 0.95rem; transition: all 0.15s; }
.hth-intro-btn.primary { background: var(--red); color: #fff; }
.hth-intro-btn.primary:hover { background: var(--red-dk); }
.hth-intro-btn.ghost { background: transparent; border: 1px solid var(--gray-2); color: var(--gray-4); }
.hth-intro-btn.ghost:hover { border-color: var(--red); color: var(--red); }
.hth-intro-chk { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-family: var(--font-cond); color: var(--gray-4); font-size: 0.9rem; cursor: pointer; user-select: none; }
.hth-intro-chk input { width: 16px; height: 16px; accent-color: var(--red); cursor: pointer; }
.hth-intro-feat { border-radius: 9px; margin: -0.25rem -0.4rem 0.7rem; padding: 0.4rem; transition: background 0.15s; }
.hth-intro-feat:hover { background: rgba(200,16,46,0.07); }


/* ============================================================
   35  LIVE-TICKER (Spielminute + Ereignisse aus handball4all-Stream)
============================================================ */
/* Spielminute-Chip in der Live-Bar */
.lb-min {
  display: inline-block; font-family: var(--font-cond); font-weight: 700; font-size: 0.7rem;
  color: #fff; background: rgba(0,0,0,0.4); padding: 0.05rem 0.4rem; border-radius: 5px;
  margin-right: 0.45rem; vertical-align: middle; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.lb-goals { font-variant-numeric: tabular-nums; }

/* Spielminute im Spiel-Dialog */
.sp-ticker-live #spMin { font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.02em; }

/* Ereignis-Ticker im Spiel-Dialog */
.sp-events { margin-top: 0.7rem; display: flex; flex-direction: column; max-height: 240px; overflow-y: auto;
  border: 1px solid var(--gray-1); border-radius: 10px; }
.sp-ev { display: grid; grid-template-columns: 3rem 2.6rem 1fr; gap: 0.5rem; align-items: baseline;
  font-family: var(--font-cond); font-size: 0.92rem; padding: 0.42rem 0.6rem; }
.sp-ev:not(:last-child) { border-bottom: 1px solid var(--gray-1); }
.sp-ev-min { color: var(--gray-4); font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-ev-sc  { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--black); white-space: nowrap; }
.sp-ev-tx  { color: var(--gray-4); }
.sp-ev.tor { background: rgba(200,16,46,0.05); }
.sp-ev.tor .sp-ev-sc { color: var(--red); }
.sp-ev.tor .sp-ev-tx { color: var(--black); font-weight: 600; }
/* Neuestes Ereignis kurz aufblinken lassen (Live-Puls) */
@keyframes spEvFlash { 0% { background: rgba(200,16,46,0.28); } 100% { background: transparent; } }
.sp-events .sp-ev:first-child { animation: spEvFlash 1.4s ease; }
@media (prefers-reduced-motion: reduce) { .sp-events .sp-ev:first-child { animation: none; } }