.barlow-regular {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .barlow-semibold {
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-style: normal;
  }

html{
    font-size: 17px;
    max-width: 100vw;
}

:root {
    --farbe-rosa: #E08670;
    --farbe-rosa-dark: #bb705d;
    --farbe-grau: #505456;
    --farbe-gruen: #ABB4B1;
    --farbe-gruen13: #abb4b120;
    --farbe-gruen25: #abb4b142;
    --farbe-beige: #F0EEEC;
    --farbe-logo: #005399;
    --farbe-blau: #192F4D;
}
  
body {
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #505456;
}

.highlight{
    color: var(--farbe-rosa);
    font-weight: 600;
}

.leistungen-erwachsene .highlight{
    color:var(--farbe-blau)
}

.bg-beige{
    background:var(--farbe-beige);
}

.bg-gruen{
    background:var(--farbe-gruen);
}

.bg-gruen13{
    background:var(--farbe-gruen13);
}

.bg-gruen25{
    background:var(--farbe-gruen25);
}

b{
    font-weight: 600;
}

.navbar{
    background: rgba(255, 255, 255, 0.9);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--farbe-rosa);
    font-weight: 600;
}

/* Basis für Burger Icon */
.custom-toggler {
  border: none;
  background: none;
  z-index: 999;
}

