/* Die vier Rechtsseiten.
 *
 * Warum eine eigene Datei und kein <style> in jeder Seite: Vier Seiten mit
 * vier Handkopien derselben Regeln laufen beim ersten Nachbessern
 * auseinander. Und eine strenge Sicherheitsrichtlinie (style-src 'self')
 * verbietet Stilblöcke in der Seite - dieselbe Überlegung, die schon
 * js/thema.js zu einer eigenen Datei gemacht hat.
 *
 * stil.css wird VORHER geladen und bringt alles mit, was zählt: Farbwelt,
 * Schriften, Abstände, Radien, hell und dunkel. Hier steht nur, was ein
 * langer Lesetext braucht und ein Chatfenster nicht - eine breitere
 * Lesespalte, Fließtext-Typografie, eine Tabelle, sichtbare Platzhalter.
 * Kein einziger neuer Farbwert: Wo hier eine Farbe steht, ist es eine
 * Variable aus stil.css.
 */

/* --------------------------------------------------------------- Gerüst */

/* .mitte aus stil.css ist 26rem breit - richtig für ein Anmeldeformular,
   viel zu schmal für einen Vertragstext. 42rem sind rund 75 Zeichen je
   Zeile, das ist die Breite, bei der Fließtext am leichtesten liest. */
.recht {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--abstand-xxl) var(--spalt) 6rem;
}

.recht-zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-xs);
  font-size: 14px;
  line-height: 20px;
  color: var(--text-leise);
  text-decoration: none;
  padding: var(--abstand-xs) var(--abstand-sm);
  margin-left: calc(var(--abstand-sm) * -1);
  border-radius: var(--radius-md);
  transition: background var(--anim-schnell) var(--kurve-aus),
              color var(--anim-schnell) var(--kurve-aus);
}
.recht-zurueck:hover { background: var(--grund-hover); color: var(--text); }
.recht-zurueck:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.recht-kopf { margin: var(--abstand-xl) 0 var(--abstand-lg); }
.recht-kopf h1 { font-size: 32px; line-height: 1.1; margin-bottom: var(--abstand-sm); }

/* Die Fassung ist keine Zierleiste, sondern der Bezugspunkt: Auf genau
   dieses Datum lautet die aufgezeichnete Zustimmung in der Datenbank. */
.recht-fassung {
  font-size: 12px;
  line-height: 18px;
  color: var(--text-leise);
  margin: 0;
}
.recht-fassung time { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Entwurf */

/* Steht über allem anderen, in der Warnfarbe der App - nicht in Rot.
   Rot heißt hier "etwas ist kaputt"; ein Entwurf ist nicht kaputt,
   sondern unfertig. */
.entwurf {
  background: var(--warn-leicht);
  color: var(--warn);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: var(--abstand-md) var(--abstand-lg);
  font-size: 14px;
  line-height: 20px;
  margin-bottom: var(--abstand-xl);
}
.entwurf strong { font-weight: 500; }
.entwurf p { margin: var(--abstand-xs) 0 0; }

/* ---------------------------------------------------------- Abschnitte */

/* Karten statt Haarlinien: Jeder Abschnitt ist eine Sache, also bekommt
   jeder Abschnitt eine Fläche. Vierzehn nur durch Linien getrennte Blöcke
   lesen sich als Tabelle, und eine Tabelle liest hier niemand. */
.abschnitt {
  background: var(--grund-karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius-lg);
  padding: var(--spalt) var(--abstand-xl) var(--abstand-xl);
  box-shadow: var(--schatten-karte);
  margin-bottom: var(--abstand-md);
  scroll-margin-top: var(--abstand-xl);
}
.abschnitt > h2 {
  font-size: 18px;
  margin-bottom: var(--abstand-sm);
}
.abschnitt > h3 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-kraeftig);
  margin: var(--abstand-xl) 0 var(--abstand-xs);
}
.abschnitt > h3:first-of-type { margin-top: var(--abstand-lg); }

/* Die Nummer vor der Überschrift. Leise, weil sie nur der Orientierung
   dient - gelesen wird das Wort daneben. */
.nr {
  color: var(--text-zart);
  font-variant-numeric: tabular-nums;
  margin-right: var(--abstand-sm);
  font-weight: 400;
}

/* Fließtext. 15px/1.65 statt der 14px/20px der App: Ein Formular
   überfliegt man, einen Vertragstext liest man Zeile für Zeile. */
