@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }

.load-animation {
    animation: 0.5s ease-out 0s 1 slideInFromLeft;
}

.load-animation.delayed {
    animation-duration: 0.7s;
}


.yellow-color {
    filter: invert(78%) sepia(28%) saturate(993%) hue-rotate(343deg) brightness(100%) contrast(102%);
}

.green-color {
    filter: invert(58%) sepia(50%) saturate(538%) hue-rotate(54deg) brightness(106%) contrast(86%);
}

.medium-icon {
    width: 2rem;
    height: 2rem;
}

.icon-square {    
    border-radius: 10px;
}

.card-preis {
    text-align: end;
    font-weight: 600;
    font-size: 18pt;
}

.title-text {
    font-size: 40pt;
    font-weight: 600;
}

.title2-text {
    font-size: 20pt;
    font-weight: 400;
}

.bottom-border {
    box-shadow: 0px 24px 3px -24px rgb(255, 193, 78);
}


.subtitle-text {
    font-size: 18pt;
    margin-top: 4px;
    font-weight: 500;
}

.bg-image {
    box-shadow: inset 0 3.5em 4em -2em rgba(0, 0, 0, .6); 
    background-position-x: center;
    width: 100%; 

}

.scroll-animation {
    opacity: 0%;
}

.scroll-animation.scrolled {
    opacity: 100%;
    animation: 0.5s ease-out 0s 1 slideInFromLeft;
    
}




.text-shadow {
    text-shadow: 0em 0em 1.2em rgba(0, 0, 0, 1);
}


.line {
    height: 10px;
    width: 55px;
    background: rgb(255, 193, 78);
    margin-bottom: 0.3rem;
}

/* Alles was mit Scrollen zu tun hat... */


.scroll.scroll-visible.scrolled {
    opacity: 100%;
    display: block;
    transition: .25s ease;
}

.scroll.scroll-visible {
    opacity: 0%;
    user-select: none;
    transition: .25s ease;
}

.nav-link.scroll:hover,
.nav-link.scroll:focus{
    border-bottom-color: rgba(128, 128, 128, .4);
}

.navbar.scroll.scroll-color {
    background-color: transparent;
    transition: ease 0.25s;
}
.navbar.scroll.scroll-color.scrolled {
    background-color: #fff;
    transition: ease 0.25s;
    box-shadow: 0em .2em 1em rgba(0, 0, 0, .4);
}

.nav-link.scroll, .bi.scroll {
    color: #fff;
    border-bottom: .25rem solid transparent;
}

.nav-link.scroll.scrolled, .bi.scroll.scrolled {
    color: #000;
}

.nav-link.scroll.active {
    font-weight: 600;
    color: #fff;
    border-bottom-color: rgb(255, 193, 78);
}

.nav-link.scroll.active.scrolled {
    color: #000;
    border-bottom-color: rgb(255, 193, 78);
}