/* ═══════════════════════════════════════════════════════════════════════════
   DZ-ANMELDUNG — der Empfang, Designvorlage 2

   Die vier server-gerenderten Seiten ohne Blazor-Circuit: /login, /join,
   /join/request, /setup (`Buehne()` in `Program.cs:598`). Für fast jede
   Nutzerin ist eine davon die ERSTE Seite überhaupt.

   ── WARUM DIESE FLÄCHE DEN UMBAU VOM 09.08.2026 ÜBERSPRUNGEN HAT ──────────
   Sie rendert NICHT durch `App.razor`. `AuthHead()` (Program.cs:573) baut
   einen eigenen `<head>` und lud dort bis heute `linie.css`,
   `linie-teile.css` und `linie-buehne.css` — keine einzige `dz-*`-Datei. Die
   neue Sprache war auf dieser Seite schlicht nicht vorhanden; wer nur CSS
   schrieb, änderte nichts. Der Kopf musste zuerst geändert werden.

   ── DIE SCHICHTENFOLGE, UND WARUM ZWEI DATEIEN AUS DEM KOPF FLIEGEN ───────
   Auf dieser Seite gibt es kein `pedigrove.css` und kein `@layer lg;` aus
   `App.razor`. Die Folge entsteht hier neu, bei der ersten Nennung:

     1. `linie.css`        eröffnet `@layer linie`  (Blätterdach + Canvas)
     2. `dz-token.css`     eröffnet `@layer dz`     (Palette, Schriften, Maße)
     3. diese Datei        schreibt in `@layer dz`  → schlägt `linie`

   `linie-buehne.css` ist RAUS, und das ist keine Geschmacksfrage: die Datei
   ist vollständig UNGESCHICHTET (kein `@layer`, geprüft — sie sagt es im
   eigenen Kopf, Zeile 15). Ungeschichtete normale Regeln schlagen JEDE
   Schicht. Gegen `.lg-tor h1 { font-family: Fraunces }` von dort käme aus
   `@layer dz` nichts an, egal wie spezifisch. Sie musste aus dem Kopf, nicht
   überschrieben werden. Die Datei selbst bleibt liegen — der Export der
   öffentlichen Vereinsseite hängt womöglich an ihren `.lg-offen`-Regeln.

   `linie-teile.css` ist ebenfalls raus, aus einem milderen Grund: sie liegt
   zwar in `@layer linie` und wäre schlagbar, aber sie gestaltet `.lg-feld`,
   `.lg-feld-marke` und `.lg-tun` vollständig aus (Fraunces-Eingaben ohne
   Kasten, JetBrains-Mono-Versalien, `--lg-glut` als Handlungsfarbe). Jede
   dieser Eigenschaften hier NOCHMAL zu deklarieren, nur um sie zurückzu-
   nehmen, wäre eine zweite Wahrheit. Diese Datei besitzt den Empfang ganz.

   WAS DAS KOSTET, ausdrücklich benannt: `linie.css` setzt keinen
   `body`-Rand — den brachte `linie-buehne.css` mit (`body.lg{margin:0}`).
   Ohne Ersatz kämen die 8px Browser-Standardrand zurück. Sie stehen unten.

   ── DAS REGIME IST EMPFANG, NICHT WERKBANK ───────────────────────────────
   Keine Seitenleiste, kein Verzeichnis, keine Dichte. Der Name des Vereins
   groß in der Serife, ein Satz, ein ruhiges Feld mit zwei Eingaben, ein
   Wort als Handlung. Der Vereinsname ist ein DATENWERT (`Program.cs:284`,
   `Clubs.Name`) — im Markup steht kein Verbandsname.

   ── KLEINTEXT ─────────────────────────────────────────────────────────────
   Der Vertrag kennt zwei Größen unter 18px: `--dz-mikro` (10px, Versalien
   mit weiter Sperrung) und `--dz-klein` (12px, Gemischtschrift mit
   Bedeutung). Rohe Zahlen darunter gibt es hier nicht.
   ALLES ANDERE auf dieser Fläche steht bei 18px oder darüber — Eingaben,
   Knopfwort, Einleitungssatz, Rückmeldung. Das ist kein Zufall: 18px ist die
   Grenze, ab der der Vertrag selbst keine Tokenpflicht mehr kennt, und es
   ist zugleich die Größe, bei der eine Anmeldung auf einem Telefon nicht
   zoomt (iOS zoomt unter 16px). Die Frau, die sich hier anmeldet, ist
   zwischen 30 und 60 und liest zur Hälfte mit Brille.

   Kontrast gerechnet (sRGB→relative Luminanz→WCAG), nicht geschätzt:
     --dz-tinte  auf --dz-papier            15,83 : 1
     --dz-fein   auf --dz-grund              6,51 : 1
     --dz-forst  auf --dz-sanft              6,19 : 1
     --dz-papier auf --dz-forst  (Knopf)     7,08 : 1
     --dz-lehm-tief auf --dz-lehm-sanft      4,66 : 1   (Fehlerzeile)
     --dz-lehm-tief auf --dz-papier          5,56 : 1   (Nebenweg-Verweis)

   ── KEINE KLASSE `primary` ───────────────────────────────────────────────
   `pedigrove.css:594` setzt für `button.primary` einen Verlauf mit
   `!important` in einer FRÜHEREN Schicht. Der Anmeldeknopf heißt `.lg-tun`
   und trägt sie nicht. (Auf dieser Seite ist `pedigrove.css` gar nicht
   geladen — die Regel gilt trotzdem, damit das Bauteil dieselbe Datei
   bleibt, wenn es je woanders auftaucht.)

   ── WAS UNANGETASTET BLEIBT ──────────────────────────────────────────────
   Feldnamen `username`/`password`, die Formular-Ziele, die Klassen `.e`/`.ok`
   und der eine `<button>` als erstes Knopfelement im Dokument: acht Werkzeuge
   unter `tools/design-gates/` hängen daran (`falte.mjs:26-28` füllt über
   `input[name=…]` und drückt Enter, `kopfprobe.mjs:27` klickt
   `button[type="submit"], button`, `gates.config.json:9` maskiert
   `canvas.lg-flaeche`). Das Blätterdach bleibt deshalb ebenfalls stehen.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer dz {

/* ── Der Grund ────────────────────────────────────────────────────────────
   `box-sizing` ist in diesem Produkt NICHT global gesetzt (siehe
   pedigrove.css) — hier deshalb auf den eigenen Teilbaum begrenzt, genau wie
   `dz-schale.css` es tut, statt es global zu erzwingen.
   Der Rand am `body` MUSS hier stehen: siehe Kopf dieser Datei. */
