/* =========================
   Startseite: Grund-Setup
   ========================= */
:root{
  --header-h: 64px;   /* ggf. an header.css anpassen */
  --next-h:   48px;
  --page-bg:  #1a1c21;
  --fg:       #ffffff;
}

html, body{
  background: var(--page-bg);
  color: var(--fg);
}

/* =========================
   Terminleiste (Next Event)
   ========================= */
.next-event{
  background:#ffffffc9;
  color:#0e1a2b;
  border-bottom:1px solid #ffffffc9;
  height:var(--next-h);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:0 1rem;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.next-event .label{ font-weight:700; }
.next-event .value{ opacity:.9; }

/* =========================
   HERO (mit softem Fade)
   ========================= */
.hero{
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 45vw, 1000px);
  display: grid;
  place-items: center;
  z-index: 1;
}
.hero .hero-media{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* Fade in Seitenhintergrund (#1a1c21) */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(26,28,33,0) 62%,
    rgba(26,28,33,0.65) 85%,
    rgba(26,28,33,1) 100%
  );
  pointer-events:none;
}
.hero .hero-content{
  position: relative; z-index: 1;
  text-align: center;
  padding: 0 1rem;
}
.hero .hero-content h1{
  margin: 0 0 .25rem;
  font-size: clamp(1.8rem, 1.1rem + 3vw, 3rem);
  font-weight: 900;
}
.hero .hero-content p{
  margin: 0;
  font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
  opacity: .95;
}

/* kleiner Abstand zum News-Block */
#news{ margin-top: 1.25rem; }

/* =========================================
   Detailansicht News: Bild komplett zeigen
   ========================================= */
.article-hero{
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  max-height: 80vh; /* Deckel für Portraits */
  margin: .75rem 0;
}
.article-hero img{
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* sanfter Fade unten (Seitenfarbe anpassen bei Bedarf) */
.article-hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    to bottom,
    rgba(26,28,33,0) 78%,
    rgba(26,28,33,.55) 90%,
    rgba(26,28,33,1) 100%
  );
  pointer-events:none;
}

/* =========================================
   TEAMS – Laufband: „kleine Kästen“ (breiter)
   ========================================= */
#teams.teams-ticker{
  max-width:1280px;
  margin:1.5rem auto 2.2rem;
  padding:0;
}
#teams .ticker-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1rem .4rem;
}
#teams .ticker-title{
  font-family:"TT Neoris","News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:700; font-style:italic; font-size:1.1rem; margin:0;
}

/* Viewport + Endlos-Track (mit Rand-Fade) */
#teams .ticker-viewport{
  position:relative; overflow:hidden; width:100%;
  padding:.35rem 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}
#teams .ticker-track{
  display:flex; gap:.9rem; align-items:stretch;
  animation: teams-scroll var(--duration, 24s) linear infinite;
  will-change: transform;
}
@keyframes teams-scroll { from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
#teams .ticker-viewport:hover .ticker-track{ animation-play-state: paused; }

/* Kästchen (ohne Linien), jetzt ~80% breiter */
#teams .chip.chip-card{
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  width: 800px;      /* vorher 220px → +80% */
  min-height: 180px;
  padding:.7rem .75rem;
  background:#1f2228;  /* dezente Fläche; keine Ränder/Schatten */
  white-space:normal;
  gap:.35rem;
}
/* Logo oben klein */
#teams .chip-card .tm-logo{ display:grid; place-items:center; margin-bottom:.2rem; }
#teams .chip-card .tm-logo img{ width:28px; height:28px; object-fit:contain; display:block; background:#121418; }
#teams .chip-card .tm-logo .ph{ width:28px; height:28px; display:grid; place-items:center; background:#121418; font-weight:800; font-size:.8rem; }

/* Zeilen im Kasten */
#teams .chip-card .tm-line{ display:flex; flex-direction:column; gap:.1rem; }
#teams .chip-card .tm-line .label{
  font-size:.78rem; color:#c7cbd2; letter-spacing:.15px; text-transform:uppercase;
}
#teams .chip-card .tm-line .value{
  font-size:.92rem; font-weight:700; line-height:1.25;
}
#teams .chip-card .tm-name .value{
  font-family:"TT Neoris","News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
