/* ============================================================
   Baumpatenschaft – Seiten-Wrapper
   ============================================================ */

.bp-einleitung {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;

    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #222;
}

.bp-einleitung h1 {
    text-align: center;
}

.bp-einleitung h2 {
    text-align: center;
}

.bp-einleitung h3 {
    text-align: center;
}

.bp-einleitung h4 {
    text-align: center;
}

.bp-einleitung h5 {
    text-align: center;
}

.bp-einleitung h6 {
    text-align: center;
}
/* ============================================================
   BLOCK-TEXT
   ============================================================ */

.bp-einleitung .block[data-type="text"] p {
    text-align: justify;
    hyphens: auto;

    font-size: 1rem;
    line-height: 1.65;
    max-width: 75ch;

    margin: 0;
}

.bp-einleitung .block[data-type="text"] p + p {
    margin-top: 1rem;
}

.bp-einleitung .block[data-type="text"] {
    margin-bottom: 1rem;
}

.bp-einleitung .block[data-type="text"] p a {
    display: inline-block;
    text-align: center;
}

/* ============================================================
   IMAGE
   ============================================================ */

.bp-einleitung .block[data-type="image"] {
}

.bp-einleitung .block[data-type="image"] img {
}


/* ============================================================
   LIST
   ============================================================ */

.bp-einleitung .block[data-type="list"] {
    width: 85%;
}

.bp-einleitung .block[data-type="list"] {
    margin-left: auto;
    margin-right: auto;
}

.bp-einleitung .block[data-type="list"] ul {
}

.bp-einleitung .block[data-type="list"] li {
    margin-bottom: 0.5rem;
}


/* ============================================================
   ACCORDION
   ============================================================ */


.bp-einleitung .blocks .block[data-type="accordion"] {
}

.bp-einleitung .blocks .block[data-type="accordion"] .accordion {
    display: flex;
    flex-direction: column;
}


/* ============================================================
   Einzelnes FAQ-Element
   ============================================================ */

.bp-einleitung .blocks .block[data-type="accordion"] details {
    border: 1px solid #ddd;          /* Haarlinie */
    border-bottom: none;
    background: #fdf3e7;             /* Frage: grau */
}

.bp-einleitung .blocks .block[data-type="accordion"] details:last-child {
    border-bottom: 1px solid #ddd;
}


/* ============================================================
   Frage (summary)
   ============================================================ */

.bp-einleitung .blocks .block[data-type="accordion"] summary {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    position: relative;
}

.bp-einleitung .blocks .block[data-type="accordion"] summary::-webkit-details-marker {
    display: none;
}


/* Pfeil / Kaskadierung */

.bp-einleitung .blocks .block[data-type="accordion"] summary::after {
    content: "▸";
    position: absolute;
    right: 1rem;
    transition: transform 0.2s ease;
}

.bp-einleitung .blocks .block[data-type="accordion"] details[open] summary::after {
    transform: rotate(90deg);
}


/* ============================================================
   Antwort
   ============================================================ */

.bp-einleitung .blocks .block[data-type="accordion"] details > *:not(summary) {
    background: #ffffff;             /* Antwort: weiß */
    padding: 0.75rem 1.5rem;
    padding-left: 2.5rem;
    border-top: 1px solid #ddd;
    line-height: 1.6;
}


/* ============================================================
   Optional: Hover / Fokus
   ============================================================ */

.bp-einleitung .blocks .block[data-type="accordion"] summary:hover {
    background: #e9e9e9;
}

.bp-einleitung .blocks .block[data-type="accordion"] summary:focus {
    outline: none;
}


/* ============================================================
   Optional: Blocksatz für Antworttexte
   ============================================================ */

.bp-einleitung .blocks .block[data-type="accordion"] details > *:not(summary) {
    text-align: justify;
    hyphens: auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {

    .bp-einleitung .block[data-type="text"] p {
        text-align: left;
    }

}