/* Eine Datei, keine Abhängigkeiten. Keine Web-Fonts, kein CDN, keine Skripte:
   die Seite lädt aus keiner fremden Quelle nach. Das ist nicht nur schlank,
   es hält auch die Datenschutzerklärung kurz: es gibt keinen Drittanbieter,
   an den ein Browser beim Aufruf eine IP-Adresse schickt.

   Gliederung nach dem Muster von scripts/deploy.sh: Farben, Grundlagen, Kopf
   und Navigation, Typografie, Komponenten, Statusmarker. Von allgemein nach
   speziell, damit spätere Regeln frühere überschreiben und nicht umgekehrt. */

/* ─── FARBEN ───────────────────────────────────────────────
   Zwei Paletten, kein Umschalter auf der Seite: Der bräuchte JavaScript, um
   die Wahl zu merken, und damit fielen die Zusage "keine Skripte" und die
   Begründung zu § 25 TDDDG. Beim Ändern einer Farbe die Kontraste neu rechnen,
   nicht schätzen; Einzelheiten in docs/WEBSITE.md. */

:root {
  color-scheme: light dark;
  --bg: #faf9f6;
  --fg: #1f2124;
  --muted: #5d6167;
  --rule: #e2e2dd;
  --accent: #6d4c2f;
  --code-bg: #efeee8;
  --warn: #8a5a1f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181a;
    --fg: #e6e4df;
    --muted: #a0a4aa;
    --rule: #2c2f33;
    --accent: #cfa971;
    --code-bg: #212427;
    --warn: #d8a24a;
  }
}

/* ─── GRUNDLAGEN ───────────────────────────────────────────  */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.65;
  /* Beide Schreibweisen: Safari kennt nur die präfixierte, Chrome und Edge
     nur die ungepräfixte. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Unteilbare Zeichenketten dürfen die Seite nicht breiter machen als das
     Fenster. Gemessen am 26.07.2026 in einem Rahmen fester Breite: Der Linktext
     "ebible.org/deu1951/copyright.htm" auf index.html schob die Seite bei
     320 px um 14 px über den Rand, weil eine nackte URL keine Umbruchstelle
     hat. `break-word` und nicht `anywhere`: `anywhere` ginge zusätzlich in die
     Min-Content-Breite ein und könnte die Spalten der Werkzeug-Tabelle
     umlegen, was hier niemand verlangt hat. */
  overflow-wrap: break-word;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* ─── KOPF UND NAVIGATION ──────────────────────────────────  */

header.site {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
}

/* Die Wortmarke ist bewusst KEINE Überschrift. Vorher stand sie als fette
   Serifenzeile über der h1, also im selben typografischen Material, nur
   kleiner; das Auge las beides als eine Reihe von Überschriften und die obere
   wirkte wie eine kleingeratene Version der unteren. Behoben nicht über die
   Größe, sondern über die Gattung: serifenlos, gesperrte Versalien, klein.
   Damit steht oben ein Funktionsstreifen aus Marke und Navigation, darunter
   der Serifeninhalt, und die h1 dominiert unangefochten. Beim Ändern die
   Trennung erhalten, nicht die Marke wieder vergrößern. */
header.site a.brand {
  color: var(--fg);
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

nav.site {
  margin-top: 0.5rem;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
}

nav.site a {
  color: var(--muted);
  text-decoration: none;
  margin-right: 1.1rem;
}

nav.site a:hover, nav.site a:focus { color: var(--accent); text-decoration: underline; }

/* Die laufende Seite bleibt anklickbar, wird aber nicht mehr beworben. */
nav.site a[aria-current="page"] { color: var(--fg); }

/* Externe Ziele in der Leiste als solche kennzeichnen. Attributselektor statt
   eigener Klasse: Ein neuer externer Link bekommt den Pfeil von selbst, ein
   interner nie, weil interne Verweise mit "/" beginnen. Ein Schriftzeichen,
   keine Bilddatei: Es wird nichts nachgeladen, die Zusage in Abschnitt 3 der
   Datenschutzerklärung bleibt wahr. Nur in der Navigation, nicht im Fließtext,
   dort stehen zu viele Quellenlinks und es würde flimmern. */
nav.site a[href^="http"]::after {
  content: "\2197";
  margin-left: 0.15em;
  font-size: 0.85em;
}

/* ─── TYPOGRAFIE ───────────────────────────────────────────
   Nur Elementselektoren. Die Navigationsregeln oben sind spezifischer und
   gewinnen gegen `a`, unabhängig von der Reihenfolge. */

h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 1rem; }
h2 { font-size: 1.3rem; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 0.5rem; }