body.lg {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--dz-sans);
  font-optical-sizing: auto;
  font-variation-settings: "wght" 400, "wdth" 100, "opsz" 14;
  -webkit-font-smoothing: antialiased;
  color: var(--dz-tinte);
  /* Die drei Ebenen wörtlich aus der Vorlage
     (`01-uebersicht-instrument-mona-zahlen-sans.html:33-36`). `linie.css:49`
     setzt hier das warme Creme der alten Sprache; eine direkt treffende
     Regel in der späteren Schicht ersetzt sie. */
  background:
    radial-gradient(circle at 85% 7%, rgba(211, 219, 207, .54), transparent 30rem),
    radial-gradient(circle at 13% 96%, rgba(229, 220, 211, .35), transparent 26rem),
    linear-gradient(180deg, #f8faf7, #f3f5f1);
  /* MUSS getrennt stehen, und zwar NACH der Kurzform: `background:` mit lauter
     Verläufen setzt `background-color` auf seinen Anfangswert `transparent`.
     Die Vorlage hat denselben Fehler (`01-uebersicht…html:32-36` setzt erst
     `background:var(--bg)`, die Zeile darauf überschreibt die Farbe wieder mit
     Verläufen). Folge ohne diese Zeile: ein Kontrastprüfer, der die Elternkette
     nach `backgroundColor` absucht — `empfang.mjs:54-65` tut genau das —
     findet überall `rgba(0,0,0,0)` und rechnet gegen reines Weiß statt gegen
     den echten Grund. Meine Farben bestehen gegen beides, aber gemessen werden
     soll, was zu sehen ist. */
  background-color: var(--dz-grund);
}

