/* =======================================================================
   Grundgestaltung der oeffentlichen Seiten (Startseite und Projektseiten).

   WARUM HIER UND NICHT IN EINER VORLAGE
   Bis 2026-09-22 stand dieses Stylesheet in
   templates/custom/template_pages/page_frontpage.html. Das war eine
   Fehlkonstruktion: ob diese Vorlage ueberhaupt geladen wird, haengt an einem
   Eintrag in core_x_pages_templates — und der fehlte. Die Startseite rendert
   dann vollkommen ungestaltet, und dem Modul fehlt jede Moeglichkeit, das zu
   bemerken oder zu beheben.

   Das Modul bringt seine Grundgestaltung deshalb selbst mit und laedt sie selbst
   (fv_frontpage::service_deploy_base_style). Damit ist es vollstaendig, wo immer
   es eingebunden wird.

   Projektspezifische Abweichungen gehoeren weiterhin nach templates/custom —
   page_frontpage.html steht dafuer als Vorlage bereit und wird, sofern der Seite
   zugeordnet, NACH dieser Datei ausgegeben und gewinnt damit.

   Die gepflegten Stilangaben (Seitenstil und Stil je Abschnitt) kommen als
   eigener Block noch danach.
   ======================================================================= */

/* =======================================================================
   GRUNDLAGEN
   ======================================================================= */
.fv-landing {
  --fv-bg: #f4f7f5;
  --fv-bg-soft: #f8fbf9;
  --fv-surface: rgba(255, 255, 255, 0.78);
  --fv-surface-strong: rgba(255, 255, 255, 0.9);
  --fv-border: rgba(20, 44, 33, 0.08);
  --fv-text: #18231d;
  --fv-muted: #607065;
  --fv-primary: #1b6b50;
  --fv-primary-strong: #14543f;
  --fv-accent: #d9b36a;
  --fv-shadow: 0 18px 50px rgba(17, 38, 28, 0.10);
  --fv-shadow-soft: 0 10px 26px rgba(17, 38, 28, 0.07);
  --fv-radius: 24px;
  --fv-radius-lg: 32px;

  /* Diese vier sind die Stellschrauben, die der Seitenstil im Editor überschreibt.
     Was hier steht, ist der Auslieferungszustand — ohne gepflegten Stil bleibt es
     genau dabei. --fv-hero-mid folgt bewusst der Hauptfarbe: wer sie ändert,
     bekommt einen Kopfbereich, der dazu passt, ohne ihn einzeln nachziehen zu müssen. */
  --fv-hero-from: #14392b;
  --fv-hero-mid: var(--fv-primary);
  --fv-hero-to: #2d8d67;
  --fv-hero-text: #ffffff;
  --fv-surface-blur: 14px;
  --fv-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  color: var(--fv-text);
  background:
    radial-gradient(circle at top left, rgba(27,107,80,0.08), transparent 24%),
    radial-gradient(circle at top right, rgba(217,179,106,0.10), transparent 28%),
    linear-gradient(180deg, #fbfcfb 0%, var(--fv-bg) 100%);
  position: relative;
  overflow: hidden;
  font-family: var(--fv-font);
}

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

.fv-landing a {
  text-decoration: none;
}

.fv-wrap {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
}

.fv-section {
  padding: 5rem 0;
  position: relative;
  z-index: 1;
}

/* Abstand nach oben, je Abschnitt einstellbar (block_spacing). */
.fv-section.fv-spacing-1 { padding-top: 0; }
.fv-section.fv-spacing-2 { padding-top: 7rem; }

/* =======================================================================
   KOPFBEREICH
   ======================================================================= */
.fv-hero {
  padding: 5.5rem 0 4rem;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.14), transparent 16%),
    radial-gradient(circle at 88% 10%, rgba(217,179,106,0.20), transparent 18%),
    linear-gradient(135deg, var(--fv-hero-from) 0%, var(--fv-hero-mid) 58%, var(--fv-hero-to) 100%);
  color: var(--fv-hero-text);
}

.fv-hero::before,
.fv-hero::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .35;
  pointer-events: none;
}

.fv-hero::before {
  width: 320px;
  height: 320px;
  background: rgba(255,255,255,.18);
  top: -110px;
  right: -80px;
}

.fv-hero::after {
  width: 260px;
  height: 260px;
  background: rgba(217,179,106,.24);
  bottom: -80px;
  left: -60px;
}

.fv-grid {
  display: grid;
  gap: 2rem;
}

.fv-hero-grid {
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
}

