/* =========================================================================
   Joel Sidler — Seiten-CSS «Funnel»
   Gilt für: unterstuetzen.html, impressum.html, datenschutz.html, 404.html
   Ergänzt nur Layout. Erfindet keine zweite Buttonsorte, keine neue Karte.
   ========================================================================= */

/* ---------- Aktuell: Filterleiste (zurückgestellt, siehe HANDOFF.md) ----- */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-end: var(--space-l);
}

.filter [data-filter-btn][aria-pressed="true"] {
  background: var(--cyan);
  color: var(--white);
  border-color: var(--cyan);
}

/* ---------- Aktuell: Kartenraster ----------------------------------------- */

.kartenraster {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.kartenraster .card img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------- Unterstützen: Formular ----------------------------------------
   Links der Einstieg, der beim Scrollen stehen bleibt. Rechts eine Karte mit
   drei nummerierten Schritten und einem Abschluss. Die Basis (.card, .field,
   .check) kommt aus style.css und wird hier nur innerhalb von .formular
   grösser und lesbarer gemacht — keine andere Seite ändert sich dadurch.
   -------------------------------------------------------------------------- */

/* Der Einstieg und das Formular stehen in einer Sektion. Unten nur --space-l:
   darunter folgt eine weitere .section mit eigenem Abstand oben, zweimal
   --space-xl an dieser Nahtstelle wäre eine Lücke. */
.mitmachen { padding-block-end: var(--space-l); }
.mitmachen__grid { display: grid; gap: var(--space-l); align-items: start; }
.mitmachen__intro { display: grid; gap: var(--space-s); }

/* Enger als der normale .stack-Abstand: «Lieber direkt?» soll ohne grosse
   Lücke gleich unter Überschrift/Text/Merkpunkten stehen, nicht erst nach
   Scrollen sichtbar werden. */
.mitmachen__intro .stack > * + * { margin-block-start: var(--space-s); }

/* Zwei Zusagen vorweg, damit niemand erst das ganze Formular lesen muss */
.merkpunkte { display: grid; gap: 0.6rem; }
.merkpunkte li { position: relative; padding-inline-start: 1.5em; }
.merkpunkte li::before {
  content: "";
  position: absolute; inset-inline-start: 0; inset-block-start: 0.6em;
  inline-size: 0.6em; block-size: 0.6em;
  background: var(--cyan); rotate: var(--neigung);
}

/* Auf dem Handy bleibt das Foto aus. Der Hero darüber zeigt Joel bereits
   gross; ein zweites Bild würde das Formular nur weiter nach unten schieben,
   und genau dagegen richtete sich die Kritik. Ausgeblendet wird es nicht
   geladen (loading="lazy"). */
.mitmachen__foto { display: none; }

@media (min-width: 960px) {
  .mitmachen__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .mitmachen__intro { position: sticky; inset-block-start: calc(var(--nav-h) + var(--space-m)); }
  /* Das Foto steht zuoberst in der klebenden Spalte und ist flach
     geschnitten: Bild, Überschrift, Merkpunkte und «Lieber direkt?» sollen
     zusammen in einen Bildschirm passen. Früher stand es zuunterst und war
     erst nach dem Scrollen zu sehen. */
  .mitmachen__foto {
    display: block; inline-size: 100%;
    aspect-ratio: 16 / 9; max-block-size: 13rem;
    object-fit: cover; object-position: 40% 30%;
  }
}

/* Dankesliste unter dem Formular — eigene Scrollbox statt einer wachsenden
   Kartenreihe: die Liste kann auf Hunderte Namen kommen, ohne die Seite
   in die Länge zu ziehen. Feste Höhe ab dem dritten Eintrag, darunter
   scrollt nur die Box selbst. */
.unterstuetzer { margin-block-start: var(--space-l); }
.unterstuetzer__zahl { color: var(--ink-mute); }

.unterstuetzer__suchlabel { display: block; margin-block-start: var(--space-m); font-size: var(--step--1); font-weight: 600; }
.unterstuetzer__suche {
  inline-size: 100%; margin-block-start: 0.45em;
  padding: 0.85em 1em;
  font-size: var(--step-0); font-family: inherit; line-height: 1.3;
  background: var(--white);
  border: 1px solid var(--ink-mute); border-radius: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.unterstuetzer__suche:hover { border-color: var(--ink); }
.unterstuetzer__suche:focus-visible {
  border-color: var(--blue-deep); outline: none;
  box-shadow: inset 0 0 0 1px var(--blue-deep);
}
/* Chrome/Safari malen sonst ein eigenes Lupen- und Löschsymbol ins Feld. */
.unterstuetzer__suche::-webkit-search-cancel-button,
.unterstuetzer__suche::-webkit-search-decoration { appearance: none; }

.unterstuetzer__leer { margin-block-start: var(--space-m); color: var(--ink-mute); }

.unterstuetzer__liste {
  margin-block-start: var(--space-m);
  max-block-size: 22rem; overflow-y: auto;
  border: 1px solid var(--line); background: var(--white);
}
.unterstuetzer__eintrag { padding: 0.9em var(--space-m); border-block-end: 1px solid var(--line); }
.unterstuetzer__eintrag:last-child { border-block-end: none; }
.unterstuetzer__eintrag[hidden] { display: none; }
.unterstuetzer__name { font-family: var(--font-display); font-weight: 700; }
.unterstuetzer__info { font-size: var(--step--1); color: var(--ink-mute); }
.unterstuetzer__info:empty { display: none; }

/* Erklärender Kleintext unter einer Legende oder über einem Feld.
   Kein zweiter Absatztyp — nur gedämpft und auf Lesebreite begrenzt. */
.hinweis {
  font-size: var(--step--1);
  color: var(--ink-mute);
  max-inline-size: var(--measure);
  margin-block-end: var(--space-s);
}

/* Die Karte hat keinen eigenen Innenabstand: jeder Schritt bringt ihn mit,
   damit der graue Abschluss bis an den Rand der Karte reicht. */
.formular { --pad: clamp(1.5rem, 3vw, 2.25rem); gap: 0; padding: 0; }

.step {
  display: grid; gap: var(--space-m);
  padding: var(--pad);
  border-block-end: 1px solid var(--line);
}
.step__head { display: grid; gap: 0.35em; }
.step__head .hinweis { margin: 0; }

.step__title { display: flex; align-items: center; gap: 0.75em; font-size: var(--step-1); }
/* Die Nummer kippt im selben Winkel wie Balken und Pille */
.step__num {
  display: grid; place-items: center; flex: none;
  inline-size: 2.1em; block-size: 2.1em;
  background: var(--blue-deep); color: var(--white);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  rotate: var(--neigung);
}

/* Felder: sechs Spalten, damit PLZ schmal und Ort breit stehen kann.
   Auf dem Handy eine Spalte, nur PLZ und Ort bleiben nebeneinander. */
.feldgruppe {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-m) var(--space-s);
}
.feld--halb, .feld--voll { grid-column: 1 / -1; }
.feld--plz { grid-column: span 2; }
.feld--ort { grid-column: span 4; }
@media (min-width: 560px) { .feld--halb { grid-column: span 3; } }

.formular .field { gap: 0.45em; }
.formular .field .hinweis { margin: 0; }
.formular .field label { font-size: var(--step--1); font-weight: 600; }
.formular .field input,
.formular .field textarea {
  inline-size: 100%;
  padding: 0.85em 1em;
  font-size: var(--step-0); line-height: 1.3;
  background: var(--white);
  /* --line wäre auf Weiss kaum zu sehen; Feldränder müssen erkennbar bleiben */
  border: 1px solid var(--ink-mute); border-radius: 0;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.formular .field textarea { min-block-size: 6.5rem; line-height: 1.5; resize: vertical; }
.formular .field input:hover,
.formular .field textarea:hover { border-color: var(--ink); }
.formular .field input:focus-visible,
.formular .field textarea:focus-visible {
  border-color: var(--blue-deep);
  box-shadow: inset 0 0 0 1px var(--blue-deep);
}

.pflicht { color: var(--blue-deep); }
.optional { margin-inline-start: 0.3em; font-weight: 400; color: var(--ink-mute); }

/* Fragen innerhalb eines Schritts */
.frage { display: grid; gap: var(--space-s); min-inline-size: 0; }
.frage > legend {
  margin-block-end: var(--space-s);
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-0);
}
.frage > .hinweis { margin: 0; }
/* Legende und Kleintext gehören enger zusammen als Kleintext und Eingabe */
.frage > legend + .hinweis { margin-block-start: calc(var(--space-s) * -0.6); }

/* Auswahlkacheln: eigenes Kästchen statt der winzigen Systemcheckbox */
.check-list--wahl { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) {
  .check-list--wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Bleibt eine Kachel allein in der letzten Reihe, nimmt sie die volle Breite */
  .check-list--wahl .check:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.check-list--reihe { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.formular .check {
  align-items: center; gap: 0.85em;
  padding: 0.95em 1.1em;
  border: 2px solid var(--line);
}
.formular .check span { line-height: 1.35; }
.formular .check:hover { border-color: var(--ink-mute); }
.formular .check:has(input:checked) { border-color: var(--blue-deep); background: var(--cyan-soft); }

.formular .check input {
  -webkit-appearance: none; appearance: none;
  display: grid; place-content: center; flex: none; margin: 0;
  inline-size: 1.5rem; block-size: 1.5rem;
  background: var(--white); border: 2px solid var(--ink-mute);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
/* Der Haken: zwei Kanten eines gedrehten Kastens */
.formular .check input::after {
  content: "";
  inline-size: 0.8rem; block-size: 0.42rem;
  border-inline-start: 3px solid var(--white); border-block-end: 3px solid var(--white);
  rotate: -45deg; translate: 0 -0.1rem;
  scale: 0; transition: scale 0.15s var(--ease);
}
.formular .check input:checked { background: var(--blue-deep); border-color: var(--blue-deep); }
.formular .check input:checked::after { scale: 1; }

/* Einwilligung: ein Satz, keine Kachel */
.formular .check--frei,
.formular .check--frei:hover,
.formular .check--frei:has(input:checked) {
  padding: 0; border: 0; background: none;
}

/* Abschluss: leicht abgesetzt, damit der Knopf das Ziel der Seite ist */
.formular__abschluss {
  display: grid; gap: var(--space-m); justify-items: start;
  padding: var(--pad);
  background: var(--paper-alt);
}
.formular__abschluss .btn {
  inline-size: 100%; justify-content: center;
  padding-block: 0.9em;
}
/* Erst ab hier grösser: auf dem Handy bricht der Text sonst auf zwei Zeilen */
@media (min-width: 560px) { .formular__abschluss .btn { inline-size: auto; font-size: var(--step-1); } }

/* ---------- Unterstützen: Spenden ------------------------------------------
   Dunkles Band am Fuss der Seite, nach dem Weiterempfehlen — die kostenlose
   Handlung steht vor der Geldfrage. Auf derselben Fläche
   wie .hero/.band (--blue-deep). Zweispaltig statt zentriertem Fliesstext:
   Intro mit CTA links, Checkliste rechts. Volles --space-xl auf beiden
   Seiten wie bei .band — der Flächenwechsel selbst ist die Nahtstelle,
   kein doppeltes Polster wie zwischen zwei weissen Sektionen.
   -------------------------------------------------------------------------- */
.spenden {
  background: var(--blue-deep);
  color: var(--white);
}
.spenden h2, .spenden h3, .spenden p, .spenden li { color: var(--white); }
.spenden .eyebrow { color: rgba(255, 255, 255, 0.8); }

.spenden__grid { display: grid; gap: var(--space-l); }
@media (min-width: 780px) {
  .spenden__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.spenden__intro .btn { margin-block-start: var(--space-s); }

.spenden__info h3 { font-size: var(--step-0); margin-block-end: var(--space-s); }

/* ---------- Unterstützen: Der direkte Draht --------------------------------
   Alternative zum Formular, in .mitmachen__intro vor dem Foto platziert
   (nicht danach): in der sticky Spalte auf dem Desktop soll sie immer im
   sichtbaren Bereich landen, auch wenn das Foto darunter dafür zu weit nach
   unten rutscht. Auf dem Handy (Foto ausgeblendet, siehe .mitmachen__foto
   oben) steht sie darum ebenfalls direkt über dem Formular.
   -------------------------------------------------------------------------- */

.direktkontakt {
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--space-s);
}

.direktkontakt h3 {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
}

.direktkontakt__liste {
  display: grid;
  gap: 0.5rem;
  margin-block-start: var(--space-s);
  list-style: none;
}

.direktkontakt__liste a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  inline-size: fit-content;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.direktkontakt__liste a:hover,
.direktkontakt__liste a:focus-visible {
  border-block-end-color: var(--cyan);
}

.direktkontakt__liste svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  fill: currentColor;
  flex: none;
}

/* ---------- Unterstützen: Weiterempfehlen ---------------------------------
   Neu ab 22.09.2026: eine Nachricht, drei Kanäle. Vorher drei aufklappbare
   Kacheln mit je eigenem Text — dreimal fast derselbe Satz, den niemand
   dreimal liest, und ein Akkordeon, das den Text erst nach einem Klick zeigt.

   Jetzt steht die Nachricht offen da und sieht aus wie das, was sie ist:
   ein fertiger Text, den man abschickt. Das Feld ist die Gestaltung — gross,
   ohne Kasten im Kasten, in Lauftextgrösse. Darunter, durch eine Haarlinie
   getrennt, die Kanäle als Zeile: WhatsApp, LinkedIn, E-Mail, dazu
   »Text kopieren«, sobald die Zwischenablage da ist.

   Kein .btn hier: die Kanäle sind gleichwertige Wege, kein Call-to-Action.
   Magenta bleibt dem Formularknopf und dem Spendenband vorbehalten.
   Markup-Vertrag: HANDOFF.md.
   -------------------------------------------------------------------------- */

.empfehlen { display: grid; gap: var(--space-l); align-items: start; }
@media (min-width: 900px) {
  .empfehlen { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-xl); }
}

.empfehlen__kopf > * + * { margin-block-start: var(--space-s); }

/* Die Nachricht als Fläche: weisses Blatt auf --paper-alt, eine Linie,
   kein zweiter Rahmen um das Textfeld darin. */
.empfehlen__box {
  background: var(--white);
  border: 1px solid var(--line);
  padding: var(--space-m);
}

.empfehlen__label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 600;
  color: var(--ink-mute);
  margin-block-end: var(--space-s);
}

.empfehlen__box textarea {
  display: block;
  inline-size: 100%;
  padding: 0;
  font: inherit;
  line-height: 1.6;
  color: var(--ink);
  background: none;
  border: 0;
  resize: vertical;
}
/* Der Fokus bleibt der Systemring — er sitzt ohne Feldrahmen direkt um den
   Text und ist damit deutlicher als jede Randfarbe am Blatt. */
.empfehlen__box textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

.empfehlen__kanaele {
  display: flex; flex-wrap: wrap; gap: var(--space-s);
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line);
}

