/* Der Einstiegs-Rahmen (#473) — die Hülle der Bildschirme VOR der App.
 *
 * ================================================================================
 * Warum es einen zweiten Rahmen gibt
 * ================================================================================
 * Die App hat eine Hülle: Kopfleiste mit Navigation, Inhalt, Fußzeile — sie steht in
 * `base.html` und gilt für jeden angemeldeten Bildschirm. Die Bildschirme davor haben in
 * den Entwürfen eine andere: keine Navigation, dafür eine zentrierte Karte auf dem
 * Seitengrund, die Wortmarke darüber, eine Rechtszeile darunter und als Bildmotiv der
 * Marke ein Schimmer, Höhenlinien und ein ziehender Bergzug.
 *
 * ⚠️ Das Bildmotiv steht seit #557 in `deko.css` und gehört beiden Rahmen — die App trägt
 * es ebenfalls, dort allerdings unbewegt (`app_rahmen.css`). Hier bleibt, was nur der
 * Einstieg hat.
 *
 * Das ist ein Rahmen NEBEN dem bestehenden, kein Umbau: `base.html` schaltet über
 * `rahmen = "einstieg"` um, und wer nichts setzt, merkt nichts. Erster Nutzer ist die
 * Tresor-Einrichtung (#473); Anmelden, Registrieren und Passwort-Zurücksetzen ziehen ihn
 * mit #471/#472 an. Die Regel dazu steht in #482 §4: Der Anmelde-Bildschirm ist die
 * Vorlage, jeder weitere übernimmt daraus unverändert Grundfarben, Schimmer, Höhenlinien,
 * Bergzug, Logo-Kopf, Eingabefeld, Primärknopf und Rechtszeile.
 *
 * 🔴 KEIN FESTER FARBWERT in dieser Datei. Alles kommt aus den Tokens (#468, definiert im
 * <style>-Block von `base.html`) — sonst folgt der Rahmen dem hellen/dunklen Modus nicht,
 * und zwar ohne dass irgendwo etwas rot wird.
 *
 * ⚠️ Handgeschrieben und nicht als Tailwind-Utilities, aus demselben Grund wie beim
 * Passwort-Auge in `base.html`: Es sind zusammenhängende Regeln mit Verläufen, Animationen
 * und Media Queries, keine Ansammlung von Abständen. `test_tailwind_klassen.py` kennt
 * eigene Regeln aus `static/css/` und hält sie deshalb nicht für vergessene Utilities.
 */

/* ================================================================================
   Grundfläche
   ================================================================================ */

/* Die Klasse steht am <body> ANSTELLE der Tailwind-Grundfarben, nicht daneben:
   `dark:bg-grund` wiegt als `.dark\:bg-grund:is(.dark *)` schwerer als ein einfacher
   Klassenselektor und hätte im Dunkelmodus gewonnen. `base.html` setzt deshalb entweder
   das eine oder das andere. */
/* 🔴 Die Höhe sitzt am <body> und nicht am Inhalt, und der Inhalt DEHNT sich (`flex: 1`).
   Andersherum — 100dvh am Inhalt — käme die Rechtszeile darunter noch dazu, und die Seite
   scrollte auf jedem Bildschirm ein Stück, obwohl alles hineinpasst. `min-h-screen` aus
   Tailwind (100vh) setzt `base.html` im Einstiegs-Rahmen deshalb gar nicht erst: `vh`
   rechnet mit ausgeblendeter Adressleiste und ist auf dem Handy zu groß.
   Geteilt durch den Seitenzoom (#525): Ab 1900 px wächst die ganze Seite, und `dvh` wüchse
   mit — die Anmeldung zeigte dann einen Scrollbalken. Regel im Seitenzoom-Block von base.html. */
.lp-einstieg {
  background: var(--bg);
  color: var(--text);
  position: relative;
  overflow-x: hidden;
  min-height: calc(100dvh / var(--seitenzoom, 1));
  display: flex;
  flex-direction: column;
}