.fv-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  font-size: .95rem;
  margin-bottom: 1.25rem;
}

.fv-title {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 800;
  margin: 0 0 1.25rem;
  max-width: 12ch;
}

.fv-lead {
  font-size: 1.16rem;
  line-height: 1.7;
  color: rgba(255,255,255,.90);
  max-width: 56rem;
  margin: 0 0 1.75rem;
}

.fv-lead p { margin: 0 0 .8rem; }
.fv-lead p:last-child { margin-bottom: 0; }

.fv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 1.5rem;
}

.fv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .9rem 1.35rem;
  border-radius: 14px;
  font-weight: 700;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  border: 1px solid transparent;
}

.fv-btn:hover {
  transform: translateY(-2px);
}

.fv-btn:focus-visible {
  outline: 3px solid var(--fv-accent);
  outline-offset: 2px;
}

.fv-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--fv-primary), #2b8a64);
  box-shadow: 0 14px 30px rgba(27,107,80,.25);
}

.fv-btn-primary:hover {
  color: #fff;
  box-shadow: 0 18px 34px rgba(27,107,80,.28);
}

.fv-btn-light {
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fv-btn-light:hover {
  color: #fff;
  background: rgba(255,255,255,.16);
}

/* Nebenaktion auf hellem Grund — z. B. "Zurueck zur Startseite". */
.fv-btn-ghost {
  color: var(--fv-primary-strong);
  background: rgba(27,107,80,.07);
  border-color: rgba(27,107,80,.16);
}

.fv-btn-ghost:hover {
  color: var(--fv-primary-strong);
  background: rgba(27,107,80,.12);
}

.fv-hero-card {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px;
  padding: 1.5rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0,0,0,.14);
  position: relative;
  overflow: hidden;
}

.fv-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -40px -40px auto;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(217,179,106,.22), transparent 70%);
  pointer-events: none;
}

.fv-hero-card-title {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  font-weight: 800;
}

.fv-logo-wrap {
  width: 110px;
  height: 110px;
  border-radius: 24px;
  background: rgba(255,255,255,.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.fv-logo-wrap img {
  max-width: 78px;
  height: auto;
  display: block;
}

.fv-mini-list {
  display: grid;
  gap: .95rem;
  margin-top: 1rem;
}

.fv-mini-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: .85rem;
  align-items: start;
  padding-top: .95rem;
  border-top: 1px solid rgba(255,255,255,.14);
}

.fv-mini-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.fv-mini-item strong {
  display: block;
  margin-bottom: .15rem;
}

.fv-mini-item span {
  color: rgba(255,255,255,.74);
  font-size: .96rem;
  line-height: 1.55;
}

.fv-mini-item span p { margin: 0; }

/* =======================================================================
   SPRUNGMARKEN
   ======================================================================= */
.fv-quicknav {
  margin-top: -28px;
  position: relative;
  z-index: 3;
}

.fv-quicknav-box {
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 22px;
  box-shadow: var(--fv-shadow);
  padding: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

.fv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .7rem 1rem;
  border-radius: 999px;
  color: var(--fv-text);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(20,44,33,.08);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  font-weight: 600;
}

.fv-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(27,107,80,.22);
  box-shadow: var(--fv-shadow-soft);
  color: var(--fv-primary-strong);
}

/* =======================================================================
   TEXTBAUSTEINE
   ======================================================================= */
.fv-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  font-weight: 800;
  color: var(--fv-primary);
  margin-bottom: .9rem;
}

.fv-section-title {
  font-size: clamp(1.9rem, 3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 1rem;
}

.fv-section-text {
  color: var(--fv-muted);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 52rem;
  margin: 0;
}

.fv-section-text p { margin: 0 0 .9rem; }
.fv-section-text p:last-child { margin-bottom: 0; }

/* =======================================================================
   KARTEN
   ======================================================================= */
.fv-cards {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.25rem;
}

.fv-cards-1 { grid-template-columns: 1fr; }
.fv-cards-2 { grid-template-columns: repeat(2, 1fr); }
.fv-cards-3 { grid-template-columns: repeat(3, 1fr); }
.fv-cards-4 { grid-template-columns: repeat(4, 1fr); }

.fv-card {
  background: var(--fv-surface);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--fv-radius);
  padding: 1.6rem;
  -webkit-backdrop-filter: blur(var(--fv-surface-blur));
  backdrop-filter: blur(var(--fv-surface-blur));
  box-shadow: var(--fv-shadow-soft);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  position: relative;
  overflow: hidden;
}

