/* ============================================================
   Seitenaufbau der Landingpages (Stil wie Variante A · Marek)
   Flächen je Seite (siehe Kommentare im HTML), z. B. LP 1:
   Lila (Hero) → Weiß (Was wir machen / Warum wir das tun)
   → Lila (Aufruf + Spendenmaske) → Dunkelblau (Aktionen + Fuß)
   ============================================================ */

/* ---------- Farbflächen ---------- */
.lila { position: relative; overflow: hidden; overflow: clip; background: var(--lila); }   /* clip: kein eigener Scrollbereich, Sprungmarken bleiben genau */
.lila::before, .lila::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px); }
.lila::before { right: -200px; top: -160px; width: 640px; height: 640px; background: radial-gradient(closest-side, rgba(192, 38, 211, .12), transparent 72%); }
.lila::after  { left: -240px; bottom: -260px; width: 620px; height: 620px; background: radial-gradient(closest-side, rgba(32, 85, 115, .14), transparent 72%); }
.lila > *, .dunkel > * { position: relative; z-index: 1; }

.dunkel { position: relative; overflow: hidden; overflow: clip; background: var(--ink); color: #fff; }
.dunkel::before, .dunkel::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(40px); }
.dunkel::before { right: -200px; top: -200px; width: 600px; height: 600px; background: radial-gradient(closest-side, rgba(192, 38, 211, .12), transparent 72%); }
.dunkel::after  { left: -220px; bottom: -260px; width: 600px; height: 600px; background: radial-gradient(closest-side, rgba(32, 85, 115, .45), transparent 72%); }

/* ---------- Kopf ---------- */
.kopf { padding: 28px 0 56px; }
.kopf .marke { display: block; width: 220px; }

/* ---------- Hero ---------- */
.hero { padding: 0 0 88px; }
.hero-titel { text-align: center; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
@media (min-width: 960px) { .hero-titel { margin-inline: -48px; } }   /* Headline darf etwas breiter laufen als der Text */
.hero-titel .zeile-1 { display: block; font-size: 48px; line-height: 1.1; }   /* auf allen Landingpages gleich groß */
.hero-titel .zeile-2 {   /* Subline: leichter und gedeckter als die Headline */
  display: block; margin: 20px auto 0;
  font-family: var(--font-body); font-size: 32px; line-height: 42px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink);
}
.hero .fliesstext { margin-top: 36px; }
.hero .fliesstext + .fliesstext { margin-top: 16px; }
.hero .fliesstext strong { font-weight: 600; color: var(--ink); }

/* ---------- Aufruf + Spendenmaske ---------- */
.spenden { padding: 88px 0 96px; scroll-margin-top: 0; }
.hero + .spenden { padding-top: 0; }   /* Fassung „Spende oben": Maske folgt direkt auf das Intro */
/* Fassung „Spende oben": kompakter Kopfbereich, damit die Spendenmaske
   am Desktop schon im ersten Bild angeschnitten zu sehen ist */
.spende-oben .unter-kopf { padding-top: calc(var(--kopf-hoehe) + 36px); }
.spende-oben .hero { padding-bottom: 64px; }
.spende-oben .hero-titel .zeile-2 { margin-top: 20px; }
.spende-oben .hero .fliesstext { margin-top: 32px; }
.spende-oben .hero .fliesstext + .fliesstext { margin-top: 14px; }
.spende-oben .spenden-titel { margin-bottom: 36px; }
.spende-oben .spenden { padding-bottom: 0; }
.spende-oben .wie { padding: 72px 0 96px; }
/* Fassung „Spende unten": Headline überall auf gleicher Höhe. Die Erklärungen
   liegen in einer Glas-Karte auf der lila Fläche, in gleichmäßigem Abstand
   unter dem Intro – am Desktop ist sie im ersten Bild angeschnitten. */
.spende-unten .unter-kopf { padding-top: calc(var(--kopf-hoehe) + 64px); }
.spende-unten .hero { padding-bottom: 72px; }
.spende-unten .wie { padding: 0; }
.spende-unten .spenden { padding-top: 72px; }   /* gleicher Takt wie Intro → Karte */
.wie .wrap {   /* Glas-Karte – auf allen Seiten gleich */
  max-width: calc(var(--wrap) - 2 * var(--gutter)); padding: 52px 40px 56px;   /* exakt so breit wie die Spendenmaske */
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
          backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 28px;
  box-shadow: 0 1px 2px rgba(30, 27, 75, .04), 0 20px 56px rgba(30, 27, 75, .10);
}
@media (max-width: 720px) {
  .wie .wrap {   /* Glas-Karte – auf allen Seiten gleich */ max-width: none; margin: 0 16px; padding: 36px 20px 40px; border-radius: 20px; }
}
/* Landing Page 3 (längstes Intro): Text eine Stufe kleiner und enger, Titel der Maske einzeilig */
.spende-oben.lang .unter-kopf { padding-top: calc(var(--kopf-hoehe) + 36px); }
.spende-oben.lang .hero { padding-bottom: 12px; }
.spende-oben.lang .hero-titel .zeile-2 { margin-top: 14px; }
.spende-oben.lang .hero .fliesstext { margin-top: 34px; font-size: 18px; line-height: 30px; }
.spende-oben.lang .hero .fliesstext + .fliesstext { margin-top: 10px; }
.spende-oben.lang .spenden-titel { font-size: 31px; margin-bottom: 18px; }
@media (max-width: 720px) {
  .spende-oben .unter-kopf { padding-top: calc(var(--kopf-hoehe) + 16px); }
  .spende-oben.lang .hero .fliesstext { font-size: 17px; line-height: 28px; }
}
.spenden-titel {
  text-align: center; margin: 0 auto 40px; max-width: 720px; text-wrap: balance;
  font-size: 38px; line-height: 1.15; font-weight: 800; letter-spacing: -0.04em;
}
.spendenbox {
  background: #fff; border: 1px solid var(--line); border-radius: 28px;
  box-shadow: 0 1px 3px rgba(30, 27, 75, .04), 0 16px 40px rgba(30, 27, 75, .10);
}
/* Variante für Seiten, deren Maske direkt auf den lila Hero folgt (LP 1 + 2):
   Maske selbst lila, damit sie auf dem weißen Grund heraussticht; Felder weiß */