.lp-einstieg-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 40px 20px 24px;
}

/* ================================================================================
   Wortmarke über der Karte
   ================================================================================
   Das Logo führt nach Hause — eine der stärksten Konventionen im Web: Bei zentriertem
   Logo scheitern in den Untersuchungen der Nielsen Norman Group 24 % daran, per Klick auf
   die Startseite zu kommen, bei linksbündigem nur 4 %. Unsere Position stimmte schon, es
   fehlte der Link.

   In der App führt er zu den eigenen Fächern. Das ist zugleich der Ausweg von diesem
   Bildschirm: Der Einstiegs-Rahmen hat bewusst keine Kopfleiste, also auch kein Abmelden —
   beides steht eine Seite weiter wieder da. */
.lp-logolink {
  display: inline-flex;
  align-items: center;
  align-self: center;
  flex: none;
  border-radius: 10px;
  transition: opacity .15s;
}
.lp-logolink:hover { opacity: .78; }
.lp-logolink:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; }
/* 🔴 Bewusst OHNE `display`. Zwischen den beiden Wortmarken schaltet Tailwind um
   (`dark:hidden` / `hidden dark:block`), und `einstieg.css` wird NACH `tailwind.css`
   geladen: Ein `display: block` hier gewönne im hellen Modus gegen `hidden` — beide
   Logos stünden nebeneinander. */
.lp-logo { height: 54px; width: auto; }

/* ================================================================================
   Die Karte
   ================================================================================ */

.lp-karte {
  width: 100%;
  max-width: 452px;
  background: var(--surface);
  border: 1px solid var(--linie);
  border-radius: 22px;
  padding: 34px 32px 30px;
  box-shadow: 0 24px 60px -20px var(--schatten-tief);
}

/* #479: Die Rechtsseiten stehen im selben Rahmen, brauchen aber mehr Zeile — Impressum,
   Datenschutz und der Meldeweg sind Lesetexte, keine Formularkarten. 452 px zwingen einen
   Fliesstext in eine Spalte, in der jeder Satz dreimal umbricht.

   🔴 Als Modifikator hier und NICHT als `!max-w-[660px]` am Element: Diese Datei wird nach
   `tailwind.css` geladen, eine Utility braeuchte also auf jeder der drei Seiten ein `!` —
   dieselbe Entscheidung dreimal, und beim vierten Screen vergisst sie jemand. */
.lp-karte--breit {
  max-width: 660px;
}

.lp-titel {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 0 0 6px;
  text-wrap: balance;
}

/* Die Unterzeile unter dem Titel. Kein `margin-bottom` hier: Was darunter kommt,
   unterscheidet sich je Schritt und bringt seinen eigenen Abstand mit. */
.lp-sub {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
  text-wrap: balance;
}

/* Der kleine Hilfstext unter einem Feld oder Knopf. */
.lp-hint {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* Der Erklärkasten in einer Einstiegs-Karte — das, was der Nutzer wissen muss, bevor er
   den Knopf drückt. Auf der Tresor-Einrichtung trägt er die Begründung, warum wir bei
   Verlust nicht helfen können; auf der Registrierung wird es der Datenschutz-Hinweis sein.

   Er steht hier und nicht als Ansammlung von Utilities, weil er seine Auszeichnungen
   mitgestaltet: Ein hervorgehobenes Wort darin bekommt die Fließtextfarbe, damit es aus
   dem Nebentext heraussticht — das ist über Tailwind-Klassen am Elternteil nicht
   erreichbar. */
.lp-warum {
  margin: 0;
  padding: 15px 17px;
  border-radius: 14px;
  background: var(--bg-2);
  border: 1px solid var(--linie);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.lp-warum p { margin: 0; }
.lp-warum p + p { margin-top: 10px; }
.lp-warum strong { color: var(--text); font-weight: 700; }

/* Die beiden Rückmeldungen. Beide sprechen über Rand UND Fläche, nicht nur über Farbe —
   im Windows-Kontrastmodus verschwinden Flächen, und der Rand trägt dann die Aussage
   (#482 §2). */
.lp-erfolg, .lp-fehler {
  margin: 0;
  padding: 13px 15px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
}
.lp-erfolg {
  background: color-mix(in srgb, var(--gut) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--gut) 32%, transparent);
  color: var(--gut-text);
}
.lp-fehler {
  background: var(--fehl-flaeche);
  border: 1px solid var(--fehl-rand);
  color: var(--fehl-text);
}

/* ================================================================================
   Eingabefeld und Primärknopf — Teil der Vorlage (#482 §4)
   ================================================================================ */

.lp-label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--text);
}