.fv-cards .fv-card:hover,
.fv-more .fv-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--fv-shadow);
  border-color: rgba(27,107,80,.14);
}

/* Abschnitt, der als Ganzes in einer Karte steht (block_variant). */
.fv-card-wrap {
  padding: 2rem;
}

.fv-card-spot::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,179,106,.18), transparent 72%);
  pointer-events: none;
}

.fv-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(27,107,80,.12), rgba(217,179,106,.15));
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.fv-card h3 {
  font-size: 1.2rem;
  margin: 0 0 .8rem;
  font-weight: 800;
}

.fv-card p,
.fv-card-text {
  margin: 0;
  color: var(--fv-muted);
  line-height: 1.7;
}

.fv-card-text p { margin: 0 0 .7rem; }
.fv-card-text p:last-child { margin-bottom: 0; }

.fv-highlight {
  background:
    linear-gradient(135deg, rgba(255,255,255,.88), rgba(247,250,248,.82)),
    linear-gradient(135deg, rgba(27,107,80,.05), rgba(217,179,106,.08));
}

/* =======================================================================
   AUFZAEHLUNG, ZITAT, BILD, KONTAKT
   ======================================================================= */
.fv-board-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.fv-board-list li {
  padding: .8rem 0;
  border-bottom: 1px solid rgba(24,35,29,.08);
  color: #233129;
}

.fv-board-list li:last-child {
  border-bottom: 0;
}

.fv-board-list a { color: var(--fv-primary); }
.fv-board-list a:hover { text-decoration: underline; }

.fv-list-note {
  display: block;
  color: var(--fv-muted);
  font-size: .92rem;
  margin-top: .15rem;
}

.fv-list-note p { margin: 0; }

.fv-quote {
  border-left: 4px solid rgba(27,107,80,.20);
  padding-left: 1rem;
  margin: 1.3rem 0 0;
  color: var(--fv-muted);
  line-height: 1.7;
}

.fv-quote p { margin: 0 0 .6rem; }
.fv-quote p:last-child { margin-bottom: 0; }

.fv-figure {
  margin: 1.5rem 0 0;
}

.fv-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fv-radius);
  box-shadow: var(--fv-shadow-soft);
}

.fv-figure figcaption {
  margin-top: .7rem;
  color: var(--fv-muted);
  font-size: .92rem;
}

.fv-figure figcaption p { margin: 0; }

.fv-contact-list {
  display: grid;
  gap: .8rem;
  margin-top: .6rem;
}

.fv-contact-list a {
  color: var(--fv-primary);
}

.fv-contact-list a:hover {
  text-decoration: underline;
}

/* =======================================================================
   FUSSZEILE
   ======================================================================= */
.fv-footer {
  padding: 2rem 0 3rem;
  color: var(--fv-muted);
  font-size: .96rem;
}

.fv-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(24,35,29,.08);
  padding-top: 1.5rem;
}

.fv-footer-row p { margin: 0; }

.fv-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
}

.fv-footer-links a {
  color: inherit;
}

.fv-footer-links a:hover {
  text-decoration: underline;
}

.fv-footer-fine {
  margin-top: .9rem;
  font-size: .86rem;
  opacity: .8;
}

/* =======================================================================
   FOERDERPROJEKTE — TEASER AUF DER STARTSEITE
   ======================================================================= */
.fv-feature {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.2rem;
  align-items: center;
  padding: 2rem;
  margin-top: 2rem;
}

.fv-feature h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  letter-spacing: -.025em;
  font-weight: 800;
  margin: .9rem 0 .7rem;
  line-height: 1.12;
}

.fv-feature h3 a { color: inherit; }
.fv-feature h3 a:hover { color: var(--fv-primary); }

.fv-feature-text {
  margin: 0 0 1.4rem;
  color: var(--fv-muted);
  line-height: 1.7;
}

.fv-feature-text p { margin: 0 0 .7rem; }
.fv-feature-text p:last-child { margin-bottom: 0; }

.fv-feature-bm {
  display: flex;
  justify-content: center;
}

.fv-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.fv-stat-k {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fv-muted);
  font-weight: 700;
  margin-bottom: .2rem;
}

