/* ===================================================================
   Lange Textseiten — Datenschutz, Impressum, was noch kommt.
   ===================================================================

   Eine Textseite hat andere Anforderungen als ein Lagebild: Sie wird
   GELESEN, nicht überflogen, oft am Handy und oft von jemandem, der
   etwas Bestimmtes sucht. Deshalb begrenzte Zeilenlänge, deutliche
   Zwischenüberschriften und Tabellen, die am schmalen Bildschirm
   umbrechen statt seitlich davonzulaufen.
   =================================================================== */

.text {
    /* 62 Zeichen sind die Spanne, in der das Auge die nächste Zeile
       ohne Suchen findet. Darüber verliert man beim Rücksprung die
       Zeile — bei einer Seite, die jemand im Zweifel im Stehen liest,
       ist das der Unterschied zwischen lesen und aufgeben. */
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.text .panel { padding: 1.25rem 1.4rem; }

.text h2 {
    font-size: 1.15rem;
    margin: 0 0 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--accent);
}

.text h3 {
    font-size: 0.98rem;
    margin: 1.1rem 0 0.4rem;
    color: var(--accent);
}

.text p { margin: 0 0 0.7rem; line-height: 1.6; }
.text p:last-child { margin-bottom: 0; }

.text ul { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.text li { margin-bottom: 0.45rem; line-height: 1.55; }
.text li:last-child { margin-bottom: 0; }

.text .klein { font-size: 0.86rem; color: var(--text-muted); }

.text code {
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
    background: var(--surface-sunken);
}

.text a { color: var(--accent); }

/* --- Tabellen ------------------------------------------------------
 *
 * Zwei Spalten, links die Sache, rechts die Erklärung. Am schmalen
 * Bildschirm brechen sie in Blöcke um: Eine Tabelle, die seitlich
 * hinausläuft, ist am Handy unlesbar, und diese Seite muss man gerade
 * dort lesen können.
 * ------------------------------------------------------------------ */

.text table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5rem 0 0.9rem;
    font-size: 0.92rem;
}

.text th {
    text-align: left;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.4rem 0.6rem;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--line);
}

.text td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    line-height: 1.5;
}

.text tr:last-child td { border-bottom: 0; }

@media (max-width: 34rem) {
    .text thead, .text th { display: none; }
    .text tr { display: block; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
    .text tr:last-child { border-bottom: 0; }
    .text td { display: block; border: 0; padding: 0.15rem 0; }
    .text td:first-child { font-weight: 700; }
}