.lg-tor,
.lg-tor *,
.lg-tor *::before,
.lg-tor *::after {
  box-sizing: border-box;
}

/* ── Der Schleier über dem Blätterdach ────────────────────────────────────
   Das Geflecht (`linie.gl.js`, gestartet in `AuthHead()`) zieht helle Wolken
   durchs Bild; ohne Schleier schwankte der Kontrast einer Grundlinie mit dem
   Wind. Links wird gelesen, rechts bleiben die Zweige sichtbar. Derselbe
   Gedanke wie in der alten Bühne, nur in der Papierfarbe dieser Sprache
   statt in der Creme der alten.
   `position:fixed` statt `absolute`: der Schleier soll beim Scrollen
   (Tastatur auf dem Telefon) nicht mitwandern. */
.lg-tor::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  width: min(100%, 76ch);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--dz-papier) 92%, transparent) 0%,
    color-mix(in srgb, var(--dz-papier) 74%, transparent) 46%,
    transparent 100%);
}
.lg-tor > * { position: relative; z-index: 1; }

/* ── Die Fläche darf atmen ────────────────────────────────────────────────
   Linksbündig auf halber Breite, senkrecht in der Mitte. Eine zentrierte
   380px-Karte ist genau der Anblick, den diese Seiten hinter sich lassen. */
.lg-tor {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* `safe center` ist KEINE Verzierung, sondern die Reparatur eines echten
     Falls: /setup trägt fünf Felder und zwei Zwischenüberschriften, /join/request
     fünf Felder und ein Textfeld. Bei 360×780 (die schmale Breite, die
     `empfang.mjs:39/103` prüft) ist dieser Inhalt höher als das Fenster. Ein
     zentrierter Flex-Container schiebt überlaufenden Inhalt dann nach BEIDEN
     Seiten hinaus — der obere Teil landet im negativen Bereich und ist per
     Scrollen nicht mehr erreichbar. Auf /setup wäre das der Vereinsname und
     das erste Feld. `safe` fällt bei Überlauf auf `flex-start` zurück.
     Die Kurzform darüber bleibt als Rückfallebene für Browser ohne `safe`. */
  justify-content: safe center;
  align-items: flex-start;
  padding: clamp(40px, 8vh, 112px) clamp(22px, 7vw, 120px);
  max-width: min(100%, 66ch);
}

/* Der Produktname, klein und gesperrt — dieselbe Zeile wie `.kicker` in der
   Inhaltsschale (`dz-schale.css:459`). Sie kommt zu ihrem Verein; das
   Werkzeug nennt sich einmal und schweigt dann. */
.lg-tor .lg-marke {
  margin: 0 0 clamp(12px, 1.8vh, 20px);
  font-family: var(--dz-sans);
  font-size: var(--dz-mikro);
  font-variation-settings: "wght" 600, "wdth" 91, "opsz" 11;
  letter-spacing: var(--dz-sperr);
  text-transform: uppercase;
  color: var(--dz-forst);
}

/* Der Name des Vereins. Kein fester Verbandsname im Markup — der Wert kommt
   aus `Clubs.Name`; steht dort keiner (frische Installation vor /setup),
   trägt `Program.cs:626` „Willkommen" ein.
   Zeilenhöhe 0.9 statt der 0.78 aus der Vorlagen-Hero: die Vorlage setzt
   dort einen einzeiligen Titel, hier kann „Demo-Zuchtverein e. V." über drei
   Zeilen laufen, und bei 0.78 klebten die Oberlängen an den Unterlängen. */
.lg-tor h1 {
  margin: 0 0 clamp(18px, 3vh, 36px);
  font-family: var(--dz-display);
  font-weight: 400;
  font-size: clamp(3.0667rem, 8vw, 6.9333rem);
  line-height: 0.9;
  letter-spacing: -0.042em;
  color: var(--dz-tinte);
  max-width: 13ch;
  overflow-wrap: anywhere;
}

/* Der eine Satz darunter. 18px, nicht 14 — siehe Kleintext-Absatz im Kopf. */
.lg-tor-satz {
  margin: 0 0 clamp(24px, 4vh, 44px);
  font-size: var(--dz-gross);
  line-height: 1.6;
  color: var(--dz-fein);
  max-width: 44ch;
}