.fv-stat-v {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.fv-stat-v.is-goal {
  color: var(--fv-muted);
  font-weight: 700;
  font-size: 1.3rem;
}

.fv-more {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin-top: 1.4rem;
}

.fv-more-card {
  display: grid;
  grid-template-columns: 1fr 56px;
  gap: 1.2rem;
  align-items: center;
  padding: 1.2rem 1.4rem;
}

.fv-more-card h4 {
  margin: .6rem 0 .5rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.fv-more-card h4 a { color: inherit; }
.fv-more-card h4 a:hover { color: var(--fv-primary); }

.fv-mini-meta {
  font-size: .86rem;
  color: var(--fv-muted);
  font-variant-numeric: tabular-nums;
}

.fv-mini-meta b { color: var(--fv-primary-strong); }

.fv-project-badge {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fv-primary);
  background: rgba(27,107,80,.08);
  padding: .45rem .7rem;
  border-radius: 999px;
}

/* =======================================================================
   SPENDEN-BAROMETER
   Die Saeule fuellt sich von unten nach oben. Jeder verbuchte Eingang ist ein
   eigener Abschnitt; seine Farbe kommt aus dem Modul und richtet sich nach der
   Hoehe auf der Skala — unten rot, oben gruen.
   ======================================================================= */
.fv-bm {
  display: flex;
  justify-content: center;
  gap: .8rem;
}

.fv-bm-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
}

.fv-bm-star {
  width: 54px;
  height: 54px;
  display: block;
}

.fv-bm-mini .fv-bm-star { width: 26px; height: 26px; }
.fv-bm-compact .fv-bm-star { width: 38px; height: 38px; }

.fv-bm-star .core {
  fill: #e9edea;
  stroke: rgba(20,44,33,.16);
  stroke-width: 1.4;
  transition: fill .4s ease;
}

.fv-bm-star.is-reached .core {
  fill: var(--fv-accent);
  stroke: #b8923f;
}

.fv-bm-star.is-reached {
  filter: drop-shadow(0 0 10px rgba(217,179,106,.65));
}

.fv-bm-track {
  position: relative;
  width: 74px;
  height: 380px;
  border-radius: 999px;
  background: #e7ebe8;
  border: 1px solid rgba(20,44,33,.10);
  box-shadow: inset 0 2px 6px rgba(17,38,28,.10);
  overflow: hidden;
}

.fv-bm-compact .fv-bm-track { width: 56px; height: 240px; }
.fv-bm-mini .fv-bm-track { width: 22px; height: 74px; }

.fv-bm-seg {
  position: absolute;
  left: 0;
  right: 0;
  transition: filter .18s ease;
}

.fv-bm-seg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: rgba(255,255,255,.72);
}

.fv-bm-seg:first-of-type::after { display: none; }

.fv-bm-seg:hover { filter: brightness(1.14) saturate(1.1); }

.fv-bm-bulb {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  margin-top: -26px;
  background: radial-gradient(circle at 36% 32%, #d8543c, #ab3323 72%);
  border: 1px solid rgba(20,44,33,.12);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.18);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 2;
}

.fv-bm-compact .fv-bm-bulb {
  width: 66px;
  height: 66px;
  margin-top: -18px;
  font-size: .8rem;
}

.fv-bm-goal {
  font-size: .78rem;
  font-weight: 800;
  color: var(--fv-muted);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

/* Rohr + Skalenbeschriftung. Die Beschriftung liegt absolut IM Rohr-Rahmen, damit
   ihre Marken unabhaengig von Stern und Zielzeile exakt auf der Saeule sitzen. */
.fv-bm-tube {
  position: relative;
}

.fv-bm-ticks {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% + 14px);
  width: 62px;
}

.fv-bm-tick {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  text-align: right;
}

.fv-bm-tick i {
  position: absolute;
  right: -10px;
  bottom: .42em;
  width: 7px;
  height: 1px;
  background: rgba(20,44,33,.22);
  display: block;
}

.fv-bm-tick span {
  font-size: .72rem;
  color: var(--fv-muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Barometer und Legende nebeneinander (Projektseite) */
.fv-bm-card { padding: 1.8rem; }

.fv-bm-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.4rem;
  align-items: start;
}

.fv-bm-legend { display: grid; gap: .1rem; }

.fv-bm-legend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  margin-bottom: .3rem;
  border-bottom: 1px solid rgba(20,44,33,.10);
}

.fv-bm-legend-head h2 {
  margin: 0;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  color: var(--fv-muted);
}

.fv-bm-legend-head em {
  font-style: normal;
  font-size: .82rem;
  color: var(--fv-muted);
  font-variant-numeric: tabular-nums;
}

.fv-bm-row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: .9rem;
  align-items: baseline;
  padding: .62rem .55rem;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease;
}

.fv-bm-row:hover {
  background: rgba(255,255,255,.75);
  border-color: rgba(20,44,33,.08);
}