/* style.css setzt Knöpfe auf inline-flex — ohne diese Regel bliebe
   »Text kopieren« trotz hidden sichtbar. */
.empfehlen__kanaele [hidden] { display: none; }

.empfehlen__kanal {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.7em 1.1em;
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 600;
  color: var(--ink); text-decoration: none;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.empfehlen__kanal:hover,
.empfehlen__kanal:focus-visible { border-color: var(--blue-deep); color: var(--blue-deep); }

.empfehlen__kanal svg {
  inline-size: 1.1rem; block-size: 1.1rem;
  fill: currentColor; flex: none;
}

/* »Text kopieren« teilt nichts, es legt nur ab — darum ohne Rahmen. */
.empfehlen__kanal--still { border-color: transparent; color: var(--ink-mute); }
.empfehlen__kanal--still:hover { border-color: transparent; }

/* Leer nimmt der Status keinen Platz ein. */
.empfehlen__status:empty { display: none; }
.empfehlen__status {
  margin-block-start: var(--space-s);
  font-size: var(--step--1); font-weight: 600;
  color: var(--blue-deep);
}

/* ---------- Impressum / Datenschutz: Fliesstext ---------------------------- */

.legal address {
  font-style: normal;
}

.legal .stack > * + * {
  margin-block-start: var(--space-m);
}

.legal h2 {
  margin-block-start: var(--space-l);
}

.legal ul {
  display: grid;
  gap: 0.5rem;
  padding-inline-start: 1.2em;
}

/* ---------- 404: eine Richtung, kein Bedauern ------------------------------
   Die einzige Seite, auf der jemand verloren ist. Ein Satz, was passiert
   ist, ein Primärziel (Startseite) und daneben leise die drei übrigen
   Hauptziele der Seite — kein zweiter Aufruf, nur Wegweiser. */

.notfound { text-align: center; }

.notfound__inhalt {
  display: grid; justify-items: center; gap: var(--space-m);
}

.notfound__wege {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--space-s) var(--space-l);
}
.notfound__wege a {
  font-family: var(--font-display); font-weight: 600;
  color: var(--blue-deep); text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.notfound__wege a:hover,
.notfound__wege a:focus-visible { border-block-end-color: var(--magenta); }