:root{
  --bbc-primary:#0b63b6;
  --bbc-primary-50:#eaf3ff;
  --bbc-primary-600:#0a58a3;
  --bbc-primary-700:#0b63b6;
  --bg:#ffffff;
  --muted:#f5f7fb;
  --text:#0f172a;
  --text-500:#6b7280;
  --border:#e5e7eb;
  --radius:14px;
  --focus:#2563eb;
}

html{scroll-behavior:smooth; scroll-padding-top:84px;}
*{box-sizing:border-box}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Inter,Arial,sans-serif; color:var(--text); background:var(--bg);}
img{max-width:100%; display:block}
a{color:var(--bbc-primary-700); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px; margin:0 auto; padding:0 16px}

/* Header */
.header{position:sticky; top:0; z-index:1000; background:#fff; border-bottom:1px solid var(--border);}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:72px; gap:16px;}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;}
.logo img{height:40px; width:auto}
.logo span{font-weight:800; letter-spacing:.2px}
.nav{display:flex; align-items:center; gap:16px}
.nav a{padding:8px 10px; text-decoration:none; color:#111827}
.nav a[aria-current="page"]{font-weight:700; color:var(--bbc-primary-700)}
.burger{display:none}
@media (max-width: 900px){
  .burger{display:inline-block; border:1px solid var(--border); background:#fff; border-radius:10px; padding:8px 12px; cursor:pointer}
  .nav{position:fixed; inset:72px 0 auto 0; background:#fff; border-bottom:1px solid var(--border); padding:12px 16px; display:none; flex-direction:column; align-items:flex-start}
  .nav.open{display:flex}
}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .9rem; border-radius:10px; font-weight:600; text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--bbc-primary-700); color:#fff}
.btn-primary:hover{background:var(--bbc-primary-600)}
.btn-secondary{background:#fff; border-color:var(--border); color:#111827}
.btn-secondary:hover{background:#f9fafb}
.btn-ghost{background:#fff; border:1px solid var(--border); color:#111827;}
.btn-ghost:hover{background:#f9fafb}

/* Sections / Typography */
.section{padding:48px 0}
.section-muted{background:var(--muted)}
.hero{background:linear-gradient(135deg, #0b63b6 0%, #f97316 100%); color:#fff;}
.hero-inner{padding:36px 0}
.h1{font-size:clamp(28px,4vw,44px); margin:0 0 8px; font-weight:900}
.h2{font-size:clamp(22px,3vw,32px); margin:0 0 16px; font-weight:800}
.h3{font-size:clamp(18px,2.4vw,22px); margin:0; font-weight:800}

/* Cards / Grid */
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
.card-soft{background:#fff}
.card-body{padding:16px}
.mb-16{margin-bottom:16px}
.grid{display:grid; gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width: 900px){ .grid-3{grid-template-columns:1fr 1fr} }
@media (max-width: 640px){ .grid-3,.grid-2{grid-template-columns:1fr} }

/* Aktuelles Bild */
.news-img{width:100%; aspect-ratio:16/9; object-fit:cover}

/* Team-Kacheln – groß (4:3) */
.team-card{position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--border); background:#fff}
.team-img{width:100%; aspect-ratio:4/3; object-fit:cover}
.team-caption{position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.55); color:#fff; padding:6px 10px; border-radius:10px; font-weight:700}

/* Overlay: Desktop per Hover, Mobil dauerhaft sichtbar als Action-Bar unten */
.team-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  background:linear-gradient( to bottom, rgba(0,0,0,.0) 0%, rgba(0,0,0,.55) 100%);
  color:#fff; opacity:0; pointer-events:none; transition:opacity .2s ease-in-out; text-align:center; padding:16px;
}
@media (hover:hover){
  .team-card:hover .team-overlay{opacity:1; pointer-events:auto}
}
.team-card:focus-within .team-overlay{opacity:1; pointer-events:auto}

.team-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}

/* Trainingszeiten – kräftiger */
.pill{
  display:inline-flex; align-items:center; padding:.38rem .7rem;
  background:rgba(255,255,255,.96);
  color:var(--bbc-primary-700);
  border:2px solid var(--bbc-primary-700);
  border-radius:999px; font-size:1rem; font-weight:800;
  letter-spacing:.15px;
}

/* Mobil: Overlay als feste untere Leiste (sichtbar ohne Hover) */
@media (max-width: 900px){
  .team-overlay{
    opacity:1; pointer-events:auto;
    justify-content:flex-end;
    background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%);
    padding-top:30%; padding-bottom:12px;
  }
  .team-overlay h3{align-self:flex-start; margin:0 8px 6px}
  .team-actions{width:100%}
  .team-actions .btn{flex:1; justify-content:center}
}

/* Modal (nur Infos) */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; padding:16px; z-index:2000}
.modal.open{display:flex}
.modal-card{background:#fff; max-width:860px; width:100%; border-radius:16px; overflow:hidden; position:relative}
.modal-close{position:absolute; top:8px; right:8px; border:1px solid var(--border); background:#fff; padding:.4rem .6rem; border-radius:10px; cursor:pointer}
.modal-media{width:100%; max-height:55vh; object-fit:contain; background:#f3f4f6}
.modal-body{padding:16px}
.modal-grid{display:grid; grid-template-columns:2fr 1fr; gap:16px}
.modal-title{margin:0 0 8px; font-size:22px; font-weight:900}
.modal-times, .modal-actions{display:flex; flex-wrap:wrap; gap:8px}
@media (max-width:900px){ .modal-grid{grid-template-columns:1fr} }

/* Spielplan – Karten (für spielplan.html) */
.schedule-box { font-size:.95rem; }
.games-list { display:flex; flex-direction:column; gap:12px; }
.game-card{
  display:grid; gap:14px; align-items:center;
  grid-template-columns: 92px 1fr auto;
  padding:12px 14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 1px 0 rgba(16,24,40,.04);
}
.game-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:80px; border-radius:10px; padding:8px 10px;
  background:var(--bbc-primary-50); color:var(--bbc-primary-700); line-height:1.05;
}
.game-date .day{ font-size:26px; font-weight:800; }
.game-date .mon{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.game-date .dow{ font-size:11px; color:#4b5563; }
.game-date .time{ font-size:12px; margin-top:2px; color:#334155; }
.game-info{ display:flex; flex-direction:column; gap:4px; }
.game-vs{ font-weight:700; font-size:1rem; }
.game-vs .vs{ font-weight:600; color:#374151; margin:0 .25rem; }
.game-hall a.hall-link{ color:var(--text-500); text-decoration:none; border-bottom:1px dashed #cbd5e1; }
.game-hall a.hall-link:hover{ color:var(--bbc-primary-700); border-color:var(--bbc-primary-700); }
.game-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-self:end; }
.btn-icon{ display:inline-flex; align-items:center; gap:.45rem; }
.btn-primary.btn-icon{ color:#fff; }
@media (max-width: 780px){
  .game-card{ grid-template-columns: 1fr; }
  .game-actions{ justify-self:start; }
}

/* Footer */
.footer{border-top:1px solid var(--border); background:#fff}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:12px; flex-wrap:wrap}

/* ===== Galerie Slider ===== */
.gallery{max-width:1100px; margin:0 auto}
.slider{position:relative; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:#000}
.slides{display:flex; transition:transform .4s ease; will-change:transform}
.slide{min-width:100%; aspect-ratio:16/9; position:relative}
.slide img{width:100%; height:100%; object-fit:cover}

/* Controls */
.slider-controls{
  position:absolute; inset:auto 0 8px 0; display:flex; align-items:center; justify-content:center; gap:8px; z-index:2;
}
.ctrl{border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.5); color:#fff; border-radius:999px; padding:.4rem .6rem; cursor:pointer}
.ctrl:hover{background:rgba(255,255,255,.15)}
.dots{display:flex; gap:6px; padding:6px 10px; background:rgba(0,0,0,.4); border-radius:999px}
.dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer}
.dot.active{background:#fff}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:3000}
.lightbox.open{display:flex}
.lightbox-inner{position:relative; width:min(95vw,1200px); height:min(90vh,800px); display:flex; align-items:center; justify-content:center}
.lightbox img{max-width:100%; max-height:100%; object-fit:contain}
.lb-btn{position:absolute; top:50%; transform:translateY(-50%); border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.5); color:#fff; border-radius:999px; padding:.5rem .7rem; cursor:pointer}
.lb-prev{left:12px}
.lb-next{right:12px}
.lb-close{position:absolute; top:12px; right:12px; border:1px solid rgba(255,255,255,.5); background:rgba(0,0,0,.6); color:#fff; border-radius:10px; padding:.4rem .6rem; cursor:pointer}
	
	/* ========== Zentrierung global ========== */
.hero .hero-inner{ text-align:center; }
.h1,.h2,.h3{ text-align:center; }

/* Karten-Inhalte mittig */
.card, .card-soft { text-align:center; }
.card-body { text-align:center; }

/* Team-Kacheln: Titel/Buttons mittig, Caption zentriert am unteren Rand */
.team-overlay{ text-align:center; }
.team-overlay h3{ width:100%; text-align:center; }
.team-actions{ justify-content:center; }
.team-caption{
  left:50%;
  transform:translateX(-50%);
  right:auto; /* falls zuvor gesetzt */
}

/* Trainingszeiten-Pills bleiben mittig in ihren Reihen */
.modal-title{ text-align:center; }
.modal-times, .modal-actions{ justify-content:center; }
#modalContact{ text-align:center; }

/* Galerie-Überschrift bereits durch .h2 zentriert; Slider-Controls sind zentriert */
	
	/* Touch-/iPad-Fix: Overlay auf Kacheln immer sichtbar */
.team-card.show .team-overlay{
  opacity:1; pointer-events:auto;
  justify-content:flex-end;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%);
  padding-top:30%; padding-bottom:12px;
}

/* Sicherheitshalber auch, wenn das Gerät kein Hover unterstützt */
@media (hover: none){
  .team-card .team-overlay{
    opacity:1; pointer-events:auto;
    justify-content:flex-end;
    background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%);
    padding-top:30%; padding-bottom:12px;
  }
}