#teams .chip-card .tm-next .value{ font-weight:600; color:#c7cbd2; }

/* Responsive Tweaks */
@media (max-width:860px){
  #teams .chip.chip-card{ width: 360px; min-height:170px; padding:.6rem .65rem; }
  #teams .chip-card .tm-line .value{ font-size:.9rem; }
}
@media (max-width:560px){
  #teams .chip.chip-card{ width: 342px; min-height:165px; }
}

/* >>> Override: Kästchen wirklich ~80% breiter machen */
#teams.teams-ticker .ticker-viewport .ticker-track .chip.chip-card{
  display: flex;             /* falls 'inline-flex' irgendwo greift */
  flex: 0 0 396px;           /* feste Boxbreite im Flex-Track */
  width: 396px;
  max-width: 396px;
  min-height: 180px;
  padding: .7rem .75rem;
  background: #1f2228;
  white-space: normal;
  gap: .35rem;
}

/* Responsives Tuning passend dazu */
@media (max-width: 860px){
  #teams.teams-ticker .ticker-viewport .ticker-track .chip.chip-card{
    flex: 0 0 360px;
    width: 360px;
    max-width: 360px;
    min-height: 170px;
    padding: .6rem .65rem;
  }
}
@media (max-width: 560px){
  #teams.teams-ticker .ticker-viewport .ticker-track .chip.chip-card{
    flex: 0 0 342px;
    width: 342px;
    max-width: 342px;
    min-height: 165px;
  }
}

/* TEAMS: zentrierte Typo + Fonts wie im restlichen Auftritt */
#teams.teams-ticker .ticker-viewport .ticker-track .chip.chip-card{
  text-align: center;
  align-items: center;           /* Inhalt im Kasten horizontal zentrieren */
  font-family: "News Cycle", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Jede Info-Zeile im Kasten mittig ausrichten */
#teams .chip-card .tm-line{
  align-items: center;           /* Spalten-Inhalt zentrieren */
}

/* Labels (klein, News Cycle) */
#teams .chip-card .tm-line .label{
  font-family: "News Cycle", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: .78rem;
  letter-spacing: .15px;
  text-transform: uppercase;
  color: #c7cbd2;
}

/* Werte (Standard: News Cycle, fett) */
#teams .chip-card .tm-line .value{
  font-family: "News Cycle", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
}

/* Teamname prominenter: TT Neoris wie bei Überschriften */
#teams .chip-card .tm-name .value{
  font-family: "TT Neoris","News Cycle", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
}

/* „Nächstes Spiel“ leicht dezenter, aber zentriert */
#teams .chip-card .tm-next .value{
  font-family: "News Cycle", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  color: #c7cbd2;
}

/* Logo hat schon zentrierte Grid-Ausrichtung, zur Sicherheit: */
#teams .chip-card .tm-logo{ justify-items: center; }

/* TEAMS: Überschrift stylen + blauer Streifen darunter */
#teams .ticker-header{
  position: relative;
  padding: 0 1rem .6rem; /* etwas Platz für die Linie */
}

#teams .ticker-title{
  font-family: "TT Neoris","News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.8rem);
  letter-spacing: .2px;
  margin: 0;
}

/* voller blauer Streifen unter der Überschrift (mit gleichen Seitenabständen wie Header) */
#teams .ticker-header::after{
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 4px;
  background: #0d47a1; /* Vereinsblau */
  pointer-events: none;
}

/* ===== Banners ===== */
#banners{
  max-width:1280px; margin:2rem auto 3rem; padding:0 1rem;
  display:grid; gap:1.1rem;
}
.banner{
  display:grid; grid-template-columns: 1.15fr 1fr;
  gap:1rem; align-items:stretch;
  background:#1f2228; /* dezente Fläche, keine Rahmen */
  padding: .9rem; 
}
.banner--reverse{ grid-template-columns: 1fr 1.15fr; }
.banner--reverse .banner__img{ order:2; }
.banner--reverse .banner__content{ order:1; }

.banner__img{ position:relative; overflow:hidden; }
.banner__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio: 16/9;        /* hält Höhe konsistent */
  border:1px solid rgba(255,255,255,.12);
}

