/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 4/4 — SEITE: SPENDEN
   =========================================================================== */

@layer seite {

  .spenden__pfad { color: var(--text-3); font-size: var(--txt-etikett); padding-block-start: var(--raum-6); }
  .spenden__pfad a { color: inherit; }

  /* PO 2026-08-07: die Seite als GANZES mittig — alle drei 62rem-Blöcke (Krümel · Kopf ·
     Inhalt) teilen Deckel UND Auto-Ränder, damit sie als EINE zentrierte Spalte lesen
     (vorher klemmte der Deckel links); die Texte darin bleiben linksbündig. */
  .spenden__pfad, .spenden__kopf, .spenden__spalten { max-inline-size: 62rem; margin-inline: auto; }

  /* Gesamt-Breite der Einspalt-Ansicht (PO in der Nacht auf den 06.08., zweite Runde):
     volle Behälter-Breite war ~20 % zu breit — 62rem (992 px) klemmt Kopf UND Inhalt an
     derselben Kante (1232 → 992 px @1280 = −19,5 %); die ch-Klemmen der Kopf-Texte gelten
     darunter weiter (min(…, 100%)). */
  .spenden__kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-4); padding-block: var(--raum-4) var(--raum-6); max-inline-size: 62rem; }
  /* Kopf-Breiten (PO in der Nacht auf den 06.08.): kein zu früher Umbruch — Titel 40ch
     (trug bei 26ch schon den Standard-Slogan nur knapp), Untertitel + Zusage auf dem
     90ch-Einleitungs-Muster der Seitentexte-Runde (GF69). */
  .spenden__titel { max-inline-size: 40ch; }
  .spenden__unter { color: var(--text-2); font-size: var(--txt-gross); max-inline-size: min(90ch, 100%); }

  /* Die Zusicherung steht bewusst über dem Formular */
  .zusage {
    display: flex;
    gap: var(--raum-3);
    align-items: flex-start;
    max-inline-size: min(90ch, 100%);
    color: var(--text-2);
    font-size: var(--txt-klein);
  }
  .zusage svg {
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    fill: none;
    stroke: var(--marke);
    stroke-width: 2;
    margin-block-start: 0.15em;
  }
  .zusage strong { color: var(--text); }

  /* Einspaltig seit der Nacht auf den 06.08. (PO): beide Rand-Karten sind entfallen;
     Breite gedeckelt wie der Kopf (s. o.). */
  .spenden__spalten {
    padding-block-end: var(--raum-6);
    max-inline-size: 62rem;
  }

  /* --- Betrag wählen ----------------------------------------------------- */
  .betrag { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); }
  .betrag__zeile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); }
  .betrag__frage { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); }

  .betrag__wahlen { display: flex; flex-wrap: wrap; gap: var(--raum-2); }

  /* Echte Radios, sichtbar als Pillen — funktioniert ohne JavaScript */
  .betrag__wahl { position: relative; }
  .betrag__wahl input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }
  .betrag__wahl span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 5rem;
    min-block-size: var(--tastfeld);
    padding-inline: var(--raum-4);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-voll);
    font-size: var(--txt-klein);
    font-weight: var(--gewicht-halb);
    font-variant-numeric: tabular-nums;
  }
  .betrag__wahl input:hover + span { background: var(--flaeche-3); }
  .betrag__wahl input:checked + span {
    background: var(--marke);
    border-color: var(--marke);
    color: var(--marke-auf);
  }
  .betrag__wahl input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; }

  .betrag__frei { display: grid; grid-template-columns: 10rem auto; gap: var(--raum-3); align-items: end; }
  .betrag__frei label { font-size: var(--txt-etikett); color: var(--text-3); }
  .betrag__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3); }
  .betrag__hinweis { color: var(--text-3); font-size: var(--txt-etikett); }

  /* --- Wofür das Geld gebraucht wird ------------------------------------- */
  .posten { border-block-start: var(--linie-breit) solid var(--linie); }
  .postenzeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem 4rem;
    align-items: center;
    gap: var(--raum-3) var(--raum-4);
    padding-block: var(--raum-4);
    border-block-end: var(--linie-breit) solid var(--linie);
  }
  .postenzeile__name { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); }
  .postenzeile__text { color: var(--text-3); font-size: var(--txt-etikett); margin-block-start: var(--raum-1); }
  .postenzeile__anteil {
    display: block;
    block-size: 4px;
    border-radius: var(--radius-voll);
    background: var(--linie);
    overflow: hidden;
  }
  .postenzeile__anteil span { display: block; inline-size: var(--wert, 0%); block-size: 100%; background: var(--marke); border-radius: var(--radius-voll); }

  .postenzeile__zahl {
    justify-self: end;
    color: var(--text-2);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    font-variant-numeric: tabular-nums;
  }

  /* --- Zahlungswege ------------------------------------------------------ */
  /* ZWEI feste Halbspalten statt auto-fit (PO Nacht auf den 06.08.): seit PayPal + TWINT
     dazukamen, presste auto-fit die Bank-Kachel auf ~310 px und die IBAN-Zeilen (Wert +
     Kopieren-Knopf) brachen um — und weil die voll spannende Bank-Kachel alle auto-fit-
     Spalten belegt, blieben PayPal/TWINT 320 px schmal neben einer Leerspalte. */
  .wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-4); }
  .weg--bank { grid-column: 1 / -1; }
  .weg {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-3);
    align-content: start;
    padding: var(--raum-4);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
  }
  .weg__name { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); }
  .weg__text { color: var(--text-3); font-size: var(--txt-etikett); }
  /* Zahlungsweg-Logos (PO 2026-08-10): justify-self gegen das Kachel-Grid — sonst streckte
     die 1fr-Spalte das img auf volle Breite. TWINT bringt seinen schwarzen Marken-Kasten
     im SVG mit (funktioniert auf jeder Fläche); die transparente blaue PayPal-Wortmarke
     bekommt eine THEME-FESTE weisse Plakette — deshalb auch die FESTE stille Kontur statt
     var(--linie): eine theme-feste Fläche verträgt keine kontext-abhängigen Farb-Tokens
     (die Tonbühnen-Lektion), im Dunkel-Satz wäre die helle Linie auf Weiss unsichtbar. */
  .weg__logo { display: block; justify-self: start; block-size: 38px; inline-size: auto; border-radius: 6px; }
  .weg__logo--paypal {
    block-size: 18px; box-sizing: content-box;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid rgb(0 0 0 / 0.12);
  }
  .weg__daten {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-1);
    padding: var(--raum-3);
    background: var(--flaeche-3);
    border-radius: var(--radius-s);
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    color: var(--text-2);
  }
  .weg__daten b { color: var(--text); font-weight: var(--gewicht-halb); }

  /* --- Andere Wege zu helfen -------------------------------------------- */
  .helfen { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--raum-4); }
  .helfen__karte {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--raum-2);
    align-content: start;
    padding: var(--raum-4);
    background: var(--flaeche-2);
    border: var(--linie-breit) solid var(--linie);
    border-radius: var(--radius-m);
    color: var(--text);
    text-decoration: none;
  }
  .helfen__karte:hover { border-color: var(--marke); background: var(--flaeche-3); color: var(--text); }
  .helfen__ikon { inline-size: 1.4rem; block-size: 1.4rem; fill: none; stroke: var(--marke); stroke-width: 1.7; margin-block-end: var(--raum-1); }
  .helfen__name { font-size: var(--txt-klein); font-weight: var(--gewicht-fett); }
  .helfen__text { color: var(--text-3); font-size: var(--txt-etikett); }

  @media (max-width: 34rem) {
    .wege { grid-template-columns: minmax(0, 1fr); } /* PayPal/TWINT mobil untereinander */
    .postenzeile { grid-template-columns: minmax(0, 1fr) 4rem; }
    .postenzeile__anteil { grid-column: 1 / -1; }
    .betrag__frei { grid-template-columns: 1fr; align-items: stretch; }
  }
}