.fv-bm-row i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: block;
  align-self: center;
}

.fv-bm-row .txt { font-size: .95rem; line-height: 1.45; }

.fv-bm-row .txt small {
  display: block;
  color: var(--fv-muted);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  margin-top: .1rem;
}

.fv-bm-row .txt .detail {
  display: block;
  color: var(--fv-muted);
  font-size: .88rem;
  margin-top: .25rem;
}

.fv-bm-row .txt .detail p { margin: 0; }

.fv-bm-row .val {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: .98rem;
}

.fv-bm-empty {
  margin: .6rem 0 0;
  color: var(--fv-muted);
  line-height: 1.7;
}

/* =======================================================================
   PROJEKTSEITE
   ======================================================================= */
.fv-detail-hero {
  background:
    radial-gradient(circle at 88% 10%, rgba(217,179,106,0.20), transparent 30%),
    linear-gradient(135deg, var(--fv-hero-from) 0%, var(--fv-hero-mid) 58%, var(--fv-hero-to) 100%);
  color: var(--fv-hero-text);
  padding: 3rem 0 2.6rem;
}

.fv-detail-hero .fv-eyebrow { color: rgba(255,255,255,.72); }

.fv-detail-hero h1 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 0 0 .8rem;
  line-height: 1.06;
  max-width: 18ch;
}

.fv-detail-lead {
  margin: 0;
  color: rgba(255,255,255,.88);
  max-width: 54ch;
  line-height: 1.7;
}

.fv-detail-lead p { margin: 0 0 .6rem; }
.fv-detail-lead p:last-child { margin-bottom: 0; }

.fv-crumb {
  font-size: .84rem;
  color: rgba(255,255,255,.66);
  margin-bottom: 1.1rem;
}

.fv-crumb a {
  color: rgba(255,255,255,.82);
  border-bottom: 1px solid rgba(255,255,255,.3);
}

/* align-items: stretch (der Standard) ist hier Absicht: beide Karten sollen
   gleich hoch sein. Zuvor stand hier start — dann wurde jede Karte nur so hoch
   wie ihr Inhalt, und Barometer und Spendenbereich standen unterschiedlich weit
   nach unten. */
.fv-detail-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: stretch;
}

/* Der Spendenbereich ist meist der kürzere von beiden. Damit er in der
   gestreckten Karte nicht oben klebt, verteilt er sich über die Höhe: Überschrift
   und QR oben, der Hinweis zu PayPal unten. */
.fv-qr {
  display: flex;
  flex-direction: column;
}

.fv-qr .fv-pay-alt {
  margin-top: auto;
}

.fv-detail-back { margin: 1.6rem 0 0; }

/* Spenden-QR */
.fv-qr {
  padding: 1.5rem;
  text-align: center;
}

.fv-qr h2 {
  margin: 0 0 .4rem;
  font-size: 1.15rem;
  font-weight: 800;
}

.fv-qr > p {
  margin: 0 0 1.2rem;
  font-size: .9rem;
  color: var(--fv-muted);
  line-height: 1.6;
}

.fv-qr-box {
  width: 192px;
  height: 192px;
  margin: 0 auto 1.3rem;
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(20,44,33,.10);
  box-shadow: var(--fv-shadow-soft);
}

.fv-qr-box img {
  width: 100%;
  height: 100%;
  display: block;
}

.fv-pay {
  text-align: left;
  display: grid;
  gap: .55rem;
  margin: 0 0 1.2rem;
}

.fv-pay-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: .7rem;
  align-items: baseline;
  font-size: .86rem;
}

.fv-pay-row dt {
  color: var(--fv-muted);
  font-weight: 700;
}

.fv-pay-row dd {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  word-break: break-all;
}

.fv-pay-row dd.is-code {
  color: var(--fv-primary-strong);
  font-weight: 700;
  background: rgba(27,107,80,.08);
  border-radius: 5px;
  padding: .1rem .35rem;
}

.fv-purpose-hint {
  font-size: .78rem;
  color: var(--fv-muted);
  line-height: 1.55;
  margin: 0;
  text-align: left;
}

/* Beschreibung und Kennzahlen */
.fv-prose-card {
  margin-top: 1.6rem;
  padding: 1.8rem;
}

.fv-prose { color: var(--fv-muted); line-height: 1.75; }

.fv-prose h2,
.fv-prose h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 1.8rem 0 .6rem;
  color: var(--fv-text);
}

.fv-prose > :first-child { margin-top: 0; }

.fv-prose p { margin: 0 0 .9rem; }

