/* UMBRUCHPUNKTE: 991 px und 800 px — bewusst dieselben wie im Theme (Bricks
   nutzt 478/800/991/1320). Vorher lagen unsere bei 700/760/768/900; zwischen
   900 und 991 schaltete deshalb der Kampagnenblock schon um, während die
   Seitennavigation noch im Desktop-Modus war.

   COIN Crowdfunding-Hero – zwei Varianten + Pill-Switch.
   Alle Klassen mit `cf-` gepräfixt, damit nichts mit Bricks (`brxe-*`) kollidiert.

   ACHTUNG ZUR TYPOGRAFIE: Das Theme setzt `html { font-size: 10px }`.
   1rem = 10px, NICHT 16px. Alle Werte hier sind danach gerechnet.

   Gemessene Werte der bestehenden Seite, an denen sich alles hier ausrichtet:
     body / p   20px / line-height 34px (1.7)   Aptos 400   #0f2832
     h1         60px / 1.25                     Aptos 700   #005a6e
     h2         40px / 1.2                      Aptos 700   #005a6e
     h3         25px                            Aptos 700   #005a6e
     Button     20px                            Aptos 700
     Container  1100px, zentriert
*/

.cf {
  --cf-petrol: #005a6e;
  --cf-petrol-light: #0087aa;
  --cf-dark: #0f2832;
  --cf-ink: #0f2832;        /* Fließtextfarbe der Seite */
  --cf-pale: #d2ebf5;
  --cf-sand: #f7f7f5;
  --cf-yellow: #ffc800;
  --cf-alert: #c8324a;
  --cf-line: #dbe4e8;

  /* --cf-max steht in theme-fixes.css und wird geerbt: Auch die 22 Seiten
     ohne hero.css muessen sich daran ausrichten koennen. */
  --cf-body: 2rem;          /* 20px */
  --cf-lh: 1.7;             /* 34px auf 20px */

  font-family: "Aptos", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--cf-body);
  line-height: var(--cf-lh);
  color: var(--cf-ink);
}

.cf :focus-visible {
  outline: .3rem solid var(--cf-dark);
  outline-offset: .3rem;
  border-radius: .4rem;
}

/* ---------------------------------------------------- Groessenbaender ---
   Namen fuer die Umbruchpunkte, damit im Gespraech „MD" statt „so um die
   900 px" gesagt werden kann. Die Grenzen sind UNSERE, nicht die von
   Bootstrap — Bootstrap-Namen auf fremde Grenzen zu kleben waere irrefuehrend.

     XS   bis  478 px   Handy hochkant  — Theme bricht hier um: @media (max-width: 478px)
     SM   479– 799 px   Handy quer, kleines Tablet
     MD   800– 991 px   Tablet          — @media (max-width: 799px) greift hier nicht mehr
     LG   992–1319 px   Laptop          — ab hier zweispaltig: @media (min-width: 992px)
     XL   ab  1320 px   grosser Bildschirm — breite Container: @media (min-width: 1320px)

   Die Anzeige unten links (nur lokal) zeigt das aktive Band.
   ------------------------------------------------------------------------ */

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

/* ---------------------------------------------------------------- Hero --- */

.cf-hero {
  position: relative;
  isolation: isolate;
  background: var(--cf-sand);
  /* overflow sichtbar, damit das Spendenpanel unten herausragen kann.
     Das Foto wird stattdessen vom Medien-Container beschnitten. */
  overflow: visible;
}

.cf-hero__media {
  /* Foto liegt als Block rechts statt über die volle Breite: nur so sind alle
     drei Gesichter zu sehen. Über die ganze Breite gespannt wird die
     4:3-Vorlage so stark beschnitten, dass Köpfe wegfallen.
     46 % ist die Grenze — weiter rechts (52 %) beginnt das Foto erst hinter
     dem Spendenpanel, und die linke Person verschwindet zur Hälfte dahinter. */
  position: absolute;
  inset: 0 0 0 46%;
  z-index: 0;
  overflow: hidden;
}

.cf-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 22 % statt zentriert: Das Hero-Foto ist hochformatig, der Rahmen ab LG
     aber deutlich breiter als hoch (auf 1440 px z. B. 777 x 612). Der
     Ausschnitt schneidet dadurch oben und unten viel vom Foto weg. Bei
     mittiger Position (50 %) verschwand ein guter Teil der Köpfe —
     22 % laesst oben mehr vom Foto stehen (Köpfe mit Luft darueber) und
     schneidet stattdessen unten mehr Boden/Beine weg, die ohnehin kaum
     zu sehen sind. */
  object-position: center 22%;
  display: block;
}

/* Heller Schleier: links fast deckend für die Textlesbarkeit, rechts offen. */
.cf-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* "Schmaler" heisst hier: die FARBSTOPPS wandern nach links, nicht eine
       Breite. Das Element selbst liegt immer ueber dem ganzen Hero
       (position: absolute; inset: 0) — nur der Punkt, an dem der Verlauf von
       deckend auf durchsichtig wechselt, verschiebt sich.

       30 % ist das Minimum: Bei 26 % faellt der Kontrast im Fliesstext auf
       3,8:1 (gemessen bei 1440 px). Bei 30 % bleibt er ueber 4,5:1 — auf
       1440 und auf 1600 px geprueft. */
    linear-gradient(100deg,
      rgba(247, 247, 245, 1) 0%,
      rgba(247, 247, 245, .97) 15%,
      rgba(247, 247, 245, .30) 38%,
      rgba(247, 247, 245, 0) 46%);}

/* ------------------------------------------- Hero ab MD und schmaler ---
   Unterhalb von 992 px stapeln Text und Panel, das Foto blieb aber auf den
   rechten 54 % liegen und der Verlauf so, wie er für den Zweispalter gebaut
   ist: deckend links, ab 46 % durchsichtig. Der Fliesstext lief damit auf das
   Foto. Gemessen am gerenderten Bild:

     991 px  10,3:1     800 px  5,9:1
     700 px   1,0:1     600 px  1,0:1     500 px  1,0:1

   1,0:1 heisst, dass der Text stellenweise vom Hintergrund nicht zu
   unterscheiden ist — auf genau den Breiten, auf denen die meisten Menschen
   die Seite ansehen.

   Statt den Verlauf pro Breite nachzujustieren, bekommt das Foto hier eine
   eigene Rolle: ein Band ueber dem Text. Kein Text liegt mehr auf dem Bild,
   der Kontrast ist damit unabhaengig vom Motiv, und alle drei Gesichter sind
   vollstaendig zu sehen statt halb hinter Text.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {    /* XS + SM + MD */
  .cf-hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    /* Waechst mit der Breite, bleibt aber gedeckelt: bei 991 px waeren 16:9
       schon 557 px hoch — der Hero wuerde die erste Bildschirmseite fuellen,
       ohne dass Ueberschrift oder Spendenpanel sichtbar waeren. */
    height: clamp(20rem, 38vw, 34rem);
  }

  /* Weiter oben ansetzen als im Zweispalter: Dort schneidet der schmale
     Ausschnitt seitlich, hier oben und unten. */
  .cf-hero__media img { object-position: center 42%; }

  /* Der Verlauf hat ohne darueberliegenden Text keine Aufgabe mehr und wuerde
     das Foto nur aufhellen. */
  .cf-hero__scrim { display: none; }

}

