/* =========================================================================
   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 und Text stehen, nicht erst nach
   Scrollen sichtbar werden. */
.mitmachen__intro .stack > * + * { margin-block-start: var(--space-s); }

/* v16: der Hinweis auf die Spende ist ein Aufruf, kein Fliesstext-Link —
   darum ohne Unterstreichung (Joel), dafür halbfett und mit Hover-Farbe. */
.mitmachen__spende {
  font-family: var(--font-display); font-weight: 600;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.mitmachen__spende:hover { color: var(--magenta-dark); }

@media (min-width: 960px) {
  .mitmachen__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .mitmachen__intro { position: sticky; inset-block-start: calc(var(--kopf-h) + var(--space-m)); }
}

/* 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; overscroll-behavior: contain;
  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 steht gerade, als dunkelblaues Quadrat */
.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;
}

/* 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); }
/* v16: »Ich möchte …« ist ganz optional, die Marke steht im Schritttitel. */
.step__title .optional { margin-inline-start: 0; font-family: var(--font-sans); font-size: var(--step--1); }

/* 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). Links die Aussage, rechts das weisse
   Blatt mit drei Fakten und dem Magenta-Knopf. 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); }

/* Zwei Spalten ab 860 px: links die Aussage, rechts das weisse Blatt mit
   den Fakten und dem Knopf. Das Blatt ist dieselbe Geste wie beim
   Weiterempfehlen (.empfehlen__box): Weiss auf Farbe, kein Schatten,
   eine Cyan-Kante oben. */
.spenden__inner { display: grid; gap: var(--space-l); align-items: center; }
@media (min-width: 860px) {
  .spenden__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-xl); }
}
.spenden h2 { font-size: var(--step-4); line-height: 0.98; letter-spacing: -0.025em; }
.spenden .spenden__lead {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-2); line-height: 1.25;
}
.spenden .spenden__intro p:not(.spenden__lead) { color: color-mix(in srgb, var(--white) 82%, transparent); }

.spenden__blatt {
  display: grid; gap: var(--space-m);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--white);
  border-block-start: 6px solid var(--cyan);
}
.spenden .spenden__blatt-titel { color: var(--ink); font-size: var(--step-1); }
.spenden__fakten {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  border-block-start: 1px solid var(--line);
}
.spenden__fakt {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-s);
  align-items: start;
  padding-block: var(--space-s);
  border-block-end: 1px solid var(--line);
}
.spenden__fakt svg {
  inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.1em;
  fill: none; stroke: var(--blue-deep); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.spenden .spenden__fakt p { color: var(--ink-mute); font-size: var(--step--1); line-height: 1.5; max-inline-size: none; }
.spenden__fakt b {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-0); color: var(--ink);
}
.spenden__knopf { justify-content: center; inline-size: 100%; padding-block: 0.9em; font-size: var(--step-1); }

/* ---------- Unterstützen: Der direkte Draht --------------------------------
   Alternative zum Formular, am Ende von .mitmachen__intro: auf dem Desktop
   in der klebenden Spalte, auf dem Handy direkt über dem Formular. Seit v12
   steht dort kein Foto mehr — das Eventfoto ist ins Hero gewandert.
   -------------------------------------------------------------------------- */

.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 ----------------------------
   v16 ohne Hero: der Seitentitel steht direkt oben. Die Zwischentitel sind
   darum eine Stufe kleiner, sonst wären sie auf dem Telefon fast so gross
   wie der Titel. */

.legal address {
  font-style: normal;
}

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

.legal h2 { font-size: var(--step-1); }
/* Zwei Klassen plus Element: schlägt .legal .stack > * + * darüber, das den
   grösseren Abstand vor den Zwischentiteln bisher überschrieb. */
.legal .stack > 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); }

/* ---------- Unterstützen: Fehlermeldung und Dankesbrief (v16) --------------
   js/main.js schickt das Formular per fetch und öffnet danach den Brief.
   Ablauf in 2.1 s: der Umschlag kommt (0–0.45 s), die Klappe geht auf
   (bis 0.95 s), ein Zettel steigt heraus (bis 1.45 s), dann sinkt der
   Umschlag weg und der Brief faltet sich darüber auf. Umschlag und Brief
   liegen in derselben Rasterzelle übereinander. Bei reduzierter Bewegung
   fällt der Umschlag weg und der Brief steht sofort da.
   -------------------------------------------------------------------------- */