/* ── Die Rückmeldung ──────────────────────────────────────────────────────
   Drei Zustände, alle drei aus `Program.cs:272-274`, und es gibt keinen
   vierten (FREMDBEFUND: `/auth/login` kennt nur `?error=1`, `Program.cs:453`
   — eine Sperre nach zu vielen Versuchen existiert in diesem Server nicht):
     `.e`   ?error   falscher Zugang, auch bei leerem Feld
     `.ok`  ?joined  Beitritt eingelöst, erste Anmeldung
     `.ok`  ?setup   Verein eingerichtet, Anmeldung als Vorstand

   Sie STEHEN, sie blenden nicht ein und aus: die Zeile liegt im normalen
   Fluss über dem Formular, verschiebt nichts nachträglich und verschwindet
   nicht von selbst. Die kurze Aufblende unten bewegt nur die eigene Deckkraft
   und ist unter `prefers-reduced-motion` ganz aus.

   Farbe ist NIE das alleinige Signal — der Unterschied steht im Satz. Der
   senkrechte Strich links markiert zusätzlich den Ort, damit die Zeile auch
   bei abgeschalteten Farben ein Kasten bleibt und kein Absatz. */
.lg-tor .e,
.lg-tor .ok {
  margin: 0 0 clamp(20px, 3vh, 34px);
  padding: 15px 18px;
  max-width: 44ch;
  border-radius: var(--dz-radius-klein);
  border-left: 3px solid;
  font-size: var(--dz-gross);
  line-height: 1.45;
  box-shadow: var(--dz-schatten-nah);
  animation: dzEmpfangAuf 0.5s cubic-bezier(.16, 1, .3, 1);
}
/* Warm als Schrift → `--dz-lehm-tief` (Vertrag, dz-token.css:105).
   `--dz-lehm` trüge diesen Text bei 3,49:1 nicht. */
.lg-tor .e {
  background: var(--dz-lehm-sanft);
  border-left-color: var(--dz-lehm);
  color: var(--dz-lehm-tief);
}
.lg-tor .ok {
  background: var(--dz-sanft);
  border-left-color: var(--dz-salbei);
  color: var(--dz-forst);
}

/* ── Das ruhige Feld ──────────────────────────────────────────────────────
   Das Formular SELBST ist die schwebende Fläche — dieselbe Bauart wie
   Leiste und Inhaltsschale hinter der Anmeldung (`dz-schale.css:114/411`):
   Papier, großer Radius, weicher Schatten, Milchglas. Kein zweiter Kasten um
   das Formular herum, damit das Markup unverändert bleiben kann. */
.lg-tor form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 42ch;
  padding: clamp(22px, 3vh, 30px) clamp(20px, 3vw, 30px);
  border-radius: var(--dz-radius-gross);
  background: color-mix(in srgb, var(--dz-papier) 93%, transparent);
  border: 1px solid color-mix(in srgb, var(--dz-papier) 96%, transparent);
  box-shadow: var(--dz-schatten);
  backdrop-filter: blur(var(--dz-glas));
}

/* Zwischenüberschrift mehrteiliger Formulare (/setup hat zwei Abschnitte).
   Dieselbe gesperrte Versalzeile wie die Marke oben — nicht größer als der
   Inhalt, den sie überschreibt. */
.lg-tor h2 {
  margin: clamp(18px, 2.6vh, 26px) 0 clamp(12px, 1.6vh, 16px);
  font-family: var(--dz-sans);
  font-size: var(--dz-mikro);
  font-variation-settings: "wght" 600, "wdth" 91, "opsz" 11;
  letter-spacing: var(--dz-sperr);
  text-transform: uppercase;
  color: var(--dz-forst);
}
.lg-tor form > h2:first-child { margin-top: 0; }

/* ── Die Eingaben ─────────────────────────────────────────────────────────
   ECHTE Beschriftungen, keine Platzhalter: `<label class="lg-feld">` umfasst
   Marke und Feld (`Program.cs:631-634`), die Zuordnung hängt also nicht an
   einem `for`/`id`-Paar, das jemand später auseinanderpflegen könnte.
   Ein Platzhalter verschwindet beim Tippen — genau dann, wenn man ihn
   braucht, und Autofill füllt Felder, deren Beschriftung nur ein Platzhalter
   war, regelmäßig falsch. */