.cf-hero__inner {
  position: relative;
  z-index: 1;
  /* Die Breite schliesst den Seitenabstand MIT ein, damit der Inhalt auf
     derselben Fluchtlinie beginnt wie in `.cf-context`. Dort sitzt der
     Abstand aussen an der Sektion; stuende hier nur `max-width: var(--cf-max)`,
     begaenne der Hero-Text 30 px weiter innen als jeder Fliesstext darunter. */
  max-width: calc(var(--cf-max) + 2 * var(--cf-rand));
  margin-inline: auto;
  /* Unten derselbe Betrag wie oben. Bis zum 28.08.2026 stand hier 0: Das
     Panel ragte unten heraus und uebernahm den Abschluss der Sektion. Seit es
     auf Brusthoehe sitzt, endet der Hero mit der letzten Textzeile — ohne
     diesen Abstand stiesse sie fast auf die Kante der naechsten Sektion. */
  padding: clamp(2.5rem, 3.5vw, 4rem) var(--cf-rand);
}

/* MUSS hinter der Grundregel stehen: Die Kurzform `padding` oben setzt auch
   padding-top. Stuende diese Regel weiter oben (im MD-Block beim Foto), wuerde
   sie von ihr ueberschrieben — genau das war bis 13.08.2026 der Fall, der
   Abstand betrug 31,5 statt 36 px. `check-css.py` prueft das jetzt. */
@media (max-width: 991px) {    /* XS + SM + MD */
  .cf-hero__inner { padding-top: clamp(2.4rem, 5vw, 3.6rem); }
}

/* ------------------------------------------------- Referenzprojekt ------ */
/* Karte statt zentrierter Stapel: Logo links auf ruhiger Fläche, Text und
   Handlungsaufruf rechts. Ein fremdes Logo bekommt so eigenen Raum, ohne dass
   die Sektion wie ein Werbebanner wirkt. */

.cf-ref {
  background: var(--cf-sand);
  padding: clamp(4rem, 6vw, 6.5rem) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--cf-line);
}

.cf-ref__inner {
  max-width: 92rem;
  margin-inline: auto;
}

.cf-ref__karte {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 4vw, 5rem);
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 1.4rem;
  padding: clamp(2.4rem, 3.5vw, 4rem);
  box-shadow: 0 .6rem 2.4rem rgba(15, 40, 50, .07);
}

@media (max-width: 799px) {    /* XS + SM — 799, nicht 800: max-width gilt
                                  einschliesslich, sonst laege 800 px in SM
                                  und traege zugleich das Etikett MD. */
  .cf-ref__karte { grid-template-columns: 1fr; text-align: left; }
}

/* Eigenes Feld fürs Logo: Abstand ringsum, damit es nicht am Text klebt. */
.cf-ref__logo-feld {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.4rem;
  background: var(--cf-sand);
  border-radius: 1rem;
}

.cf-ref__logo {
  width: 100%;
  max-width: 20rem;
  height: auto;
}

.cf-ref__eyebrow {
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cf-petrol-light);
  margin: 0 0 .8rem;
}

.cf-ref__titel {
  font-size: clamp(2.2rem, 2.8vw, 2.8rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--cf-petrol);
  margin: 0 0 1.2rem;
}

.cf-ref__beschreibung {
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--cf-ink);
  margin: 0 0 2.4rem;
  max-width: 46ch;
}

.cf-ref__cta {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: 1.2rem 2.4rem;
  border-radius: .6rem;
  border: .2rem solid var(--cf-petrol);
  background: #fff;
  color: var(--cf-petrol);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.cf-ref__cta::after { content: "\2192"; }

/* Beide Knoepfe nebeneinander, umbrechend statt gequetscht. */
.cf-ref__aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}

/* Gefuellt statt umrandet: Von den beiden Wegen aus dieser Sektion ist das
   Spenden der, um den es der Seite geht. Der Pfeil entfaellt — er steht hier
   fuer "fuehrt woanders hin", dieser Knopf springt aber auf derselben Seite
   zum Formular. */
.cf-ref__cta--spenden {
  background: var(--cf-petrol);
  color: #fff;
}

.cf-ref__cta--spenden::after { content: none; }

.cf-ref__cta--spenden:hover,
.cf-ref__cta--spenden:focus-visible {
  background: var(--cf-dark);
  color: #fff;
}

.cf-ref__cta:hover,
.cf-ref__cta:focus-visible { background: var(--cf-petrol); color: #fff; }

/* Kein Ziel hinterlegt -> der Knopf gibt nicht vor, irgendwohin zu führen. */
.cf-ref__cta[data-unconfigured="true"] {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.5);
}

/* --------------------------------------------------------- Pill-Switch --- */
/* Prototyp-Werkzeug: fest unten links, bewusst außerhalb des Seitendesigns.
   Vor dem Launch entfernen. */

.cf-switch {
  position: fixed;
  left: clamp(1.2rem, 2vw, 2.4rem);
  bottom: clamp(1.2rem, 2vw, 2.4rem);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  padding: 1.1rem 1.3rem 1.3rem;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border: 1px solid var(--cf-line);
  border-radius: 1.6rem;
  box-shadow: 0 .8rem 2.8rem rgba(15, 40, 50, .2);
}

.cf-switch__label {
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cf-ink);
  opacity: .55;
  padding-inline: .3rem;
}

.cf-switch__track {
  position: relative;
  display: inline-flex;
  padding: .4rem;
  border-radius: 999px;
  background: #eef3f5;
  border: 1px solid var(--cf-line);
}

.cf-switch__thumb {
  position: absolute;
  top: .4rem;
  bottom: .4rem;
  left: 0;
  width: var(--cf-thumb-w, 50%);
  transform: translateX(var(--cf-thumb-x, 0px));
  background: var(--cf-petrol);
  border-radius: 999px;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

.cf-switch__btn {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  font: inherit;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--cf-petrol);
  transition: color .28s ease;
  white-space: nowrap;
}

.cf-switch__btn[aria-selected="true"] { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .cf-switch__thumb,
  .cf-switch__btn { transition: none; }
}

/* Sobald das Layout stapelt (unter 992 px), wandert das Werkzeug als Leiste an
   den Seitenanfang und scrollt mit. Fixiert verdeckt es dort zwangsläufig
   Inhalt — beobachtet wurden Zahlungsarten im Spendenformular, Fließtext, eine
   Überschrift und zuletzt das Spendenpanel bei 900 px. */
@media (max-width: 991px) {    /* XS + SM + MD */
  .cf-switch {
    position: static;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    border-radius: 0;
    border-width: 0 0 1px 0;
    box-shadow: none;
    backdrop-filter: none;
    padding: 1rem 1.6rem;
  }

  .cf-switch__label { padding-inline: 0; }
}

/* ------------------------------------------------------------ Varianten -- */

.cf-variant[hidden] { display: none; }

.cf-variant {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(3rem, 5vw, 6rem);
  align-items: center;
}

@media (max-width: 991px) {    /* XS + SM + MD */
  .cf-variant { grid-template-columns: 1fr; }
}
/* h1 der Seite: 60px / 1.25 / Petrol. Hier bis 5.4rem, weil die Headline
   länger ist als die originale und sonst vier Zeilen bräuchte. */
.cf-h1 {
  color: var(--cf-petrol);
  font-size: clamp(3.2rem, 3.7vw, 4.8rem);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 2rem;
  /* Kein `text-wrap: balance` mehr: Der Umbruch steht seit 13.08.2026 als
     <br> fest im Markup. Balance wuerde dagegenarbeiten und auf schmalen
     Breiten unausgewogene Reste erzeugen. */
}

