/* ABOUTME: LP-spezifisches CSS für „Photovoltaik Privatkunden".
   Greift via automatischer Body-Klasse .page-photovoltaik-privatkunden-lp
   (siehe add_page_slug_body_class in functions.php). Wird inkrementell pro
   Sektion gefüllt. */

/* Standard-Seitenkopf (.simple-hero zeigt nur den Titel) ausblenden —
   der Custom-Hero übernimmt die Headline und sitzt direkt unter dem Header. */
body.page-photovoltaik-privatkunden-lp .simple-hero {
    display: none;
}

/* === Task 1: Hero ===================================================== */

/* Section-Padding: Divi erzeugt inline eine Regel
   `.et_pb_section_0.et_pb_section { padding-top:0; padding-bottom:0 }` (internes
   Verhalten für die erste Section, nicht aus unserem Shortcode). Sie hat
   Spezifität 0,2,0 und lädt nach diesem Stylesheet → würde bei Gleichstand
   gewinnen. Mit der Body-Klasse davor (0,3,1) schlagen wir sie ohne !important.
   (Das `padding` der Divi-Regel hat selbst kein !important.) */
body.page-photovoltaik-privatkunden-lp .lp-hero.et_pb_section {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    padding: 0.5rem 2.5rem 1.5rem 2.5rem;
    border-radius: var(--border-radius-lg);
}

/* Dunkler Verlauf über dem Solar-Bild für Textlesbarkeit (links dicht, rechts offen). */
.lp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(8, 40, 24, 0.92) 0%,
        rgba(8, 40, 24, 0.78) 45%,
        rgba(8, 40, 24, 0.30) 100%
    );
    z-index: 0;
}

.lp-hero .et_pb_row {
    position: relative;
    z-index: 1;
}

/* Divis Default-Row-Padding (16px oben/unten) raus — straffere Hero-Abstände
   zwischen Headline-, Text- und Porträt-Row. Divi setzt das Padding mit höherer
   Spezifität als unsere Body-Klassen-Regel, daher hier ausnahmsweise !important
   (Divi-Eigenheit, nicht unser Minymal-Standard). */
body.page-photovoltaik-privatkunden-lp .lp-hero__head,
body.page-photovoltaik-privatkunden-lp .lp-hero__row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.lp-hero,
.lp-hero h1,
.lp-hero p,
.lp-hero .lp-hero__stars {
    color: #fff;
}

.lp-hero h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.12;
    margin-bottom: 1.5rem;
    text-wrap: balance;
}

.lp-hero__lead {
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    max-width: 40ch;
}

.lp-hero__region {
    font-size: 0.95rem;
    opacity: 0.85;
    max-width: 48ch;
}

/* Inline-Review-Box */
.lp-hero__review {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    max-width: 34rem;
}