.burger-lines {
  width: 28px;
  height: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.burger-lines span {
  display: block;
  height: 3px;
  background-color: #000;
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Animation zu X */
.custom-toggler.open .burger-lines span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.custom-toggler.open .burger-lines span:nth-child(2) {
  opacity: 0;
}
.custom-toggler.open .burger-lines span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

.btn{
    text-transform: uppercase;
    font-weight: 300;
}

.btn-primary{
    background: var(--farbe-rosa);
    border: none;
}

.btn-primary:hover{
    background: var(--farbe-rosa-dark);
}

.btn-icon{
    position: relative;
    top: -1px;
    margin-right: 6px;
}
  
.header-img-stack {
    height: 80vh;
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
  
.header-img-stack img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* oder 100%, je nach gewünschter Breite */
    height: 100%;
    object-fit: contain;
}
  
.header-img-stack img:nth-child(1) {
    width: 102%;
    top: -1%;
    left: -1%;
}

.header-img-stack img:nth-child(2) {
    width: 81%;
    top: -2%;
    left: 2%;
}

.hero-image {
    transition: transform 0.2s ease;
    will-change: transform;
}



#header{
    background-image: url(../img/trennung-farbe-1.svg), linear-gradient(180deg, rgba(255, 255, 255, 1) 96%, rgba(240, 238, 236, 1) 100%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

.trennung-2{
    background-image: url(../img/trennung-farbe-2.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom;
    height: 150px;
}



.spacer-100{
    height:100px;
}

.spacer-150{
    height:150px;
}
 
.spacer-200{
    height:200px;
}

/* Countdown */
.countdown-container {
  flex-wrap: wrap;
}

.time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.digit-box {
  background-color: white;
  border-radius: 6px;
  width: 48px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: 600;
  color: #444;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.label {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: #666;
  letter-spacing: 1px;
}

.deko-pfeil-1{
    transform: translate(20%, 0%);
}

h3{
    text-transform: uppercase;
    color:var(--farbe-grau);
    font-size: 1.3rem;
    font-weight: 600;
}


/* Leistungen */

.tag-rosa, .tag-blau{
    color:#fff;
    text-transform: uppercase;
    background: var(--farbe-rosa);
    padding:5px 10px;
    border-radius: 5px;
    font-size: 0.85rem;
}

.tag-blau{
    background:var(--farbe-blau);
}

ul.aufzaehlung-kinder, ul.aufzaehlung-erwachsene, ul.aufzaehlung-aufgaben, ul.aufzaehlung-anforderungen, ul.aufzaehlung-unsere-leistungen {
  list-style: none;
  padding-left: 0;
}

ul.aufzaehlung-kinder li, ul.aufzaehlung-erwachsene li, ul.aufzaehlung-aufgaben li, ul.aufzaehlung-anforderungen li, ul.aufzaehlung-unsere-leistungen li {
  position: relative;
  padding-left: 24px;
}

ul.aufzaehlung-kinder li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 16px;
  height: 16px;
  background-image: url(../img/list-image-ergo-leistungen-kinder.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

ul.aufzaehlung-erwachsene li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 16px;
  height: 16px;
  background-image: url(../img/list-image-ergo-leistungen-erwachsene.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.aufgaben {
  height: 100%;
}

ul.aufzaehlung-aufgaben li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 16px;
  height: 16px;
  background-image: url(../img/list-image-ergo-leistungen-kinder.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

ul.aufzaehlung-anforderungen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 16px;
  height: 16px;
  background-image: url(../img/list-image-ergo-leistungen-erwachsene.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

ul.aufzaehlung-unsere-leistungen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 16px;
  height: 16px;
  background-image: url(../img/list-image-ergo-leistungen-kinder.svg);
  background-size: contain;
  background-repeat: no-repeat;
}


/* Wartelisten Formular */
.stepper {
  gap: 1rem;
}

.step-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--farbe-gruen); /* Standardfarbe */
  color: white;
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

#step-circle1{
  cursor: pointer;
}

.step-item.active .step-circle {
  background-color: var(--farbe-rosa); /* Orange für aktiven Step */
}

.step-line img {
  height: 20px;
  width: 100px; /* oder auto, oder responsiv mit max-width */
  object-fit: contain;
}

.form-headline img{
    margin-top:-5px;
}

.section-heading {
  font-size: 0.95rem;
  margin-top: 1rem;
}

.step-badge {
  background-color: #de7e65;
  color: #fff;
  width: 20px;
  height: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.is-hidden {
  display: none !important;
}

.honeypot {
  position: absolute;
  left: -9999px;
}





/* FAQ */
.accordion, .accordion-item, .accordion-header, .accordion-button{
    background:none;
    border:0;
}

.accordion-header{
    border-bottom: .1px solid var(--farbe-gruen);
}

.accordion-item{
    margin:10px;
}

.accordion-button:not(.collapsed) {
color: var(--farbe-rosa);
font-weight: 600;
}

.accordion-button:not(.collapsed) {
background-color: transparent;
}

.accordion-button::after {
background-image: url(../img/list-image-ergo-leistungen-erwachsene.svg);
}

/* Job Seite */

.trennung-3{
    background-image: url(../img/trennung-farbe-3.svg), linear-gradient(180deg, rgba(255, 255, 255, 1) 96%, rgba(240, 238, 236, 1) 100%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

#moderneMethoden{
    background-image: url(../img/trennung-farbe-3.svg), linear-gradient(180deg, rgba(255, 255, 255, 1) 96%, rgba(240, 238, 236, 1) 100%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

#wir-suchen {
  background-image: url(../img/trennung-farbe-1.svg), linear-gradient(180deg, rgba(255, 255, 255, 1) 96%, rgba(240, 238, 236, 1) 100%);;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
}

.jobs-row {
  height: 40vh;
}

.deko-pfeil-wir-suchen{
    transform: translate(20%, -75%);
    right: 20%;
}

.deko-pfeil-mission {
  transform: translate(20%, -55%);
}

.spacer-300 {
  height: 300px;
}

.dateiupload .dateiHochladenButton {
  width:50%;
}

/* Footer */
.disclaimer{
    font-size: .75rem;
}

a{
    color:var(--farbe-rosa);
    text-decoration: none;
}

a:hover{
    color:var(--farbe-rosa-dark);
}

.modal-content {
  border-radius: 16px;
  padding: 1rem;
}

.modal-body p {
  font-size: 0.95rem;
  line-height: 1.5;
}



/* Loading */
#loadingscreen{
    position: fixed;
    background:var(--farbe-beige);
    height: 100%;
    width: 100%;
    top:0px;
    left:0px;
    z-index: 9999;
}

.loader {
    width: 70px;
    height: 30px;
    --g: radial-gradient(farthest-side,#0000 calc(95% - 3px), var(--farbe-rosa) calc(100% - 3px) 98%,#0000 101%) no-repeat;
    background: var(--g), var(--g), var(--g);
    background-size: 20px 20px;
    animation: l9 1s infinite alternate;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}
@keyframes l9 {
  0% {
    background-position: 0 50%, 50% 50%, 100% 50%;
  }
  20% {
    background-position: 0 0, 50% 50%, 100% 50%;
  }
  40% {
    background-position: 0 100%, 50% 0, 100% 50%;
  }
  60% {
    background-position: 0 50%, 50% 100%, 100% 0;
  }
  80% {
    background-position: 0 50%, 50% 50%, 100% 100%;
  }
  100% {
    background-position: 0 50%, 50% 50%, 100% 50%;
  }
}




/* Responsive Einstellungen */



@media (max-width: 1200px) {
      /* CSS-Regeln für Bildschirme bis zu einer Breite von 1200px */
      .deko-pfeil-1, .deko-pfeil-mission {
        transform: translate(-40%, 0%);
      }

      .deko-pfeil-3 {
        transform: translateX(-20%);
      }


      #moderneMethoden{
        padding-top:100px;
        padding-bottom:50px;
      }

      #unsereMission{
        padding-top:50px;
        padding-bottom:50px;
      }

}

@media (max-width: 1050px) {
      /* CSS-Regeln für Bildschirme bis zu einer Breite von 1050px */
      .header-img-stack {
        height: 50vh;
      }

      .jobs-row {
        height: 50vh;
      }

      .deko-pfeil-1, .deko-pfeil-wir-suchen, .deko-pfeil-mission {
        transform: translate(-36%, -8%) rotate(10deg);
      }
}

@media (max-width: 991px) {
      /* CSS-Regeln für Bildschirme bis zu einer Breite von 991px */

      .mobile-nav-collapse {
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.4s ease, transform 0.4s ease;
        pointer-events: none;
      }

      .mobile-nav-collapse.show{
        opacity: 1;
        transform: translate(-50%, -50%);
        pointer-events: auto;
        background: #192f4df0;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width: 100%;
        height: 100%;
        padding-top: 40%;
        font-size: 2rem;
      }

      .nav-item a{
        margin-right: 0px !important;
        color:#fff;
      }

      .nav-item a:hover{
        color:var(--farbe-rosa);
      }

      .custom-toggler.open .burger-lines span {
        background-color: #fff;
      }

      .custom-toggler{
        margin-right: 10px;
      }
      .deko-pfeil-1, .deko-pfeil-2, .deko-pfeil-3, .deko-pfeil-wir-suchen, .deko-pfeil-mission{
        display: none;
      }

      .no-tablet{
        display: none;
      }

      #standort{
        padding-top:35px;
      }

      #leistungen .aufgaben, #leistungen .anforderungen, #leistungen .unsere-leistungen {
        width: 100%;
      }

      #unsereMission{
        padding-bottom:100px;
      }

      #ansprechpartnerin {
        padding-top: 40px;
      }

      .spacer-200 {
        height: 150px;
      }

      .spacer-300 {
        height: 200px;
      }
}

@media (max-width: 745px) {

  .card-warteliste, .leistungen-erwachsene{
        margin-top:25px;
      }
}

@media (max-width: 600px) {
      /* CSS-Regeln für Bildschirme bis zu einer Breite von 600px */

      section .container, section .container-fluid{
        padding-right: calc(var(--bs-gutter-x) * 1.1);
        padding-left: calc(var(--bs-gutter-x) * 1.1);
      }

      .no-mobile{
        display: none;
      }

      .jobs-row {
        height: 60vh;
      }
}

@media (max-width: 600px) {
      /* CSS-Regeln für Bildschirme bis zu einer Breite von 400px */

      .gap-4{
        gap: 0.5rem!important;
      }
}