.cf-h1 em { font-style: normal; color: var(--cf-dark); }

/* Beide Saetze der Ueberschrift bleiben je auf EINER Zeile.
   -----------------------------------------------------------------------
   Gemessen: „Unsere Förderung endet." braucht immer 11,24em, „Unsere Arbeit
   nicht." 9,06em. Der Umbruch dazwischen steht als <br> fest im Markup.

   Ohne diese Regel brach der erste Satz zwischen etwa 1290 und 1319 px um:
   Dort hat die Schrift ihre Obergrenze von 48 px erreicht (48 x 11,24 =
   539,5 px), die Spalte ist aber noch 539 px schmal — der breite Container
   greift erst ab 1320 px. Ein halbes Pixel zu wenig.

   `nowrap` allein reicht nicht, es verschoebe den Umbruch nur zu einem
   Ueberlauf. Deshalb ist zusaetzlich die Schriftgroesse je Band so
   gedeckelt, dass 11,24em immer in die Spalte passen. */
.cf-h1__zeile { white-space: nowrap; }

/* Bis 1319 px ist die Textspalte 539 px breit: 4,7rem x 11,24 = 528 px,
   es bleiben 11 px Luft. Mit 4,8rem waeren es 539,5 px — zu viel. */
@media (max-width: 1319px) {   /* bis XL */
  .cf-h1 { font-size: clamp(3.2rem, 3.7vw, 4.7rem); }
}

/* Unterhalb 992 px laeuft der Text ueber die volle Breite. Dort ist nicht die
   Spalte der Engpass, sondern der Bildschirm: Bei 320 px bleiben nach den
   Raendern rund 294 px, das erlaubt hoechstens 26 px Schrift. `min()` deckelt
   deshalb zusaetzlich an der Bildschirmbreite. */
@media (max-width: 991px) {    /* XS + SM + MD */
  .cf-h1 { font-size: min(clamp(3.2rem, 3.7vw, 4.7rem), 8vw); }
}

.cf-lead {
  color: var(--cf-ink);
  font-size: var(--cf-body);
  line-height: var(--cf-lh);
  margin: 0 0 3rem;
  max-width: 46ch;
}

/* Nur Variante 2026: breiter als die Basisregel, damit der Absatz die linke
   Rasterspalte mehr ausfuellt und dadurch in weniger Zeilen umbricht. Die
   Spaltenbreite selbst kommt vom Grid (`.cf-variant`, minmax(0, 1.1fr)) --
   die Spalte endet immer VOR dem Abstand zum Panel, ein Ueberbreite hier
   kann das Panel also nicht erreichen. Nur fuer diese Variante, damit 2027
   unveraendert bleibt. */
#cf-panel-2026 .cf-lead { max-width: 80ch; }

/* Absatzabstand INNERHALB von .cf-lead eigens gesetzt, statt per
   Leerzeile (zwei <br>): Der Abstand einer Leerzeile richtet sich nach der
   Zeilenhöhe (34px) und wirkte zwischen den drei Absätzen im Header zu
   groß. Eigene <p> mit kleinerem, fest gesetztem Abstand -- unabhaengig von
   der Zeilenhöhe einstellbar. */
.cf-lead p { margin: 0 0 1.2rem; }
.cf-lead p:last-child { margin-bottom: 0; }

.cf-lead strong { color: var(--cf-petrol); font-weight: 700; }

.cf-lead ul {
  margin: 0 0 1.2rem;
  padding-left: 2.2rem;
}

.cf-lead li { margin-bottom: 0.6rem; }
.cf-lead li:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- CTAs --- */

.cf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
}

/* Nur Variante 2026: Der "Einfache Sprache"-Knopf steht dort direkt unter
   der Überschrift statt unter den drei Absätzen. */
.cf-actions--unter-h1 { margin: 0 0 2rem; }

/* Button der Seite: 20px, 700. */
.cf-btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 3rem;
  border-radius: .6rem;
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 700;
  text-decoration: none;
  border: .2rem solid transparent;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.cf-btn--primary { background: var(--cf-petrol); color: #fff; }
.cf-btn--primary:hover,
.cf-btn--primary:focus-visible { background: var(--cf-dark); color: #fff; }

.cf-btn--ghost {
  background: rgba(255, 255, 255, .75);
  color: var(--cf-petrol);
  border-color: var(--cf-petrol);
}

/* Weniger Höhe als der Standard-Knopf (1.5rem oben/unten) — bleibt durch
   Rahmen, Farbe und Schriftgröße trotzdem gut sichtbar. */
.cf-btn--kompakt { padding: .7rem 2.4rem; }

.cf-btn--ghost:hover,
.cf-btn--ghost:focus-visible { background: var(--cf-petrol); color: #fff; }

.cf-btn[data-unconfigured="true"] {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(.5);
}

.cf-note {
  margin: 2rem 0 0;
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--cf-ink);
  opacity: .8;
  max-width: 52ch;
}

.cf-note strong { font-weight: 700; opacity: 1; }

/* -------------------------------------------------------------- Panels --- */

/* Auf Brusthoehe statt unten angedockt (28.08.2026).
   -----------------------------------------------------------------------
   Bis dahin sass das Panel mit `align-self: end` am unteren Rand der
   Grid-Zeile und ragte um feste 3.6rem in die weisse Sektion darunter.
   Gemessen bei 1440 px begann es dadurch auf Huefthoehe der abgebildeten
   Personen — optisch schwer, und der Ueberstand zwang `.cf-donate` dazu,
   mit seinem oberen Innenabstand Platz dafuer freizuhalten. Ging das
   vergessen, verdeckte das Panel die Ueberschrift "Jetzt spenden"; genau
   das ist am 19.08.2026 passiert, als das Panel durch zusaetzliche Zeilen
   hoeher wurde.

   Jetzt gilt die Ausrichtung des Grids (`align-items: center`) auch fuer
   das Panel — deshalb steht hier KEIN `align-self` mehr. Gemessen bei
   1440 px wandert die Oberkante damit von 591 px auf rund 375 px, also auf
   Brusthoehe. Der Ueberstand faellt weg, und die Kopplung an `.cf-donate`
   mit ihr: Das Panel kann nicht mehr in die naechste Sektion hineinragen,
   egal wie viele Zeilen dazukommen.

   `position` und `z-index` bleiben: Sie halten das Panel ueber dem
   Verlauf des Hero-Fotos, unabhaengig von der Hoehe.

   Nur ab 992 px, weil Text und Panel darunter untereinander stapeln — dort
   gibt es keine gemeinsame Zeile, in der etwas ausgerichtet werden koennte. */
@media (min-width: 992px) {    /* LG + XL */
  .cf-variant > .cf-panel {
    position: relative;
    z-index: 2;
    /* Etwas tiefer als die reine Mitte (28.08.2026): Bei 1440 px sass die
       Oberkante sonst dicht unter den Kinnlinien der abgebildeten Personen —
       die Gesichter blieben frei, aber knapp.

       Der Betrag ist unkritisch, und zwar aus einem anderen Grund als der
       frueherer Ueberstand: Der ging vom UNTEREN Rand der Zeile aus und
       endete per Definition in der naechsten Sektion — jede zusaetzliche
       Textzeile im Panel schob ihn weiter hinein, bis er am 19.08.2026 die
       Ueberschrift "Jetzt spenden" verdeckte. Dieser Versatz geht von der
       MITTE aus, und darunter bleiben bei 1440 px rund 13rem Luft bis zum
       Ende der Sektion. Das Panel erreicht `.cf-donate` also nicht, auch
       wenn es waechst. */
    transform: translateY(9rem);
  }
}

.cf-panel {
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 1.4rem;
  padding: clamp(2.4rem, 3vw, 3.2rem);
  box-shadow: 0 .8rem 3rem rgba(15, 40, 50, .1);
}

.cf-panel__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .7rem;
  color: var(--cf-petrol-light);
  font-size: 1.4rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 2rem;
  font-weight: 700;
}

.cf-stats { display: grid; gap: 2.2rem; margin: 0; }

.cf-stat { margin: 0; }

.cf-stat__value {
  display: block;
  color: var(--cf-petrol);
  font-size: clamp(2.8rem, 3vw, 3.6rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

/* Rot bleibt dem Countdown vorbehalten – hier wäre es das falsche Signal.
   Die Hervorhebung läuft über den dunkleren Ton, nicht über eine Warnfarbe. */
.cf-stat__value--accent { color: var(--cf-dark); }

.cf-stat__label {
  display: block;
  color: var(--cf-ink);
  font-size: 1.6rem;
  line-height: 1.5;
  margin: .4rem 0 0;
}

/* ------------------------------------------ Spendenpanel (Variante 2026) -- */
/* Der Betrag ist die Hauptaussage: große Zahl, Prozentwert auf gleicher
   Grundlinie, darunter der Balken, darunter zwei Kennzahlen. */

.cf-raised {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  margin: 0;
}

.cf-raised__amount {
  margin: 0;
  font-size: clamp(3.8rem, 4.6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cf-petrol);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

.cf-raised__pct {
  margin: 0;
  text-align: right;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cf-petrol-light);
  font-variant-numeric: tabular-nums;
}

.cf-raised__pct[hidden] { display: none; }

.cf-raised__pct-label {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--cf-ink);
  opacity: .75;
}

.cf-raised__of {
  margin: .8rem 0 2rem;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--cf-ink);
  opacity: .8;
}

.cf-raised__of strong { font-weight: 700; opacity: 1; }

.cf-progress__foot {
  margin: 1.4rem 0 0;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--cf-ink);
  opacity: .8;
}

