/* ===========================================================
   DAS WERK - Startseite AdenAI, Entwurf E2 (Aurora)
   Das Beiwerk: was zu keinem Band der Seite gehoert. Die Zeichen der
   Entschluesselung, die Hilfsklassen fuer Screenreader und den Sprung zum
   Inhalt, die sechs Regeln, die im Entwurf als style="..." im Markup standen,
   und der Sprachumschalter in Kopf und Fuss.

   **Am 2026-08-29 aus startseite-doku.css herausgeschnitten** (Fahrplan 568),
   zusammen mit der Fusszeile (startseite-fuss.css). Die Begruendung dazu
   steht im Kopf jener Datei.

   **Warum das hier zusammen liegt und nicht bei den Baendern:** es gehoert
   keinem. `.nur-sr` und `.sprung` gelten fuer die ganze Seite, `.zeichen`
   gehoert dem Skript, und die sechs ex-Inline-Regeln haben nur eines gemeinsam
   - sie standen im Markup und muessen es nicht mehr. Ein Thema aus lauter
   Kleinteilen ist ein ehrlicheres Thema als eines, das man ihnen anhaengt.

   **Die Reihenfolge der <link>-Zeilen in landing.html ist die Kaskade**: diese
   Datei steht zwischen `startseite-fuss.css` und `startseite-faelle.css`, und
   faelle bleibt zuletzt, weil es alles ueberstimmt.
   =========================================================== */

/* ---------- Entschluesselung -------------------------------------------- */

.zeichen { display: inline-block; white-space: pre; }
.zeichen.rausch { color: var(--leit-tief); }

/* ---------- Nur fuer Screenreader --------------------------------------- */

.nur-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprung {
  position: absolute;
  left: var(--rand); top: 12px;
  z-index: 200;
  transform: translateY(-200%);
  transition: transform 0.2s ease;
}
.sprung:focus { transform: none; }



/* ---------- Was im Entwurf als style="..." im Markup stand ---------------
   Sechs Stellen. Sie stehen hier und nicht dort, weil `farbjagd.py` die
   Inline-Stile der Vorlagen mitliest und eine Farbe darin je Vorlage einen
   Eintrag in der Freiliste braeuchte - und weil eine Aussage ueber Aussehen
   in die Stildatei gehoert. */

.preis-h2 { margin-bottom: 6px; }
.preis-hinweis { margin: 0; color: var(--dimm); }
.preis-zeile { margin: 0; }
.vorspann--mitte { margin: 0 auto 40px; }
.ehrlich-h2 { font-size: clamp(26px, 3.4vw, 38px); }
.ehrlich-text { color: var(--dimm); margin: 0; }

/* Der Sprachumschalter in der Kopfzeile. Er kommt aus
   includes/language_switcher.html und traegt Tailwind-Klassen; hier steht
   nur, dass er in der Reihe mitlaeuft. Schmal faellt er weg - der Platz
   reicht dort nicht fuer fuenf Bedienelemente, und er steht in der
   Fusszeile ein zweites Mal (startseite-faelle.css). */
.kopf-sprache { display: inline-flex; align-items: center; }

/* Adrians Logo im Fuss der Startseite. Es steht neben dem Satz, nicht ueber
   ihm - die Zeile liest sich als eine. */
.fuss-marke { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Der Sprachumschalter auf dieser Seite ------------------------
   **Gemessen im Browser: seine Schaltflaeche ist 20 Pixel hoch**, an beiden
   Stellen (Kopf und Fuss). Die 24 aus WCAG 2.5.8 halten wir sonst ueberall
   ein.

   Der Baustein kommt aus `includes/language_switcher.html` und steht auf
   JEDER oeffentlichen Seite und im Dashboard. **Dort ist er unveraendert
   geblieben**: eine Zeile in einem geteilten Baustein aendert vier Layouts
   auf einmal, und diese Runde baut die Startseite um und nicht die Kopfzeile
   des Produkts. Der Wert steht im Bericht - der Rest des Produkts hat
   dieselben 20 Pixel und gehoert bei Gelegenheit mit behoben.

   Hier reicht eine Regel, weil beide Stellen dieser Seite gehoeren. */
#kopf .kopf-sprache button,
#fuss .fuss-wege button {
  min-height: 24px;
}