.spenden--lila .spendenbox {
  background: linear-gradient(135deg, #e2ebfd 0%, #ebe3ff 100%);
  border: 1px solid rgba(109, 40, 217, .14);
  box-shadow: 0 2px 4px rgba(20, 26, 46, .04), 0 24px 56px rgba(76, 42, 138, .16);
}
.spenden--lila .frb-mock { --f-grey-200: rgba(20, 26, 46, .12); }
.spenden--lila .frb-mock .m-input,
.spenden--lila .frb-mock .m-pill span,
.spenden--lila .frb-mock .m-check,
.spenden--lila .frb-mock .m-badge { background-color: #fff; }
.spenden--lila .frb-mock .m-pill input:checked + span { background-color: #fff; }
.spenden--lila .frb-mock .m-pills--betrag .m-pill input:checked + span { background-color: var(--f-magenta); }
.spenden--lila .frb-mock .m-zahlung { background: rgba(255, 255, 255, .55); }

.frb-formular { min-height: 200px; }
.frb-formular iframe { width: 100%; border: 0; display: block; }
.frb-formular .platzhalter { min-height: 120px; display: grid; place-items: center; color: var(--muted); }
.frb-hinweis { margin: 22px 0 0; text-align: center; }
.frb-hinweis .frb-badge { display: inline-flex; text-decoration: none; }
.frb-hinweis .frb-badge img { width: 180px; height: auto; }

/* ---------- Was wir machen / Warum wir das tun ---------- */
.wie { padding: 88px 0; }
.wie .block + .block { margin-top: 48px; padding-top: 44px; border-top: 1px solid rgba(20, 26, 46, .08); }   /* feine Linie zwischen den Abschnitten */
.wie h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
.wie .akzent { margin: 12px 0 22px; }

/* ---------- Sei dabei, Aktionen + Fuß auf Dunkelblau ---------- */
.mitmachen { padding: 80px 0 0; }
.mitmachen h2 { color: #fff; text-align: center; font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 18px; }
.mitmachen .fliesstext { color: rgba(255, 255, 255, .86); }
.fliesstext.mitte { text-align: center; }   /* kurzer Satz unter einer Überschrift */
.aktionen { padding-top: 36px; padding-bottom: 56px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 32px; }
.aktionen--allein { padding-top: 64px; padding-bottom: 64px; }   /* ohne „Sei dabei": Buttons allein auf Dunkelblau */
.mehr { font-weight: 500; color: #fff; text-decoration: underline; text-underline-offset: 3px; }   /* schlichter Link, unterstrichen */
.mehr:hover { color: #e9a8f5; }
.knopf {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border-radius: 14px; text-decoration: none;
  font-family: var(--font-head); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease;
}
.knopf:hover { transform: translateY(-1px); }
.knopf .pfeil { font-size: 20px; line-height: 1; }
.knopf--voll { color: #fff; background: var(--grad); }
.knopf--voll:hover { color: #fff; opacity: .92; }


.fuss { padding: 0 0 48px; font-size: 13px; line-height: 22px; color: rgba(255, 255, 255, .6); }
.fuss .zeile {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 28px;
}
.fuss .rechts { display: flex; gap: 24px; margin-left: auto; }
.fuss a { color: rgba(255, 255, 255, .75); }
.fuss a:hover { color: #fff; }

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .kopf { padding: 24px 0 36px; }
  .kopf .marke { width: 180px; }
  .hero { padding-bottom: 52px; }
  .hero-titel .zeile-1 { font-size: 32px; }
  .hero-titel br { display: none; }
  .spenden-titel br { display: none; }
  .hero-titel .zeile-2 { font-size: 20px; line-height: 28px; margin-top: 12px; text-wrap: balance; }
  .hero .fliesstext { margin-top: 26px; }
  .spenden { padding: 52px 0 56px; }
  .spenden-titel { font-size: 27px; margin-bottom: 26px; }
  .wie { padding: 52px 0; }
  .wie .block + .block { margin-top: 36px; padding-top: 32px; }
  .wie h2 { font-size: 22px; line-height: 30px; }
  .mitmachen { padding-top: 52px; }
  .mitmachen h2 { font-size: 26px; line-height: 34px; }
  .aktionen { padding-top: 28px; padding-bottom: 40px; flex-direction: column; }
  .aktionen--allein { padding-top: 44px; padding-bottom: 44px; }
  .knopf { width: 100%; white-space: normal; text-align: center; font-size: 15px; padding: 12px 20px; }
}

/* ---------- Fokus (Tastatur) ---------- */
.knopf:focus-visible, .kopf-cta:focus-visible, .mehr:focus-visible, .fuss a:focus-visible, .marke:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 14px;
}