.cf-progress__foot strong {
  color: var(--cf-dark);
  font-weight: 700;
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ Fortschritt --- */

/* `hidden` wird von jeder `display`-Regel ausgehebelt — die Autor-Regel
   schlaegt das Standard-Stylesheet des Browsers. Diese Zeilen sorgen dafuer,
   dass der Spendenstand im Ausfall-Fall wirklich verschwindet und nicht nur
   „ausgeblendet" ist. Genau dieser Fehler ist hier schon zweimal passiert. */
.cf-raised[hidden],
.cf-raised__of[hidden],
.cf-raised__ziel[hidden],
.cf-progress__bar[hidden] { display: none; }

/* Ersatz fuer den Spendenstand, wenn ueberhaupt keine Zahl vorliegt. Bewusst
   in derselben Groesse wie die Zielzeile darunter, nicht als Warnung
   hervorgehoben — es IST keine Warnung, sondern einfach die Auskunft, die
   ohne Zahl noch bleibt. */
.cf-raised__ziel {
  margin: 0 0 2rem;
  font-size: 1.8rem;
  line-height: 1.45;
  color: var(--cf-ink);
}

.cf-progress__bar {
  height: 1.8rem;
  border-radius: 999px;
  background: #e7edf0;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(15, 40, 50, .1);
}

.cf-progress__fill {
  height: 100%;
  width: 0;
  /* KEINE `min-width` hier. Sie klemmte die Animation fest: Der Balken wurde
     sofort 18 px breit gezeichnet und wuchs erst weiter, wenn der Anteil
     diese Breite überschritt — bei 510 von 75.000 € also nie. Sichtbar war
     dadurch kein Wachsen, sondern ein Balken, der schon da war.
     Die Mindestbreite steckt jetzt im ZIEL der Animation, siehe `paint()`
     in hero.js: von 0 auf `max(1.8rem, Anteil)`. */
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cf-petrol), var(--cf-petrol-light));
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

/* Ohne Daten keinen Füllstand zeigen – die Mindestbreite würde sonst einen
   Fortschritt suggerieren, den es nicht gibt. */
.cf-progress__bar[data-placeholder="true"] .cf-progress__fill { display: none; }

.cf-progress__bar[data-placeholder="true"] {
  background-image: repeating-linear-gradient(45deg,
    rgba(15, 40, 50, .12) 0 .8rem, transparent .8rem 1.6rem);
}

/* `display: flex` würde das HTML-Attribut `hidden` aushebeln (Autor-Regel
   schlägt UA-Stylesheet). Ohne diese Zeile bleibt der Platzhalter-Hinweis
   sichtbar, obwohl längst ein echter Spendenstand angezeigt wird. */
.cf-placeholder-hint[hidden] { display: none; }

.cf-placeholder-hint {
  margin: 1rem 0 0;
  font-size: 1.4rem;
  color: #8a6a00;
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .cf-progress__fill { transition: none; }
}

/* ------------------------------------------- Counter in der Titelzeile --- */

/* Trenner gehört zum Counter, nicht zwischen die beiden Blöcke: So hängt er
   bei einem Zeilenumbruch nie allein am Ende der ersten Zeile. */

.cf-cdline {
  flex-basis: 100%;      /* immer eigene Zeile, unabhaengig von der Titellaenge */
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  letter-spacing: .04em;   /* enger als der Titel, damit die Zeile fasst */
}

.cf-cdline .cf-cd__num {
  font-size: inherit;
  font-weight: 700;
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.cf-cdline__clock {
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.cf-cdline__clock:empty { display: none; }

/* Pulspunkt nur im Live-Modus – er signalisiert, dass die Uhr läuft. */
.cf-cdline__pulse {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
  display: none;
}

/* Letzte 90 Tage: Warnfarbe, Pulspunkt, laufende Uhr. */
.cf-cdline[data-mode="live"] {
  color: var(--cf-alert);
}

.cf-cdline[data-mode="live"] .cf-cdline__pulse {
  display: block;
  animation: cf-pulse 1s ease-in-out infinite;
}

@keyframes cf-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(.7); }
}

/* Ziffernwechsel: kurzer Einlauf von oben – Zeit fällt nach unten weg. */
.cf-cd__num.is-tick { animation: cf-tick .32s cubic-bezier(.3, 0, .2, 1); }

