/* =============================================================================
 * Jahresbericht-Look
 *
 * Legt die Gestaltung des Onepagers jahresbericht25.jmmos.app über die
 * Spendenseite, damit der Sprung vom Bericht ins Formular nicht wie ein
 * Seitenwechsel wirkt. Lädt NACH redesign.css und überschreibt nur Farbe,
 * Schrift und Rhythmus — Struktur, Markup und Formularlogik bleiben unberührt.
 *
 * Warum eine eigene Datei und kein Suchen-und-Ersetzen in redesign.css:
 * spenden1, spenden2 und main liegen im selben Repo. Ein Layer ist auf diesen
 * Branch begrenzt, lässt sich mit einer Zeile in default.php wieder abschalten
 * und macht in `git diff` sichtbar, was der Look ausmacht.
 *
 * Zwei Regeln aus dem Bericht, die hier alles erklären:
 *   1. Genau vier Farben. Abstufungen laufen über Deckkraft, nicht über
 *      zusätzliche Töne — deshalb unten überall rgba(…) auf denselben Werten.
 *   2. Genau zwei Schriften. Playfair Display fett-kursiv für alles Große
 *      (im Heft Novantique Serif), Interstate für alles andere.
 * ========================================================================== */

:root {
  --jb-dunkelblau: #002f49;
  --jb-creme:      #e5ddd2;   /* Schrift auf Dunkelblau */
  --jb-beige:      #eae3da;   /* heller Bandgrund */
  --jb-hellblau:   #7fa8c5;   /* Auszeichnungswort, aktive Länder */

  /* Ränder und Nebentexte: derselbe Ton, nur durchscheinend. */
  --jb-linie-hell:   rgba(0, 47, 73, 0.14);
  --jb-linie-kraeftig: rgba(0, 47, 73, 0.3);
  --jb-gedaempft:    rgba(0, 47, 73, 0.62);
  --jb-linie-dunkel: rgba(229, 221, 210, 0.15);

  --jb-display: "Playfair Display", Georgia, serif;
  --jb-body: "interstate", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Segoe UI", sans-serif;
}

/* ----------------------------------------------------------------- *
 * Bänder — hell (Beige) und dunkel (Dunkelblau)
 * ----------------------------------------------------------------- */

body.index .background,
.jmm-bg,
.jmm-projekte,
.jmm-bubble-map-wrap,
.jmm-gallery,
#jmm-bubble-map svg {
  background: var(--jb-beige) !important;
}

.jmm-impact,
body.index .faq,
section#faq.faq {
  background: var(--jb-dunkelblau) !important;
}

.jmm-spenden,
.jmm-projekte {
  color: var(--jb-dunkelblau);
}

/* ----------------------------------------------------------------- *
 * Schrift
 * ----------------------------------------------------------------- */

/* Die große Kursive des Berichts. Ersetzt falcon-script an allen drei
 * Stellen (Hero-Headline, Wirkungs- und Projekte-Überschrift). `line-height`
 * und `letter-spacing` sind die Werte des Onepagers — Playfair läuft bei
 * großen Graden sonst zu luftig. */