.lp-feld {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 13px 15px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.lp-feld::placeholder { color: var(--leise); }
.lp-feld:hover { border-color: var(--linie-wach); }
.lp-feld:focus {
  outline: none;
  background: var(--feld-fokus);
  border-color: var(--violet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 22%, transparent);
}

.lp-btn {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: var(--violet);
  border: 0;
  border-radius: var(--radius);
  padding: 14px 18px;
  cursor: pointer;
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--violet) 55%, transparent);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.lp-btn:hover {
  background: var(--violet-hover);
  box-shadow: 0 10px 26px -6px color-mix(in srgb, var(--violet) 70%, transparent);
}
.lp-btn:active { transform: translateY(1px); }
.lp-btn:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; }
/* `disabled` ist eine Höflichkeit des Browsers — dass ein gesperrter Knopf auch gesperrt
   AUSSIEHT, ist die eigentliche Aussage. Beim Zeremonie-Knopf hing genau daran ein
   Bildschirm, den Nutzer für kaputt hielten (#353). */
.lp-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ================================================================================
   Der freiwillige Code der Registrierung (#1541)
   ================================================================================
   Ein natives Auf- und Zuklappen: Zu steht nur der Umschalter da, offen nur das Feld — der
   Umschalter verschwindet dann, weil Zuklappen nichts bedeutet (ein leeres Feld heißt
   „ohne Code“). Ohne JavaScript geht beides genauso.

   Die Zeile am Feld trägt bewusst KEIN `display`: Diese Datei wird nach Tailwind geladen und
   gewönne sonst gegen dessen Ausblenden (Quirk 18). Symbol und Satz ordnet das innere
   Element an. */
.lp-code > summary { list-style: none; }
.lp-code > summary::-webkit-details-marker { display: none; }
.lp-code[open] > summary { display: none; }
.lp-code-umschalter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  font-size: 13px;
  font-weight: 600;
  color: var(--violet-2);
  cursor: pointer;
  border-radius: 8px;
}
.lp-code-umschalter:hover { text-decoration: underline; }
.lp-code-umschalter:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 3px; }
.lp-label-zusatz { font-weight: 400; color: var(--muted); }
/* Auch mit Fokus bleibt der Rand rot — der Schein darum zeigt weiter, wo man steht. */
.lp-feld--fehler,
.lp-feld--fehler:hover,
.lp-feld--fehler:focus { border-color: color-mix(in srgb, var(--fehl-text) 60%, transparent); }
.lp-feldfehler {
  margin: 7px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fehl-text);
}
.lp-feldfehler-zeile {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.lp-feldfehler-zeile > svg { margin-top: 2px; }

/* ================================================================================
   Windows-Kontrastmodus (#482 §2)
   ================================================================================
   Dort setzt das System eigene Farben durch, und alles, was nur über `background`
   spricht, verschwindet — der Rand muss dann die Form tragen. Die Rückmeldungen und das
   Erfolgszeichen haben ohnehin einen; Karte und Primärknopf hatten keinen, weil sie sich
   über die Fläche definieren.

   🔴 Und das Eingabefeld: Sein Fokus ist ein `box-shadow`, und Schatten werden in diesem
   Modus ebenfalls nicht gezeichnet. Zusammen mit `outline: none` bliebe für jemanden, der
   mit der Tastatur navigiert, **gar keine** Anzeige, wo er gerade steht. */
@media (forced-colors: active) {
  .lp-karte, .lp-btn { border: 1px solid currentColor; }
  .lp-feld:focus { outline: 2px solid; outline-offset: 1px; }
}

/* ================================================================================
   Die Rechtszeile
   ================================================================================
   Dieselben drei Wege wie in der Fußzeile der App. Der Entwurf nennt einen vierten
   („Verträge hier kündigen"); die Seite dazu entsteht erst mit #480 — ein Link ins Leere
   wäre schlechter als keiner. */
.lp-legal {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 20px 28px;
  font-size: 12px;
  color: var(--muted);
}
.lp-legal a { color: var(--leise); text-decoration: none; }
.lp-legal a:hover { color: var(--muted); text-decoration: underline; }
.lp-legal a:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; border-radius: 4px; }
/* Kündigen und Widerrufen: in Schriftfarbe und eine Stufe größer. § 312k Abs. 2 verlangt „gut
   lesbar“, § 356a Abs. 1 „hervorgehoben“ — klein und grau wie der Rest der Zeile war nach
   LG München I (12 O 4127/23, Rn. 23) nicht gut lesbar. */