.lp-hero__stars {
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.lp-hero__stars span {
    letter-spacing: normal;
    font-weight: 400;
    font-size: 0.95rem;
}

.lp-hero__quote {
    font-size: 0.95rem;
    font-style: italic;
    margin: 0;
}

.lp-hero__actions {
    margin-top: 1.75rem;
}

/* Hero-CTA etwas größer als der Standard-Button (16px / 0.5rem 1rem). */
.lp-hero__actions .button {
    font-size: 1.3rem;
    padding: 1rem 2rem;
}

/* Freigestelltes Porträt — Basis (Mobil); Desktop vergrößert es weiter unten. */
.lp-hero__portrait img {
    display: block;
    max-height: 480px;
    width: auto;
    border-radius: var(--border-radius-lg);
}

/* Hero-Layout ab Desktop: Text + freigestelltes Porträt nebeneinander.
   Nur die Spalten-Row (.lp-hero__row) wird zum Flex-Container — die Kopf-Row
   (.lp-hero__head) mit der h1 bleibt volle Breite über beiden Spalten.
   Porträt sitzt bündig an der unteren Sektionskante (Füße „stehen" auf der
   Kante statt abgeschnitten zu wirken). Unterhalb 981px stapeln die Spalten
   im normalen Fluss (Divi-Default). */
@media (min-width: 981px) {
    .lp-hero .lp-hero__row {
        display: flex;
        align-items: flex-end;
    }
    .lp-hero .lp-hero__row > .et_pb_column {
        float: none;
        margin: 0;
    }
    /* Textspalte: schmaler (40%), damit das Porträt rechts mehr Breite und
       damit mehr Höhe bekommt. Abstand zum Porträt bleibt. align-self: flex-start
       holt den Text nach oben (die Row steht sonst auf flex-end fürs Porträt). */
    .lp-hero .lp-hero__row > .et_pb_column:first-child {
        flex: 1 1 40%;
        padding-right: 3rem;
        align-self: flex-start;
    }
    /* Porträt-Spalte (60%): Das Bild ist breitenbegrenzt (max-width: 100% der
       Spalte) → mehr Spaltenbreite = größeres Bild (~1,5× ggü. 40%). align-items:
       flex-end richtet die Spalte unten aus; negativer margin-bottom (-1.5rem)
       hebt das padding-bottom der Section auf, damit das Porträt bündig auf der
       unteren Kante „steht" (das Divi-Row-Padding ist auf 0 gesetzt). Qualifizierter
       Selektor schlägt den .et_pb_column-Reset (margin: 0). */
    .lp-hero .lp-hero__row > .lp-hero__media {
        flex: 0 0 60%;
        text-align: center;
        margin-bottom: -1.5rem;
    }
    /* Divis Modul-Eigenmargin raus, damit das Bild ohne Spalt auf der Kante sitzt. */
    .lp-hero .lp-hero__portrait {
        margin-bottom: 0;
    }
    .lp-hero__portrait img {
        max-height: 720px;
    }
}

/* === Task 2: Heute / Morgen / Übermorgen ============================== */

/* Karten gleich hoch (Divi-Spalten floaten sonst auf Eigenhöhe). */
@media (min-width: 981px) {
    .lp-kosten__cards,
    .lp-service__features,
    .lp-nutzen__cards {
        display: flex;
        align-items: stretch;
    }
    .lp-kosten__cards > .et_pb_column,
    .lp-service__features > .et_pb_column,
    .lp-nutzen__cards > .et_pb_column {
        float: none;
        display: flex;
    }
}

.lp-kosten__closer p {
    text-align: center;
    font-size: 1.15rem;
    font-weight: 600;
    max-width: 60ch;
    margin: 1rem auto 0;
}

/* === Task 3: Service-Realität ========================================= */

/* Text + Bild auf gleiche Höhe. Das Foto ist hochformatig (2:3) und würde die
   Textspalte überragen — daher füllt es die Spalte und wird per object-fit
   oben/unten beschnitten (Crop statt Verzerrung), kein zweites Bild nötig. */
@media (min-width: 981px) {
    .lp-service__top {
        display: flex;
        align-items: stretch;
    }
    .lp-service__top > .et_pb_column {
        float: none;
    }
    .lp-service__image {
        height: 100%;
        margin-bottom: 0;
    }
    .lp-service__image .et_pb_image_wrap {
        display: block;
        height: 100%;
    }
    .lp-service__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* Service-Foto: runde Ecken (Desktop wie Mobile). */
.lp-service__image img {
    border-radius: var(--border-radius-lg);
}

/* Feature-Kacheln: Icon links, Text rechts. */
.lp-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lp-feature__icon {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
}

.lp-feature__icon svg,
.lp-feature__icon img {
    width: 100%;
    height: 100%;
}

.lp-feature span {
    font-weight: 600;
}

/* === Generischer Medien-/Embed-Platzhalter (Service-Bild, HubSpot) ==== */

.lp-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 2rem;
    text-align: center;
    color: #5a6b5a;
    border: 2px dashed #b6c2b6;
    border-radius: 8px;
    background: repeating-linear-gradient(
        45deg,
        #eef2ee, #eef2ee 12px,
        #e6ebe6 12px, #e6ebe6 24px
    );
}

.lp-placeholder--16-9 {
    aspect-ratio: 16 / 9;
}

.lp-placeholder--form {
    min-height: 240px;
    margin: 1.25rem 0;
}

.lp-placeholder__label {
    font-weight: 700;
    font-size: 1.1rem;
}

.lp-placeholder__hint {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* === Task 4: 5-Schritte-Prozess (nummeriert) ========================== */

.lp-process__list {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    max-width: 60rem;
}

.lp-process__step {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem 0;
}

.lp-process__step + .lp-process__step {
    border-top: 1px solid var(--color-bg-borders, #e5e5e5);
}

/* Grünes Nummern-Badge im Marken-Grün. */
.lp-process__num {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary-color, #45ac38);
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
    /* Optischer Ausgleich: Die Ziffer wirkt einen Hauch zu tief. box-sizing:
       border-box hält den Kreis bei 2.5rem, padding-bottom schiebt die Ziffer
       ~1px nach oben in die optische Mitte. */
    box-sizing: border-box;
    padding-bottom: 2px;
}

.lp-process__body h3 {
    margin: 0 0 0.35rem;
}

.lp-process__body p {
    margin: 0;
}

.lp-process__closer p {
    text-align: center;
    font-size: 1.15rem;
    max-width: 60ch;
    margin: 2rem auto 0;
}

/* === Task 7: Impressionen (HLS-Video) ================================ */

/* Selbst-gehostetes HLS-Video, volle Contentbreite. Feste 16:9-Box verhindert
   Layout-Shift beim Laden; dunkler Markenhintergrund steht vor dem Start (das
   Video lädt erst beim Reinscrollen), damit kein leeres Rechteck erscheint. */
.lp-impressionen__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: 2rem;
    background-color: #082818;
    object-fit: cover;
    border-radius: var(--border-radius-lg);
}

/* === Task 8: Anfrage-Box ============================================== */

/* Text + Box oben ausrichten. */
@media (min-width: 981px) {
    .lp-anfrage__row {
        display: flex;
        align-items: flex-start;
    }
    .lp-anfrage__row > .et_pb_column {
        float: none;
    }
}

/* Häkchen-Checkliste. */
.lp-checklist {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.lp-checklist li {
    position: relative;
    padding-left: 1.85rem;
    margin-bottom: 0.85rem;
    list-style: none;
}

.lp-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color, #45ac38);
    font-weight: 700;
}

/* Anfrage-Box (rechte Spalte). */
.lp-anfrage-box {
    background: var(--surface, #f8f8f8);
    border: 1px solid var(--color-bg-mid-gray, #aeaeae);
    border-radius: 12px;
    padding: 2rem;
}

.lp-anfrage-box h3 {
    margin-top: 0;
}

.lp-anfrage-box__trust {
    font-size: 0.85rem;
    text-align: center;
    color: #5a6b5a;
    margin: 0;
}

.lp-anfrage-box__sep {
    border: none;
    border-top: 1px solid var(--color-bg-borders, #e5e5e5);
    margin: 1.5rem 0;
}

.lp-anfrage-box__phone {
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

.lp-anfrage-box__phone strong {
    font-size: 1.35rem;
}

.lp-anfrage-box__phone span {
    font-size: 0.85rem;
    color: #5a6b5a;
}

/* === Task 9: FAQ (natives details/summary-Akkordeon) ================== */

.lp-faq__list {
    margin-top: 2rem;
    max-width: 60rem;
}

.lp-faq__item {
    background: var(--surface, #f8f8f8);
    border: 1px solid var(--color-bg-borders, #e5e5e5);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    padding: 0 1.5rem;
}

.lp-faq__q {
    cursor: pointer;
    font-weight: 700;
    padding: 1.25rem 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* Standard-Marker (Dreieck) ausblenden, eigenes +/− nutzen. */
.lp-faq__q::-webkit-details-marker {
    display: none;
}

.lp-faq__q::after {
    content: "+";
    font-size: 1.6rem;
    line-height: 1;
    color: var(--primary-color, #45ac38);
    flex: 0 0 auto;
}

.lp-faq__item[open] .lp-faq__q::after {
    content: "−";
}

.lp-faq__a {
    padding-bottom: 1.25rem;
}

.lp-faq__todo {
    font-style: italic;
    color: #8a8a8a;
    margin: 0;
}

/* === Task 10: Trust-Badges + Shop ===================================== */

.lp-badges__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

.lp-badges__logo {
    height: 90px;
    width: auto;
    object-fit: contain;
}