/* ==========================================================================
   Score4all — Spendenseite
   Campaign: WHU Future Leaders Fundraising Challenge 2026,
             benefiting Laureus Sport for Good (via betterplace.org).
   Design system: Score4all Branding Book.
   ========================================================================== */

@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/spacing.css');
@import url('tokens/shape.css');
@import url('tokens/motion.css');
@import url('tokens/typography.css');

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;   /* clears the sticky header */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0;
  text-wrap: pretty;
}

h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }

p { margin: 0; text-wrap: pretty; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  background: var(--s4a-ink);
  color: var(--text-inverse);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   2. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
}

.section--ink   { background: var(--bg-inverse); color: var(--text-inverse); }
.section--coral { background: var(--bg-accent);  color: var(--text-on-accent); }

/* Two-column split used by Problem, Vision and the CTA. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.split--balanced { align-items: start; }

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  max-width: 32ch;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--s4a-coral);
  margin: 0 0 var(--space-4);
}
.section-head .eyebrow { margin-bottom: 0; }
.section--ink .eyebrow { color: var(--s4a-sky); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 40ch;
  margin-top: var(--space-5);
}
.section--ink .lead,
.section--coral .lead { color: rgba(251, 248, 243, .9); }

.body-text {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  max-width: 44ch;
  margin-top: var(--space-5);
}
.body-text strong { font-weight: var(--fw-bold); }

/* Decorative circles — the same compass shapes as the mark. */
.blob {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}
.blob--coral { background: var(--s4a-coral); width: 300px; left: -110px; bottom: -120px; }
.blob--chalk { background: var(--s4a-chalk); width: 260px; left: -120px; top: -100px; }
.blob--sky   { background: var(--s4a-sky);   width: 140px; right: 8%;   bottom: -70px; }

@media (max-width: 900px) {
  /* Full-width sections put the copy right where the circles sit. The chalk
     one would swallow chalk headings on coral, so it goes; the rest shrink. */
  .blob--chalk { display: none; }
  .blob--coral { width: 170px; left: -80px; bottom: -80px; }
  .blob--sky   { width: 90px;  right: -30px; bottom: -45px; }
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--s4a-coral);
  --btn-fg: var(--s4a-chalk);
  --btn-bd: var(--s4a-coral);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: .7rem 1.4rem;
  min-height: 44px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--border-w-thick) solid var(--btn-bd);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }

.btn--lg { padding: .95rem 1.9rem; font-size: 1rem; min-height: 52px; }

/* Reads on coral, on white and on any photograph. */
.btn--ink {
  --btn-bg: var(--s4a-ink);
  --btn-fg: var(--s4a-chalk);
  --btn-bd: var(--s4a-ink);
}
.btn--ink:hover { --btn-bg: var(--s4a-ink-800); --btn-bd: var(--s4a-ink-800); }

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--s4a-chalk);
  --btn-bd: rgba(251, 248, 243, .6);
}
.btn--ghost-light:hover {
  --btn-bg: var(--s4a-chalk);
  --btn-fg: var(--s4a-ink);
  --btn-bd: var(--s4a-chalk);
}

/* --------------------------------------------------------------------------
   4. Brand mark (inline SVG — the open ball)
   -------------------------------------------------------------------------- */

.mark { flex: none; }
.mark__ring  { fill: none; stroke: var(--s4a-coral); stroke-width: 6; }
.mark__piece { fill: var(--s4a-ink); }

/* Brand book: on ink, the piece flips to chalk. */
.footer .mark__piece { fill: var(--s4a-chalk); }

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.3rem;
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
.wordmark .four { color: var(--s4a-sky); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   5. Header — white, sticky, logo + one call to action
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #FFFFFF;
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 5.25rem;
  padding-block: var(--space-3);
}

