<?php
header('Content-Type: text/css; charset=utf-8');
require __DIR__ . '/verbindung.php';

$cfg = [
 'green'=>'#07873D','green_dark'=>'#004D26','white'=>'#FFFFFF','black'=>'#090B0A','surface'=>'#F5F7F6',
 'radius'=>'28','content'=>'1500','gap'=>'20','font_size'=>'16',
 'font_family'=>'Inter',
 'font_heading'=>'Oswald',
 'font_subheading'=>'Roboto Condensed',
 'font_nav'=>'Inter',
 'font_label'=>'Oswald',
 'font_results_score'=>'Oswald',
 'font_table_value'=>'Inter',
 'font_datetime'=>'Roboto Condensed',
 'font_history_year'=>'Oswald'
];
$keyMap=[
 'color_green'=>'green','color_green_dark'=>'green_dark','color_white'=>'white','color_black'=>'black','color_surface'=>'surface',
 'radius_card'=>'radius','content_width'=>'content','slider_gap'=>'gap','font_size_base'=>'font_size'
];
try{
 if(isset($dbh)&&$dbh instanceof mysqli){
  $dbh->set_charset('utf8mb4');
  $res=$dbh->query("SELECT design_key,value FROM design WHERE active=1");
  if($res){while($r=$res->fetch_assoc()){
   $k=(string)$r['design_key']; $v=(string)$r['value'];
   if(isset($keyMap[$k])) $cfg[$keyMap[$k]]=$v;
   elseif(strpos($k,'font_')===0) $cfg[$k]=$v;
  }}
 }
}catch(Throwable $e){}
function hg_css_color($v,$fallback){return preg_match('/^#[0-9A-Fa-f]{6}$/',(string)$v)?$v:$fallback;}
function hg_css_font_name($v,$fallback){$v=trim((string)$v);return preg_match('/^[\\p{L}\\p{N} .&\\x27()_-]{1,120}$/u',$v)?$v:$fallback;}
function hg_css_font_stack_value($v){return "'".str_replace("'","",$v)."',Arial,sans-serif";}
$cfg['green']=hg_css_color($cfg['green'],'#07873D'); $cfg['green_dark']=hg_css_color($cfg['green_dark'],'#004D26');
$cfg['white']=hg_css_color($cfg['white'],'#FFFFFF'); $cfg['black']=hg_css_color($cfg['black'],'#090B0A'); $cfg['surface']=hg_css_color($cfg['surface'],'#F5F7F6');
$fontKeys=[]; foreach(array_keys($cfg) as $k){if(strpos($k,'font_')===0 && $k!=='font_size')$fontKeys[]=$k;}
foreach($fontKeys as $k)$cfg[$k]=hg_css_font_name($cfg[$k],$k==='font_heading'?'Oswald':'Inter');
$families=[]; foreach($fontKeys as $k)$families[$cfg[$k]]=true;
$fontGroups=array_chunk(array_keys($families),8);
?>
<?php foreach($fontGroups as $group): $parts=[]; foreach($group as $f)$parts[]='family='.str_replace('%20','+',rawurlencode($f)); ?>
@import url('https://fonts.googleapis.com/css2?<?= implode('&',$parts) ?>&display=swap');
<?php endforeach; ?>
:root{
 --hg-green:<?= $cfg['green'] ?>;--hg-green-dark:<?= $cfg['green_dark'] ?>;--hg-green-light:#1DB760;--hg-black:<?= $cfg['black'] ?>;--hg-white:<?= $cfg['white'] ?>;--hg-surface:<?= $cfg['surface'] ?>;--hg-text:#111311;--hg-muted:#626963;
 --hg-radius:<?= max(0,min(60,(int)$cfg['radius'])) ?>px;--hg-content:<?= max(960,min(2000,(int)$cfg['content'])) ?>px;--hg-gap:<?= max(8,min(60,(int)$cfg['gap'])) ?>px;--hg-font-size:<?= max(12,min(22,(int)$cfg['font_size'])) ?>px;
<?php foreach($fontKeys as $k): ?> --hg-<?= str_replace('_','-',substr($k,5)) ?>:<?= hg_css_font_stack_value($cfg[$k]) ?>;
<?php endforeach; ?>}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--hg-surface);
  color:var(--hg-text);
  font-family:var(--hg-family);
  font-size:var(--hg-font-size);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1,h2,.hg-section-heading{font-family:var(--hg-heading)}
h3,h4,h5,h6,.hg-panel__title,.hg-team-card h3,.hg-news strong{font-family:var(--hg-subheading)}
.hg-nav,.hg-nav a,.hg-btn,.hg-brand__name{font-family:var(--hg-nav)}
.hg-eyebrow,.hg-section-label,.hg-swipe-hint{font-family:var(--hg-label)}
.hg-result__score{font-family:var(--hg-font-results-score)}
.hg-table td{font-family:var(--hg-font-table-value)}
.hg-game strong,.hg-news small,.hg-result__meta{font-family:var(--hg-font-datetime)}
.hg-history__year{font-family:var(--hg-font-history-year)}
button,input,select{font:inherit}
img{max-width:100%;display:block}

.hg-shell{
  width:min(calc(100% - 34px),var(--hg-content));
  margin-inline:auto;
}

/* =========================================================
   NAVIGATION
   ========================================================= */
.hg-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:var(--hg-black);
  color:#fff;
  border-radius:0 0 54px 54px;
  box-shadow:0 10px 28px rgba(0,0,0,.17);
}
.hg-nav__inner{
  min-height:78px;
  display:flex;
  align-items:center;
  gap:32px;
}
.hg-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:285px;
}
.hg-logo{
  width:48px;
  height:54px;
  display:grid;
  place-items:center;
  border:3px solid #fff;
  border-radius:14px 14px 18px 18px;
  background:linear-gradient(180deg,#0b6d39,var(--hg-green-dark));
  color:#fff;
  line-height:.9;
  text-align:center;
  font-weight:950;
}
.hg-brand__name{
  font-size:1.08rem;
  font-weight:950;
  letter-spacing:.04em;
}
.hg-brand__claim{
  margin-top:3px;
  color:var(--hg-green-light);
  font-family:var(--hg-subheading);
  font-size:.72rem;
}
.hg-nav__links{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.hg-nav__links a{
  padding:11px 13px;
  border-radius:999px;
  text-transform:uppercase;
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.04em;
  transition:transform .2s cubic-bezier(.2,1.7,.4,1),background .2s ease;
}
.hg-nav__links a:hover{
  background:var(--hg-green);
  transform:translateY(-3px) scale(1.05);
}
.hg-nav__right{
  display:flex;
  align-items:center;
  gap:9px;
}
.hg-icon-btn{
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
}
.hg-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:42px;
  padding:0 22px;
  border:0;
  border-radius:999px;
  background:linear-gradient(180deg,#10a84e,var(--hg-green));
  color:#fff;
  font-weight:900;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(4,106,48,.20);
  transition:transform .2s ease,filter .2s ease;
}
.hg-btn::after{content:"›";font-size:1.25rem;line-height:1}
.hg-btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
.hg-btn--light{
  background:#fff;
  color:#111;
  border:1px solid #c9cecb;
  box-shadow:none;
}

/* =========================================================
   HERO – großer weiß/grüner Ballbogen
   ========================================================= */
.hg-hero{
  position:relative;
  min-height:505px;
  overflow:hidden;
  background:#fff;
}
/* V16.5 – Handballnetz: volle Hero-Breite, nach unten weich auslaufend */
.hg-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.40;
  background:
    repeating-linear-gradient(35deg, transparent 0 24px, rgba(7,135,61,.14) 24px 26px),
    repeating-linear-gradient(145deg, transparent 0 24px, rgba(7,135,61,.14) 24px 26px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.25) 84%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 38%,rgba(0,0,0,.72) 62%,rgba(0,0,0,.25) 84%,transparent 100%);
}