/* Hier steht bewusst **kein** `hyphens: auto`. Der Anlass war echt: Das
   unteilbare Wort "Datenschutzerklärung", 20 Zeichen bei 1,9 rem, schob
   `datenschutz.html` bei 320 px um 66 px und bei 360 px um 26 px über den Rand
   (am 26.07.2026 in einem Rahmen fester Breite gemessen; ab 390 px war die
   Seite sauber und darunter nicht). Die automatische Trennung behebt das, aber
   sie kostet mehr, als sie einbringt, und beides ist nachgemessen:

   - Sie trifft die Stelle schlecht. Auf `datenschutz.html` trennte Chrome nach
     "Datenschutzer" (erste Zeile 228,1 px, deckungsgleich mit der Textbreite
     genau dieser Zeichenfolge). Das ist eine Silbengrenze, verdeckt aber die
     Wortfuge: "Datenschutzer" liest sich als eigenes Wort.
   - Sie feuert, wo nichts überläuft. Die `h1` von `index.html` umbrach vorher
     an Leerzeichen und lief bei keiner der fünf Breiten über; mit `auto` stand
     dort "Wortgetreue Bi-belarbeit", also ein abgebrochenes Wort aus zwei
     Buchstaben mitten in "Bibel". Gerendert und angesehen, nicht geschlossen.

   Das Mittel ist deshalb ein weicher Trennstrich an der Wortfuge, und zwar nur
   in der einen Überschrift, die nachweislich überläuft: `Datenschutz­erklärung`
   in `datenschutz.html`. Ohne `hyphens: auto` gilt der Vorgabewert `manual`,
   und der bricht ausschließlich an dieser Stelle. Gemessen: erste Zeile
   194,9 px, deckungsgleich mit "Datenschutz", danach "erklärung", kein
   Überlauf bei 320, 360, 390, 430 und 500 px.

   Wer eine lange Überschrift ergänzt, setzt dort ein `­` und misst nach.
   `hyphens: auto` als Abkürzung dafür hat diesen Vergleich schon verloren. Den
   harten Notfallbruch übernimmt das `overflow-wrap` oben auf `body`. */

p, ul, ol, dl { margin: 0 0 1rem; }
li { margin-bottom: 0.35rem; }

a { color: var(--accent); }

address { font-style: normal; }

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

code { background: var(--code-bg); padding: 0.12em 0.35em; border-radius: 3px; }

pre {
  background: var(--code-bg);
  padding: 0.9rem 1rem;
  border-radius: 5px;
  overflow-x: auto;
  line-height: 1.5;
}

/* Ein Klick wählt den ganzen Block aus, danach genügt Strg+C bzw. Cmd+C. Das
   steht anstelle des üblichen Kopierknopfes, und zwar nicht aus Sparsamkeit:
   Ein Kopierknopf braucht Zugriff auf die Zwischenablage, den es nur über
   JavaScript gibt. Abschnitt 3 der Datenschutzerklärung sagt aber ausdrücklich
   zu, dass keine Skripte ausgeführt werden, und darauf stützt sich die
   Begründung zu § 25 TDDDG, mit der der fehlende Consent-Banner steht. Zwei
   Aussagen in einem Rechtstext für einen Komfortknopf umschreiben lohnt nicht;
   dieselbe Abwägung hat schon den Dark-Mode-Umschalter verhindert.
   `cursor: pointer` ist die einzige Einladung dazu. Ein erklärender Satz auf
   der Seite steht bewusst nicht dabei: Der Weg zur Entdeckung ist hier
   derselbe wie der Weg zur Benutzung, wer die Adresse kopieren will, klickt
   ohnehin in den Block. Begründung in docs/WEBSITE.md. */
pre code {
  background: none;
  padding: 0;
  cursor: pointer;
  -webkit-user-select: all;
  user-select: all;
}

/* ─── KOMPONENTEN ──────────────────────────────────────────  */

.lead { font-size: 1.15rem; color: var(--muted); }

/* Breite Inhalte scrollen in sich, nie die Seite. */
.scroll { overflow-x: auto; }

