/* m33_page_hero — Page-Hero fuer Unterseiten (kompakter als m25) */
.m33_page_hero {
    position: relative;
    width: 100%;
    min-height: clamp(500px, 60vh, 720px);
    background: var(--hs-dark);
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    /* Flacher V-Auslauf unten (weniger dramatisch als m25) */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
}
@media (max-width: 768px) {
    .m33_page_hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 50% 100%, 0 calc(100% - 24px)); }
}

.m33_hero_bg { position: absolute; inset: 0; z-index: 0; }
.m33_hero_bg_img { width: 100%; height: 100%; object-fit: cover; }
.m33_hero_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(47,58,70,0.78) 0%, rgba(47,58,70,0.42) 60%, rgba(47,58,70,0.20) 100%);
}

/* Container ohne Sonder-Padding — der Content fluchtet mit Folge-Sektionen.
   Das Badge sitzt am Viewport-Rand (left:0) und liegt damit links neben dem
   Container, ueberlappt aber nicht den Content. */
.m33_hero_inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: clamp(110px, 13vw, 220px);
    padding-bottom: clamp(80px, 8vw, 140px);
    display: flex;
    align-items: center;
}
.m33_hero_content { max-width: 620px; }

/* Ab 769px ist der Badge sichtbar (left:0, 107px breit). Da der Container bei
   Breiten ≤1726px keine äußere Margin hat, liegt der Badge direkt neben dem
   Container-Padding. Zwei Fixes:
   1) Hero höher + mehr padding-bottom → Text bleibt vertikal über dem Badge
   2) margin-left auf Content → horizontaler Puffer wenn Container-Padding < Badge-Breite */
@media (min-width: 769px) {
    .m33_page_hero:not(.m33_light):not(.m33_has_stats) {
        min-height: clamp(700px, 70vh, 900px);
    }
    .m33_page_hero:not(.m33_light):not(.m33_has_stats) .m33_hero_inner {
        padding-bottom: clamp(180px, 20vw, 240px);
    }
    .m33_hero_content {
        margin-left: max(0px, calc(130px - var(--hs-container-px)));
    }
}

.m33_hero_headline {
    color: #fff !important;
    margin-bottom: 28px;
    font-weight: 600;
    font-size: clamp(20px, 3.5vw, 56px);
    line-height: 1.05;
    letter-spacing: 0.03em;
    text-shadow: 0 2px 18px rgba(0,0,0,0.25);
    overflow-wrap: anywhere;
}
.m33_hero_headline em {
    font-style: italic;
    font-weight: 600;
    font-family: var(--hs-font-display);
}