.fv-transparency {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  padding: 1rem 1.2rem;
  margin-top: 1.4rem;
  border-radius: 14px;
  background: rgba(27,107,80,.06);
  border: 1px solid rgba(27,107,80,.12);
  font-size: .86rem;
  color: var(--fv-primary-strong);
  font-variant-numeric: tabular-nums;
}

.fv-transparency b {
  display: block;
  font-size: 1.15rem;
}

/* =======================================================================
   SCHMALE BILDSCHIRME
   ======================================================================= */
@media (max-width: 991.98px) {
  .fv-hero-grid,
  .fv-cards-2,
  .fv-cards-3,
  .fv-cards-4,
  .fv-more,
  .fv-feature,
  .fv-detail-grid {
    grid-template-columns: 1fr;
  }

  .fv-hero {
    padding: 4.5rem 0 3.5rem;
  }

  .fv-title {
    max-width: none;
  }

  .fv-bm-layout {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    justify-items: center;
  }

  .fv-bm-legend { width: 100%; }
}

@media (max-width: 575.98px) {
  .fv-wrap {
    width: min(100% - 1.25rem, 1200px);
  }

  .fv-section {
    padding: 4rem 0;
  }

  .fv-quicknav-box {
    justify-content: stretch;
  }

  .fv-chip {
    width: 100%;
  }

  .fv-bm-ticks { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-landing *,
  .fv-landing *::before,
  .fv-landing *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =======================================================================
   BREITE DES INHALTS

   .fv-wrap ist die eigene Breitenfuehrung der Seite. Wer stattdessen den
   Standard-Container von Bootstrap moechte, bekommt dessen Klasse zusaetzlich
   gesetzt — dann muss die eigene Breitenangabe weichen, sonst gewinnt sie
   gegen die Breakpoints von Bootstrap.
   ======================================================================= */
.fv-wrap.container,
.fv-wrap.container-fluid,
.fv-wrap.container-sm,
.fv-wrap.container-md,
.fv-wrap.container-lg,
.fv-wrap.container-xl,
.fv-wrap.container-xxl {
  width: auto;
}

/* Schmale Lesebreite — fuer reine Textabschnitte angenehmer als die volle Seite. */
.fv-wrap.fv-wrap-narrow {
  width: min(820px, calc(100% - 2rem));
}

/* PayPal als zweiter Weg unter der Ueberweisung. Abgesetzt, weil nur die
   Ueberweisung den Spendencode traegt. */
.fv-pay-alt {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(20, 44, 33, .10);
  text-align: left;
}

.fv-pay-alt .fv-btn {
  width: 100%;
  margin-bottom: .6rem;
}

/* =======================================================================
   SPIELELEMENTE

   Vier Stufen, freigeschaltet durch den Spendenstand. Alles hier ist reine
   Darstellung — der Stand kommt aus verbuchten Eingaengen und laesst sich
   nicht "erspielen".

   GRUNDSATZ: Ohne JavaScript bleibt alles sichtbar und lesbar. Wer Bewegung
   abbestellt hat (prefers-reduced-motion), bekommt dieselben Inhalte ohne
   Animation — die Stufen sind dann an Farbe und Abzeichen erkennbar, nicht
   an Bewegung.
   ======================================================================= */

/* ---------------------------------------------------------------- Abzeichen */
.fv-award {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  vertical-align: middle;
  margin-left: .6rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.fv-award.is-bronze { background: rgba(176, 118, 68, .16); color: #7a4f24; border-color: rgba(176, 118, 68, .35); }
.fv-award.is-silber { background: rgba(140, 150, 158, .18); color: #4d5760; border-color: rgba(140, 150, 158, .38); }
.fv-award.is-gold   { background: rgba(217, 179, 106, .22); color: #7a5c14; border-color: rgba(217, 179, 106, .45); }
.fv-award.is-ziel   { background: rgba(27, 107, 80, .14);   color: var(--fv-primary-strong); border-color: rgba(27, 107, 80, .34); }

/* Im dunklen Kopfbereich braucht das Abzeichen eigene Farben. */
.fv-detail-hero .fv-award {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

/* ---------------------------------------------------------------- Stufenleiter */
.fv-ladder {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(20, 44, 33, .10);
  display: grid;
  gap: .35rem;
}

.fv-ladder-step {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto auto;
  gap: .7rem;
  align-items: baseline;
  padding: .4rem .5rem;
  border-radius: 8px;
  font-size: .88rem;
  color: var(--fv-muted);
  opacity: .55;
}

.fv-ladder-step.is-reached {
  opacity: 1;
  background: rgba(27, 107, 80, .06);
  color: var(--fv-text);
}

.fv-ladder-icon { font-size: 1rem; filter: grayscale(1); }
.fv-ladder-step.is-reached .fv-ladder-icon { filter: none; }
.fv-ladder-label { font-weight: 700; }
.fv-ladder-at,
.fv-ladder-state { font-variant-numeric: tabular-nums; font-size: .8rem; }
.fv-ladder-step.is-reached .fv-ladder-state { color: var(--fv-primary); font-weight: 700; }

/* ---------------------------------------------------------------- Stufe 1: Leuchten */
.fv-game.is-fx-glow .fv-bm-track,
.fv-game.is-fx-flow .fv-bm-track,
.fv-game.is-fx-motes .fv-bm-track,
.fv-game.is-fx-cheer .fv-bm-track {
  box-shadow: inset 0 2px 6px rgba(17, 38, 28, .10), 0 0 22px rgba(27, 107, 80, .30);
}

/* ---------------------------------------------------------------- Stufe 2: bewegter Verlauf */
.fv-game.is-fx-flow,
.fv-game.is-fx-motes,
.fv-game.is-fx-cheer {
  background-image: linear-gradient(120deg,
    rgba(27, 107, 80, .06) 0%,
    rgba(217, 179, 106, .10) 45%,
    rgba(27, 107, 80, .06) 100%);
  background-size: 220% 100%;
  animation: fv-flow 14s linear infinite;
}

@keyframes fv-flow {
  to { background-position: 220% 0; }
}

/* ---------------------------------------------------------------- Stufe 3: Lichtpunkte */
.fv-game.is-fx-motes::after,
.fv-game.is-fx-cheer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    radial-gradient(2px 2px at 18% 30%, rgba(217, 179, 106, .75), transparent 60%),
    radial-gradient(2px 2px at 72% 18%, rgba(27, 107, 80, .55), transparent 60%),
    radial-gradient(3px 3px at 46% 78%, rgba(217, 179, 106, .55), transparent 60%),
    radial-gradient(2px 2px at 88% 62%, rgba(27, 107, 80, .45), transparent 60%);
  animation: fv-motes 9s ease-in-out infinite alternate;
}

.fv-game { position: relative; }

@keyframes fv-motes {
  from { opacity: .35; transform: translateY(4px); }
  to   { opacity: .9;  transform: translateY(-6px); }
}

/* ---------------------------------------------------------------- Begruessung */
.fv-game-note {
  margin: 0 0 1.1rem;
  padding: .8rem 1rem;
  border-radius: 12px;
  background: rgba(27, 107, 80, .10);
  border: 1px solid rgba(27, 107, 80, .22);
  color: var(--fv-primary-strong);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fv-game-note[hidden] { display: none; }

/* ---------------------------------------------------------------- Dankeswand */
.fv-wall-card { margin-top: 1.6rem; padding: 1.6rem; }

.fv-wall-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.fv-wall-head h2 {
  margin: 0;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  color: var(--fv-muted);
}

.fv-wall-head em {
  font-style: normal;
  font-size: .82rem;
  color: var(--fv-muted);
  font-variant-numeric: tabular-nums;
}

.fv-wall {
  position: relative;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 120%, rgba(27, 107, 80, .22), transparent 62%),
    linear-gradient(180deg, #16243a 0%, #1d3350 60%, #24506a 100%);
}

.fv-wall-star {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--fv-accent) 55%, transparent 72%);
  transform: translate(-50%, -50%);
  animation: fv-twinkle 4s ease-in-out infinite alternate;
  cursor: help;
}

@keyframes fv-twinkle {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------------- Konfetti */
.fv-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1080;
}

/* ---------------------------------------------------------------- Ruhe-Modus
   Wer Bewegung abbestellt hat, bekommt die Inhalte ohne jede Animation. Die
   Stufen bleiben an Farbe, Leuchten und Abzeichen erkennbar. */
@media (prefers-reduced-motion: reduce) {
  .fv-game.is-fx-flow,
  .fv-game.is-fx-motes,
  .fv-game.is-fx-cheer,
  .fv-game.is-fx-motes::after,
  .fv-game.is-fx-cheer::after,
  .fv-wall-star {
    animation: none !important;
  }

  .fv-game.is-fx-motes::after,
  .fv-game.is-fx-cheer::after { opacity: .7; transform: none; }
  .fv-wall-star { opacity: .95; }
  .fv-confetti { display: none; }
}

/* =======================================================================
   MITLAUFENDE LEISTE — aktuelles Förderprojekt

   Steht im Markup innerhalb des Projekt-Abschnitts, wird aber an den rechten
   Seitenrand geheftet und bleibt beim Scrollen stehen. Reduziert auf das
   Wesentliche: Name und Barometer. Der ganze Block ist ein Link.

   position: fixed und nicht sticky — sticky bräuchte eine eigene Spalte über
   die volle Seitenhöhe, die diese Seite nicht hat.
   ======================================================================= */
.fv-rail {
  display: none;   /* wird erst ab genug Platz eingeblendet, siehe unten */
}

@media (min-width: 1280px) {

  .fv-rail {
    display: block;
    position: fixed;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    width: 168px;
  }

  .fv-rail-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    padding: 1rem .85rem 1.1rem;
    border-radius: 20px;
    background: var(--fv-surface-strong);
    border: 1px solid rgba(20, 44, 33, .10);
    box-shadow: var(--fv-shadow);
    -webkit-backdrop-filter: blur(var(--fv-surface-blur));
    backdrop-filter: blur(var(--fv-surface-blur));
    color: var(--fv-text);
    text-align: center;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }

  .fv-rail-link:hover,
  .fv-rail-link:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 24px 54px rgba(17, 38, 28, .16);
    border-color: rgba(27, 107, 80, .26);
    color: var(--fv-text);
  }

  .fv-rail-link:focus-visible {
    outline: 3px solid var(--fv-accent);
    outline-offset: 3px;
  }

  .fv-rail-name {
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-wrap: balance;
  }

  .fv-rail-more {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fv-primary);
  }

  /* Das Barometer kommt in der kompakten Größe und wird hier noch etwas
     schlanker — in einer 168 px breiten Leiste ist die volle Kugel zu wuchtig. */
  .fv-rail .fv-bm-track { width: 44px; height: 190px; }
  .fv-rail .fv-bm-bulb  { width: 52px; height: 52px; margin-top: -14px; font-size: .74rem; }
  .fv-rail .fv-bm-star  { width: 30px; height: 30px; }
  .fv-rail .fv-bm-goal  { font-size: .68rem; }
}

/* Sehr hohe Fenster brauchen den Ausgleich nicht, sehr flache schon: lieber
   oben andocken als über den Rand hinauslaufen. */
@media (min-width: 1280px) and (max-height: 640px) {
  .fv-rail {
    top: 5rem;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-rail-link { transition: none; }
}

/* =======================================================================
   RESTZEIT BIS ZUM ZIELDATUM

   Die Einheit wird gröber oder feiner, je nach Entfernung — Monate, Wochen,
   Tage, Stunden, Minuten. Die Dringlichkeit steckt in der Farbe, nicht in
   Bewegung: ein blinkender Countdown auf einer Spendenseite drängt, und das
   ist bei einem Schulförderverein der falsche Ton.
   ======================================================================= */
.fv-countdown {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(20, 44, 33, .07);
  color: var(--fv-muted);
  border: 1px solid rgba(20, 44, 33, .10);
}

.fv-countdown-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: .7;
  flex: 0 0 auto;
}

/* Letzte Woche */
.fv-countdown.is-soon {
  background: rgba(217, 179, 106, .20);
  border-color: rgba(184, 146, 63, .35);
  color: #7a5c14;
}

/* Letzter Tag */
.fv-countdown.is-urgent {
  background: rgba(178, 58, 40, .12);
  border-color: rgba(178, 58, 40, .30);
  color: #8f2d20;
}

/* Abgelaufen bzw. Ziel erreicht — beides ohne Druck. */
.fv-countdown.is-over {
  background: rgba(20, 44, 33, .06);
  color: var(--fv-muted);
}

.fv-countdown.is-done {
  background: rgba(27, 107, 80, .12);
  border-color: rgba(27, 107, 80, .28);
  color: var(--fv-primary-strong);
}

/* Kachel und Leiste: kleiner, ohne Punkt. */
.fv-countdown.is-small {
  margin: .5rem 0 0;
  padding: .2rem .55rem;
  font-size: .74rem;
}

/* Im dunklen Kopfbereich der Projektseite eigene Farben. */
.fv-detail-hero .fv-countdown {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .26);
  color: #fff;
}

.fv-detail-hero .fv-countdown.is-soon   { background: rgba(217, 179, 106, .32); }
.fv-detail-hero .fv-countdown.is-urgent { background: rgba(200, 69, 47, .42); }