/* Team Freiheit — monochrome CI.
   Nur #000/#fff und die Grautreppe. Keine Akzentfarbe, kein border-radius,
   keine Schatten, keine Icons. Montserrat lokal, nie über Google Fonts. */

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

:root {
  --schwarz: #000; --weiss: #fff;
  --text: #111; --absatz: #222; --neben: #333; --meta: #666;
  --grau: #767676; --linie: #ccc; --kante: #e0e0e0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--weiss);
  line-height: 1.6;
}

.spenden, .danke { max-width: 40rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; }

.wortmarke {
  display: inline-block;
  border: 2px solid currentColor;
  padding: .35em .7em;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: .9rem;
  text-transform: none;
}

/* `hidden` muss auch gegen Flex/Grid-Regeln gewinnen. */
[hidden] { display: none !important; }

h1 { font-weight: 900; font-size: clamp(2rem, 6vw, 2.9rem); letter-spacing: -.02em; margin: 1.5rem 0 1rem; }

/* Wortmarke und Überschrift nebeneinander — spart die Höhe einer ganzen Zeile,
   damit der Betragswähler früher ins Bild kommt. Unter 34rem bricht es um. */
.kopf-zeile {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.kopf-zeile .wortmarke { flex-shrink: 0; }
.kopf-zeile h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.4rem); }
h2 { font-weight: 900; font-size: 1.15rem; margin: 0 0 .5rem; }
.lead { color: var(--absatz); max-width: 34rem; }

.block { border: 0; padding: 0; margin: 2.5rem 0; }
legend { font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); padding: 0; margin-bottom: .9rem; }
.optional { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--meta); }

/* Auswahl — Radios als Schaltflächen */
.wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl label { position: relative; }
.wahl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wahl span {
  display: block; border: 2px solid var(--schwarz); padding: .7rem 1.1rem;
  font-weight: 600; font-size: .92rem; min-height: 44px; line-height: 1.7;
}
.wahl input:checked + span { background: var(--schwarz); color: var(--weiss); }
.wahl input:focus-visible + span { outline: 2px solid var(--schwarz); outline-offset: 3px; }

/* Beträge */
.betraege { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.betrag {
  font: inherit; font-weight: 700; cursor: pointer;
  border: 2px solid var(--schwarz); background: var(--weiss); color: var(--schwarz);
  padding: .7rem 1.1rem; min-height: 44px;
}
.betrag.aktiv { background: var(--schwarz); color: var(--weiss); }
.betrag:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }

.frei { display: block; margin-top: 1rem; }
.frei > span:first-child { display: block; font-size: .85rem; color: var(--neben); margin-bottom: .35rem; }
.eingabe { display: flex; align-items: baseline; gap: .4rem; max-width: 12rem; border-bottom: 1px solid var(--grau); }
.eingabe input { font: inherit; font-weight: 700; font-size: 1.2rem; border: 0; outline: 0; padding: .4rem 0; width: 100%; background: transparent; color: var(--text); }
.eingabe input:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }

.hinweis { font-size: .88rem; color: var(--neben); min-height: 1.4em; margin: .6rem 0 0; max-width: 34rem; }
/* Steuerhinweis zum Ausklappen — hält den Weg zum Absende-Button kurz. */
.steuer { margin-top: 1.2rem; max-width: 34rem; }
.steuer > summary {
  cursor: pointer; font-weight: 700; font-size: .92rem; color: var(--text);
  padding: .6rem 0; list-style: none; min-height: 44px; display: flex; align-items: center;
  border-bottom: 1px solid var(--linie);
}
.steuer > summary::-webkit-details-marker { display: none; }
/* Auf- und Zuklappen ohne Icon: Textzeichen, wie es die CI verlangt. */
.steuer > summary::after { content: '+'; margin-left: auto; font-weight: 400; font-size: 1.1rem; color: var(--grau); }
.steuer[open] > summary::after { content: '\2013'; }
.steuer > summary:hover { border-bottom-color: var(--text); }
.steuer > summary:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }
.steuer > p { font-size: .9rem; color: var(--absatz); margin: 1rem 0 0; }

.erklaerung { display: flex; gap: .75rem; align-items: flex-start; margin: 2rem 0; max-width: 34rem; }
.erklaerung input { margin-top: .3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--schwarz); flex-shrink: 0; }
.erklaerung small { display: block; color: var(--meta); font-size: .8rem; margin-top: .15rem; }

/* Honeypot — für Menschen unerreichbar, für Bots sichtbar im DOM */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fehler { border: 2px solid var(--schwarz); padding: .9rem 1.1rem; font-weight: 600; margin: 1.5rem 0; }

/* Turnstile. Der Abstand gilt nur, wenn Cloudflare tatsächlich etwas eingesetzt
   hat — in der Betriebsart „interaction-only“ bleibt der Bereich im Regelfall
   leer, und eine feste Lücke über dem Absende-Knopf wäre dann grundlos.
   Das Widget selbst steckt in einem fremden iframe; unsere Radien- und
   Farbregeln reichen dort nicht hinein. */
