/* Die Zeremonie um den Wiederherstellungs-Schlüssel (#473).
 *
 * Markup: `frontend/_recovery_zeremonie.html` — von dort wird diese Datei auch eingebunden,
 * und zwar mitten im Body. Das ist Absicht: Der Einschub läuft auf mehreren Bildschirmen
 * (Tresor-Einrichtung, Registrierung), und ein `<link>` je Gastgeber wäre ein Ort mehr, an
 * dem man ihn vergessen kann — dann stünde der Schlüssel dort ungestaltet da. Derselbe Weg
 * wie bei `encoding.css`.
 *
 * 🔴 Warum die Regeln NICHT im <style>-Block von `base.html` stehen, wo sie zuerst lagen:
 * Der wird auf JEDER Seite mit ausgeliefert, samt seiner Kommentare. Zwei bestehende Tests
 * durchsuchen den ausgelieferten Text nach einem einzelnen Wort („gesperrt", „Zurück") —
 * und wurden prompt von deutscher Prosa in einem CSS-Kommentar rot. Jinja-Kommentare
 * (`{# … #}`) verschwinden beim Rendern, CSS-Kommentare nicht.
 *
 * 🔴 Handgeschrieben und nicht als Tailwind-Utilities: Der Schlüsselkasten mischt seine
 * Farbe aus der Warnfarbe, und das Ankreuzfeld färbt sein eigenes Häkchen
 * (`accent-color`) — beides ist mit Utilities nicht ausdrückbar.
 */

.lp-schluesselfeld {
  /* Der Abstand nach OBEN steht hier und nicht als Utility an der Zeile darüber: Deren
     Klasse gibt der Gastgeber mit, und eine Kurzform `margin: 0` darin schlüge das
     Utility. Hier kommt nichts dazwischen. */
  margin: 10px 0 14px;
  padding: 15px 16px;
  border-radius: 14px;
  text-align: center;
  background: color-mix(in srgb, var(--warn) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
}
/* Der Schlüssel selbst: gesperrt gesetzt, damit die Gruppen auseinanderfallen und
   sich beim Abschreiben nichts verliest. `break-all`, weil er keine Trennstellen hat
   und sonst die Karte sprengt.
   ⚠️ Die Schrift kommt als Utility `font-titel` aus dem Markup, nicht von hier:
   `theme('fontFamily.titel')` ist eine Tailwind-Funktion und wird nur in der
   Bau-Quelle aufgelöst — in diesem Block stünde sie roh im Stylesheet und wäre
   ungültiges CSS, ohne dass etwas rot würde. */
.lp-schluessel {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.8;
  word-break: break-all;
  color: var(--text);
}
/* Das Ankreuzfeld bekommt eine eigene Fläche — es ist hier keine Nebensache, sondern
   die Stelle, an der der Nutzer bestätigt, dass er den Verlust verstanden hat. */
.lp-haken {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 16px 0 0;
  padding: 13px 15px;
  border-radius: 12px;
  background: var(--bg-2);
  border: 1px solid var(--linie);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  color: var(--muted);
}
.lp-haken:hover { border-color: var(--linie-wach); }
.lp-haken input {
  width: 17px;
  height: 17px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--violet);
}

/* Das Kennzeichen unter dem Schlüssel. Es trägt einen der drei Sätze, die auf diesem
   Bildschirm nicht weicher werden dürfen (#473) — versal, gesperrt und in der Warnfarbe,
   weil er die einzige Aussage ist, die sich nicht nachholen lässt.

   ⚠️ Warnfarbe heißt hier ORANGE, nicht rot (#482 §1): Rot markierte einen Fehler, und
   dass der Schlüssel nur jetzt zu sehen ist, ist keiner — es ist die Eigenschaft, die ihn
   wertvoll macht. */
.lp-nurjetzt {
  display: block;
  margin-top: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warn);
}