/* =============================================================
   Stephanies Landingpages — Frontend-Styles (v0.7.0)
   CSS-Klassen-Präfix: lp-page-* (gemäß konzept.md)
   ============================================================= */

/* ---------------------------------------------------------------
   Grundcontainer
   --------------------------------------------------------------- */
.lp-page-content {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 24px;
}

/* Block-Spacing */
.lp-page-block {
    margin-bottom: 48px;
}
.lp-page-block:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Heading-Block / Text-Block
   --------------------------------------------------------------- */
.lp-page-block--heading h1,
.lp-page-block--heading h2,
.lp-page-block--heading h3,
.lp-page-block--heading h4 {
    margin-top: 0;
}

/* Absatzabstand normalisieren (v0.8.5):
   Theme-CSS setzt oft großes margin-bottom auf <p>-Elemente seitenweit.
   Hier überschreiben wir das gezielt nur innerhalb unserer Blöcke. */
.lp-page-block p,
.lp-page-profile-group__textcol p {
    margin-top: 0;
    margin-bottom: 0.6em;
}
.lp-page-block p:last-child,
.lp-page-profile-group__textcol p:last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------
   Bild-Blöcke
   --------------------------------------------------------------- */
.lp-page-block--image_single img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.lp-page-image-duo {
    display: flex;
    gap: 16px;
}
.lp-page-image-duo__col {
    flex: 1;
    min-width: 0;
}
.lp-page-image-duo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* ---------------------------------------------------------------
   Profilbild-Gruppe (v0.8.9: CSS Grid statt Flexbox)
   Separates Grid ermöglicht auf Mobile die korrekte DOM-Reihenfolge:
   Heading oben → Bild mittig → Text unten (via grid-template-areas).

   HTML-Struktur (v0.8.9):
     <div class="lp-page-profile-group lp-page-profile-group--right">
       <div class="lp-page-profile-group__heading">...</div>   ← Grid-Area: heading
       <div class="lp-page-profile-group__img"><img ...></div> ← Grid-Area: img
       <div class="lp-page-profile-group__textcol">...</div>   ← Grid-Area: textcol
     </div>

   --right → Bild rechts  (heading + textcol links, img rechts)
   --left  → Bild links   (img links, heading + textcol rechts)
   --------------------------------------------------------------- */
.lp-page-profile-group {
    margin-bottom: 48px;
}

/* Bild rechts: heading oben-links, textcol unten-links, img rechts über beide Zeilen */
.lp-page-profile-group--right {
    display: grid;
    grid-template-areas:
        "heading img"
        "textcol img";
    grid-template-columns: 1fr 280px;
    grid-template-rows: auto 1fr;
    gap: 0 32px;
}

/* Bild links: img links über beide Zeilen, heading oben-rechts, textcol unten-rechts */
.lp-page-profile-group--left {
    display: grid;
    grid-template-areas:
        "img heading"
        "img textcol";
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 32px;
}

/* Grid-Area-Zuweisungen */
.lp-page-profile-group__heading { grid-area: heading; }
.lp-page-profile-group__img     { grid-area: img; }
.lp-page-profile-group__textcol { grid-area: textcol; }

/* Bild: feste Größe, Float deaktivieren */
.lp-page-profile-group__img .lp-page-profile__img {
    float: none !important;
    margin: 0 !important;
    width: 280px;
    height: 280px;
    object-fit: cover;
    display: block;
}

/* ---------------------------------------------------------------
   Profilbild-Block — Basis-Stile (außerhalb der Gruppe, Fallback)
   --------------------------------------------------------------- */
.lp-page-profile__img {
    display: block;
    width: 280px;
    height: 280px;
    object-fit: cover;
}
/* Formen (konzept.md) */
.lp-page-profile__img--shape-viereckig { border-radius: 0; }
.lp-page-profile__img--shape-oval      { border-radius: 50% / 40%; }
.lp-page-profile__img--shape-rund      { border-radius: 50%; }
/* shape-abgerundet: border-radius via inline style gesetzt */