@keyframes cf-tick {
  from { transform: translateY(-.3em); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Ohne Bewegung: Zahlen aktualisieren sich weiter, nur ohne Animation. */
@media (prefers-reduced-motion: reduce) {
  .cf-cdline[data-mode="live"] .cf-cdline__pulse { animation: none; }
  .cf-cd__num.is-tick { animation: none; }
}

/* Förderer-Sektion (.cf-funders) ist seit 24.08.2026 in theme-fixes.css —
   /geschichte/ zeigt denselben Block und laedt hero.css nicht. */

/* ------------------------------------------------------ Spendenformular -- */

.cf-donate {
  /* `background-color` statt der Kurzform `background`: Die Kurzform wuerde
     das Hintergrundbild darunter wieder zuruecksetzen. */
  background-color: #fff;
  padding: clamp(5rem, 7vw, 8rem) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--cf-line);

  /* Sprungziele (Knopf im "Einfache Sprache"-Kasten, der schwebende
     Sprung-Knopf) landeten genau am oberen Rand -- darunter versteckt vom
     festen Kopfbereich. Gleiche Zahl wie bei .cf-ls und aus demselben
     Grund: Px statt rem, weil die tatsaechliche Kopfhoehe gemeint ist. */
  scroll-margin-top: 180px;

  /* Linien-Grafik der Marke, unveraendert aus der Vorlage uebernommen
     (2507_COIN_PPT_Linien_04). Die Boegen sitzen oben rechts, deshalb steht
     die Grafik hier auf `right top`.

     Die Datei hat einen echten Alpha-Kanal — nur die Linien sind deckend, die
     weisse Flaeche der Sektion bleibt darunter sichtbar.

     Rein dekorativ: als CSS-Hintergrund und nicht als <img>. So taucht sie
     nicht im Accessibility-Tree auf und braucht keinen Alternativtext. */
  background-image: url("/fundraising/img/linien-04.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
}

.cf-donate__inner {
  max-width: 72rem;
  margin-inline: auto;
  text-align: center;
}

/* h2 der Seite: 40px / 1.2 / Petrol. */
.cf-donate h2 {
  font-size: clamp(2.8rem, 3.4vw, 4rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--cf-petrol);
  margin: 0 0 1.6rem;
}

.cf-donate__intro {
  color: var(--cf-ink);
  font-size: var(--cf-body);
  line-height: var(--cf-lh);
  margin: 0 auto 3rem;
  max-width: 70ch;
}

.cf-donate__legal {
  background: #fdf6e0;
  border: 1px solid #e8d48a;
  border-radius: 1rem;
  padding: 1.6rem 2rem;
  margin: 0 auto 3rem;
  max-width: 52ch;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #4a3c10;
  text-align: left;
}

/* --------------------------------------------------- Click-to-Load-Gate --- */
/* `[hidden]` muss ausdruecklich durchgesetzt werden — jede display-Regel
   haengt es sonst aus. Genau dieser Fehler ist hier schon zweimal passiert,
   und `check-a11y.py` prueft ihn deshalb. */
[data-cf-gate-box][hidden],
[data-cf-gate-nojs][hidden] { display: none; }

.cf-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.cf-gate__hinweis,
.cf-gate__ohne-js {
  margin: 0;
  max-width: 52ch;
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--cf-ink);
}

.cf-gate__ohne-js {
  padding: clamp(3rem, 5vw, 5rem) clamp(2rem, 4vw, 3rem);
  margin-inline: auto;
  text-align: center;
}

.cf-gate__btn { align-self: center; }

.cf-donate__frame {
  background: var(--cf-sand);
  border: 1px solid var(--cf-line);
  border-radius: 1.5rem;
  padding: clamp(1rem, 2vw, 2rem);
}

.cf-donate__frame iframe {
  border: none;
  max-width: 600px;
  width: 100%;
  min-height: 720px;
  display: block;
  border-radius: 15px;
  margin: auto;
}

/* ------------------------------------------------------------- Kontext --- */

.cf-context {
  background: var(--cf-sand);
  padding: clamp(5rem, 7vw, 8rem) clamp(2rem, 4vw, 3rem);
}

.cf-context__inner { max-width: var(--cf-max); margin-inline: auto; }

.cf-context__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(3rem, 5vw, 6rem);
  align-items: start;
}

@media (max-width: 991px) {    /* XS + SM + MD */
  .cf-context__grid { grid-template-columns: 1fr; }
}

.cf-context h2 {
  font-size: clamp(2.8rem, 3.4vw, 4rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--cf-petrol);
  margin: 0 0 2.4rem;
}

/* h3 der Seite: 25px / 700 / Petrol. */
.cf-context h3 {
  font-size: 2.5rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--cf-petrol);
  margin: 4rem 0 1.2rem;
}

.cf-context p {
  font-size: var(--cf-body);
  line-height: var(--cf-lh);
  margin: 0 0 1.8rem;
  max-width: 62ch;
  color: var(--cf-ink);
}

.cf-context strong { color: var(--cf-petrol); font-weight: 700; }

/* Leichte Sprache: größer als der Fließtext, kurze Zeilen, viel Zeilenabstand. */
.cf-ls {
  background: #fff;
  border: .2rem solid var(--cf-petrol);
  border-radius: 1.4rem;
  padding: clamp(2.4rem, 3vw, 3.2rem);
  /* Der Sprung-Link "Einfache Sprache" landete genau am oberen Rand --
     darunter versteckt vom festen (position: sticky) Kopfbereich, der auf
     dieser Seite ca. 140-144px hoch ist. `scroll-margin-top` laesst beim
     Ankerspringen entsprechend Platz oben, damit die Überschrift sichtbar
     unter dem Kopfbereich landet statt dahinter. Px statt rem: 1rem ist auf
     dieser Seite 10px, nicht 16px -- hier soll die tatsaechliche Kopfhoehe
     gemessen sein, nicht von der Schriftgroesse abhaengen. */
  scroll-margin-top: 180px;
}

.cf-context .cf-ls__badge,
.cf-ls__badge {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  background: var(--cf-petrol);
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  margin: 0 0 2rem;
}

.cf-ls ul { margin: 0; padding-left: 2.2rem; }

.cf-ls li {
  font-size: 2.1rem;
  line-height: 1.75;
  margin-bottom: 1.4rem;
  max-width: 38ch;
  color: var(--cf-ink);
}

.cf-ls li:last-child { margin-bottom: 0; }

.cf-ls__cta { margin-top: 2.4rem; }

/* Mittelverwendung */
.cf-use {
  list-style: none;
  margin: 2.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}

.cf-use li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  align-items: start;
  background: #fff;
  border-left: .5rem solid var(--cf-petrol-light);
  border-radius: .6rem;
  padding: 1.6rem 2rem;
  font-size: 1.8rem;
  line-height: 1.55;
}

.cf-use__num {
  font-weight: 700;
  color: var(--cf-petrol);
  font-variant-numeric: tabular-nums;
}

.cf-todo {
  display: inline-block;
  background: var(--cf-yellow);
  color: var(--cf-dark);
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .2rem .8rem;
  border-radius: .4rem;
  margin-right: .6rem;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ FAQ --- */

.cf-faq {
  background: #fff;
  padding: clamp(5rem, 7vw, 8rem) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--cf-line);
}

.cf-faq__inner { max-width: 88rem; margin-inline: auto; }

.cf-faq h2 {
  font-size: clamp(2.8rem, 3.4vw, 4rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--cf-petrol);
  margin: 0 0 1.2rem;
}

.cf-faq__intro {
  color: var(--cf-ink);
  font-size: var(--cf-body);
  line-height: var(--cf-lh);
  margin: 0 0 3.5rem;
  max-width: 56ch;
}

.cf-faq__group {
  font-size: 1.4rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--cf-petrol-light);
  margin: 4rem 0 1.4rem;
}

.cf-faq__group:first-of-type { margin-top: 0; }

.cf-faq__item {
  border: 1px solid var(--cf-line);
  border-radius: 1rem;
  margin-bottom: 1.2rem;
  background: var(--cf-sand);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.cf-faq__item[open] {
  border-color: var(--cf-petrol);
  box-shadow: 0 .2rem 1.8rem rgba(0, 90, 110, .1);
}

.cf-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 2rem 2.4rem;
  cursor: pointer;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.45;
  color: var(--cf-petrol);
  list-style: none;
}

