/* ============== Global ============== */
html {
  scroll-behavior: smooth; /* sanftes Scrollen zu #ankern */
}

body {
  font-family: 'Poppins', sans-serif;
  overflow: auto; /* <-- war hidden, macht Scroll kaputt */
  margin: 0;
}

/* Fix für fixe Navbar: sorgt dafür, dass Anker nicht unter der Navbar kleben */
section,
header {
  scroll-margin-top: 90px; /* Höhe deiner fixen Navbar (py-3 + Inhalt), bei Bedarf feinjustieren */
}

/* ============== Typo ============== */
h1, h2, h3, h4, h5, h6 {
  font-family: "Chewy", cursive;
}
h1 { font-size: 3rem; }

.section-title {
  font-family: 'Chewy', cursive;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
}

/* ============== Layout Sektionen ============== */
/* Statt fullpage-100vh wieder normales Flow-Layout */
.section {
  display: block;
  min-height: auto;   /* <-- war 100vh */
  padding: 4rem 0;    /* angenehme Abstände */
  text-align: left;
}

/* Hero darf gerne groß bleiben */
.hero {
  background: linear-gradient(90deg, rgba(12,177,242,1) 0%, rgba(40,133,156,1) 10%, rgba(34,137,163,1) 50%, rgba(12,177,242,1) 100%);
  color: #fff;
  padding: 8rem 0 6rem; /* großzügiger Top-Padding statt 100vh */
}

.section-gradient {
background: #35bbf0;
background: linear-gradient(90deg, rgba(53, 187, 240, 1) 0%, rgba(107, 204, 242, 1) 100%);
}

/* ============== Karten / Deko ============== */
.pricing-card {
  border: 2px solid #eee;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* ============== Navbar ============== */
.navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}
.navbar-brand {
  font-family: 'Chewy', cursive;
  font-size: 1.5rem;
}
.navbar .nav-link:hover {
  color: var(--bs-primary);
}

/* ============== Modal ============== */
.modal-content {
  border-radius: 1rem;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}
/* Einheitliche Größe und Look für die Slideshow */
#hundeschuleCarousel {
  max-width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* sorgt dafür, dass alle Bilder gleich groß angezeigt werden */
#hundeschuleCarousel .carousel-item img {
  width: 100%;
  height: 380px;           /* gewünschte feste Höhe */
  object-fit: cover;       /* füllt Container aus, beschneidet Überschuss */
  object-position: center; /* zentriert das Motiv */
  border-radius: 1rem;
}

/* kleinere Höhe auf Smartphones */
@media (max-width: 768px) {
  #hundeschuleCarousel .carousel-item img {
    height: 250px;
  }
}