/* rechtliches.css – Ergänzung zu umfrage.css für Impressum und Datenschutz.
   umfrage.css muss davor eingebunden sein.

   Diese Seiten sind Lesetexte, nicht Gestaltung: linksbündig, begrenzte
   Zeilenlänge, klare Gliederung. Farben und Schriften bleiben die der
   Umfrage, damit der Zusammenhang erkennbar ist. */

#app{
  justify-content:flex-start;
  padding-top:clamp(40px,7vh,72px);
  padding-bottom:clamp(56px,9vh,96px);
  max-width:760px;
}

.recht h1{
  font-size:clamp(30px,5vw,52px);
  margin-bottom:clamp(20px,3vh,30px);
}

.recht h2{
  font-size:clamp(17px,2.2vw,22px);
  letter-spacing:.06em;
  margin:clamp(34px,5vh,50px) 0 clamp(12px,1.8vh,18px);
  padding-top:clamp(20px,3vh,28px);
  border-top:1px solid var(--line);
  color:var(--fg);
}
.recht h2:first-of-type{border-top:none;padding-top:0}

.recht h3{
  font-family:var(--body);font-weight:600;
  font-size:15px;color:#fff;
  margin:clamp(20px,2.6vh,26px) 0 8px;
  text-transform:none;letter-spacing:0;
}

.recht p{
  margin:0 0 14px;
  font-size:14.5px;line-height:1.75;color:var(--fg-2);
  max-width:68ch;
}
.recht p:last-child{margin-bottom:0}

.recht ul{
  margin:0 0 16px;padding:0;list-style:none;
  display:grid;gap:10px;max-width:68ch;
}
.recht li{
  position:relative;padding-left:18px;
  font-size:14.5px;line-height:1.7;color:var(--fg-2);
}
.recht li:before{
  content:"";position:absolute;left:0;top:.68em;
  width:6px;height:6px;border-radius:50%;background:var(--line-2);
}

.recht b,.recht strong{color:#fff;font-weight:600}

.recht a{
  color:var(--pink);text-decoration:underline;text-underline-offset:2px;
}
.recht a:hover{color:#fff}

/* Definitionsliste für Adressblöcke – kein <br>-Salat */
.recht .block{
  margin:0 0 16px;
  font-size:14.5px;line-height:1.9;color:var(--fg-2);
}
.recht .block b{display:block;color:#fff}

/* Tabelle „welche Daten, wozu, wie lange" */
.recht table{
  width:100%;border-collapse:collapse;margin:0 0 18px;
  font-size:13.5px;
}
.recht th,.recht td{
  text-align:left;vertical-align:top;
  padding:11px 12px;
  border-bottom:1px solid var(--line);
  line-height:1.6;
}
.recht th{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  font-size:10.5px;color:var(--fg-3);
}
.recht td{color:var(--fg-2)}
.recht td:first-child{color:#fff;font-weight:500;white-space:nowrap}

@media (max-width:560px){
  /* Die Tabelle wird auf dem Telefon zu Blöcken umgebrochen */
  .recht table,.recht thead,.recht tbody,.recht tr,.recht th,.recht td{display:block}
  .recht thead{display:none}
  .recht tr{
    border:1px solid var(--line);border-radius:12px;
    padding:6px 4px;margin-bottom:12px;
  }
  .recht td{border:none;padding:6px 12px}
  .recht td:first-child{white-space:normal;padding-bottom:2px}
}

.recht .zurueck{margin-top:clamp(34px,5vh,50px)}