.banner__content{
  display:flex; flex-direction:column; justify-content:center; gap:.6rem;
  padding:.6rem .3rem;
  text-align:left;
}
.banner__title{
  font-family:"TT Neoris","News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:800; font-style:italic;
  font-size:clamp(1.2rem,1rem + 1.2vw,1.8rem);
  margin:0;
}
.banner__text{
  font-family:"News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:1.02rem; line-height:1.5; color:#cfd3db;
  margin:0;
}
.banner__btn{
  display:inline-block;
  align-self:flex-start;
  margin-top:.3rem;
  font-weight:800;
  text-decoration:none;
  padding:.5rem .8rem;
  background:#0d47a1; color:#fff;
  border:1px solid rgba(255,255,255,.12);
}
.banner__btn:hover{ filter:brightness(1.05); }

/* Responsive */
@media (max-width: 900px){
  .banner,
  .banner--reverse{
    grid-template-columns: 1fr; 
  }
  .banner--reverse .banner__img{ order:0; }
  .banner--reverse .banner__content{ order:0; }
  .banner__content{ text-align:center; }
  .banner__btn{ align-self:center; }
}

/* ===== Banner-Komponenten ===== */
#banners, .banner-wrap{ max-width:1280px; margin:2rem auto; padding:0 1rem; }
.banner{
  display:grid; grid-template-columns: 1.15fr 1fr;
  gap:1rem; align-items:stretch;
  background:#1f2228; /* dezente Fläche */
  padding:.9rem;
}
.banner--reverse{ grid-template-columns: 1fr 1.15fr; }
.banner--reverse .banner__img{ order:2; }
.banner--reverse .banner__content{ order:1; }

.banner__img{ position:relative; overflow:hidden; }
.banner__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio: 16/9; border:1px solid rgba(255,255,255,.12);
}

.banner__content{
  display:flex; flex-direction:column; justify-content:center; gap:.6rem;
  padding:.6rem .3rem; text-align:left;
}
.banner__title{
  font-family:"TT Neoris","News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:800; font-style:italic;
  font-size:clamp(1.2rem,1rem + 1.2vw,1.8rem);
  margin:0;
}
.banner__text{
  font-family:"News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:1.02rem; line-height:1.5; color:#cfd3db;
  margin:0;
}
.banner__btn{
  display:inline-block; align-self:flex-start; margin-top:.3rem;
  font-weight:800; text-decoration:none; padding:.5rem .8rem;
  background:#0d47a1; color:#fff; border:1px solid rgba(255,255,255,.12);
}
.banner__btn:hover{ filter:brightness(1.05); }

/* Responsive */
@media (max-width: 900px){
  .banner, .banner--reverse{ grid-template-columns: 1fr; }
  .banner--reverse .banner__img{ order:0; }
  .banner--reverse .banner__content{ order:0; }
  .banner__content{ text-align:center; }
  .banner__btn{ align-self:center; }
}
/* Banner: Texte + Button zentrieren (für beide Varianten) */
.banner .banner__content{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;   /* zentriert auch die Zeilen */
  gap: .6rem;
}

.banner .banner__btn{
  align-self: center;    /* Button mittig unter dem Text */
}

/* Optional: etwas Luft nach unten für bessere Balance */
.banner .banner__title{ margin-bottom: .1rem; }
.banner .banner__text{  max-width: 52ch; } /* Zeilenlänge angenehm halten */

/* ===== FOOTER ===== */
#site-footer{
  margin-top: 2rem;
  color: #fff;
  /* Fade: schwarz → dunkelgrau */
  background: linear-gradient(to bottom, #000 0%, #17191e 60%, #1a1c21 100%);
}

/* Innenbreite */
#site-footer .wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ==== NEU: Partner-/Brand-Logos (statt Sponsor) ==== */
#site-footer .footer-brands{ padding: 1.2rem 0 0.6rem; }
#site-footer .brand-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(6, minmax(0,1fr));
}
#site-footer .brand-item{
  display: grid; place-items: center;
  padding: .4rem;
}
#site-footer .brand-item img{
  max-width: 100%;
  max-height: 52px;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(15%) contrast(105%);
}

/* Drei Spalten (ohne visuelle Linien) */
#site-footer .footer-top{ padding: 1.2rem 0 1.4rem; }
#site-footer .cols-3{
  display: grid; gap: 1rem 2rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
