/* Rechtsseiten: Impressum und Datenschutzerklärung.
   Eine Karte, ein Lesetext, sonst nichts. Diese Seiten werden gelesen,
   nicht bedient – jedes Bedienelement wäre hier im Weg. */

.rechtsblatt { max-width: 46rem; margin: 0 auto; padding: 1.1rem 1.25rem 5rem; }

.recht-kopf { display: flex; align-items: center; gap: 1rem; margin-bottom: 3rem; }
.recht-zurueck {
  font-family: var(--schrift-code); font-size: .78rem;
  color: var(--tinte-leis); text-decoration: none;
}
.recht-zurueck:hover { color: var(--tinte); }
.recht-kopf .schalter {
  margin-left: auto;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  background: none; border: 1px solid var(--kante); border-radius: var(--rund-klein);
  color: var(--tinte-leis); cursor: pointer; font-size: .8rem;
}
.recht-kopf .schalter:hover { color: var(--tinte); border-color: var(--tinte-leis); }

.recht-inhalt { padding: 2rem 2rem 2.4rem; }
@media (max-width: 40rem) { .recht-inhalt { padding: 1.5rem 1.25rem 1.8rem; } }

.recht-inhalt h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: .8rem; }
.recht-lede {
  font-family: var(--schrift-lese); font-size: 1rem;
  color: var(--tinte-mit); line-height: 1.6; margin-bottom: 2rem;
}

.recht-inhalt h2 {
  font-family: var(--schrift-ui); font-weight: 700; font-stretch: 112%;
  font-size: 1.02rem; letter-spacing: -.015em;
  margin: 2.4rem 0 .8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--kante-weich);
}
.recht-inhalt h3 {
  font-size: .92rem; font-weight: 600;
  margin: 1.5rem 0 .4rem;
}

.recht-inhalt p, .recht-inhalt li {
  font-family: var(--schrift-lese); font-size: .95rem;
  line-height: 1.7; color: var(--tinte-mit);
}
.recht-inhalt p + p { margin-top: .8rem; }
.recht-inhalt ul, .recht-inhalt ol { margin: .7rem 0 .7rem 1.2rem; }
.recht-inhalt li + li { margin-top: .35rem; }
.recht-inhalt a { color: var(--fach); text-decoration: underline; text-underline-offset: .15em; }
.recht-inhalt strong { color: var(--tinte); font-weight: 500; }

/* Angabenliste im Impressum: Begriff links, Wert rechts. */
.angaben { display: grid; grid-template-columns: 12rem 1fr; gap: .1rem 1.2rem; }
.angaben dt {
  font-family: var(--schrift-code); font-size: .74rem;
  color: var(--tinte-leis); padding: .55rem 0;
}
.angaben dd {
  font-family: var(--schrift-lese); font-size: .95rem;
  color: var(--tinte-mit); padding: .55rem 0;
  border-bottom: 1px solid var(--kante-weich);
}
.angaben dt { border-bottom: 1px solid var(--kante-weich); }
@media (max-width: 34rem) {
  .angaben { grid-template-columns: 1fr; }
  .angaben dt { border-bottom: none; padding-bottom: 0; }
}

/* Was noch fehlt – auffällig, damit es nicht übersehen wird. */
.todo {
  font-family: var(--schrift-code); font-size: .78rem;
  padding: .1rem .4rem; border-radius: 4px;
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn); font-weight: 500;
}
.offen {
  font-family: var(--schrift-ui); font-size: .88rem; line-height: 1.6;
  padding: .9rem 1rem; margin-bottom: 2rem;
  border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-radius: var(--rund-klein); color: var(--tinte-mit);
}
.offen code.todo { font-size: .74rem; }

.hinweis {
  display: block; margin-top: .3rem;
  font-family: var(--schrift-ui); font-size: .8rem;
  color: var(--tinte-leis); line-height: 1.55;
}

/* Tabellen in der Datenschutzerklärung – auf schmalen Geräten scrollbar,
   damit die Seite selbst nie seitlich läuft. */
.recht-tabelle { overflow-x: auto; margin: 1rem 0; }
.recht-tabelle table { border-collapse: collapse; width: 100%; min-width: 30rem; }
.recht-tabelle th, .recht-tabelle td {
  text-align: left; vertical-align: top;
  padding: .55rem .7rem; border-bottom: 1px solid var(--kante-weich);
  font-size: .86rem; line-height: 1.5;
}
.recht-tabelle th {
  font-family: var(--schrift-code); font-size: .72rem;
  color: var(--tinte-leis); font-weight: 400; white-space: nowrap;
}
.recht-tabelle td { font-family: var(--schrift-ui); color: var(--tinte-mit); }

.recht-fuss {
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
  margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--kante);
  font-family: var(--schrift-code); font-size: .74rem; color: var(--tinte-leis);
}
.recht-fuss a { color: inherit; text-decoration: none; }
.recht-fuss a:hover { color: var(--tinte); }
.recht-luft { flex: 1; }

.stand {
  font-family: var(--schrift-code); font-size: .74rem;
  color: var(--tinte-leis); margin-top: 2.5rem;
  padding-top: 1.2rem; border-top: 1px solid var(--kante-weich);
}