.turnstile:not(:empty) { margin: 1.25rem 0 0; }

.knopf {
  display: inline-block; font: inherit; font-weight: 700; cursor: pointer;
  border: 2px solid var(--schwarz); background: var(--weiss); color: var(--schwarz);
  padding: .9rem 1.6rem; min-height: 44px; text-decoration: none;
  letter-spacing: .04em; text-transform: uppercase; font-size: .85rem;
}
.knopf.primaer { background: var(--schwarz); color: var(--weiss); width: 100%; }
.knopf:hover { background: var(--weiss); color: var(--schwarz); }
.knopf.primaer:hover { background: var(--weiss); color: var(--schwarz); }
.knopf:disabled { opacity: .5; cursor: default; }
.knopf:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }

.klein { font-size: .82rem; color: var(--meta); margin-top: 1rem; max-width: 34rem; }

.ueberweisung { margin-top: 4rem; }
.ueberweisung dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; margin: 1rem 0; }
.ueberweisung dt { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.ueberweisung dd { margin: 0; }
.ueberweisung code { font-family: ui-monospace, monospace; letter-spacing: .04em; }

.fuss { margin-top: 4rem; display: flex; gap: 1.5rem; flex-wrap: wrap; }
.fuss a { color: var(--text); text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }
.fuss a:hover { text-decoration-color: var(--text); }

/* ── Rechtsseiten: Impressum, Datenschutzerklärung ───────────────────────────
   Lange Fließtexte statt Formular. Gegliedert wird über Weißraum und
   Schriftgewicht, nicht über Linien — die CI kennt keine Trenner. Die Tabellen
   bekommen deshalb ebenfalls keine Rahmen; die Kopfzeile trägt die Gliederung
   allein über Versalien und Grauwert, wie schon die dt-Zeilen der
   Überweisungsangaben. */
.recht {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.recht h1 { margin: 2rem 0 1.5rem; font-size: clamp(1.9rem, 5vw, 2.5rem); }
.recht h2 { font-size: 1.1rem; margin: 3rem 0 .75rem; }
.recht h3 { font-weight: 700; font-size: .98rem; margin: 2rem 0 .5rem; }
.recht p, .recht li { color: var(--absatz); font-size: .95rem; max-width: 58ch; }
.recht p { margin: 0 0 1rem; }
.recht .lead { color: var(--neben); font-size: 1rem; margin-bottom: 2.5rem; }
.recht ul { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.recht li { margin-bottom: .45rem; }

/* Definitionslisten tragen die Empfänger- und Cookie-Aufstellungen. Der Begriff
   steht als eigene Zeile über der Erklärung statt daneben: bei Erläuterungen von
   mehreren Sätzen bliebe in zwei Spalten rechts eine schmale Textsäule übrig. */
.recht dl { margin: 1.25rem 0 2rem; }
.recht dt {
  font-weight: 700;
  color: var(--text);
  font-size: .95rem;
  margin-bottom: .3rem;
}
.recht dd {
  margin: 0 0 1.4rem;
  padding-left: 1.2rem;
  color: var(--absatz);
  font-size: .95rem;
  max-width: 58ch;
}
.recht dd:last-child { margin-bottom: 0; }
.recht strong { font-weight: 700; color: var(--text); }
.recht code {
  font-family: ui-monospace, monospace;
  font-size: .88em;
  letter-spacing: .01em;
}
.recht a { color: var(--text); text-decoration: underline; text-decoration-color: var(--linie); text-underline-offset: 3px; }
.recht a:hover { text-decoration-color: var(--text); }

.recht .stand { margin-top: 3rem; font-size: .82rem; color: var(--meta); }

.danke { padding-top: 5rem; }
.danke h1 { margin-top: 2rem; }
.danke-text { color: var(--absatz); max-width: 34rem; margin-bottom: 2rem; font-size: 1.05rem; }
/* Hauptaktion auf der Abbruch-Seite: der Rückweg zur Spende. */
.danke .knopf.primaer { width: auto; display: inline-block; margin-bottom: 3.5rem; }

/* Weiterführende Wege nach der Spende */
.weiter h2 {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--grau); margin-bottom: 1.2rem;
}
.weiter-liste { display: flex; flex-direction: column; gap: .75rem; }
.weiter-karte {
  display: block; border: 2px solid var(--schwarz); padding: 1.1rem 1.3rem;
  text-decoration: none; color: var(--text); min-height: 44px;
}
.weiter-karte strong { display: block; font-weight: 700; font-size: 1rem; margin-bottom: .25rem; }
.weiter-karte span { display: block; font-size: .9rem; color: var(--neben); }
.weiter-karte:hover { background: var(--schwarz); }
.weiter-karte:hover strong, .weiter-karte:hover span { color: var(--weiss); }
.weiter-karte:focus-visible { outline: 2px solid var(--schwarz); outline-offset: 3px; }