.cf-faq__q::-webkit-details-marker { display: none; }
.cf-faq__q::marker { content: ""; }

.cf-faq__q:hover { background: #eef4f7; }

.cf-faq__icon {
  flex: 0 0 auto;
  position: relative;
  width: 2.8rem;
  height: 2.8rem;
  margin-top: .2rem;
  border-radius: 50%;
  background: var(--cf-petrol);
}

.cf-faq__icon::before,
.cf-faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% .7rem auto .7rem;
  height: .2rem;
  background: #fff;
  transform: translateY(-50%);
  transition: transform .22s ease, opacity .22s ease;
}

.cf-faq__icon::after { transform: translateY(-50%) rotate(90deg); }
.cf-faq__item[open] .cf-faq__icon::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

.cf-faq__a {
  padding: 0 2.4rem 2.4rem;
  border-top: 1px solid var(--cf-line);
}

.cf-faq__a > p {
  margin: 2rem 0 0;
  font-size: 1.8rem;
  line-height: 1.65;
  color: var(--cf-ink);
  /* Kein max-width mehr: Die Box selbst begrenzt schon ausreichend
     (`.cf-faq__inner`, 88rem) -- ein zusaetzlicher ch-Deckel liess Zeilen
     unnoetig frueh umbrechen und machte die Antwort-Boxen hoeher als noetig. */
}

.cf-faq__a ul { margin: 1.4rem 0 0; padding-left: 2.2rem; }

.cf-faq__a li {
  font-size: 1.8rem;
  line-height: 1.6;
  margin-bottom: .7rem;
  color: var(--cf-ink);
}

.cf-faq__footer {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--cf-line);
  font-size: 1.8rem;
  line-height: 1.6;
  color: var(--cf-ink);
}

.cf-faq__footer a { color: var(--cf-petrol); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .cf-faq__item,
  .cf-faq__icon::before,
  .cf-faq__icon::after { transition: none; }
}

/* ------------------------------------- Kampagne in Leichter Sprache ------ */
/* Eigener Abschnitt auf /leichte-sprache/. Bewusst großzügiger gesetzt als der
   übrige Prototyp: größere Schrift, kurze Zeilen, viel Zeilenabstand, klare
   Trennung zwischen den Aussagen. */

.cf-lsk {
  background: var(--cf-sand);
  padding: clamp(4rem, 6vw, 7rem) clamp(2rem, 4vw, 3rem);
  border-top: .4rem solid var(--cf-petrol);
}

.cf-lsk__inner {
  max-width: 68rem;
  margin-inline: auto;
}

.cf-lsk__title {
  font-size: clamp(3rem, 4vw, 4rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--cf-petrol);
  margin: 0 0 2.5rem;
}

.cf-lsk h3 {
  font-size: clamp(2.4rem, 2.8vw, 2.8rem);
  line-height: 1.3;
  font-weight: 700;
  color: var(--cf-petrol);
  margin: 4.5rem 0 1.5rem;
}

/* Ein Gedanke pro Zeile – deshalb Listen ohne Aufzählungszeichen, aber mit
   deutlichem Abstand statt Fließtext. */
.cf-lsk ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cf-lsk li,
.cf-lsk p {
  font-size: 2.2rem;
  line-height: 1.75;
  color: var(--cf-ink);
  margin: 0 0 1.4rem;
  max-width: 40ch;
}

.cf-lsk li { padding-left: 2.6rem; position: relative; }

.cf-lsk li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.4rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--cf-petrol-light);
}

/* Hinweis, dass dieser Text noch nicht geprüft ist. Muss auffallen: Die Seite
   trägt das Inclusion-Europe-Zeichen, das nur für geprüfte Texte gilt. */
.cf-lsk__hinweis {
  background: #fdf6e0;
  border: .3rem solid #e8d48a;
  border-radius: 1.2rem;
  padding: 2rem 2.4rem;
  margin-bottom: 3rem;
}

.cf-lsk__hinweis p {
  margin: 0 0 .8rem;
  font-size: 2rem;
  line-height: 1.6;
  color: #4a3c10;
}

.cf-lsk__hinweis p:last-child { margin-bottom: 0; }

.cf-lsk__cta-wrap { margin: 3rem 0 1.5rem; max-width: none; }

.cf-lsk__cta {
  display: inline-block;
  background: var(--cf-petrol);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  padding: 1.8rem 3.2rem;
  border-radius: .8rem;
  border: .3rem solid var(--cf-petrol);
}

.cf-lsk__cta:hover,
.cf-lsk__cta:focus-visible { background: var(--cf-dark); border-color: var(--cf-dark); }

.cf-lsk__cta-note {
  font-size: 1.9rem;
  line-height: 1.7;
  color: var(--cf-ink);
  opacity: .85;
}

.cf-lsk__mail { color: var(--cf-petrol); font-weight: 700; }

/* ------------------------------------------------------- Danke-Seite ----- */

.cf-danke {
  background: var(--cf-sand);
  padding: clamp(5rem, 8vw, 9rem) clamp(2rem, 4vw, 3rem);
}

.cf-danke__inner {
  max-width: 76rem;
  margin-inline: auto;
}

.cf-danke__badge {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 2rem;
  padding: .7rem 1.6rem;
  border-radius: 999px;
  background: rgba(0, 90, 110, .1);
  border: 1px solid rgba(0, 90, 110, .35);
  color: var(--cf-petrol);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.cf-danke__title {
  font-size: clamp(4.4rem, 7vw, 7rem);
  line-height: 1.05;
  font-weight: 700;
  color: var(--cf-petrol);
  margin: 0 0 2rem;
}

.cf-danke__lead {
  font-size: clamp(2rem, 2.4vw, 2.4rem);
  line-height: 1.6;
  color: var(--cf-ink);
  margin: 0 0 4rem;
  max-width: 46ch;
}

.cf-danke h2 {
  font-size: clamp(2.4rem, 3vw, 3rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--cf-petrol);
  margin: 4rem 0 1.6rem;
}

.cf-danke p {
  font-size: var(--cf-body);
  line-height: var(--cf-lh);
  color: var(--cf-ink);
  margin: 0 0 1.6rem;
  max-width: 60ch;
}

.cf-danke__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.2rem;
}

.cf-danke__list li {
  background: #fff;
  border-left: .5rem solid var(--cf-petrol-light);
  border-radius: .6rem;
  padding: 1.6rem 2rem;
  font-size: 1.9rem;
  line-height: 1.6;
  color: var(--cf-ink);
}

.cf-danke__list strong { color: var(--cf-petrol); font-weight: 700; }

.cf-danke__hinweis {
  background: #fdf6e0;
  border: 1px solid #e8d48a;
  border-radius: 1rem;
  padding: 1.6rem 2rem;
  font-size: 1.7rem !important;
  line-height: 1.6;
  color: #4a3c10 !important;
}

/* ------------------------------------------------------------- Teilen --- */

.cf-danke__share {
  margin-top: 5rem;
  padding: clamp(2.4rem, 4vw, 3.6rem);
  background: #fff;
  border: 1px solid var(--cf-line);
  border-radius: 1.4rem;
}

.cf-danke__share h2 { margin-top: 0; }

.cf-danke__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 2.4rem 0 3rem;
}

.cf-danke__btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2.8rem;
  border-radius: .6rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  border: .2rem solid transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* Kein WhatsApp-Grün: Auf dieser Seite gilt die Hausfarbe, sonst sieht der
   Knopf aus wie ein fremdes Werbebanner. */
