/* ============================================================
   IMPRESSUM, DATENSCHUTZ, SPENDEN (seit Schritt 21)

   Eigene Datei, damit seite.css unverändert aus base.html
   übernommen bleibt. Enthält das Fenster (dialog.seitenfenster),
   die eigene Seite (.textseite) und die Textgestaltung
   (.rechtstext) für beides.
   ============================================================ */

/* ------------------------------------------------------------
   Fenster
   ------------------------------------------------------------ */

dialog.seitenfenster {
    width: min(760px, calc(100vw - 32px));
    max-height: min(84vh, 900px);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    background: var(--white, #fff);
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(30, 20, 10, .28);
    overflow: hidden;
}

dialog.seitenfenster[open] {
    display: flex;
    flex-direction: column;
}

dialog.seitenfenster::backdrop {
    background: rgba(30, 22, 14, .5);
    backdrop-filter: blur(2px);
}

.seitenfenster-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.seitenfenster-kopf h2 {
    margin: 0;
    font-size: 1.35rem;
}

.seitenfenster-zu {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--paper-2);
    color: var(--ink-2);
    font-size: 1rem;
    cursor: pointer;
}

.seitenfenster-zu:hover,
.seitenfenster-zu:focus-visible {
    background: var(--line);
}

/* Der Inhalt scrollt, Kopf und Fuß bleiben stehen. */
.seitenfenster-inhalt {
    flex: 1 1 auto;
    min-height: 0;
    padding: 20px 24px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.seitenfenster-fuss {
    padding: 12px 24px;
    border-top: 1px solid var(--line);
    font-size: .88rem;
    text-align: right;
}

/* ------------------------------------------------------------
   Eigene Seite
   ------------------------------------------------------------ */

.textseite-wrap {
    max-width: 820px;
}

.textseite-inhalt {
    margin-top: 18px;
    padding: 26px 30px;
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    background: var(--white, #fff);
    box-shadow: var(--sh-1);
}

.textseite-stand {
    margin-top: 14px;
    font-size: .88rem;
}

/* ------------------------------------------------------------
   Textgestaltung
   ------------------------------------------------------------ */

.rechtstext {
    font-size: .98rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.rechtstext h3 {
    margin: 1.4em 0 .5em;
    font-size: 1.2rem;
}

.rechtstext h4 {
    margin: 1.2em 0 .35em;
    font-size: 1.02rem;
}

.rechtstext > :first-child {
    margin-top: 0;
}

.rechtstext p,
.rechtstext ul,
.rechtstext ol {
    margin: 0 0 .9em;
}

.rechtstext ul,
.rechtstext ol {
    padding-left: 1.3em;
}

.rechtstext a {
    color: var(--brand);
    text-decoration: underline;
}

@media (max-width: 560px) {
    .seitenfenster-kopf,
    .seitenfenster-inhalt,
    .seitenfenster-fuss {
        padding-left: 16px;
        padding-right: 16px;
    }

    .textseite-inhalt {
        padding: 18px 16px;
    }
}

/* ============================================================
   SPENDENKONTO MIT GIROCODE (seit Schritt 34)
   ============================================================ */

.spendenkonto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    margin: 26px 0 8px;
    padding: 20px 22px;
    border-radius: var(--r-m, 18px);
    background: linear-gradient(160deg, var(--gold-lt, #FCF2DC), var(--white, #fff) 70%);
    border: 1px solid var(--line, #E8DCC7);
}

.spendenkonto h3 {
    margin: 0 0 10px;
}

.spendenkonto dl {
    margin: 0;
    display: grid;
    gap: 6px;
}

.spendenkonto dl > div {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    gap: 10px;
}

.spendenkonto dt {
    color: var(--ink-3, #8B7B6B);
    font-size: .9rem;
}

.spendenkonto dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.spendenkonto-iban {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

.spendenkonto-qr {
    margin: 0;
    width: 180px;
    text-align: center;
}

.spendenkonto-qr canvas {
    width: 180px;
    height: 180px;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--sh-1, 0 2px 8px rgba(60, 44, 28, .05));
}

.spendenkonto-qr figcaption {
    margin-top: 8px;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--ink-3, #8B7B6B);
}

@media (max-width: 640px) {
    .spendenkonto {
        grid-template-columns: minmax(0, 1fr);
    }

    .spendenkonto-qr {
        margin: 0 auto;
    }

    .spendenkonto dl > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
}