/* ============================================
 * m40_advisory - Beratungs-Sektion
 *   Variants: white | cream | dark
 *   Layouts:  image_left | image_right
 *   Figma: Image 625x567, Text 553 wide, Video-Image 1720x818
 * ============================================ */
.m40_advisory {
    padding: clamp(48px, 7vw, 110px) 0;
    color: #1d1d1b;
}
.m40_advisory.m40_variant_white { background: #fff; }
.m40_advisory.m40_variant_grey  { background: #F7F7F7; }
.m40_advisory.m40_variant_cream { background: #F2EEE5; }
.m40_advisory.m40_variant_dark  { background: var(--hs-dark); color: #fff; }

/* Container-Breite kommt aus globalem .hs_container + data-container Attribut */

/* --- Header --- */
.m40_header {
    margin-bottom: clamp(40px, 4vw, 64px);
}
.m40_headline {
    color: var(--hs-dark);
    font-weight: 600;
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.125;
    letter-spacing: 0.03em;
    margin: 18px 0 0;
    max-width: 1341px;
}
.m40_variant_dark .m40_headline { color: #fff; }
.m40_headline em, .m40_headline i {
    font-style: italic; font-weight: 600; font-family: var(--hs-font-display);
}

/* --- 2-col Grid (Image + Text) --- */
.m40_grid {
    display: grid;
    grid-template-columns: minmax(0, 625fr) minmax(0, 553fr);
    gap: clamp(40px, 4vw, 130px);
    align-items: start;
}
.m40_advisory.m40_layout_image_right .m40_grid {
    grid-template-columns: minmax(0, 553fr) minmax(0, 625fr);
}
.m40_advisory.m40_layout_image_right .m40_image_col { order: 2; }
.m40_advisory.m40_layout_image_right .m40_text_col  { order: 1; }

.m40_image_col {
    position: relative;
}
.m40_image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.m40_text_col {
    padding-top: clamp(0px, 1vw, 32px);
}
.m40_text {
    color: inherit;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-bottom: 32px;
    max-width: 600px;
}
.m40_variant_dark .m40_text { color: #fff; }
.m40_text p { margin: 0 0 1.5em; }
.m40_text p:last-child { margin-bottom: 0; }

/* --- Bullets mit Gold-Marker --- */
.m40_bullets {
    list-style: none;
    margin: 0 0 40px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 32px;
}
.m40_bullets li {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.m40_bullet_mark {
    display: inline-block;
    width: 18px;
    height: 16px;
    flex-shrink: 0;
    background-color: var(--hs-gold);
    /* Figma 68:2026 — stilisiertes Haekchen (gold) statt Block */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 18 16.1193' xmlns='http://www.w3.org/2000/svg'><path d='M7.57887 16.1193C7.57635 16.1193 7.57341 16.1193 7.57089 16.1193C7.46679 16.1172 7.36856 16.0727 7.29804 15.9963L0.100757 8.17022C-0.0226536 8.03589 -0.0339872 7.83356 0.0738924 7.68623C0.181772 7.53931 0.378222 7.48894 0.543609 7.56617L7.13098 10.6506C7.18639 10.6766 7.25187 10.664 7.29426 10.62L17.3426 0.117869C17.4786 -0.0244314 17.7011 -0.0399627 17.8555 0.0826086C18.01 0.20518 18.0457 0.425137 17.9378 0.590104L7.94238 15.9023C7.92811 15.9245 7.91132 15.9447 7.89285 15.9636L7.84877 16.0076C7.77699 16.079 7.67961 16.1193 7.57887 16.1193Z' fill='black'/></svg>") center / contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 18 16.1193' xmlns='http://www.w3.org/2000/svg'><path d='M7.57887 16.1193C7.57635 16.1193 7.57341 16.1193 7.57089 16.1193C7.46679 16.1172 7.36856 16.0727 7.29804 15.9963L0.100757 8.17022C-0.0226536 8.03589 -0.0339872 7.83356 0.0738924 7.68623C0.181772 7.53931 0.378222 7.48894 0.543609 7.56617L7.13098 10.6506C7.18639 10.6766 7.25187 10.664 7.29426 10.62L17.3426 0.117869C17.4786 -0.0244314 17.7011 -0.0399627 17.8555 0.0826086C18.01 0.20518 18.0457 0.425137 17.9378 0.590104L7.94238 15.9023C7.92811 15.9245 7.91132 15.9447 7.89285 15.9636L7.84877 16.0076C7.77699 16.079 7.67961 16.1193 7.57887 16.1193Z' fill='black'/></svg>") center / contain no-repeat;
}
.m40_variant_dark .m40_bullet_mark { background-color: var(--hs-gold); }
.m40_bullet_text {
    color: inherit;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
}
.m40_variant_dark .m40_bullet_text { color: #fff; }

/* --- Optional Video-Block (full-width unter dem 2-col Grid) --- */
.m40_video_headline_wrap {
    margin-top: clamp(60px, 7vw, 120px);
    margin-bottom: clamp(40px, 4vw, 60px);
}
.m40_video_headline {
    color: var(--hs-dark);
    font-family: var(--hs-font-display);
    font-weight: 600;
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.125;
    letter-spacing: 0.03em;
    margin: 0;
}
.m40_variant_dark .m40_video_headline { color: #fff; }
.m40_video_headline em, .m40_video_headline i {
    font-style: italic; font-weight: 600;
}

.m40_video_block {
    position: relative;
    min-height: 300px;
    overflow: hidden;
    background: #000;
    /* Bleed bis zu den Container-Kanten (Figma: 1720px ab left:100px) */
    margin-left: calc(-1 * var(--hs-container-px));
    margin-right: calc(-1 * var(--hs-container-px));
}
@supports (aspect-ratio: 1) {
    .m40_video_block {
        min-height: 0;
        aspect-ratio: 1720 / 818;
    }
}
.m40_video_image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Figma-Overlay: 20% dark */
    filter: brightness(0.85);
    transition: filter 0.3s ease;
}
/* Click-to-Play Poster-Button */
.m40_video_poster {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.m40_video_poster:hover .m40_video_image { filter: brightness(0.75); }
.m40_video_poster:hover .m40_play_btn {
    background: rgba(255, 255, 255, 0.85);
    transform: translate(-50%, -50%) scale(1.06);
}

/* Eingebettetes iframe (YouTube/Vimeo) */
.m40_video_iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Native HTML5 Video */
.m40_video_native {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.m40_play_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.m40_play_btn svg {
    width: 36px;
    height: 36px;
    margin-left: 4px;
}

/* === Video-Only Variante (Figma 67:182) ===
   2-Spalten Intro: LINKS Titel + Ghost-Button, RECHTS Body-Text. Darunter
   full-width Video-Block mit Bild als Poster und kreisrundem Play-Button. */
.m40_advisory.m40_layout_video_only .m40_intro_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 110px);
    align-items: start;
    margin-bottom: clamp(40px, 5vw, 70px);
}
.m40_advisory.m40_layout_video_only .m40_intro_left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(20px, 2.5vw, 40px);
}
.m40_advisory.m40_layout_video_only .m40_intro_left .m40_titel_container { margin: 0; }
.m40_advisory.m40_layout_video_only .m40_intro_left .m40_titel { margin: 0; }
.m40_advisory.m40_layout_video_only .m40_intro_left .hs_btn_ghost {
    width: 305px;
    max-width: 100%;
    min-height: 73px;
}
.m40_advisory.m40_layout_video_only .m40_intro_right .m40_text {
    margin: 0;
    max-width: 555px;
}
.m40_advisory.m40_layout_video_only .m40_video_headline_wrap {
    margin-top: 0;
}

@media (max-width: 768px) {
    .m40_advisory.m40_layout_video_only .m40_intro_grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

@media (max-width: 992px) {
    .m40_grid,
    .m40_advisory.m40_layout_image_right .m40_grid { grid-template-columns: 1fr; gap: 32px; }
    .m40_advisory.m40_layout_image_right .m40_image_col,
    .m40_advisory.m40_layout_image_right .m40_text_col { order: initial; }
    .m40_play_btn { width: 70px; height: 70px; }
    .m40_play_btn svg { width: 28px; height: 28px; }
}