@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

html {
  scroll-padding-top: var(--scrollTop, 80px);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  font-family: 'Lato' !important;
}

.navbar {
  font-family: 'Roboto';
  transition: .2s;
}

.navbar-brand img {
  max-width: 5rem;
}

.navbar-ultra {
  --bs-navbar-padding-y: .20rem;
  --bs-navbar-brand-padding-y: .05rem;
  --bs-navbar-brand-font-size: .95rem;
}

.navbar-ultra .container {
  padding-left: .5rem;
  padding-right: .5rem;
}

.navbar-ultra .navbar-brand img {
  max-width: 3.25rem;
}

.navbar-ultra .nav-link {
  padding: .15rem .4rem;
  font-size: .86rem;
  line-height: 1.1;
  letter-spacing: .02em;
}

@media (min-width: 992px) {
  .navbar-ultra .navbar-nav { gap: .5rem; }
}

.navbar-ultra .navbar-toggler {
  padding: .15rem .35rem;
  line-height: 1;
  border-width: 1px;
}

.navbar-ultra .dropdown-menu {
  --bs-dropdown-padding-y: .25rem;
  --bs-dropdown-item-padding-y: .25rem;
  --bs-dropdown-item-padding-x: .6rem;
}

.navbar { transition: transform .2s, height .2s; }

.navbar-ultra .navbar-collapse { z-index: 1; }

.navbar-ultra .nav-link {
  position: relative;
  color: #000;
  transition: color .2s, font-weight .2s;
}

.navbar-ultra .nav-link.active {
  font-weight: 700;
  color: var(--bs-primary);
}

.nav-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 0;
  left: 0;
  background-color: #0d6efd;
  border-radius: 2px;
  transition: width .25s ease, transform .25s ease;
  pointer-events: none;
  z-index: 2;
  will-change: transform, width;
}

.nav-indicator:not(.is-ready) { transition: none !important; }

@media (max-width: 991.98px) {
  .navbar-ultra .navbar-collapse:not(.show) .nav-indicator {
    width: 0 !important;
    transform: none !important;
  }
}

.carousel-item { position: relative; }

.carousel-item .overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); z-index: 1;
}

.carousel-caption {
  top: 0; bottom: 0; left: 0; right: 0; position: absolute;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  z-index: 2; text-shadow: 1px 1px 5px black; color: white;
}

.carousel, .carousel-inner, .carousel-item { height: 100dvh; }

.carousel-item > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.leistungen-card { transition: transform .2s; cursor: default !important; }
.leistungen-card:hover { transform: translateX(.5rem); }

hr { width: 3rem; height: .5rem; border: none; outline: none; background: blue; }

.navbar-hidden { transform: translateY(-100%); }

.zertifikate .h1 {
  word-wrap: break-word; overflow-wrap: anywhere; hyphens: auto;
  font-size: clamp(1.5rem, 6vw, 2.5rem); line-height: 1.2; text-align: center;
}

.carousel-caption { padding-left: 1rem; padding-right: 1rem; max-width: 100%; }

.carousel-caption .display-1, .carousel-caption .h4 {
  word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.1;
}

@media (max-width: 420px) {
  .carousel-caption .display-1 { font-size: 10vw; }
  .carousel-caption .h4       { font-size: 4.2vw; }
}

@media (max-width: 991.98px) {
  .navbar-ultra .navbar-collapse {
    padding-block: .25rem .5rem;
  }

  .navbar-ultra .navbar-nav .nav-item + .nav-item {
    margin-top: .25rem;
  }

  .navbar-ultra .navbar-nav .nav-link {
    padding: .9rem .6rem;     /* größerer Finger-Trefferbereich (~48px) */
    line-height: 1.25;
    font-size: 1rem;           /* leicht größer für Lesbarkeit */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}