/* ============================================================
   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); }

/* Ergebnisse + Nächste Spiele – gleiche Darstellung, untereinander gestapelt
   (die Staffel-Tabelle ist breit; nebeneinander würde sie quetschen).
   Auf schmalen Screens zeigt der Toggle nur einen Block. */
.se-cols { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
.se-col-erg, .se-col-next { min-width: 0; }

/* Umschalt-Buttons: nur schmal sichtbar; dort jeweils nur ein Block anzeigen */
.se-toggle { display: flex; gap: .5rem; margin-bottom: 1.1rem; }
.se-tgbtn { flex: 1; padding: .6rem .8rem; border: 1px solid var(--gray-2); background: #fff; border-radius: 8px; font-family: var(--font-cond); font-weight: 700; font-size: .95rem; letter-spacing: .02em; color: var(--gray-4); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.se-tgbtn.on { background: var(--red); border-color: var(--red); color: #fff; }
@media (min-width: 1000px) { .se-toggle { display: none; } }

/* Vier Reiter (Live Spiele · Ergebnisse · Nächste Spiele · Ranglisten) – eine Zeile */
.se-tabs { display: flex; gap: .4rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.2rem; scrollbar-width: none; }
.se-tabs::-webkit-scrollbar { display: none; }
.se-tab {
  flex: 1 1 auto; white-space: nowrap; text-align: center;
  font-family: var(--font-cond); font-weight: 700; font-size: .9rem; letter-spacing: .02em;
  padding: .55rem .9rem; border: 1px solid var(--gray-2); background: var(--white); color: var(--gray-4);
  border-radius: 999px; cursor: pointer; transition: background .13s, color .13s, border-color .13s;
}
.se-tab:hover { border-color: var(--red); color: var(--red); }
.se-tab.active { background: var(--red); border-color: var(--red); color: #fff; }
.se-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.se-panel[hidden] { display: none; }
@media (max-width: 560px) {
  .se-tabs { gap: .3rem; }
  .se-tab { padding: .5rem .45rem; font-size: .74rem; letter-spacing: 0; }
}

/* Ranglisten-Auswahl (Select) + Live-Punkt */
.se-rang-filter { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; flex-wrap: wrap; }
.se-rang-filter label { font-family: var(--font-cond); font-weight: 600; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-4); }
.se-rang-sel { font-family: var(--font-cond); font-size: .95rem; padding: .5rem .8rem; border: 1px solid var(--gray-2); background: var(--white); color: var(--black); border-radius: 8px; cursor: pointer; min-width: 220px; max-width: 100%; }
.se-rang-sel:focus { outline: none; border-color: var(--red); }
.se-live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #e0201c; margin-right: .45rem; vertical-align: middle; animation: sePulse 1.1s infinite; }
@media (max-width: 999px) {
  .se-cols[data-view="erg"]  .se-col-next { display: none; }
  .se-cols[data-view="next"] .se-col-erg  { display: none; }
}

/* Zwei getrennte Abschnitte (Ergebnisse / Nächste Spiele) mit je eigenem Wochenwechsler */
.se-subsec { margin-bottom: 1.8rem; }
.se-subhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .7rem; padding-bottom: .4rem; border-bottom: 2px solid var(--red); }
.se-subtitle { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1.05rem; color: var(--black); }
.se-week-sm { gap: .3rem; }
.se-week-sm .se-wlbl { min-width: auto; font-size: .82rem; }

/* Ergebnisse als echte Tabelle mit FESTEN Spaltenbreiten (Datum · Heim · Erg · Gast · Bericht)
   -> die Ergebnisspalte steht bündig untereinander (keine „Treppe"). */
.erg-clist { border: 1px solid var(--gray-1); border-radius: 8px; overflow: hidden; }
.erg-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--font-cond); }
.erg-tbl col.c-day { width: 46px; }
.erg-tbl col.c-sc  { width: 58px; }
.erg-tbl col.c-btn { width: 40px; }
.erg-r > td { padding: .45rem .3rem; border-bottom: 1px solid var(--gray-1); font-size: .9rem; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erg-r:last-child > td { border-bottom: 0; }
.erg-day { color: var(--gray-3); font-size: .72rem; border-left: 4px solid var(--gray-2); padding-left: .5rem; }
.erg-r.win  .erg-day { border-left-color: #1d6b34; }
.erg-r.loss .erg-day { border-left-color: #a11; }
.erg-r.draw .erg-day { border-left-color: #b8860b; }
.erg-home  { text-align: right; color: var(--gray-4); }
.erg-guest { text-align: left;  color: var(--gray-4); }
.erg-home.sieger, .erg-guest.sieger { color: var(--black); font-weight: 800; }
.erg-home.hth, .erg-guest.hth { color: var(--red); font-weight: 700; }
.erg-sc { text-align: center; font-weight: 800; color: var(--black); }
.erg-sc.erg-zeit { font-weight: 600; color: var(--gray-4); }
.erg-btn { text-align: center; }
.erg-rbtn { border: 1px solid var(--gray-2); background: #fff; border-radius: 6px; cursor: pointer; font-size: .9rem; line-height: 1; padding: .25rem .35rem; }
.erg-rbtn:hover { border-color: var(--red); }

/* Kompakte Trennung: Letzte Ergebnisse | Nächste Spiele */
.erg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-bottom: 1.4rem; }
.erg-col-head { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .92rem; color: var(--black); margin-bottom: .6rem; padding-bottom: .35rem; border-bottom: 2px solid var(--red); }
.erg-split .ergebnisse-grid { grid-template-columns: 1fr; gap: .5rem; }
.nk-list { display: flex; flex-direction: column; gap: .5rem; }
.nk-item { display: flex; align-items: center; gap: .7rem; background: var(--white); border: 1px solid var(--gray-1); border-left: 4px solid var(--gray-2); padding: .55rem .7rem; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; }
.nk-item:hover { border-left-color: var(--red); box-shadow: 0 5px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.nk-when { font-family: var(--font-cond); font-size: .74rem; color: var(--gray-3); min-width: 58px; display: flex; flex-direction: column; line-height: 1.15; }
.nk-when small { color: var(--gray-4); font-weight: 600; }
.nk-match { flex: 1; min-width: 0; font-family: var(--font-cond); font-size: .88rem; color: var(--black); }
.nk-team { font-weight: 700; }
.nk-vs { color: var(--gray-3); }
.nk-badge { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-disp); font-weight: 700; font-size: .72rem; color: #fff; flex-shrink: 0; }
.nk-badge.heim { background: #1d6b34; }
.nk-badge.aus  { background: var(--gray-3); }
.se-weekbox { margin-top: .4rem; border: 1px solid var(--gray-1); border-radius: 8px; padding: 0 1rem; }
.se-weekbox > summary { cursor: pointer; padding: .8rem .2rem; font-family: var(--font-cond); font-weight: 600; color: var(--red); list-style: none; display: flex; align-items: center; gap: .5rem; }
.se-weekbox > summary::before { content: '▸'; transition: transform .15s; }
.se-weekbox[open] > summary::before { transform: rotate(90deg); }
.se-weekbox[open] > summary { border-bottom: 1px solid var(--gray-1); margin-bottom: .8rem; }
@media (max-width: 760px) { .erg-split { grid-template-columns: 1fr; gap: 1.1rem; } }

/* „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;
}
/* Werbe-Hinweis im Ticker (z. B. neue Ranglisten) – anklickbar */
.t-promo { cursor: pointer; }
.t-promo:hover, .t-promo:focus-visible { text-decoration: underline; outline: none; }
.t-promo-neu {
  background: #FFD400; color: #111; border-radius: 3px;
  padding: 0.1em 0.5em; font-size: 0.85em; letter-spacing: 0.12em;
}
/* Aktions-Knopf im Header-Bild (Admin → Startbilder) */
.hero-promo {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: .55rem; max-width: 100%;
  margin: .9rem 0 1.6rem; padding: .62rem 1.15rem; border: 0; border-radius: 999px; cursor: pointer;   /* Abstand zum Slogan, damit er frei steht */
  font-family: var(--font-cond, inherit); font-weight: 800; font-size: 1rem; line-height: 1.15;
  letter-spacing: .03em; text-align: left;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  animation: heroPromoIn .5s ease-out backwards;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hero-promo:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.hero-promo:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hero-promo--gelb  { background: #FFD400; color: #111; }
.hero-promo--rot   { background: var(--red, #C8102E); color: #fff; }
.hero-promo--weiss { background: #fff; color: #111; }
.hero-promo-txt { overflow-wrap: anywhere; }
.hero-promo-pfeil { font-size: .9em; transition: transform .15s ease; }
.hero-promo:hover .hero-promo-pfeil { transform: translateX(3px); }
/* Glanz, der alle paar Sekunden über den Knopf läuft */
.hero-promo::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(-120%); animation: heroPromoGlanz 4.5s ease-in-out 1.2s infinite;
}
@keyframes heroPromoGlanz { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes heroPromoIn { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 600px) { .hero-promo { font-size: .9rem; padding: .55rem .95rem; } }
@media (prefers-reduced-motion: reduce) { .hero-promo, .hero-promo::after { animation: none; } }

/* „NEU"-Markierung am Reiter */
.se-neu {
  display: inline-block; margin-left: .4rem; vertical-align: 2px;
  background: #FFD400; color: #111; border-radius: 99px;
  padding: .1rem .42rem; font-size: .62rem; font-weight: 800; letter-spacing: .08em; line-height: 1.3;
}
.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(5, 1fr);
  gap: 0.8rem;
  margin-bottom: 3rem;
  width: 100%;
}
/* Kompakte Kacheln auf der Startseite (mehr News auf einen Blick, z. B. die letzten 10). */
.news-grid .nc-body { padding: 0.55rem 0.65rem; }
.news-grid .nc-date { font-size: 0.6rem; }
.news-grid .nc-cat  { font-size: 0.62rem; }
.news-grid .nc-title { font-size: 0.82rem; line-height: 1.22; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-grid .nc-link { font-size: 0.68rem; margin-top: 0.35rem; }
.news-grid .nc-img { font-size: 1.4rem; }
.news-grid .nc-badge { font-size: 0.6rem; padding: 0.15rem 0.45rem; }
.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)); }

/* Lade-Skelette für die News (statt Fake-News beim ersten Laden) */
.nc-skel { pointer-events: none; }
.nc-skel .nc-skel-box { aspect-ratio: 16/10; background: #e7e3db; }
.nc-skel .nc-skel-box::after { display: none; }
.nc-skel-line { height: 0.72rem; border-radius: 5px; background: #e7e3db; margin: 0.55rem 0; }
.nc-skel-line.h2 { height: 1.05rem; }
.nc-skel-line.w40 { width: 40%; } .nc-skel-line.w60 { width: 60%; } .nc-skel-line.w90 { width: 88%; }
.nc-skel .nc-skel-box, .nc-skel-line { position: relative; overflow: hidden; }
.nc-skel .nc-skel-box::before, .nc-skel-line::before {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: nc-shimmer 1.3s infinite;
}
@keyframes nc-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .nc-skel .nc-skel-box::before, .nc-skel-line::before { animation: none; } }

/* 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-folgt { display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; padding: 1.6rem 1.5rem; }
.sr-folgt-icon { font-size: 1.8rem; line-height: 1; }
.sr-folgt b { display: block; font-family: var(--font-disp); font-size: 1.1rem; color: var(--white); text-transform: uppercase; letter-spacing: .02em; }
.sr-folgt span:not(.sr-folgt-icon) { display: block; margin-top: .2rem; }

.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; }
/* Mit Gruppenfoto: Foto oben (eng auf die Personen zugeschnitten), Titel darunter – nichts liegt auf Gesichtern */
.sr-hero.mit-foto { display: block; padding: 0; }
.sr-hero.mit-foto::after { display: none; }
.sr-hero-foto { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 64%; cursor: zoom-in; }
.sr-hero.mit-foto .sr-hero-text { padding: 1.2rem 2rem 1.3rem; }
.sr-fair { margin: -1.5rem 0 1.5rem; padding: 1.3rem 2rem 1.4rem; border: 1px solid rgba(255,255,255,0.06); border-top: 0;
  border-left: 4px solid var(--red); background: rgba(200,16,46,0.07); }
.sr-fair-kopf { font-family: var(--font-disp); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--white); }
.sr-fair-intro { margin: .45rem 0 0; color: rgba(255,255,255,0.75); font-size: .92rem; line-height: 1.55; max-width: 75ch; }
.sr-fair-regeln { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.sr-fair-regeln li { background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.06); padding: .7rem .8rem; font-size: .85rem; line-height: 1.45; color: rgba(255,255,255,0.72); }
.sr-fair-regeln b { display: block; color: var(--white); font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; margin-bottom: .2rem; }
.sr-fair-zitat { margin: .9rem 0 0; font-style: italic; color: rgba(255,255,255,0.7); font-size: .9rem; }
.sr-fair-zitat cite { font-style: normal; margin-left: .4rem; color: rgba(255,255,255,0.45); font-size: .8rem; }
@media (max-width: 760px) {
  .sr-fair { padding: 1rem 1.1rem 1.1rem; }
  .sr-fair-regeln { grid-template-columns: 1fr; }
}
/* Direktlink auf einen Bereich (?nur=schiedsrichter): alles andere aus, Hinweis-Leiste oben */
.nur-aus { display: none !important; }
.nur-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  margin: 1.2rem 0 1rem; padding: .75rem 1rem; background: var(--black); color: rgba(255,255,255,.75);
  border-left: 4px solid var(--red); font-family: var(--font-cond); font-size: .9rem; letter-spacing: .03em; }
.nur-leiste b { color: var(--white); }
.nur-leiste a { color: var(--white); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--red); }
.nur-leiste a:hover { color: var(--red); }
.sr-hero-cap { margin: .7rem 0 0; font-size: .8rem; line-height: 1.55; color: rgba(255,255,255,0.55); max-width: 80ch; }
.sr-dlg-cap { display: block; margin-top: .35rem; font-family: var(--font-body, inherit); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: .82rem; line-height: 1.5; color: var(--gray-4); }
.sr-avatar.mit-foto { padding: 0; overflow: hidden; background: #333; width: 58px; height: 58px; }
.sr-avatar.mit-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
@media (max-width: 640px) {
  .sr-hero-foto { aspect-ratio: 3 / 2; object-position: center 72%; }
  .sr-hero.mit-foto .sr-hero-text { padding: .9rem 1.1rem 1rem; }
  .sr-hero.mit-foto .sr-hero-title { font-size: 1.25rem; }
}

.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-card { display: flex; flex-direction: column; }
.sr-ueber { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,0.08);
  font-size: .8rem; line-height: 1.45; font-style: italic; color: rgba(255,255,255,0.62); }

.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; }
a.sr-wart-contact { display: inline-block; text-decoration: none; }
a.sr-wart-contact:hover { color: var(--white); }
.sr-warte .sr-wart-role { margin-bottom: .6rem; }
.sr-warte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sr-wart-verein { font-family: var(--font-cond); font-size: 0.65rem; color: rgba(255,255,255,0.45); letter-spacing: 0.12em; text-transform: uppercase; }
.sr-wart.is-offen { border-style: dashed; border-color: rgba(255,255,255,0.18); }
.sr-wart.is-offen .sr-wart-badge { background: transparent; border: 2px dashed rgba(255,255,255,0.35); color: rgba(255,255,255,0.6); }
.sr-wart.is-offen .sr-wart-name { color: rgba(255,255,255,0.7); }
.sr-wart.is-offen .sr-wart-contact { color: var(--red); font-weight: 600; }
@media (max-width: 900px) { .sr-warte-grid { grid-template-columns: 1fr; gap: .6rem; } }


/* ============================================================
   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; }

/* „Alle News" als zentriertes Modal – nur #newsPage; andere Subpages bleiben Vollbild.
   Feste Box-Höhe, nur der Inhalt scrollt -> Fenster bleibt stabil. */
#newsPage {
  transform: none; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh 3vw; overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
}
#newsPage.open { opacity: 1; visibility: visible; }
#newsPage .news-modal-box {
  background: var(--white); width: min(720px, 100%); height: min(88vh, 820px);
  border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
}
#newsPage .subpage-bar { flex: 0 0 auto; height: 56px; }
#newsPage .subpage-inner { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; max-width: none; margin: 0; padding: 1.4rem 1.4rem 1.8rem; }

/* 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 { position: relative; overflow: hidden; 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-avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.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,
.galerie-item video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s var(--ease-out);
}
.galerie-item:hover img,
.galerie-item:hover video { transform: scale(1.05); }
.galerie-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(0,0,0,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; padding-left: 3px; pointer-events: none;
  transition: background 0.3s, transform 0.3s var(--ease-out);
}
.galerie-item:hover .galerie-play { background: var(--red); transform: translate(-50%, -50%) scale(1.1); }
.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,
.lb-img video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.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;
}

/* News als LISTE (Overlay „Alle News" + news.html) – klickbar, öffnet das Modal. */
.news-archive-grid.news-list { display: flex; flex-direction: column; gap: 0.6rem; grid-template-columns: none; }
.nl-item {
  display: flex; align-items: center; gap: 1rem;
  background: var(--white); border: 1px solid var(--gray-1); border-radius: 12px;
  padding: 0.7rem 0.9rem; cursor: pointer;
  transition: box-shadow 0.18s var(--ease-out), transform 0.12s var(--ease-out), border-color 0.18s;
}
.nl-item:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.10); transform: translateY(-1px); border-color: var(--red); }
.nl-item:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.nl-thumb {
  flex: 0 0 auto; width: 92px; height: 62px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; position: relative;
}
.nl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nl-thumb img.nl-thumb-contain { object-fit: contain; }   /* Dummy/News-SVGs vollständig zeigen (Text nicht beschneiden) */
.nl-thumb-emoji { font-size: 1.5rem; opacity: 0.75; }
.nl-main { flex: 1 1 auto; min-width: 0; }
.nl-meta { font-family: var(--font-cond); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray-3); display: flex; align-items: center; gap: 0.4rem; }
.nl-cat { color: var(--red); }
.nl-dot { opacity: 0.5; }
.nl-title { font-family: var(--font-disp); font-weight: 600; font-size: 1.02rem; color: var(--black); line-height: 1.25; margin-top: 2px; }
.nl-teaser { font-size: 0.85rem; color: var(--gray-4); line-height: 1.45; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nl-arrow { flex: 0 0 auto; color: var(--red); font-size: 1.4rem; line-height: 1; padding-left: 0.3rem; }
@media (max-width: 560px) {
  .nl-thumb { width: 68px; height: 50px; }
  .nl-teaser { display: none; }
}
.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); }
/* Tor-Wettbewerb: standardmäßig versteckt, sichtbar nur wenn unter „Bereiche" eingeschaltet
   (sichtbarkeit.js setzt body.bereich-on-torwettbewerb; auf Dev immer). Kein Aufblitzen beim Laden. */
