/* Abstand des Einleitungstextes in der Leistungssektion analog zu den Unterseiten */
.services-intro {
    max-width: 860px;
    padding-top: 32px;
}

/* Über mich: Abstand zwischen Titel und Textblock an Unterseiten-Referenz angleichen */
.home-about-section .about-content .section-header {
    margin-bottom: 0;
}

.home-about-section .about-content .section-title {
    margin-bottom: 28px;
}

/* Leistungen: Bildwirkung analog zu den Unterseiten */
.services-section .service-card .service-image {
    filter: contrast(0.8) saturate(0.66);
}

/* Homepage-Bilder: einheitliche Bildwirkung in allen Viewports */
.intro-section .intro-visual-image,
.home-about-section .about-image {
    filter: contrast(0.8) saturate(0.66);
}


/* =========================================================
   STANDARDISIERTE ELEMENTABSTÄNDE
========================================================= */
.services-intro {
    padding-top: 0;
}

.home-about-section .about-content .section-title {
    margin-bottom: 0;
}

/* =========================================================
   ÜBER MICH – BUTTON / COUNTER VERTIKAL AUSRICHTEN
   Desktop: Counter bündig zur Bildunterkante, Button mittig
   zwischen Textblock und oberem Counter-Trennstrich.
========================================================= */
@media (min-width: 1001px) {
    .home-about-section .about-content .section-action {
        margin-top: auto;
        margin-bottom: auto;
    }

    .home-about-section .about-content .section-counter {
        margin-top: 0;
        margin-bottom: 0;
    }
}



/* =========================================================
   HERO – VIDEO
   Homepage-spezifisches Hintergrundvideo mit weichem Loop.
========================================================= */
.hero-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.js-enabled .hero-video {
    opacity: 0;
}

/* =========================================================
   HERO – HOMEPAGE DESKTOP
   Inhaltsabhängige Höhe mit symmetrischem Abstand oberhalb
   und unterhalb des Textblocks. Die globale Hero-Basis bleibt
   in style.css unverändert.
========================================================= */
@media (min-width: 701px) {
    .hero {
        height: auto;
        min-height: 0;
        display: block;
        padding-top: 90px;
    }

    .hero-content {
        padding-top: var(--section-space-y);
        padding-bottom: var(--section-space-y);
    }
}

/* =========================================================
   WENN ES DARAUF ANKOMMT – BILD / TEXT DESKTOP
   Bild links, Inhaltsblock rechts. Die Spalten nutzen den
   globalen Abstand; das Bild folgt der Höhe des Inhaltsblocks.
========================================================= */
@media (min-width: 1001px) {
    .intro-section .intro-content {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .intro-section .intro-visual {
        min-width: 0;
        height: 100%;
        overflow: hidden;
        border-radius: var(--radius);
    }

    .intro-section .intro-visual-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

    .intro-section .intro-copy {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
        text-align: right;
    }

    .intro-section .intro-copy-column {
        width: 100%;
        text-align: right;
    }

    .intro-section .intro-copy-column .intro-text {
        max-width: none;
    }
}

/* =========================================================
   WENN ES DARAUF ANKOMMT – BILD MOBIL
   Mobile/Tablet-Rundung analog zur bestätigten Desktopansicht.
========================================================= */
@media (max-width: 1000px) {
    .intro-section .intro-visual {
        overflow: hidden;
        border-radius: var(--radius);
    }
}

/* =========================================================
   ÜBER MICH – MOBIL
   Begrenzung auf die verfügbare Containerbreite und
   Counter-Anordnung 2 + 1 für schmale Viewports.
========================================================= */
@media (max-width: 700px) {
    .home-about-section .about-layout {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .home-about-section .about-visual,
    .home-about-section .about-content {
        width: 100%;
        min-width: 0;
    }

    .home-about-section .section-counter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-about-section .section-counter .stat:last-child {
        grid-column: 1 / -1;
    }
}