/* Rechtstexte (AGB, Datenschutz, Impressum, Konto löschen).
   Farben, Schriften, Kopf- und Fußzeile stehen in _base.css. Hier steht
   nur, was ein langer Fließtext zusätzlich braucht. */

.legal{
  max-width:780px;margin:0 auto;
  padding:38px max(var(--gutter),var(--safe-r)) 70px max(var(--gutter),var(--safe-l));
  line-height:1.65;
}
.legal h1{font-size:clamp(23px,5.6vw,30px);margin:0 0 6px;line-height:1.25}
.legal h2{
  font-size:clamp(17px,4.2vw,20px);margin:30px 0 8px;color:var(--akzent-tief);
  border-bottom:1px solid var(--card-border);padding-bottom:6px;
}
.legal h3{font-size:15px;margin:20px 0 6px}
.legal .updated{color:var(--muted);font-size:13px;margin:0 0 26px}
.legal p,.legal li{font-size:14.5px}
.legal ul{padding-left:20px}

.box{
  background:var(--panel);border:1px solid var(--card-border);
  border-radius:10px;padding:14px 16px;margin:16px 0;
}
.box.warn{border-color:#e0b98f;background:#fdf6ec}
code{background:var(--panel);padding:1px 5px;border-radius:4px;font-size:13px}

/* ---------- Tabellen ---------- */
table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13.5px}
th,td{text-align:left;padding:8px 10px;border:1px solid var(--card-border);vertical-align:top}
th{background:var(--panel);color:var(--akzent-tief);font-weight:600}

/* Auf schmalen Geräten wird aus jeder Zeile eine Karte: die Kopfzeile
   verschwindet, und jede Zelle trägt ihre Spaltenüberschrift aus dem
   data-label-Attribut selbst mit. Sonst zwängen sich drei Spalten mit
   langen Wörtern wie „Google Firebase (Cloud Firestore)“ in 360px und
   schieben die ganze Seite seitlich aus dem Bild. */
@media (max-width:620px){
  table{border:none;font-size:14px}
  table tr:first-child{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  table tr{
    display:block;margin:0 0 12px;
    background:var(--panel);border:1px solid var(--card-border);border-radius:10px;
    padding:4px 12px 10px;
  }
  table td{
    display:block;border:none;padding:8px 0 0;
    border-top:1px solid var(--card-border);
  }
  table td:first-child{border-top:none}
  table td::before{
    content:attr(data-label);
    display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--akzent-tief);font-weight:600;margin-bottom:2px;
  }
  /* Zellen ohne Beschriftung bekommen auch keine leere Zeile darüber. */
  table td:not([data-label])::before{display:none}
}