/* Oeffentliche Startseite. Bewusst eine EIGENE Datei statt eines <style>-Blocks:
   die CSP erlaubt seit 15.08.2026 kein 'unsafe-inline' mehr und deckt Inline-Stile
   nur per sha256 ab. Ein Hash muesste bei jeder Aenderung nachgezogen und ueber
   dem AUSGELIEFERTEN Inhalt gerechnet werden (LF, nicht CRLF) -- eine Falle, die
   dieses Projekt schon einmal getroffen hat. `style-src 'self'` deckt diese Datei
   ohne Hash. Siehe docs/CSP.md. */

:root {
  --bg:        oklch(0.165 0.008 56);
  --panel:     oklch(0.205 0.009 58);
  --line:      oklch(0.30  0.010 60);
  --text:      oklch(0.94  0.012 75);
  --muted:     oklch(0.74  0.013 68);
  --faint:     oklch(0.58  0.012 65);
  --brand:     oklch(0.74  0.135 48);
  --on-accent: oklch(0.18  0.02  50);
  --data:      oklch(0.80  0.13  200);
  --warn:      oklch(0.80  0.13  85);
  --mono:      "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sans:      "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* ── Kopf ─────────────────────────────────────────────── */
.kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1rem; margin-bottom: 3rem; }
.marke { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.marke span { color: var(--brand); }
.kopf nav { margin-left: auto; display: flex; gap: 0.75rem; }

.knopf {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.knopf:hover { border-color: var(--brand); }
.knopf-voll { background: var(--brand); color: var(--on-accent); border-color: var(--brand); }
.knopf-voll:hover { filter: brightness(1.08); }

/* ── Einstieg ─────────────────────────────────────────── */
.einstieg { margin-bottom: 3.5rem; }
.einstieg h1 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 1.1rem;
  max-width: 22ch;
}
.einstieg p { font-size: 1.1rem; color: var(--muted); max-width: 62ch; }
.einstieg p + p { margin-top: 0.9rem; }

/* ── Karten ───────────────────────────────────────────── */
.karten { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 3.5rem; }
.karte { background: var(--panel); border: 1px solid var(--line); border-radius: 0.75rem; padding: 1.25rem; }
.karte h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.karte p { font-size: 0.95rem; color: var(--muted); }

/* ── Abschnitte ───────────────────────────────────────── */
section { margin-bottom: 3rem; }
h2 {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
}
section > p { color: var(--muted); max-width: 68ch; }
section > p + p { margin-top: 0.8rem; }

/* ── Einordnung: die Punkte, die beim Lesen mitgedacht werden muessen ── */
.einordnung { list-style: none; display: grid; gap: 0.85rem; }
.einordnung li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  color: var(--muted);
  max-width: 72ch;
}
.einordnung b { color: var(--text); font-weight: 600; }

.hinweis-stark { border-left-color: var(--brand); }

/* ── Fuss ─────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding-top: 1.5rem; color: var(--faint); font-size: 0.9rem; }
footer h2 { font-size: 1rem; border: 0; padding: 0; margin-bottom: 0.6rem; color: var(--muted); }
footer p + p { margin-top: 0.4rem; }
footer dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; margin-bottom: 1rem; }
footer dt { color: var(--muted); }
.offen { color: var(--warn); font-family: var(--mono); font-size: 0.85rem; }

a { color: var(--data); }
a:hover { color: var(--brand); }

@media (max-width: 34rem) {
  .kopf nav { margin-left: 0; width: 100%; }
  .huelle { padding-top: 1.75rem; }
}