/* =========================================================================
   Impressum & Datenschutz (DE + EN). Vier Seiten, ein Stylesheet — vorher
   trug jede ihre eigene Kopie derselben Regeln inline, und die vier standen
   nach dem Marken-Umbau noch im alten Rot/Weiß der Vorgängerseite.

   Dieselben Halle-Tokens wie assets/seite.css, nur die Teilmenge, die diese
   Textseiten brauchen. Schriften liegen selbst gehostet unter assets/fonts/.
   ========================================================================= */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --sand:#e9e0cc; --karte:#fffaf0; --hairline:#d3c1a0;
  --ink:#2a2118; --text2:#6b5a44;
  --akzent:#c8452c; --aktion:#1f4d3d; --tief:#16382c;
  --plakat:'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--sand); color:var(--ink); font-family:var(--body); line-height:1.65; }

.kopf { background:var(--tief); }
.kopf .wrap { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; }
.kopf a { color:#b9c9be; text-decoration:none; font-size:13.5px; font-weight:600; }
.kopf a:hover { color:#f6efdf; text-decoration:underline; text-underline-offset:3px; }
.kopf .marke { display:inline-flex; align-items:center; gap:8px; font-family:var(--plakat); font-weight:800; font-size:15px; color:#f6efdf; }
.kopf .marke .dot { width:9px; height:9px; border-radius:50%; background:#f2c14e; }

.wrap { max-width:680px; margin:0 auto; padding:0 20px; }
main.wrap { padding-top:36px; padding-bottom:64px; }

h1 { font-family:var(--plakat); font-weight:800; font-size:32px; letter-spacing:-.7px; margin:0 0 22px; }
h2 { font-family:var(--plakat); font-weight:800; font-size:19px; letter-spacing:-.2px; margin:30px 0 8px; }
/* Zwischenüberschrift für die Blöcke „Die App" / „Diese Website" */
h3 {
  font-family:var(--plakat); font-weight:800; font-size:11px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--akzent);
  margin:40px 0 4px; padding-bottom:8px; border-bottom:1px solid var(--hairline);
}
p, li { color:var(--ink); }
a { color:var(--akzent); text-underline-offset:2px; }
ul { padding-left:20px; }
.muted { color:var(--text2); font-size:14px; }

footer { background:var(--tief); color:#b9c9be; font-size:13px; }
footer .wrap { padding:18px 20px 26px; text-align:center; }
footer a { color:#b9c9be; text-decoration:none; }
footer a:hover { color:#f6efdf; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:520px) {
  h1 { font-size:27px; }
  main.wrap { padding-top:28px; }
}