#site-footer .col h4{
  font-family:"TT Neoris","News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:800; font-style:italic;
  font-size: 1.05rem; margin: 0 0 .4rem;
}
#site-footer .col p{
  margin: 0; line-height: 1.6;
  font-family:"News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#d7dbe3;
}
#site-footer a{ color:#fff; text-decoration: underline; text-underline-offset: 2px; }

/* Untere Linkzeile */
#site-footer .footer-bottom{ padding: .8rem 0 0; }
#site-footer .bottom-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; padding: .4rem 0 .8rem;
}
#site-footer .brand{
  font-family:"TT Neoris","News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:800; font-style:italic; letter-spacing:.2px;
}
#site-footer .legal{
  display:flex; flex-wrap:wrap; gap:.8rem 1rem;
}
#site-footer .legal a{
  font-family:"News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  opacity:.95;
}

/* Abschluss-Streifen (dunkelblau) */
#site-footer .footer-strip{
  height: 6px;
  background: #0d47a1;
}

/* Responsive */
@media (max-width: 1024px){
  #site-footer .brand-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 720px){
  #site-footer .brand-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  #site-footer .cols-3{ grid-template-columns: 1fr; }
  #site-footer .bottom-row{ flex-direction: column; align-items: flex-start; gap: .6rem; }
}
/* Footer: große Marke + Logo */
#site-footer .bottom-row{
  align-items: center;
}

#site-footer .brand-wrap{
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 56px;
}

#site-footer .brand-logo{
  width: clamp(44px, 2.5vw, 64px);
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0)); /* sauber */
}

#site-footer .brand{
  font-family:"TT Neoris","News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight: 900;
  font-style: italic;
  /* Deutlich größer */
  font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
  letter-spacing: .3px;
  line-height: 1.05;
  margin: 0;
}

/* Bei kleinen Screens untereinander anordnen */
@media (max-width: 720px){
  #site-footer .bottom-row{
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  #site-footer .brand-wrap{
    gap: .6rem;
  }
}

/* FOOTER: Logo & Schrift deutlich größer */
#site-footer .brand-wrap{
  gap: 1rem;
  min-height: 88px;              /* mehr Raum */
}

#site-footer .brand-logo{
  /* deutlich größer, skaliert mit Viewport */
  width: clamp(72px, 5vw, 128px);
  max-height: 128px;             /* Sicherheitsdeckel */
  height: auto;
  object-fit: contain;
}

#site-footer .brand{
  /* Schrift etwas mitwachsen lassen, aber unter Logo bleiben */
  font-size: clamp(2.2rem, 1.2rem + 3.5vw, 4rem);
  line-height: 1.05;
}

/* Auf sehr kleinen Screens etwas kompakter */
@media (max-width: 720px){
  #site-footer .brand-wrap{
    gap: .75rem;
    min-height: 72px;
  }
  #site-footer .brand-logo{
    width: clamp(64px, 12vw, 96px);
    max-height: 96px;
  }
  #site-footer .brand{
    font-size: clamp(1.8rem, 1rem + 3vw, 3rem);
  }
}

/* ==== NEU: Partner-/Brand-Logos größer + Grid-Tuning ==== */
#site-footer .footer-brands{ padding: 1.6rem 0 1rem; }
#site-footer .brand-grid{
  gap: 1.25rem;
  grid-template-columns: repeat(5, minmax(0,1fr));
}
#site-footer .brand-item{ padding: .6rem; }
#site-footer .brand-item img{
  max-height: clamp(72px, 9vw, 120px);
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(10%) contrast(105%);
  transition: transform .15s ease, filter .15s ease;
}
#site-footer .brand-item img:hover{
  transform: scale(1.04);
  filter: grayscale(0%) contrast(110%);
}

/* Breakpoints feinjustiert */
@media (max-width: 1200px){
  #site-footer .brand-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 800px){
  #site-footer .brand-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  #site-footer .brand-item img{ max-height: clamp(64px, 12vw, 100px); }
}
@media (max-width: 520px){
  #site-footer .brand-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  #site-footer .brand-item img{ max-height: clamp(56px, 14vw, 88px); }
}

/* --- Logos im Header/Foot sichtbar & kompakt (inkl. Legacy-Klassen) --- */