/* Wer in sich scrollt, muss mit der Tastatur erreichbar sein: Sonst kommt an
   den überstehenden Teil nur heran, wer ein Zeigegerät hat. Deshalb tragen
   `.scroll` und jedes `pre` im HTML ein `tabindex="0"`. Das ist ein
   HTML-Attribut und kein Skript, die Zusage in Abschnitt 3 der
   Datenschutzerklärung und die Begründung zu § 25 TDDDG bleiben also
   unberührt; das ist der Grund, warum diese Lösung überhaupt in Frage kam und
   der Kopierknopf nicht.

   Gemessen am 26.07.2026: Der Block mit `claude mcp add` scrollt selbst bei
   500 px noch (scrollWidth 687 gegen clientWidth 445), das betrifft also nicht
   nur schmale Fenster. Wer `tabindex` aus dem HTML entfernt, nimmt den Zugang
   wieder weg und sollte hier nachsehen, bevor er es für Beiwerk hält.

   Eigene Regel statt des Browser-Rings, damit der Rahmen auf dem eigenen
   Hintergrund der Blöcke sichtbar bleibt. `--accent` gegen `--code-bg` liegt
   bei 6,63:1 in Hell und 7,11:1 in Dunkel, WCAG 1.4.11 verlangt 3:1; am
   26.07.2026 gerechnet, nicht geschätzt. Beim Ändern einer Farbe neu rechnen. */
.scroll:focus-visible, pre:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; }

.note {
  border-left: 3px solid var(--accent);
  padding: 0.1rem 0 0.1rem 1rem;
  margin: 1.5rem 0;
  color: var(--muted);
}

/* Art. 21 Abs. 4 DSGVO verlangt, dass der Hinweis auf das Widerspruchsrecht
   "in einer verständlichen und von anderen Informationen getrennten Form"
   erfolgt. Getrennt ist er durch den eigenen Abschnitt; dieser Kasten macht
   die Trennung auch sichtbar. Deshalb voller Rahmen statt nur linker Linie,
   und Fließtextfarbe statt der gedämpften: Ein Pflichthinweis, der blasser
   gesetzt ist als der Text daneben, ist das Gegenteil von hervorgehoben. */
.note-stark {
  border: 1px solid var(--accent);
  border-left-width: 3px;
  border-radius: 4px;
  padding: 1rem 1.15rem 0.4rem;
  color: var(--fg);
}

/* Die Kontaktadresse steht mit "(at)" und ohne mailto:-Link im Markup, damit
   Sammelprogramme sie nicht per Mustersuche greifen. Der verbreitete Weg,
   sie per JavaScript zusammenzusetzen, scheidet hier aus: Diese Seiten sagen
   zu, ohne Skripte auszukommen, und ohne Skript wäre die Pflichtangabe dann
   gar nicht da. `nowrap` hält die Adresse in einer Zeile, sonst bricht sie an
   den Leerzeichen um "(at)" um und wird schwer abzutippen. Die Telefonnummer
   steht aus demselben Grund ohne tel:-Link und mit derselben Regel: Sie ist
   in Vorwahl und Block gegliedert und würde sonst mitten in der Nummer
   umbrechen. */
.mail, .tel { white-space: nowrap; }

/* ─── STATUSMARKER ─────────────────────────────────────────
   Sie tragen die Aussage, worauf eine Angabe beruht, und sind deshalb nicht
   bloß Farbe: Der Text im Element sagt dasselbe, falls die Farben nicht
   unterschieden werden.

   Die Klassennamen führen dieselben drei Wörter wie das sichtbare Etikett und
   wie README, CLAUDE.md und docs/WEBSITE.md: geprueft, recherchiert,
   ungeklaert. Vorher hießen sie gemessen, recherche und offen, also drei
   Wörter für dieselben drei Zustände; wer nach dem Wort aus der Doku suchte,
   fand die Regel hier nicht. Beim Umbenennen eines Etiketts die Klasse
   mitziehen, sonst geht es wieder auseinander. */

.status {
  display: inline-block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
  padding: 0.05em 0.55em;
  border: 1px solid currentColor;
  border-radius: 999px;
  vertical-align: 0.15em;
  margin: 0 0.15rem;
}

.status-geprueft    { color: var(--accent); }
.status-recherchiert { color: var(--muted); }
.status-ungeklaert  { color: var(--warn); }

h2 .status { vertical-align: 0.25em; }