/* ==========================================================================
   JARII · Faktenseite /k-o-tropfen/ und Band „Hintergrund“ auf der Startseite
   (Agent K, 26.10.2026).
   Liest nur Tokens aus tokens.css. Kein eigenes Skript, keine Bewegung:
   die Seite soll ruhig lesbar sein, auch gedruckt.
   Kontraste (WCAG-Formel, 26.10.2026):
   - ink auf lilac 11,6:1 · ink-muted auf lilac 5,4:1 · ink-muted auf raised 7,8:1
   - violet auf raised 6,2:1 (Quellenlinks) · violet-Button auf lilac 4,3:1
   - navy-Rand des Ghost-Buttons auf lilac 10,2:1 (UI-Grenze ≥ 3:1)
   ========================================================================== */

/* --- Band auf der Startseite (zwischen Clubs und Liste) -------------------
   Helle lilac-Fläche zwischen zwei dunklen Sektionen: trennt Clubs (navy)
   und Liste (Nacht) und kündigt einen Nebenweg an, ohne mit dem Haupt-CTA
   zu konkurrieren. Deshalb Ghost-Button statt violetter Fläche. */
.facts-band {
  padding-block: clamp(40px, 6vw, 72px);
}
.facts-band__inner {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}
.facts-band__label { color: var(--text-muted); }
.facts-band__title { max-width: 30ch; }
/* hairline (#D6CFC1) ist auf lilac kaum sichtbar; der Rand bekommt navy,
   damit der Button als Button erkennbar bleibt, aber ohne Fläche schwächer
   wirkt als „Auf die Liste“. */
.facts-band .btn-ghost {
  border-color: var(--navy);
  color: var(--ink);
  margin-top: var(--space-2);
}
.facts-band .btn-ghost:hover { background-color: var(--surface-raised); }
/* Der Button-Text ist lang (36 Zeichen in Versalien) und passt bei 390 px
   nicht in eine Zeile: Umbruch erlauben statt horizontal überlaufen. */
.facts-band .btn,
.facts .btn {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}

@media (min-width: 900px) {
  .facts-band__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: var(--space-12);
  }
  .facts-band__label { grid-column: 1 / -1; }
  .facts-band .btn-ghost { margin-top: 0; }
}

/* --- Faktenseite ---------------------------------------------------------- */
.facts__head .label { color: var(--text-muted); margin-bottom: var(--space-3); }
.facts__head h1 { margin-bottom: var(--space-6); }
.facts__intro { max-width: 64ch; }

/* Zwischenabschnitte: Text in Lesebreite (--read 820 px), Karten breiter */
.facts__section { margin-top: var(--space-16); }
.facts__section > h2 { margin-bottom: var(--space-4); }
.facts__section p + p { margin-top: var(--space-4); }
.facts__note { color: var(--text-muted); max-width: 64ch; }

.facts__cards {
  max-width: calc(1080px + 2 * var(--gutter));
  margin-top: var(--space-12);
}
.facts__cards-head { max-width: var(--read); margin-bottom: var(--space-6); }
.facts__cards-head h2 { margin-bottom: var(--space-3); }

.facts__list {
  list-style: none;
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .facts__list { grid-template-columns: 1fr 1fr; }
  /* Fünf Karten: die letzte über beide Spalten, damit kein Loch bleibt */
  .facts__list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.facts__list > li { display: flex; }

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}
.fact__where { color: var(--text-muted); }
/* Kernaussage als ganzer Satz: kleiner als heading-2, damit zwei bis drei
   Zeilen ruhig lesbar bleiben. */
.fact__claim {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1.9vw, 1.375rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.fact__meaning {
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}
.fact__meaning .label { display: block; color: var(--text-muted); margin-bottom: var(--space-1); }
.fact__source { margin-top: auto; padding-top: var(--space-2); color: var(--text-muted); }

/* Quellenlinks: neues Tab, deshalb sichtbarer Pfeil plus Text für
   Screenreader. Zielhöhe ≥ 24 px (WCAG 2.5.8), auch wenn der Link umbricht. */
.ext-link {
  color: var(--accent);
  font-weight: 500;
  display: inline;
  padding-block: 4px;
  line-height: 1.6;
}
.ext-link .icon { width: 0.95em; height: 0.95em; margin-left: 0.2em; vertical-align: -0.1em; }

/* „Wo JARII ansetzt“: ruhige lilac-Box (Hinweisfläche laut Markenbuch) */
.facts__ansatz {
  background-color: var(--lilac);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --accent: var(--violet);
}
@media (min-width: 768px) {
  .facts__ansatz { padding: var(--space-8); }
}
.facts__honest { font-weight: 600; }
.facts__ansatz .btn { margin-top: var(--space-6); }

/* „Wenn etwas passiert ist“ */
.facts__steps {
  list-style: disc;
  padding-left: 1.25em;
  margin-top: var(--space-4);
  max-width: 64ch;
}
.facts__steps li + li { margin-top: var(--space-2); }
.facts__steps + .facts__note,
.facts__tels + .facts__note { margin-top: var(--space-6); }

.facts__tels {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
@media (min-width: 768px) {
  .facts__tels { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
.facts__country h3 { margin-bottom: var(--space-3); }
.facts__country ul { list-style: none; display: grid; gap: var(--space-2); }

/* Nummern als Kapseln: groß genug zum Tippen (44 px), Nummer zuerst */
.tel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background-color: var(--surface-raised);
  color: var(--ink);
  text-decoration: none;
}
.tel:hover { border-color: currentColor; }
.tel__nr {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.tel__what { font-size: 0.875rem; line-height: 1.3; color: var(--ink-muted); }

.facts__stand {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  color: var(--text-muted);
}

@media print {
  .ext-link .icon { display: none; }
  .ext-link::after { content: " (" attr(href) ")"; font-weight: 400; word-break: break-all; }
  .facts__ansatz .btn { display: none; }
}