/* Das Aussehen der Textseiten von momsmatch.de - Datenschutz, AGB,
 * Impressum, Kinderschutz, Konto loeschen.
 *
 * SEIT DEM 16.09.2026 IM STIL DER STARTSEITE ("Farbreise"): dieselbe
 * Kopfleiste, derselbe Beerenverlauf mit Welle, derselbe Fuss. Vorher
 * sahen die Seiten aus wie eine andere Website - wer von der Startseite
 * auf "Datenschutz" tippt, soll nicht glauben, woanders gelandet zu sein.
 *
 * Die Seiten entstehen aus den Markdown-Dokumenten (web/bauen.py). Hier
 * steht nur das Aussehen - Text wird nie im HTML geaendert.
 *
 * Nach groesseren Aenderungen hier STIL_VERSION in bauen.py hochzaehlen,
 * sonst zeigen Browser noch das alte Stylesheet.
 *
 * Bewusst ohne Bibliothek und ohne fremde Adressen: Die Schrift liegt auf
 * unserem Server, damit keine IP-Adresse zu Google geht.
 */

@font-face { font-family: Poppins; font-weight: 400; font-style: normal; font-display: swap; src: url(/schrift/poppins-400.woff2) format('woff2'); }
@font-face { font-family: Poppins; font-weight: 700; font-style: normal; font-display: swap; src: url(/schrift/poppins-700.woff2) format('woff2'); }

:root {
  --papier: #FFF8F5;
  --weiss: #FFFFFF;
  --tinte: #2A1A20;
  --leise: #7A5C66;
  --linie: #F0DDE3;
  --beere: #B0335C;
  --tiefbeere: #6E1A38;
  --rosa: #F3A6C4;
  --blush: #FDEAF0;
}

* { box-sizing: border-box; }
html { background: var(--papier); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a:focus-visible { outline: 3px solid var(--beere); outline-offset: 3px; border-radius: 6px; }
.w { max-width: 1180px; margin: 0 auto; padding-inline: 20px; }

/* --- Kopf: wie auf der Startseite --------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(110, 26, 56, .96);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(110, 26, 56, .18);
}
.kopf .w { display: flex; align-items: center; gap: 20px; padding-block: 14px; }
.logo { display: inline-block; white-space: nowrap; text-decoration: none; font-weight: 700; font-size: 26px; letter-spacing: -.04em; line-height: 1; }
.logo .moms { color: #fff; }
.logo .match { color: var(--rosa); margin-left: .2em; }
.logo svg { height: .8em; width: .58em; fill: currentColor; vertical-align: -.02em; margin: 0 .01em; }
.kopf nav { margin-left: auto; display: flex; gap: 2px; }
.kopf nav a { color: rgba(255,255,255,.82); text-decoration: none; font-size: 14.5px; padding: 8px 13px; border-radius: 99px; }
.kopf nav a:hover { color: #fff; background: rgba(255,255,255,.12); }
.knopf { display: inline-flex; padding: 10px 20px; border-radius: 99px; background: #fff; color: var(--beere); font-weight: 700; font-size: 14.5px; text-decoration: none; }
@media (max-width: 800px) { .kopf nav { display: none; } .kopf .knopf { margin-left: auto; } }

/* --- Titelband ---------------------------------------------------- */
.band-titel {
  position: relative;
  overflow: clip;
  color: #fff;
  background: linear-gradient(135deg, #6E1A38 0%, #A52F55 48%, #DE836F 100%);
  padding-block: clamp(40px, 6vw, 70px) clamp(80px, 9vw, 110px);
}
.band-titel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 70% at 88% 10%, rgba(243,166,196,.35), transparent 70%);
}
.band-titel .w { position: relative; }
.band-titel .augenbraue { display: inline-block; padding: 6px 14px; border-radius: 99px; background: rgba(255,255,255,.14); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
/* "Datenschutzerklaerung" ist auf einem schmalen Handy breiter als der
 * Bildschirm - deshalb kleiner ab und Silbentrennung statt Abschneiden. */
.band-titel h1 { margin: 16px 0 0; font-size: clamp(27px, 7vw, 56px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.welle { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; }

/* --- Inhalt ------------------------------------------------------- */
.blatt {
  position: relative;
  max-width: 860px;
  margin: -46px auto 0;
  padding: clamp(24px, 4vw, 48px);
  background: var(--weiss);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(110, 26, 56, .10);
}
@media (max-width: 900px) { .blatt { margin-inline: 16px; } }

.blatt > :first-child { margin-top: 0; }
.blatt h1 { font-size: 30px; line-height: 1.2; color: var(--tiefbeere); margin: 0 0 18px; letter-spacing: -.02em; }
.blatt h2 {
  font-size: 22px;
  line-height: 1.25;
  color: var(--tiefbeere);
  margin: 40px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--linie);
  letter-spacing: -.02em;
}
.blatt h3 { font-size: 17.5px; margin: 26px 0 8px; color: var(--beere); }
.blatt p, .blatt li { font-size: 15.5px; }
.blatt ul, .blatt ol { padding-left: 22px; }
.blatt li { margin: 5px 0; }
.blatt li::marker { color: var(--beere); }
.blatt a { color: var(--beere); text-underline-offset: 3px; overflow-wrap: anywhere; }
.blatt strong { color: var(--tiefbeere); }

.blatt blockquote {
  margin: 22px 0;
  padding: 16px 20px;
  background: var(--blush);
  border-radius: 18px;
}
.blatt blockquote p { margin: 6px 0; }

.blatt code {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 14px;
}
.blatt hr { border: 0; border-top: 1px solid var(--linie); margin: 34px 0; }

/* Tabellen duerfen auf dem Handy seitlich scrollen, sonst schiebt eine
 * breite Tabelle die ganze Seite zur Seite. */
.blatt table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
}
.blatt th, .blatt td { border: 1px solid var(--linie); padding: 10px 12px; text-align: left; vertical-align: top; }
.blatt th { background: var(--blush); color: var(--tiefbeere); }

/* --- Fuss: wie auf der Startseite --------------------------------- */
.fuss { margin-top: 70px; padding-block: 34px 44px; font-size: 14px; color: var(--leise); }
.fuss .w { display: flex; flex-wrap: wrap; gap: 16px 30px; align-items: center; justify-content: space-between; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fuss a { color: var(--leise); text-decoration: none; }
.fuss a:hover { color: var(--beere); }