.lg-tor .lg-feld {
  display: block;
  width: 100%;
  margin: 0 0 18px;
}
.lg-tor .lg-feld-marke {
  display: block;
  margin-bottom: 7px;
  font-family: var(--dz-sans);
  font-size: var(--dz-mikro);
  font-variation-settings: "wght" 600, "wdth" 91, "opsz" 11;
  letter-spacing: var(--dz-sperr);
  text-transform: uppercase;
  color: var(--dz-fein); /* NIE --dz-still: 4,01:1 fällt bei 10px durch AA */
}
.lg-tor .lg-feld input,
.lg-tor .lg-feld textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--dz-fein) 22%, transparent);
  border-radius: var(--dz-radius-klein);
  background: var(--dz-papier);
  font-family: var(--dz-sans);
  font-size: var(--dz-gross);
  font-variation-settings: "wght" 450, "wdth" 100, "opsz" 16;
  line-height: 1.4;
  color: var(--dz-tinte);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lg-tor .lg-feld textarea {
  resize: vertical;
  min-height: 96px;
}
/* Der Einladungscode ist die einzige Eingabe mit Platzhalter
   (`Program.cs:659`, „PGV-XXXXXX") — dort ist er ein FORMATBEISPIEL neben
   einer echten Beschriftung, nicht ihr Ersatz. `--dz-fein` statt eines
   Grautons mit Alpha: er muss lesbar sein, sonst ist das Beispiel keines. */
.lg-tor .lg-feld input::placeholder {
  color: var(--dz-fein);
  opacity: 0.75;
}
.lg-tor .lg-feld input:hover,
.lg-tor .lg-feld textarea:hover {
  border-color: color-mix(in srgb, var(--dz-salbei) 55%, transparent);
}
/* Der Fokusring ist derselbe wie überall in dieser Sprache
   (`dz-schale.css:270`): 3px Salbei bei 17%. Ein sichtbarer Ring ist auf
   dieser Seite keine Kür — wer mit der Tastatur anmeldet, sieht sonst nicht,
   in welchem der beiden Felder er steht. */
.lg-tor .lg-feld input:focus,
.lg-tor .lg-feld textarea:focus {
  border-color: var(--dz-salbei);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dz-salbei) 17%, transparent);
}
/* Autofill: der Browser malt sonst sein eigenes Blassgelb über die Fläche und
   das gestaltete Feld ist im wichtigsten Fall — dem gespeicherten Zugang —
   das einzige, das anders aussieht. Ein Innenschatten in Papierweiß ist der
   einzige Weg, das zu überschreiben; `background` selbst greift dort nicht. */
.lg-tor .lg-feld input:-webkit-autofill,
.lg-tor .lg-feld input:-webkit-autofill:hover,
.lg-tor .lg-feld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--dz-tinte);
  box-shadow: 0 0 0 40px var(--dz-papier) inset;
  transition: background-color 5000s ease-in-out 0s;
}
.lg-tor .lg-feld input:-webkit-autofill:focus {
  box-shadow: 0 0 0 40px var(--dz-papier) inset,
              0 0 0 3px color-mix(in srgb, var(--dz-salbei) 17%, transparent);
}

/* ── Die Handlung ─────────────────────────────────────────────────────────
   Ein gefüllter Knopf, kein Wort mit Unterstrich: auf dieser Seite gibt es
   genau EINE Handlung, und sie darf man sehen. Volle Feldbreite, damit er
   unter den beiden Eingaben steht wie ihr Abschluss und nicht wie ein
   Nachtrag.
   KEINE Klasse `primary` — siehe Kopf dieser Datei.
   Das Wort steht bei 18px: über der Kleintext-Grenze, damit hier kein
   12px-Etikett die einzige Handlung der Seite trägt. */
