/* Hintergrundbild für den Hero-Bereich */
.hero {
	height: 800px;
	position: relative;
	display: flex;
	align-items: center;
	/* Zentriert den Inhalt vertikal */
	justify-content: flex-end;
	/* Bild nach rechts schieben */
	overflow: hidden;
}

/* Hintergrundvideo */
.hero video.background-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Schwarzes Overlay */
.hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	/* Schwarze Transparenz */
	z-index: 1;
}

/* Text oben im Hero-Bereich */
.top-text {
    position: absolute;
    top: 10px;
	left: 20px;
    width: 100%; /* Volle Breite */
    color: white;
    z-index: 2;
    padding: 10px 0; /* Etwas Innenabstand oben/unten */
}

/* Text in linker Mitte */
.hero .text-box {
	position: absolute;
	top: 50%;
	left: 5%;
	transform: translateY(-50%);
	color: white;
	z-index: 2;
	font-size: 4rem;
}

.hero .text-box h1 {
    font-size: 4rem;
    font-weight: bold;
}




/* Lesbarkeit & dezente Abgrenzung */
#siteNav .nav-link { color: rgba(255,255,255,.9); }
#siteNav .nav-link:hover { color: #fff; }
#siteNav { border-bottom: 1px solid rgba(255,255,255,.08); }
/* Wenn du’s noch ruhiger willst, leichte Transparenz statt Vollschwarz: */
/* .bg-dark { background-color: rgba(22,22,22,.95) !important; } */


/* Offcanvas: keine harten Linien pro Eintrag */
.offcanvas-menu .list-group-item { border: 0; }

/* Kategorie-Überschriften im Offcanvas */
.offcanvas-menu .list-heading {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .75;
  padding: .25rem .5rem;
  margin: .5rem 0 .25rem;
}

/* Dezente Abstände zwischen Gruppen */
.offcanvas-menu .list-gap { height: .5rem; }




.feature-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.04);
}
.icon-badge{
  width:48px;height:48px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(220,53,69,.1); /* bs-danger 10% */
  color:#dc3545;font-size:1.4rem;
}


.footer .footer-address { font-size: 1rem; line-height: 1.5; }            /* größer als "small" */
@media (min-width: 768px){
  .footer .footer-address { font-size: 1.05rem; }                         /* leicht größer am Desktop */
}

/* bestehende Footer-Styles (falls noch nicht drin) */
.footer .link-faint{ color: rgba(255,255,255,.85); text-decoration:none; }
.footer .link-faint:hover{ color:#fff; text-decoration:underline; }
.footer .social-link{
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;opacity:.9;transition:all .15s ease;
}
.footer .social-link:hover{ opacity:1; transform:translateY(-1px); border-color:#fff; }




/* Weiche Standardkarte */
.card-soft{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem;
  box-shadow:0 .25rem .75rem rgba(0,0,0,.04);
}

/* Objektfüllung für Medien */
.object-fit-cover{ object-fit:cover; }

/* Gallery Hover */
.gallery-tile img{ transition: transform .25s ease, filter .25s ease; }
@media (hover:hover) and (pointer:fine){
  .gallery-tile:hover img{ transform: scale(1.03); filter: brightness(1.05); }
}

/* Dezente rote Linie in FAQ */
.border-danger-subtle{ border-color: rgba(220,53,69,.35)!important; }




.team-card { border-radius: 1rem; }
@media (hover:hover) and (pointer:fine){
  .team-card { transition: transform .15s ease, box-shadow .15s ease; }
  .team-card:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.08); }
}



/* Kalender-Liste im Probetraining */
#kalender-container .list-group-item { cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
#kalender-container .list-group-item:hover { background: rgba(0,0,0,.02); }
#kalender-container .form-check-input { flex: 0 0 auto; }
#kalender-container .slot { flex: 1 1 auto; }

/* Markiere den gewählten Slot dezent */
#kalender-container input[type="radio"]:checked + .slot .fw-semibold { font-weight: 700; }