/* ==========================================================================
   single-referenz — Referenz-Detailseite (objekte mit m31_is_referenz=1)
   Figma: node 64-1029

   Sektionen folgen dem Module-Naming-Schema:
     m47_referenz_intro    — Beschreibung + Testimonial-Box (2-col)
     m48_referenz_gallery  — full-width Galerie-Slider
     m49_referenz_weitere  — Weitere-Referenzen Karten-Grid
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — Font-Override + Back-Link (single-referenz hat keine .so_hero Klasse)
   -------------------------------------------------------------------------- */
.so_hero_back_wrap {
    position: absolute;
    top: calc(var(--hs-header-height, 148px) + 24px);
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
}
.so_hero_back_wrap .so_hero_back { pointer-events: all; }

.sref_hero .m33_hero_headline {
    font-family: var(--hs-font-display);
    font-size: clamp(28px, 2.5vw, 48px);
    font-weight: 400;
    line-height: 1.125;
    letter-spacing: 0.045em;
}

/* --------------------------------------------------------------------------
   m47 — INTRO: Beschreibung (links) + Testimonial-Box (rechts)
   -------------------------------------------------------------------------- */
.m47_referenz_intro {
    padding: clamp(48px, 5vw, 80px) 0;
}
.m47_intro_grid {
    display: grid;
    grid-template-columns: 1fr clamp(400px, 49.6vw, 714px);
    gap: clamp(32px, 4vw, 60px);
    align-items: start;
}
@media (max-width: 900px) {
    .m47_intro_grid { grid-template-columns: 1fr; }
}

/* Linke Spalte: Headline + Beschreibung */
.m47_intro_headline {
    font-family: var(--hs-font-display);
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 600;
    line-height: 1.125;
    letter-spacing: 0.03em;
    color: var(--hs-dark);
    margin: 0 0 clamp(20px, 2.5vw, 36px);
}
.m47_intro_text {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0.03em;
    color: var(--hs-text);
}

/* Rechte Spalte: Testimonial-Box (Cream) */
.m47_testimonial_box {
    background: #F2EEE5;
    position: relative;
    /* Figma: Intro bei top=70px, Quote bei top=128px, links 83px */
    padding: clamp(48px, 4.9vw, 70px) clamp(40px, 5.8vw, 83px) clamp(32px, 3.5vw, 50px);
    overflow: hidden;
    min-height: 338px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
/* Anfuehrungszeichen — Figma 64:1451: Outline-SVG-Path direkt aus dem Design.
   Reine Vektor-Geometrie → identisches Rendering in jedem Browser. */
.m47_testimonial_quote_mark {
    position: absolute;
    top: clamp(40px, 4.5vw, 70px);
    left: clamp(40px, 4.3vw, 64px);
    width: clamp(90px, 7vw, 114px);
    height: auto;
    aspect-ratio: 114 / 97;
    pointer-events: none;
    user-select: none;
}
.m47_testimonial_intro {
    font-size: 16px;
    font-weight: 600;
    color: var(--hs-text);
    line-height: 1.5;
    letter-spacing: 0.03em;
    margin: 0 0 clamp(20px, 2.4vw, 34px);
    position: relative;
    z-index: 1;
}
.m47_testimonial_text {
    font-family: var(--hs-font-display);
    font-style: italic;
    font-weight: 600;
    font-size: clamp(20px, 2.1vw, 30px);
    line-height: clamp(28px, 2.4vw, 35px);
    letter-spacing: 0.03em;
    color: var(--hs-dark);
    margin: 0;
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   m48 — GALERIE-SLIDER (Figma 64:1454)
   Slider laeuft bis zur CONTAINER-Kante (97px vom Viewport-Rand bei 1920+),
   also ~100px weiter links als der Standard-Content der anderen Module.
   So gleicher Bleed wie m36-Bild → bewusster Versatz Bild ↔ Text-Module.
   -------------------------------------------------------------------------- */
.m48_referenz_gallery {
    max-width: var(--hs-container-breit, 1726px);
    margin: 0 auto;
    padding: 0;
    overflow: visible;
}
.m48_gallery_slider {
    position: relative;
    overflow: hidden;
}
.m48_gallery_slide {
    position: relative;
    aspect-ratio: 1720 / 744;
    overflow: hidden;
}
.m48_gallery_slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.m48_gallery_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(47,58,70,0.60) 100%);
    pointer-events: none;
}

/* Slick-Dots als horizontale Balken (Figma 64:1454: 69x4px, Abstand 15px,
   weiss; aktiv full opacity, inaktiv 0.30). Position knapp ueber dem unteren
   Bildrand. Das Parent-Theme nutzt eine eigene mM_dot Div-Struktur statt
   Slick-Default-Buttons. */
/* Parent-Theme rendert die Dots in einem `.mM_dots` Wrapper, der sie via
   position:relative aus dem Slider rauszieht. Wir greifen mit !important
   wieder rein und positionieren absolute innerhalb des Sliders. */
.m48_referenz_gallery .mM_dots {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: clamp(40px, 5vw, 75px) !important;
    width: 100%;
    z-index: 3;
    pointer-events: none;
}
.m48_referenz_gallery .mM_dots .slick-dots {
    position: relative !important;
    bottom: auto !important;
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    pointer-events: auto;
}
.m48_referenz_gallery .slick-dots li {
    width: 69px;
    height: 4px;
    margin: 0;
    cursor: pointer;
}
.m48_referenz_gallery .slick-dots li .mM_dot {
    display: block !important;
    width: 69px !important;
    height: 4px !important;
    background: #F7F7F7 !important;
    opacity: 0.30 !important;
    transition: opacity 0.3s ease;
    border-radius: 0 !important;
}
.m48_referenz_gallery .slick-dots li.slick-active .mM_dot {
    opacity: 1 !important;
}
.m48_referenz_gallery .slick-dots li:hover .mM_dot {
    opacity: 0.6 !important;
}

/* --------------------------------------------------------------------------
   m49 — WEITERE REFERENZEN
   -------------------------------------------------------------------------- */
.m49_referenz_weitere {
    padding: clamp(48px, 5vw, 80px) 0;
    background: #fff;
}
.m49_weitere_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(32px, 4vw, 56px);
    flex-wrap: wrap;
}
.m49_weitere_headline {
    font-family: var(--hs-font-display);
    font-size: clamp(26px, 2.8vw, 40px);
    font-weight: 600;
    line-height: 1.125;
    letter-spacing: 0.03em;
    color: var(--hs-dark);
    margin: 0;
}
.m49_weitere_btn {
    opacity: 0.30;
    min-width: clamp(200px, 22.6vw, 325px);
    justify-content: center;
}
.m49_weitere_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 2.5vw, 41px);
}
@media (max-width: 900px) {
    .m49_weitere_grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}