/* Rahmen: 3px solid Akzentfarbe (konzept.md) */
.lp-page-profile__img--border {
    border: 3px solid var(--lp-accent, #5a8a00);
}

/* ---------------------------------------------------------------
   Karten-Block
   Layout: 50%/50%, gap, box-shadow, Akzent-Linie oben,
   padding 24px, border-radius 8px (konzept.md)
   --------------------------------------------------------------- */
.lp-page-cards {
    display: flex;
    gap: 24px;
}
.lp-page-cards__card {
    flex: 1;
    min-width: 0;
    background: #ffffff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-top: 4px solid var(--lp-accent, #5a8a00);
}

/* ---------------------------------------------------------------
   FAQ-Block (v0.8.6)
   Rahmen: 2px solid Akzentfarbe rundum, border-radius 8px.
   Header: heller grüner Titelbalken direkt am oberen Rand, nahtlos.
   Items:  Innen-Padding im __items-Wrapper.
   Schrift: 1px kleiner als Standardschrift (calc(1em - 1px)).
   --------------------------------------------------------------- */
.lp-page-faq {
    border: 2px solid var(--lp-accent, #5a8a00);
    border-radius: 8px;
    overflow: hidden; /* Clips den Header-Hintergrund an den abgerundeten Ecken */
    font-size: calc(1em - 1px);
}

/* Titelbalken oben — helles Grün, nahtlos am oberen Rahmen */
.lp-page-faq__header {
    background: rgba(90, 138, 0, 0.10);
    padding: 14px 24px;
    border-bottom: 1px solid rgba(90, 138, 0, 0.25);
}
.lp-page-faq__title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--lp-accent, #5a8a00);
}

/* FAQ-Einträge */
.lp-page-faq__items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
}
.lp-page-faq__item {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 16px;
}
.lp-page-faq__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.lp-page-faq__question {
    font-weight: 700;
    margin: 0 0 8px 0;
}
.lp-page-faq__answer {
    margin: 0;
    color: #444;
    line-height: 1.6;
}

/* ---------------------------------------------------------------
   Kontaktformular-Block (v0.8.10)
   Card-Darstellung mit Akzentfarbe (konzept.md).
   Header ähnlich FAQ-Header (konfigurierbar).
   Volle Layout-Breite: max-width entfernt.
   --------------------------------------------------------------- */
.lp-page-contact {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--lp-accent, #5a8a00);
    overflow: hidden; /* Clips Header-Hintergrund an abgerundeten Ecken */
}

/* Header-Titelbalken — identisches Layout wie FAQ-Header */
.lp-page-contact__header {
    background: rgba(90, 138, 0, 0.10);
    padding: 14px 24px;
    border-bottom: 1px solid rgba(90, 138, 0, 0.25);
}
.lp-page-contact__title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--lp-accent, #5a8a00);
}

/* Formular-Inhalt: Padding im Body-Wrapper */
.lp-page-contact__body {
    padding: 24px 32px 32px;
}