/* Container */
header.site-header .sponsors,
header.site-header .partners,               /* NEU, falls Header umbenannt */
#site-footer .brand-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  min-width: 0 !important;
}

/* Items: min-width 100px */
header.site-header .sponsor,
header.site-header .partner,                /* NEU */
#site-footer .brand-item{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 100px !important;
  height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Bilder neutralisieren */
header.site-header .sponsor img,
header.site-header .partner img,            /* NEU */
#site-footer .brand-item img{
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;

  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
}

/* Figure-Defaults killen (Legacy) */
figure.sponsor{ margin: 0 !important; }

/* Userbox immer oberhalb */
.center-group .userbox,
.center-group .login-btn{
  position: relative !important;
  z-index: 2 !important;
}

/* Mitte nicht überdecken */
.center-group .sponsors,
.center-group .partners{
  position: relative !important;
  z-index: 1 !important;
}
/* ===== Breite Next-Game-Karte (unabhängig von .next-event) ===== */
.next-game{
  display:grid;

  gap:14px;
  align-items:center;


       /* unter dem HERO platzieren */
  padding: 18px 22px;

  /* Vereinslook: dunkler Verlauf + blaues Detail unten */
  background: linear-gradient(180deg, #24272e 0%, #1b1e24 100%);
  color:#e9e9e9;
  border:1px solid #3a3f48;
  border-radius: 0;          /* klare Kanten */
  position: relative;
}
.next-game::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:#0d47a1;        /* Vereinsblau */
}

@media (max-width:720px){
  .next-game{ grid-template-columns:1fr; gap:10px; padding: 16px; }
}

/* Logo links (nur bei Spiel) */
.ng-logo{
  width:76px; height:76px;
  border:1px solid #3a3f48; background:#0e1217;
  display:grid; place-items:center; overflow:hidden;
}
.ng-logo img{ max-width:72px; max-height:72px; display:block; }

/* Content rechts */
.ng-content{ display:grid; gap:6px; }
.ng-eyebrow{
  font-size:.95rem; color:#cfcfcf; font-weight:800; letter-spacing:.3px; text-transform:uppercase;
}
.ng-match{
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem);
  line-height:1.15; font-weight:900; letter-spacing:.2px;
  display:flex; flex-wrap:wrap; gap:.45rem .55rem;
}
.ng-match .vs{ opacity:.8; padding: 0 .15rem; }
.ng-title{ font-size:1.35rem; font-weight:800; letter-spacing:.2px; }

