/* donate.css
 * Stile der Spendenseite.
 *
 * Die Seite wurde mit Hilfsklassen geschrieben, die es in diesem Projekt nie
 * gab - ein Utility-System im Stil von Tailwind, das hier nicht existiert.
 * Vier Klassen blieben dadurch wirkungslos, gemessen am 13.09.2026 im echten
 * Browser. Zwei davon hatten sichtbare Folgen, die beiden anderen nicht:
 *
 *   .flex-gap-10  Die beiden Spenden-Knoepfe standen untereinander statt
 *                 nebeneinander, das PayPal-Formular zog sich bei 1280 px ueber
 *                 die volle Breite von 1230 px.
 *   .main-narrow  Der Textsatz lief bei 1280 px ueber 154 Zeichen pro Zeile.
 *                 Als Richtwert gelten 45 bis 75 - darueber verliert das Auge
 *                 beim Zeilenwechsel den Anschluss.
 *   .card-pad-16  Folgenlos, die Karte polstert ohnehin (24 px bei 1280).
 *   .text-small   Folgenlos, die Schrift blieb so gross wie der Fliesstext.
 */

/* Lesbare Zeilenlaenge. 45rem sind bei 16px Grundschrift rund 70 Zeichen und
   damit im oberen Bereich der Empfehlung - schmaler wuerde die Seite auf
   grossen Bildschirmen verloren wirken. */
.main-narrow {
    max-width: 45rem;
    margin-left: auto;
    margin-right: auto;
}

/* Die Zahlwege nebeneinander, mit Umbruch: Auf schmalen Geraeten sollen sie
   untereinander stehen, dort ist das Stapeln richtig und nicht der Fehler. */
.flex-gap-10 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-10);
}

/* Kleingedrucktes (Hinweise zu externen Zahlungsdiensten, Transparenzangaben)
   soll sich vom Fliesstext absetzen, ohne unter die Lesbarkeitsgrenze zu
   rutschen. */
.text-small {
    font-size: var(--text-14);
}