.lp-legal a.lp-pflicht { color: var(--text); font-size: 14px; font-weight: 500; }
/* Auf dem Handy sind die Links sonst kleiner als die Fingerkuppe. */
@media (max-width: 640px) {
  .lp-legal a { display: inline-block; padding: 6px 2px; }
}

/* ================================================================================
   Bewegung beim Aufbau
   ================================================================================
   Das Bildmotiv (Schimmer, Höhenlinien, Bergzug) ist mit #557 nach `deko.css` gezogen —
   es gehört seither beiden Rahmen. Hier bleibt, was nur der Einstieg hat: Karte und Logo
   steigen beim Aufbau leicht auf.

   Wer Ruhe verlangt, bekommt einen stehenden Bildschirm (#482 §2). Die Animation steht
   deshalb VOLLSTÄNDIG in dieser Abfrage — nicht als Regel mit einer Ausnahme daneben.

   🔴 Nur `screen`, nie im Druck: `theme-boot.js` schaltet beim Drucken von dunkel auf hell.
   Dabei wird das helle Logo erst sichtbar, seine Animation beginnt neu bei `opacity: 0`, und der
   Drucker hält genau diesen ersten Moment fest — die Eingangsbestätigung käme ohne Logo aufs Papier. */
@media screen and (prefers-reduced-motion: no-preference) {
  .lp-karte, .lp-logo { animation: lp-aufsteigen .5s cubic-bezier(.2,.7,.3,1) both; }
  .lp-logo { animation-delay: .04s; }
  @keyframes lp-aufsteigen {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

/* ================================================================================
   Handy
   ================================================================================ */
@media (max-width: 420px) {
  .lp-logo { height: 46px; }
  .lp-karte { padding: 28px 22px 26px; border-radius: 18px; }
  .lp-titel { font-size: 24px; }
}

/* Das Erfolgszeichen am Ende einer Einstiegs-Strecke: ein Häkchen im Kreis.

   Es spricht über Rand UND Zeichen, nicht nur über die Fläche — im Windows-Kontrastmodus
   verschwinden Flächen, und dann trägt der Rand die Aussage (#482 §1/§2). Das Häkchen
   selbst kommt als Icon aus `_icons.html` und erbt seine Farbe von hier. */
.lp-fertigzeichen {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--gut);
  background: color-mix(in srgb, var(--gut) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--gut) 32%, transparent);
}