.jmm-headline,
.jmm-h2,
.jmm-impact .jmm-h2 em,
.jmm-projekte-head .jmm-h2 em {
  font-family: var(--jb-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  text-wrap: balance;
}

.jmm-headline {
  color: var(--jb-dunkelblau);
  line-height: 1.02;
}
@media (min-width: 768px) {
  .jmm-headline {
    line-height: 0.92;
  }
}
.jmm-headline em {
  color: var(--jb-dunkelblau);
  font-style: italic;
  font-weight: 700;
}

/* Die Abschnittsüberschriften bestehen aus zwei Teilen: `span` trägt den
 * ruhigen Anfang, `em` das hervorgehobene Wort. Im Bericht laufen beide in
 * derselben Kursiven, nur die Farbe trennt sie — der Größensprung von
 * 2.6em aus dem Skript-Satz muss deshalb weg. */
.jmm-h2 {
  line-height: 1.04 !important;
}
.jmm-impact .jmm-h2 em,
.jmm-projekte-head .jmm-h2 em {
  font-size: 1em !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  margin-right: 0 !important;
  color: var(--jb-hellblau) !important;
}
.jmm-impact .jmm-h2,
.jmm-impact .jmm-h2 span {
  color: var(--jb-creme) !important;
  font-weight: 700 !important;
}
.jmm-projekte-head .jmm-h2,
.jmm-projekte-head .jmm-h2 span {
  color: var(--jb-dunkelblau) !important;
  font-weight: 700 !important;
}

/* Versal-Zwischenzeilen (im Bericht `.versalie`): Interstate fett, gesperrt. */
.jmm-eyebrow,
.jmm-stat-label,
.jmm-stat-cap {
  font-family: var(--jb-body) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em !important;
}
.jmm-eyebrow {
  color: var(--jb-gedaempft) !important;
}
.jmm-impact .jmm-eyebrow {
  color: rgba(229, 221, 210, 0.7) !important;
}
.jmm-projekte-head .jmm-eyebrow {
  color: var(--jb-gedaempft) !important;
}

.jmm-sub,
.jmm-projekte-sub {
  font-family: var(--jb-body);
  color: var(--jb-gedaempft) !important;
  line-height: 1.62;
}

/* ----------------------------------------------------------------- *
 * Formularkarte — weiße Karte auf Beige, Auswahl in Dunkelblau
 * ----------------------------------------------------------------- */

form.donate.jmm-form {
  --jmm-fg: #002f49;
  --jmm-primary: #002f49;
  --jmm-primary-fg: #e5ddd2;
  --jmm-primary-soft: rgba(0, 47, 73, 0.08);
  --jmm-muted-fg: rgba(0, 47, 73, 0.62);
  --jmm-border: rgba(0, 47, 73, 0.14);
  --jmm-font-display: "Playfair Display", Georgia, serif;
  /* Der Bericht ist flach gesetzt — Auswahl zeigt sich als Fläche, nicht als
   * Schlagschatten. Die drei Schattentoken laufen deshalb ins Leere. */
  --jmm-shadow-soft: none;
  --jmm-shadow-elevated: none;
  --jmm-shadow-glow: none;
  --jmm-gradient-primary: #002f49;
  --hoh-primary-color: #002f49;
}

.jmm-card {
  border: 1px solid var(--jb-linie-hell) !important;
}

.jmm-step-num {
  background: var(--jb-dunkelblau) !important;
  color: var(--jb-creme) !important;
}

/* Ränder aller Bedienelemente auf denselben durchscheinenden Ton.
 *
 * Auch hier zählt die Spezifität: Die Betragskacheln tragen zusätzlich
 * `.form-control`, und redesign.css setzt deren Rand über
 * `form.donate.jmm-form .form-control` — eine Regel auf `.jmm-amount`
 * allein bliebe wirkungslos, die Kachel behielte ihren beigen Rand. */
.jmm-pill-label,
.jmm-pill:not(.active):hover .jmm-pill-label,
.jmm-check-box,
.jmm-check:hover .jmm-check-box,
.jmm-pay-tile,
.jmm-stat {
  border-color: var(--jb-linie-hell) !important;
}
.jmm-input,
form.donate.jmm-form .form-control,
form.donate.jmm-form .custom-select,
.jmm-input:focus,
form.donate.jmm-form .form-control:focus,
form.donate.jmm-form .custom-select:focus,
.jmm-step .jmm-amount,
.form__unique .jmm-amount,
.form__monthly .jmm-amount,
.jmm-amount,
.jmm-step .jmm-amount:not(.active):hover,
.form__unique .jmm-amount:not(.active):hover,
.form__monthly .jmm-amount:not(.active):hover,
.jmm-amount:not(.active):hover {
  border-color: var(--jb-linie-hell) !important;
}
/* Beim Hineinklicken darf der Rand ruhig sichtbar werden — sonst ist im
 * flachen Satz gar nicht erkennbar, welches Feld gerade dran ist. */
.jmm-input:focus,
form.donate.jmm-form .form-control:focus,
form.donate.jmm-form .custom-select:focus {
  border-color: var(--jb-linie-kraeftig) !important;
}
.jmm-pay-tile:hover {
  border-color: var(--jb-linie-kraeftig) !important;
}

/* Gewählt = dunkelblaue Fläche mit cremefarbener Schrift.
 *
 * ⚠️ Die Selektorlisten sind absichtlich 1:1 aus redesign.css übernommen und
 * nicht gekürzt: Dort stehen zwei Blöcke mit hoher Spezifität
 * (`.jmm-step .jmm-amount.active` und der `body.index …`-Block am Dateiende).
 * Eine kurze Regel wie `button.amount_button.active` verliert gegen beide,
 * auch wenn sie später geladen wird — die Kachel bliebe beige. */
.jmm-pill.active .jmm-pill-label,
.jmm-pill.active:hover .jmm-pill-label,
.jmm-step .jmm-amount.active,
.jmm-step .jmm-amount.active:hover,
.jmm-step .jmm-amount.active:focus,
.form__unique .jmm-amount.active,
.form__unique .jmm-amount.active:hover,
.form__monthly .jmm-amount.active,
.form__monthly .jmm-amount.active:hover,
.jmm-amount.active,
.jmm-amount.active:hover,
.jmm-amount.active:focus,
body.index button.jmm-amount.active,
body.index button.jmm-amount.amount_button.active,
body.index .form__monthly button.jmm-amount.active,
body.index .form__unique button.jmm-amount.active,
body.index button[id^="amount__load"].active {
  background: var(--jb-dunkelblau) !important;
  background-color: var(--jb-dunkelblau) !important;
  color: var(--jb-creme) !important;
  border: 1px solid var(--jb-dunkelblau) !important;
}
.jmm-amount.active *,
.jmm-amount.active .currency,
.jmm-amount.active:hover .currency,
.jmm-step .jmm-amount.active .currency,
.jmm-step .jmm-amount.active:hover .currency,
body.index button.jmm-amount.active .currency,
body.index button.jmm-amount.active span,
body.index button[id^="amount__load"].active .currency,
body.index button[id^="amount__load"].active span,
.jmm-pill.active .jmm-pill-label * {
  color: var(--jb-creme) !important;
}

.jmm-check .form-check-input:checked + .jmm-check-box {
  background: var(--jb-dunkelblau) !important;
  border-color: var(--jb-dunkelblau) !important;
}

.jmm-pay-tile:has(input[type="radio"]:checked) {
  background: rgba(0, 47, 73, 0.06) !important;
  border: 1px solid var(--jb-dunkelblau) !important;
}
.jmm-pay-tile:has(input[type="radio"]:checked) > div {
  color: var(--jb-dunkelblau) !important;
}

.jmm-submit,
form.donate.jmm-form #submit-btn {
  background: var(--jb-dunkelblau) !important;
  color: var(--jb-creme) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* ----------------------------------------------------------------- *
 * Kennzahlen — im Bericht Interstate fett mit Tabellenziffern
 * ----------------------------------------------------------------- */

.jmm-stat-num {
  font-family: var(--jb-body) !important;
  font-weight: 700 !important;
  color: var(--jb-dunkelblau) !important;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
}
.jmm-stat-label,
.jmm-stat-cap {
  color: var(--jb-gedaempft) !important;
}

/* ----------------------------------------------------------------- *
 * IBAN-Aufklapper und Wirkungskarten
 * ----------------------------------------------------------------- */

.jmm-iban-toggle,
.jmm-iban-toggle-mobile {
  border-color: var(--jb-linie-hell) !important;
}
.jmm-iban-toggle summary,
.jmm-iban-toggle-arrow,
.jmm-iban-toggle-body b,
.jmm-iban-toggle-body .underline,
.jmm-iban-toggle-mobile summary,
.jmm-impact-card-amount {
  color: var(--jb-dunkelblau) !important;
}
.jmm-iban-toggle-mobile-body {
  color: var(--jb-gedaempft) !important;
}
.jmm-iban-toggle-mobile-body a {
  color: var(--jb-dunkelblau) !important;
}

/* ----------------------------------------------------------------- *
 * Weltkarte
 * ----------------------------------------------------------------- */

.jmm-map-country.is-active {
  fill: var(--jb-hellblau) !important;
}
.jmm-map-country.is-active:hover,
.jmm-map-country.is-active.is-hover {
  fill: #5f8dab !important;
}
.jmm-country-modal h3,
.jmm-country-modal-label,
.jmm-country-modal-stats dt,
.jmm-country-modal-close {
  color: var(--jb-dunkelblau) !important;
}
.jmm-country-modal-stats dd,
.jmm-country-modal-activities li {
  color: var(--jb-gedaempft) !important;
}
.jmm-country-modal-close:hover {
  background: var(--jb-dunkelblau) !important;
  color: var(--jb-creme) !important;
}
.jmm-country-modal-link {
  color: var(--jb-dunkelblau) !important;
}

/* ----------------------------------------------------------------- *
 * Fragen & Antworten — dunkles Band, Haarlinien in Creme
 * ----------------------------------------------------------------- */

section#faq.faq h2 {
  font-family: var(--jb-display) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: var(--jb-creme) !important;
  letter-spacing: -0.015em;
}
section#faq.faq .faq-list li {
  border: 1px solid var(--jb-linie-dunkel) !important;
  background: rgba(229, 221, 210, 0.04) !important;
}
section#faq.faq .faq-list li:hover {
  border-color: rgba(229, 221, 210, 0.4) !important;
}
section#faq.faq .accordion,
section#faq.faq .panel,
section#faq.faq .panel a {
  color: var(--jb-creme) !important;
}
section#faq.faq .accordion::after {
  border-right-color: var(--jb-creme) !important;
  border-bottom-color: var(--jb-creme) !important;
}

