/* ── Carousel ─────────────────────────────────────────── */
:root {
  --brand-red: #B81C07;
  --navbar-link-color: #d5d5d5;
  --thumbnail-text-color: #555;
  --navbar-menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --mobile-nav-offset: 56px;
}

#myCarousel,
#myCarousel .carousel-inner,
#myCarousel .carousel-inner .carousel-item {
  height: 100vh;
}

#myCarousel .carousel-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(90%);
}

@media (max-width: 767.98px) {
  .navbar .container-fluid {
    position: relative;
  }

  #myNavbar.navbar-collapse {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    width: auto;
    max-width: calc(100vw - 30px);
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    border-top: 0;
    background-color: var(--brand-red);
    box-shadow: var(--navbar-menu-shadow);
  }

  /* BS5: collapsed state is just .collapse (no .in) */
  #myNavbar.navbar-collapse:not(.show) {
    display: none !important;
  }

  #myNavbar.navbar-collapse.show {
    display: inline-block !important;
    overflow-y: visible;
  }

  #myNavbar .navbar-nav {
    margin: 0;
  }

  #myNavbar .navbar-nav > li > a,
  #myNavbar .navbar-nav > .nav-item > .nav-link {
    white-space: nowrap;
    padding: 10px 16px;
  }

  #myCarousel {
    margin-top: var(--mobile-nav-offset);
  }

  #myCarousel,
  #myCarousel .carousel-inner,
  #myCarousel .carousel-inner .carousel-item {
    height: auto;
    min-height: 0;
  }

  #myCarousel .carousel-inner {
    background-color: #000;
  }

  #myCarousel .carousel-inner img {
    height: auto;
    max-height: calc(100vh - var(--mobile-nav-offset));
    max-height: calc(100dvh - var(--mobile-nav-offset));
    object-fit: contain;
  }
}

/* First image stays colorful */
#myCarousel .carousel-inner .carousel-item.slide-color img {
  filter: none;
}

/* Navigation arrows via SVG image */
.carousel-control-prev,
.carousel-control-next {
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-nav-icon {
  width: 50px;
  height: 50px;
  position: relative;
}

/* ── Band-Section ─────────────────────────────────────── */
/* Responsive padding for different resolutions */
/* Extra Small (xs): < 576px */
@media (max-width: 575.98px) {
  .container {
    padding: 20px 10px;
  }
}

/* Small (sm): 576px - 767px */
@media (min-width: 576px) and (max-width: 767.98px) {
  .container {
    padding: 40px 30px;
  }
}

/* Medium (md): 768px - 991px */
@media (min-width: 768px) and (max-width: 991.98px) {
  .container {
    padding: 60px 80px;
  }
}

/* Large (lg): >= 992px */
@media (min-width: 992px) {
  .container {
    padding: 80px 120px;
  }
}

/* Termine section - red background everywhere except the text area */

#termine {
  --termine-padding-x: 15px;
  --termine-padding-y: 0;
  --termine-heading-padding: 30px 15px 20px;
  --termine-stacked-gap: 0;
}

/* container-fluid: side padding creates a red border up to the page edge */
#termine .container-fluid {
  padding: var(--termine-padding-y) var(--termine-padding-x);
}

/* row: restore Bootstrap default gutter */
#termine .row {
  --bs-gutter-x: 1.5rem;
}

/* thumbnail: transparent so the red background shows through */
#termine .thumbnail {
  padding: 0;
  background-color: transparent;
  margin-bottom: 0;
}

#termine .thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

/* Only the text area below the image gets a white background */
#termine .thumbnail p {
  margin: 0;
  padding: 12px 15px;
  background-color: #fff;
  color: var(--thumbnail-text-color);
}

#termine h3 {
  padding: var(--termine-heading-padding);
}

/* Responsive outer padding for the Termine section */
@media (max-width: 575.98px) {
  #termine {
    --termine-padding-x: 40px;
    --termine-padding-y: 40px;
    --termine-heading-padding: 10px 5px 15px;
    --termine-stacked-gap: 40px;
  }

  /* Stacked columns: red spacing between Termine items = page side spacing */
  #termine .col-sm-4 {
    margin-bottom: var(--termine-stacked-gap);
  }

  #termine .col-sm-4:last-child {
    margin-bottom: 0;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #termine {
    --termine-padding-x: 40px;
    --termine-padding-y: 40px;
    --termine-heading-padding: 20px 5px 20px;
  }

  #termine .col-sm-4 {
    margin-bottom: var(--termine-stacked-gap);
  }

  #termine .col-sm-4:last-child {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  #termine {
    --termine-padding-x: 60px;
    --termine-padding-y: 60px;
  }
}

@media (min-width: 992px) {
  #termine {
    --termine-padding-x: 80px;
    --termine-padding-y: 80px;
    --termine-heading-padding: 30px 25px 20px;
  }
}

.person-swap {
  position: relative;
  display: inline-block;
  width: 80%;
  margin-bottom: 25px;
}

.person {
  border: 10px solid transparent;
  margin-bottom: 0;
  width: 100%;
  height: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}

.person-hover-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.person-swap:hover .person {
  border-color: #f1f1f1;
}

.person-swap:hover .person-default {
  opacity: 0;
}

.person-swap:hover .person-hover-image {
  opacity: 0.7;
}

.carousel-inner img {
  margin: auto;
}

.carousel-caption h3 {
  color: #fff !important;
}

@media (max-width: 600px) {
  .carousel-caption {
    display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
  }
}

.bg-1 {
    background: var(--brand-red);
    color: #bdbdbd;
}

.bg-1 h3 {color: #fff;}
.bg-1 p {font-style: italic;}

/* BS5 has no .thumbnail class - custom styling */
.thumbnail {
  padding: 0 0 15px 0;
  border: none;
  border-radius: 0;
}
.thumbnail p {
  margin-top: 15px;
  color: var(--thumbnail-text-color);
}
.navbar {
  font-family: 'Libre Franklin', sans-serif;
  margin-bottom: 0;
  background-color: var(--brand-red);
  border: 0;
  font-size: 11px !important;
  letter-spacing: 4px;
  opacity: 0.9;
}
.navbar .nav-link, .navbar .navbar-brand {
  color: var(--navbar-link-color) !important;
}
.navbar-nav .nav-link:hover {
  color: #fff !important;
}
.navbar-nav .nav-item.active .nav-link {
  color: #fff !important;
  background-color: var(--brand-red) !important;
}
.navbar-toggler {
  border-color: transparent;
}

/* ── Dropdown ────────────────────────────────────────── */
.dropdown-menu {
  background-color: var(--brand-red);
  border: none;
  letter-spacing: 2px;
}
.dropdown-menu .dropdown-item {
  color: var(--navbar-link-color);
  font-size: 11px;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}
.dropdown-menu .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ── Footer ──────────────────────────────────────────── */
footer {
  padding: 32px 16px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
footer .footer-link {
  color: #d5d5d5;
  text-decoration: none;
  transition: color 0.2s;
}
footer .footer-link:hover {
  color: #fff;
}
footer p {
  color: #d5d5d5;
}