.plattsatt-hero {
    /* Farben/Abstände aus dem Sitepackage-Theme (layout.css :root) */
    --ph-bg: var(--color-bgheader);
    --ph-gap: var(--defaultunit);
    --ph-text-color: var(--color-black);

    /* Innen-Padding des Hero (Desktop), unabhängig vom #banner-Rand */
    --ph-pad-block: var(--defaultunit);
    --ph-pad-inline: clamp(1.5rem, 4vw, 5rem);

    background-color: var(--ph-bg);
    color: var(--ph-text-color);
    width: 100%;

    padding: calc(2 * var(--defaultunit));
    box-sizing: border-box;
}

.plattsatt-hero__inner {
    box-sizing: border-box;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "logo"
        "left"
        "right";
    gap: var(--ph-gap);
}

.plattsatt-hero__logo {
    grid-area: logo;
}

.plattsatt-hero__left {
    grid-area: left;
}

.plattsatt-hero__right {
    grid-area: right;
}

.plattsatt-hero__left,
.plattsatt-hero__right {
    min-width: 0;
}

/* Linke Spalte: reines Bild */
.plattsatt-hero__image-left {
    display: block;
    width: 100%;
    height: auto;
}

/* Rechte Spalte: vertikaler Stapel */
.plattsatt-hero__right {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 2rem);
}

/* Logo oben rechts */
.plattsatt-hero__logo {
    display: flex;
    justify-content: flex-start;
}

.plattsatt-hero__image-logo {
    display: block;
    width: auto;
    height: auto;
    max-height: 60px;
}

/* Bildclaim */
.plattsatt-hero__image-claim {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

/* CKEditor-Text */
.plattsatt-hero__text {
    max-width: 33vw;
}

.plattsatt-hero__text p {
	font-size: 45px;
	line-height: 1.4;
	letter-spacing: 0.025em;
}

.plattsatt-hero__text :first-child {
    margin-top: 0;
}

.plattsatt-hero__text :last-child {
    margin-bottom: 0;
}

/* Grüner Störer – ragt nach rechts heraus */
.plattsatt-hero__stoerer {
    align-self: flex-start;
}

.plattsatt-hero__image-stoerer {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Desktop: zwei Spalten */
@media (min-width: 768px) {
    .plattsatt-hero {
        padding: 0;
    }

    .plattsatt-hero__inner {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "left logo" "left right";
        column-gap: var(--defaultunit);
        row-gap: clamp(1rem, 2.5vw, 2rem);
        align-items: start;
        padding: var(--ph-pad-block) var(--ph-pad-inline) var(--ph-pad-block) calc(2 * var(--ph-pad-inline));
    }

    .plattsatt-hero__logo {
        justify-content: flex-end;
    }

    /* Logo größer */
    .plattsatt-hero__image-logo {
        width: auto;
        height: clamp(80px, 6vw, 120px);
        max-height: none;
    }

    /* linke Grafik tiefer setzen, damit das Logo darüber sitzt */
    .plattsatt-hero__left {
        margin-top: clamp(2rem, 4vw, 4rem);
    }

    /* linke Grafik: natürliche Größe, nicht hochskalieren */
    .plattsatt-hero__image-left {
        width: clamp(320px, 40vw, 700px);
        max-width: 100%;
    }

    /* rechte Spalte füllt die Höhe: Claim/Text oben, Störer unten */
    .plattsatt-hero__right {
        align-self: stretch;
        justify-content: space-between;
    }

    .plattsatt-hero__image-claim {
        width: clamp(220px, 26vw, 400px);
        max-width: 100%;
    }

    /* Störer unten rechts, läuft bis an den Browserrand (hebt Innen-Padding + #banner-Padding auf) */
    .plattsatt-hero__stoerer {
        align-self: flex-end;
        margin-right: calc(-1 * (var(--defaultunit) + var(--ph-pad-inline)));
    }

    .plattsatt-hero__image-stoerer {
        width: clamp(320px, 36vw, 650px);
        max-width: none;
        transform: translateY(-20px);
    }
}



@media (max-width: 767px) {
    .plattsatt-hero__logo {
        justify-content: flex-end;
    }

    .plattsatt-hero__image-logo {
        display: block;
        width: auto;
        height: auto;
        max-height: 70px;
    }

    .plattsatt-hero__left {
        padding: calc(2 * var(--defaultunit));
    }

    .plattsatt-hero__claim {
        display: flex;
        justify-content: center;
    }

    .plattsatt-hero__image-claim {
        max-width: 60%;
    }

    .plattsatt-hero__text {
        max-width: initial;
    }

    .plattsatt-hero__text p {
        font-size: 6.2dvw;
        line-height: 1.4;
    }

    .plattsatt-hero__stoerer {
        align-self: flex-start;
        margin-right: calc((-2) * var(--defaultunit));
        display: flex;
        justify-content: flex-end;
    }

    .plattsatt-hero__image-stoerer {
        max-width: 80%;
    }
}