/* Language switcher — the current language is marked, not a link. */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.lang {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lang a, .lang span { text-decoration: none; padding: .25rem; }
.lang a { color: var(--text-subtle); transition: color var(--dur-base) var(--ease-out); }
.lang a:hover { color: var(--text); }
.lang [aria-current="true"] { color: var(--text); }
.lang__sep { color: var(--border); }

@media (max-width: 520px) {
  .site-header__actions { gap: var(--space-3); }
  .lang { font-size: .7rem; gap: 2px; letter-spacing: .04em; }
  .lang a, .lang span { padding: .2rem; }
}

/* The header is one row: mark + wordmark, language switcher, donate button.
   Below ~520px those three no longer fit side by side, so the button drops
   to a short label and the switcher tightens. Under 360px the wordmark goes
   too and the mark carries the brand. */
.btn__compact { display: none; }

@media (max-width: 520px) {
  .wordmark { font-size: 1.05rem; }
  .site-header .brand { gap: var(--space-2); }
  .site-header .mark { width: 32px; height: 30px; }

  .site-header .btn { padding-inline: 1rem; font-size: .85rem; }
  .site-header .btn__full { display: none; }
  .site-header .btn__compact { display: inline; }
}

@media (max-width: 360px) {
  .site-header .wordmark { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

/* An explicit breakpoint rather than auto-fit: the panel/photo order is
   reversed when stacked, and auto-fit kept two columns past the point where
   that reversal applied — putting the photo on the left at tablet widths. */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--s4a-coral);
  color: var(--text-on-accent);
}

/* The hero is full-bleed, but its copy still starts on the page's content
   column — the same edge the header logo and every .wrap section use — so
   the whole page shares one left margin instead of the hero sitting 40px
   proud of the header above it. */
.hero__panel {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-block: clamp(2.25rem, 5vw, 5rem);
  padding-left: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
  padding-right: var(--gutter);
}

.hero__panel-inner {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero__blob { position: absolute; aspect-ratio: 1; border-radius: 50%; pointer-events: none; }
.hero__blob--chalk { width: 260px; right: -90px; bottom: -110px; background: var(--s4a-chalk); }
.hero__blob--sky   { width: 168px; left: -54px;  top: -62px;     background: var(--s4a-sky); }

/* The panel is half the viewport, so the headline column tops out around
   530px. At the design's 64px that fits barely 14 characters and the last
   three words each fall onto their own line. Sizing the type to the column
   instead — and letting the browser even the lines out — keeps it to three
   full lines at every width. */
.hero__title {
  font-size: clamp(2.125rem, 3.6vw, 3.25rem);
  line-height: 1.06;
  max-width: 26ch;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: clamp(1.4rem, 3vw, 2rem);
}

/* Held clear of the chalk circle on the panel's right edge — chalk text
   over that circle would simply disappear. */
.hero__hint {
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  max-width: 32ch;
}

.hero__media img {
  width: 100%;
  height: 100%;
  min-height: clamp(18rem, 52vh, 35rem);
  object-fit: cover;
  object-position: 40% 55%;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__media img { min-height: 0; aspect-ratio: 3 / 2; }
  .hero__panel-inner { max-width: none; margin-left: 0; }

  /* Once the panel is full width the circles stop being accents and start
     covering the copy — and chalk text over the chalk circle disappears
     whatever the stacking order. Drop that one, shrink the other. */
  .hero__blob--chalk { display: none; }
  .hero__blob--sky { width: 120px; left: -40px; top: -44px; }
}

/* --------------------------------------------------------------------------
   7. Fortschritt — the campaign total
   -------------------------------------------------------------------------- */

.progress-section {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}

/* The trailer now sits directly above the total and both are ink, so a full
   section's padding on each side would stack into one oversized empty band.
   Trim the trailer's lower side and drop the total's top padding so the
   boundary reads as a single gap. */
.trailer { padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.trailer + .progress-section { padding-top: 0; }

.raised {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(.75rem, 2vw, 1.5rem);
}
.raised__figure {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(4rem, 12vw, 10.5rem);
  letter-spacing: -.03em;
  line-height: .9;
  color: var(--s4a-chalk);
}
.raised__goal {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  letter-spacing: var(--ls-tight);
  color: rgba(251, 248, 243, .8);
}

.progress {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  height: 16px;
  border-radius: var(--radius-pill);
  background: rgba(251, 248, 243, .18);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  width: 0;
  min-width: 8px;
  border-radius: var(--radius-pill);
  background: var(--s4a-coral);
  transition: width 1.4s var(--ease-out);
}

.raised__meta {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  color: rgba(251, 248, 243, .88);
}

.raised__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
}

.raised__cta-note {
  font-size: var(--fs-lead);
  color: rgba(251, 248, 243, .88);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-5);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.fact {
  background: var(--bg-raised);
  color: var(--text);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.fact__figure {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 2.25rem;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--s4a-coral);
}
.fact__title { margin-top: var(--space-4); font-size: 1.25rem; }
.fact__body  { margin-top: var(--space-2); font-size: var(--fs-lead); line-height: var(--lh-normal); }

/* --------------------------------------------------------------------------
   8. Photo frame
   -------------------------------------------------------------------------- */

.photo-frame {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.photo-frame img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Landscape sources cropped to a portrait frame: hold the faces, which sit
     above centre, rather than letting the crop settle on the middle. */
  object-position: 50% 38%;
}
.cta .photo-frame img { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   7b. Trailer
   -------------------------------------------------------------------------- */

.trailer__line {
  font-size: clamp(1.7rem, 3.4vw, 2.75rem);
  font-weight: var(--fw-black);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  max-width: 26ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

/* Pitch video beside the trailer. The two columns are sized in the same
   ratio as each clip's width-per-unit-height (260/480 against 16/9), so
   both end up exactly the same height without either being cropped. */
.trailer__media {
  display: grid;
  grid-template-columns: 0.542fr 1.778fr;
  gap: var(--space-5);
  align-items: start;
}

.trailer__pitch {
  width: 100%;
  height: auto;
  aspect-ratio: 260 / 480;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--s4a-ink-800);
  display: block;
}

.trailer__frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--s4a-ink-800);
}

@media (max-width: 900px) {
  /* Stacked, both clips run the full column width so their left and right
     edges line up; the pitch simply gets taller. */
  .trailer__media { grid-template-columns: 1fr; gap: var(--space-5); }
}
.trailer__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   8b. Facts & figures — the national picture behind the local project
   -------------------------------------------------------------------------- */

.stats-block { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
}

.stat {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.stat__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--s4a-sky-100);
  color: var(--s4a-sky-600);
  margin-bottom: var(--space-2);
}
.stat__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.stat__figure {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2rem, 4.2vw, 2.75rem);
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--s4a-coral);
}
.stat__body { color: var(--text-muted); font-size: var(--fs-sm); }