.m33_hero_text {
    color: rgba(255,255,255,0.92);
    margin-bottom: 38px;
    max-width: 580px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

/* Badge sitzt am linken Rand UNTERHALB des Buttons, knapp ueber der V-Kante.
   bottom-based Anchor → unabhaengig von Hero-Hoehe (verschiedene Textlaengen). */
.m33_hero_badge {
    position: absolute;
    left: 0;
    bottom: clamp(60px, 6vh, 90px);
    z-index: 3;
    width: 107px;
    pointer-events: none;
}
/* Has-Stats-Variante: Stats-Area liegt unten in der Section. Das Badge wird
   im BG-Bild-Bereich (oberer ~66%-Block) verankert — knapp ueber der V-Kante,
   die das Bild vom dunklen Stats-Block trennt. */
.m33_page_hero.m33_has_stats .m33_hero_badge {
    bottom: auto;
    top: 45%;
    transform: translateY(-50%);
}
.m33_hero_badge img { width: 100%; height: auto; display: block; }

@media (max-width: 768px) {
    .m33_hero_badge { display: none; }
}

/* ============================================
 * Light-Variante (Kontaktseite): weisser BG, dunkler Text, kein BG-Bild,
 * kein V-Cut. 2-Spalten-Layout: Headline+Button links, Body-Text rechts.
 * Figma: Headline x=220 / Body x=980 (Spaltenversatz ~760px)
 * ============================================ */
.m33_page_hero.m33_light {
    background: #fff;
    color: var(--hs-dark);
    /* V-Cut unten beibehalten (wie dark-Variante) */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 50% 100%, 0 calc(100% - 80px));
    min-height: 700px;
    /* V-Cut protrudiert 80px in die naechste Sektion. z-index hebt das White ueber das Grau. */
    margin-bottom: -80px;
    padding-bottom: 80px;
    position: relative;
    z-index: 2;
}
@media (max-width: 768px) {
    .m33_page_hero.m33_light {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 50% 100%, 0 calc(100% - 40px));
        margin-bottom: -40px;
        padding-bottom: 40px;
    }
}
.m33_page_hero.m33_light .m33_hero_bg { display: none; }
.m33_page_hero.m33_light .m33_hero_headline { color: var(--hs-dark) !important; text-shadow: none; }
.m33_page_hero.m33_light .m33_hero_text { color: #1d1d1b; }
.m33_page_hero.m33_light .m33_hero_inner {
    padding-top: clamp(110px, 13vw, 220px);
    padding-bottom: clamp(60px, 7vw, 120px);
    display: grid;
    grid-template-columns: minmax(0, 760fr) minmax(0, 714fr);
    gap: clamp(40px, 5vw, 130px);
    align-items: start;
}
.m33_page_hero.m33_light .m33_hero_content { max-width: 760px; }
.m33_page_hero.m33_light .m33_hero_aside {
    padding-top: clamp(40px, 6vw, 90px);
}
.m33_page_hero.m33_light .m33_hero_aside .m33_hero_text {
    color: #1d1d1b;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin-bottom: 0;
    max-width: 714px;
}
/* Badge sitzt in jeder Variante am linken Viewport-Rand — keine Verschiebung */

@media (max-width: 992px) {
    .m33_page_hero.m33_light .m33_hero_inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .m33_page_hero.m33_light .m33_hero_aside { padding-top: 0; }
}

/* ============================================
 * Stats-Variante: Figma-Proportionen 1920x1124
 *   - Hero-Bild:   0   – 745 / 1124 = 66.3%
 *   - Stats top:  851  / 1124 = 75.7%
 *   - Stats bot:  960  / 1124 = 85.4%  (=> bottom 14.6%)
 * V-Cut sowohl am Bild-Ende als auch am Dark-Block-Ende.
 * ============================================ */
.m33_page_hero.m33_has_stats {
    min-height: clamp(820px, 58vw, 1124px);
    /* V-Cut am Boden des Dark-Blocks */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px));
}
@media (max-width: 768px) {
    .m33_page_hero.m33_has_stats {
        min-height: 0;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
    }
}

/* Bild deckt nur oberen Teil (66%) ab, mit V-Cut am Bild-Ende */
.m33_page_hero.m33_has_stats .m33_hero_bg {
    inset: 0 0 auto 0;
    height: 66.3%;
    /* V-Cut am Bild-Ende: Bild laeuft mittig 60px nach unten aus */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px));
}
@media (max-width: 768px) {
    .m33_page_hero.m33_has_stats .m33_hero_bg {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px));
    }
}
.m33_page_hero.m33_has_stats .m33_hero_inner {
    padding-top: clamp(110px, 14vw, 240px);
    padding-bottom: clamp(220px, 25vw, 380px);
    align-items: flex-start;
}

/* Stats sitzen im unteren Dark-Bereich (nicht am Boden) */
.m33_hero_stats {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14.6%;
    z-index: 2;
}
/* Stats nutzen die Standard-Container-Padding — fluchten mit allen anderen
   Modulen (Hero-Headline, m36-Bild, m37-Karten etc.) */
.m33_hero_stats_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: stretch;
}
.m33_hero_stat {
    position: relative;
    padding: 12px clamp(20px, 3vw, 60px);
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: #fff;
}
.m33_hero_stat + .m33_hero_stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: rgba(255, 255, 255, 0.30);
}
.m33_hero_stat_value {
    color: var(--hs-gold);
    font-family: var(--hs-font-display);
    font-weight: 600;
    font-size: clamp(34px, 4vw, 60px);
    line-height: 1;
    letter-spacing: 0.03em;
}
.m33_hero_stat_label {
    color: #fff;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    max-width: 280px;
}
@media (max-width: 992px) {
    .m33_hero_stats_list { grid-template-columns: 1fr; }
    .m33_hero_stat + .m33_hero_stat::before {
        left: 4px;
        right: 4px;
        top: 0;
        bottom: auto;
        height: 1px;
        width: auto;
    }
    .m33_page_hero.m33_has_stats .m33_hero_bg { height: 50%; }
    .m33_page_hero.m33_has_stats .m33_hero_inner {
        padding-top: clamp(80px, 14vw, 160px);
        padding-bottom: clamp(360px, 60vw, 540px);
    }
    .m33_hero_stats { bottom: 8%; }
}