.lg-tor .lg-tun {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  margin-top: 6px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--dz-radius-klein);
  background: var(--dz-forst);
  color: var(--dz-papier);
  font-family: var(--dz-sans);
  font-size: var(--dz-gross);
  font-variation-settings: "wght" 550, "wdth" 100, "opsz" 16;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.lg-tor .lg-tun:hover {
  background: var(--dz-tinte);
  box-shadow: var(--dz-schatten-nah);
}
.lg-tor .lg-tun:active { transform: translateY(1px); }
.lg-tor .lg-tun:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dz-salbei) 45%, transparent);
}
.lg-tor .lg-tun[disabled] {
  background: var(--dz-stein);
  color: var(--dz-fein);
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Die Nebenwege ────────────────────────────────────────────────────────
   Beitreten, registrieren, zurück zur Anmeldung — stille Zeilen unter dem
   Feld, nicht eine zweite und dritte Schaltfläche. `--dz-klein` ist die
   Vertragsgrenze für Gemischtschrift mit Bedeutung; der Verweis selbst trägt
   `--dz-lehm-tief` (5,56:1 auf Papier) und eine Unterlinie, damit er nicht
   allein an der Farbe erkennbar ist. */
.lg-tor-alt {
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  max-width: 42ch;
  font-size: var(--dz-klein);
  font-variation-settings: "wght" 450, "wdth" 100, "opsz" 12;
  line-height: 2;
  color: var(--dz-fein);
}
/* `inline-block` + `min-height` sind hier PFLICHT, nicht Geschmack. WCAG 2.2
   verlangt 24×24 CSS-px Zielgröße, und `empfang.mjs:82-83` misst das mit
   `getBoundingClientRect()` auf jedem `A`. Ein INLINE-Element liefert dort
   nicht die Zeilenhöhe, sondern seine Schriftmetrik: bei 12px sind das rund
   14px Höhe — die `line-height:2` des Absatzes zählt nicht mit, sie macht das
   Zeilenfeld hoch, nicht das Element. Diese vier Verweise („Hier beitreten",
   „Zur Anmeldung", „Registrierung beantragen") wären auf allen vier Seiten
   durchgefallen, und auf einem Telefon sind sie das einzige Ziel neben dem
   Knopf. Breite ist unkritisch: der kürzeste Verweis misst rund 80px. */
.lg-tor-alt a {
  display: inline-block;
  min-height: 24px;
  line-height: 1.6;
  color: var(--dz-lehm-tief);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--dz-lehm-tief) 35%, transparent);
  padding-bottom: 2px;
  transition: border-color 0.3s ease;
}
.lg-tor-alt a:hover,
.lg-tor-alt a:focus-visible {
  border-bottom-color: var(--dz-lehm-tief);
}
.lg-tor-alt a:focus-visible {
  outline: 2px solid var(--dz-salbei);
  outline-offset: 3px;
  border-radius: 2px;
}

@keyframes dzEmpfangAuf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Schmale Breiten ──────────────────────────────────────────────────────
   Die Fläche bleibt dieselbe Komposition, sie wird nur enger. Was NICHT
   schrumpft: Eingaben, Knopfwort und Rückmeldung bleiben bei 18px — auf
   einem Telefon erst recht. */
@media (max-width: 600px) {
  .lg-tor {
    padding: clamp(28px, 5vh, 48px) 18px;
    max-width: 100%;
  }
  .lg-tor h1 { font-size: clamp(2.5333rem, 11vw, 3.8667rem); max-width: none; }
  .lg-tor form { max-width: none; }
  .lg-tor .e, .lg-tor .ok, .lg-tor-satz, .lg-tor-alt { max-width: none; }
  /* Der Schleier deckt hier die volle Breite: auf einem schmalen Schirm gibt
     es keine rechte Hälfte, auf der die Zweige noch etwas zu zeigen hätten. */
  .lg-tor::before { width: 100%; }
}

/* Auf niedrigen Schirmen rückt alles nach oben statt in die Mitte — sonst
   schiebt die eingeblendete Tastatur das Formular aus dem Bild. */
@media (max-height: 640px) {
  .lg-tor { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-tor .e,
  .lg-tor .ok { animation: none; }
  .lg-tor .lg-feld input,
  .lg-tor .lg-feld textarea,
  .lg-tor .lg-tun,
  .lg-tor-alt a { transition: none; }
  .lg-tor .lg-tun:active { transform: none; }
}

}
