/* Shared components for all service pages. */

body.is-leistungen-page main .kg-related-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 20rem));
    justify-content: start;
    align-items: start;
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
}

body.is-leistungen-page main .kg-related-link-card {
    display: block;
    width: 100%;
    max-width: 20rem;
    min-width: 0;
    padding: 0;
    color: var(--kg-text-color, #212529cf);
    text-decoration: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    transform: none;
}

body.is-leistungen-page main .kg-related-link-card::before,
body.is-leistungen-page main .kg-related-link-card :is(h2, h3, h4)::before {
    content: none;
    display: none;
}

body.is-leistungen-page main :is(.kg-related-link-image, .kg-related-link-card > img) {
    display: block;
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 10;
    height: auto;
    margin: 0 0 0.85rem;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.is-leistungen-page main .kg-related-link-card > :is(p, span) {
    display: none;
}

body.is-leistungen-page main .kg-related-link-card :is(h2, h3, h4) {
    margin: 0;
    color: var(--kg-text-color, #212529cf);
    font-size: clamp(1rem, 1vw, 1.15rem);
    line-height: 1.24;
    font-weight: 500;
    overflow-wrap: anywhere;
    transition: color 0.2s ease, opacity 0.2s ease;
}

body.is-leistungen-page main .kg-related-link-card:is(:hover, :focus-visible) {
    color: var(--kg-page-accent, #004aad);
    outline: none;
    transform: none;
}

body.is-leistungen-page main .kg-related-link-card:is(:hover, :focus-visible) :is(h2, h3, h4) {
    color: var(--kg-page-accent, #004aad);
    opacity: 0.82;
}

body.is-leistungen-page main .kg-spacious-section {
    padding-top: clamp(3.5rem, 6vw, 7rem) !important;
    padding-bottom: clamp(3.5rem, 6vw, 7rem) !important;
}

body.is-leistungen-page main .kg-content-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: clamp(2rem, 4vw, 5rem);
    width: 100%;
    margin-top: clamp(2rem, 3.5vw, 3.5rem);
}

body.is-leistungen-page main .kg-content-block {
    min-width: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.is-leistungen-page main .kg-content-block :is(h3, h4) {
    margin: 0 0 0.75rem;
    color: var(--kg-page-accent, #004aad);
    font-size: var(--kg-text-size, 1rem);
    line-height: 1.35;
    font-weight: 600;
}

body.is-leistungen-page main .kg-content-block p {
    margin: 0;
}

body.is-leistungen-page main .kg-faq-full,
body.is-leistungen-page main .kg-faq-full > .accordion {
    width: 100%;
    max-width: none;
}

body.is-leistungen-page main .praxis-intro-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 6rem);
    width: 100%;
    margin: 0;
}

body.is-leistungen-page main .praxis-intro-layout > [class*="col-"] {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
}

@media (max-width: 991.98px) {
    body.is-leistungen-page main .praxis-intro-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    body.is-leistungen-page main .kg-related-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
    }

    body.is-leistungen-page main .kg-related-link-card {
        max-width: none;
    }

    body.is-leistungen-page main .kg-related-link-card :is(h2, h3, h4) {
        font-size: var(--kg-text-size, 0.875rem);
        line-height: 1.28;
    }
}

/*
 * Single source of truth for the closing contact section on service pages.
 * JavaScript only supplies --kg-contact-overlay-image; layout and presentation
 * stay stable before and after that value is available.
 */
body.is-leistungen-page main section#kontakt {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(2rem, 3vw, 3.75rem) 0 !important;
    color: #fff;
    clip-path: none !important;
    background-color: color-mix(in srgb, var(--kg-page-accent, #004aad) 78%, #000 22%);
    background-image:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--kg-page-accent, #004aad) 78%, transparent),
            color-mix(in srgb, var(--kg-page-accent, #004aad) 52%, transparent)
        ),
        linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.32)),
        var(--kg-contact-overlay-image, none) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

body.is-leistungen-page main section#kontakt > :is(.container, .container-fluid, .container-2140) {
    width: min(100% - (var(--kg-hero-gutter, 20px) * 2), var(--kg-hero-content-max, 2140px)) !important;
    max-width: var(--kg-hero-content-max, 2140px) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

body.is-leistungen-page main section#kontakt > :is(.container, .container-fluid, .container-2140) > .row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    row-gap: clamp(1.5rem, 3vw, 2.5rem);
}

body.is-leistungen-page main section#kontakt > :is(.container, .container-fluid, .container-2140) > .row > [class*="col-"] {
    min-width: 0;
}

body.is-leistungen-page main section#kontakt :is(h1, h2, h3, h4, h5, h6, p, li, span, strong, small, label, a:not(.btn)) {
    color: #fff;
}

body.is-leistungen-page main section#kontakt :is(.btn, .btn-dienste-share-link) {
    transform: none;
    transition:
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        opacity 0.22s ease,
        box-shadow 0.22s ease,
        backdrop-filter 0.22s ease,
        -webkit-backdrop-filter 0.22s ease;
}

body.is-leistungen-page main section#kontakt .btn-dienste-panel .btn-outline-light {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    background-image: none;
    border-color: rgba(255, 255, 255, 0.34);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

body.is-leistungen-page main section#kontakt .btn-dienste-share-link {
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

body.is-leistungen-page main section#kontakt :is(.btn, .btn-dienste-share-link):is(:hover, :focus-visible) {
    color: #fff;
    opacity: 0.82;
    transform: none;
}

@media (max-width: 1279.98px) {
    body.is-leistungen-page main section#kontakt > :is(.container, .container-fluid, .container-2140) > .row {
        display: block !important;
    }

    body.is-leistungen-page main section#kontakt > :is(.container, .container-fluid, .container-2140) > .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-inline: 0 !important;
    }

    body.is-leistungen-page main section#kontakt > :is(.container, .container-fluid, .container-2140) > .row > :first-child:has(img) {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    body.is-leistungen-page main section#kontakt > :is(.container, .container-fluid, .container-2140) > .row > .col-lg-5:first-child {
        display: block !important;
        width: 41.66666667% !important;
        max-width: 41.66666667% !important;
        flex: 0 0 41.66666667% !important;
        padding: 0 clamp(1.25rem, 2vw, 2.5rem) 0 0 !important;
    }

    body.is-leistungen-page main section#kontakt > :is(.container, .container-fluid, .container-2140) > .row > .col-lg-7 {
        width: 58.33333333% !important;
        max-width: 58.33333333% !important;
        flex: 0 0 58.33333333% !important;
        padding: 0 0 0 clamp(1.25rem, 2vw, 2.5rem) !important;
    }

    body.is-leistungen-page main section#kontakt > :is(.container, .container-fluid, .container-2140) > .row > :first-child img {
        display: block !important;
        width: clamp(18rem, 32vw, 40rem) !important;
        height: clamp(18rem, 32vw, 40rem) !important;
        max-width: 100% !important;
        max-height: none !important;
        margin-inline: auto !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
    }
}