#torwettbewerb { display: none; }
body.bereich-on-torwettbewerb #torwettbewerb { display: block; }
/* Galerie-Bild im Modal: Fenster passt sich dem Bild an (Hoch- wie Querformat) */
.hth-dialog:has(.gal-modal) { width: fit-content; max-width: 94vw; }
.gal-modal { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1rem 1rem .9rem; }
.gal-m-media { position: relative; display: flex; justify-content: center; max-width: 100%; }
.gal-m-media img, .gal-m-media video {
  display: block; max-width: min(90vw, 1100px); max-height: 74vh; width: auto; height: auto;
  border-radius: 10px; background: #111;
}
.gal-m-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background .15s;
}
.gal-m-nav:hover, .gal-m-nav:focus-visible { background: var(--red); }
.gal-m-nav.prev { left: 8px; } .gal-m-nav.next { right: 8px; }
.gal-m-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; width: 100%;
  font-family: var(--font-disp); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .9rem; color: var(--black); padding: 0 .3rem; }
.gal-m-cap small { color: var(--gray-4); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.gal-m-cap span { flex: 1; }
.gal-m-back { flex: none; border: 0; background: var(--black); color: #fff; border-radius: 999px; padding: .35rem .85rem;
  font: inherit; font-size: .8rem; cursor: pointer; align-self: center; }
.gal-m-back:hover, .gal-m-back:focus-visible { background: var(--red); }

/* „Alle Fotos": große Übersicht im Modal (Handy: Vollbild) */
.hth-dialog:has(.gal-alle) { width: min(96vw, 1200px); }
.gal-alle { padding: 0 1.25rem 1.5rem; }
.gal-alle-kopf { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; padding: 1.25rem 3rem .4rem 0; }
.gal-alle-kopf h3 { margin: 0; font-family: var(--font-disp); text-transform: uppercase; font-size: 1.5rem; letter-spacing: .02em; color: var(--black); text-wrap: balance; }
.gal-alle-kopf span { color: var(--gray-4); font-size: .85rem; font-variant-numeric: tabular-nums; }
.gal-alle-chips { position: sticky; top: 0; z-index: 3; display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none;
  padding: .7rem 0; margin: 0 46px .4rem 0; background: var(--white); }   /* rechts Platz fürs ✕ */.gal-alle-chips::-webkit-scrollbar { display: none; }
.gal-chip { flex: none; border: 1.5px solid var(--gray-2, #ddd); background: var(--white); color: var(--black); border-radius: 999px;
  padding: .4rem .9rem; font-family: var(--font-disp); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; cursor: pointer; }
.gal-chip small { opacity: .55; font-variant-numeric: tabular-nums; margin-left: .15rem; }
.gal-chip:hover { border-color: var(--red); }
.gal-chip.aktiv { background: var(--red); border-color: var(--red); color: #fff; }
.gal-chip.aktiv small { opacity: .8; }
.gal-alle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.gal-alle-k { position: relative; display: block; aspect-ratio: 3 / 2; padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: #1a1a1a; cursor: pointer; }
.gal-alle-k img, .gal-alle-k video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.gal-alle-k:hover img, .gal-alle-k:hover video { transform: scale(1.04); }
.gal-alle-k:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.gal-alle-k .galerie-play { z-index: 1; }
.gal-alle-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .6rem .45rem; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; font-family: var(--font-disp); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; font-size: .78rem; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.gal-alle-lade { padding: 2rem 0; color: var(--gray-4); }
@media (max-width: 640px) {
  .hth-dialog:has(.gal-alle) { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .hth-dialog:has(.gal-alle) .hth-dialog-body { max-height: 100dvh; height: 100dvh; }
  .gal-alle { padding: 0 12px 1.5rem; }
  .gal-alle-kopf h3 { font-size: 1.2rem; }
  .gal-alle-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .gal-alle-k img, .gal-alle-k video { transition: none; } }
.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: normal; }
.nd-actions { margin-top: 1.1rem; }
.nd-sbbtn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--red); color: #fff; border: 0; border-radius: 9px;
  font-family: var(--font-cond); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.03em; padding: 0.6rem 1rem; cursor: pointer;
  transition: background 0.18s, transform 0.12s var(--ease-out);
}
.nd-sbbtn:hover { background: #a50d26; transform: translateY(-1px); }

/* ── 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); }
/* Mannschaftsfoto oben im Team-Dialog (scrollt weg, Kopf mit Reitern bleibt kleben) */
.td-teamfoto { display: block; background: var(--black); line-height: 0; cursor: zoom-in; }
.td-teamfoto img { display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 52vh; object-fit: cover; object-position: 50% 40%; }
.td-fotocap { margin: 0; background: var(--black-2); color: rgba(255,255,255,.72);
  font-size: .8rem; line-height: 1.5; border-bottom: 1px solid rgba(255,255,255,.06); }
.td-fotocap summary { cursor: pointer; padding: .6rem 1.2rem; font-family: var(--font-cond); font-weight: 600; font-size: .85rem;
  letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.85); list-style: none; }
.td-fotocap summary::-webkit-details-marker { display: none; }
.td-fotocap summary::after { content: ' ▸'; color: var(--red); }
.td-fotocap[open] summary::after { content: ' ▾'; }
.td-fotocap p { margin: 0; padding: 0 1.2rem .45rem; }
.td-fotocap p:last-child { padding-bottom: .8rem; }
.td-fotocap b { color: #fff; font-weight: 600; }
.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; }
.tc-avatar.mit-foto { overflow: hidden; background: #ddd; }
.tc-avatar.mit-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.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 */
/* Reiter (Aktive Männer / Aktive Frauen / Jugend) */
.tzh-tabs { display:flex; gap:.4rem; margin:0 0 1.1rem; flex-wrap:wrap; }
.tzh-tab {
  font-family:var(--font-cond); font-weight:700; font-size:.86rem; letter-spacing:.03em;
  padding:.5rem 1rem; border:1px solid var(--gray-2); background:var(--white); color:var(--gray-4);
  border-radius:999px; cursor:pointer; transition:all .13s;
}
.tzh-tab:hover { border-color:var(--red); color:var(--red); }
.tzh-tab.active { background:var(--red); border-color:var(--red); color:#fff; }
.tzh-tab:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

/* 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(4, 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(3, 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: repeat(2, 1fr); gap: 0.6rem; }
  .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; }
  /* Mannschaftsfotos sind breit (3:2): als Band über die volle Breite direkt unter der Navigation
     statt Hochkant-Ausschnitt – so sieht man fast die ganze Mannschaft. Unten weich ausgeblendet,
     damit keine harte Kante zum Hintergrund entsteht. Abdunklung wie gehabt. */
  .hero-slideshow { top: 3.75rem; bottom: auto; height: 82vw;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
  .hs-slide img { object-position: center 30%; }
  .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-direction: column; align-items: center; gap: 0.55rem;
  background: var(--white); border: 1px solid var(--gray-1);
  border-radius: 12px; padding: 0.8rem 1rem; margin-bottom: 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: 8px; background: var(--white); }
table.se-tbl { width: 100%; border-collapse: collapse; font-family: var(--font-cond); font-size: 0.9rem; min-width: 640px; }
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.7rem;
  padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--gray-1);
  position: sticky; top: 0; z-index: 1;
}
table.se-tbl thead th.c { text-align: center; }
table.se-tbl tbody td { padding: 0.45rem 0.6rem; 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-cond); font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--black); }
.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: 8px; padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; 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; }

