/* Manrope, selbst gehostet. Bewusst NICHT über fonts.googleapis.com:
   ein CDN-Einbinden überträgt die IP jedes Besuchers an Google — auf einer
   Seite, die Datenschutz erklärt, wäre das ein vermeidbarer Widerspruch
   (vgl. LG München I, Urteil vom 20.01.2022, 3 O 17493/20).
   Variable Font: eine Datei deckt 400–800 ab. */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}

:root {
  --blau: #0056d2;
  --blau-dunkel: #0044a8;
  --grau-bg: #eeeef5;
  --text: #111827;
  --text-leise: #4b5563;
  --rand: #e5e7eb;
  --karte: #ffffff;
  --breite: 68rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blau: #5b9bff;
    --blau-dunkel: #7fb2ff;
    --grau-bg: #0e1117;
    --text: #e8eaed;
    --text-leise: #9aa3af;
    --rand: #262b33;
    --karte: #161b22;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--grau-bg);
  -webkit-font-smoothing: antialiased;
}

.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 1.5rem; }

/* ── Kopf ─────────────────────────────────────────────────────────── */
header {
  border-bottom: 1px solid var(--rand);
  background: var(--karte);
  position: sticky;
  top: 0;
  z-index: 10;
}
header .huelle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
  flex-wrap: wrap;
}
.marke {
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--blau);
  text-decoration: none;
}
nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
nav a {
  color: var(--text-leise);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
nav a:hover, nav a:focus-visible { color: var(--blau); }

/* ── Held ─────────────────────────────────────────────────────────── */
.held { padding: 5rem 0 4rem; text-align: center; }
.held h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
  font-weight: 800;
}
.held p.vorspann {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: var(--text-leise);
  max-width: 40rem;
  margin: 0 auto 2rem;
}
.hinweis {
  display: inline-block;
  background: color-mix(in srgb, var(--blau) 12%, transparent);
  color: var(--blau);
  border: 1px solid color-mix(in srgb, var(--blau) 30%, transparent);
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* ── Karten ───────────────────────────────────────────────────────── */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.25rem;
  padding: 1rem 0 5rem;
}
.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: 1.5rem;
}
.karte h3 {
  margin: 0 0 0.5rem;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.karte p { margin: 0; color: var(--text-leise); font-size: 0.96rem; }
.symbol {
  width: 2.5rem; height: 2.5rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--blau) 12%, transparent);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.9rem;
  color: var(--blau);
}
.symbol svg { width: 1.35rem; height: 1.35rem; }

/* ── Inhaltsseiten ────────────────────────────────────────────────── */
main.text {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 3rem);
  margin: 3rem auto 4rem;
}
main.text h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-top: 0; letter-spacing: -0.02em; }
main.text h2 {
  font-size: 1.2rem;
  margin: 2.25rem 0 0.65rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rand);
  letter-spacing: -0.01em;
}
main.text h2:first-of-type { border-top: 0; padding-top: 0; }
main.text ul { padding-left: 1.15rem; }
main.text li { margin-bottom: 0.35rem; }
main.text a { color: var(--blau); }
.stand { color: var(--text-leise); font-size: 0.9rem; margin-top: -0.5rem; }
.adresse { font-style: normal; line-height: 1.75; }

/* ── Fuß ──────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rand);
  background: var(--karte);
  padding: 2rem 0;
  font-size: 0.9rem;
  color: var(--text-leise);
}
footer .huelle {
  display: flex; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
footer a { color: var(--text-leise); text-decoration: none; margin-right: 1.25rem; }
footer a:hover, footer a:focus-visible { color: var(--blau); text-decoration: underline; }

/* Sichtbarer Fokus für Tastaturbedienung */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blau);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Tabellen in Rechtstexten scrollen selbst, statt die Seite zu sprengen */
.tabelle-huelle { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
th, td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--rand); vertical-align: top; }
th { font-weight: 700; }