/* ============================================================
   AufTeilen: die Textseiten (Regeln, Datenschutz, Verwalten)

   Diese Seiten sind KEINE App-Bildschirme: sie scrollen, sie sind lang, und
   man liest sie am Stueck. Deshalb hebt diese Datei die Regel der Basis auf,
   dass die Seite selbst nie scrollt.
   ============================================================ */

body.seite {
  overflow: auto;
  height: auto;
  min-height: 100%;
}

.seite-innen {
  max-width: 680px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 40px);
}

.seite-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--linie);
}
.seite-kopf img { flex: none; border-radius: 11px; }
.seite-kopf h1 { margin: 0; font-size: 22px; font-weight: 800; }
.seite-unter { margin: 2px 0 0; font-size: 15px; color: var(--leise); }

.block {
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: var(--karte);
}
.block h2 { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.block .knopf { margin-top: 12px; }
.block.gefahr { border-color: var(--warn); }

.seite-text {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
}
.seite-text.leise { color: var(--leise); font-size: 15px; }

.seite h3 {
  margin: 22px 0 8px;
  font-size: 17px;
  font-weight: 800;
}

.seite ul { margin: 0 0 12px; padding-left: 22px; }
.seite li { margin-bottom: 7px; font-size: 16px; line-height: 1.5; }

.seite-fuss {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--linie);
  font-size: 14px;
  color: var(--leise);
  text-align: center;
}
.seite-fuss a { color: var(--blau); }

.knopf.rot {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--auf-warn);
}

/* Die Tabelle im Datenschutz: was wird gespeichert und wie lange. */
.tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-bottom: 14px;
}
.tabelle th, .tabelle td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}
.tabelle th { font-weight: 800; color: var(--leise); font-size: 13px; text-transform: uppercase; }

/* Auf schmalen Geraeten bricht die Tabelle in Bloecke um, sonst quetscht sie
   sich unlesbar zusammen oder sprengt die Seite nach rechts. */
@media (max-width: 520px) {
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { display: none; }
  .tabelle tr { padding: 8px 0; border-bottom: 1px solid var(--linie); }
  .tabelle td { border: none; padding: 2px 0; }
  .tabelle td::before {
    content: attr(data-was) ": ";
    font-weight: 800;
    color: var(--leise);
  }
}