/* ─── deenquest.de — Gestaltung wie die App ───────────────────────────────
   KI W 12.11.26 (Website-KI, Handbuch WEBSITE-KI.md).
   Farben aus constants/colors.js: dunkel #0A0A0F und Gold #D4A03C, hell
   #F0EDE6 und Gold für Schrift #8E6303. Flächen wie flachGrau, der volle
   Knopf wie flachVoll (weiß im Dunkel, schwarz im Hell).
   Schrift Albert Sans (SIL OFL 1.1), liegt selbst auf der Seite. Nur der
   Name „DeenQuest" steht in der Systemschrift wie in der App (siehe
   .name-schrift). Keine Anfragen an fremde Server, sonst braucht die Seite
   einen Cookie-Banner.
   Die Seiten erzeugt `node werkzeuge/website-bauen.js`, diese Datei wird
   von Hand gepflegt. Nach einer Änderung neu bauen (die Adresse der Datei
   bekommt dann einen neuen Stand ?v=…). */

@font-face { font-family: "Albert Sans"; font-weight: 400; font-display: swap; src: url("schrift/AlbertSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 500; font-display: swap; src: url("schrift/AlbertSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 600; font-display: swap; src: url("schrift/AlbertSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Albert Sans"; font-weight: 700; font-display: swap; src: url("schrift/AlbertSans-Bold.woff2") format("woff2"); }


:root {
  color-scheme: dark light;
  --grund: #0A0A0F;
  --flaeche: rgba(255, 255, 255, 0.07);
  --flaeche-stark: rgba(255, 255, 255, 0.12);
  --rand: rgba(255, 255, 255, 0.13);
  --text: rgba(255, 255, 255, 0.95);
  --text-sub: rgba(255, 255, 255, 0.66);
  --text-leise: rgba(255, 255, 255, 0.46);
  --gold: #D4A03C;
  --gold-hell: #F1D9A4;
  --voll: #FFFFFF;
  --voll-schrift: #15131A;
  --spalte: 1120px;
  --schmal: 46rem;
  --text-spalte: 34rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --grund: #F0EDE6;
    --flaeche: rgba(0, 0, 0, 0.055);
    --flaeche-stark: rgba(0, 0, 0, 0.075);
    --rand: rgba(0, 0, 0, 0.11);
    --text: rgba(20, 16, 10, 0.92);
    --text-sub: rgba(20, 16, 10, 0.68);
    --text-leise: rgba(20, 16, 10, 0.52);
    --gold: #8E6303;
    --gold-hell: #C08A1E;
    --voll: #15131A;
    --voll-schrift: #FFFFFF;
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` gilt immer, auch bei Knöpfen und Bildern mit eigener Anzeige */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }

/* Alles Anklickbare: nie unterstrichen. Was nicht schon im Vollton steht,
   geht beim Darüberfahren sanft in den Vollton und sanft wieder zurück:
   leise Schrift wird volle Schrift, graue Knöpfe werden zum vollen Knopf
   (weiß im Dunkel, schwarz im Hell). Chris 12.11.26: „… sanft in den
   Vollton übergehen, sanft und wieder ausgehen und nicht unterstrichen
   werden." HIER STAND Unterstrich und Gold beim Darüberfahren. */
a { color: inherit; text-decoration: none; }
a, .knopf { transition: color 0.3s ease, background-color 0.3s ease; }
a:hover { color: var(--text); }

/* Der Name „DeenQuest" in der Systemschrift wie in der App (dort Titel
   „DeenQuest" mit fontFamily 'System', Dicke 700, Abstand -0.6 bei 30).
   Chris 12.11.26: „… nur den Titel, also den Namen der App, die Schrift
   anpassen und nicht den anderen Text." */
.marke, .buehne h1, .recht-name {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.buehne h1 { font-weight: 600; letter-spacing: -0.02em; } /* Chris 12.11.26: minimal dünner als 700 */
/* Oben links und im Fuß nicht so dick, so wie am Anfang (Chris 12.11.26).
   HIER STAND 700 wie beim großen Namen. */
.marke { font-weight: 600; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.ueberspringen {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  background: var(--voll); color: var(--voll-schrift);
  padding: 0.6rem 1rem; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.ueberspringen:focus { top: 1rem; }
.ueberspringen:hover { color: var(--voll-schrift); }

.spalte { width: min(100% - 2.5rem, var(--spalte)); margin-inline: auto; }
.spalte.schmal { width: min(100% - 2.5rem, var(--schmal)); }

/* Das Zeichen von DeenQuest als Kachel, wie in der App (constants/
   appSymbol.js): im dunklen Modus die helle Kachel, im hellen Modus die
   dunkle, Ecken 26 % der Breite. Chris 12.11.26: „Und es muss wie in der
   App sein." Danach: „… in der dunklen Version bei dem Icon, dass das
   Logo, das Icon dort schwarz ist. Der Hintergrund weiß." Darum ist
   symbol-hell.webp die weiße Kachel aus goldweiss-hell.png mit schwarzem
   Zeichen, symbol-dunkel.webp die dunkle Kachel mit Gold wie in der App. */
.zeichen {
  display: inline-block;
  flex-shrink: 0;
  aspect-ratio: 1;
  border-radius: 26%;
  background: url("bilder/symbol-hell.webp") center / cover no-repeat;
}
@media (prefers-color-scheme: light) {
  .zeichen { background-image: url("bilder/symbol-dunkel.webp"); }
}

/* ── Kopf ─────────────────────────────────────────────── */
.kopf { padding-block: 1.1rem; }
.kopf .spalte { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marke { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.125rem; }
.marke:hover { color: inherit; }
.marke .zeichen { width: 2.5rem; }
/* Logo oben links und im Fuß größer, am Computer noch etwas mehr (Chris
   12.11.26). HIER STANDEN 2rem oben und 1.75rem im Fuß. */
@media (min-width: 900px) {
  .marke { font-size: 1.25rem; gap: 0.75rem; }
  .marke .zeichen { width: 3rem; }
}
.kopf nav { display: flex; align-items: center; gap: 0.35rem; }
.kopf nav a {
  text-decoration: none; font-size: 0.9375rem; font-weight: 500; color: var(--text-sub);
  padding: 0.45rem 0.85rem; border-radius: 999px;
}
.kopf nav a[aria-current="page"] { color: var(--text); background: var(--flaeche); }
.kopf nav a.sprache { background: var(--flaeche-stark); color: var(--text); }
.kopf nav a:hover { color: var(--voll-schrift); background: var(--voll); }
@media (max-width: 400px) {
  .kopf .spalte { gap: 0.5rem; }
  .kopf nav { gap: 0.15rem; }
  .kopf nav a { padding: 0.45rem 0.65rem; font-size: 0.875rem; }
  .marke { font-size: 1.0625rem; gap: 0.5rem; }
}
/* Ganz schmale Handys: im Kopf nur das Zeichen, damit die Knöpfe passen */
@media (max-width: 360px) {
  .kopf .marke-wort { display: none; }
}

/* ── Bühne der Startseite ─────────────────────────────── */
.buehne { text-align: center; padding-top: clamp(2.5rem, 8vw, 5.5rem); }
.buehne .zeichen { width: clamp(4.5rem, 11vw, 6.25rem); }
.buehne h1 {
  margin: 1.1rem 0 0;
  font-size: clamp(2.75rem, 8.5vw, 5.5rem);
  line-height: 1;
}
/* Wie im Einstieg der App: leicht farbig, die Farben fließen langsam von
   links nach rechts. Die einzige Bewegung auf der Seite.
   Nahtlos ohne Ende (Chris 12.11.26: „nach paar Sekunden ist die abgehakt …
   muss aber linear flüssig weiterlaufen"): Das Bild ist 300 % breit und
   enthält dasselbe Farbmuster zweimal hintereinander (je 150 %). Die
   Bewegung von 75 % nach 0 % schiebt es um genau ein Muster weiter, der
   Neustart sieht also genau gleich aus wie das Ende, kein Sprung (geprüft
   auf weniger als einen halben Pixel). Kein Kacheln (no-repeat), weil der
   Browser Kacheln auf ganze Pixel rundet und es dann ruckt. Immer ist ein
   Teil des Goldes zu sehen. Breite, Farbstopps und Positionen nur
   zusammen ändern. Vorher (bis 12.11.26): 14 s, 250 %, von 100 % nach
   -150 %, das war anderthalb Muster und sprang beim Neustart. */
.leitsatz {
  width: fit-content;
  margin: 1.1rem auto 0;
  font-size: clamp(1.25rem, 3.2vw, 1.75rem);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: linear-gradient(90deg, var(--text) 0%, var(--gold-hell) 11%, var(--gold) 18%, var(--text) 27.5%, var(--text) 50%, var(--gold-hell) 61%, var(--gold) 68%, var(--text) 77.5%, var(--text) 100%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  background-position: 75% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: fliessen 6s linear infinite;
}
.leitsatz span { display: block; }
@keyframes fliessen { from { background-position: 75% 0; } to { background-position: 0% 0; } }

/* „Bald im App Store" in der vollen Fläche wie „Konto erstellen" in der
   App: im dunklen Modus weiß mit schwarzer Schrift, im hellen umgekehrt.
   Chris 12.11.26: „… macht den Button bitte auch mal weiß und schwarze
   Schrift im dunklen Modus." HIER STAND die leise Fläche
   (var(--flaeche-stark), Schrift var(--text)). */
.bald { display: inline-flex; flex-direction: column; align-items: center; margin-top: 2rem; }
.bald strong {
  display: inline-block; background: var(--voll); color: var(--voll-schrift);
  font-weight: 600; font-size: 1rem; padding: 0.65rem 1.3rem; border-radius: 999px;
}
.bald small { color: var(--text-leise); font-size: 0.875rem; margin-top: 0.55rem; }

.buehne-bild { margin: clamp(1.5rem, 5vw, 3rem) auto 0; max-width: 980px; }

/* Bilder der App laufen unten weich aus, wie im Einstieg */
.app-bild img {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.einleitung { text-align: center; padding-block: 0.5rem clamp(4rem, 10vw, 7rem); }
.einleitung h2, .einleitung p { margin-inline: auto; }

/* ── Überschriften und Text ───────────────────────────── */
h1, h2, h3 { font-weight: 600; margin: 0; }
h2 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); line-height: 1.1; letter-spacing: -0.025em; max-width: 18ch; }
h3 { font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.01em; }
.vorne { margin: 0.9rem 0 0; font-size: clamp(1.15rem, 2.2vw, 1.3rem); line-height: 1.45; color: var(--gold); font-weight: 500; max-width: var(--text-spalte); }
.bereich p, .einleitung p { color: var(--text-sub); max-width: var(--text-spalte); }
.bereich p { margin: 0.8rem 0 0; }

/* ── Bereiche der Startseite ──────────────────────────── */
.bereich { padding-block: clamp(3rem, 8vw, 6rem); }
.bereich .spalte { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.bereich .app-bild { max-width: 560px; margin-inline: auto; width: 100%; }
.unterteil { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--rand); }
.unterteil .vorne { margin-top: 0.5rem; font-size: 1.125rem; }
@media (min-width: 900px) {
  .bereich .spalte { grid-template-columns: 1.1fr 1fr; }
  .bereich.gespiegelt .app-bild { order: 2; }
}

/* ── Knöpfe ───────────────────────────────────────────── */
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0; }
.knopf {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 1rem;
  padding: 0.75rem 1.3rem; border-radius: 999px;
  background: var(--flaeche-stark); color: var(--text);
}
.knopf:hover, .knopf.voll { background: var(--voll); color: var(--voll-schrift); }

/* ── Hilfe-Kasten der Startseite ──────────────────────── */
.hilfe { padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 10vw, 7rem); }
.hilfe .kasten {
  background: var(--flaeche); border-radius: 28px;
  padding: clamp(1.75rem, 5vw, 3rem);
  display: grid; gap: 0.5rem 1.5rem; align-items: center;
}
.hilfe p { margin: 0.7rem 0 0; color: var(--text-sub); max-width: var(--text-spalte); }
.hilfe .knoepfe { margin-top: 0.75rem; }
@media (min-width: 900px) { .hilfe .kasten { grid-template-columns: 1fr auto; } .hilfe .knoepfe { margin-top: 0; } }

/* ── Textseiten (Support, Konto löschen, FAQ, Rechtstexte) ─ */
.seitenkopf { padding-block: clamp(2.5rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.5rem); }
.seitenkopf h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 380px) { .seitenkopf h1 { font-size: 2rem; } }
h2, h3 { overflow-wrap: break-word; hyphens: auto; }
.seitenkopf .vorne { max-width: none; }

.karten { display: grid; gap: 1rem; padding-bottom: clamp(4rem, 10vw, 7rem); }
.karte { background: var(--flaeche); border-radius: 24px; padding: clamp(1.4rem, 4vw, 2rem); }
.karte h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.015em; max-width: none; }
.karte p { margin: 0.6rem 0 0; color: var(--text-sub); }
.karte .knoepfe { margin-top: 1.1rem; }

.schritte { margin: 0.9rem 0 0; padding: 0; list-style: none; counter-reset: schritt; display: grid; gap: 0.7rem; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 2rem 1fr; gap: 0.75rem; align-items: start; color: var(--text); }
.schritte li::before {
  content: counter(schritt);
  width: 2rem; height: 2rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--voll); color: var(--voll-schrift);
  font-weight: 600; font-size: 0.95rem; line-height: 1;
}
.schritte li { padding-top: 0.2rem; }

/* FAQ, aufklappbar wie in der App, ohne Skript */
.faq-bereich { margin-bottom: 2.5rem; }
.faq-bereich h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.015em; max-width: none; margin-bottom: 0.9rem; }
details { background: var(--flaeche); border-radius: 18px; margin-top: 0.6rem; }
summary {
  cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.25rem; position: relative;
  font-weight: 600; line-height: 1.4; border-radius: 18px; transition: background-color 0.3s ease;
}
/* Die Frage wird beim Darüberfahren sanft heller (Chris 12.11.26). */
summary:hover { background: var(--flaeche-stark); }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 50%; width: 0.55rem; height: 0.55rem;
  border-right: 2px solid var(--text-sub); border-bottom: 2px solid var(--text-sub);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.2s ease;
}
details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.antwort { padding: 0 1.25rem 1.1rem; }
.antwort p { margin: 0 0 0.8rem; color: var(--text-sub); }
.antwort p:last-child { margin-bottom: 0; }
.fussfrage { color: var(--text-sub); padding-bottom: clamp(4rem, 10vw, 7rem); }


/* Rechtstexte: genau wie in der App (PrivacyScreen.js, ImprintScreen.js,
   TermsScreen.js mit LegalHeader.js, ListenKarte.js, RechtInhalt.js und
   rechtSchrift.js). Chris 12.11.26: „Wir haben ja dort diese Kästen und die
   Titel sind oben drüber. Das müssen wir versuchen, immer eins zu eins
   nachzubauen." Die Maße sind die der App in Punkten: Kopf 18 oben und
   unten, Symbol 64 mit 14 darunter, Titel 30 dick, „DeenQuest" 15 dick 10
   darunter, „Stand" 13/18 leise 3 darunter. Karten wie ListenKarte: Fläche
   #1C1C1E dunkel und weiß hell, Rundung 24, innen 16 seitlich und 14 oben
   und unten, 26 Abstand zur nächsten. Titel über der Karte 16 dick in der
   leisen Farbe, 16 eingerückt, 8 darüber Luft zur Karte. Text 15/20 in
   voller Farbe, 12 zwischen Absätzen. Spalte wie die App (Seitenrand 11),
   am Computer so breit wie vorher (--schmal), Chris 12.11.26: „… nicht so
   schmal … als wäre es im Hochkantformat". HIER STAND höchstens 600. */
:root { --recht-karte: #1C1C1E; --recht-titel: rgba(255, 255, 255, 0.60); --recht-ueber: rgba(255, 255, 255, 0.12); }
@media (prefers-color-scheme: light) {
  :root { --recht-karte: #FFFFFF; --recht-titel: rgba(20, 16, 10, 0.56); --recht-ueber: rgba(0, 0, 0, 0.06); }
}
.recht-kopf { text-align: center; padding: 18px 11px 18px; }
.recht-kopf .zeichen { width: 64px; display: block; margin: 0 auto 14px; }
.recht-kopf h1 { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; hyphens: auto; }
.recht-name { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0.2px; margin: 10px 0 0; }
.recht-kopf .stand { font-size: 13px; line-height: 18px; color: var(--recht-titel); margin: 3px 0 0; }
.rechtstext { width: min(100% - 22px, var(--schmal)); padding-bottom: clamp(4rem, 10vw, 7rem); }
.recht-karte {
  background: var(--recht-karte); border-radius: 24px; padding: 14px 16px; margin: 0 0 26px;
  font-size: 15px; line-height: 20px; color: var(--text);
}
.recht-karte p { margin: 12px 0 0; overflow-wrap: break-word; }
.recht-karte p:first-child { margin-top: 0; }
.recht-einleitung { text-align: center; margin-top: 10px; }
.recht-einleitung .hinweis { font-weight: 600; }
.recht-titel {
  font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: 0; color: var(--recht-titel);
  padding: 0 16px; margin: 0 0 8px; max-width: none;
}
.recht-nur-titel { margin-bottom: 26px; }
/* Das Verzeichnis wie RechtInhalt.js: 7 oben und unten in der Karte, jede
   Zeile 7 darüber und darunter. Beim Darüberfahren wird die Zeile sanft
   heller (Chris 12.11.26: „… soll sanft hell werden und dunkel werden"). */
.recht-inhalt { list-style: none; padding: 7px 6px; }
.recht-inhalt a { display: block; padding: 7px 10px; border-radius: 14px; transition: background-color 0.3s ease; }
.recht-inhalt a:hover, .recht-karte p a:hover { background: var(--recht-ueber); color: var(--text); }
/* Die E-Mail beim Verantwortlichen steht wie in der App in voller Farbe und
   wird beim Darüberfahren genauso heller hinterlegt. */
.recht-karte p a { border-radius: 8px; padding: 1px 4px; margin: -1px -4px; transition: background-color 0.3s ease; }
/* Links in FAQ-Antworten: in der Farbe des Absatzes, etwas kräftiger, werden
   beim Darüberfahren sanft voll (Regel für alles Anklickbare oben). */
.fussfrage a, .antwort a { font-weight: 600; }

/* Mein Konto (nur, wenn die Anmeldung an ist) */
.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.knopf { font: inherit; font-weight: 600; border: 0; cursor: pointer; }
button.knopf:disabled { opacity: 0.5; cursor: progress; }
.klein { font-size: 0.9375rem; }
.karte .klein { color: var(--text-leise); }
.anmelde-knoepfe .knopf { min-width: 15rem; text-align: center; }
.profil-zeile { display: flex; align-items: center; gap: 1rem; }
#profil-bild { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; background: var(--flaeche-stark); }
.karte .profil-name { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--text); }
.karte .profil-mail { margin: 0.15rem 0 0; color: var(--text-sub); overflow-wrap: anywhere; }
.rueckfrage { margin-top: 1.1rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: var(--flaeche-stark); }
.rueckfrage-titel { font-weight: 600; color: var(--text); margin: 0; }
#angemeldet { display: grid; gap: 1rem; }
/* Rot wie in der App (C.red dunkel, LIGHT_C.red hell) */
.knopf.gefahr { color: #E63946; }
.knopf.gefahr.voll-gefahr { background: #E63946; color: #FFFFFF; }
.knopf.gefahr:hover { background: #E63946; color: #FFFFFF; }
.meldung { margin: 0; min-height: 1.6em; color: var(--text-sub); }
.meldung.fehler { color: #E63946; }
.meldung.gut { color: var(--gold); }
@media (prefers-color-scheme: light) {
  .knopf.gefahr, .meldung.fehler { color: #B5272D; }
  .knopf.gefahr.voll-gefahr, .knopf.gefahr:hover { background: #B5272D; color: #FFFFFF; }
}

/* Platzhalter bis zum Live-Gang (website/platzhalter, nur die Startseite) */
/* Die schlichte Startseite passt ohne Scrollen auf den Bildschirm, auch am
   Computer: Der Fuß steht unten, die Bühne mittig dazwischen. So sieht man
   den großen Namen, wenn man unten eine Seite antippt, und er fliegt von
   dort nach oben links (Chris 12.11.26). HIER STAND min-height: 72svh, am
   Computer lag der Fuß dann unter dem Bildrand. */
.buehne.platzhalter { padding-block: clamp(1.5rem, 5vh, 3.5rem); }
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
main:has(> .buehne.platzhalter) { display: flex; flex-direction: column; justify-content: center; }
/* Nur die Adresse als leiser Link (Chris 12.11.26: „Nur Adresse als Link"). */
.platzhalter .kontakt { color: var(--text-sub); margin: 2.5rem 0 0; font-size: 0.9375rem; }


/* 404 */
.fehlt { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.fehlt .zeichen { width: 4.25rem; }
.fehlt h1 { margin-top: 1.25rem; font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -0.03em; }
.fehlt p { color: var(--text-sub); margin: 0.75rem 0 0; }
.fehlt .knoepfe { justify-content: center; margin-top: 1.5rem; }
.fehlt-en { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--rand); }
.fehlt-en h2 { font-size: 1.5rem; max-width: none; letter-spacing: -0.015em; }

/* ── Fuß ──────────────────────────────────────────────── */
/* Ohne Linie über dem Fuß und ohne „by Hikmah Hub" neben dem Namen, das
   steht schon im Copyright (Chris 12.11.26). HIER STAND
   border-top: 1px solid var(--rand) und .fuss .by. */
.fuss { padding-block: 2.25rem 3rem; font-size: 0.9375rem; color: var(--text-sub); }
.fuss .spalte { display: grid; gap: 1.5rem; }
.fuss .marke { font-size: 1.125rem; color: var(--text); }
.fuss .marke .zeichen { width: 2.5rem; }
@media (min-width: 900px) {
  .fuss .marke .zeichen { width: 3rem; }
}
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
/* Der Fuß sieht auf jeder Seite gleich aus, die aktuelle Seite wird dort
   nicht hervorgehoben (Chris 12.11.26). HIER STAND Unterstrich für
   a[aria-current]. */
.fuss .zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; color: var(--text-leise); }

/* ── Seitenübergänge ─────────────────────────────────────
   Chris 12.11.26: „… die gesamten Übergänge, wenn wir Seiten wechseln, alles
   mit einer schönen Animation und sanft … Genauso auch wenn dann oben links
   der Name der App eingeblendet wird."
   Ohne Skript, mit den Übergängen des Browsers zwischen zwei Seiten
   (View Transitions, Safari ab 18.2, Chrome ab 126; wo es sie nicht gibt,
   wechselt die Seite wie bisher). Was überall gleich bleibt, steht still
   (Logo oben links, Sprachwahl), die Seite blendet sanft über. Der große
   Name der Startseite fliegt in den kleinen oben links und zurück, das
   große Logo in das Logo über den Rechtstexten. Kommt der kleine Name neu
   dazu (etwa nach einem Neuladen), blendet er von links ein. */
@view-transition { navigation: auto; }
/* Sprünge innerhalb einer Seite (Inhaltsverzeichnis der Rechtstexte) rollen
   sanft, wie in der App (RechtInhalt.js: scrollTo mit animated, 12 Luft über
   der Überschrift). HIER STAND nichts, der Sprung war ein harter Schnitt. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.recht-titel { scroll-margin-top: 12px; }
.kopf .marke .zeichen { view-transition-name: kopf-zeichen; }
.kopf nav { view-transition-name: kopf-nav; }
/* Der Name fliegt genau von dort, wo er groß steht (Chris 12.11.26: „…
   dass von dort der Name der App nach links oben sanft fliegt … und nicht
   von irgendwo anders herkommt"). Dafür liegt um beide Namen ein Kasten
   genau so groß wie das Wort (inline-block, Zeilenhöhe 1). HIER STAND der
   Name an der ganzen Überschrift, die so breit ist wie die Spalte: Der Flug
   begann dann an einem viel breiteren Kasten, und das große und das kleine
   Wort standen beim Überblenden an verschiedenen Stellen. */
.name-gross, .kopf .marke-wort { display: inline-block; line-height: 1; }
.kopf .marke-wort, .name-gross { view-transition-name: kopf-name; }
.buehne .zeichen, .recht-kopf .zeichen, .fehlt .zeichen { view-transition-name: seiten-zeichen; }
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.22, 0.8, 0.24, 1); }
::view-transition-old(root) { animation: seite-aus 0.3s ease both; }
::view-transition-new(root) { animation: seite-ein 0.5s cubic-bezier(0.22, 0.8, 0.24, 1) 0.08s both; }
::view-transition-new(kopf-name):only-child { animation: name-ein 0.5s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
::view-transition-old(kopf-name):only-child { animation: name-aus 0.3s ease both; }
@keyframes seite-aus { to { opacity: 0; } }
@keyframes seite-ein { from { opacity: 0; transform: translateY(16px); } }
@keyframes name-ein { from { opacity: 0; transform: translateX(-10px); } }
@keyframes name-aus { to { opacity: 0; transform: translateX(-10px); } }

/* Ohne Übergang des Browsers (erster Aufruf, Neuladen, Firefox, ältere
   Safari): js/uebergang.js setzt .einblenden, die Seite blendet trotzdem
   sanft ein und der kleine Name kommt von links (Chris 12.11.26: „Warum
   funktionieren die Animationen nur manchmal …"). */
.einblenden body > main, .einblenden body > .fuss { animation: seite-ein 0.5s cubic-bezier(0.22, 0.8, 0.24, 1) both; }
.einblenden .kopf .marke-wort { animation: name-ein 0.5s cubic-bezier(0.22, 0.8, 0.24, 1) both; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .einblenden body > main, .einblenden body > .fuss, .einblenden .kopf .marke-wort { animation: none; }
  .leitsatz { animation: none; background: none; color: var(--gold); }
  summary::after { transition: none; }
}