html,
body {
    font-size: 20.8px;
    /* 16px * 1.3 = 20.8px for 130% scaling */
    zoom: 1;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

/* Firefox-specific scaling without layout shifts */
@-moz-document url-prefix() {
    html {
        font-size: 16px;
        zoom: 1.2;
    }
}

.container-fluid {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.bg-primary {
    background-color: #596ddb !important;
}

.btn-primary {
    background-color: #596ddb !important;
    border-color: #596ddb !important;
    color: white !important;
}

.btn-outline-primary {
    background-color: transparent !important;
    border-color: #596ddb !important;
    color: #596ddb !important;
}

.btn-hover {
    transition: transform .15s ease, box-shadow .15s ease;
    transform-origin: center;
}

.btn-hover:hover {
    transform: scale(1.05);

}

.btn-hover-primary:hover {
    background-color: #454fbb !important;
    border-color: #454fbb !important;
    color: white !important;
}

a {
    text-decoration: none !important;
    color: #596ddb !important;
}

a.button {
    text-decoration: none !important;
    color: white !important;
}


.mt-n1 {
    margin-top: -0.25rem !important;
}

.mt-n2 {
    margin-top: -0.5rem !important;
}

.mt-n3 {
    margin-top: -1rem !important;
}

.mt-n4 {
    margin-top: -1.5rem !important;
}

.mt-n5 {
    margin-top: -3rem !important;
}

.fs-0\.5 {
    font-size: 2rem !important;
}

.nav-big {
    font-size: 1.8rem !important;
}

.container {
    z-index: 1;
}

.cls-rainbow-container {
    --rainbow-spread: 4px;
    /* smaller border */
    position: relative;
    border-radius: var(--radius, 8px);
    overflow: visible;
}

.cls-rainbow-container::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--rainbow-spread));
    left: calc(-1 * var(--rainbow-spread));
    right: calc(-1 * var(--rainbow-spread));
    bottom: calc(-1 * var(--rainbow-spread));
    border-radius: inherit;
    /* animate the conic gradient's starting angle so the colors appear to swim */
    background: conic-gradient(from var(--angle, 0deg),
            #fd004c,
            #fe9000,
            #fff020,
            #3edf4b,
            #3363ff,
            #b102b7,
            #fd004c);
    z-index: 0;
    filter: blur(6px);
    opacity: 0.95;
    pointer-events: none;
    transform-origin: center;
    /* paused by default; animate only when container is observed */
    animation: none;
    will-change: transform, opacity;
}

.cls-rainbow-container.is-observed::before {
    /* swim while visible; border-fade waits 1.5s then fades quickly (0.25s) */
    animation: rainbow-swim 1.5s linear infinite, border-fade 0.25s linear 1.5s forwards;
}

@keyframes border-fade {
    0% {
        opacity: 0.95;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* respect users who prefer reduced motion: no animations and no borderline */
@media (prefers-reduced-motion: reduce) {
    .cls-rainbow-container::before {
        animation: none;
        opacity: 0;
        visibility: hidden;
    }
}

.cls-rainbow-content {
    position: relative;
    z-index: 1;
    border-radius: inherit;
    background: var(--inner-bg, #f8f9fa);
}

.carousel-custom-img,
.team-custom-img {
    height: 400px;
    object-fit: cover;
}

/* Only affect small screens so desktop stays the same */
@media (max-width: 767.98px) {

    /* Global mobile adjustments */
    html, body {
        font-size: 18px; /* Reduce base font size slightly */
    }

    /* Hero adjustments */
    #hero {
        padding-top: 2rem !important;
        padding-bottom: 1.5rem !important;
        text-align: center;
    }

    #hero img {
        max-width: 220px;
        height: auto;
    }

    #hero h1 {
        font-size: 1.5rem;
        margin-top: .75rem;
    }

    #hero .lead {
        font-size: 0.95rem;
    }

    /* Navigation: stack links for easier tapping on mobile */
    .nav-big {
        flex-direction: column;
        gap: .5rem;
        padding: 0;
    }

    .nav-big .nav-link {
        display: block;
        padding: .5rem .75rem;
        border-radius: .375rem;
    }

    /* Main CTA buttons stack full width */
    .col-7 .d-grid.d-md-flex {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .col-7 .d-grid.d-md-flex .btn {
        width: 100%;
    }

    /* Hero image: limit height so it doesn't dominate on small screens */
    .col-5 img {
        max-height: 220px;
        width: auto;
    }

    /* Offer heading scaling */
    h1#angebot {
        font-size: 1.25rem;
    }

    /* Offer list: stack vertically */
    .list-unstyled.d-flex.gap-3 {
        flex-direction: column;
        gap: 0.5rem !important;
    }

    /* Team cards & Carousel: reduce image height */
    .carousel-custom-img,
    .team-custom-img {
        height: 250px;
    }

    .overlay-content {
        padding: .75rem;
    }

    /* Stack button groups */
    .d-flex.gap-2 {
        flex-direction: column;
    }

    .d-flex.gap-2 .btn {
        width: 100%;
    }

    /* Contact/map: reduce vertical size hint */
    .ratio.ratio-16x9 {
        min-height: 160px;
    }

    /* Footer: stack content for better reading */
    footer .container {
        text-align: center;
    }

    footer .col-md-6.text-md-end {
        text-align: center;
        margin-top: .75rem;
    }

    /* Small spacing adjustments for containers inside rainbow wrapper */
    .cls-rainbow-container {
        padding: .25rem;
        --rainbow-spread: 1px;
    }

    .cls-rainbow-container::before {
        filter: blur(2px);
    }
}

.clickable-card {
    transition: transform .22s ease, box-shadow .22s ease;
    transform-origin: center;
    cursor: pointer;
    display: block;
    color: inherit;
    text-decoration: none;
}

.clickable-card:hover {
    transform: scale(1.03);
    z-index: 3;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

.clickable-card .card-img {
    filter: brightness(0.98);
    transition: transform .22s ease;
}

.clickable-card:hover .card-img {
    transform: scale(1.02);
}

/* Overlay transition: fade & slide out on hover */
.clickable-card .card-img-overlay {
    pointer-events: none;
    /* allow click through to the link */
}

.clickable-card .overlay-content {
    background: rgba(0, 0, 0, 0.55);
    /* explicit bg so we can animate opacity */
    transition: transform .22s ease, opacity .22s ease, background-color .22s ease;
    transform: translateY(0);
    opacity: 1;
}

.clickable-card:hover .overlay-content {
    transform: translateY(10px);
    opacity: 0;
}
/* Professional Card Hover Effect */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
}

.text-primary {
    color: #596ddb !important;
}

/* Nav Pills Customization */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #596ddb !important;
    color: white !important;
}

.nav-pills .nav-link {
    color: #596ddb;
}

.nav-pills .nav-link:hover {
    color: #454fbb;
}