/* ═══════════════════════════════════════════
   Rechtstexte (Impressum / Datenschutz) — Tanken App
   Schlichte Textseiten im Look der App, ohne JavaScript.
   Eigene Datei statt style.css: dort steckt die App-Shell als
   CSS-Grid, die für eine reine Textseite nur im Weg wäre.
═══════════════════════════════════════════ */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/manrope-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Tokens aus style.css übernommen. Die Seiten kommen ohne JavaScript aus und
   folgen deshalb der Systemeinstellung, nicht der Theme-Wahl in der App. */
:root {
  --primary: #1a5fe0;
  --bg:      #eef2f7;
  --card:    #ffffff;
  --text:    #101b2c;
  --sub:     #51617a;
  --sep:     #e4e9f1;
  --sep2:    #c9d4e2;
  --shadow:  rgba(16,27,44,0.08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #5b93ff;
    --bg:      #0b1422;
    --card:    #141f33;
    --text:    #eaf0f9;
    --sub:     #91a3bd;
    --sep:     #223148;
    --sep2:    #31445f;
    --shadow:  rgba(0,0,0,0.35);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  /* ~70 Zeichen Zeilenbreite */
  max-width: 36em;
  margin: 0 auto;
  padding: 24px 20px 72px;
}

.back {
  display: inline-block;
  margin-bottom: 28px;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--sep2);
  border-radius: 12px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px var(--shadow);
}
.back:hover { border-color: var(--primary); }

h1 {
  /* "Datenschutzerklärung" ist ein einzelnes langes Wort — bei fester Größe
     sprengt es auf schmalen Geräten die Zeile und erzeugt horizontales Scrollen. */
  font-size: clamp(20px, 6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 6px;
}

/* Lange Komposita und Domainnamen dürfen umbrechen statt zu überstehen. */
h1, h2, h3, p, li, address { overflow-wrap: break-word; hyphens: auto; }
code { overflow-wrap: anywhere; }
.lead { color: var(--sub); font-size: 14px; margin: 0 0 28px; }

h2 {
  font-size: 17px;
  font-weight: 800;
  margin: 34px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--sep);
}
h3 { font-size: 15px; font-weight: 700; margin: 22px 0 6px; }

p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }

a { color: var(--primary); }
address { font-style: normal; margin: 0 0 14px; }

.card {
  background: var(--card);
  border: 1px solid var(--sep2);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 20px;
  box-shadow: 0 2px 12px var(--shadow);
}

/* Noch einzutragende Angaben — im Deploy nicht zu übersehen. */
.todo {
  display: inline-block;
  background: #fff3cd;
  color: #6b4b00;
  border: 1px dashed #d0a400;
  border-radius: 6px;
  padding: 1px 7px;
  font-weight: 700;
  font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  .todo { background: #3a2f05; color: #ffd970; border-color: #8a6d00; }
}

.meta { color: var(--sub); font-size: 13px; margin-top: 36px; }

.foot {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--sep);
  font-size: 13px;
}
.foot a { margin-right: 14px; }