body {
    padding-top: 65px;
}

.feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    font-size: 1.5rem;
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.slide-up {
    opacity: 0;
    transform: translateY(300px);
    animation: slideUp 1s forwards; 
}

@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@-webkit-keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

.zoom-in {
    animation: zoomIn 1s ease-in-out;
  }

  @keyframes zoomIn {
    from {
      transform: scale(0);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

.drei-d {
    color: #eeeeee;
    text-shadow: 0px 0px 0 rgb(188, 188, 188),
        0px 1px 0 rgb(154, 154, 154),
        0px 2px 0 rgb(121, 121, 121),
        0px 3px 0 rgb(88, 88, 88),
        0px 4px 3px rgba(0, 0, 0, 0.6),
        0px 4px 1px rgba(0, 0, 0, 0.5),
        0px 0px 3px rgba(0, 0, 0, .2);
}

.img_hover:hover {
    transform: scale(1.05);
    transition: transform 150ms linear
}

/* ============ back to top button ============ */
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}

/* ============ back to top button ============ */
.sunken {
    background-color: #f3f3f3;
    -webkit-box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #f9f9f9;
    box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #f9f9f9;
}

.calendar-text {
    text-shadow: #fff 0 1px 0;
}

.stack {
    -webkit-box-shadow: 1px 1px 0 #aaaaaa, 2px 2px 0 #dddddd, 3px 3px 0 #aaaaaa, 4px 4px 0 #dddddd, 5px 5px 0 #aaaaaa, 6px 6px 0 #dddddd;
    -moz-box-shadow: 1px 1px 0 #aaaaaa, 2px 2px 0 #dddddd, 3px 3px 0 #aaaaaa, 4px 4px 0 #dddddd, 5px 5px 0 #aaaaaa, 6px 6px 0 #dddddd;
    box-shadow: 1px 1px 0 #aaaaaa, 2px 2px 0 #dddddd, 3px 3px 0 #aaaaaa, 4px 4px 0 #dddddd, 5px 5px 0 #aaaaaa, 6px 6px 0 #dddddd;
}

/* ============ hover open menu - only desktop view ============ */
@keyframes navbar-dropdown-show {
    from {
        transform: scale(0.5);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

@media all and (min-width: 992px) {
    body {
        padding-top: 56px;
    }

    .navbar .nav-item .dropdown-menu {
        display: none;
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
        animation: navbar-dropdown-show .2s
    }

    .navbar .nav-item .dropdown-menu {
        margin-top: 0;
        animation: navbar-dropdown-show .2s
    }
}

.navbar .nav-item .dropdown-menu {
    animation: navbar-dropdown-show .2s
}

/* ============ hover open menu - desktop view .end// ============ */

/* ============ Hamburger-menue right ============ 
.navbar .navbar-nav {
    text-align: right;
}

.navbar .navbar-nav .nav-link {
    padding-right: 1em;
}
 ============ Hamburger-menue right ============ */

/* ============ Toggle-Button ============ */
.bd-mode-toggle {
    z-index: 1500;
}

.bi {
    fill: currentColor;
}


/* ============ Toggle-Button ============ */

/* ============ Accordion ================ */
.accordion {
    --bs-accordion-active-color: var(--bs-success-text-emphasis);
    --bs-accordion-active-bg: var(--bs-success-bg-subtle);
}

/* 9:16 Video-Seitenverhältnis für Bootstrap 5 */
.ratio-9x16 {
    position: relative;
    width: 100%;
    padding-top: 177.78%;
    /* (16 / 9) * 100 = 177.78% */
}

.ratio-9x16 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.text-heart3 {
    color: #F3A74F !important;
}

.text-heart4 {
    color: #FDDC8B !important;
}

  /* ============ Aktiver Button orange einfärben - Dynamische Anpassung je nach Theme ============*/
  :root {
    --custom-active-bg: rgb(228, 148, 0);
  }

  [data-bs-theme="dark"] {
    --custom-active-bg: darkorange;
  }

  .dropdown-menu .dropdown-item.active {
    background-color: var(--custom-active-bg) !important;
    color: rgb(255, 255, 255);
  }

  .dropdown-menu .dropdown-item.active:hover {
    background-color: var(--custom-active-bg) !important;
    opacity: 0.9;
  }

  .dropdown-menu .dropdown-item:active {
    background-color: var(--custom-active-bg) !important;
    opacity: 0.8;
  }