/* ------------------------------------------------------------------
   Rechtstexte - nur was die Textseiten betrifft.

   Farben, Schriften, Blatt, Schriftfeld, Bemaßungslinie und Fußbereich
   kommen aus /grund.css und sind mit der Startseite identisch. Ein
   Rechtstext soll nicht aussehen, als käme er von woanders her.
   ------------------------------------------------------------------ */

/* ---------- Fließtext ----------
   Zeilenlänge begrenzt: 68 Zeichen sind bei einer Serif die Grenze, ab
   der das Auge die nächste Zeile nicht mehr sicher findet. Bei einer
   Datenschutzerklärung von dieser Länge macht das den Unterschied
   zwischen lesbar und abschreckend. */

main {
  max-width: 68ch;
  font-size: .95rem;
  color: var(--tinte-weich);
  padding-bottom: 2rem;
}

main p, main li { line-height: 1.65; }
/* Das Muster-Widerrufsformular in den AGB enthält Ausfülllinien aus
   Unterstrichen. Für den Browser ist so eine Reihe ein einziges Wort und
   schiebt auf dem Telefon die ganze Seite nach rechts. `break-word` bricht
   nur, was sonst nicht passt - normaler Text bleibt unberührt. */
main p, main li, main td, main address { overflow-wrap: break-word; }
main p { margin: 0 0 .75rem; }
main ul, main ol { margin: 0 0 .75rem; padding-left: 1.2rem; }
main li { margin-bottom: .3rem; }
main strong { color: var(--tinte); font-weight: 600; }

/* Abschnittsüberschrift als Positionskürzel: dieselbe Rolle wie das
   „DEV"/„CAD" auf der Startseite, deshalb dieselbe Schrift. */
h2 {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--akzent);
  margin: 2.4rem 0 .5rem;
  line-height: 1.5;
  break-after: avoid;
}
/* Die erste Überschrift schließt direkt an die Bemaßungslinie an. */
main > h2:first-child,
.text > h2:first-child,
main > nav + h2 { margin-top: 0; }

h3 {
  font-family: var(--grotesk);
  font-size: 1rem;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--tinte);
  margin: 1.5rem 0 .4rem;
  break-after: avoid;
}

address { font-style: normal; }

/* ---------- Kasten ----------
   Für Angaben, die man sucht statt liest: Anschrift, Kontaktwege.
   Fläche statt Rahmenlinie allein, damit sie beim Überfliegen auffallen. */

.kasten {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  background: var(--flaeche);
  padding: .9rem 1.1rem;
  margin: 0 0 1rem;
}
.kasten p:last-child,
.kasten address:last-child { margin-bottom: 0; }

/* ---------- Inhaltsverzeichnis ----------
   Nummeriert, weil die Abschnitte im Text aufeinander verweisen
   („siehe Abschnitt 7a"). */

.inhalt {
  border-top: 1px solid var(--linie-fein);
  border-bottom: 1px solid var(--linie-fein);
  padding: 1.1rem 0;
  margin: 0 0 2.4rem;
}
.inhalt ol {
  margin: 0;
  padding-left: 1.4rem;
  columns: 2;
  column-gap: 2.5rem;
}
.inhalt li {
  margin: 0 0 .25rem;
  font-size: .85rem;
  break-inside: avoid;
}
.inhalt a { color: var(--tinte-weich); text-decoration: none; }
.inhalt a:hover { color: var(--akzent); text-decoration: underline; }

/* ---------- Zwei Spalten auf breiten Schirmen ----------
   Das Blatt geht über die ganze Fensterbreite, der Text bleibt bei 68
   Zeichen. Ohne Gegenmaßnahme stünde er als schmale Säule in einer leeren
   Fläche. Also wandert das Inhaltsverzeichnis nach links und bleibt beim
   Scrollen stehen - bei achtzehn Abschnitten ist das der Unterschied
   zwischen Nachschlagen und Suchen.

   `:has()` prüft, ob die Seite überhaupt ein Verzeichnis hat: das
   Impressum hat keines und bleibt einspaltig.

   Verzeichnis und Text liegen in DERSELBEN Rasterzeile - nur deshalb kann
   das Verzeichnis kleben bleiben. Läge es in einer eigenen Zeile, wäre sein
   Bezugsrahmen so hoch wie es selbst, und `sticky` täte nichts. */
@media (min-width: 78rem) {
  main:has(> .inhalt) {
    display: grid;
    grid-template-columns: 17rem minmax(0, 68ch);
    column-gap: clamp(2.5rem, 5vw, 6rem);
    max-width: none;
    align-items: start;
  }
  .vorspann { grid-column: 1 / -1; max-width: 68ch; }
  main > .inhalt {
    grid-column: 1;
    position: sticky;
    top: 2rem;
    margin: 0;
    padding: 0;
    border: none;
  }
  main > .inhalt ol { columns: 1; }
  main > .text { grid-column: 2; }
}

/* ---------- Tabelle ----------
   Die Speicherfristen sind der einzige Teil, den man wirklich nachschlägt.
   Waagerechte Linien reichen; senkrechte machen daraus ein Gitter, das
   schwerer wirkt als der Inhalt ist. */

.tabelle {
  overflow-x: auto;
  margin: 0 0 1rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.tabelle th {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinte-fein);
  text-align: left;
  padding: .7rem .9rem .7rem 0;
  border-bottom: 1px solid var(--linie);
}
.tabelle td {
  padding: .6rem .9rem .6rem 0;
  border-top: 1px solid var(--linie-fein);
  vertical-align: top;
  color: var(--tinte-weich);
}
.tabelle tr td:first-child { color: var(--tinte); }
.tabelle tr:first-child td { border-top: none; }

/* ---------- Widerruf der Einwilligungen ---------- */

.freischalten {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  background: var(--akzent-hg);
  padding: 1rem 1.1rem;
  margin: 1rem 0;
}
.freischalten p { margin: 0 0 .7rem; }
.freischalten p:last-child { margin: .7rem 0 0; }
.freischalten button {
  font-family: var(--grotesk);
  font-size: .85rem;
  font-weight: 580;
  padding: .5rem .9rem;
  background: var(--tinte);
  color: var(--grund);
  border: 1px solid var(--tinte);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.freischalten button:hover:not(:disabled) {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}
.freischalten button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.freischalten button:disabled { opacity: .45; cursor: not-allowed; }

.stand {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--tinte-fein);
  margin-top: 2rem;
}

@media (max-width: 40rem) {
  .inhalt ol { columns: 1; }
}