/* ==========================================================================
   BookTo — Bildschirm „Unterstützen" (screens/support.js) und sein Knopf in
   der Glasleiste der Startseite.
   ========================================================================== */

/* ---- Der Knopf ------------------------------------------------------------
   Steht im Markup am ENDE der Leiste und wird mit `order` nach links geholt:
   - sichtbar ist er oben links (Lars, 20.09.2026),
   - Taster und Tastatur kommen zuerst zu „Vorlesen", nicht zur Bitte um Geld,
   - und wird die Leiste eng, wandert er als Erster hinter „Mehr"
     (js/kopfleiste-mehr.js räumt vom Ende her) statt „Farben" oder die
     Sprache zu verdrängen. */
.glassbar > [data-go="support"] { order: -1; }
.glassbar > [data-go="support"] .btn__ico { color: var(--color-primary); }
/* iPad hochkant: Mit Beschriftung fehlten 13 px, und der Knopf verschwand
   hinter „Mehr". Unter 900 px steht deshalb nur das Herz in der Leiste
   (`aria-label` nennt ihn); in der Klappe trägt er seinen Namen wieder. */
@media (max-width: 900px) {
  .glassbar > [data-go="support"] .gb__label { display: none; }
  .glassbar > [data-go="support"] { min-width: var(--target-min); padding-left: 0; padding-right: 0; justify-content: center; }
}
#sb-mehr-klappe [data-go="support"] .gb__label { display: inline; }

/* ---- Die Seite ------------------------------------------------------------ */
.support__body {
  font-family: var(--font-label);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
}
.support__text,
.support__wege,
.support__ehrlich {
  max-width: 62em;
  margin: 0 auto var(--space-5, 24px);
}
.support__text { padding: 0 var(--space-3); }
.support__text p,
.support__ehrlich p { margin: 0 0 var(--space-3); }
.support__liste { margin: 0 0 var(--space-3); padding-left: 1.3em; }
.support__liste li { margin-bottom: var(--space-2); }
.support__leicht { margin: 0 0 var(--space-4); }

.support__wege {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.support__karte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  background: var(--color-surface, transparent);
}
.support__karte h2 { margin: 0; font-size: var(--text-lg, 1.35rem); }
/* Ein QR-Code braucht hellen Grund — auch im dunklen und im Kontrast-Schema. */
.support__qr {
  width: min(100%, 220px);
  height: auto;
  padding: 10px;
  border-radius: var(--radius-md);
  background: #fff;
}
/* Bezeichnung ÜBER dem Wert: Neben der Bezeichnung brach die IBAN in zwei
   Zeilen — eine Nummer zum Abschreiben soll in einer stehen. */
.support__konto { margin: 0; width: 100%; text-align: center; }
.support__konto dt { margin-top: var(--space-2); font-size: var(--text-min); color: var(--color-text-soft, var(--color-text)); }
.support__konto dt:first-child { margin-top: 0; }
.support__konto dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.support__nr { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.support__link { min-height: var(--target-min); text-decoration: none; }
.support__hinweis { margin: 0; font-size: var(--text-min); }
.support__karte .support__leicht { margin: 0; align-self: stretch; }

.support__ehrlich {
  padding: var(--space-4);
  border-left: 6px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-bg);
}
.support__ehrlich p:last-child { margin-bottom: 0; }
.support__ehrlich a { color: inherit; font-weight: 600; }

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