/* Datenschutz-Seiten der Dienste (id., webmail., video.).
 *
 * Bewusst ein ANDERES Bild als die Apex-Seite (Entscheid Michael 2026-10-17, nach der
 * Auslegung des Anwalts): weisse Flaeche, keine violetten Baender, kein Titelbild, keine
 * Navigation der Webseite. Die Erklaerung eines Dienstes darf nicht aussehen wie eine Seite
 * von mipla.ch, sonst ist genau die Verwechslung da, die die Aufteilung vermeiden soll.
 * Farben nur aus brand/tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-raised);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--step-0);
  line-height: 1.55;
}

.dk-innen { max-width: 46rem; margin-inline: auto; padding-inline: var(--space-4); }

.dk-kopf { border-block-end: 1px solid var(--line-soft); padding-block: var(--space-4); }
.dk-dienst { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }

/* minmax(0, 1fr): ein Grid-Element hat sonst min-width: auto, und die breite Cookie-Tabelle
   dehnt die Spalte auf dem Telefon ueber den Rand, statt in ihrem eigenen Rahmen zu scrollen. */
.dk-text { padding-block: var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); overflow-wrap: break-word; }
.dk-text h1 { font-size: var(--step-3); margin: 0; line-height: 1.2; }
.dk-text h2 { font-size: var(--step-1); margin: var(--space-5) 0 0; }
.dk-text h3 { font-size: var(--step-0); margin: var(--space-3) 0 0; }
.dk-text p, .dk-text ul, .dk-text ol { margin: 0; }
.dk-text a { color: var(--accent); }
.dk-text table { border-collapse: collapse; width: 100%; font-size: var(--step--1); display: block; overflow-x: auto; }
.dk-text th, .dk-text td { border: 1px solid var(--line-soft); padding: var(--space-2); text-align: left; vertical-align: top; }
.dk-text th { background: var(--surface-sunken); }
.recht__fassung { color: var(--ink-soft); font-size: var(--step--1); }
.klausel { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--space-3); }
.klausel__nr { color: var(--ink-soft); }

.dk-fuss { border-block-start: 1px solid var(--line-soft); padding-block: var(--space-4); font-size: var(--step--1); color: var(--ink-soft); }
.dk-fuss p { margin: 0 0 var(--space-2); }
.dk-fuss ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.dk-fuss a { color: var(--ink-soft); }