/* m27_usp_with_image */
.m27_usp_with_image {
    position: relative;
    padding: clamp(70px, 6vw, 110px) 0 clamp(80px, 7vw, 130px);
    color: #fff;
    overflow-x: clip;
    z-index: 0;
}

/* Dunkler BG full-width mit V-Cut nach unten (Pfeil zur naechsten Sektion).
   Figma 112:16: dark Rechteck 1920x912, Bild links overlay mit Gold-Offset-
   Frame nach unten-rechts. */
.m27_bg {
    position: absolute;
    inset: 0;
    background: var(--hs-dark);
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 80px),
        50% 100%,
        0 calc(100% - 80px)
    );
    z-index: -1;
}

.m27_grid {
    display: grid;
    /* Container ist "ausfuellung_links" (bleedet zur Viewport-Linke). Damit
       die Content-Spalte exakt bei 50% des Viewports beginnt, fixieren wir
       die Bild-Spalte auf calc(50vw - container_link_offset). Da der
       Container kein Left-Padding hat (= 0), entspricht das 50vw. */
    grid-template-columns: 50vw minmax(0, 1fr);
    gap: 0;
    align-items: center;
    min-height: clamp(440px, 30vw, 600px);
}
.m27_image_col {
    position: relative;
    align-self: stretch;
    /* Padding-Right: Bild endet deutlich vor der 50%-Linie, Content beginnt
       sauber auf 50vw mit sichtbarem Gap zwischen Bild-Rand und Content. */
    padding-right: clamp(80px, 8vw, 160px);
    overflow: visible;
}
.m27_content_col {
    min-width: 0;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Bild mit Gold-Outline-Frame leicht verschoben.
   Figma 112:16: Bild ragt ueber den dunklen m27-Hintergrund nach OBEN hinaus
   (Section-Padding-Top + ~80px Overhang, sodass das Bild den weissen Bereich
   ueber der Section anschneidet). Bild-Bottom bleibt im Section-Inhalt. */
.m27_image_wrap {
    /* Absolute positioniert → Bildhoehe beeinflusst NICHT die Grid-Row-Hoehe.
       Anker am bottom des Grid-Rows, dehnt sich nach OBEN ueber Section-Padding
       und um zusaetzliche ~200px ueber den Section-Top hinaus (Figma 112:16:
       Bild ragt deutlich in den weissen Bereich der vorherigen Section).
       Bild inside hat object-fit:cover, croppt entsprechend. */
    position: absolute;
    bottom: 0;
    left: 0;
    right: clamp(80px, 8vw, 160px); /* = col padding-right */
    height: calc(100% + clamp(70px, 6vw, 110px) + clamp(40px, 3.5vw, 70px));
    z-index: 2;
}
/* Gold-Offset-Rahmen: versetzt nach UNTEN-RECHTS (Figma 112:16, Frame
   left:24 / top:24 relativ zum Bild). */
.m27_image_frame {
    position: absolute;
    inset: 24px -24px -24px 24px;
    border: 1px solid var(--hs-gold);
    pointer-events: none;
    z-index: 1;
}
.m27_image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
}
.m27_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Headline / Text */
.m27_headline {
    color: #fff !important;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.15;
    margin: 0 0 32px;
    max-width: 540px;
}
.m27_headline em {
    font-style: italic;
    font-family: var(--hs-font-display);
    font-weight: 600;
}
.m27_text {
    color: rgba(255,255,255,0.88);
    margin-bottom: 40px;
    max-width: 590px;
}

/* Ghost-Button mit weiss-getönter Outline auf dunklem BG.
   Slide-Fill (::before) wird hier auf weiss umgestellt — sonst fuellt sich der
   Button mit --hs-dark = Section-BG und das Slide wird unsichtbar. Kein
   statischer Background-Tint mehr, damit der Hover sauber von links faedelt. */
.m27_content_col .hs_btn_ghost {
    border-color: rgba(255,255,255,0.3);
    color: #fff;
}
.m27_content_col .hs_btn_ghost::before {
    background: #fff;
}
.m27_content_col .hs_btn_ghost:hover {
    color: var(--hs-dark);
    border-color: #fff;
}

/* USP-Liste: Gold-Quadrat-Icons + Text rechts daneben */
.m27_usps {
    list-style: none;
    margin: 60px 0 0;
    padding: 0;
    display: grid;
    gap: 18px;
}
.m27_usp {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 32px;
    align-items: center;
}
.m27_usp_icon {
    width: 86px;
    height: 86px;
    border-radius: 50%; /* Figma S2: Ellipse 4 — Kreis */
    background: var(--hs-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.m27_usp_icon img { width: 47px; height: 47px; object-fit: contain; filter: brightness(0) invert(1); }
.m27_usp_icon svg { width: 47px; height: 47px; display: block; color: #fff; }
.m27_usp_body { min-width: 0; }
.m27_usp_title {
    display: block;
    color: #fff;
    font-family: var(--hs-font-body);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}
.m27_usp_text {
    display: block;
    color: rgba(255,255,255,0.85);
    font-family: var(--hs-font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

@media (max-width: 1199.98px) {
    .m27_grid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
    .m27_image_col, .m27_content_col { grid-column: 1; }
    .m27_image_col { padding-right: 0; }
    .m27_image_wrap {
        position: relative;
        top: auto;
        right: auto;
        height: auto;
        width: 100%;
        min-height: 400px;
        max-height: 600px;
    }
    .m27_content_col {
        padding: clamp(40px, 5vw, 60px) var(--hs-container-px);
    }
    .m27_bg { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px)); }
    .m27_usp { grid-template-columns: 60px 1fr; gap: 18px; }
    .m27_usp_icon { width: 60px; height: 60px; }
    .m27_usp_icon img,
    .m27_usp_icon svg { width: 34px; height: 34px; }
}
@supports (aspect-ratio: 1) {
    @media (max-width: 1199.98px) {
        .m27_image_wrap {
            min-height: 0;
            aspect-ratio: 16 / 9;
            max-height: none;
        }
    }
}