/**
 * KMT Poly Media Text
 * Nachbau der Elementor-Komponente (poly-mask) als klassisches Widget.
 * Alle Werte sind über CSS-Variablen steuerbar; die Fallbacks entsprechen der Komponente.
 */

.kmt-pmt {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: var(--kmt-pmt-gap, 80px);
    max-width: var(--kmt-pmt-max-width, 1920px);
    min-height: var(--kmt-pmt-min-h, 0px);
    margin-inline: auto;
    padding: 0;
    background-color: var(--kmt-pmt-bg, var(--Primary-Blue, #00325A));
    overflow: hidden;
    clip-path: polygon(0% var(--kmt-pmt-top-inset, 9.5%),
            var(--kmt-pmt-top-peak, 72%) 0%,
            100% var(--kmt-pmt-top-inset, 9.5%),
            100% calc(100% - var(--kmt-pmt-bottom-inset, 7.5%)),
            var(--kmt-pmt-bottom-peak, 22%) 100%,
            0% calc(100% - var(--kmt-pmt-bottom-inset, 7.5%)));
}

/* Form gespiegelt (Bild links) */
.kmt-pmt--mirror {
    clip-path: polygon(0% var(--kmt-pmt-top-inset, 9.5%),
            calc(100% - var(--kmt-pmt-top-peak, 72%)) 0%,
            100% var(--kmt-pmt-top-inset, 9.5%),
            100% calc(100% - var(--kmt-pmt-bottom-inset, 7.5%)),
            calc(100% - var(--kmt-pmt-bottom-peak, 22%)) 100%,
            0% calc(100% - var(--kmt-pmt-bottom-inset, 7.5%)));
}

.kmt-pmt--image-left {
    flex-direction: row-reverse;
}

/* ---------- Textspalte ---------- */

.kmt-pmt__content {
    flex: 0 1 50%;
    width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: var(--kmt-pmt-valign, center);
    gap: var(--kmt-pmt-content-gap, 25px);
    padding-block: var(--kmt-pmt-pad-top, 150px) var(--kmt-pmt-pad-bottom, 150px);
    padding-inline: var(--kmt-pmt-pad-outer, 60px) var(--kmt-pmt-pad-inner, 80px);
    box-sizing: border-box;
}

.kmt-pmt--image-left .kmt-pmt__content {
    padding-inline: var(--kmt-pmt-pad-inner, 80px) var(--kmt-pmt-pad-outer, 60px);
}

.kmt-pmt__title {
    margin: 0;
    color: var(--orange, #FF8300);
}

.kmt-pmt__text {
    margin-inline-start: 5px;
    font-family: "DIN Pro", sans-serif;
    font-weight: 300;
    font-size: var(--24, clamp(1.25rem, 1.083rem + 0.667vw, 1.5rem));
    line-height: 1.5em;
    color: var(--White, #FFFFFF);
}

/* Text-/Listen-Regeln gelten auch für Poly Image Text (.kmt-pit__text) */
.kmt-pmt__text > :first-child,
.kmt-pit__text > :first-child {
    margin-top: 0;
}

.kmt-pmt__text > :last-child,
.kmt-pit__text > :last-child {
    margin-bottom: 0;
}

.kmt-pmt__text p,
.kmt-pit__text p {
    margin: 0 0 var(--kmt-pmt-p-spacing, 1em);
}

.kmt-pmt__text a,
.kmt-pit__text a {
    color: inherit;
    text-decoration: underline;
}

.kmt-pmt__text ul,
.kmt-pmt__text ol,
.kmt-pit__text ul,
.kmt-pit__text ol {
    margin: 0 0 var(--kmt-pmt-p-spacing, 1em);
    padding-left: 20px;
}

.kmt-pmt__text ul,
.kmt-pit__text ul {
    list-style: disc;
}

.kmt-pmt__text ol,
.kmt-pit__text ol {
    list-style: decimal;
}

.kmt-pmt__text li,
.kmt-pit__text li {
    margin-bottom: 5px;
}

.kmt-pmt__text li::marker,
.kmt-pit__text li::marker {
    color: var(--kmt-pmt-marker, var(--e-global-color-orange, var(--orange, #FF8300)));
}

/* ---------- Bildspalte ---------- */

.kmt-pmt__media {
    position: relative;
    flex: 0 1 50%;
    width: 50%;
    min-width: 0;
    margin: 0;
    padding: 0;
    clip-path: polygon(var(--kmt-pmt-img-slant, 6%) 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Bild links, Form gespiegelt: Schräge auf der Innenkante, gespiegelt */
.kmt-pmt--image-left.kmt-pmt--mirror .kmt-pmt__media {
    clip-path: polygon(0% 0%, calc(100% - var(--kmt-pmt-img-slant, 6%)) 0%, 100% 100%, 0% 100%);
}

/* Bild links, Form nicht gespiegelt: gleiche Neigung wie das Original */
.kmt-pmt--image-left:not(.kmt-pmt--mirror) .kmt-pmt__media {
    clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--kmt-pmt-img-slant, 6%)) 100%, 0% 100%);
}

.kmt-pmt__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--kmt-pmt-img-pos, center center);
    border-radius: 0;
}

/* ---------- Responsive (Elementor-Standard-Breakpoints wie in der Komponente) ---------- */

@media (max-width: 1350px) {
    .kmt-pmt {
        gap: var(--kmt-pmt-gap, 40px);
    }
}

@media (max-width: 1024px) {

    .kmt-pmt,
    .kmt-pmt--image-left {
        flex-direction: column;
        gap: var(--kmt-pmt-gap, 20px);
    }

    .kmt-pmt--mobile-image-above,
    .kmt-pmt--image-left.kmt-pmt--mobile-image-above {
        flex-direction: column-reverse;
    }

    .kmt-pmt__content,
    .kmt-pmt--image-left .kmt-pmt__content {
        flex-basis: auto;
        width: 100%;
        padding-block-end: var(--kmt-pmt-pad-bottom, 30px);
    }

    .kmt-pmt__media,
    .kmt-pmt--image-left .kmt-pmt__media,
    .kmt-pmt--image-left:not(.kmt-pmt--mirror) .kmt-pmt__media {
        flex-basis: auto;
        width: 100%;
        clip-path: polygon(0% 0%, 100% var(--kmt-pmt-img-slant-m, 10%), 100% 100%, 0% 100%);
    }

    .kmt-pmt--image-left.kmt-pmt--mirror .kmt-pmt__media {
        clip-path: polygon(0% var(--kmt-pmt-img-slant-m, 10%), 100% 0%, 100% 100%, 0% 100%);
    }

    .kmt-pmt__media img {
        position: static;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 767px) {
    .kmt-pmt {
        padding-block-start: 40px;
    }

    .kmt-pmt__content,
    .kmt-pmt--image-left .kmt-pmt__content {
        gap: var(--kmt-pmt-content-gap, 20px);
        padding-block: var(--kmt-pmt-pad-top, 60px) var(--kmt-pmt-pad-bottom, 20px);
        padding-inline: var(--kmt-pmt-pad-outer, 20px) var(--kmt-pmt-pad-inner, 20px);
    }
}

/* ==========================================================================
   Poly Image Text
   Nachbau der Atomic-Komponente: rechteckige Box, nur das Bild hat den Polygon-Clip.
   ========================================================================== */

.kmt-pit {
    display: flex;
    flex-direction: row;
    gap: var(--kmt-pit-gap, 80px);
    max-width: 1920px;
    margin-inline: auto;
    background-color: var(--kmt-pit-bg, var(--Primary-Blue, #00325A));
    --kmt-pit-title-color: var(--orange, #FF8300);
    --kmt-pit-text-color: var(--White, #FFFFFF);
}

.kmt-pit--image-left {
    flex-direction: row-reverse;
}

.kmt-pit__content {
    flex: 0 1 50%;
    width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--kmt-pit-content-gap, 25px);
    padding-block: var(--kmt-pit-pad-block, 90px);
    padding-inline: var(--kmt-pit-pad-outer, 40px) var(--kmt-pit-pad-inner, 40px);
    box-sizing: border-box;
}

.kmt-pit--image-left .kmt-pit__content {
    padding-inline: var(--kmt-pit-pad-inner, 40px) var(--kmt-pit-pad-outer, 40px);
}

.kmt-pit__title {
    margin: 0;
    color: var(--kmt-pit-title-color);
}

.kmt-pit__text {
    font-family: "DIN Pro", sans-serif;
    font-weight: 300;
    font-size: var(--24, clamp(1.25rem, 1.083rem + 0.667vw, 1.5rem));
    line-height: 1.5em;
    color: var(--kmt-pit-text-color);
}

.kmt-pit a.kmt-pit__button {
    align-self: flex-start;
    display: inline-block;
    padding: 16px 20px;
    font-family: "DIN Pro", sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    text-decoration: none;
    color: var(--White, #FFFFFF);
    background-color: var(--orange, #FF8300);
    border-radius: 0;
}

.kmt-pit a.kmt-pit__button:hover,
.kmt-pit a.kmt-pit__button:focus-visible {
    color: var(--Primary-Blue, #00325A);
}

/* Padding statt Margin: Theme-Resets auf figure-Margins greifen hier nicht. */
.kmt-pit .kmt-pit__media {
    flex: 0 1 50%;
    width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    padding: var(--kmt-pit-media-space, 80px) 0;
}

.kmt-pit__media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
    border-radius: 0;
    clip-path: polygon(73% 0%, 100% 7%, 100% 90%, 31% 100%, 0% 93%, 0% 9%);
}

.kmt-pit--image-left .kmt-pit__media img {
    clip-path: polygon(27% 0%, 0% 7%, 0% 90%, 69% 100%, 100% 93%, 100% 9%);
}

/* Ab Tablet quer (Elementor tablet_extra) gestapelt, Bild oben: nebeneinander wird die Textspalte zu schmal. */
@media (max-width: 1350px) {

    .kmt-pit,
    .kmt-pit--image-left {
        flex-direction: column-reverse;
        gap: var(--kmt-pit-gap, 20px);
    }

    .kmt-pit__content,
    .kmt-pit--image-left .kmt-pit__content {
        width: 100%;
        flex-basis: auto;
        padding-block: 0 var(--kmt-pit-pad-block, 50px);
        padding-inline: var(--kmt-pit-pad-outer, 55px);
    }

    .kmt-pit .kmt-pit__media {
        width: 100%;
        flex-basis: auto;
        padding-block: var(--kmt-pit-media-space, 40px) 0;
    }

    /* Querformat: Bild darf nicht den ganzen Screen füllen, object-fit beschneidet. */
    .kmt-pit__media img {
        max-height: 60vh;
    }
}

@media (max-width: 767px) {

    .kmt-pit__content,
    .kmt-pit--image-left .kmt-pit__content {
        gap: var(--kmt-pit-content-gap, 20px);
        padding-block-end: var(--kmt-pit-pad-block, 40px);
        padding-inline: var(--kmt-pit-pad-outer, 20px);
    }
}