/* ==========================================================================
   LP 615 – Studienleitfaden DGF Schweiz
   ========================================================================== */

/* Grundlayout der Landingpage */
.lp615-page {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11pt;
    line-height: 1.65;
    color: #1f1f1f;
    max-width: 960px;
    margin: 0 auto 64px;
    padding: 0 16px 40px;
}

/* ---------- Top-CTA (roter Button oben) ---------- */

.lp615-top-cta {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 999px;
    background-color: #d60525;
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 12pt;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
    max-width: 480px;   /* gleiche Breite-Range wie Badge */
    width: 100%;
}

.lp615-top-cta:hover,
.lp615-top-cta:focus {
    text-decoration: none;
    background-color: #b80420;
}

/* ---------- Hero-Bereich (Kopf + Text/Bild) ---------- */

.lp615-hero {
    margin-bottom: 24px;
}

/* Kopf: Badge + H1 über die ganze Breite, links ausgerichtet */
.lp615-hero-head {
    margin-bottom: 24px;
    text-align: left;
}

.lp615-kicker {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    background-color: rgba(251, 183, 165, 0.20); /* Rosa wie Card-Hover */
    font-size: 10.5pt;
    margin: 0 0 12px;
    min-width: 280px;
    max-width: 480px;   /* gleiche Breite-Range wie Button */
}

/* Überschrift geht über die ganze Breite (innerhalb der lp615-page) */
.lp615-hero h1 {
    font-size: 22pt;
    line-height: 1.30;
    color: #d60525;
    margin: 0;
}

/* Body: links Text + Button, rechts Bild */
.lp615-hero-body {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.lp615-hero-text {
    flex: 1 1 0;
}

.lp615-hero-text p {
    margin: 0 0 10px;
}

.lp615-hero-cta-wrap {
    margin-top: 18px;
}

/* Bild rechts */
.lp615-hero-media {
    flex: 0 0 360px;
    max-width: 360px;
    margin-top: 32px;
}

.lp615-hero-media a {
    display: block;
}

.lp615-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

/* ---------- Allgemeine Inhalts-Sektionen ---------- */

.lp615-section {
    margin: 20px 0 40px;
}

.lp615-section h2 {
    font-size: 18pt;
    line-height: 1.30;
    color: #d60525;
    margin: 0 0 12px;
}

.lp615-section p {
    margin: 0 0 8px;
}

/* Erste Zeile Text etwas näher an der Überschrift */
.lp615-page h2 + p {
    margin-top: 4px;
}

/* ---------- Vorteilskarten – dauerhaft zart rosa ---------- */

.lp615-benefit-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 8px 0 32px;
}

.lp615-benefit-card {
    position: relative;
    flex: 1 1 0;
    min-width: 210px;
    border-radius: 14px;
    padding: 16px 18px;
    background-color: rgba(251, 183, 165, 0.12); /* zartes Rosa dauerhaft */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.lp615-benefit-card h3 {
    font-size: 14.5pt;
    line-height: 1.40;
    margin: 0 0 6px;
    color: #d60525;
}

.lp615-benefit-card p {
    margin: 0;
}

/* leichter Hover-Effekt */
.lp615-benefit-card:hover {
    background-color: rgba(251, 183, 165, 0.20);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

/* ---------- Formular-Abschnitt unten ---------- */

.lp615-form-section {
    margin: 40px 0 24px;
}

.lp615-form-section h2 {
    font-size: 18pt;
    color: #d60525;
    margin: 0 0 10px;
}

.lp615-form-section p {
    margin: 0 0 8px;
}

/* Formular-Karte: linksbündig, max. Breite wie im Designbrief Formulare */
.lp615-form-card {
    margin-top: 20px;
    max-width: 520px;
}

.lp615-form-card .rsform {
    width: 100%;
}

.lp615-form-card .sb-form-wrapper,
.lp615-form-card .rsform-block,
.lp615-form-card form {
    max-width: 100%;
}

/* ---------- Überschriften ohne Worttrennung ---------- */

.lp615-page h1,
.lp615-page h2,
.lp615-page h3 {
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

/* Fallback-Klasse, falls später mobile Zeilenumbrüche gesteuert werden sollen */
.lp615-m-break {
    display: inline;
}

/* ---------- Desktop: Badge + Button einzeilig lassen ---------- */

@media (min-width: 769px) {
    .lp615-kicker,
    .lp615-top-cta {
        white-space: nowrap;
    }
}

/* ---------- Tablet / schmale Desktops ---------- */

@media (max-width: 992px) {
    .lp615-hero-body {
        flex-direction: column;
        align-items: flex-start;
    }

    .lp615-hero-media {
        max-width: 100%;
        width: 100%;
        margin-top: 24px;
    }
}

/* ---------- Mobile (< 768px) – allgemeine Anpassungen ---------- */

@media (max-width: 768px) {

    .lp615-page {
        padding: 0 14px 32px;
    }

    /* H1 am Handy etwas kleiner */
    .lp615-hero h1 {
        font-size: 18pt;
        line-height: 1.30;
    }

    .lp615-top-cta {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 12px 18px;
        font-size: 11.5pt;
        line-height: 1.4;
        border-radius: 24px;
        white-space: normal; /* darf umbrechen */
    }

    .lp615-kicker {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        white-space: normal;
    }

    .lp615-section {
        margin-top: 16px;
        margin-bottom: 32px;
    }

    .lp615-benefit-grid {
        flex-direction: column;
    }

    .lp615-benefit-card {
        width: 100%;
    }

    .lp615-form-card {
        max-width: 100%;
    }
}

/* ---------- Mobile (< 768px) – Abstand Bild → erste H2 korrigieren ---------- */

@media (max-width: 768px) {

    /* Hero selbst ohne zusätzlichen unteren Abstand */
    .lp615-hero {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .lp615-hero-media {
        margin-top: 8px;
        margin-bottom: 0 !important;
    }

    /* Erste Text-Sektion direkt NACH dem Hero (Warum sich der Blick …) */
    .lp615-hero + .lp615-section {
        margin-top: -8px !important;  /* zieht den Block näher ans Bild */
        padding-top: 0 !important;
    }
}