.consequence {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  background: var(--s4a-ink);
  color: var(--text-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.consequence__mark {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: var(--s4a-coral);
  border-radius: var(--radius-pill);
  flex: none;
}
.consequence p { color: rgba(251, 248, 243, .84); font-size: var(--fs-lead); line-height: var(--lh-normal); }
.consequence strong { color: var(--s4a-chalk); font-weight: var(--fw-bold); }

@media (max-width: 560px) {
  .consequence { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   9. Vision — pledge cards beside the values panel
   -------------------------------------------------------------------------- */

.vision-section { background: var(--s4a-chalk-200); }

/* These headlines read as one line wherever there is room for them;
   below that they have to wrap or they would overflow the viewport. */
.vision-section .section-head,
#faq .section-head,
.donors-section .section-head { max-width: none; }

@media (min-width: 720px) {
  .vision-section .section-head h2,
  .donors-section .section-head h2 { white-space: nowrap; }
}

.vision {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--space-5);
  align-items: stretch;
}
@media (max-width: 900px) { .vision { grid-template-columns: 1fr; } }

.vision__cards { display: grid; gap: var(--space-5); align-content: start; }

.pledge {
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  color: var(--s4a-chalk);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 12rem;
  justify-content: center;
}
.pledge--coral { background: var(--s4a-coral); }
.pledge--sky   { background: var(--s4a-sky); }

.pledge__label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  opacity: .85;
}
.pledge__text {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
}

.values {
  background: var(--s4a-ink);
  color: var(--text-inverse);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: grid;
  gap: var(--space-2);
  align-content: center;
}

@media (max-width: 460px) {
  .pledge, .values { padding: var(--space-6); }
}

.value {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-inverse);
}
.value:first-child { padding-top: 0; }
.value:last-child  { border-bottom: 0; padding-bottom: 0; }

.value__icon { color: var(--s4a-chalk); flex: none; margin-top: .15rem; }
.value h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.value p  { color: rgba(251, 248, 243, .82); font-size: var(--fs-lead); line-height: var(--lh-normal); }

@media (max-width: 460px) {
  .value { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* --------------------------------------------------------------------------
   10. CTA
   -------------------------------------------------------------------------- */

.cta h2 { font-size: clamp(1.9rem, 4vw, 3.25rem); font-weight: var(--fw-black); }

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

.cta__note {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: rgba(251, 248, 243, .88);
  max-width: 44ch;
}

/* --------------------------------------------------------------------------
   10b. Team
   -------------------------------------------------------------------------- */

.team { background: var(--s4a-chalk-200); }

/* Vision and the team section share the chalk tint, so their padding would
   stack into one oversized empty band the same way the ink pair did. */
.vision-section { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.vision-section + .team { padding-top: 0; }

/* Group shot: keep the native landscape ratio so nobody gets cropped out
   by the portrait frame the other photos use. */
.team .photo-frame img { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */

/* Four upright cards across the row; they wrap and then stack as width runs out. */

.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.faq__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.faq__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.faq__icon { color: var(--s4a-coral); flex: none; }

.faq__q { font-size: 1.2rem; }

.faq__card p {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   11b. Donors — live list from the betterplace opinions endpoint
   -------------------------------------------------------------------------- */

.donors-section { background: var(--s4a-chalk-200); }

.donors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

/* The list scrolls itself. A mask fades both edges instead of a painted
   overlay, so the fade follows whatever the section background is rather
   than being hard-coded to one colour. */
.donors-window {
  position: relative;
  height: clamp(21rem, 58vh, 33rem);   /* about five rows */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 11%, #000 84%, transparent 100%);
}

.donors-track { display: grid; gap: var(--space-3); }

/* Added by support.js once the rows are measured and only when they
   overflow the window; --donors-shift is one copy's height plus a gap, so
   the duplicate lands exactly where the original started. */
.donors-track--scrolling {
  animation: donors-scroll var(--donors-duration, 45s) linear infinite;
  will-change: transform;
}

.donors-window:hover .donors-track--scrolling,
.donors-window:focus-within .donors-track--scrolling {
  animation-play-state: paused;
}

@keyframes donors-scroll {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(var(--donors-shift, 0px) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
  /* No self-scrolling; the window simply shows the most recent donations. */
  .donors-track--scrolling { animation: none; }
}

.donor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  animation: donor-in var(--dur-slow) var(--ease-out) both;
}

@keyframes donor-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .donor { animation: none; }
}

.donor__amount {
  display: grid;
  place-items: center;
  min-width: 6rem;
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--s4a-coral-100);
  color: var(--s4a-coral-600);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: 1.15rem;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

.donor__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.05rem;
  letter-spacing: var(--ls-tight);
}

.donor__time { font-size: var(--fs-sm); color: var(--text-subtle); margin-top: 2px; }

.donor__message {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  border-left: 2px solid var(--s4a-coral);
  padding-left: var(--space-4);
}

.donors__more {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .donor { gap: var(--space-4); }
  .donor__amount { min-width: 4.75rem; padding-inline: var(--space-3); font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--s4a-ink);
  color: var(--text-inverse);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

/* Co-branding lockup: our mark, then Laureus' own "in favor of" lockup —
   the partner artwork already carries that wording and its divider rule,
   so it is used whole rather than rebuilt. */
.cobrand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-inverse);
}

/* The partner artwork carries generous internal padding, so it needs more
   box height than its ink weight suggests to sit level with our wordmark. */
.cobrand__partner {
  height: clamp(4.5rem, 9vw, 7rem);
  width: auto;
  flex: none;
}

.brand--lg .wordmark { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
}

.footer .wordmark { color: var(--s4a-chalk); }

.footer__text {
  font-size: var(--fs-sm);
  color: rgba(251, 248, 243, .85);
  max-width: 44ch;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
}

.footer__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--s4a-sky);
  text-decoration: none;
}
.footer__link:hover { text-decoration: underline; }
.footer__link[aria-current="page"] { color: var(--s4a-chalk); }

/* --------------------------------------------------------------------------
   12b. Prose pages (Impressum)
   -------------------------------------------------------------------------- */

/* Legal pages run the full content column. No max-width here on purpose:
   .prose sits on the same element as .wrap, and declaring one would
   override .wrap's own cap and push the text wider than the header and
   footer it should line up with. */

.prose h1 { font-size: var(--fs-h1); margin-bottom: var(--space-5); }

.prose h2 {
  font-size: var(--fs-h3);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose p { font-size: var(--fs-lead); line-height: var(--lh-relaxed); }
.prose p + p { margin-top: var(--space-4); }

.prose a { color: var(--s4a-coral); text-underline-offset: 3px; }

.prose__lead { color: var(--text-muted); margin-bottom: var(--space-6); }

.prose__address {
  font-style: normal;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: fit-content;
  max-width: 100%;
}

.prose ul {
  margin: var(--space-4) 0 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
}
.prose ul li::marker { color: var(--s4a-coral); }

.prose__meta {
  margin-top: var(--space-7);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
}

.prose__back {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   13. Sticky mobile CTA
   -------------------------------------------------------------------------- */

.sticky-give {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--gutter);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.sticky-give[data-visible="true"] { transform: translateY(0); }

.sticky-give__text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-tight);
  color: var(--text);
}

@media (max-width: 720px) {
  .sticky-give { display: flex; }
}

/* --------------------------------------------------------------------------
   14. Scroll reveal
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}