.recht p, .recht li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
}
.recht .abschnitt p { margin: 0 0 var(--abstand-md); }
.recht .abschnitt p:last-child { margin-bottom: 0; }

/* Der Satz in einfachem Deutsch, der sagt, wozu ein Abschnitt da ist. */
.erklaerung {
  color: var(--text-leise);
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.recht ul, .recht ol { margin: 0 0 var(--abstand-md); padding-left: 1.25rem; }
.recht li { margin-bottom: var(--abstand-xs); }
.recht li:last-child { margin-bottom: 0; }
.recht li::marker { color: var(--text-zart); }

/* Links im Fließtext tragen die Zeigerfarbe - blau im Hellen, helleres
   Blau im Dunkeln. Das ist in dieser App durchgehend die Farbe für
   "hier geht es woanders hin". */
.recht a { color: var(--zeiger); }
.recht a:hover { color: var(--zeiger); text-decoration-thickness: 2px; }
.recht a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-xs); }

/* -------------------------------------------------------- Platzhalter */

/* Der wichtigste Baustein dieser Seiten: Was noch fehlt, muss man sehen,
   ohne danach zu suchen. Deshalb eine gestrichelte Kontur in der
   Warnfarbe - der Blick bleibt daran hängen, und beim Überfliegen der
   Seite zählt man in zwei Sekunden, wie viel noch offen ist. */
.platzhalter {
  display: inline-block;
  background: var(--warn-leicht);
  color: var(--warn);
  border: 1px dashed currentColor;
  border-radius: var(--radius-sm);
  padding: 1px var(--abstand-sm);
  font-size: 13px;
  line-height: 1.5;
}

/* Ein Platzhalter, der einen ganzen Absatz ersetzt. */
.platzhalter-block {
  display: block;
  padding: var(--abstand-md) var(--abstand-lg);
  margin-bottom: var(--abstand-md);
}

/* Beschriftung + Wert, für Angaben wie Name, Anschrift, E-Mail. */
.felder { margin: 0 0 var(--abstand-md); }
.felder > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--abstand-xs) var(--abstand-md);
  padding: var(--abstand-sm) 0;
  border-bottom: 1px solid var(--rand-zart);
}
.felder > div:last-child { border-bottom: none; padding-bottom: 0; }
.felder dt {
  flex: 0 0 11rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-leise);
}
.felder dd { margin: 0; flex: 1 1 14rem; font-size: 15px; line-height: 1.5; }

/* Die Fundstelle im Gesetz. Klein und still: Sie belegt den Abschnitt,
   sie ist nicht sein Inhalt. */
.grundlage {
  font-size: 12px !important;
  line-height: 18px !important;
  color: var(--text-zart) !important;
  margin: var(--abstand-lg) 0 0 !important;
  padding-top: var(--abstand-sm);
  border-top: 1px solid var(--rand-zart);
}

/* ------------------------------------------------------------ Inhalt */

.inhalt { padding-bottom: var(--abstand-lg); }
.inhalt ol {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: var(--abstand-xl);
}
.inhalt li { margin-bottom: var(--abstand-xs); break-inside: avoid; }
.inhalt a { font-size: 14px; text-decoration: none; }
.inhalt a:hover { text-decoration: underline; }

@media (max-width: 34rem) {
  .inhalt ol { columns: 1; }
  .felder dt { flex-basis: 100%; }
}

/* ----------------------------------------------------------- Tabelle */

/* Eine breite Tabelle darf scrollen - die Seite darf es nie.
 *
 * Die Tabelle zieht sich über die volle Breite der Karte, das Polster der
 * Karte also weggerechnet. Vier Spalten in einer 42rem-Lesespalte sind
 * ohnehin knapp; die 48 Pixel entscheiden darüber, ob die Spalte "Wofür"
 * in Zweiwortzeilen zerfällt oder sich lesen lässt. */
.tabellenraum {
  overflow-x: auto;
  margin: 0 calc(var(--abstand-xl) * -1) var(--abstand-md);
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
}
.recht table {
  border-collapse: collapse;
  width: 100%;
  /* Darunter wird umgebrochen statt gequetscht - dann scrollt der
     Tabellenraum, und zwar er allein. */
  min-width: 34rem;
  table-layout: fixed;
  font-size: 13px;
  line-height: 1.5;
}
/* Die Spalte, in der der Inhalt steht, bekommt den Rest. Die drei
   anderen tragen einen Namen und ein Wort und bekommen deshalb ein
   festes Mass - in Prozent waeren sie auf einem Telefon so schmal, dass
   "OpenRouter" mitten im Wort bricht. */
