/* Das serverseitig bestimmte Schema gilt auch fuer neue Standortseiten.
   Die Variablen am body haben Vorrang vor alten klassenbasierten Akzenten. */
body.is-leistungen-page[data-service-theme] {
    --kg-service-hero-background: var(--kg-service-hero-desktop);
}

@media (max-width: 992px) {
    body.is-leistungen-page[data-service-theme] {
        --kg-service-hero-background: var(--kg-service-hero-mobile);
    }
}

html body.is-leistungen-page[data-service-theme] main :is(#hero, .kg-runtime-hero),
html body.is-leistungen-page[data-service-theme] main :is(.kg-hero-stack, .gd-hero-stack):has(#hero, .kg-runtime-hero) {
    background-image: var(--kg-service-hero-background) !important;
}

/* Der Verlauf liegt einmal auf dem gemeinsamen Jumbotron-/Hero-Wrapper.
   Auch das vom Footer nachtraeglich erzeugte Markup bleibt transparent. */
html body.is-leistungen-page[data-service-theme] main :is(.kg-hero-stack, .gd-hero-stack) :is(#hero, .kg-runtime-hero) {
    background: transparent !important;
}

html body.is-leistungen-page[data-service-theme] main #kontakt {
    background-image: var(--kg-service-contact-background) !important;
}

body.is-leistungen-page[data-service-theme] main .cleanplan {
    --cleanplan-card-bg: var(--kg-service-contact-background) !important;
}

/* Sobald die runde Bildspalte verschwindet, wird das Foto zum Hintergrund.
   Derselbe Breakpoint steht im gemeinsamen Kontaktlayout. */
@media (max-width: 1279.98px) {
    body[data-service-theme] #kontakt.gb-contact {
        --kg-service-contact-photo: url('/img/gebaeudereinigung-bonn.webp');
    }

    body[data-service-theme] #kontakt.grs-contact {
        --kg-service-contact-photo: url('/img/gebaeudereinigung_rhein-sieg-kreis.webp');
    }

    html body.is-leistungen-page[data-service-theme] main #kontakt {
        background-image: linear-gradient(135deg,
            color-mix(in srgb, var(--kg-service-contact-start) 78%, transparent),
            color-mix(in srgb, var(--kg-service-contact-end) 52%, transparent)),
            linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.32)),
            var(--kg-service-contact-photo, var(--kg-contact-overlay-image, none)) !important;
    }
}

/* Eine Klasse und eine CSS-Quelle fuer alle Hero-Kicker.
   Grundlage ist der bisherige Kicker der Gebaeudedienste-Seite. */
html body.is-leistungen-page main #hero .kg-hero-kicker {
    display: inline-flex !important;
    align-items: center;
    gap: 0.55rem;
    max-width: 100%;
    margin: 0 0 1rem !important;
    padding: 0;
    color: #fff !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    text-shadow: none;
}

html body.is-leistungen-page main #hero .kg-hero-kicker i {
    display: none !important;
}