.cf-danke__btn--wa { background: var(--cf-petrol); color: #fff; }
.cf-danke__btn--wa:hover,
.cf-danke__btn--wa:focus-visible { background: var(--cf-dark); }

.cf-danke__btn--mail {
  background: #fff;
  color: var(--cf-petrol);
  border-color: var(--cf-petrol);
}

.cf-danke__btn--mail:hover,
.cf-danke__btn--mail:focus-visible { background: var(--cf-petrol); color: #fff; }

.cf-danke__preview-label {
  font-size: 1.4rem !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cf-petrol-light);
  margin-bottom: .8rem !important;
}

/* Vorschau des Nachrichtentexts: Niemand verschickt gern etwas, das er
   vorher nicht gesehen hat. */
.cf-danke__preview {
  /* blockquote erbt vom Theme eine Serifenschrift - hier soll die Vorschau
     aussehen wie der Text, der spaeter verschickt wird. */
  font-family: inherit;
  font-style: normal;
  margin: 0;
  padding: 1.6rem 2rem;
  background: var(--cf-sand);
  border-left: .4rem solid var(--cf-line);
  border-radius: .6rem;
  font-size: 1.7rem;
  line-height: 1.6;
  color: var(--cf-ink);
}

.cf-danke__preview span { color: var(--cf-petrol); font-weight: 700; }

.cf-danke__back {
  margin-top: 4rem !important;
  font-size: 1.8rem !important;
}

.cf-danke__back a { color: var(--cf-petrol); font-weight: 700; }

/* --------------------------------------------------- Botschafter:innen --- */
/* Leiste über dem Spendenformular, in der Anmutung der Förderer-Logos:
   nebeneinander, kompakt, Foto und Name auf einer Höhe. */

/* ---------------------------------------------------------- Advocates --- */
/* Eigene Sektion zwischen Kontext und Spendenformular — bewusst nicht mehr im
   Formular-Container, der schmal bleiben soll. */

.cf-adv {
  background: var(--cf-sand);
  padding: clamp(4rem, 6vw, 6rem) clamp(2rem, 4vw, 3rem);
  /* Keine Trennlinie zum Hero: Sektion und Hero liegen auf derselben
     Sandfläche, und ab LG gehören sie ohnehin sichtbar zusammen — das
     Spendenpanel ragt aus dem einen in das andere hinein. Ein Strich
     mittendurch hätte genau das durchschnitten. */
}

.cf-adv__inner {
  max-width: var(--cf-max);
  margin-inline: auto;
  text-align: center;
}

/* Ab LG rücken die Advocates NEBEN das Spendenpanel statt darunter: gleiche
   Spaltenteilung wie im Hero, damit sie auf der Fluchtlinie des Fließtexts
   sitzen. Die rechte Spalte bleibt leer — dort ragt das Panel herein.

   Vorher stand hier `padding-top: 26rem`, um das Panel freizuhalten. Das
   erzeugte links eine grosse leere Fläche; jetzt füllen die Advocates sie. */
@media (min-width: 992px) {    /* LG + XL */
  /* Deutlich weniger Luft nach oben als in den Sektionen weiter unten: Hier
     grenzt die Sektion nicht an einen fremden Block, sondern setzt den Hero
     fort — Fließtext links oben, Advocates links darunter, dazwischen das
     Panel. Der grosse Sektionsabstand liess das auseinanderfallen. */
  .cf-adv { padding-top: 2rem; }

  /* Im Hero-Text folgt in dieser Variante nichts mehr auf den Fliesstext
     (der Hinweis steht jetzt unter dem Knopf im Panel). Sein Aussenrand
     vergroesserte den Abstand zur Ueberschrift ohne Zweck. */
  #cf-panel-2026 .cf-lead { margin-bottom: 0; }

  .cf-adv__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    /* Nur SPALTEN-Abstand: `gap` würde auch zwischen Überschrift, Hinweis und
       Kartenreihe wirken und die drei weit auseinanderziehen. Deren Abstände
       kommen aus ihren eigenen Rändern. */
    column-gap: clamp(3rem, 5vw, 6rem);
    row-gap: 0;
    align-content: start;
  }

  /* Alle Inhalte in die linke Spalte. Trifft keine Pseudo-Elemente. */
  .cf-adv__inner > * { grid-column: 1; }

  /* Hält die Sektion mindestens so hoch wie der Teil des Panels, der von oben
     hereinragt (halbe Panelhöhe) — sonst schöbe sich das Panel in die nächste
     Sektion.

     Bewusst als min-height am Raster selbst und NICHT als aufspannendes
     Pseudo-Element in Spalte 2: Ein Rasterelement über `grid-row: 1 / -1` mit
     Mindesthöhe verteilt diese Höhe auf alle Zeilen und riss dadurch eine
     Lücke zwischen Überschrift, Hinweis und Karten. Mit `align-content: start`
     bleiben die Zeilen jetzt eng, und der Container wird nur unten höher. */
  .cf-adv__inner { min-height: 21rem; }

}

.cf-amb__titel {
  /* Zwischenüberschrift der Sektion, nicht mehr ein kleines Label:
     gleiche Anmutung wie die Überschrift des Referenzprojekts. */
  font-size: clamp(2.2rem, 2.8vw, 2.8rem);
  line-height: 1.3;
  font-weight: 700;
  color: var(--cf-petrol);
  letter-spacing: normal;
  text-transform: none;
  margin: 0 0 2.5rem;
}

.cf-amb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2.4rem clamp(2.5rem, 4vw, 4.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Foto links, daneben die Textspalte: Name, Rolle und darunter das Zitat —
   alles auf derselben Fluchtlinie. */
.cf-amb__item {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  text-align: left;
  max-width: 30rem;
}

.cf-amb__foto {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  object-fit: cover;
  background: #eef3f5;
  flex: 0 0 auto;
}

.cf-amb__text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.cf-amb__name {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cf-dark);
  white-space: nowrap;
}

.cf-amb__rolle {
  font-size: 1.4rem;
  line-height: 1.35;
  color: var(--cf-ink);
  opacity: .75;
}

/* Unbefüllter Eintrag gedämpft, damit die Lücke sofort auffällt. */
.cf-amb__zitat {
  /* Bricks gibt jedem blockquote Rahmen und Einzug — hier zurücksetzen. */
  margin: .6rem 0 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.55;
  color: var(--cf-ink);
  opacity: .85;
  quotes: "\201E" "\201C";
}

.cf-amb__zitat::before { content: open-quote; }
.cf-amb__zitat::after  { content: close-quote; }

.cf-amb__zitat--leer { font-style: italic; }

/* Ab LG stehen die Karten in der schmaleren linken Spalte neben dem Panel.
   Foto-links + Text-rechts liesse dem Text dort nur ~12rem — deshalb Foto
   oben, Text mittig darunter. Nebeneinander bleiben die drei.

   Dieser Block MUSS hinter den Grundregeln stehen: Er hat dieselbe
   Spezifitaet, und bei Gleichstand gewinnt die spaetere Regel. Weiter oben
   (im Raster-Block der Sektion) wurde er von `.cf-amb__item` ueberschrieben —
   die Fotos standen dann links, die Namen mittig, also 15 px daneben. */