/* Ergebnisse – zweizeilig (Staffel oben, Infos darunter), ohne Halle */
.se-elist { display: flex; flex-direction: column; gap: 0.5rem; }
.se-egrp { background: var(--white); border: 1px solid var(--gray-1); border-radius: 8px; padding: 0.5rem 0.7rem 0.55rem; }
.se-egrp-liga { font-family: var(--font-disp); font-weight: 600; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.se-egrp-liga a { color: var(--red); text-decoration: none; cursor: pointer; }
.se-egrp-liga a:hover { text-decoration: underline; }
.se-erow {
  display: flex; flex-direction: column; gap: 0.2rem;
  cursor: pointer; padding: 0.15rem 0; border-radius: 4px; transition: background 0.12s;
}
.se-erow + .se-erow { border-top: 1px solid var(--gray-1); padding-top: 0.4rem; margin-top: 0.35rem; }
.se-erow:hover { background: rgba(200,16,46,0.05); }
.se-erow:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.se-erow-l2, .se-erow-l3 { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.se-erow-when { font-family: var(--font-cond); color: var(--gray-4); font-size: 0.86rem; white-space: nowrap; }
.se-erow-btn { flex: 0 0 auto; }
.se-erow-teams { font-family: var(--font-cond); font-weight: 600; font-size: 1.02rem; line-height: 1.2; }
.se-erow-res { flex: 0 0 auto; }
/* Ergebnis in gleicher Schriftgröße wie die Begegnung */
.se-erow-l3 .se-erg { font-size: 1.02rem; }

/* Hallen-Button (Nächste Spiele) → Google-Maps-Dialog */
.se-hallebtn {
  display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%;
  background: #f7f4ef; border: 1px solid var(--gray-1); border-radius: 999px;
  padding: 0.22rem 0.6rem; cursor: pointer; text-align: left;
  color: var(--gray-4); font-family: var(--font-cond); font-weight: 600; font-size: 0.82rem;
  line-height: 1.15; transition: border-color 0.12s, color 0.12s;
}
.se-hallebtn:hover, .se-hallebtn:focus-visible { border-color: var(--red); color: var(--red); outline: none; }
.se-hallebtn-ic { flex: 0 0 auto; font-size: 0.9em; }
.se-venue-none { color: var(--gray-3); }
.se-card-venue { margin-top: 0.4rem; }

@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); }
.se-mg-extra { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.se-mg-venue { color: var(--gray-4); }
.se-berichtbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem;
  margin-left: auto; padding: 0.3rem 0.7rem; border: 1px solid var(--red);
  border-radius: 999px; background: #fff; color: var(--red);
  font-size: 0.78rem; font-weight: 700; cursor: pointer; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.se-berichtbtn:hover, .se-berichtbtn:focus-visible { background: var(--red); color: #fff; outline: none; }
.se-berichtbtn-sm { padding: 0.18rem 0.55rem; font-size: 0.7rem; }
.se-erg-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.se-card-bericht { margin-top: 0.5rem; display: flex; justify-content: flex-end; }

/* 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); }


/* ============================================================
   36  RANGLISTEN (Dialog)
============================================================ */
.sec-more-group { display: inline-flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.rl-modal { font-family: var(--font-cond); padding: 1.5rem 1.5rem 2rem; max-width: 720px; margin-inline: auto; }
.rl-liga { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; color: var(--black); line-height: 1.1; }
.rl-sub  { color: var(--gray-4); font-size: 0.92rem; margin-bottom: 0.2rem; }
.rl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 0.7rem; }
@media (max-width: 560px) { .rl-grid { grid-template-columns: 1fr; } }
.rl-list { border: 1px solid var(--gray-1); border-radius: 10px; overflow: hidden; }
.rl-list-h { font-family: var(--font-disp); font-weight: 600; text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--red); background: #f3efe8; padding: 0.5rem 0.7rem; }
.rl-row { display: grid; grid-template-columns: 1.7rem 1fr auto; gap: 0.5rem; align-items: baseline; padding: 0.42rem 0.7rem; font-size: 0.95rem; }
.rl-row:not(:last-child) { border-bottom: 1px solid var(--gray-1); }
.rl-rank { color: var(--gray-3); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rl-name { color: var(--black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-val  { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--red); }
.rl-sub2 { color: var(--gray-3); font-weight: 400; font-size: 0.78rem; }
/* Team-/Gesamt-Auswahl */
.rl-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.rl-chip {
  padding: 0.28rem 0.7rem; border: 1px solid var(--gray-2); border-radius: 999px;
  background: #fff; color: var(--gray-4); font-size: 0.8rem; font-weight: 600; cursor: pointer;
  font-family: var(--font-cond); transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.rl-chip:hover { border-color: var(--red); color: var(--red); }
.rl-chip.on { background: var(--red); border-color: var(--red); color: #fff; }
/* Tore: Gesamt vs Schnitt/Spiel */
.rl-toggle { display: inline-flex; gap: 0.25rem; float: right; margin-top: -0.15rem; }
.rl-tbtn {
  padding: 0.1rem 0.5rem; border: 1px solid var(--gray-2); border-radius: 999px;
  background: #fff; color: var(--gray-4); font-size: 0.68rem; font-weight: 700; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.rl-tbtn.on { background: var(--red); border-color: var(--red); color: #fff; }

/* Ranglisten-Panel: zwei gestapelte Blöcke (Tore / Strafen mit Reitern) */
.rl-blocks { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.7rem; }
.rl-list-h-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; padding: 0.4rem 0.5rem; }
.rl-ktab {
  font-family: var(--font-cond); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.01em;
  padding: 0.3rem 0.6rem; border: 1px solid var(--gray-2); background: #fff; color: var(--gray-4);
  border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rl-ktab:hover { border-color: var(--red); color: var(--red); }
.rl-ktab.on { background: var(--red); border-color: var(--red); color: #fff; }

/* ── Aktion „Schönstes HTH-Tor" (Wettbewerb) ── */
.tor-section { max-width: var(--max-w); margin: 0 auto; width: 100%; padding: 2.6rem var(--pad-x); }
.tor-intro { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; margin-bottom: 1.2rem; }
.tor-intro p { font-family: var(--font-cond); font-size: 1.05rem; color: var(--gray-5, #444); margin: 0; max-width: 60ch; }
.tor-cta { background: var(--red); color: #fff; border: 0; border-radius: 999px; padding: .8rem 1.4rem; font-family: var(--font-cond); font-weight: 700; font-size: 1rem; cursor: pointer; transition: background .15s; white-space: nowrap; }
.tor-cta:hover { background: var(--red-dk, #7a0010); }
.tor-cta:disabled { opacity: .6; cursor: default; }
.tor-nominees { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.tor-nom { margin: 0; background: var(--white); border: 1px solid var(--gray-1); border-radius: 12px; overflow: hidden; position: relative; }
.tor-badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: #d4a017; color: #1a1a1a; font-family: var(--font-cond); font-weight: 800; font-size: .74rem; padding: .2rem .55rem; border-radius: 999px; }
.tor-nom-media { aspect-ratio: 16/9; background: #000; display: flex; align-items: center; justify-content: center; }
.tor-nom-media video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.tor-extlink { color: #fff; font-family: var(--font-cond); font-weight: 700; padding: 1rem; text-align: center; }
.tor-nom figcaption { padding: .6rem .7rem; font-family: var(--font-cond); display: flex; flex-direction: column; gap: .2rem; }
.tor-nom figcaption span { color: var(--gray-4); font-size: .85rem; }
.tor-nom figcaption p { margin: .2rem 0 0; font-size: .9rem; color: var(--black); }

.tor-ov { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 3vh 16px; }
.tor-ov[hidden] { display: none; }
.tor-dialog { position: relative; background: var(--white); border-radius: 14px; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 1.6rem 1.5rem 1.4rem; box-shadow: 0 16px 50px rgba(0,0,0,.4); }
.tor-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 17px; cursor: pointer; }
.tor-x:hover { background: var(--red); }
.tor-dialog h3 { font-family: var(--font-disp); font-size: 1.35rem; margin: 0 0 1rem; color: var(--black); }
.tor-form { display: flex; flex-direction: column; gap: .8rem; }
.tor-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 480px) { .tor-row { grid-template-columns: 1fr; } }
.tor-field { display: flex; flex-direction: column; gap: .3rem; }
.tor-field label { font-family: var(--font-cond); font-weight: 600; font-size: .82rem; color: var(--gray-5, #444); }
.tor-field input, .tor-field textarea { font-family: var(--font-cond); font-size: .95rem; padding: .55rem .7rem; border: 1px solid var(--gray-2); border-radius: 8px; background: #fff; color: var(--black); width: 100%; }
.tor-field input:focus, .tor-field textarea:focus { outline: none; border-color: var(--red); }
.tor-hint { font-size: .76rem; color: var(--gray-4); }
.tor-check { display: flex; gap: .5rem; align-items: flex-start; font-family: var(--font-cond); font-size: .82rem; color: var(--gray-5, #444); line-height: 1.35; cursor: pointer; }
.tor-check input { margin-top: .15rem; flex: 0 0 auto; }
.tor-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tor-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .3rem; }
.tor-msg { font-family: var(--font-cond); font-size: .88rem; }
.tor-msg.ok { color: #1d6b34; }
.tor-msg.err { color: #b3261e; }
.tor-privacy { font-family: var(--font-cond); font-size: .74rem; color: var(--gray-4); margin: .2rem 0 0; line-height: 1.4; }

/* ── Spielbericht-Modal mit Reitern ── */
/* Reiter-Bericht als FESTES Panel: Höhe bleibt stabil, nur der Reiter-Inhalt
   scrollt -> das Fenster springt beim Reiter-Wechsel nicht mehr. */
.sb-modal { font-family: var(--font-cond); max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; height: min(80vh, 660px); }
.sb-head { padding: 1.3rem 1.4rem 0.8rem; background: #fff; z-index: 2; border-bottom: 1px solid var(--gray-1); flex: 0 0 auto; }
.sb-liga { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--red); font-size: 0.95rem; }
.sb-sub { color: var(--black); font-weight: 600; margin-top: 0.15rem; }
.sb-switch { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; }
.sb-swbtn { padding: 0.3rem 0.7rem; border: 1px solid var(--gray-2); border-radius: 999px; background: #fff; color: var(--gray-4); font-family: var(--font-cond); font-weight: 700; font-size: 0.82rem; cursor: pointer; }
.sb-swbtn:hover { border-color: var(--red); color: var(--red); }
.sb-swbtn.on { background: var(--black); border-color: var(--black); color: #fff; }
.sb-body { padding: 0 1.4rem 1.6rem; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sb-tabs { display: flex; gap: 0.35rem; overflow-x: auto; padding: 0.8rem 0 0.5rem; background: #fff; z-index: 1; -webkit-overflow-scrolling: touch; flex: 0 0 auto; border-bottom: 1px solid var(--gray-1); }
.sb-tab { flex: 0 0 auto; padding: 0.35rem 0.8rem; border: 1px solid var(--gray-2); border-radius: 999px; background: #fff; color: var(--gray-4); font-family: var(--font-cond); font-size: 0.85rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sb-tab:hover { border-color: var(--red); color: var(--red); }
.sb-tab.on { background: var(--red); border-color: var(--red); color: #fff; }
.sb-tabbody { padding-top: 0.7rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sb-scoreline { display: flex; align-items: center; justify-content: center; gap: 0.8rem; text-align: center; margin: 0.4rem 0; }
.sb-sc-team { flex: 1; font-weight: 700; font-size: 1rem; }
.sb-sc-num { font-family: var(--font-disp); font-weight: 800; font-size: 1.8rem; color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-hz { text-align: center; color: var(--gray-4); font-size: 0.85rem; margin-bottom: 0.6rem; }
.sb-auto { line-height: 1.6; color: var(--black); background: #f7f3ec; border-left: 3px solid var(--red); padding: 0.7rem 0.9rem; border-radius: 0 8px 8px 0; margin: 0.5rem 0; }
/* Von Eltern/Redaktion gepflegter Bericht (verknüpfte News) – oben im Modal. */
.sb-newsreport { background: #fff; border: 1px solid var(--gray-1); border-radius: 12px; overflow: hidden; margin: 0.2rem 0 0.9rem; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.sb-nr-img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
/* Spielvideos im Spielbericht (Reiter „🎥 Video") */
.sb-video { margin: 0.2rem 0 0.9rem; }
.sb-video-t { font-family: var(--font-cond); font-weight: 700; font-size: 0.95rem; color: var(--black); margin: 0 0 0.4rem; }
.sb-video video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 62vh; background: #000; border-radius: 10px; }
.sb-nr-tag { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 700; color: var(--red); padding: 0.7rem 0.9rem 0; }
.sb-nr-title { font-family: var(--font-disp); font-weight: 700; font-size: 1.15rem; color: var(--black); padding: 0.15rem 0.9rem 0; line-height: 1.2; }
.sb-nr-text { line-height: 1.7; color: #3b3b3b; padding: 0.5rem 0.9rem 0.9rem; white-space: normal; }
.sb-grp-h { font-family: var(--font-disp); font-weight: 600; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--red); background: #f3efe8; padding: 0.4rem 0.6rem; border-radius: 6px; margin-bottom: 0.2rem; }
.sb-row { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: baseline; padding: 0.4rem 0.5rem; font-size: 0.95rem; border-bottom: 1px solid var(--gray-1); }
.sb-row .sb-rank { color: var(--gray-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.sb-row .sb-name { color: var(--black); }
.sb-row .sb-name small { color: var(--gray-4); font-weight: 400; }
.sb-row .sb-val { font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sb-row .sb-val small { color: var(--gray-4); font-weight: 400; }
.sb-tag { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 4px; font-size: 0.72rem; font-weight: 700; }
.sb-tag.zwei { background: #fde7ea; color: var(--red); }
.sb-tag.gelb { background: #fff3c4; color: #8a6d00; }
.sb-tag.rot { background: #c8102e; color: #fff; }


/* ============================================================
   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: min(50vh, 420px); overflow-y: auto;
  border: 1px solid var(--gray-1); border-radius: 10px; }
.sp-events .sb-events { border: 0; }
.sp-tabs { margin-top: .6rem; padding: .2rem 0 .5rem; justify-content: center; }
.sp-events[hidden] { display: none; }
.sp-auf .sb-grp-h { margin-top: .5rem; }
.sp-auf .sb-grp-h small { color: var(--gray-4); text-transform: none; font-family: var(--font-cond); font-weight: 500; letter-spacing: 0; }
.sp-auf { text-align: left; }
.sp-auf .sb-row .sb-rank { min-width: 1.8em; text-align: right; }
.sp-auf .sb-row.sp-off .sb-rank { color: var(--gray-2); }
.sp-karte { display: inline-block; width: .62em; height: .86em; border-radius: 2px; vertical-align: -.08em; }
.sp-karte.gelb { background: #f5c400; }
.sp-karte.rot { background: #d4001f; }
.sp-events .sb-ev:last-child { border-bottom: 0; }
.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; } }

/* Spielverlauf im Spielbericht: nutzt die volle Dialoghöhe (Scrollen über .sb-tabbody),
   HTH-Aktionen links rot markiert, Gegner neutral, Halbzeit-/Endstand-Trenner. */
.sb-events { display: flex; flex-direction: column; font-family: var(--font-cond); }
.sb-ev { display: grid; grid-template-columns: 2.9rem 2.8rem 3.6rem minmax(0, 1fr); gap: 0.5rem; align-items: center;
  padding: 0.38rem 0.5rem 0.38rem 0.6rem; border-left: 3px solid transparent; border-bottom: 1px solid var(--gray-1); font-size: 0.92rem; }
.sb-ev.hth { border-left-color: var(--red); }
.sb-ev.hth.tor { background: rgba(200,16,46,0.06); }
.sb-ev-min { color: var(--gray-4); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.sb-ev-sc  { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
.sb-ev.hth.tor .sb-ev-sc { color: var(--red); }
.sb-ev-chip { justify-self: start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.1rem 0.4rem; border-radius: 4px; background: var(--gray-1); color: var(--gray-4); white-space: nowrap; }
.sb-ev.tor  .sb-ev-chip { background: var(--black); color: #fff; }
.sb-ev.hth.tor .sb-ev-chip { background: var(--red); }
.sb-ev.miss .sb-ev-chip { background: transparent; border: 1px solid var(--gray-2, #ccc); }
.sb-ev.zwei .sb-ev-chip { background: #dfe6ef; color: #23364d; }
.sb-ev.gelb .sb-ev-chip { background: #f6d84a; color: #4a3b00; }
.sb-ev.rot  .sb-ev-chip { background: #b00020; color: #fff; }
.sb-ev.tto  .sb-ev-chip { background: #e9e1f5; color: #3e2a63; }
.sb-ev-tx { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.sb-ev-tx small { color: var(--gray-4); font-weight: 400; white-space: nowrap; }
.sb-ev.opp .sb-ev-tx { color: var(--gray-4); }
.sb-ev.opp .sb-ev-tx b { font-weight: 600; }
.sb-ev-hz { display: flex; align-items: center; gap: 0.6rem; margin: 0.55rem 0; color: var(--gray-4);
  font-family: var(--font-cond); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sb-ev-hz::before, .sb-ev-hz::after { content: ""; flex: 1; height: 1px; background: var(--gray-2, #ccc); }
.sb-ev-hz.end { color: var(--black); }
@media (max-width: 480px) {
  .sb-ev { grid-template-columns: 2.5rem 2.5rem minmax(0, 1fr); padding-left: 0.4rem; gap: 0.4rem; }
  .sb-ev-chip { grid-column: 3; justify-self: start; }
  .sb-ev-tx { grid-column: 3; }
}

/* Sponsoren aus dem Redaktionssystem: gruppiert (HTH / Stammvereine), Logos auf weißen Kacheln */
.partner-tier-row.pw-gruppiert { display: block; }
.pw-gruppe + .pw-gruppe { margin-top: 2rem; }
.pw-gruppe-titel {
  font-family: var(--font-cond); font-size: 0.7rem; font-weight: 600; color: rgba(255,255,255,0.45);
  letter-spacing: 0.18em; text-transform: uppercase; text-align: center; margin-bottom: 0.9rem;
}
.pw-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.pw-kachel {
  display: flex; align-items: center; justify-content: center;
  width: 150px; height: 78px; padding: 0.55rem 0.8rem; background: #fff; border-radius: 8px;
  transition: transform 0.25s, box-shadow 0.25s;
}
a.pw-kachel:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.pw-kachel img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pw-kachel-name { font-family: var(--font-cond); font-weight: 700; font-size: 0.85rem; color: #222; text-align: center; line-height: 1.15; }
@media (max-width: 640px) {
  .partner-marquee .pw-logo-img { background: #fff; padding: 4px 8px; border-radius: 6px; height: 40px; filter: none; }
  .partner-marquee .pw-logo-img + .pw-name { display: none; }
}
@media (max-width: 640px) {
  .partner-tier-row.pw-gruppiert { display: block; }
  .partner-tier-row.pw-gruppiert ~ .partner-marquee { display: none; }   /* gruppiertes Raster statt Laufband */
  .pw-grid { gap: 0.45rem; }
  .pw-kachel { width: calc((100% - 0.9rem) / 3); height: 58px; padding: 0.35rem 0.45rem; border-radius: 6px; }
}

/* Handy: Sponsoren-Leiste oben, blättert reihenweise senkrecht (ersetzt die kleine Partner-Leiste) */
.sp-zwischen { display: none; }
@media (max-width: 900px) {
  .sponsor-strip-mobile.ssb { display: block; padding: 0.55rem 0 0.7rem; background: #fff; }
  .ssb-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--pad-x) 0.45rem; }
  .ssb-kopf span { font-family: var(--font-cond); font-size: 0.68rem; font-weight: 700; color: var(--red); letter-spacing: 0.2em; text-transform: uppercase; }
  .ssb-cta { font-family: var(--font-cond); font-size: 0.66rem; font-weight: 700; color: var(--gray-4); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
  .ssb-band { overflow: hidden; height: 58px; padding: 0 var(--pad-x); }
  .ssb-reihe { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
  .ssb-kachel { display: flex; align-items: center; justify-content: center; width: 112px; height: 58px; padding: 0.35rem 0.5rem;
    background: #fff; border: 1px solid #e6e6e6; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); flex-shrink: 0; }
  .ssb-kachel img { max-width: 100%; max-height: 100%; object-fit: contain; }

  /* Einzelne Sponsor-Kachel zwischen den Abschnitten (wechselt alle paar Sekunden) */
  body.bereich-on-sponsoren .sp-zwischen { display: flex; }
  .sp-zwischen { flex-direction: column; align-items: center; gap: 0.35rem; margin: 0.4rem auto 1.6rem; padding: 0 var(--pad-x); transition: opacity 0.35s; }
  .sp-zwischen.wechsel { opacity: 0; }
  .sp-zw-label { font-family: var(--font-cond); font-size: 0.6rem; font-weight: 700; color: var(--gray-4); letter-spacing: 0.22em; text-transform: uppercase; }
  .sp-zw-kachel { display: flex; align-items: center; justify-content: center; width: min(78vw, 300px); height: 92px; padding: 0.6rem 1rem;
    background: #fff; border: 1px solid #e6e6e6; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.07); }
  .sp-zw-kachel img { max-width: 100%; max-height: 100%; object-fit: contain; }
}

/* ============================================================
   HANDY-STARTSEITE (≤640px): kürzeres Startbild, Navigationsleiste unten,
   News / Teams / Galerie als Wisch-Reihen
============================================================ */
.bottom-nav { display: none; }
@media (max-width: 640px) {
  /* 1) Startbild kürzer: Zahlen + Knöpfe entfallen (Navigation unten übernimmt) */
  .hero-stats-cta-wrap { display: none !important; }
  .hero-body { padding-bottom: 1.4rem !important; }

  /* 2) Feste Navigationsleiste unten */
  .bottom-nav {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
    background: rgba(14,14,14,0.97); border-top: 2px solid var(--red);
    padding: 0.3rem 0 calc(0.3rem + env(safe-area-inset-bottom));
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .bottom-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.2rem 0;
    font-family: var(--font-cond); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: rgba(255,255,255,0.6); text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a.on { color: #fff; }
  .bottom-nav a.on .bn-ic { background: var(--red); }
  .bn-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 26px; border-radius: 13px; transition: background 0.2s; }
  .bn-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .to-top { bottom: calc(74px + env(safe-area-inset-bottom)); }
  #pushBtn { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }   /* „News abonnieren" über der Leiste */

  /* 3) Wisch-Reihen: eine Zeile, die nächste Karte schaut an, Finger wischt weiter */
  .news-grid, .team-card-grid, .galerie-grid {
    display: grid !important; grid-auto-flow: column; grid-template-columns: none !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x));
    padding: 0.2rem var(--pad-x) 0.8rem; scroll-padding: 0 var(--pad-x);
    width: auto !important; box-sizing: border-box;
  }
  .news-grid::-webkit-scrollbar, .team-card-grid::-webkit-scrollbar, .galerie-grid::-webkit-scrollbar { display: none; }
  .news-grid { grid-auto-columns: 72%; gap: 0.7rem; margin-bottom: 1.6rem; }
  .news-grid > .nc { scroll-snap-align: start; }
  .team-card-grid { grid-template-rows: auto auto; grid-auto-columns: 78%; gap: 0.6rem; }
  .team-card-grid > * { scroll-snap-align: start; }
  .galerie-grid { grid-auto-columns: 70%; grid-template-rows: 210px; grid-auto-rows: 210px; gap: 6px; overflow-y: hidden; }
  .galerie-grid > * { scroll-snap-align: start; grid-column: auto !important; grid-row: auto !important; }
}

/* Vorschau „Dev2" (?dev2): Kachel-Raster statt langer Info-Abschnitte (nur Handy) */
.kr-weg { display: none !important; }
.kr-raster { margin: 0.5rem 0 1.8rem; padding: 0 var(--pad-x); }
.kr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.kr-kachel {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; text-align: left;
  min-height: 64px; padding: 0.7rem 0.75rem; border: 1px solid var(--gray-1); border-left: 4px solid var(--red);
  border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.kr-kachel:active { transform: scale(0.98); }
.kr-ic { font-size: 1.35rem; line-height: 1; }
.kr-t { font-family: var(--font-disp); font-weight: 700; font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--black); line-height: 1.15; }
.kr-pf { color: var(--red); font-size: 1.3rem; font-weight: 700; }
.kr-ov { position: fixed; inset: 0; z-index: 3500; background: rgba(0,0,0,0.55); display: flex; align-items: flex-end; }
.kr-ov[hidden] { display: none; }
.kr-fenster { width: 100%; max-height: 88vh; background: var(--off-white, #f6f4f0); border-radius: 16px 16px 0 0; display: flex; flex-direction: column; overflow: hidden;
  animation: krHoch 0.28s cubic-bezier(.22,1,.36,1); }
@keyframes krHoch { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.kr-kopf { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1rem; background: var(--black); color: #fff; border-bottom: 3px solid var(--red); }
.kr-titel { font-family: var(--font-disp); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kr-zu { background: none; border: 0; color: #fff; font-size: 1.3rem; cursor: pointer; padding: 0.2rem 0.4rem; }
.kr-inhalt { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.kr-inhalt > section, .kr-inhalt > div { margin: 0 !important; }
.kr-inhalt .sec-head .section-title { display: none; }   /* Titel steht schon im Fensterkopf („Alle …"-Links bleiben) */
.kr-inhalt .sec-head { margin: 0.6rem 1rem 0; border: 0; justify-content: flex-end; }
body.kr-offen { overflow: hidden; }

/* Dev2 (Handy): Schiedsrichter kompakt, aber sichtbar */
@media (max-width: 640px) {
  .dev2 .sr-zone { padding: 3.2rem var(--pad-x) 3.4rem; margin: 1.5rem 0; }
  .dev2 #schiedsrichter .sr-hero-cap { display: none; }                 /* Namensliste steckt im großen Foto (Tipp) */
  .dev2 #schiedsrichter .sr-hero.mit-foto .sr-hero-text { padding: 0.8rem 1rem 0.9rem; }
  .dev2 #schiedsrichter .sr-hero-title { font-size: 1.25rem; }
  /* Fair-Play: zu = nur Überschrift + „mehr" */
  .dev2 .sr-fair { margin: -1.5rem 0 1rem; padding: 0.8rem 1rem; }
  .dev2 .sr-fair-kopf { cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; }
  .dev2 .sr-fair-kopf::after { content: 'mehr ▾'; font-family: var(--font-cond); font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); }
  .dev2 .sr-fair.auf .sr-fair-kopf::after { content: 'weniger ▴'; }
  .dev2 .sr-fair:not(.auf) > :not(.sr-fair-kopf) { display: none; }
  .dev2 .sr-fair-regeln { grid-template-columns: 1fr; }
  /* Schiri-Karten als Wisch-Reihe: Foto + Name + Klasse, Tipp = Steckbrief */
  .dev2 #srGrid {
    display: grid; grid-auto-flow: column; grid-auto-columns: 74%; grid-template-columns: none; gap: 0.6rem; align-items: stretch;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--pad-x)) 1rem; padding: 0.2rem var(--pad-x) 0.6rem; scroll-padding: 0 var(--pad-x);
  }
  .dev2 #srGrid::-webkit-scrollbar { display: none; }
  .dev2 #srGrid .sr-card { scroll-snap-align: start; padding: 0.9rem 0.9rem 1rem; cursor: default; }
  .dev2 #srGrid .sr-card-head { gap: 0.75rem; margin: 0; }
  .dev2 #srGrid .sr-avatar.mit-foto, .dev2 #srGrid .sr-avatar { width: 68px; height: 68px; }
  .dev2 #srGrid .sr-name { font-size: 0.9rem; }
  .dev2 #srGrid .sr-details { margin-top: 0.6rem; text-align: left; }
  .dev2 #srGrid .sr-detail-row { font-size: 0.72rem; gap: 0.4rem; }
  .dev2 #srGrid .sr-ueber { display: block; text-align: left; font-size: 0.8rem; line-height: 1.4; margin: 0.55rem 0 0; }
  .dev2 #srGrid .sr-empty { grid-column: 1 / -1; }
  /* SR-Warte: drei schmale Spalten */
  .dev2 .sr-warte-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.4rem !important; }
  .dev2 .sr-warte .sr-wart { padding: 0.55rem 0.45rem; flex-direction: column; text-align: center; gap: 0.3rem; }
  .dev2 .sr-warte .sr-wart-badge { width: 30px; height: 30px; font-size: 0.7rem; }
  .dev2 .sr-warte .sr-wart-name { font-size: 0.78rem; }
  .dev2 .sr-warte .sr-wart-contact { font-size: 0.62rem; word-break: break-word; }
  /* Aufruf „Schiri werden" als roter Kasten */
  .dev2 #sr-cta { background: var(--red); padding: 1rem 1.1rem; margin: 1.2rem 0 0; gap: 0.8rem; }
  .dev2 #sr-cta .rb-eyebrow { color: #fff; }
  .dev2 #sr-cta .rb-sub { color: rgba(255,255,255,0.9); font-size: 0.85rem; }
  .dev2 #sr-cta .btn-ghost { border-color: #fff; color: #fff; }
}
/* Steckbrief-Fenster */
.sr-dlg { clip-path: none !important; margin: 0 !important; padding: 1.2rem !important; }
.sr-dlg .sr-card { cursor: default; }
.sr-dlg .sr-avatar.mit-foto { width: 96px; height: 96px; }
/* Dev2 (Handy): „Alle Fotos" mit kleinen Vorschaubildern – 3 je Reihe, quadratisch, ohne Bildtitel */
@media (max-width: 640px) {
  .dev2 .gal-alle-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .dev2 .gal-alle-k { aspect-ratio: 1 / 1; border-radius: 4px; }
  .dev2 .gal-alle-t { font-size: 0.6rem; padding: 1rem 0.3rem 0.25rem; letter-spacing: 0.02em; }
}
/* Dev2 (Handy): Mannschaftsfoto klein in der Team-Kachel statt Buchstaben-Kreis */
.team-card-foto { display: none; }
@media (max-width: 640px) {
  .dev2 .team-card:has(.team-card-foto) .team-card-badge { display: none; }
  .dev2 .team-card-foto { display: block; flex-shrink: 0; width: 92px; height: 62px; border-radius: 6px; overflow: hidden; background: #222; }
  .dev2 .team-card-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
  .dev2 .team-card { gap: 0.75rem; padding: 0.7rem 0.8rem; }
}
/* Dev2 (Handy): kleinere News-Kacheln – gut zwei auf einen Blick */
@media (max-width: 640px) {
  .dev2 .news-grid { grid-auto-columns: 44%; gap: 0.5rem; }
  .dev2 .news-grid .nc-img { aspect-ratio: 4 / 3; }
  .dev2 .news-grid .nc-body { padding: 0.45rem 0.5rem 0.55rem; }
  .dev2 .news-grid .nc-title { font-size: 0.78rem; -webkit-line-clamp: 3; }
  .dev2 .news-grid .nc-cat, .dev2 .news-grid .nc-date { font-size: 0.56rem; }
  .dev2 .news-grid .nc-link { display: none; }
  .dev2 .news-grid .nc-badge { font-size: 0.52rem; padding: 0.1rem 0.35rem; }
}
/* Dev2 (Handy): Wochen-Umschalter über den News */
.nw-umschalter { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 0.5rem; margin: 0 0 0.7rem;
  background: #fff; border: 1px solid var(--gray-1); border-radius: 10px; padding: 0.4rem; }
.nw-pf { height: 40px; border: 1px solid var(--gray-1); border-radius: 8px; background: #fff; color: var(--red); font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.nw-pf:disabled { color: #ccc; cursor: default; }
.nw-mitte { text-align: center; line-height: 1.2; }
.nw-mitte b { display: block; font-family: var(--font-disp); font-size: 0.98rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--black); }
.nw-mitte span { font-family: var(--font-cond); font-size: 0.78rem; color: var(--gray-4); }
.nw-leer { padding: 1.4rem 1rem; color: var(--gray-4); font-size: 0.9rem; grid-column: 1 / -1; }

/* Desktop-Sponsorenleiste: Logos in Farbe, größer, so viele wie ins Fenster passen (Höhe setzt data.js) */
@media (min-width: 901px) {
  .page-with-sponsors { grid-template-columns: minmax(0, 1fr) 128px; }
  .sponsor-sidebar { width: 128px; }
}
#sponsorSlots.rotating { height: auto; }
#sponsorSlots.rotating .sponsor-slot { height: 84px; min-height: 84px; }
.sponsor-slot { min-height: 84px; padding: 8px 8px; }
.sponsor-slot img { max-width: 104px; max-height: 60px; filter: none; opacity: 1; transition: transform 0.2s; }
.sponsor-slot:hover img { filter: none; transform: scale(1.05); }
.sponsor-sidebar-cta { color: var(--red); }

/* „Alle Teams" – Übersicht im Fenster */
.alle-teams { padding: 0.4rem 0.2rem 1rem; }
.alle-teams h2 { font-family: var(--font-disp); text-transform: uppercase; margin: 0 0 0.6rem; }
.at-gruppe { font-family: var(--font-cond); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin: 1.1rem 0 0.5rem; }
.at-gruppe small { color: var(--gray-4); margin-left: 0.3rem; }
.at-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }
.at-team { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; padding: 0 0 0.55rem; border: 1px solid var(--gray-1); border-top: 3px solid var(--tc, #C8102E); background: #fff; cursor: pointer; text-align: left; font: inherit; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.at-team:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.1); }
.at-team img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 35%; display: block; margin-bottom: 0.3rem; }
.at-badge { width: 100%; aspect-ratio: 3 / 2; display: flex; align-items: center; justify-content: center; background: var(--tc, #C8102E); color: #fff; font-family: var(--font-disp); font-weight: 700; font-size: 1.4rem; margin-bottom: 0.3rem; }
.at-name { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; font-size: 0.9rem; padding: 0 0.6rem; line-height: 1.15; color: var(--black); }
.at-liga { font-family: var(--font-cond); font-size: 0.75rem; color: var(--gray-3); padding: 0 0.6rem; line-height: 1.2; }
@media (max-width: 480px) { .at-raster { grid-template-columns: 1fr 1fr; gap: 0.45rem; } }
/* Dev2: „Mehr vom HTH" – überarbeitete Kacheln (Linien-Symbol im roten Kreis, Titel + Unterzeile) */
.kr-grid { gap: 0.55rem; }
.kr-kachel { grid-template-columns: 40px 1fr auto; gap: 0.6rem; min-height: 72px; padding: 0.7rem 0.6rem 0.7rem 0.7rem; border: 0; border-left: 0; border-radius: 10px;
  background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); }
.kr-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0; }
.kr-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kr-text { display: flex; flex-direction: column; min-width: 0; }
.kr-t { font-size: 0.82rem; line-height: 1.12; }
.kr-u { font-family: var(--font-cond); font-size: 0.72rem; color: var(--gray-4); line-height: 1.2; margin-top: 2px; }
.kr-pf { font-size: 1.2rem; color: #c9c9c9; }
/* Dev2: „Mehr vom HTH" als Zeilen – links Kategorie, rechts Vorschau + „mehr" */
.kr-zeilen { display: flex; flex-direction: column; gap: 0.5rem; }
.kr-zeile { display: grid; grid-template-columns: 45% 1fr auto; align-items: center; gap: 0.6rem; width: 100%; padding: 0.65rem 0.7rem; border: 0; border-radius: 10px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05); text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kr-zeile:active { transform: scale(0.99); }
.kr-links { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.kr-links .kr-ic { width: 36px; height: 36px; flex-shrink: 0; }
.kr-links .kr-ic svg { width: 19px; height: 19px; }
.kr-zeile .kr-t { font-size: 0.76rem; line-height: 1.12; letter-spacing: 0; }
.kr-vorschau { font-family: var(--font-cond); font-size: 0.78rem; line-height: 1.25; color: var(--gray-4); min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border-left: 1px solid var(--gray-1); padding-left: 0.6rem; }
.kr-vorschau b { color: var(--black); font-weight: 700; }
.kr-vorschau i { font-style: normal; color: var(--red); font-weight: 700; }
.kr-bilder { display: flex; gap: 3px; }
.kr-bilder img { width: 30px; height: 30px; object-fit: cover; border-radius: 4px; }
.kr-mehr { font-family: var(--font-cond); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
/* Schiri-Knopf im Startbild: nur wenn Bereich „Schiedsrichter" an ist; direkt unter dem Ranglisten-Knopf */
.hero-schiri { display: none; }
body.bereich-on-schiedsrichter .hero-schiri { display: inline-flex; }
#heroPromo + .hero-schiri { margin-top: -0.9rem; }
/* Handy: Startbild deutlich niedriger, damit die News schon im ersten Bild zu sehen sind */
@media (max-width: 640px) {
  .hero-body { padding-top: 5.6rem !important; padding-bottom: 0.9rem !important; }
  .hero-brand { gap: 0.25rem; margin-bottom: 0.3rem; }
  .hero-logo-img { height: 54px !important; }
  .hero-schrift-top { font-size: clamp(1.05rem, 5.2vw, 1.5rem) !important; margin-bottom: 0.18em !important; }
  .hero-schrift-main { font-size: clamp(2.3rem, 11.2vw, 3.4rem) !important; }
  .hero-schrift-cities { font-size: 0.6rem !important; }
  .hero-tagline { font-size: 0.86rem !important; margin: 0.1rem 0 0.2rem; }
  .hero-tagline-sub { display: none; }
  .hero-promo { margin: 0.55rem 0 0.4rem; padding: 0.42rem 0.9rem; font-size: 0.82rem; }
  #heroPromo + .hero-schiri { margin-top: 0.1rem; }
  .hero-slideshow { height: 64vw; }
  .page-with-sponsors { padding-top: 0.4rem; }
  #news .sec-head { margin-top: 0.6rem; }
}
/* Dev2 (Handy): Trainingszeiten als Wisch-Reihe, Termine als Kalender, Kinderhandball 3 Knöpfe nebeneinander */
.kr-mehr-block { margin: 0.4rem 0 1.6rem; }
.kr-tz { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 0.55rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 calc(-1 * var(--pad-x)); padding: 0.2rem var(--pad-x) 0.6rem; scroll-padding: 0 var(--pad-x); }
.kr-tz::-webkit-scrollbar { display: none; }
.kr-tz-karte { scroll-snap-align: start; background: #fff; border-top: 3px solid var(--red); box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 0.7rem 0.8rem 0.6rem; }
.kr-tz-team { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; margin-bottom: 0.35rem; }
.kr-tz-z { display: grid; grid-template-columns: 1.9rem 1fr; column-gap: 0.4rem; padding: 0.3rem 0; border-top: 1px solid var(--gray-1); font-size: 0.82rem; }
.kr-tz-z b { grid-row: span 2; font-family: var(--font-disp); color: var(--red); }
.kr-tz-z span { font-weight: 600; color: var(--black); }
.kr-tz-z small { color: var(--gray-4); font-size: 0.72rem; line-height: 1.2; }
.kr-tz-z.heute { background: #fff4f5; margin: 0 -0.4rem; padding: 0.3rem 0.4rem; }
.kr-kal { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 0.6rem 0.6rem 0.7rem; }
.kk-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.kk-kopf b { font-family: var(--font-disp); text-transform: uppercase; font-size: 1rem; }
.kk-kopf button { width: 36px; height: 32px; border: 1px solid var(--gray-1); background: #fff; color: var(--red); font-size: 1.2rem; font-weight: 700; border-radius: 6px; }
.kk-wt, .kk-tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.kk-wt span { font-family: var(--font-cond); font-size: 0.68rem; color: var(--gray-4); text-transform: uppercase; }
.kk-tage button { position: relative; aspect-ratio: 1 / 0.85; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 0.85rem; color: var(--black); }
.kk-tage button.hat { background: #fdeff1; font-weight: 700; color: var(--red); }
.kk-tage button.hat i { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); min-width: 5px; height: 5px; border-radius: 3px; background: var(--red); font-style: normal; font-size: 0; }
.kk-tage button.heute { box-shadow: inset 0 0 0 1.5px var(--black); }
.kk-tage button.wahl { background: var(--red); color: #fff; }
.kk-tage button.wahl i { background: #fff; }
.kk-liste { margin-top: 0.6rem; border-top: 1px solid var(--gray-1); padding-top: 0.5rem; }
.kk-datum { font-family: var(--font-cond); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin-bottom: 0.3rem; }
.kk-e { display: grid; grid-template-columns: 2.8rem 1fr auto; gap: 0.4rem; align-items: baseline; padding: 0.28rem 0; font-size: 0.84rem; border-bottom: 1px solid #f2f2f2; }
.kk-e b { font-family: var(--font-cond); color: var(--gray-4); }
.kk-e em { font-style: normal; font-weight: 700; }
.kk-e small { font-family: var(--font-cond); font-size: 0.68rem; color: var(--gray-4); text-transform: uppercase; }
.kk-leer { font-size: 0.85rem; color: var(--gray-4); padding: 0.3rem 0; }
@media (max-width: 640px) {
  .dev2 #juengste .jt-intro, .dev2 #juengste .juengste-cta { display: none; }
  .dev2 #juengste .section-title { font-size: 1.6rem; }
  .dev2 #juengste .jt-club-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 0.45rem; margin-bottom: 0.8rem; }
  .dev2 #juengste .jt-club-card { padding: 0.7rem 0.3rem 0.6rem; gap: 0.3rem; }
  .dev2 #juengste .jt-club-card img { width: 46px; height: 46px; }
  .dev2 #juengste .jt-club-name { font-size: 0.72rem; line-height: 1.1; text-align: center; }
  .dev2 #juengste .jt-club-link { font-size: 0.62rem; }
  .dev2 #juengste, .dev2 #galerie { padding-top: 1.2rem; padding-bottom: 1.2rem; }
}
/* Startbild: Ranglisten- und Schiri-Knopf nebeneinander */
.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; margin: 0.9rem 0 1.4rem; }
.hero-knoepfe .hero-promo { margin: 0 !important; }
#heroPromo + .hero-schiri { margin-top: 0; }
@media (max-width: 640px) {
  .hero-knoepfe { justify-content: center; flex-wrap: nowrap; margin: 0.6rem 0 0.3rem; width: 100%; }
  .hero-knoepfe .hero-promo { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0.5rem 0.6rem; font-size: 0.8rem; line-height: 1.15; text-align: center; }
  .hero-knoepfe .hero-promo-txt { overflow-wrap: anywhere; }
  /* Logo + Schriftzug wieder etwas größer (Platz kommt von den Knöpfen nebeneinander) */
  .hero-logo-img { height: 68px !important; }
  .hero-schrift-top { font-size: clamp(1.25rem, 6.2vw, 1.8rem) !important; }
  .hero-schrift-main { font-size: clamp(2.7rem, 13.2vw, 4rem) !important; }
  .hero-schrift-cities { font-size: 0.66rem !important; }
  .hero-tagline { font-size: 0.95rem !important; }
}
/* Termine: Abschnitt nur mit gepflegten Vereinsterminen; Klick = Details */
#termine.termine-leer { display: none !important; }
.termin-detail { padding: 0.3rem 0.2rem 0.6rem; }
.termin-detail .td-bild { width: 100%; max-height: 260px; object-fit: cover; border-radius: 6px; margin-bottom: 0.8rem; }
.termin-detail h2 { font-family: var(--font-disp); text-transform: uppercase; margin: 0.4rem 0 0.3rem; }
.termin-detail .td-meta { font-family: var(--font-cond); color: var(--gray-4); margin-bottom: 0.8rem; }
.termin-detail .td-ohne { color: var(--gray-4); }

/* Dev2: Spiele & Ergebnisse neu (Mein Team, Tages-Karten, Heimspieltag, Bilanz, Tabellenplatz, Kalender-Abo) */
.sp-neu { margin-bottom: 1.4rem; }
.sn-chips { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; padding: 0.1rem 0 0.6rem; align-items: center; }
.sn-chips::-webkit-scrollbar { display: none; }
.sn-chips-label { font-family: var(--font-cond); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-4); white-space: nowrap; margin-right: 0.15rem; }
.sn-chips button { flex-shrink: 0; border: 1px solid var(--gray-1); background: #fff; border-radius: 999px; padding: 0.32rem 0.75rem; font-family: var(--font-cond); font-weight: 700; font-size: 0.85rem; color: var(--black); cursor: pointer; }
.sn-chips button.an { background: var(--red); border-color: var(--red); color: #fff; }
.sn-kopf { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; background: var(--black); color: #fff; padding: 0.75rem 0.9rem; border-left: 4px solid var(--red); margin-bottom: 0.9rem; }
.sn-kopf-name { font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; line-height: 1.1; }
.sn-platz { font-family: var(--font-cond); font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-top: 0.15rem; }
.sn-platz b { color: #FFD400; }
.sn-abo { flex-shrink: 0; background: #fff; color: var(--black); text-decoration: none; font-family: var(--font-cond); font-weight: 700; font-size: 0.8rem; padding: 0.45rem 0.7rem; border-radius: 6px; white-space: nowrap; }
.sn-h { font-family: var(--font-cond); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin: 0.9rem 0 0.4rem; }
.sn-bilanz { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.sn-bilanz span { font-family: var(--font-cond); font-weight: 700; font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 999px; }
.sn-bilanz .sieg { background: #e3f5e9; color: #0a6b2d; } .sn-bilanz .remis { background: #eee; color: #555; } .sn-bilanz .niederlage { background: #fde8eb; color: #a30d24; }
.sn-erg { display: grid; gap: 0.3rem; }
.sn-e { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: 0.5rem; align-items: center; background: #fff; padding: 0.5rem 0.6rem; border-left: 4px solid #999; cursor: pointer; font-size: 0.88rem; }
.sn-e.sieg { border-left-color: #0a8f3c; } .sn-e.niederlage { border-left-color: var(--red); }
.sn-e-team { font-family: var(--font-cond); font-weight: 700; color: var(--gray-4); font-size: 0.78rem; }
.sn-e-erg { font-family: var(--font-disp); font-weight: 700; font-size: 1.05rem; }
.sn-e.sieg .sn-e-erg { color: #0a8f3c; } .sn-e.niederlage .sn-e-erg { color: var(--red); }
.sn-tag { background: #fff; margin-bottom: 0.6rem; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.sn-tag-kopf { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0.7rem; background: #f3f1ec; font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; font-size: 0.92rem; }
.sn-tag-kopf span { font-family: var(--font-cond); font-weight: 600; font-size: 0.75rem; color: var(--gray-4); text-transform: none; }
.sn-heimtag { margin: 0.45rem 0.6rem 0.2rem; padding: 0.45rem 0.6rem; background: #fff7e0; border-left: 3px solid #FFD400; font-size: 0.82rem; line-height: 1.35; }
.sn-heimtag a { color: var(--red); font-weight: 700; text-decoration: none; }
.sn-s { display: grid; grid-template-columns: 3rem 1fr auto; gap: 0.5rem; align-items: center; padding: 0.5rem 0.7rem; border-top: 1px solid #f0eee8; cursor: pointer; }
.sn-zeit { font-family: var(--font-disp); font-weight: 700; font-size: 0.95rem; }
.sn-mitte { display: flex; flex-direction: column; min-width: 0; }
.sn-paar { font-size: 0.9rem; line-height: 1.25; }
.sn-halle { font-family: var(--font-cond); font-size: 0.76rem; color: var(--gray-4); text-decoration: none; margin-top: 0.1rem; }
.sn-ha { font-family: var(--font-cond); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 4px; background: #eee; color: #555; }
.sn-ha.heim { background: #fde8eb; color: var(--red); }
.sn-leer { color: var(--gray-4); padding: 0.4rem 0; }
/* Dev2: Auswahl Alle/Aktive/Jugend/Team unter den Reitern; alte Tabellen in Ergebnisse/Nächste ausgeblendet */
.sp-neu-an .sn-alt { display: none !important; }
.sn-filter { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; margin: 0.2rem 0 0.9rem; }
.sn-filter button { border: 1px solid var(--gray-1); background: #fff; border-radius: 999px; padding: 0.38rem 0.85rem; font-family: var(--font-cond); font-weight: 700; font-size: 0.88rem; cursor: pointer; color: var(--black); }
.sn-filter button.an { background: var(--red); border-color: var(--red); color: #fff; }
.sn-filter select { flex: 1; min-width: 9rem; border: 1px solid var(--gray-1); border-radius: 999px; padding: 0.38rem 0.8rem; font-family: var(--font-cond); font-weight: 700; font-size: 0.88rem; background: #fff; color: var(--black); }
.sn-filter select.an { background: var(--red); border-color: var(--red); color: #fff; }
.sn-woche { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; text-align: center; font-family: var(--font-disp); font-weight: 700; }
.sn-woche button { height: 36px; border: 1px solid var(--gray-1); background: #fff; color: var(--red); font-size: 1.3rem; font-weight: 700; border-radius: 8px; cursor: pointer; }
.sn-woche button:disabled { color: #ccc; cursor: default; }
/* Dev2: Mehrfachauswahl Teams, Hinweis, Heim/Auswärts je Tag */
.sn-teams-knopf { flex: 1; min-width: 8rem; text-align: left; }
.sn-auswahl { flex-basis: 100%; background: #fff; border: 1px solid var(--gray-1); border-radius: 12px; padding: 0.6rem 0.7rem 0.7rem; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.sn-aw-gr { font-family: var(--font-cond); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin: 0.3rem 0 0.25rem; }
.sn-aw-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 0.6rem; }
.sn-aw-liste label { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.2rem; font-size: 0.88rem; cursor: pointer; }
.sn-aw-liste input { width: 18px; height: 18px; accent-color: var(--red); flex-shrink: 0; }
.sn-aw-knoepfe { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.6rem; }
.sn-tipp { flex-basis: 100%; display: flex; gap: 0.5rem; align-items: flex-start; background: #fff8e1; border-left: 3px solid #FFD400; padding: 0.5rem 0.6rem; font-size: 0.8rem; line-height: 1.35; color: #444; }
.sn-tipp span { flex: 1; }
.sn-tipp button { border: 0; background: none; color: #999; font-size: 0.95rem; cursor: pointer; padding: 0 0.2rem; }
.sn-ha-kopf { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0.7rem 0.2rem; font-family: var(--font-cond); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-4); border-top: 1px solid #f0eee8; }
.sn-ha-kopf.heim { color: var(--red); }
.sn-ha-kopf span { background: #f1f1f1; color: #666; border-radius: 999px; padding: 0 0.45rem; font-size: 0.7rem; }
.sn-ha-kopf + .sn-s { border-top: 0; }
.sn-s { grid-template-columns: 3rem 1fr; }
/* Dev2: Reiter Tabellen, Spiel-Fenster mit Tabelle */
.sp-neu-an .se-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sp-neu-an .se-tabs::-webkit-scrollbar { display: none; }
.sp-neu-an .se-tab { flex-shrink: 0; }
.sn-tabelle { background: #fff; margin-bottom: 0.45rem; box-shadow: 0 1px 6px rgba(0,0,0,.05); border-left: 4px solid var(--red); }
.sn-tabelle summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 0.5rem; padding: 0.6rem 0.75rem; cursor: pointer; list-style: none; }
.sn-tabelle summary::-webkit-details-marker { display: none; }
.sn-tabelle summary b { font-family: var(--font-disp); text-transform: uppercase; font-size: 0.95rem; }
.sn-tabelle summary small { grid-column: 1; font-family: var(--font-cond); color: var(--gray-4); font-size: 0.78rem; }
.sn-tabelle summary .sn-tp { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-cond); font-weight: 700; color: var(--red); }
.sn-tabelle summary::after { content: '▾'; grid-column: 3; grid-row: 1 / span 2; color: #aaa; }
.sn-tabelle[open] summary::after { content: '▴'; }
.sn-tab-inhalt { padding: 0 0.4rem 0.6rem; font-size: 0.85rem; overflow-x: auto; }
.sn-spiel { padding: 1.3rem 1.1rem 1.1rem; }
.sn-sp-liga, .sn-sp-paar { padding-right: 3.2rem; }   /* Platz fürs ✕ */
.sn-spiel .sn-tab-inhalt { margin: 0 -0.3rem; }
.sn-sp-liga { font-family: var(--font-cond); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); }
.sn-sp-paar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-family: var(--font-disp); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; line-height: 1.15; margin: 0.25rem 0; }
.sn-sp-paar .hth { color: var(--red); }
.sn-sp-paar em { font-style: normal; color: #aaa; }
.sn-sp-zeit { font-family: var(--font-cond); font-size: 0.95rem; color: var(--black); }
.sn-sp-halle { display: inline-block; margin: 0.3rem 0 0.4rem; color: var(--red); font-weight: 700; text-decoration: none; font-size: 0.9rem; }
.sn-sp-h { font-family: var(--font-cond); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-4); margin: 0.8rem 0 0.3rem; border-top: 1px solid var(--gray-1); padding-top: 0.6rem; }
tr.tt-gegner td { background: #fff4d6; font-weight: 700; }
.sn-heimtag-spiele { margin: 0 0.6rem 0.3rem; border-left: 3px solid #FFD400; background: #fffdf5; }
.sn-heimtag-spiele .sn-s { padding-left: 0.6rem; }
.sn-heimtag { margin-bottom: 0; }
/* Dev2 Handy: fünf Reiter passen nebeneinander (gleich breit, kleine Schrift, NEU als Ecke) */
@media (max-width: 640px) {
  .sp-neu-an .se-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  .sp-neu-an .se-tab { position: relative; min-width: 0; padding: 0.55rem 0.15rem; font-size: 0.74rem; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; border-radius: 999px; }
  .sp-neu-an .se-tab .se-neu { position: absolute; top: -7px; right: -2px; margin: 0; padding: 0.02rem 0.28rem; font-size: 0.5rem; line-height: 1.3; }
  .sp-neu-an .se-tab:has(.se-neu) { overflow: visible; }
  .sn-filter button, .sn-filter .sn-teams-knopf { padding: 0.36rem 0.65rem; font-size: 0.84rem; }
}

/* Dev2: Ranglisten folgen der gemeinsamen Auswahl (Alle/Aktive/Jugend/Teams) */
.sp-neu-an .se-rang-filter { display: none; }
.sn-rwahl { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 0.7rem; }
.sn-rwahl:empty { display: none; }
.sn-rwahl button { border: 1px solid var(--gray-1); background: var(--gray-0, #f4f4f4); border-radius: 8px; padding: 0.3rem 0.7rem; font-family: var(--font-cond); font-weight: 700; font-size: 0.84rem; cursor: pointer; color: var(--black); }
.sn-rwahl button.an { background: var(--black); border-color: var(--black); color: #fff; }

/* Handy: Logo + Schriftzug größer, Abstand zu „Drei Vereine. Ein Team." nutzen */
@media (max-width: 640px) {
  .hero-logo-img { height: 84px !important; }
  .hero-schrift-top { font-size: clamp(1.4rem, 7vw, 2rem) !important; }
  .hero-schrift-main { font-size: clamp(3rem, 15vw, 4.6rem) !important; }
  .hero-schrift-cities { font-size: 0.72rem !important; }
  .hero-brand { margin-bottom: 0.1rem; }
  .hero-tagline { font-size: 1.05rem !important; margin: 0 0 0.1rem; }
}

/* Dev2 (Handy): Galerie als Bildwand – 3 Reihen kleiner Bilder, als Ganzes seitlich wischbar */
@media (max-width: 640px) {
  html.dev2 .galerie-grid { grid-template-rows: repeat(3, 96px); grid-auto-rows: 96px; grid-auto-columns: 31%; gap: 4px; scroll-snap-type: none; }
  html.dev2 .galerie-grid > * { scroll-snap-align: none; border-radius: 4px; }
  html.dev2 .galerie-overlay { opacity: 1; padding: 0.3rem 0.4rem; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); }
  html.dev2 .galerie-titel { font-size: 0.6rem; letter-spacing: 0.03em; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html.dev2 .galerie-play { width: 28px; height: 28px; font-size: 0.7rem; }
}

/* Dev2: News-Filter unter dem Wochenwechsler */
.nw-filter { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; margin: -0.3rem 0 0.7rem; }
.nw-filter::-webkit-scrollbar { display: none; }
.nw-filter button { flex: none; border: 1px solid var(--gray-1); background: #fff; border-radius: 999px; padding: 0.32rem 0.75rem; font-family: var(--font-cond); font-weight: 700; font-size: 0.84rem; cursor: pointer; color: var(--black); }
.nw-filter button.an { background: var(--red); border-color: var(--red); color: #fff; }
.nw-filter button small { opacity: 0.6; margin-left: 0.15rem; font-variant-numeric: tabular-nums; }

/* Dev2 Ergebnisse: „Alle" neben dem Wochenwechsler, Tageszeilen in der Saisonansicht */
.sn-woche:has(.sn-alle-knopf) { grid-template-columns: 40px 1fr 40px auto; }
.sn-woche.sn-woche-alle { grid-template-columns: 1fr auto; text-align: left; }
.sn-woche .sn-alle-knopf { padding: 0 0.8rem; font-family: var(--font-cond); font-size: 0.88rem; color: var(--black); }
.sn-woche-alle .sn-alle-knopf { color: var(--red); }
.sn-erg-tag { font-family: var(--font-cond); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-4); margin: 0.7rem 0 0.25rem; }
.sn-erg-tag:first-child { margin-top: 0; }

/* ── Dev2 Desktop: dieselben Ideen wie auf dem Handy, an die Breite angepasst ── */
.sn-ha-sp { min-width: 0; }
@media (min-width: 900px) {
  /* Nächste Spiele: Heim und Auswärts nebeneinander; Ergebnisse zweispaltig */
  .sn-ha-beide { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.4rem; align-items: start; }
  .sn-erg { grid-template-columns: 1fr 1fr; column-gap: 0.8rem; }
  .sn-erg-tag { grid-column: 1 / -1; }
  .sp-neu-an .sn-filter, .sp-neu-an .sn-woche, .sp-neu-an .sn-kopf, .sp-neu-an .sn-tipp { max-width: 760px; }
}
@media (min-width: 641px) {
  /* News: Wochenwechsler + Filter schmal über den Kacheln */
  .dev2 .nw-umschalter { max-width: 520px; }
  .dev2 #news .news-grid { grid-template-columns: repeat(5, 1fr); }
  .dev2 .nw-leer { grid-column: 1 / -1; }

  /* Schiedsrichter kompakter: Teamfoto flacher, Fair-Play aufklappbar, Karten in 4 Spalten */
  .dev2 #schiedsrichter .sr-hero-foto { aspect-ratio: 16 / 5; object-position: center 55%; }
  .dev2 #schiedsrichter .sr-hero-cap { display: none; }
  .dev2 .sr-fair { padding: 0.9rem 2rem; }
  .dev2 .sr-fair-kopf { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .dev2 .sr-fair-kopf::after { content: 'mehr ▾'; font-family: var(--font-cond); font-size: 0.75rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); }
  .dev2 .sr-fair.auf .sr-fair-kopf::after { content: 'weniger ▴'; }
  .dev2 .sr-fair:not(.auf) > :not(.sr-fair-kopf) { display: none; }
  .dev2 #srGrid { grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
  .dev2 #srGrid .sr-card { padding: 0.9rem 1rem 1rem; }
  .dev2 #srGrid .sr-avatar.mit-foto, .dev2 #srGrid .sr-avatar { width: 64px; height: 64px; }
  .dev2 #srGrid .sr-ueber { font-size: 0.8rem; line-height: 1.45; }

  /* Teams: Mannschaftsfoto in der Kachel wie auf dem Handy */
  .dev2 .team-card:has(.team-card-foto) .team-card-badge { display: none; }
  .dev2 .team-card-foto { display: block; flex-shrink: 0; width: 96px; height: 64px; border-radius: 6px; overflow: hidden; background: #222; }
  .dev2 .team-card-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
  .dev2 .team-card { gap: 0.8rem; padding: 0.7rem 0.8rem; }
}
@media (min-width: 641px) and (max-width: 1100px) { .dev2 #srGrid { grid-template-columns: repeat(3, 1fr); } .dev2 #news .news-grid { grid-template-columns: repeat(3, 1fr); } }
/* Dev2 Desktop: Schiri-Karten erst zwei Reihen, Rest per Knopf */
.sr-mehr-knopf { display: none; }
@media (min-width: 641px) {
  .dev2 #srGrid:not(.alle) > .sr-card:nth-child(n+9) { display: none; }
  .dev2 .sr-mehr-knopf { display: block; margin: 0.2rem auto 1.4rem; padding: 0.6rem 1.4rem; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35);
    font-family: var(--font-cond); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
  .dev2 .sr-mehr-knopf:hover { border-color: var(--red); background: var(--red); }
}
@media (min-width: 641px) and (max-width: 1100px) { .dev2 #srGrid:not(.alle) > .sr-card:nth-child(n+7) { display: none; } }

/* ── Dev2 Desktop: Navigationsleiste unten wie auf dem Handy, dafür kleineres Startbild und straffere Abschnitte ── */
@media (max-width: 640px) { .bottom-nav a.bn-desk { display: none; } }
@media (min-width: 641px) {
  /* Leiste: schwebend unten mittig, Symbol + Text nebeneinander; „Mehr" entfällt (Menü oben) */
  html.dev2 .bottom-nav {
    display: flex; gap: 0.15rem; position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1001;
    padding: 0.35rem; border-radius: 999px; background: rgba(14,14,14,0.94); border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  html.dev2 .bottom-nav a[data-bn="mehr"] { display: none; }
  html.dev2 .bottom-nav a {
    display: flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem 0.45rem 0.6rem; border-radius: 999px;
    font-family: var(--font-cond); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.65); text-decoration: none; transition: background 0.2s, color 0.2s;
  }
  html.dev2 .bottom-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
  html.dev2 .bottom-nav a.on { color: #fff; background: var(--red); }
  html.dev2 .bn-ic { display: flex; }
  html.dev2 .bn-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html.dev2 body { padding-bottom: 80px; }
  html.dev2 #pushBtn { bottom: 84px !important; }
  html.dev2 .to-top { bottom: 84px; }

  /* Startbild: niedriger, ohne Zahlen/Knöpfe (übernimmt die Leiste) */
  html.dev2 .hero { min-height: 0; height: auto; }   /* Höhe ergibt sich aus dem Inhalt – nichts wird abgeschnitten */
  html.dev2 .hero-body { padding-top: 8.6rem; padding-bottom: 2.4rem; align-items: flex-start; }
  html.dev2 .hero-stats-cta-wrap { display: none !important; }

  /* Abschnitte enger */
  html.dev2 #news, html.dev2 #ergebnisse, html.dev2 #teams-section, html.dev2 #juengste, html.dev2 #galerie { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  html.dev2 #trainingszeiten-home { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  html.dev2 .sr-zone { padding-top: 2.6rem; padding-bottom: 2.6rem; margin-top: 1rem; margin-bottom: 1rem; }
  html.dev2 .tzh-court { display: none; }                               /* großes Hallenbild über den Trainingszeiten */
  html.dev2 #juengste .jt-intro, html.dev2 #juengste .juengste-cta { display: none; }

  /* Galerie als Bildwand: 3 Reihen, 7 Spalten */
  html.dev2 .galerie-grid { grid-template-columns: repeat(7, 1fr) !important; grid-auto-rows: 130px !important; grid-template-rows: none !important; gap: 4px; }
  html.dev2 .galerie-grid > * { grid-column: auto !important; grid-row: auto !important; border-radius: 4px; }
  html.dev2 .galerie-overlay { opacity: 1; padding: 0.35rem 0.5rem; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); }
  html.dev2 .galerie-titel { font-size: 0.66rem; letter-spacing: 0.03em; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  html.dev2 .galerie-play { width: 34px; height: 34px; font-size: 0.8rem; }
}
@media (min-width: 641px) and (max-width: 1100px) { html.dev2 .galerie-grid { grid-template-columns: repeat(5, 1fr) !important; } html.dev2 .bottom-nav a { padding: 0.45rem 0.6rem; font-size: 0.72rem; } }
/* Dev2 Desktop: News-Woche erst zwei Reihen */
.news-mehr-knopf { display: none; }
@media (min-width: 641px) {
  .dev2 #news .news-grid:not(.alle) > .nc:nth-child(n+11) { display: none; }
  .dev2 .news-mehr-knopf:not([hidden]) { display: block; margin: 0.4rem auto 0; padding: 0.55rem 1.3rem; background: #fff; color: var(--black); border: 1px solid var(--gray-1);
    font-family: var(--font-cond); font-weight: 700; font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
  .dev2 .news-mehr-knopf:hover { border-color: var(--red); color: var(--red); }
}
@media (min-width: 641px) and (max-width: 1100px) { .dev2 #news .news-grid:not(.alle) > .nc:nth-child(n+7) { display: none; } }
/* Dev2 Desktop: Logo + Schriftzug kompakter, Knöpfe immer ganz sichtbar */
@media (min-width: 641px) {
  html.dev2 .hero-logo-img { height: clamp(84px, 7vw, 112px); }
  html.dev2 .hero-schrift-top { font-size: clamp(1.4rem, 2.6vw, 2.3rem); }
  html.dev2 .hero-schrift-main { font-size: clamp(2.2rem, 4.2vw, 4rem); margin-bottom: 0.15em; }
  html.dev2 .hero-brand { margin-bottom: 0.4rem; }
  html.dev2 .hero-tagline { margin-top: 0.6rem; }
  html.dev2 .hero-knoepfe { margin: 1rem 0 0; }
}

/* ── Dev2 Desktop: Schiri-Abschnitt deutlich kompakter ── */
@media (min-width: 641px) {
  /* Teamfoto links, Titel + Text rechts statt Foto über die ganze Breite */
  .dev2 #schiedsrichter .sr-hero.mit-foto { display: grid; grid-template-columns: minmax(0, 46%) 1fr; align-items: center; }
  .dev2 #schiedsrichter .sr-hero-foto { aspect-ratio: 16 / 9; height: 100%; object-position: center 60%; }
  .dev2 #schiedsrichter .sr-hero.mit-foto .sr-hero-text { padding: 1rem 1.6rem; }
  .dev2 #schiedsrichter .sr-hero-cap { display: block; font-size: 0.74rem; line-height: 1.45; }
  .dev2 #schiedsrichter .sec-head { margin-bottom: 0.8rem; }
  .dev2 #schiedsrichter .sr-tabs { margin-bottom: 0.8rem; }
  /* eine Reihe Karten, Rest per Knopf */
  .dev2 #srGrid:not(.alle) > .sr-card:nth-child(n+5) { display: none; }
  .dev2 #srGrid { margin-bottom: 0.6rem; }
  .dev2 .sr-mehr-knopf { margin: 0 auto 1rem; padding: 0.45rem 1.2rem; font-size: 0.82rem; }
  /* Warte + Nachwuchs knapper */
  .dev2 .sr-warte { margin-top: 0.4rem; }
  .dev2 #sr-cta { background: var(--red); padding: 1rem 1.6rem; margin-top: 1rem; }
  .dev2 #sr-cta .rb-eyebrow { color: #fff; }
  .dev2 #sr-cta .rb-sub { color: rgba(255,255,255,0.92); font-size: 0.88rem; }
  .dev2 #sr-cta .btn-ghost { border-color: #fff; color: #fff; }
  .dev2 .sr-zone { padding-top: 2rem; padding-bottom: 2rem; }
}
@media (min-width: 641px) and (max-width: 1100px) { .dev2 #srGrid:not(.alle) > .sr-card:nth-child(n+4) { display: none; } }

/* ── Dev2 Desktop: Spiele & Ergebnisse kompakter ── */
@media (min-width: 641px) {
  .sp-neu-an .se-tabs { margin-bottom: 0.7rem; }
  .sp-neu-an .sn-filter { margin-bottom: 0.6rem; }
  /* Spielzeile einzeilig: Paarung links, Halle rechts (gekürzt) */
  .sn-s { padding: 0.32rem 0.7rem; }
  .sn-mitte { flex-direction: row; align-items: baseline; gap: 0.8rem; }
  .sn-paar { flex: 1 1 auto; min-width: 0; }
  .sn-halle { flex: 0 1 45%; margin: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sn-heimtag-spiele .sn-halle { display: none; }   /* Halle steht schon im Heimspieltag-Hinweis */
  .sn-tag-kopf { padding: 0.4rem 0.7rem; }
  .sn-e { padding: 0.38rem 0.6rem; }
}
/* Dev2 Desktop: Schiris noch knapper */
@media (min-width: 641px) {
  .dev2 #schiedsrichter .sr-hero.mit-foto { grid-template-columns: minmax(0, 34%) 1fr; }
  .dev2 #schiedsrichter .sr-hero-cap { display: none; }       /* Namensliste: per Klick aufs Foto */
  .dev2 #schiedsrichter .sr-hero-title { font-size: 1.35rem; }
  .dev2 .sr-fair { padding: 0.6rem 1.6rem; margin-bottom: 1rem; }
  .dev2 #schiedsrichter .sec-head { margin-bottom: 0.5rem; }
  .dev2 .sr-warte { padding: 0.6rem 0.9rem; margin-top: 0.2rem; }
  .dev2 .sr-warte-grid { gap: 0.5rem !important; }
  .dev2 .sr-warte .sr-wart { padding: 0.45rem 0.7rem; }
  .dev2 .sr-warte .sr-wart-badge { width: 32px; height: 32px; font-size: 0.72rem; }
  .dev2 #sr-cta { padding: 0.7rem 1.4rem; gap: 1.2rem; }
  .dev2 #sr-cta .rb-sub { font-size: 0.82rem; line-height: 1.4; }
}
/* Dev2 Desktop: Mannschaftsfotos im Startbild vollständig (niemand abgeschnitten), Rand mit weichem Bild-Hintergrund */
@media (min-width: 641px) {
  html.dev2 .hs-slide { background: #111; overflow: hidden; }
  html.dev2 .hs-slide::before { content: ''; position: absolute; inset: -40px; background: var(--hs-bg, none) center / cover no-repeat; filter: blur(22px) brightness(0.4) saturate(1.1); }
  html.dev2 .hs-slide img { position: relative; object-fit: contain; object-position: center center !important; }
  html.dev2 .hero-slideshow::before { background: linear-gradient(to right, var(--black) 0%, rgba(10,10,10,0.35) 9%, transparent 20%); }
  html.dev2 .hero-slideshow::after { height: 14%; }
}
@media (min-width: 641px) {
  html.dev2 .hero-slideshow { top: 116px; }   /* erst unter Laufleiste + Menü – sonst liegen Köpfe dahinter */
  html.dev2 .hero-body { padding-bottom: 2.8rem; }
}
/* Dev2 Desktop: keine zweite Menüleiste unten – oben gibt es die volle Navigation */
@media (min-width: 641px) {
  html.dev2 .bottom-nav { display: none !important; }
  html.dev2 body { padding-bottom: 0; }
  html.dev2 #pushBtn { bottom: 1.2rem !important; }
  html.dev2 .to-top { bottom: 1.2rem; }
}

/* ── Dev2 Desktop: harmonischer – gleiche Ränder, Auswahl-Elemente mittig ── */
@media (min-width: 641px) {
  /* Minis/E-F und Trainingszeiten waren doppelt eingerückt -> gleiche Kante wie News/Spiele/Teams */
  html.dev2 #juengste, html.dev2 #trainingszeiten-home { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
  html.dev2 .juengste-inner, html.dev2 #juengste > div { padding-left: 0; padding-right: 0; max-width: none; }

  /* News: Wochenwechsler + Filter mittig */
  html.dev2 .nw-umschalter { margin-left: auto; margin-right: auto; }
  html.dev2 .nw-filter { justify-content: center; }

  /* Spiele: Auswahl, Hinweis, Wochenwechsler, Team-Kopf, Bilanz mittig */
  html.dev2 .sp-neu-an .sn-filter { justify-content: center; max-width: none; }
  html.dev2 .sp-neu-an .sn-tipp { flex-basis: auto; width: 100%; max-width: 760px; margin: 0 auto; }
  html.dev2 .sp-neu-an .sn-auswahl { max-width: 760px; margin-left: auto; margin-right: auto; }
  html.dev2 .sp-neu-an .sn-woche { max-width: 560px; margin-left: auto; margin-right: auto; }
  html.dev2 .sp-neu-an .sn-woche.sn-woche-alle { max-width: 560px; }
  html.dev2 .sp-neu-an .sn-kopf { max-width: 760px; margin-left: auto; margin-right: auto; }
  html.dev2 .sn-bilanz { justify-content: center; }
  html.dev2 .sn-rwahl { justify-content: center; }
  html.dev2 .se-rang-filter, html.dev2 #seRangOut > .rl-sub, html.dev2 #seRangOut > .se-m-note { text-align: center; justify-content: center; }

  /* Weitere Umschalter mittig: Schiri-Reiter, Team-Reiter, Trainingszeiten-Reiter */
  html.dev2 .sr-tabs, html.dev2 .tzh-tabs { justify-content: center; }
  html.dev2 .team-tabs { justify-content: center; }
}
/* Dev2 Desktop: Schiri-Fläche als Box wie „Werde Teil der Familie" statt schräg angeschnitten */
@media (min-width: 641px) {
  html.dev2 .sr-zone {
    clip-path: none; border-radius: 16px; margin: 1.6rem 0;
    padding: 2rem clamp(1.4rem, 3vw, 2.4rem) 2.2rem !important;
    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);
  }
  html.dev2 #sr-cta { border-radius: 12px; margin-bottom: 0; }
}

/* Dev2: Spiele & Ergebnisse – stärkerer Kontrast zum hellen Seitenhintergrund (Handy + Desktop) */
.sp-neu .sn-tag { border: 1px solid #ddd8ce; border-radius: 8px; overflow: hidden; box-shadow: 0 3px 12px rgba(0,0,0,0.07); margin-bottom: 0.8rem; }
.sp-neu .sn-tag-kopf { background: var(--black); color: #fff; }
.sp-neu .sn-tag-kopf span { color: rgba(255,255,255,0.65); }
.sp-neu .sn-ha-kopf { background: #f7f5f0; border-top: 1px solid #e6e1d8; }
.sp-neu .sn-s { border-top-color: #ebe7df; }
.sp-neu .sn-s:hover { background: #fbfaf7; }
.sp-neu .sn-heimtag { background: #fff2c4; }
.sp-neu .sn-heimtag-spiele { background: #fffbec; }
.sp-neu .sn-e { border-top: 1px solid #e3ded5; border-right: 1px solid #e3ded5; border-bottom: 1px solid #e3ded5; border-radius: 0 6px 6px 0; box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
.sp-neu .sn-e:hover { background: #fbfaf7; }
.sp-neu .sn-tabelle { border: 1px solid #ddd8ce; border-left: 4px solid var(--red); border-radius: 0 8px 8px 0; box-shadow: 0 3px 10px rgba(0,0,0,0.06); }
.sp-neu .sn-woche button { border-color: #d3cdc2; }
.sp-neu-an .se-tab:not(.active) { border-color: #d3cdc2; color: #444; }
.sp-neu-an .sn-filter button:not(.an) { border-color: #d3cdc2; }
/* Heim/Auswärts zweispaltig: dezente Trennlinie zwischen den Spalten */
@media (min-width: 900px) { .sp-neu .sn-ha-beide > .sn-ha-sp + .sn-ha-sp { border-left: 1px solid #e6e1d8; } .sp-neu .sn-ha-beide { gap: 0; } }

/* ══════════════════════════════════════════════════════════════════
   Dev2 Desktop: ein gemeinsames Gestaltungssystem statt Stückwerk
   – eine Kartenart (weiß, 10px Rundung, feiner Rand, leichter Schatten)
   – ein heller Hintergrund; dunkel nur Schiri-Box + Banner
   – eine Inhaltsbreite von oben bis unten (gleiche Kanten wie mit Sponsorenleiste)
   – gleiche Abstände und Überschriften
   ══════════════════════════════════════════════════════════════════ */
:root { --k-rand: #e2ddd4; --k-rad: 10px; --k-schatten: 0 2px 10px rgba(0,0,0,0.06); --k-schatten-hover: 0 8px 22px rgba(0,0,0,0.10); }
@media (min-width: 641px) {
  /* gemeinsame Karte */
  html.dev2 .nc, html.dev2 .team-card, html.dev2 .jt-club-card, html.dev2 .tzh-team, html.dev2 .sn-tabelle, html.dev2 .sp-neu .sn-tag {
    background: #fff; border: 1px solid var(--k-rand) !important; border-radius: var(--k-rad) !important; box-shadow: var(--k-schatten); overflow: hidden;
  }
  html.dev2 .nc:hover, html.dev2 .team-card:hover, html.dev2 .jt-club-card:hover { transform: translateY(-2px); box-shadow: var(--k-schatten-hover); }
  html.dev2 .tzh-team { padding: 1rem 1.1rem; }
  html.dev2 .jt-club-card { padding: 1.2rem 1rem; }
  html.dev2 .sn-tabelle { border-left: 4px solid var(--red) !important; }      /* Ergebnis-/Tabellen-Akzent bleibt */

  /* gemeinsame Umschalter: Pillen wie bei Spiele/News, mittig */
  html.dev2 .team-tabs { border: 0; background: none; gap: 0.4rem; justify-content: center; overflow: visible; }
  html.dev2 .team-tab { border: 1px solid #d3cdc2; border-radius: 999px; background: #fff; color: #444; padding: 0.45rem 1.1rem; margin: 0; font-family: var(--font-cond); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.04em; }
  html.dev2 .team-tab.active { background: var(--red); border-color: var(--red); color: #fff; }
  html.dev2 .tzh-tabs button, html.dev2 .sr-tab { border-radius: 999px; }

  /* gleiche Überschriften + Abstände in jedem Abschnitt */
  html.dev2 .sec-head { margin-bottom: 1.1rem; }
  html.dev2 .section-title { font-size: 1.4rem !important; }
  html.dev2 #news, html.dev2 #ergebnisse, html.dev2 #teams-section, html.dev2 #juengste, html.dev2 #trainingszeiten-home { padding-top: 2.2rem !important; padding-bottom: 1.2rem !important; margin-top: 0 !important; margin-bottom: 0 !important; background: transparent; }
  html.dev2 .juengste-section { background: transparent; }

  /* Galerie, Partner, Fanshop: heller Hintergrund und dieselben Kanten wie oben */
  html.dev2 .galerie-section, html.dev2 .partner-wall { background: var(--off-white, #f6f4f0); border-top: 0; box-shadow: none; padding: 2.2rem var(--pad-x) 1.4rem; width: 100%; }
  html.dev2 .galerie-inner, html.dev2 .partner-wall-inner { max-width: none; padding: 0; margin: 0; }
  html.dev2 .galerie-inner .sec-head .section-title { color: var(--black); }
  html.dev2 .galerie-grid > * { border-radius: 8px; }
  html.dev2 .partner-wall-label { color: var(--black); font-family: var(--font-disp); font-size: 1.4rem; letter-spacing: 0.05em; text-align: left; padding-bottom: 0.6rem; border-bottom: 2px solid var(--red); margin-bottom: 1.1rem; }
  html.dev2 .pw-kachel { border: 1px solid var(--k-rand); box-shadow: var(--k-schatten); }
  html.dev2 .partner-cta a { color: var(--red); }
  html.dev2 .shop-teaser { background: none; padding: 1rem var(--pad-x) 2.6rem; }
  html.dev2 .shop-teaser-inner { max-width: none; margin: 0; padding: clamp(1.4rem, 3vw, 2.2rem); 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); }
  html.dev2 #sr-cta + *, html.dev2 .recruit-banner { border-radius: 16px; }
}
/* Mit Sponsorenleiste (ab 901px) ist der Inhalt oben um die Leistenbreite schmaler – unten dieselbe rechte Kante */
@media (min-width: 901px) {
  html.dev2 .galerie-section, html.dev2 .partner-wall, html.dev2 .shop-teaser { padding-right: calc(var(--pad-x) + 128px); }
}
@media (min-width: 641px) and (max-width: 900px) {
  html.dev2 .galerie-section, html.dev2 .partner-wall, html.dev2 .shop-teaser { padding-right: calc(var(--pad-x) + 110px); }
}
body.bereich-off-sponsoren .galerie-section, body.bereich-off-sponsoren .partner-wall, body.bereich-off-sponsoren .shop-teaser { padding-right: var(--pad-x) !important; }
/* Dev2 Desktop: Team-Gruppen-Reiter als Pillen (wie alle anderen Umschalter), mittig */
@media (min-width: 641px) {
  html.dev2 .team-group-tabs { border-bottom: 0; gap: 0.4rem; justify-content: center; margin-bottom: 1rem; }
  html.dev2 .tgt { border: 1px solid #d3cdc2; border-radius: 999px; background: #fff; color: #444; padding: 0.45rem 1.2rem; font-family: var(--font-cond); font-size: 0.86rem; letter-spacing: 0.04em; }
  html.dev2 .tgt:hover { background: #fff; color: var(--red); border-color: var(--red); }
  html.dev2 .tgt.active { background: var(--red); border-color: var(--red); color: #fff; }
}
/* Dev2 Desktop: Galerie liegt jetzt in der Inhaltsspalte (neben der Sponsorenleiste) */
@media (min-width: 641px) {
  html.dev2 .page-content-area > #galerie { padding-left: var(--pad-x) !important; padding-right: var(--pad-x) !important; background: transparent; }
}
/* Dev2 Handy: Kinderhandball-Kacheln ohne rote Oberkante (drei rote Linien nebeneinander wirkten unruhig) */
@media (max-width: 640px) {
  html.dev2 #juengste .jt-club-card { border-top: 1px solid var(--gray-1); border-radius: 10px; }
}
/* Dev2 Handy: Schiri-Sektion als Box wie „Werde Teil der Familie" statt schrägem Band */
@media (max-width: 640px) {
  html.dev2 .sr-zone {
    clip-path: none; border-radius: 16px; margin: 1.4rem 0;
    padding: 1.4rem 1rem 1.3rem !important;
    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);
  }
  html.dev2 #sr-cta { border-radius: 12px; }
}

/* Dev2 Handy: Hinweis unter Wisch-Reihen – kleine Fortschrittsleiste + „wischen ›" */
.wisch-anz { display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin: -0.2rem 0 1rem; }
.wisch-anz[hidden] { display: none; }
.wisch-spur { position: relative; width: 72px; height: 4px; border-radius: 2px; background: rgba(0,0,0,0.12); overflow: hidden; }
.wisch-daumen { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; background: var(--red); transition: left 0.08s linear; }
.wisch-txt { font-family: var(--font-cond); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-4); animation: wischStups 2.4s ease-in-out infinite; }
.wisch-anz.am-ende .wisch-txt { visibility: hidden; animation: none; }
@keyframes wischStups { 0%, 60%, 100% { transform: none; } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .wisch-txt { animation: none; } }
#newsGrid + .wisch-anz { margin-top: -1.2rem; }
.sr-zone .wisch-spur { background: rgba(255,255,255,0.18); }
.sr-zone .wisch-txt { color: rgba(255,255,255,0.55); }
#galerie .wisch-anz { margin-top: 0.3rem; }

/* Dev2 Handy: Team-Reiter als Pillen nebeneinander (wie Desktop und alle anderen Umschalter) */
@media (max-width: 640px) {
  html.dev2 .team-group-tabs { flex-direction: row; flex-wrap: nowrap; border-bottom: 0; gap: 0.4rem; justify-content: center; margin-bottom: 0.8rem; }
  html.dev2 .tgt { border: 1px solid #d3cdc2; border-radius: 999px; background: #fff; color: #444; padding: 0.42rem 1.1rem; font-family: var(--font-cond); font-size: 0.86rem; letter-spacing: 0.04em; }
  html.dev2 .tgt.active { background: var(--red); border-color: var(--red); color: #fff; }
}

/* Dev2: Trainingszeiten als eigenes weißes Band (hebt sich von Teams und Minis ab), Karten ohne zweite rote Linie */
@media (max-width: 640px) {
  html.dev2 #krMehr { background: #fff; margin: 1.6rem calc(-1 * var(--pad-x)) 0.6rem; padding: 1.5rem var(--pad-x) 0.4rem; border-top: 1px solid #e6e1d8; border-bottom: 1px solid #e6e1d8; }
  html.dev2 .kr-tz-karte { border-top: 0; border: 1px solid var(--k-rand); border-radius: 10px; box-shadow: var(--k-schatten); background: #fff; }
  html.dev2 #krMehr .wisch-anz { margin-bottom: 0.9rem; }
  html.dev2 #juengste { padding-top: 1.6rem; }
}
@media (min-width: 641px) {
  html.dev2 #trainingszeiten-home { background: #fff; margin: 1.6rem calc(-1 * var(--pad-x)) 0.4rem !important; padding: 2rem var(--pad-x) 1.6rem !important;
    border-top: 1px solid #e6e1d8; border-bottom: 1px solid #e6e1d8; width: auto !important; }
  html.dev2 .tzh-team { border-top: 1px solid var(--k-rand) !important; }
}
/* Dev2 Handy: Minis-Abschnitt nicht doppelt einrücken (gleiche Kante wie Teams/Training) */
@media (max-width: 640px) { html.dev2 #juengste { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0.4rem; } }

/* ══ Dev2: Hell-Dunkel-Rhythmus ══
   Inhalt hell → „Werde Teil der Familie" als dunkles Band (Stil wie Fanshop, leichtes Rot, volle Breite)
   → Galerie hell → ab Partnern durchgehend dunkel bis zum Ende */
html.dev2 #kontakt.recruit-banner {
  margin: 2rem calc(-1 * var(--pad-x)) 0; border-radius: 0; border: 0; box-shadow: none;
  padding: 2.4rem var(--pad-x); background: linear-gradient(135deg, #1b1b1b 0%, #2a0d12 100%);
}
html.dev2 .galerie-section { background: var(--off-white, #f6f4f0); }
html.dev2 .galerie-inner .sec-head .section-title { color: var(--black); }
html.dev2 #galerie .sec-more { color: var(--red); }
@media (min-width: 641px) {
  /* Partner + Fanshop wieder dunkel und über die volle Breite (Leiste rechts endet ja davor) */
  html.dev2 .partner-wall { background: var(--black-2); border-top: 3px solid var(--red); box-shadow: 0 -1px 0 0 rgba(200,16,46,0.3); padding: 3rem var(--pad-x) 2.6rem !important; }
  html.dev2 .partner-wall-inner { max-width: var(--max-w); margin: 0 auto; }
  html.dev2 .partner-wall-label { font-family: var(--font-cond); font-size: 0.72rem; font-weight: 600; color: var(--red); letter-spacing: 0.22em; text-align: center; border: 0; padding: 0; margin-bottom: 1.6rem; }
  html.dev2 .pw-kachel { border: 0; box-shadow: none; }
  html.dev2 .partner-cta a { color: rgba(255,255,255,0.35); }
  html.dev2 .shop-teaser { background: linear-gradient(135deg, #1b1b1b 0%, #2a0d12 100%); padding: 2.4rem var(--pad-x) !important; }
  html.dev2 .shop-teaser-inner { max-width: var(--max-w); margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  html.dev2 .page-content-area > #galerie { padding-bottom: 2.4rem !important; }
}

/* Handy: Fußbereich ohne Navigations-Spalte (die feste Leiste unten übernimmt das) */
@media (max-width: 640px) {
  .footer-col:has(> .footer-col-title.ft-nav) { display: none; }
}
/* Handy-Fußbereich: Logo, Text und Stammvereine mittig; Kontakt und Hallen nebeneinander */
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 1.6rem 1.2rem !important; }
  .footer-inner > div:first-child { grid-column: 1 / -1; text-align: center; }
  .footer-inner > div:first-child .footer-logo { justify-content: center; }
  .footer-inner > div:first-child .footer-logo img { margin-left: auto; margin-right: auto; }
  .footer-inner .footer-stammvereine { justify-content: center; }
  .footer-inner .footer-desc { max-width: 32ch; margin-left: auto; margin-right: auto; }
  .footer-inner .footer-col { min-width: 0; }
  .footer-inner .footer-col li, .footer-inner .footer-col a { overflow-wrap: anywhere; }
}
/* Dev2 Desktop: Hoch-Pfeil wie auf dem Handy (links neben der Sponsorenleiste, damit er keine Logos verdeckt) */
@media (min-width: 769px) {
  html.dev2 .to-top { display: block; right: 150px; bottom: 1.4rem; }
  html.dev2 .to-top:hover { background: var(--red-dk, #a00d24); transform: translateY(-2px); }
}
@media (min-width: 769px) and (max-width: 900px) { html.dev2 .to-top { right: 128px; } }
body.bereich-off-sponsoren .to-top { right: 18px !important; }
/* Handy: unter der Fußzeile Platz für die schwebenden Knöpfe (News abonnieren, Hoch-Pfeil) */
@media (max-width: 640px) { .footer-bottom { padding-bottom: 5.2rem !important; } }
/* Handy: Fanshop läuft fließend ins Schwarz des Fußbereichs über (keine harte Kante) */
@media (max-width: 640px) {
  .shop-teaser { background: linear-gradient(170deg, #1b1b1b 0%, #2a0d12 45%, #170a0d 75%, var(--black) 100%) !important; padding-bottom: 2.8rem !important; }
  .shop-teaser + .site-footer, .site-footer { border-top: 0; }
}

/* ══ Abschluss neu (Partner-Knopf, Fanshop, Fußbereich) ══ */
.fsoc-txt { display: none; }
.fsv { display: inline-flex; transition: transform 0.15s; }
.fsv:hover { transform: translateY(-2px); }
.fsv:hover img { opacity: 1 !important; }
/* „Sponsor werden" als richtiger Knopf (Handy + Desktop) */
.partner-cta a { display: inline-block; padding: 0.6rem 1.3rem !important; border: 1px solid var(--red) !important; border-radius: 999px; color: #fff !important;
  font-size: 0.8rem !important; letter-spacing: 0.08em; background: rgba(200,16,46,0.12); transition: background 0.2s; }
.partner-cta a:hover { background: var(--red); }

@media (max-width: 640px) {
  /* 1) alles auf einer Mittelachse */
  .shop-teaser-inner { flex-direction: column !important; align-items: center !important; text-align: center; gap: 1rem !important; }
  .shop-teaser { padding-top: 2rem !important; padding-bottom: 1.6rem !important; }
  /* 2) Fanshop-Knopf normal groß statt über die volle Breite */
  .shop-teaser-btn { width: auto !important; padding: 0.75rem 1.5rem; }
  .site-footer { padding-top: 1.2rem; }

  .footer-inner { grid-template-columns: 1fr !important; gap: 1.4rem !important; text-align: center; padding-bottom: 1.4rem; }
  .footer-inner .footer-logo img { height: 64px !important; }
  .footer-inner .footer-desc { color: rgba(255,255,255,0.55); font-size: 0.85rem; margin-bottom: 0.4rem; }
  /* 5) Stammvereine größer, farbig, verlinkt */
  .footer-inner .footer-stammvereine { gap: 1.4rem !important; margin-top: 0.6rem !important; }
  .footer-inner .footer-stammvereine img { height: 44px !important; opacity: 1 !important; }
  .footer-col-title { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.6rem; font-size: 0.74rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.5); }
  /* 3) Kontakt als Knöpfe */
  .footer-inner .footer-col:not(:has(#footerHallen)) ul { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
  .footer-inner .footer-col:not(:has(#footerHallen)) li { margin: 0; }
  .footer-inner .footer-col:not(:has(#footerHallen)) li a { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.6rem 1rem; border-radius: 999px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 0.85rem; font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.03em; }
  .footer-inner .footer-col:not(:has(#footerHallen)) li a[data-kontakt="kontakt"]::before { content: '✉'; }
  .footer-inner .footer-col:not(:has(#footerHallen)) li a[data-kontakt="kontakt"] { font-size: 0; gap: 0; }
  .footer-inner .footer-col:not(:has(#footerHallen)) li a[data-kontakt="kontakt"]::before { font-size: 0.95rem; }
  .footer-inner .footer-col:not(:has(#footerHallen)) li a[data-kontakt="kontakt"]::after { content: 'Nachricht schreiben'; font-size: 0.85rem; margin-left: 0.35rem; }
  .footer-inner .footer-col:not(:has(#footerHallen)) li a[data-kontakt="sponsor"]::before { content: '🤝'; }
  /* Hallen mit Pin – Tipp öffnet Karte + Route */
  #footerHallen li { margin-bottom: 0.35rem; }
  #footerHallen li a { color: rgba(255,255,255,0.75); font-size: 0.9rem; }
  #footerHallen li a::before { content: '📍 '; }
  #footerHallen li a::after { content: ' ›'; color: var(--red); }
  /* 4) Instagram als Aufruf, 6) Rechtliches + © darunter */
  .footer-bottom { flex-direction: column; gap: 0.9rem; padding-top: 1.3rem; border-top-color: rgba(255,255,255,0.08); }
  .footer-social { order: 1; }
  .footer-legal { order: 2; gap: 0.4rem; justify-content: center; }
  .footer-copy { order: 3; }
  .fsoc { width: auto; height: auto; padding: 0.6rem 1.1rem; gap: 0.5rem; border-radius: 999px; background: linear-gradient(135deg, #833ab4, #e1306c 55%, #f77737); color: #fff; }
  .fsoc-txt { display: inline; font-family: var(--font-cond); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.02em; }
  .fsoc-txt b { font-weight: 700; }
  .footer-legal a { padding: 0.5rem 0.7rem; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
  .footer-copy { font-size: 0.72rem; color: rgba(255,255,255,0.35); }
}

/* Weiße Linie unter dem Fanshop (wie über dem Fanshop) – Handy + Desktop */
.site-footer { border-top: 2px solid var(--off-white, #f6f4f0); }

/* Desktop-Fußbereich an das Handy angeglichen (Spalten bleiben) */
@media (min-width: 641px) {
  .footer-inner .footer-stammvereine { gap: 1rem !important; margin-top: 0.9rem !important; }
  .footer-inner .footer-stammvereine img { height: 38px !important; opacity: 1 !important; }
  .footer-desc { color: rgba(255,255,255,0.55); }
  .footer-col-title { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.8rem; letter-spacing: 0.18em; color: rgba(255,255,255,0.5); font-size: 0.74rem; }
  /* Kontakt als Knöpfe untereinander */
  .footer-col:has([data-kontakt]) ul { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .footer-col:has([data-kontakt]) li { margin: 0; }
  .footer-col:has([data-kontakt]) li a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; border-radius: 999px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); color: #fff; font-size: 0.82rem; font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.03em; }
  .footer-col:has([data-kontakt]) li a:hover { background: var(--red); border-color: var(--red); color: #fff; }
  .footer-col li a[data-kontakt="kontakt"] { font-size: 0 !important; gap: 0 !important; }
  .footer-col li a[data-kontakt="kontakt"]::before { content: '✉'; font-size: 0.9rem; }
  .footer-col li a[data-kontakt="kontakt"]::after { content: 'Nachricht schreiben'; font-size: 0.82rem; margin-left: 0.4rem; }
  .footer-col li a[data-kontakt="sponsor"]::before { content: '🤝'; }
  /* Hallen mit Pin */
  #footerHallen li a { color: rgba(255,255,255,0.75); font-size: 0.85rem; }
  #footerHallen li a::before { content: '📍 '; }
  #footerHallen li a::after { content: ' ›'; color: var(--red); }
  /* Instagram als Pille */
  .fsoc { width: auto; height: auto; padding: 0.5rem 1rem; gap: 0.5rem; border-radius: 999px; background: linear-gradient(135deg, #833ab4, #e1306c 55%, #f77737); color: #fff; }
  .fsoc-txt { display: inline; font-family: var(--font-cond); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em; }
  .footer-legal a { color: rgba(255,255,255,0.5); font-size: 0.78rem; }
  .footer-copy { color: rgba(255,255,255,0.35); }
}
@media (max-width: 640px) { .site-footer { border-top: 2px solid var(--off-white, #f6f4f0) !important; } }

/* Spiel-Fenster: Liga (Tabelle, letzter/nächster Spieltag, Team-Filter) */
.sn-fokus-tipp { font-size: 0.8rem; color: var(--gray-4); margin: 0.6rem 0 0; }
.sn-fokus { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.7rem 0 0; padding: 0.5rem 0.7rem; background: #fde8eb; border-left: 4px solid var(--red); border-radius: 0 6px 6px 0; font-size: 0.9rem; }
.sn-fokus-x { border: 1px solid var(--red); background: #fff; color: var(--red); border-radius: 999px; padding: 0.25rem 0.7rem; font-family: var(--font-cond); font-weight: 700; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
.sn-lg { display: grid; grid-template-columns: 4.6rem 1fr auto; gap: 0.5rem; align-items: center; padding: 0.38rem 0.2rem; border-bottom: 1px solid #eee; font-size: 0.86rem; }
.sn-lg-d { font-family: var(--font-cond); font-size: 0.76rem; color: var(--gray-4); line-height: 1.15; }
.sn-lg-p { min-width: 0; line-height: 1.3; }
.sn-lg-e { font-family: var(--font-disp); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sn-lg-leer { font-size: 0.85rem; color: var(--gray-4); padding: 0.3rem 0.2rem; }
.sn-tn { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: #d8d2c8; text-underline-offset: 2px; }
.sn-tn:hover, .sn-tn.an { color: var(--red); text-decoration-color: var(--red); }
.sn-tn.an { font-weight: 700; }
.sn-tr-tipp { cursor: pointer; }
.sn-tr-tipp:hover td { background: #faf7f2; }
tr.sn-tr-fokus td { background: #fde8eb !important; font-weight: 700; }