/* ----------------------------------------------------------------- *
 * Kopf- und Fußbereich
 * ----------------------------------------------------------------- */

.jmm-header {
  --jmmh-primary: #002f49 !important;
  --jmmh-brand-lt: #002f49 !important;
  --jmmh-card: #7fa8c5 !important;
}
.jmm-header-primary,
.jmm-header-secondary {
  background: var(--jb-dunkelblau) !important;
}
.jmm-header-secondary {
  border-top: 1px solid var(--jb-linie-dunkel);
}

/* Im Bericht endet die Seite dunkel. */
body.index footer {
  background-color: var(--jb-dunkelblau) !important;
  color: var(--jb-creme) !important;
}
body.index footer .footer_legal,
body.index footer a {
  color: var(--jb-creme) !important;
}
body.index footer .footer_logo line {
  fill: var(--jb-creme) !important;
  stroke: var(--jb-creme) !important;
}
body.index footer .footer_logo_recolor {
  background-color: var(--jb-creme) !important;
}

/* ----------------------------------------------------------------- *
 * Ankerknöpfe („Zu unserer IBAN" / „Fragen & Antworten")
 * ----------------------------------------------------------------- */

.jmm-anchor-link,
.jmm-anchor-link:visited,
.jmm-anchor-link:active {
  background: var(--jb-dunkelblau) !important;
  color: var(--jb-creme) !important;
}
.jmm-anchor-link:hover,
.jmm-anchor-link:focus-visible {
  background: #013c5e !important;
  color: var(--jb-creme) !important;
}