@media (min-width: 992px) {    /* LG + XL */
  .cf-amb {
    flex-wrap: nowrap;
    gap: clamp(1.6rem, 2.5vw, 3rem);
  }

  .cf-amb__item {
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    max-width: none;
  }

  .cf-amb__text { align-items: center; }
}

.cf-amb__item--leer { opacity: .55; }
.cf-amb__item--leer .cf-amb__name { font-style: italic; font-weight: 400; }

.cf-amb__todo {
  font-size: 1.5rem !important;
  line-height: 1.6;
  color: var(--cf-ink);
  margin: -1rem auto 2.5rem !important;
  max-width: 60ch;
}

.cf-amb__todo code {
  font-size: .92em;
  background: #eef3f5;
  padding: .1em .4em;
  border-radius: .3rem;
}

/* CTA im Kampagnen-Panel: volle Breite direkt unter dem Fehlbetrag. */
.cf-panel__cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 2.4rem;
  text-align: center;
}

/* Steuerhinweis am Fuß des Containers: klein, kursiv, zurückgenommen. */
/* Traegt seit 13.08.2026 beide Saetze (Abwicklung + Absetzbarkeit), die vorher
   als .cf-note in der Textspalte links standen. Der zweite Satz stand dort
   fett — das bleibt, damit die rechtlich relevante Aussage nicht in der
   kursiven Fussnote untergeht. */
.cf-panel__legal {
  margin: 1.4rem 0 0;
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  color: var(--cf-ink);
  opacity: .7;
}

.cf-panel__legal strong { font-weight: 700; font-style: normal; opacity: 1; }


/* `hidden` durchsetzen — sonst zeigt die Zeile ein leeres Trennzeichen. */
[data-cf-supporters-wrap][hidden] { display: none; }

/* ------------------------------------------- Bildschirm-Anzeige (Info) --- */
/* Prototyp-Werkzeug: zeigt Breite, Höhe und das aktive Größenband.
   Gehört wie der Umschalter nicht auf die Live-Seite. */

.cf-vp {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin: 0 0 .2rem;
  padding: 0 .3rem;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--cf-ink);
}

.cf-vp__kopfzeile {
  display: flex;
  align-items: baseline;
  gap: .6rem;
}

.cf-vp__mass {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* Das aktive Band gross und benennbar — das ist der Zweck der Anzeige:
   im Gespräch auf „MD" zeigen können, statt „so um die 900 Pixel". */
.cf-vp__band {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--cf-petrol);
}

.cf-vp__reihe {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
}

.cf-vp__chip {
  padding: .1rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--cf-line);
  background: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  opacity: .45;
}

.cf-vp__chip--aktiv {
  background: var(--cf-petrol);
  border-color: var(--cf-petrol);
  color: #fff;
  opacity: 1;
}

.cf-vp__bereich {
  font-variant-numeric: tabular-nums;
  opacity: .55;
}

/* Git-Zweig in derselben Pille. Wie die Groessenanzeige nur lokal — hero.js
   entfernt die ganze Pille ausserhalb von localhost. */
.cf-vp__git {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  color: var(--cf-petrol);
  opacity: .8;
}

/* Gekuerzte Zweignamen sind anklickbar-wirkend zu machen waere falsch — sie
   tun nichts. Die gepunktete Linie signalisiert nur: hier steht mehr. */
.cf-vp__git--gekuerzt {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

/* Ab MD loest sich die Anzeige aus der Entwurfsleiste und heftet sich in die
   rechte untere Ecke: In der Leiste am Seitenanfang ist sie beim Verstellen der
   Fensterbreite sofort aus dem Bild gescrollt — also genau dann unsichtbar,
   wenn man sie braucht.

   Kein Widerspruch zur Regel „kein fixiertes Bedienelement auf schmalen
   Viewports": Die Regel schuetzt vor verdeckter *Bedienung*. Diese Anzeige ist
   nicht bedienbar — `pointer-events: none` laesst jeden Tipp und jeden Klick
   durch sie hindurch. Der Umschalter daneben bleibt statisch.

   MUSS hinter der Grundregel stehen: `gap` und `padding` kommen in beiden vor.
   Weiter oben (im Umschalter-Block) wurden sie ueberschrieben — die Anzeige
   hatte 4 px statt 3 px Abstand und 0/3 px statt 7/9 px Innenabstand. */
@media (max-width: 991px) {    /* XS + SM + MD */
  .cf-vp {
    position: fixed;
    right: .8rem;
    bottom: .8rem;
    z-index: 10000;
    pointer-events: none;
    gap: .3rem;
    padding: .7rem .9rem;
    background: rgba(255, 255, 255, .93);
    border: 1px solid var(--cf-line);
    border-radius: 1.2rem;
    box-shadow: 0 .4rem 1.6rem rgba(15, 40, 50, .18);
  }
}

/* --------------------------------------------------------- Sprung-Knopf ---
   Bleibt beim Scrollen sichtbar (position: fixed) und springt direkt zum
   Spendenformular. RECHTS positioniert, nicht links: Die Vorschau-Auswahl
   "2026/2027" (.cf-switch, Prototyp-Werkzeug, noch live -- "vor dem Launch
   entfernen") liegt fest unten LINKS mit sehr hohem z-index und hat den
   Sprung-Knopf dort verdeckt (Klicks landeten auf ihr statt auf dem Knopf).
   Auf der rechten Seite kollidiert er nur mit der lokalen Bildschirm-Anzeige
   (.cf-vp, nur auf localhost, wandert unter 992 px dorthin) -- ein rein
   lokales Vorschau-Problem, kein Problem auf der echten Seite.

   Ohne JavaScript bleibt er dauerhaft sichtbar -- ein einfacher Sprunglink
   ist auch dann nuetzlich, anders als der Klick-zum-Laden-Knopf oben im
   Formular, der ohne Skript nichts tun koennte. hero.js blendet ihn zu
   Beginn aus und zeigt ihn erst nach dem ersten Stueck Scrollen; verschwindet
   wieder, sobald das Formular selbst oder die Fusszeile im Blick sind. */
.cf-jump {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 1.8rem;
  border-radius: 999px;
  background: var(--cf-petrol);
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  box-shadow: 0 .4rem 1.6rem rgba(15, 40, 50, .32);
  transition: transform .2s ease, background-color .2s ease;
}
.cf-jump:hover {
  background: var(--cf-dark);
  transform: translateY(-.2rem);
}
.cf-jump:focus-visible {
  outline: .3rem solid var(--cf-dark);
  outline-offset: .3rem;
  background: var(--cf-dark);
}
.cf-jump[hidden] {
  display: none;
}
.cf-jump__pfeil {
  font-size: 1.2em;
}

/* Wer keine Animationen sehen will, bekommt keine Verschiebe-Animation beim
   Hover -- die Farbaenderung bleibt, weil sie keine Bewegung ist. */
@media (prefers-reduced-motion: reduce) {
  .cf-jump {
    transition: background-color .2s ease;
  }
  .cf-jump:hover {
    transform: none;
  }
}

/* Unter 992 px wandert die lokale Bildschirm-Anzeige (.cf-vp) selbst nach
   rechts unten (siehe oben) -- ohne diesen Abstand ueberlappen sich beide
   beim Testen auf schmalen Breiten. Nur lokal sichtbar, aber verwirrend. */
@media (max-width: 991px) {
  .cf-jump {
    bottom: 10rem;
  }
}

@media (max-width: 478px) {
  .cf-jump {
    right: 1rem;
    padding: .9rem 1.4rem;
    font-size: 1.4rem;
  }
}