.formular__fehler { font-weight: 600; color: var(--magenta-dark); }
.formular__fehler a { color: inherit; }
.formular__abschluss .btn:disabled { opacity: 0.6; cursor: progress; }

html:has(.brief[open]) { overflow: hidden; }

.brief {
  inline-size: min(30rem, 100% - 2 * var(--gutter));
  max-inline-size: none; max-block-size: none;
  /* margin: auto zentriert den Dialog; der Reset in style.css nimmt es ihm. */
  margin: auto; padding: 0; border: 0; background: none; overflow: visible;
  color: var(--ink);
}
.brief[open] { display: grid; }
.brief > * { grid-area: 1 / 1; }
.brief::backdrop { background: color-mix(in srgb, var(--blue-night) 72%, transparent); }

/* Der Umschlag: Rückseite, Zettel, Vordertasche mit V-Ausschnitt, Klappe. */
.brief__umschlag { display: none; }
.brief__umschlag > span { position: absolute; inset: 0; }
.brief__rueck { z-index: 0; background: var(--blue-night); }
/* Doppelte Klasse: sonst gewinnt inset: 0 aus der Regel darüber. Der
   Cyan-Balken ist derselbe wie am Brief — der Zettel IST der Brief. */
.brief__umschlag .brief__zettel { z-index: 1; inset: 8% 7% 14%; background: var(--white); border-block-start: 5px solid var(--cyan); }
.brief__tasche {
  z-index: 2; background: var(--blue-deep);
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
}
.brief__klappe {
  z-index: 3; background: var(--cyan);
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  transform-origin: top;
}

/* Der Brief: dieselbe Sprache wie die Karten, Cyan-Balken oben. Über dem
   Umschlag, weil er später im Markup steht und positioniert ist. */
.brief__papier {
  position: relative;
  align-self: center;
  display: grid; gap: var(--space-s); justify-items: start;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  background: var(--white);
  border-block-start: 6px solid var(--cyan);
  box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.25);
}
.brief__titel { font-size: var(--step-2); }
.brief__gruss { margin-block-start: var(--space-s); }
.brief__unterschrift {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--step-1); color: var(--blue-deep);
}
.brief__papier .btn { margin-block-start: var(--space-s); }

@media (prefers-reduced-motion: no-preference) {
  .brief[open]::backdrop { animation: brief-grund 0.3s var(--ease) both; }
  .brief[open] .brief__umschlag {
    display: block; position: relative; align-self: center;
    aspect-ratio: 3 / 2; perspective: 60rem; pointer-events: none;
    animation: brief-umschlag 2.1s var(--ease) both;
  }
  .brief[open] .brief__klappe  { animation: brief-klappe 0.5s 0.45s ease-in-out both; }
  .brief[open] .brief__zettel  { animation: brief-zettel 0.5s 0.95s var(--ease) both; }
  .brief[open] .brief__papier  { animation: brief-papier 0.7s 1.45s var(--ease) both; }

  /* Zurück zur Seite: 0.3 s, wie der setTimeout in js/main.js. */
  .brief.is-zu .brief__papier { animation: brief-zu 0.3s var(--ease) both; }
  .brief.is-zu::backdrop { animation: brief-grund 0.3s var(--ease) reverse both; }
}

@keyframes brief-grund { from { opacity: 0; } }
@keyframes brief-umschlag {
  0%   { opacity: 0; translate: 0 1.5rem; scale: 0.94; }
  20%  { opacity: 1; translate: 0 0; scale: 1; }
  70%  { opacity: 1; translate: 0 0; }
  100% { opacity: 0; translate: 0 35%; }
}
/* Nach der halben Drehung liegt die Klappe hinter dem Zettel. */
@keyframes brief-klappe {
  from { transform: rotateX(0); z-index: 3; }
  to   { transform: rotateX(180deg); z-index: 0; }
}
@keyframes brief-zettel { to { translate: 0 -45%; } }
/* Der Brief faltet sich von oben nach unten auf. Die negativen Ränder im
   clip-path lassen den Schatten stehen. */
@keyframes brief-papier {
  0%   { opacity: 0; translate: 0 -12%; clip-path: inset(-4rem -4rem 80% -4rem); }
  25%  { opacity: 1; }
  100% { opacity: 1; translate: 0 0;    clip-path: inset(-4rem -4rem -4rem -4rem); }
}
@keyframes brief-zu { to { opacity: 0; translate: 0 2rem; } }