/* bettershelf.de – Grundlage und Unterseiten (Impressum, Datenschutz). Die Startseite kommt dazu aus schirm.css.
   Keine Cookies, kein Tracking, keine externen Schriften. */
:root {
  --flaeche: #EEF2F7;
  --papier: #FFFFFF;
  --text: #111A2B;
  --leise: #586477;
  --linie: #D5DDE8;
  --navy: #0F1B2D;
  --blau: #1F6FEB;
  --hellblau: #7FAAF5;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fliess: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --flaeche: #0B1220;
    --papier: #111B2D;
    --text: #E7ECF4;
    --leise: #95A2B6;
    --linie: #1F2B3F;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font: 17px/1.6 var(--fliess);
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}
a { color: var(--blau); }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; border-radius: 4px; }

header, main, footer { max-width: 1160px; margin: 0 auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font: 600 19px var(--display); }
.marke svg { width: 36px; height: 36px; flex: none; }
header nav { display: flex; gap: 18px; font-size: 15px; flex-wrap: wrap; }
header nav a { color: var(--leise); text-decoration: none; }
header nav a:hover, header nav a[aria-current] { color: var(--text); }

kbd {
  font: 13px var(--fliess); background: var(--papier); border: 1px solid var(--linie); border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px; color: var(--text);
}

/* ---- Unterseiten ---- */
.text { max-width: 760px; }
.text h1 { font: 600 clamp(30px, 5vw, 44px)/1.15 var(--display); letter-spacing: -0.01em; margin: 32px 0 12px; }
.text h2 { font: 600 21px var(--display); margin: 36px 0 8px; }
.text h3 { font-size: 16px; margin: 24px 0 6px; }
.text p, .text li { max-width: 70ch; }
.leise { color: var(--leise); }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; font-size: 15px; margin: 12px 0; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.tabelle { overflow-x: auto; }

footer { border-top: 1px solid var(--linie); margin-top: 56px; padding: 22px 0 32px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--leise); }
footer a { color: var(--leise); }