.hg-hero__shape{
  position:absolute;
  right:-7%;
  top:-125px;
  width:63%;
  height:505px;
  border-radius:0 0 0 68%;
  background:
    radial-gradient(circle at 66% 30%,rgba(255,255,255,.10),transparent 18%),
    radial-gradient(circle at 78% 52%,rgba(255,255,255,.05),transparent 28%),
    linear-gradient(135deg,#006433 0%,#003d22 74%,#002d19 100%);
  transform:rotate(-4deg);
  z-index:1;
}
.hg-hero__shape::before{
  content:"";
  position:absolute;
  inset:12px 0 -8px 14px;
  border-radius:0 0 0 68%;
  border-left:5px solid rgba(255,255,255,.95);
  border-bottom:5px solid rgba(255,255,255,.95);
  pointer-events:none;
}
.hg-hero__shape::after{
  content:"";
  position:absolute;
  left:-150px;
  bottom:-95px;
  width:135%;
  height:175px;
  background:#fff;
  border-radius:50% 50% 0 0 / 95% 95% 0 0;
  transform:rotate(2.1deg);
}
.hg-hero__ball{
  position:absolute;
  left:39%;
  top:166px;
  width:96px;
  height:96px;
  z-index:6;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%,#35cf72 0 10%,transparent 11%),
    conic-gradient(from 20deg,#042b18 0 13%,#0c8646 13% 27%,#072c19 27% 42%,#169b50 42% 58%,#052818 58% 74%,#0c8445 74% 88%,#052818 88%);
  box-shadow:inset -12px -12px 20px rgba(0,0,0,.30),0 10px 25px rgba(0,0,0,.18);
  border:5px solid #082a19;
}
.hg-hero__ball::before,
.hg-hero__ball::after{
  content:"";
  position:absolute;
  border:3px solid rgba(255,255,255,.22);
  border-radius:50%;
}
.hg-hero__ball::before{inset:11px 24px 25px 10px}
.hg-hero__ball::after{inset:30px 9px 11px 34px}
.hg-hero__player{
  position:absolute;
  right:29%;
  bottom:54px;
  width:315px;
  height:335px;
  z-index:5;
  filter:drop-shadow(0 18px 16px rgba(0,0,0,.20));
}
.hg-hero__player::before{
  content:"";
  position:absolute;
  inset:18px 22px 0;
  background:linear-gradient(145deg,#08703a,#003b22);
  clip-path:polygon(28% 0,72% 0,100% 22%,88% 100%,12% 100%,0 22%);
}
.hg-hero__player::after{
  content:"85";
  position:absolute;
  inset:75px 0 0;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:7rem;
  font-weight:950;
  letter-spacing:-.08em;
}
.hg-hero__copy{
  position:relative;
  z-index:8;
  max-width:600px;
  padding-top:68px;
}
.hg-eyebrow{
  color:var(--hg-green);
  font-size:.76rem;
  text-transform:uppercase;
  font-weight:950;
  letter-spacing:.05em;
}
.hg-hero h1{
  margin:10px 0 15px;
  font-size:clamp(3.8rem,6.8vw,6.7rem);
  line-height:.82;
  letter-spacing:-.065em;
  text-transform:uppercase;
  font-weight:950;
  font-style:italic;
}
.hg-hero h1 .green{color:var(--hg-green)}
.hg-hero__copy p{
  max-width:530px;
  color:#303632;
  line-height:1.55;
  font-size:.96rem;
}
.hg-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.hg-hero__claim{
  position:absolute;
  right:8.5%;
  top:155px;
  z-index:7;
  color:#fff;
  font-family:var(--hg-heading);
  font-size:1.45rem;
  line-height:1.28;
  font-weight:950;
  font-style:italic;
}
.hg-hero__claim span{color:var(--hg-green-light)}
.hg-hero__dots{
  position:absolute;
  right:12%;
  top:275px;
  z-index:8;
  display:flex;
  gap:13px;
}
.hg-hero__dots i{
  width:10px;height:10px;border-radius:50%;background:#fff;opacity:.9
}
.hg-hero__dots i:first-child{background:var(--hg-green-light)}

/* =========================================================
   TEAM-CAROUSEL / KARTEIKARTEN – IMMER SWIPEBAR
   ========================================================= */
.hg-teams{
  position:relative;
  background:#fff;
  padding:20px 0 34px;
}
.hg-team-layout{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:32px;
  align-items:center;
}
.hg-section-label{
  color:var(--hg-green);
  font-size:.7rem;
  font-weight:950;
  text-transform:uppercase;
}
.hg-section-heading{
  margin:8px 0 18px;
  font-size:2.25rem;
  line-height:.94;
  letter-spacing:-.04em;
  font-weight:950;
  font-style:italic;
}
.hg-section-copy{
  color:#373d39;
  font-size:.86rem;
  line-height:1.5;
}
.hg-swipe-area{min-width:0}
.hg-swipe-hint{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  color:var(--hg-green);
  text-transform:uppercase;
  font-size:.66rem;
  font-weight:950;
}
.hg-swipe-hint::before{content:"☝";font-size:1.65rem}
.hg-swipe{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - (5 * var(--hg-gap))) / 6);
  gap:var(--hg-gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-inline:contain;
  padding:4px 24px 18px 2px;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.hg-swipe>*{scroll-snap-align:start}
.hg-team-card{
  min-width:0;
  overflow:hidden;
  background:#fff;
  border-radius:12px;
  box-shadow:0 5px 16px rgba(0,0,0,.14);
}
.hg-team-card__image{
  position:relative;
  height:112px;
  background:
    radial-gradient(circle at 18% 44%,#0e9d50 0 7%,transparent 8%),
    radial-gradient(circle at 40% 50%,#08492b 0 9%,transparent 10%),
    radial-gradient(circle at 66% 42%,#08713c 0 9%,transparent 10%),
    linear-gradient(120deg,#082f1d,#0c6d3c);
}
.hg-team-card__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.28));
}
.hg-team-card__icon{
  position:relative;
  width:34px;
  height:34px;
  margin:-18px 0 0 12px;
  z-index:2;
  border-radius:50%;
  border:3px solid #fff;
  background:var(--hg-green);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:.66rem;
  font-weight:900;
}
.hg-team-card__body{padding:9px 13px 14px}
.hg-team-card h3{
  margin:0 0 6px;
  text-transform:uppercase;
  font-size:.88rem;
  font-weight:950;
}
.hg-team-card small{font-size:.69rem;color:#4e554f}
.hg-slider-dots{
  display:flex;
  justify-content:center;
  gap:9px;
  margin-top:3px;
}
.hg-slider-dots i{
  width:8px;height:8px;border-radius:50%;background:#d7dad8
}
.hg-slider-dots i:first-child{background:var(--hg-green)}

/* =========================================================
   HISTORIE – dunkles gerundetes Band
   ========================================================= */
.hg-history{
  position:relative;
  background:linear-gradient(110deg,#002c18,#004928 58%,#002b1a);
  color:#fff;
  padding:26px 0 32px;
  border-radius:72px 0 72px 0;
  overflow:hidden;
}
.hg-history::before{
  content:"";
  position:absolute;
  left:-70px;
  top:-84px;
  width:250px;
  height:185px;
  border:2px solid rgba(18,181,82,.28);
  border-radius:50%;
}
.hg-history__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
}
.hg-history h2{
  margin:4px 0 0;
  font-size:1.65rem;
  font-style:italic;
}
.hg-history__track{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(150px,1fr);
  gap:30px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-top:23px;
}
.hg-history__track::before{
  content:"";
  position:absolute;
  left:0;right:0;top:29px;height:2px;background:var(--hg-green-light);
}
.hg-history__item{
  position:relative;
  text-align:center;
  padding-top:20px;
  scroll-snap-align:start;
}
.hg-history__item::before{
  content:"";
  position:absolute;
  left:50%;top:20px;
  width:12px;height:12px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--hg-green);
  border:2px solid #fff;
}
.hg-history__year{font-weight:950;font-size:.8rem;margin-bottom:5px}
.hg-history__text{font-size:.67rem;line-height:1.23}

/* =========================================================
   NEWS / SPIELPLAN / TABELLE / STATISTIK
   ========================================================= */
.hg-dashboard{
  position:relative;
  z-index:5;
  margin-top:-8px;
  background:#fff;
  border-radius:46px 46px 0 0;
}
.hg-dashboard__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.15fr 1.15fr;
}
.hg-panel{
  min-height:275px;
  padding:25px 24px 22px;
  border-right:1px solid #e8ebe9;
}
.hg-panel:last-child{border-right:0}
.hg-panel__title{
  margin:5px 0 16px;
  font-size:1.4rem;
  font-weight:950;
  font-style:italic;
}
.hg-news{
  display:grid;
  grid-template-columns:68px 1fr 18px;
  gap:9px;
  align-items:center;
  margin-bottom:10px;
}
.hg-news__pic{
  height:48px;
  border-radius:7px;
  background:linear-gradient(135deg,#0b6738,#1d3026);
}
.hg-news strong{font-size:.71rem;display:block;line-height:1.15}
.hg-news small{font-size:.57rem;color:#747a76}
.hg-game{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid #eee;
}
.hg-game strong{font-size:.67rem;line-height:1.3}
.hg-game span{font-size:.65rem}
.hg-table{
  width:100%;
  border-collapse:collapse;
  font-size:.65rem;
}
.hg-table th,.hg-table td{
  padding:8px 7px;
  border-bottom:1px solid #e7e9e8;
  text-align:left;
}
.hg-table th{
  font-size:.59rem;
  text-transform:uppercase;
}
.hg-table tbody tr:first-child td{
  background:var(--hg-green);
  color:#fff;
  font-weight:900;
}
.hg-stat{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:14px;
}
.hg-bars{
  min-height:135px;
  display:flex;
  align-items:flex-end;
  gap:14px;
}
.hg-bar{
  flex:1;
  display:grid;
  align-content:end;
  text-align:center;
  font-size:.6rem;
}
.hg-bar__fill{
  height:var(--height);
  min-height:8px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(var(--hg-green-light),var(--hg-green-dark));
  margin-bottom:5px;
}
.hg-donut{
  width:116px;
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(var(--hg-green) 0 55%,#72b68d 55% 75%,#b5cec0 75% 90%,#e5ebe7 90%);
  display:grid;
  place-items:center;
  margin:15px auto 0;
}
.hg-donut::after{
  content:"";
  width:54%;
  aspect-ratio:1;
  border-radius:50%;
  background:#fff;
}

/* =========================================================
   CTA + FOOTER
   ========================================================= */
.hg-cta{
  width:min(calc(100% - 110px),1360px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.35fr auto;
  gap:28px;
  align-items:center;
  padding:17px 28px;
  color:#fff;
  background:linear-gradient(120deg,#00562c,#0a8d43);
  border-radius:46px 46px 0 0;
}
.hg-cta h3{
  margin:0;
  text-transform:uppercase;
  font-size:1.35rem;
  line-height:1;
}
.hg-cta p{margin:0;font-size:.79rem}
.hg-footer{
  background:var(--hg-black);
  color:#fff;
  padding:13px 0 18px;
  font-size:.65rem;
}
.hg-footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.hg-footer__links{
  display:flex;
  gap:28px;
  text-transform:uppercase;
}

/* =========================================================
   ADMIN
   ========================================================= */
.hg-admin-main{padding:38px 0}
.hg-admin-section{
  background:#fff;
  padding:24px;
  border-radius:22px;
  margin-bottom:20px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.hg-admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
}
.hg-admin-grid input,.hg-admin-grid select{
  width:100%;
  padding:10px;
  border:1px solid #ccd1ce;
  border-radius:9px;
}
.hg-admin-error{
  padding:14px;
  background:#fff1f3;
  border:1px solid #c72d46;
  border-radius:12px;
  margin-bottom:20px;
}

/* =========================================================
   TABLET
   ========================================================= */
@media(max-width:1050px){
  .hg-brand{min-width:0;flex:1}
  .hg-nav__links{display:none}
  .hg-hero__shape{width:70%;right:-22%}
  .hg-hero__player{right:22%;width:275px}
  .hg-hero__ball{left:38%}
  .hg-hero__claim{right:4.5%}
  .hg-team-layout{grid-template-columns:180px 1fr}
  .hg-swipe{grid-auto-columns:calc((100% - 2 * var(--hg-gap))/3)}
  .hg-dashboard__grid{grid-template-columns:1fr 1fr}
  .hg-panel:nth-child(2){border-right:0}
  .hg-panel:nth-child(-n+2){border-bottom:1px solid #e8ebe9}
}

/* =========================================================
   MOBILE
   ========================================================= */
@media(max-width:700px){
  .hg-shell{width:min(calc(100% - 24px),var(--hg-content))}
  .hg-nav{border-radius:0 0 28px 28px}
  .hg-nav__inner{min-height:68px}
  .hg-brand__claim{display:none}
  .hg-nav__right .hg-icon-btn{display:none}
  .hg-btn{padding:0 15px}
  .hg-hero{min-height:700px}
  .hg-hero__copy{padding-top:42px}
  .hg-hero h1{font-size:clamp(3.2rem,16vw,5rem)}
  .hg-hero__shape{
    top:390px;
    right:-32%;
    width:135%;
    height:390px;
    border-radius:60% 0 0 0;
    transform:rotate(-2deg);
  }
  .hg-hero__shape::after{height:115px;bottom:-58px}
  .hg-hero__player{right:16%;bottom:0;width:245px;height:265px}
  .hg-hero__ball{left:18%;top:495px;width:76px;height:76px}
  .hg-hero__claim,.hg-hero__dots{display:none}
  .hg-team-layout{grid-template-columns:1fr}
  .hg-swipe{
    grid-auto-columns:calc(100% - var(--hg-peek));
    padding-right:var(--hg-peek);
  }
  .hg-history{border-radius:40px 0 40px 0}
  .hg-history__track{grid-auto-columns:68%}
  .hg-dashboard{border-radius:30px 30px 0 0}
  .hg-dashboard__grid{grid-template-columns:1fr}
  .hg-panel{border-right:0;border-bottom:1px solid #e8ebe9}
  .hg-stat{grid-template-columns:1fr}
  .hg-cta{
    width:calc(100% - 24px);
    grid-template-columns:1fr;
    border-radius:30px 30px 0 0;
  }
  .hg-footer__inner{flex-direction:column;align-items:flex-start}
}

@media print{
  .hg-nav,.hg-btn,.hg-swipe-hint{display:none!important}
  .hg-swipe,.hg-history__track{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    overflow:visible;
  }
}

/* =========================================================
   HG85 v9 – zentrale Typografie-Rollen aus Tabelle design
   Jede Klasse kann auf jeder weiteren Homepage-Seite verwendet werden.
   ========================================================= */
body{font-family:var(--hg-family);font-size:var(--hg-font-size)}
.hg-brand__name,.hg-type-brand{font-family:var(--hg-nav)}
.hg-brand__claim{font-family:var(--hg-subheading)}
.hg-nav__links,.hg-type-nav{font-family:var(--hg-nav)}
.hg-hero .hg-eyebrow,.hg-type-hero-eyebrow{font-family:var(--hg-label)}
.hg-hero h1,.hg-hero__claim,.hg-type-hero-heading{font-family:var(--hg-heading)}
.hg-hero__copy p,.hg-type-hero-text{font-family:var(--hg-family)}
.hg-section-label,.hg-type-section-label{font-family:var(--hg-label)}
.hg-section-heading,.hg-type-section-heading{font-family:var(--hg-heading)}
.hg-team-card h3,.hg-type-team-title{font-family:var(--hg-subheading)}
.hg-team-card small,.hg-type-team-text{font-family:var(--hg-family)}
.hg-type-news-heading{font-family:var(--hg-heading)}
.hg-news strong,.hg-type-news-title{font-family:var(--hg-subheading)}
.hg-news small,.hg-type-news-text{font-family:var(--hg-family)}
.hg-type-schedule-heading{font-family:var(--hg-heading)}
.hg-game strong,.hg-type-schedule-date{font-family:var(--hg-datetime)}
.hg-game span,.hg-type-schedule-text{font-family:var(--hg-family)}
.hg-type-results-heading{font-family:var(--hg-heading)}
.hg-result__score,.hg-type-results-score{font-family:var(--hg-results-score)}
.hg-result__teams,.hg-result__meta,.hg-type-results-text{font-family:var(--hg-family)}
.hg-type-table-heading{font-family:var(--hg-heading)}
.hg-table thead,.hg-type-table-header{font-family:var(--hg-label)}
.hg-table tbody,.hg-type-table-text{font-family:var(--hg-table-value)}
.hg-history h2,.hg-type-history-heading{font-family:var(--hg-heading)}
.hg-history__year,.hg-type-history-year{font-family:var(--hg-history-year)}
.hg-history__text,.hg-type-history-text{font-family:var(--hg-family)}
.hg-type-stats-heading{font-family:var(--hg-heading)}
.hg-stat,.hg-type-stats-text{font-family:var(--hg-family)}
.hg-btn,.hg-type-button{font-family:var(--hg-nav)}
.hg-footer,.hg-type-footer{font-family:var(--hg-family)}
.hg-panel__title{font-family:var(--hg-heading)}

.hg-result{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center;padding:14px 0;border-bottom:1px solid #dde2df}
.hg-result:last-of-type{border-bottom:0}
.hg-result__teams{font-weight:800;line-height:1.35}
.hg-result__meta{font-size:.78rem;color:var(--hg-muted);margin-top:3px}
.hg-result__score{font-size:1.55rem;font-weight:950;white-space:nowrap;color:var(--hg-green-dark)}


/* =========================================================
   V16.5 – Kopfbereich/Hamburger vollständig in style.php
   Damit funktioniert das Menü auch unabhängig von style.css.
   ========================================================= */
.hg-nav{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--hg-black);
  color:#fff;
  border-radius:0 0 30px 30px;
  box-shadow:0 10px 28px rgba(0,0,0,.17);
}
.hg-nav__inner{
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.hg-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  color:#fff;
  text-decoration:none;
}
.hg-brand__logo{
  width:64px;
  height:64px;
  flex:0 0 64px;
  object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.20));
}
.hg-brand__name{
  font-family:var(--hg-nav);
  font-size:1.05rem;
  font-weight:800;
  letter-spacing:.055em;
}
.hg-brand__claim{
  margin-top:3px;
  color:var(--hg-green-light);
  font-size:.72rem;
}
.hg-nav__links,
.hg-nav__right{display:none!important}

.hg-menu-toggle{
  display:flex!important;
  width:48px;
  height:48px;
  flex:0 0 48px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:14px;
  background:rgba(255,255,255,.07);
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:0 12px;
  cursor:pointer;
  appearance:none;
}
.hg-menu-toggle span{
  display:block!important;
  width:100%;
  height:3px;
  background:#fff;
  border-radius:99px;
  transition:transform .2s ease,opacity .2s ease;
}
body.hg-menu-open{overflow:hidden}
body.hg-menu-open .hg-menu-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.hg-menu-open .hg-menu-toggle span:nth-child(2){opacity:0}
body.hg-menu-open .hg-menu-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.hg-menu-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:1001!important;
  display:block!important;
  background:rgba(0,0,0,.42);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.hg-menu-panel{
  position:fixed!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:auto!important;
  z-index:1002!important;
  display:block!important;
  width:min(410px,92vw)!important;
  max-width:92vw;
  margin:0!important;
  padding:24px!important;
  background:#fff!important;
  color:#111!important;
  border-radius:0!important;
  overflow-y:auto!important;
  transform:translateX(105%)!important;
  transition:transform .25s ease!important;
  box-shadow:-18px 0 45px rgba(0,0,0,.22)!important;
}
body.hg-menu-open .hg-menu-backdrop{
  opacity:1;
  pointer-events:auto;
}
body.hg-menu-open .hg-menu-panel{
  transform:translateX(0)!important;
}
.hg-menu-panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid #e7e9e8;
}
.hg-menu-panel__head strong{
  display:block;
  margin-top:3px;
  font-family:var(--hg-font-heading,var(--hg-heading));
  font-size:2rem;
  line-height:1;
  text-transform:uppercase;
}
.hg-menu-panel__label{
  color:var(--hg-green);
  font-family:var(--hg-font-label,var(--hg-heading));
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
}
.hg-menu-close{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:0;
  border-radius:50%;
  background:#f1f3f2;
  color:#111;
  font-size:1.75rem;
  line-height:1;
  cursor:pointer;
}
.hg-menu-panel__links{
  display:block!important;
  padding:16px 0!important;
}
.hg-menu-panel__links>.hg-public-nav-item,
.hg-menu-panel__links>a{
  display:block!important;
  border-bottom:1px solid #eceeed;
}
.hg-menu-panel__links a{
  display:block!important;
  padding:15px 4px!important;
  color:#111!important;
  background:transparent!important;
  border-radius:0!important;
  font-family:var(--hg-nav)!important;
  font-size:.96rem!important;
  font-weight:800!important;
  line-height:1.25!important;
  text-transform:uppercase!important;
  letter-spacing:.025em!important;
}
.hg-menu-panel__links a:hover{color:var(--hg-green)!important}
.hg-public-submenu{
  position:static!important;
  display:block!important;
  width:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0 0 10px 14px!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
.hg-public-submenu a{
  padding:9px 4px!important;
  border:0!important;
  color:#616762!important;
  font-size:.84rem!important;
  font-weight:600!important;
  text-transform:none!important;
}
.hg-menu-panel__foot{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-top:12px;
}
.hg-menu-panel__foot a{
  display:inline-flex;
  padding:10px 14px;
  border-radius:999px;
  background:#f0f4f1;
  color:#111;
  font-weight:700;
  font-size:.82rem;
}

@media(max-width:600px){
  .hg-nav{border-radius:0 0 22px 22px}
  .hg-nav__inner{min-height:72px}
  .hg-brand__logo{width:54px;height:54px;flex-basis:54px}
  .hg-brand__claim{display:none}
  .hg-brand__name{font-size:.94rem}
  .hg-menu-toggle{width:44px;height:44px;flex-basis:44px}
  .hg-menu-panel{padding:20px!important}
  .hg-hero::before{
    opacity:.30;
    background:
      repeating-linear-gradient(35deg,transparent 0 18px,rgba(7,135,61,.13) 18px 20px),
      repeating-linear-gradient(145deg,transparent 0 18px,rgba(7,135,61,.13) 18px 20px);
  }
}


/* =========================================================
   V16.7 – Hero rechts: grüner Platzhalter statt Bild
   ========================================================= */

/* 85-Plakette vollständig entfernen */
.hg-hero__player {
    display: none !important;
}

/* Rechter geschwungener Bereich */
.hg-hero__shape {
    position: absolute;
    right: -7%;
    top: -125px;
    width: 63%;
    height: 505px;

    border-radius: 0 0 0 68%;

    /* Später kommt hier das Bild aus /upload hinein */
    background:
        linear-gradient(
            135deg,
            var(--hg-green) 0%,
            var(--hg-green-dark) 55%,
            var(--hg-green-dark) 100%
        ) !important;

    transform: rotate(-4deg);
    overflow: hidden;
    z-index: 1;
}

/* Geschwungener grüner Rand bleibt erhalten */
.hg-hero__shape::before {
    content: "";
    position: absolute;
    inset: 12px 0 -8px 14px;

    border-radius: 0 0 0 68%;
    border-left: 6px solid var(--hg-green);
    border-bottom: 6px solid var(--hg-green);

    pointer-events: none;
    z-index: 2;
}

/* Platzhalter für das spätere Hallenfoto */
.hg-hero__shape::after {
    content: "BILDPLATZHALTER";

    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 8%;

    color: rgba(255,255,255,.65);

    font-family: var(--hg-nav);
    font-size: clamp(.8rem, 1.3vw, 1.05rem);
    font-weight: 800;

    letter-spacing: .14em;
    text-transform: uppercase;

    z-index: 1;
}

/* =========================================================
   Hamburger-Menü von LINKS einblenden
   ========================================================= */

.hg-menu-panel {
    left: 0 !important;
    right: auto !important;

    transform: translateX(-105%) !important;

    box-shadow:
        18px 0 45px rgba(0,0,0,.22) !important;

    transition:
        transform .28s cubic-bezier(.22,.61,.36,1) !important;
}

/* Menü geöffnet */
body.hg-menu-open .hg-menu-panel {
    transform: translateX(0) !important;
}

/* Dezenter Hamburger – leichte Handball-/Spielfeld-Anmutung */
.hg-menu-toggle {
    display: flex !important;
    width: 42px !important;
    height: 36px !important;
    padding: 7px 3px !important;

    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    cursor: pointer;
}

/* Drei sehr feine Linien */
.hg-menu-toggle span {
    display: block !important;
    height: 1px !important;
    min-height: 1px !important;

    background: rgba(255,255,255,.92) !important;
    border-radius: 2px;

    transition:
        width .22s ease,
        transform .25s ease,
        opacity .18s ease;
}

/* leicht unterschiedliche Längen */
.hg-menu-toggle span:nth-child(1) {
    width: 31px !important;
}

.hg-menu-toggle span:nth-child(2) {
    width: 24px !important;
}

.hg-menu-toggle span:nth-child(3) {
    width: 31px !important;
}

/* Beim Darüberfahren werden alle Linien gleich lang */
.hg-menu-toggle:hover span {
    width: 34px !important;
}

/* geöffnet: dezentes X */
body.hg-menu-open .hg-menu-toggle span:nth-child(1) {
    width: 30px !important;
    transform: translateY(10px) rotate(45deg);
}

body.hg-menu-open .hg-menu-toggle span:nth-child(2) {
    opacity: 0;
}

body.hg-menu-open .hg-menu-toggle span:nth-child(3) {
    width: 30px !important;
    transform: translateY(-10px) rotate(-45deg);
}

/* =========================================================
   SMART MENU – Button links + weiches Slide/Fade
   ========================================================= */

/* Kopfbereich: Hamburger ganz links */
.hg-nav__inner {
    position: relative;
}

/* Hamburger nach links */
.hg-menu-toggle {
    order: -10 !important;

    display: flex !important;
    width: 38px !important;
    height: 32px !important;

    margin-right: 12px !important;
    padding: 6px 2px !important;

    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    cursor: pointer;
}

/* Drei sehr dünne Striche */
.hg-menu-toggle span {
    display: block !important;
    height: 1px !important;
    min-height: 1px !important;

    background: rgba(255,255,255,.88) !important;
    border-radius: 20px;

    transform-origin: left center;

    transition:
        width .35s cubic-bezier(.22,.61,.36,1),
        transform .35s cubic-bezier(.22,.61,.36,1),
        opacity .22s ease !important;
}

.hg-menu-toggle span:nth-child(1) {
    width: 30px !important;
}

.hg-menu-toggle span:nth-child(2) {
    width: 21px !important;
}

.hg-menu-toggle span:nth-child(3) {
    width: 26px !important;
}

/* Beim Darüberfahren ganz leichte Bewegung */
.hg-menu-toggle:hover span:nth-child(1) {
    width: 34px !important;
}

.hg-menu-toggle:hover span:nth-child(2) {
    width: 27px !important;
}

.hg-menu-toggle:hover span:nth-child(3) {
    width: 31px !important;
}


/* =========================================================
   MENÜ – von links + Fade
   ========================================================= */

.hg-menu-panel {
    left: 0 !important;
    right: auto !important;

    opacity: 0 !important;

    transform:
        translate3d(-108%,0,0)
        scale(.985) !important;

    transform-origin: left center;

    visibility: hidden;

    transition:
        transform .52s cubic-bezier(.16,1,.3,1),
        opacity .32s ease,
        visibility 0s linear .52s !important;

    box-shadow:
        18px 0 55px rgba(0,0,0,.16) !important;
}


/* Hintergrund ebenfalls weich einblenden */
.hg-menu-backdrop {
    opacity: 0 !important;

    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);

    transition:
        opacity .42s ease,
        backdrop-filter .42s ease !important;
}


/* Menü geöffnet */
body.hg-menu-open .hg-menu-panel {
    opacity: 1 !important;
    visibility: visible;

    transform:
        translate3d(0,0,0)
        scale(1) !important;

    transition:
        transform .52s cubic-bezier(.16,1,.3,1),
        opacity 1s ease,
        visibility 0s !important;
}

body.hg-menu-open .hg-menu-backdrop {
    opacity: 1 !important;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* =========================================================
   Hamburger beim Öffnen -> feines X
   ========================================================= */

body.hg-menu-open .hg-menu-toggle span:nth-child(1) {
    width: 27px !important;
    transform: translateY(9px) rotate(45deg);
}

body.hg-menu-open .hg-menu-toggle span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-5px);
}

body.hg-menu-open .hg-menu-toggle span:nth-child(3) {
    width: 27px !important;
    transform: translateY(-9px) rotate(-45deg);
}


/* =========================================================
   HG – gemeinsame linke Vertikale weiter nach links
   13.09.2026
   ========================================================= */
@media (min-width: 701px) {
  .hg-shell {
    position: relative !important;
    left: -55px !important;
  }

  /* hg-hero__copy bleibt innerhalb der verschobenen hg-shell;
     daher hier KEINE zweite Verschiebung */
  .hg-hero__copy {
    transform: none !important;
  }
}


/* =========================================================
   HG – Desktop: gemeinsame linke Vertikale exakt 50px
   iPad / iPhone bleiben unverändert
   ========================================================= */
@media (min-width: 1101px) {
  .hg-shell {
    width: calc(100% - 100px) !important;
    max-width: none !important;
    margin-left: 50px !important;
    margin-right: 50px !important;
    left: auto !important;
    transform: none !important;
  }

  /* Elemente innerhalb der gemeinsamen Vertikalen nicht
     zusätzlich horizontal verschieben */
  .hg-hero__copy,
  .hg-team-layout,
  .hg-history .hg-shell {
    left: auto !important;
    transform: none !important;
  }
}

/* iPad / iPhone: vorheriges Verhalten wiederherstellen */
@media (max-width: 1100px) {
  .hg-shell {
    left: auto !important;
    transform: none !important;
  }
}


/* =========================================================
   HG SHELL – Desktop exakt 50px vom linken Bildschirmrand
   ========================================================= */
@media (min-width:1101px){
    .hg-shell{
        width:calc(100% - 100px) !important;
        max-width:none !important;
        margin-left:50px !important;
        margin-right:50px !important;
        margin-inline:50px !important;
        left:0 !important;
        right:auto !important;
        transform:none !important;
    }
}

/* =========================================================
   MENÜ – smooth ein-/ausfahren + transparent -> weiß
   Dauer: 1 Sekunde
   ========================================================= */

.hg-menu-panel{
    left:0 !important;
    right:auto !important;

    opacity:0 !important;
    visibility:hidden;

    background:rgba(255,255,255,0) !important;

    transform:translate3d(-105%,0,0) !important;

    transition:
        transform 1s cubic-bezier(.22,.61,.36,1),
        opacity 1s ease,
        background-color 1s ease,
        visibility 0s linear 1s !important;

    box-shadow:18px 0 55px rgba(0,0,0,.16) !important;

    will-change:transform, opacity, background-color;
}

body.hg-menu-open .hg-menu-panel{
    opacity:1 !important;
    visibility:visible;

    background:rgba(255,255,255,1) !important;

    transform:translate3d(0,0,0) !important;

    transition:
        transform 1s cubic-bezier(.22,.61,.36,1),
        opacity 1s ease,
        background-color 1s ease,
        visibility 0s !important;
}

.hg-menu-backdrop{
    opacity:0 !important;

    background:rgba(0,0,0,0) !important;

    backdrop-filter:blur(0);
    -webkit-backdrop-filter:blur(0);

    transition:
        opacity 1s ease,
        background-color 1s ease,
        backdrop-filter 1s ease !important;
}

body.hg-menu-open .hg-menu-backdrop{
    opacity:1 !important;

    background:rgba(0,0,0,.42) !important;

    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px);
}


/* HG85: Foto vollständig statt stark vergrößert zeigen. */
@media (max-width:760px){
  body #hgHeroSporthalle{
    left:0 !important;
    right:0 !important;
    top:0 !important;
    width:100% !important;
    height:74.9vw !important;
    transform:none !important;
    border-radius:0 0 0 68% / 0 0 0 55% !important;
    background-size:contain !important;
    background-position:center top !important;
    background-color:transparent !important;
  }
  body .hg-hero{min-height:calc(74.9vw + 16px) !important;}
}
/* Touch-Tablets/iPad mit 761–1450 px behalten ihre bisherige Darstellung. */
@media (min-width:1451px), (min-width:761px) and (hover:hover) and (pointer:fine){
  /* Bildbreite und Bildhöhe: 70 % der vorherigen Desktop-Version. */
  body{ --hg-hall-photo-height:clamp(532px,39.9vw,1050px); --hg-hall-logo-overlap:154px; }
  body .hg-hero{
    height:var(--hg-hall-photo-height) !important;
    min-height:var(--hg-hall-photo-height) !important;
    overflow:visible !important;
    isolation:isolate;
    z-index:0;
  }
  /* Auf Seiten mit Vereinslogo-Band fließt der Vorplatz in dieses Band.
     Ohne Logo-Band bleibt das Foto vollständig innerhalb des Headers. */
  body .hg-hero:has(+ .hg-league-clubs),
  body .hg-hero:has(+ .hg-hero-sponsorbar + .hg-league-clubs){
    height:calc(var(--hg-hall-photo-height) - var(--hg-hall-logo-overlap)) !important;
    min-height:calc(var(--hg-hall-photo-height) - var(--hg-hall-logo-overlap)) !important;
  }
  body #hgHeroSporthalle{
    left:auto !important;
    right:0 !important;
    top:0 !important;
    /* Rechts fest verankert: 10 % mehr Bildbreite nach links. */
    width:min(100vw,calc(var(--hg-hall-photo-height) * 1.4666666666)) !important;
    /* Auch das ältere, breitere Hallenfoto muss den Bereich bis unter
       WGK / Sparkasse / Sitex füllen, ohne in das Vereinslogo-Band zu laufen. */
    height:100% !important;
    background-size:cover !important;
    background-position:right top !important;
    background-color:transparent !important;
    border-radius:0 0 0 68% / 0 0 0 40% !important;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 8%,#000 23%) !important;
    mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 8%,#000 23%) !important;
  }
  body .hg-league-clubs{
    position:relative;
    z-index:1;
    min-height:var(--hg-hall-logo-overlap) !important;
    box-sizing:border-box;
    background:linear-gradient(to right,#fff 0%,rgba(255,255,255,.88) 35%,rgba(255,255,255,.32) 65%,rgba(255,255,255,.18) 100%) !important;
  }
}

/* Einheitliche Slider-Punkte auf allen öffentlichen Seiten: aktiv bleibt rund. */
html body .hg-slider-dots > i,
html body .hg-slider-dots > button,
html body .hg-news-dot,
html body .hgf-focus-dots > button,
html body .td-detail-dots > button,
html body .hga .hga-carousel-dots > button,
html body .hga .hga-player-dots > button,
html body .hga .hga-rank-dots > button,
html body .hg-news-modal__dot,
html body #hgFokusModal .hg-news-modal__dot,
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot,
html body .swiper-pagination-bullet,
html body .hg-slider-dots > i.is-active,
html body .hg-slider-dots > i.active,
html body .hg-slider-dots > i[aria-pressed="true"],
html body .hg-slider-dots > i[aria-current="true"],
html body .hg-slider-dots > i[aria-current="page"],
html body .hg-slider-dots > button.is-active,
html body .hg-slider-dots > button.active,
html body .hg-slider-dots > button[aria-pressed="true"],
html body .hg-slider-dots > button[aria-current="true"],
html body .hg-slider-dots > button[aria-current="page"],
html body .hg-news-dot.is-active,
html body .hg-news-dot.active,
html body .hg-news-dot[aria-pressed="true"],
html body .hg-news-dot[aria-current="true"],
html body .hg-news-dot[aria-current="page"],
html body .hgf-focus-dots > button.is-active,
html body .hgf-focus-dots > button.active,
html body .hgf-focus-dots > button[aria-pressed="true"],
html body .hgf-focus-dots > button[aria-current="true"],
html body .hgf-focus-dots > button[aria-current="page"],
html body .td-detail-dots > button.is-active,
html body .td-detail-dots > button.active,
html body .td-detail-dots > button[aria-pressed="true"],
html body .td-detail-dots > button[aria-current="true"],
html body .td-detail-dots > button[aria-current="page"],
html body .hga .hga-carousel-dots > button.is-active,
html body .hga .hga-carousel-dots > button.active,
html body .hga .hga-carousel-dots > button[aria-pressed="true"],
html body .hga .hga-carousel-dots > button[aria-current="true"],
html body .hga .hga-carousel-dots > button[aria-current="page"],
html body .hga .hga-player-dots > button.is-active,
html body .hga .hga-player-dots > button.active,
html body .hga .hga-player-dots > button[aria-pressed="true"],
html body .hga .hga-player-dots > button[aria-current="true"],
html body .hga .hga-player-dots > button[aria-current="page"],
html body .hga .hga-rank-dots > button.is-active,
html body .hga .hga-rank-dots > button.active,
html body .hga .hga-rank-dots > button[aria-pressed="true"],
html body .hga .hga-rank-dots > button[aria-current="true"],
html body .hga .hga-rank-dots > button[aria-current="page"],
html body .hg-news-modal__dot.is-active,
html body .hg-news-modal__dot.active,
html body .hg-news-modal__dot[aria-pressed="true"],
html body .hg-news-modal__dot[aria-current="true"],
html body .hg-news-modal__dot[aria-current="page"],
html body #hgFokusModal .hg-news-modal__dot.is-active,
html body #hgFokusModal .hg-news-modal__dot.active,
html body #hgFokusModal .hg-news-modal__dot[aria-pressed="true"],
html body #hgFokusModal .hg-news-modal__dot[aria-current="true"],
html body #hgFokusModal .hg-news-modal__dot[aria-current="page"],
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot.is-active,
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot.active,
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot[aria-pressed="true"],
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot[aria-current="true"],
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot[aria-current="page"],
html body .swiper-pagination-bullet.is-active,
html body .swiper-pagination-bullet.active,
html body .swiper-pagination-bullet[aria-pressed="true"],
html body .swiper-pagination-bullet[aria-current="true"],
html body .swiper-pagination-bullet[aria-current="page"],
html body .swiper-pagination-bullet-active,
html body .hg-slider-dots > i:first-child:not([role="button"]){
 width:8px!important;min-width:8px!important;max-width:8px!important;
 height:8px!important;min-height:8px!important;max-height:8px!important;
 inline-size:8px!important;block-size:8px!important;flex:0 0 8px!important;
 box-sizing:border-box!important;padding:0!important;border:0!important;
 border-radius:50%!important;transform:none!important;box-shadow:none!important;
 font-size:0!important;line-height:0!important;background-image:none!important;
 opacity:1!important;transition:background-color .2s ease!important;
}
html body .hg-slider-dots > i,
html body .hg-slider-dots > button,
html body .hg-news-dot,
html body .hgf-focus-dots > button,
html body .td-detail-dots > button,
html body .hga .hga-carousel-dots > button,
html body .hga .hga-player-dots > button,
html body .hga .hga-rank-dots > button,
html body .hg-news-modal__dot,
html body #hgFokusModal .hg-news-modal__dot,
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot,
html body .swiper-pagination-bullet{background-color:#c1c9c5!important}
html body .hg-slider-dots > i.is-active,
html body .hg-slider-dots > i.active,
html body .hg-slider-dots > i[aria-pressed="true"],
html body .hg-slider-dots > i[aria-current="true"],
html body .hg-slider-dots > i[aria-current="page"],
html body .hg-slider-dots > button.is-active,
html body .hg-slider-dots > button.active,
html body .hg-slider-dots > button[aria-pressed="true"],
html body .hg-slider-dots > button[aria-current="true"],
html body .hg-slider-dots > button[aria-current="page"],
html body .hg-news-dot.is-active,
html body .hg-news-dot.active,
html body .hg-news-dot[aria-pressed="true"],
html body .hg-news-dot[aria-current="true"],
html body .hg-news-dot[aria-current="page"],
html body .hgf-focus-dots > button.is-active,
html body .hgf-focus-dots > button.active,
html body .hgf-focus-dots > button[aria-pressed="true"],
html body .hgf-focus-dots > button[aria-current="true"],
html body .hgf-focus-dots > button[aria-current="page"],
html body .td-detail-dots > button.is-active,
html body .td-detail-dots > button.active,
html body .td-detail-dots > button[aria-pressed="true"],
html body .td-detail-dots > button[aria-current="true"],
html body .td-detail-dots > button[aria-current="page"],
html body .hga .hga-carousel-dots > button.is-active,
html body .hga .hga-carousel-dots > button.active,
html body .hga .hga-carousel-dots > button[aria-pressed="true"],
html body .hga .hga-carousel-dots > button[aria-current="true"],
html body .hga .hga-carousel-dots > button[aria-current="page"],
html body .hga .hga-player-dots > button.is-active,
html body .hga .hga-player-dots > button.active,
html body .hga .hga-player-dots > button[aria-pressed="true"],
html body .hga .hga-player-dots > button[aria-current="true"],
html body .hga .hga-player-dots > button[aria-current="page"],
html body .hga .hga-rank-dots > button.is-active,
html body .hga .hga-rank-dots > button.active,
html body .hga .hga-rank-dots > button[aria-pressed="true"],
html body .hga .hga-rank-dots > button[aria-current="true"],
html body .hga .hga-rank-dots > button[aria-current="page"],
html body .hg-news-modal__dot.is-active,
html body .hg-news-modal__dot.active,
html body .hg-news-modal__dot[aria-pressed="true"],
html body .hg-news-modal__dot[aria-current="true"],
html body .hg-news-modal__dot[aria-current="page"],
html body #hgFokusModal .hg-news-modal__dot.is-active,
html body #hgFokusModal .hg-news-modal__dot.active,
html body #hgFokusModal .hg-news-modal__dot[aria-pressed="true"],
html body #hgFokusModal .hg-news-modal__dot[aria-current="true"],
html body #hgFokusModal .hg-news-modal__dot[aria-current="page"],
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot.is-active,
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot.active,
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot[aria-pressed="true"],
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot[aria-current="true"],
html body #hgFokusModal .hg-news-modal__article-nav .hgf-section-dot[aria-current="page"],
html body .swiper-pagination-bullet.is-active,
html body .swiper-pagination-bullet.active,
html body .swiper-pagination-bullet[aria-pressed="true"],
html body .swiper-pagination-bullet[aria-current="true"],
html body .swiper-pagination-bullet[aria-current="page"],
html body .swiper-pagination-bullet-active,
html body .hg-slider-dots > i:first-child:not([role="button"]){background-color:#10c66b!important}


/* Spielbetrieb: Inhalte bleiben innerhalb ihrer Karte. */
html body #spielbetrieb .hg-dashboard__grid > .hg-panel,
html body #spielbetrieb .hg-panel__fit{min-width:0;box-sizing:border-box;}
html body #spielbetrieb .hg-game,
html body #spielbetrieb .hg-result,
html body #spielbetrieb .hg-placement{min-width:0;max-width:100%;box-sizing:border-box;}
html body #spielbetrieb .hg-game{grid-template-columns:78px minmax(0,1fr);}
html body #spielbetrieb .hg-game > *,
html body #spielbetrieb .hg-result__main{min-width:0;}
html body #spielbetrieb .hg-type-schedule-text{overflow-wrap:anywhere;}
html body #spielbetrieb .hg-type-schedule-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html body #spielbetrieb .hg-result{grid-template-columns:minmax(0,1fr) auto;column-gap:8px!important;}
html body #spielbetrieb .hg-game-filter,
html body #spielbetrieb .hg-game-filter select{min-width:0;max-width:100%;box-sizing:border-box;}
html body #spielbetrieb .hg-placement{gap:8px;}
html body #spielbetrieb .hg-placement__team{
  flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
html body #spielbetrieb .hg-placement__value{
  flex:0 1 auto;min-width:0;max-width:65%;flex-wrap:wrap;justify-content:flex-end;gap:4px 6px;
}
html body #spielbetrieb .hg-placement__rank{flex-shrink:0;box-sizing:border-box;}
html body #spielbetrieb .hg-placement__day,
html body #spielbetrieb .hg-placement__final{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
@media(max-width:760px){
  /* Auch der aktive Spielbetrieb-Punkt bleibt ein Kreis. */
  html body #spielbetrieb .hg-dashboard-nav button,
  html body #spielbetrieb .hg-dashboard-nav button.is-active,
  html body #spielbetrieb .hg-dashboard-nav button[aria-current="true"]{
    width:8px!important;min-width:8px!important;max-width:8px!important;
    height:8px!important;min-height:8px!important;max-height:8px!important;
    flex:0 0 8px!important;padding:0!important;border:0!important;
    border-radius:50%!important;transform:none!important;box-shadow:none!important;
    font-size:0!important;line-height:0!important;color:transparent!important;
    background:#c1c9c5!important;opacity:1!important;transition:background-color .2s!important;
  }
  html body #spielbetrieb .hg-dashboard-nav button.is-active,
  html body #spielbetrieb .hg-dashboard-nav button[aria-current="true"]{background:#10c66b!important;}
}