html {
  scroll-behavior: smooth;
  scroll-padding-top: 75px; /* adjust to your navbar height */
}

@font-face {
  font-family: "Blackout";
  src: url("../fonts/Blackout\ Midnight.ttf") format("truetype");
}
h1 {
  font-family: "Blackout", sans-serif;
  letter-spacing: 0.05em;
  font-size: 2.118rem;
}
.nav-link {
  color: #78afa9;
  font-family: "Blackout", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}
.nav-link:hover {
  color: #d43436;
}
h2,
p,
.punkte {
  line-height: 1.7;
  font-family: "Comfortaa", sans-serif;
  font-size: 1.1rem;
  font-optical-sizing: auto;
}
.white,
.white-punkte,
h3 {
  line-height: 1.7;
  font-size: 1.1rem;
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
}
.accordion-button {
  font-size: 1.1rem;
  font-weight: 600;
  -webkit-text-stroke: 0.8px black;
}
#konzept .accordion {
  --bs-accordion-btn-bg: #f4c946;
  --bs-accordion-bg: #f2da93;
  --bs-accordion-active-bg: #f2da93;
  --bs-accordion-active-color: black;
  --bs-accordion-color: black;
  --bs-accordion-btn-focus-box-shadow: none;
}
#alltag .accordion {
  --bs-accordion-btn-bg: #ecacaa;
  --bs-accordion-bg: #eac1c0;
  --bs-accordion-active-bg: #eac1c0;
  --bs-accordion-active-color: black;
  --bs-accordion-color: black;
  --bs-accordion-btn-focus-box-shadow: none;
}
.accordion-button:not(.collapsed) {
  box-shadow: none;
}
#kinderladen .container {
  position: relative;
  top: -60px;
}
#backToTopBtn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: none;
  z-index: 1030; /* Above most elements */
}
#kinderladen {
  position: relative;
  background-color: white;
  color: black;
  z-index: 1;
}
.overlap-img {
  margin-top: -440px; /* pull image upward for overlap */
  position: relative;
  z-index: 2;
  transform: rotate(-1deg);
}
/* Small screens (phones) */
@media (max-width: 576px) {
  .overlap-img {
    margin-top: 3px; /* pull it up just a little or none at all */
  }
  .text-kinderladen {
    margin-top: 50px;
  }
}
.kid-img {
  max-width: 320px;
  position: relative;
  bottom: -2px; /* moves image down */
  z-index: 2;
}
/* Reduce size on screens < 850px */
@media (max-width: 992px) {
  .kontact-h1 {
    font-size: 27px;
  }
}

/* Even smaller on phones < 576px */
@media (max-width: 576px) {
  .kontact-h1 {
    font-size: 28px;
  }
}