/* ════════════════════════════════════════════════════════════════
   IlmAI — Gestaltung der Rechtstexte
   ════════════════════════════════════════════════════════════════

   Diese Datei versorgt alle Seiten in recht/ — Impressum, Daten-
   schutz, AGB, Widerruf und Cookies. Eine Änderung hier wirkt auf
   alle fünf.

   Die Farbwerte sind aus index.html übernommen, damit die Seiten
   wie ein Teil der Anwendung wirken und nicht wie ein Fremdkörper.
   Dunkel ist die Voreinstellung — wie in der App. Wer dort auf
   hell gestellt hat, bekommt es hier ebenfalls hell: Jede Seite
   liest hf_theme aus dem Browser-Speicher.
   ════════════════════════════════════════════════════════════════ */

:root {
  --bg:          #0c0d0f;
  --bg-raised:   #111318;
  --bg-inset:    #181c24;
  --border:      rgba(255,255,255,.08);
  --border-soft: rgba(255,255,255,.05);
  --text:        #f0ebe0;
  --text-soft:   #9b9080;
  --text-muted:  #5e5850;
  --accent:      #d4ac64;
  --accent-dim:  rgba(212,172,100,.12);
  --warn:        #e0b45c;
  --warn-bg:     rgba(224,180,92,.09);
}

[data-theme="light"] {
  --bg:          #f7f3ec;
  --bg-raised:   #efe9de;
  --bg-inset:    #e8e0d2;
  --border:      rgba(0,0,0,.10);
  --border-soft: rgba(0,0,0,.06);
  --text:        #1a160e;
  --text-soft:   #6a5e48;
  --text-muted:  #9a8e7a;
  --accent:      #8b6418;
  --accent-dim:  rgba(139,100,24,.10);
  --warn:        #8a5f10;
  --warn-bg:     rgba(139,100,24,.10);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.seite {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 20px 96px;
}

/* ── Kopfbereich ──────────────────────────────────────────────── */

.kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.marke {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}
.marke:hover { opacity: .8; }
.marke .zeichen {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--accent);
  display: grid; place-items: center;
  font-size: 13px; flex: none;
}

.zurueck {
  margin-left: auto;
  color: var(--text-soft);
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 11px;
  white-space: nowrap;
}
.zurueck:hover { color: var(--text); border-color: var(--accent); }

/* ── Blättern zwischen den Dokumenten ─────────────────────────── */

nav.doks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
nav.doks a {
  font-size: 12.5px;
  color: var(--text-soft);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  white-space: nowrap;
}
nav.doks a:hover { color: var(--text); border-color: var(--border); background: var(--bg-raised); }
nav.doks a[aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
  font-weight: 600;
}

/* ── Text ─────────────────────────────────────────────────────── */

h1 {
  font-size: 25px;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--accent);
  text-wrap: balance;
}
.stand {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0 0 26px;
}

h2 {
  font-size: 16.5px;
  margin: 34px 0 10px;
  color: var(--text);
  text-wrap: balance;
}
h3 {
  font-size: 14.5px;
  margin: 22px 0 6px;
  color: var(--text);
}

p { margin: 0 0 12px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 7px; }
li::marker { color: var(--text-muted); }

strong { color: var(--text); font-weight: 600; }
a { color: var(--accent); }
a:hover { opacity: .8; }

code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .87em;
  background: var(--bg-inset);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: .08em .34em;
  overflow-wrap: anywhere;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── Hervorgehobene Kästen ────────────────────────────────────── */

.hinweis {
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: 9px;
  padding: 13px 16px;
  margin: 0 0 24px;
  font-size: 13.5px;
  line-height: 1.65;
}
.hinweis strong { color: var(--warn); }
.hinweis p:last-child { margin-bottom: 0; }

.kasten {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 15px 18px;
  margin: 0 0 18px;
}
.kasten p:last-child { margin-bottom: 0; }

.formular {
  background: var(--bg-inset);
  border: 1px dashed var(--border);
  border-radius: 9px;
  padding: 16px 18px;
  margin: 14px 0 20px;
  font-size: 13.5px;
}
.formular p:last-child { margin-bottom: 0; }

/* Auszufüllende Stellen sichtbar machen, damit keine übersehen wird */
.luecke {
  background: var(--warn-bg);
  border-bottom: 1px dashed var(--warn);
  color: var(--warn);
  padding: 0 3px;
  font-style: normal;
}

/* ── Tabellen ─────────────────────────────────────────────────── */

.tabelle {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 9px;
  margin: 0 0 20px;
  background: var(--bg-raised);
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 13px;
}
th, td {
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  font-weight: 600;
  background: var(--bg-inset);
  white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
td code { font-size: 12px; }

/* ── Fuß ──────────────────────────────────────────────────────── */

footer {
  margin-top: 52px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
}
footer a { color: var(--text-soft); }

@media (max-width: 520px) {
  body { font-size: 14.5px; }
  .seite { padding: 20px 15px 72px; }
  h1 { font-size: 22px; }
}