.ng-sub{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  color:#cfcfcf; font-size:1rem;
}
.ng-sub .dot{ opacity:.6; }
/* ===== Vollbreiter, weißer Next-Game-Streifen ===== */
.next-game.next-game--strip{
  /* aus Container „ausbrechen“: 100vw Edge-to-Edge */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: rgba(255,255,255,0.92); /* wie deine alte Leiste */
  color: #0e1a2b;
  border-bottom: 1px solid rgba(255,255,255,0.92);

  /* Abstand unter dem Header */
  /* height nicht fixen, damit Match+Sub untereinander passen */
  padding: 10px 14px;

  /* Schrift wie deine alte Leiste */
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Innen-Layout: zentriert, aber Inhalt schön breit */
.next-game.next-game--strip .ng-inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 12px;

  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

@media (max-width: 720px){
  .next-game.next-game--strip .ng-inner{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 8px;
  }
}

/* Logo links (nur bei Spiel) */
.next-game.next-game--strip .ng-logo{
  width: 48px; height: 48px;
  display: grid; place-items: center; overflow: hidden;
  background: transparent; border: 0;
}
.next-game.next-game--strip .ng-logo img{
  max-width: 44px; max-height: 44px; display: block;
}

/* Inhalt: Match fett, Datum/Uhrzeit darunter */
.next-game.next-game--strip .ng-content{ display: grid; gap: 2px; }

.next-game.next-game--strip .ng-match{
  font-weight: 900;
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: .2px;
}
.next-game.next-game--strip .ng-match .vs{ opacity:.85; padding: 0 .2rem; }

.next-game.next-game--strip .ng-title{
  font-weight: 800;
  font-size: clamp(1.05rem, 0.9rem + .6vw, 1.4rem);
  line-height: 1.15;
}

.next-game.next-game--strip .ng-sub{
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  font-size: clamp(.95rem, .9rem + .3vw, 1.05rem);
  opacity: .95;
}
.next-game.next-game--strip .ng-sub .dot{ opacity: .6; }

@media (max-width: 720px){
  .next-game.next-game--strip .ng-sub{
    justify-content: center;
  }
}
/* ==== HERO: Horizontal-Scroll fix ==== */
html, body{
  overflow-x: hidden; /* unterbindet seitliches Scrollen global */
}

.hero{
  width: 100%;
  max-width: 100%;
  overflow: hidden;           /* bleibt: schneidet Überstände */
  box-sizing: border-box;     /* Sicherheit bei Padding/Fades */
}

.hero .hero-media{
  position: absolute;
  inset: 0;
  display: block;             /* verhindert Inline-Gaps */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: 100%;            /* kein Stretch über den Viewport */
}

/* Falls irgendwo was zu breit wird (z.B. lange Wörter im Titel) */
.hero .hero-content{
  max-width: 100%;
  overflow-wrap: anywhere;    /* bricht lange Worte/URLs um */
}
/* === MOBILE-HERO: absolut + contain (evtl. Letterboxing) === */
@media (max-width: 720px){
  .hero{ min-height: 55vh; }    /* oder 50–60vh, nach Geschmack */
  .hero .hero-media{
    object-fit: contain;        /* kein Zuschneiden */
    background: #1a1c21;        /* füllt freie Flächen */
  }
}
/* === HERO Mobile Optimierung: Kein Cropping, keine Ränder, kein Overscroll === */
@media (max-width: 720px){
  .hero{
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;     /* Text unten zentrieren */
    align-items: center;
    min-height: 90vh;              /* fast voller Bildschirm */
    padding: 0;
  }

  .hero .hero-media{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;             /* kein Letterboxing */
    object-position: center 25%;   /* leicht nach oben rücken, damit Köpfe etc. sichtbar bleiben */
  }

  .hero .hero-content{
    position: relative;
    z-index: 2;
    padding: 1.2rem 1rem 2.4rem;   /* Abstand von unten */
    text-align: center;
    background: linear-gradient(to top, rgba(26,28,33,0.8) 0%, rgba(26,28,33,0) 60%);
    width: 100%;
    box-sizing: border-box;
  }

  .hero::after{
    display: none;                 /* alten Fade entfernen, wir blenden schon über Content */
  }
}
/* === HERO: Mobile kompakt & ohne Seiten-Scroll === */
html, body { overflow-x: hidden; }

@media (max-width: 720px){
  .hero{
    width: 100%;
    max-width: 100%;
    /* kompakte Höhe: nicht winzig, nicht riesig */
    min-height: clamp(240px, 55vw, 420px);
    display: grid;
    place-items: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;                 /* keine Zusatzluft */
  }

  .hero .hero-media{
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* kein Letterboxing, wirkt „voll“ */
    object-position: var(--hero-pos, center 30%); /* Fokus etwas höher */
    max-width: none;            /* verhindert ungewollte Begrenzung */
  }

  .hero .hero-content{
    position: relative;
    z-index: 1;
    text-align: center;
    padding: .6rem 1rem 1rem;   /* klein halten */
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* weicher, kurzer Fade – ohne extra Höhe zu erzeugen */
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(
      to bottom,
      rgba(26,28,33,0) 70%,
      rgba(26,28,33,.5) 88%,
      rgba(26,28,33,1) 100%
    );
    pointer-events:none;
  }
}
/* === MOBILE FOOTER: Alles zentrieren === */
@media (max-width: 720px){
  #site-footer .cols-3,
  #site-footer .col,
  #site-footer .footer-top,
  #site-footer .footer-bottom,
  #site-footer .bottom-row,
  #site-footer .brand-wrap,
  #site-footer .legal {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  #site-footer .col p,
  #site-footer .col h4 {
    text-align: center;
  }

  #site-footer .legal {
    flex-direction: column;
    gap: .4rem;
  }

  #site-footer .bottom-row {
    flex-direction: column;
    gap: .6rem;
  }

  #site-footer .brand-wrap {
    flex-direction: column;
    gap: .5rem;
  }

  #site-footer .brand-grid {
    justify-content: center;
  }
}