.lp-page-contact__row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}
.lp-page-contact__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.lp-page-contact__field--full {
    flex-basis: 100%;
}
.lp-page-contact label {
    font-size: 14px;
    font-weight: 600;
    color: #444;
}
.lp-page-contact input,
.lp-page-contact textarea {
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.lp-page-contact input:focus,
.lp-page-contact textarea:focus {
    outline: none;
    border-color: var(--lp-accent, #5a8a00);
    box-shadow: 0 0 0 2px rgba(90, 138, 0, 0.15);
}
.lp-page-contact textarea {
    resize: vertical;
    min-height: 120px;
}
.lp-page-contact__submit {
    display: inline-block;
    padding: 12px 28px;
    background: var(--lp-accent, #5a8a00);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: opacity 0.2s;
}
.lp-page-contact__submit:hover {
    opacity: 0.88;
}
.lp-page-contact__submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.lp-page-contact__message {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 4px;
    display: none;
    font-size: 14px;
}
.lp-page-contact__message--success {
    background: #eaf5e3;
    color: #3a7a00;
    border: 1px solid #c3e6a0;
}
.lp-page-contact__message--error {
    background: #fde8e8;
    color: #c0392b;
    border: 1px solid #f5b7b1;
}
/* Honeypot-Feld: für Menschen unsichtbar */
.lp-page-contact__honeypot {
    display: none !important;
    visibility: hidden !important;
}

/* ---------------------------------------------------------------
   Hamburger-Menü (v0.8.9)
   Auf Desktop unsichtbar. Auf Mobile zeigt das JS-Script einen
   Toggle-Button (drei Striche → X) und steuert die Sichtbarkeit
   der Theme-Navigation via .lp-nav-container / .lp-nav-open.
   --------------------------------------------------------------- */

/* Desktop: Hamburger-Button verstecken */
.lp-hamburger-btn {
    display: none;
}

/* =============================================================
   Responsive — Mobile (max-width: 600px) (v0.8.0 / v0.8.9)
   Vorgabe versionsplan.md: Frontend auf Mobile (375px) korrekt dargestellt.
   Breakpoint: 600px (deckt alle gängigen Smartphones ab)
   ============================================================= */
@media (max-width: 600px) {

    /* Container: weniger seitliches Padding auf kleinen Screens */
    .lp-page-content {
        padding: 24px 16px;
    }

    /* Block-Spacing reduzieren */
    .lp-page-block {
        margin-bottom: 32px;
    }

    /* Überschriften auf Mobile: immer zentriert (v0.8.11) */
    .lp-page-block--heading h1,
    .lp-page-block--heading h2,
    .lp-page-block--heading h3,
    .lp-page-block--heading h4,
    .lp-page-profile-group__heading h1,
    .lp-page-profile-group__heading h2,
    .lp-page-profile-group__heading h3,
    .lp-page-profile-group__heading h4 {
        text-align: center;
    }

    /* Bild-Duo: nebeneinander → untereinander stapeln */
    .lp-page-image-duo {
        flex-direction: column;
    }

    /* Profilbild-Gruppe (v0.8.9): Grid auf Mobile → einspaltiger Fluss.
       Reihenfolge via grid-template-areas: heading oben, Bild mittig, Text unten.
       Diese Reihenfolge gilt für --right und --left gleich. */
    .lp-page-profile-group--right,
    .lp-page-profile-group--left {
        display: grid;
        grid-template-areas:
            "heading"
            "img"
            "textcol";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 20px 0;
    }

    /* Bild auf Mobile: zentriert, quadratisch, max. 220px */
    .lp-page-profile-group__img {
        justify-self: center;
    }
    .lp-page-profile-group__img .lp-page-profile__img {
        width: 220px;
        height: 220px;
    }

    /* Karten-Block: 50/50 nebeneinander → untereinander */
    .lp-page-cards {
        flex-direction: column;
    }

    /* Kontaktformular: Vorname/Nachname-Zeile → untereinander */
    .lp-page-contact__row {
        flex-direction: column;
    }

    /* Kontaktformular: Body-Padding auf Mobile reduzieren */
    .lp-page-contact__body {
        padding: 16px;
    }

    /* ---------------------------------------------------------------
       Hamburger-Menü (v0.8.9)
       Das JS-Script fügt .lp-nav-container dem erkannten Theme-Nav-Element
       hinzu und injiziert den .lp-hamburger-btn.
       --------------------------------------------------------------- */

    /* Hamburger-Button: drei Striche, auf Mobile sichtbar */
    .lp-hamburger-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px 12px;
        color: inherit;
        z-index: 9999;
        position: relative;
    }
    .lp-hbg-line {
        display: block;
        width: 26px;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.25s ease;
        pointer-events: none;
    }

    /* Animation: drei Striche → X wenn Menü offen */
    .lp-nav-container.lp-nav-open .lp-hbg-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .lp-nav-container.lp-nav-open .lp-hbg-line:nth-child(2) {
        opacity: 0;
    }
    .lp-nav-container.lp-nav-open .lp-hbg-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* Menü-Liste auf Mobile: standardmäßig versteckt */
    .lp-nav-container ul.menu,
    .lp-nav-container ul.nav-menu,
    .lp-nav-container ul#primary-menu,
    .lp-nav-container > ul,
    .lp-nav-container nav > ul {
        display: none !important;
    }

    /* Menü-Liste: sichtbar wenn .lp-nav-open */
    .lp-nav-container.lp-nav-open ul.menu,
    .lp-nav-container.lp-nav-open ul.nav-menu,
    .lp-nav-container.lp-nav-open ul#primary-menu,
    .lp-nav-container.lp-nav-open > ul,
    .lp-nav-container.lp-nav-open nav > ul {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
        padding: 8px 0;
        margin: 0;
        list-style: none;
    }

    /* Menü-Einträge: volle Breite, untereinander */
    .lp-nav-container.lp-nav-open ul li,
    .lp-nav-container.lp-nav-open nav > ul li {
        display: block;
        width: 100%;
    }
    .lp-nav-container.lp-nav-open ul li a,
    .lp-nav-container.lp-nav-open nav > ul li a {
        display: block;
        padding: 12px 20px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        text-decoration: none;
        color: inherit;
        font-weight: 500;
    }
    .lp-nav-container.lp-nav-open ul li:last-child a,
    .lp-nav-container.lp-nav-open nav > ul li:last-child a {
        border-bottom: none;
    }
}