/* Home Page – screen-spezifische Klassen (011-ui-css-general: nur Klassen-Selektoren, keine #id). */
/* Basis-Typografie/Layout aus widgets-*; hier nur mobile Hero-Lesbarkeit (overflow/text-wrap). */

.screen-home-container {
    box-sizing: border-box;
    overflow-x: hidden;
}

.screen-home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2px 0 3rem;
    position: relative;
    z-index: 10;
    text-align: center;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.screen-home-hero-content {
    max-width: 100%;
    padding: 3px;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Mobile/Tablet (<1024px): Bild unter Beschreibung */
@media (max-width: 1023px) {
    .screen-home-hero-content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .screen-home-hero-left {
        display: contents;
    }

    .screen-home-hero-headline-wrapper {
        order: 1;
    }

    .screen-home-hero-desc {
        order: 2;
        margin-top: 30px;
        margin-bottom: 0;
    }

    .screen-home-hero .base-hero-visual {
        order: 3;
        margin: 1.25rem 0 1.5rem;
        width: 100%;
    }

    .screen-home-hero .base-hero-actions {
        order: 4;
    }
}

.screen-home-hero-headline-wrapper {
    margin-bottom: 0;
}

.screen-home-hero-desc {
    margin-top: 30px;
}

@media (min-width: 1024px) {
    .screen-home-hero {
        display: block;
        text-align: left;
        padding: 2rem 0 5rem;
        box-sizing: border-box;
        width: 100%;
    }

    .screen-home-hero-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 48px;
        width: 100%;
        padding: 3px;
    }

    /* Textspalte nimmt den Grossteil der Hero-Content-Breite ein */
    .screen-home-hero-left {
        display: flex;
        flex-direction: column;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
    }

    .screen-home-hero-desc {
        margin-top: 30px;
        margin-bottom: 1.5rem;
    }

    .screen-home-hero .base-hero-visual {
        flex: 0 1 38%;
        margin: 0;
        width: auto;
        min-width: 0;
        max-width: 38%;
    }

    .screen-home-hero .base-hero-image-wrapper {
        width: auto;
        max-width: 100%;
    }

    .screen-home-hero .base-hero-image {
        display: block;
        max-width: 100%;
        max-height: 380px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

.screen-home-hero-title {
    margin: 0 0 1.25rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    text-wrap: wrap;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Widescreen (1440px+): Textspalte bleibt dominant, Bild skaliert mit */
@media (min-width: 1440px) {
    .screen-home-hero-content {
        gap: 48px;
    }

    .screen-home-hero .base-hero-visual {
        flex: 0 1 36%;
        max-width: 36%;
    }

    .screen-home-hero .base-hero-image {
        max-width: 100%;
        max-height: none;
    }

    .screen-home-hero-desc {
        margin-bottom: 1.75rem;
    }
}

.screen-home-hero-headline-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    box-sizing: border-box;
}

.screen-home-hero-desc {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    margin-bottom: 2rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    text-wrap: wrap;
}

/* Tablet/iPad (600–1023px): Hero-Motiv begrenzen – Querformat wirkt sonst zu dominant in der Spalte */
@media (min-width: 600px) and (max-width: 1023px) {
    .screen-home-hero .base-hero-visual {
        width: 100%;
        max-width: 100%;
    }

    .screen-home-hero .base-hero-image-wrapper {
        max-width: min(480px, 88vw);
        margin-inline: auto;
    }

    .screen-home-hero .base-hero-image {
        max-width: 100%;
        max-height: 320px;
        width: auto;
        height: auto;
        object-fit: contain;
    }
}

/* Änderungsprotokoll: 2026-08-27 | parent-agent | @skill-css-rules, @skill-change-provenance | Features-Header volle Abschnittsbreite linksbündig ohne base-section-header-700px */
.screen-home-features-section-header {
    text-align: left;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    margin-bottom: 4rem;
    box-sizing: border-box;
}

/* Änderungsprotokoll: 2026-08-27 | parent-agent | @skill-css-rules, @skill-change-provenance | Features-Headline-Wrapper volle Breite linksbündig */
.screen-home-features-headline-wrapper {
    width: 100%;
    max-width: 100%;
    text-align: left;
}

/* Änderungsprotokoll: 2026-08-27 | parent-agent | @skill-css-rules, @skill-change-provenance | KPI-Header volle Abschnittsbreite linksbündig ohne base-section-header-700px */
.screen-home-kpi-section-header {
    text-align: left;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    margin-bottom: 1.5rem;
    box-sizing: border-box;
}

/* Änderungsprotokoll: 2026-08-27 | parent-agent | @skill-css-rules, @skill-change-provenance | KPI-H2 kompakter als Standard-Headline */
.screen-home-kpi-title {
    font-size: clamp(1.125rem, 1.5vw + 0.5rem, var(--font-size-xl));
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.screen-home-features-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .screen-home-features-actions {
        margin-top: 3.5rem;
    }
}