/* Moneyversum Landingpages: integrierter Produktkopf + Hero.
 * Nur aktiv bei <section class="hero hero--integrated">.
 * Die vorhandene landing.css, der Content und der Footer bleiben erhalten.
 */
.hero.hero--integrated {
    position: relative;
    isolation: isolate;
    display: block;
    width: min(100%, var(--stage, 1200px));
    height: auto;
    min-height: 0;
    max-height: none;
    margin-inline: auto;
    aspect-ratio: 2481 / 1628;
    overflow: hidden;
    background: #fff;
    container-type: inline-size;
}

.hero--integrated .hero__art {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    min-width: 0;
    left: 0;
    top: 0;
    transform: none;
    opacity: 1;
    object-fit: fill;
    object-position: center;
}

/* Der Logo-Bereich ist keine eigene weiße Zeile mehr. Er liegt über der
 * weißen Zone der durchgehenden Hero-Grafik, einschließlich der Schräge.
 */
.hero--integrated .product-header {
    position: absolute;
    z-index: 4;
    inset: 0 auto auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 26.0%;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    transform: none;
}

.hero--integrated .product-header__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.hero--integrated .product-logo {
    display: block;
    height: auto;
    max-height: 66%;
    object-fit: contain;
}

.hero--integrated .hero__copy {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

/* Koordinaten relativ zum GANZEN integrierten Kopf (2481 x 1628),
 * nicht relativ zur Browserbreite oder zum alten ausgeschnittenen Hero.
 */
.hero--integrated .hero__copy h1 {
    position: absolute;
    left: 22%;
    top: 56.5%;
    bottom: auto;
    width: 67%;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #fff;
    background: none;
    font-family: var(--text, Arial, sans-serif);
    font-weight: 700;
    font-style: italic;
    font-size: clamp(24px, 3.6cqw, 43px);
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
    text-shadow: none;
}

.hero--integrated .hero__copy p {
    position: absolute;
    left: 22%;
    top: 81.0%;
    bottom: auto;
    width: 65%;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #111;
    background: transparent;
    font-weight: 600;
    font-size: clamp(12px, 1.1cqw, 14px);
    line-height: 1.38;
}

/* Kürzere Fenster: die Grafik bleibt vollständig in ihrer Originalproportion.
 * Kein erzwungenes min-height und kein object-fit:cover auf Desktop/Tablet.
 */
@media (min-width: 681px) and (max-width: 900px) {
    .hero.hero--integrated {
        min-height: 0;
        aspect-ratio: 2481 / 1628;
    }
    .hero--integrated .hero__copy h1 {
        left: 22%;
        top: 55.5%;
        width: 70%;
        font-size: clamp(21px, 3.6cqw, 33px);
    }
    .hero--integrated .hero__copy p {
        left: 22%;
        top: 81%;
        width: 68%;
        font-size: clamp(11px, 1.15cqw, 13px);
    }
}

/* Mobil: die gleiche Bilddatei bleibt erhalten, wird innerhalb des höheren
 * mobilen Hero-Bereichs horizontal zentriert. Die Texte bleiben eigenständiges
 * HTML und sind dadurch lesbar. Ein separates Mobilmotiv ist nicht nötig.
 */
@media (max-width: 680px) {
    .hero.hero--integrated {
        height: 650px;
        min-height: 650px;
        max-height: none;
        aspect-ratio: auto;
        overflow: hidden;
        background: #fff;
    }
    .hero--integrated .hero__art {
        position: absolute;
        top: 0;
        left: 50%;
        width: auto;
        min-width: 100%;
        height: 100%;
        max-width: none;
        transform: translateX(-50%);
        object-fit: cover;
        object-position: center;
    }
    .hero--integrated .product-header {
        top: 0;
        left: 0;
        height: 25.5%;
        min-height: 0;
        padding: 0;
    }
    .hero--integrated .product-header__inner {
        height: 100%;
        min-height: 0;
        padding: 0 12px;
    }
    .hero--integrated .product-logo {
        width: auto;
        max-width: min(82vw, 310px);
        max-height: 56%;
    }
    .hero--integrated .hero__copy h1 {
        left: 16px;
        right: 16px;
        top: 56%;
        bottom: auto;
        width: calc(100% - 32px);
        font-size: clamp(24px, 6.7vw, 32px);
        line-height: 1.07;
        text-wrap: auto;
        text-shadow: 0 1px 1px rgba(0,0,0,.07);
    }
    .hero--integrated .hero__copy p {
        left: 16px;
        right: 16px;
        top: 80%;
        bottom: auto;
        width: calc(100% - 32px);
        padding: 0;
        font-size: 12px;
        line-height: 1.32;
        background: transparent;
    }
}

/* MV-OTHER-HERO-TUNING-BEGIN
 * Freigegebene Doppelding-Geometrie für die übrigen fünf Produkte: vollständiges Bild statt seitlichem Beschnitt,
 * abgestimmte vertikale Zentrierung im orangen/hellen Abschnitt.
 * HTML und die gemeinsamen Landingpage-Styles bleiben unverändert.
 */
:is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero.hero--integrated {
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 2481 / 1628;
    overflow: hidden;
    container-type: inline-size;
}

:is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__art {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 100%;
    transform: none;
    object-fit: fill;
    object-position: center;
}

/* Die orange Fläche liegt in der Originalgrafik ungefähr bei
 * 54–78 % der Gesamthöhe; der helle Untertitelstreifen bei 80–92 %.
 */
:is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__copy h1 {
    position: absolute;
    left: 22%;
    right: auto;
    top: 60%;
    bottom: auto;
    width: 73%;
    margin: 0;
    padding: 0;
    font-size: clamp(23px, 3.6cqw, 43px);
    line-height: 1.06;
    text-wrap: balance;
    text-shadow: none;
}

:is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__copy p {
    position: absolute;
    left: 22%;
    right: auto;
    top: 83.5%;
    bottom: auto;
    width: 73%;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: clamp(12px, 1.15cqw, 14px);
    line-height: 1.35;
}

/* Tablet / mittlere Fenster: die Grafik bleibt vollständig sichtbar. */
@media (min-width: 681px) and (max-width: 900px) {
    :is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__copy h1 {
        left: 23%;
        top: 59.5%;
        width: 73%;
        font-size: clamp(22px, 3.6cqw, 33px);
    }
    :is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__copy p {
        left: 23%;
        top: 83.3%;
        width: 72%;
        font-size: clamp(11px, 1.35cqw, 13px);
    }
}

/* Schmal: bewusst KEIN 650px hoher Bildbeschnitt (bisherige Ursache
 * für die nach links ragende Headline und abgeschnittene Briefgrafik).
 */
@media (max-width: 680px) {
    :is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero.hero--integrated {
        height: auto;
        min-height: 0;
        aspect-ratio: 2481 / 1628;
    }
    :is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__art {
        inset: 0;
        left: 0;
        top: 0;
        width: 100%;
        min-width: 0;
        height: 100%;
        transform: none;
        object-fit: fill;
    }
    :is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__copy h1 {
        left: 22%;
        right: auto;
        top: 59.5%;
        bottom: auto;
        width: 76%;
        font-size: clamp(17px, 3.9cqw, 26px);
        line-height: 1.06;
        text-wrap: auto;
    }
    :is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__copy p {
        left: 22%;
        right: auto;
        top: 82.9%;
        bottom: auto;
        width: 76%;
        font-size: clamp(10px, 1.9cqw, 12px);
        line-height: 1.26;
    }
}

/* Sehr schmale Mobilgeräte: die zwei Headlines bleiben in der orangefarbenen
 * Zone, ohne dass das Hintergrundmotiv abgeschnitten werden muss.
 */
@media (max-width: 420px) {
    :is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__copy h1 {
        left: 20.5%;
        top: 59.2%;
        width: 78.5%;
        font-size: clamp(14px, 4.25cqw, 18px);
        line-height: 1.04;
    }
    :is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__copy p {
        left: 20.5%;
        top: 82.7%;
        width: 78.5%;
        font-size: clamp(9px, 2.35cqw, 10px);
        line-height: 1.2;
    }
}
/* Die längeren Unterzeilen der übrigen Produkte können mobil drei Zeilen
 * benötigen. Etwas höher beginnen lassen; Doppelding bleibt unverändert.
 */
@media (max-width: 420px) {
    :is(.product-kapitalschutzbrief, .product-trueffeltrader, .product-topictrader, .product-secretz, .product-privateprofits) .hero--integrated .hero__copy p {
        top: 80.5%;
    }
}
/* MV-OTHER-HERO-TUNING-END */


/* MV-HERO-SUBTITLE-TYPOGRAPHY-BEGIN
 * Hero-Unterüberschriften:
 * Desktop >= 901px: wie Abschnittstitel, 19px / Bold.
 * Tablet 681..900px: angepasste Größe für schmale Layouts.
 * Mobil <= 680px: deutlich kleiner, damit lange Texte im
 * bestehenden hellen Hero-Feld bleiben. Positionen unverändert.
 * Hohe Spezifität überschreibt die bisherige 17px-Mobilregel.
 */
body .hero.hero--integrated .hero__copy p {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.32;
}

@media (min-width: 681px) and (max-width: 900px) {
    body .hero.hero--integrated .hero__copy p {
        font-size: clamp(12px, 1.75cqw, 16px);
        font-weight: 700;
        line-height: 1.25;
    }
}

@media (max-width: 680px) {
    body .hero.hero--integrated .hero__copy p {
        font-size: clamp(10px, 1.9cqw, 12px);
        font-weight: 700;
        line-height: 1.23;
    }
}

@media (max-width: 420px) {
    body .hero.hero--integrated .hero__copy p {
        font-size: clamp(9px, 2.35cqw, 10px);
        font-weight: 700;
        line-height: 1.2;
    }
}
/* MV-HERO-SUBTITLE-TYPOGRAPHY-END */