/* Rechtstexte: Tabellen und Kästen passend zur Lesespalte (.recht, 72ch). */

.recht .lead{font-size:17px}

/* Übersicht "Was gespeichert wird": vier Spalten, auf dem Handy gestapelt. */
.recht-table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:15px;
  background:var(--surface);border-radius:var(--radius);overflow:hidden}
.recht-table th{font-size:12.5px;font-weight:700;color:var(--muted);text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--surface-2);letter-spacing:.02em}
.recht-table td{padding:10px 12px;border-bottom:1px solid var(--surface-2);vertical-align:top;
  color:#33332e;line-height:1.55}
.recht-table tr:last-child td{border-bottom:0}
.recht-table td b{color:var(--ink)}

@media (max-width:640px){
  .recht-table{background:transparent;border-radius:0;font-size:15.5px}
  .recht-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .recht-table tr{display:block;padding:12px 0;border-bottom:1px solid var(--surface-2)}
  .recht-table td{display:block;border:0;padding:0 0 7px}
  .recht-table td:last-child{padding-bottom:0}
  .recht-table td::before{content:attr(data-l);display:block;font-size:12px;font-weight:700;
    color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
}

/* Kasten für Vertragsparteien und Kurzfassung */
.recht-box{background:var(--surface);border-radius:var(--radius);padding:16px 18px;margin:6px 0 18px}
.recht-box p{margin-bottom:8px}
.recht-box p:last-child{margin-bottom:0}
/* Nicht ".kopf" nennen: die Klasse ist im Layout der dunkle Seitenkopf. */
.recht-box .rubrik{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;
  text-transform:uppercase;margin-bottom:6px}

/* Nummerierte Vertragsabschnitte lesbar halten */
.recht ol.vertrag{margin:0 0 14px;padding-left:1.35em;color:#33332e;font-size:16px;line-height:1.68}
.recht ol.vertrag li{margin:0 0 8px}