.recht col.sp-dienst  { width: 7rem; }
.recht col.sp-firma   { width: 26%; }
.recht col.sp-zustand { width: 6rem; }

.recht th, .recht td {
  text-align: left;
  vertical-align: top;
  padding: var(--abstand-sm) var(--abstand-md);
  border-bottom: 1px solid var(--rand-zart);
  overflow-wrap: break-word;
}
/* Im engen Raum einer Tabellenzelle ist der Platzhalter ein Block und
   kein Fähnchen - sonst sprengt er die Spalte. */
.recht td .platzhalter {
  display: block;
  margin-top: var(--abstand-xs);
  font-size: 11px;
  line-height: 1.4;
  padding: 2px var(--abstand-xs);
}
.recht th {
  font-weight: 500;
  color: var(--text-leise);
  background: var(--grund-tief);
  position: sticky;
  top: 0;
  white-space: nowrap;
}
.recht tbody tr:last-child td { border-bottom: none; }
.recht td:first-child { font-weight: 500; }

/* Läuft der Dienst gerade wirklich, oder steht er nur bereit? Das ist
   der Unterschied zwischen einer Angabe, die stimmen muss, und einer,
   die noch niemanden betrifft. */
.zustand {
  display: inline-block;
  font-size: 11px;
  line-height: 1.5;
  padding: 0 var(--abstand-sm);
  border-radius: var(--radius-pille);
}
.zustand.an  { background: var(--gut-leicht);  color: var(--gut); }
.zustand.aus { background: var(--grund-aktiv); color: var(--text-leise); }

/* -------------------------------------------------------------- Fuß */

.recht-fuss {
  margin-top: var(--abstand-xxl);
  padding-top: var(--abstand-lg);
  border-top: 1px solid var(--rand-zart);
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-sm) var(--abstand-lg);
}
.recht-fuss a {
  font-size: 13px;
  color: var(--text-leise);
  text-decoration: none;
}
.recht-fuss a:hover { color: var(--text); text-decoration: underline; }
.recht-fuss a[aria-current="page"] { color: var(--text); }

/* Die Fußzeile der Startseite. Dieselben vier Links, dieselbe Rolle -
   deshalb dieselbe Datei und nicht eine zweite Handkopie in stil.css. */
.seiten-fuss {
  max-width: 26rem;
  margin: var(--abstand-xxl) auto 0;
  padding: var(--abstand-lg) var(--spalt) var(--abstand-xxl);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-sm) var(--abstand-lg);
  border-top: 1px solid var(--rand-zart);
}
.seiten-fuss a {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-leise);
  text-decoration: none;
}
.seiten-fuss a:hover { color: var(--text); text-decoration: underline; }
.seiten-fuss a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-xs); }

/* ------------------------------------------------- Häkchen beim Anlegen */

/* Bewusst ein echtes <input type="checkbox"> und kein nachgebauter
 * Schalter wie .schalter in stil.css: Nur das echte Bedienelement bringt
 * die Pflichtprüfung des Browsers mit, wird von Screenreadern als
 * Kontrollkästchen angesagt und lässt sich mit der Leertaste bedienen.
 * Bei einer Zustimmung, die nachweisbar sein muss, ist das keine
 * Geschmacksfrage.
 */
.zustimmung {
  display: flex;
  align-items: flex-start;
  gap: var(--abstand-sm);
  font-size: 13px;
  line-height: 18px;
  color: var(--text-leise);
  cursor: pointer;
}
.zustimmung input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--akzent);
  cursor: pointer;
}
.zustimmung a { color: var(--zeiger); }
.zustimmung input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Welche Fassung gerade gilt. Steht klein unter dem Häkchen - wer
 * zustimmt, soll sehen können, WOZU, und die Angabe muss zu der Zeile
 * passen, die dabei in der Datenbank entsteht. */
.zustimmung-fassung {
  margin: var(--abstand-xs) 0 0 24px;
  font-size: 11px;
  line-height: 16px;
  color: var(--text-zart);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Drucken */

/* Ein Vertragstext wird ausgedruckt oder als PDF gesichert - das ist der
   "dauerhafte Datenträger", von dem das FAGG spricht. Dann stören
   Navigation und Schatten. */
@media print {
  .recht-zurueck, .recht-fuss, .inhalt { display: none; }
  .abschnitt { box-shadow: none; break-inside: avoid; border-color: #ccc; }
  .recht { max-width: none; padding: 0; }
}