:root{
  --red:#c8161d;
  --red-dark:#9d1117;
  --ink:#172033;
  --muted:#667085;
  --line:#e7e9ee;
  --bg:#f7f4ee;
  --white:#ffffff;
  --green:#1f7a4d;
  --soft-green:#e9f5ee;
  --cream:#fffaf0;
  --shadow:0 24px 70px rgba(23,32,51,.12);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}
a{color:inherit}
.container{width:min(1160px, calc(100% - 32px)); margin-inline:auto}
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(247,244,238,.86);
  backdrop-filter: blur(18px);
  border-bottom:1px solid rgba(23,32,51,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:800}
.brand img{height:44px; width:auto}
.brand span{font-size:.98rem}
.nav-links{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.nav-links a{
  text-decoration:none; padding:10px 12px; border-radius:999px;
  font-weight:650; font-size:.92rem; color:#263248;
}
.nav-links a:hover{background:#fff}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:999px; padding:13px 18px;
  text-decoration:none; font-weight:800; cursor:pointer;
  background:var(--red); color:#fff; box-shadow:0 12px 24px rgba(200,22,29,.22);
}
.btn:hover{background:var(--red-dark)}
.btn.secondary{background:#fff;color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.btn.green{background:var(--green);box-shadow:0 12px 24px rgba(31,122,77,.18)}
.hero{
  position:relative; overflow:hidden; padding:72px 0 36px;
}
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto 45%; height:520px;
  background:radial-gradient(circle, rgba(200,22,29,.15), transparent 62%);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.08fr .92fr; gap:42px; align-items:center;
}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; background:#fff; color:var(--red);
  font-weight:850; font-size:.88rem; border:1px solid var(--line);
}
h1,h2,h3{line-height:1.05; margin:0 0 16px}
h1{font-size:clamp(2.4rem, 7vw, 5.8rem); letter-spacing:-.06em}
h2{font-size:clamp(2rem, 4vw, 3.8rem); letter-spacing:-.045em}
h3{font-size:1.28rem}
.lead{font-size:clamp(1.05rem,2vw,1.28rem); color:#465064; max-width:680px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.hero-card{
  background:#fff; border-radius:36px; padding:20px; box-shadow:var(--shadow);
  transform:rotate(1.5deg);
}
.hero-card img{width:100%; height:auto; border-radius:24px; display:block; image-rendering:auto}
.hero-card-caption{
  margin:16px 4px 2px; display:flex; justify-content:space-between; gap:12px; align-items:center;
  color:var(--muted); font-weight:700; font-size:.95rem;
}
.pulse{width:14px;height:14px;background:var(--red);border-radius:50%; box-shadow:0 0 0 10px rgba(200,22,29,.12)}
.quickfacts{padding:24px 0 54px}
.fact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.fact{
  background:#fff; border:1px solid var(--line); border-radius:24px; padding:20px;
}
.fact strong{display:block; font-size:1.25rem}
.fact span{color:var(--muted); font-weight:600}
.section{padding:74px 0}
.section.white{background:#fff}
.section-head{display:flex; justify-content:space-between; gap:24px; align-items:end; margin-bottom:28px}
.section-head p{max-width:620px; color:var(--muted); margin:0}
.sportheim{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:28px; align-items:center;
  background:var(--ink); color:#fff; border-radius:var(--radius); padding:32px; overflow:hidden;
}
.sportheim img{width:100%; background:#fff; padding:18px; border-radius:24px}
.sportheim p{color:#d7dce7}
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:26px; padding:24px; position:relative;
  transition:.18s transform ease,.18s box-shadow ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 38px rgba(23,32,51,.1)}
.tag{display:inline-flex;padding:6px 10px;border-radius:999px;background:var(--soft-green);color:var(--green);font-weight:850;font-size:.78rem;margin-bottom:14px}
.meta{color:var(--muted); font-weight:650; margin:12px 0 0}
.cards-link{display:inline-flex;margin-top:18px;font-weight:850;color:var(--red);text-decoration:none}
.offer-hero{
  padding:54px 0 26px;
}
.filterbar{display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 28px}
.filterbar a{padding:10px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);text-decoration:none;font-weight:800;font-size:.9rem}
.offer-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.offer{
  background:#fff; border-radius:26px; border:1px solid var(--line); padding:24px;
}
.offer .top{display:flex; justify-content:space-between; gap:12px; align-items:start}
.offer .category{color:var(--red);font-weight:900;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.offer dl{display:grid; grid-template-columns:110px 1fr; gap:8px 12px; margin:18px 0 0}
.offer dt{color:var(--muted); font-weight:800}
.offer dd{margin:0}
.notice{
  background:var(--cream);border:1px solid #f0dfb8;border-radius:24px;padding:20px;color:#5f4a18;
}
.map-placeholder{
  background:linear-gradient(135deg,#ffffff,#eef5f1); border:1px dashed #b9c9bf;
  border-radius:26px; padding:26px; min-height:280px; display:grid; place-items:center; text-align:center;
}
.footer{padding:42px 0; background:var(--ink); color:#fff}
.footer a{color:#fff}
.footer-grid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
.legal-page{background:#fff; border-radius:26px; padding:28px; margin:32px 0 64px; border:1px solid var(--line)}
@media (max-width: 900px){
  .hero-grid,.sportheim{grid-template-columns:1fr}
  .fact-grid,.card-grid,.offer-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
}
@media (max-width: 640px){
  .container{width:min(100% - 22px, 1160px)}
  .hero{padding:44px 0 24px}
  .fact-grid,.card-grid,.offer-grid{grid-template-columns:1fr}
  .section{padding:52px 0}
  .section-head{display:block}
  .hero-actions .btn{width:100%}
  .brand span{display:none}
  .offer dl{grid-template-columns:1fr}
}

code{background:#f1f3f6;border:1px solid var(--line);border-radius:8px;padding:2px 6px;font-size:.92em}
.more-line{margin-top:22px}
.event-list{display:grid; gap:14px}
.event-card{display:grid; grid-template-columns:210px 1fr; gap:18px; background:#fff; border:1px solid var(--line); border-radius:26px; padding:20px; align-items:start; transition:.18s transform ease,.18s box-shadow ease}
.event-card:hover{transform:translateY(-3px); box-shadow:0 18px 38px rgba(23,32,51,.09)}
.event-date{background:var(--ink); color:#fff; border-radius:20px; padding:16px; min-height:100%; display:flex; flex-direction:column; justify-content:center}
.event-date strong{font-size:1.1rem; line-height:1.2}
.event-date span{color:#d7dce7;font-weight:800;margin-top:6px}
.event-content h3{margin-top:4px}
.news-card{min-height:240px}
.map-placeholder iframe{display:block; width:100%; border-radius:22px; min-height:420px}
.map-placeholder.map-loaded{padding:0; display:block; overflow:hidden; border-style:solid; background:#fff}
.map-placeholder .btn{margin:6px}
@media (max-width: 640px){
  .event-card{grid-template-columns:1fr}
  .event-date{min-height:auto}
}

/* Dynamische Bilder aus data/news.json und data/events.json */
.card.has-image{
  overflow:hidden;
  padding:0;
}
.card.has-image .card-body{
  padding:22px 24px 24px;
}
.content-image,
.news-image,
.event-image{
  margin:0;
  overflow:hidden;
  background:#eef0f3;
}
.content-image img,
.news-image img,
.event-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.news-image{
  aspect-ratio:16 / 9;
  border-radius:26px 26px 0 0;
}
.event-card.has-image{
  grid-template-columns:180px 190px 1fr;
}
.event-image{
  align-self:stretch;
  min-height:150px;
  border-radius:18px;
}
.event-image img{
  min-height:150px;
}
.content-image figcaption,
.news-image figcaption,
.event-image figcaption{
  font-size:.82rem;
  color:var(--muted);
  padding:8px 12px;
  background:#fff;
}
@media (max-width: 900px){
  .event-card.has-image{grid-template-columns:1fr 1fr}
  .event-card.has-image .event-image{grid-column:1 / -1; aspect-ratio:16 / 9}
}
@media (max-width: 640px){
  .event-card.has-image{grid-template-columns:1fr}
  .event-image{aspect-ratio:16 / 9; min-height:0}
  .event-image img{min-height:0}
}

.legal-page h4{font-size:1.05rem;margin:18px 0 8px;color:var(--ink)}
.legal-page p{max-width:900px}
.legal-page a{color:var(--red);font-weight:700}

/* Kalender, Filter und Termindialog */
.section-tight-top{padding-top:20px}
.calendar-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:0 0 24px}
.year-select-label{display:flex;gap:10px;align-items:center;font-weight:900;color:var(--ink)}
.year-select-label select{border:1px solid var(--line);border-radius:14px;padding:10px 14px;font:inherit;font-weight:800;background:#fff;color:var(--ink)}
.filter-buttons{display:flex;flex-wrap:wrap;gap:10px}
.filter-button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer;transition:.18s ease}
.filter-button:hover,.filter-button.active{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-1px)}
.year-calendar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.month-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:18px;box-shadow:0 16px 34px rgba(23,32,51,.06)}
.month-card h3{margin:0 0 12px;font-size:1.2rem}
.calendar-weekdays,.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.calendar-weekdays{margin-bottom:6px;color:var(--muted);font-size:.75rem;font-weight:900;text-align:center}
.calendar-day{min-height:76px;border:1px solid #eef0f4;border-radius:12px;padding:6px;background:#fafbfc;overflow:hidden}
.calendar-day.empty{background:transparent;border-color:transparent}
.calendar-day.has-events{background:#fff7f4;border-color:#ffd7ca}
.day-number{display:block;font-size:.76rem;font-weight:900;color:var(--ink);margin-bottom:4px}
.calendar-event{display:block;width:100%;border:0;background:transparent;text-align:left;padding:2px 0;color:var(--red);font-size:.72rem;font-weight:900;line-height:1.15;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-event:hover{text-decoration:underline}
.more-events{display:block;font-size:.7rem;color:var(--muted);font-weight:800;margin-top:2px}
.link-button{border:0;background:transparent;padding:0;font:inherit;cursor:pointer;text-align:left}
.tag-soft{background:#f1f3f6;color:var(--ink);margin-left:6px}
.event-dialog{width:min(820px,calc(100vw - 28px));border:0;border-radius:28px;padding:0;box-shadow:0 30px 90px rgba(0,0,0,.25);color:var(--ink)}
.event-dialog::backdrop{background:rgba(10,16,28,.55);backdrop-filter:blur(3px)}
.dialog-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:999px;background:#fff;color:var(--ink);font-size:1.8rem;line-height:1;box-shadow:0 10px 22px rgba(0,0,0,.15);cursor:pointer;z-index:2}
.dialog-content{padding:28px;display:grid;gap:22px}
.dialog-content.has-image{grid-template-columns:280px 1fr;align-items:start}
.dialog-image{margin:0;border-radius:22px;overflow:hidden;background:#eef0f3;aspect-ratio:4 / 3}
.dialog-image img{width:100%;height:100%;object-fit:cover;display:block}
.dialog-image figcaption{font-size:.78rem;color:var(--muted);padding:8px 10px;background:#fff}
.detail-list{display:grid;gap:10px;margin:18px 0}
.detail-list div{display:grid;grid-template-columns:120px 1fr;gap:12px;border-top:1px solid var(--line);padding-top:10px}
.detail-list dt{font-weight:900;color:var(--muted)}
.detail-list dd{margin:0;font-weight:800}
.detail-text{background:#f7f8fa;border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin-top:14px}
.detail-text p:last-child{margin-bottom:0}
@media (max-width: 980px){.year-calendar{grid-template-columns:repeat(2,minmax(0,1fr))}.dialog-content.has-image{grid-template-columns:1fr}.dialog-image{aspect-ratio:16 / 9}}
@media (max-width: 640px){.year-calendar{grid-template-columns:1fr}.calendar-day{min-height:64px;padding:5px}.calendar-event{font-size:.68rem}.calendar-toolbar{align-items:flex-start}.dialog-content{padding:22px}.detail-list div{grid-template-columns:1fr;gap:4px}.event-dialog{width:calc(100vw - 16px);border-radius:22px}}

/* Konsistente Hauptnavigation mit modernem Disclosure-Untermenü */
.nav-links{position:relative}
.nav-links a,.nav-disclosure{
  text-decoration:none; padding:10px 12px; border-radius:999px;
  font-weight:650; font-size:.92rem; color:#263248;
}
.nav-disclosure{border:0;background:transparent;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-disclosure::after{content:"⌄";font-size:.82rem;transition:transform .18s ease}
.nav-disclosure[aria-expanded="true"]{background:#fff}
.nav-disclosure[aria-expanded="true"]::after{transform:rotate(180deg)}
.nav-dropdown{position:relative;display:inline-flex;align-items:center}
.nav-submenu{
  position:absolute;top:calc(100% + 8px);left:0;z-index:50;min-width:230px;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px;
  box-shadow:0 20px 52px rgba(23,32,51,.16);
}
.nav-submenu a{display:block;border-radius:14px;white-space:nowrap}
.nav-submenu a:hover{background:var(--bg)}
@media (max-width: 900px){
  .nav{align-items:flex-start;flex-direction:column;gap:10px}
  .nav-links{display:flex;width:100%;overflow-x:auto;padding-bottom:8px;flex-wrap:nowrap;scrollbar-width:thin}
  .nav-links a,.nav-disclosure{white-space:nowrap;background:rgba(255,255,255,.72)}
  .nav-submenu{position:fixed;left:12px;right:12px;top:86px;min-width:0}
}


/* Version 8: rot-weiße TSV-Akzente, konsistente Navigation und neue Startseiten-Reihenfolge */
:root{
  --red:#c8161d;
  --red-dark:#990f15;
  --red-soft:#fff0f1;
  --bg:#fff7f3;
  --cream:#fffaf7;
}
.site-header{background:rgba(255,255,255,.92);border-bottom:3px solid rgba(200,22,29,.18)}
.brand span{color:var(--red-dark);font-weight:900;letter-spacing:-.02em}
.nav-links a:hover,.nav-links a:focus-visible,.nav-disclosure:hover,.nav-disclosure:focus-visible{background:var(--red);color:#fff;outline:none}
.nav-submenu a:hover{background:var(--red-soft);color:var(--red-dark)}
.hero{background:linear-gradient(135deg,#fff 0%,#fff7f3 45%,#ffe6e8 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,var(--red),#fff,var(--red));opacity:.9}
.btn.white{background:#fff;color:var(--red-dark);box-shadow:none;border:1px solid rgba(200,22,29,.28)}
.btn.white:hover{background:var(--red-soft);color:var(--red-dark)}
.intro-section{padding-top:58px;background:#fff}
.center-head{align-items:end}
.news-feature{background:linear-gradient(180deg,#fff,#fff7f7)}
.sportheim-highlight{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff}
.sportheim-highlight .kicker{color:var(--red-dark)}
.sportheim-highlight p{color:#fff2f2}
.membership-band{background:linear-gradient(135deg,var(--red),var(--red-dark)) !important;color:#fff;position:relative;overflow:hidden}
.membership-band::after{content:"";position:absolute;right:-80px;top:-100px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.12)}
.membership-band p{color:#fff2f2}
.card,.offer,.event-card,.month-card{border-top:4px solid rgba(200,22,29,.18)}
.tag{background:var(--red-soft);color:var(--red-dark);border:1px solid rgba(200,22,29,.12)}
.board-grid .card{background:linear-gradient(180deg,#fff,#fff9f9)}
.quickfacts{padding:0}
.footer{border-top:4px solid var(--red)}
@media (max-width:900px){.nav-submenu{top:104px}.nav-links{gap:8px}}


/* Version 9: konsequente Rot-Weiß-Optik und kompakter Kalender */
.footer{background:linear-gradient(135deg,var(--red-dark),#6f090d);color:#fff;border-top:0}
.footer a{color:#fff}
.event-date{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff}
.event-date span{color:#ffe8e8}
.sportheim{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff}
.sportheim p{color:#fff2f2}
.nav-disclosure{appearance:none;-webkit-appearance:none;line-height:1.55;color:#263248;margin:0;font-family:inherit;font-weight:650;font-size:.92rem}
.nav-links a,.nav-disclosure{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
.nav-dropdown{align-items:center}
.nav-disclosure:hover,.nav-disclosure:focus-visible{background:var(--red);color:#fff}
.nav-disclosure[aria-expanded="true"]{background:var(--red);color:#fff}
.card.holiday-info,.event-card.holiday-info{border-top-color:#d6a600;background:#fffdf2}
.calendar-day.has-holiday{background:#fffbed;border-color:#f4d46a}
.calendar-event.holiday-entry{color:#8a6500}
.center-actions{display:flex;justify-content:center;margin-top:28px}
.center-actions .btn{min-width:min(100%,320px)}
.filter-button.active{box-shadow:0 10px 22px rgba(200,22,29,.18)}