/* ==========================================================================
   corelay - Rechtstexte (impressum.html, datenschutz.html, agb.html)
   --------------------------------------------------------------------------
   Diese Datei ergaenzt die Lesetypo .prose aus css/layout.css um die wenigen
   Bausteine, die ausschliesslich die drei Rechtsseiten brauchen:
   Stand-Zeile, Hinweiskasten, Inhaltsverzeichnis, Datenblock und die
   Auszeichnung der noch auszufuellenden Platzhalter.

   Flaeche, Sektionsabstand, Seitenkopf (.page-head), Lesetypo (.prose),
   Buttons, CTA-Band und das Einblenden beim Scrollen kommen unveraendert
   aus dem Design-System (tokens.css, base.css, layout.css). Hier stehen
   keine Dubletten und keine harten Farbwerte - nur Tokens.

   Alle Selektoren tragen das Praefix .recht, damit nichts mit den uebrigen
   Sektionen kollidiert.

   Inhalt
     1. Sektionsgeruest
     2. Stand-Zeile
     3. Hinweiskasten
     4. Inhaltsverzeichnis
     5. Datenblock (Beschreibungsliste)
     6. Platzhalter-Auszeichnung
     7. Feinheiten der Lesetypo
     8. Querverweise am Seitenende
     9. Staffelung des Einblendens
    10. Breakpoint 700px
    11. Breakpoint 560px
    12. Breakpoint 380px
    13. Reduzierte Bewegung
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Sektionsgeruest
   --------------------------------------------------------------------------
   Die Textspalte ist genauso breit wie .prose (--prose-w, 780px) und sitzt
   mittig im .wrap. Hinweiskasten, Inhaltsverzeichnis und Fliesstext teilen
   sich damit exakt dieselbe Lesekante.
   -------------------------------------------------------------------------- */

.recht-body {
  max-width: var(--prose-w);
  margin-inline: auto;
}

/* Abstaende zwischen den Bloecken der Textspalte */
.recht-stand {
  margin-bottom: var(--sp-6);
}

.recht-note {
  margin-bottom: var(--sp-8);
}

.recht-toc {
  margin-bottom: var(--sp-10);
}


/* --------------------------------------------------------------------------
   2. Stand-Zeile
   --------------------------------------------------------------------------
   Kleine Pille ueber dem Text, die den Redaktionsstand des Dokuments nennt.
   -------------------------------------------------------------------------- */

.recht-stand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background-color: var(--paper-100);
  color: var(--t-on-light-mute);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

.recht-stand .ico {
  width: 14px;
  height: 14px;
}


/* --------------------------------------------------------------------------
   3. Hinweiskasten
   --------------------------------------------------------------------------
   Deutlich sichtbarer Kasten ueber Datenschutzerklaerung und AGB: Der Text
   ist eine vorbereitete Vorlage und ersetzt keine Rechtsberatung.
   -------------------------------------------------------------------------- */

.recht-note {
  display: flex;
  gap: var(--sp-4);
  padding: 22px 24px;
  background-color: var(--blue-50);
  border: 1px solid var(--blue-a18);
  border-radius: var(--r-card);
}

.recht-note-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-tile);
  background-color: var(--paper);
  color: var(--blue-500);
}

.recht-note-icon .ico {
  width: 20px;
  height: 20px;
}

.recht-note-title {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-card-title);
  letter-spacing: var(--ls-card-title);
  color: var(--t-on-light);
  margin-bottom: 8px;
}

.recht-note p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--t-on-light-soft);
}

.recht-note p + p {
  margin-top: 8px;
}


/* --------------------------------------------------------------------------
   4. Inhaltsverzeichnis
   --------------------------------------------------------------------------
   Sprungmarken auf die nummerierten h2-Ueberschriften. Der klebende Header
   wird ueber scroll-padding-top in base.css bereits beruecksichtigt.
   -------------------------------------------------------------------------- */

.recht-toc {
  padding: 22px 24px;
  background-color: var(--paper-50);
  border: 1px solid var(--paper-200);
  border-radius: var(--r-card);
}

.recht-toc-title {
  color: var(--t-on-light-mute);
  margin-bottom: var(--sp-4);
}

.recht-toc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.recht-toc-list a {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--t-on-light-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.recht-toc-list a:hover {
  color: var(--blue-600);
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   5. Datenblock (Beschreibungsliste)
   --------------------------------------------------------------------------
   Zweispaltige Liste aus Bezeichnung und Wert - fuer Anbieterangaben,
   Kontaktdaten und die verantwortliche Stelle.
   -------------------------------------------------------------------------- */

.recht-dl {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px var(--sp-6);
  margin: 0;
  padding: 22px 24px;
  background-color: var(--paper-50);
  border: 1px solid var(--paper-200);
  border-radius: var(--r-card);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}

/* Innerhalb der Lesetypo etwas mehr Luft nach oben als ein Absatz */
.prose .recht-dl {
  margin-top: var(--sp-5);
}

.recht-dl dt {
  font-weight: var(--fw-semibold);
  color: var(--t-on-light);
}

.recht-dl dd {
  margin: 0;
  color: var(--t-on-light-soft);
}


/* --------------------------------------------------------------------------
   6. Platzhalter-Auszeichnung
   --------------------------------------------------------------------------
   Jede Angabe, die vor dem Livegang noch eingetragen werden muss, steht in
   eckigen Klammern und wird hier sichtbar hervorgehoben. So laesst sich auf
   einen Blick erkennen, was noch fehlt.
   -------------------------------------------------------------------------- */

/* Bewusst display: inline und ohne white-space: nowrap - die laengsten
   Platzhalter (z. B. „[Newsletter-Dienstleister oder eigener Versand]“) sind
   breiter als die Textspalte eines 320px-Geraets und muessen umbrechen
   duerfen. box-decoration-break: clone zieht Rahmen, Radius und Hinterlegung
   sauber um jedes Teilstueck, damit der Umbruch nicht auffaellt. */
.recht-ph {
  display: inline;
  padding: 0 6px;
  border: 1px dashed var(--blue-a18);
  border-radius: 5px;
  background-color: var(--blue-50);
  color: var(--blue-600);
  font-size: .94em;
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


/* --------------------------------------------------------------------------
   7. Feinheiten der Lesetypo
   -------------------------------------------------------------------------- */

/* Lange Komposita und Paragrafenbezeichnungen brechen um, statt die Spalte
   zu sprengen - noetig fuer ein sauberes Bild ab 320px. */
.recht-prose,
.recht-dl {
  overflow-wrap: break-word;
}

/* Lange Adressen und Verweise duerfen notfalls mitten im Wort brechen */
.recht-prose a {
  overflow-wrap: anywhere;
}

/* Einleitender Absatz oberhalb der ersten Ueberschrift */
.recht-prose .recht-intro {
  color: var(--t-on-light-soft);
}

/* Technische Zeichenfolgen im Fliesstext (Adressteile, Parameter) */
.recht-prose code {
  padding: 1px 6px;
  border-radius: 5px;
  background-color: var(--paper-100);
  color: var(--t-on-light);
}

/* Nummerierte Unterpunkte innerhalb eines Abschnitts */
.recht-prose ol.recht-sub {
  padding-left: 20px;
}

.recht-prose ol.recht-sub > li::marker {
  color: var(--t-on-light-mute);
  font-weight: var(--fw-semibold);
}

/* Trennlinie vor dem Schlussabsatz */
.recht-prose hr {
  margin-block: var(--sp-10);
}


/* --------------------------------------------------------------------------
   8. Querverweise am Seitenende
   --------------------------------------------------------------------------
   Kurzer Weg zu den beiden jeweils anderen Rechtsseiten.
   -------------------------------------------------------------------------- */

.recht-crosslinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--paper-200);
}

.recht-crosslinks-label {
  margin-right: var(--sp-2);
  color: var(--t-on-light-mute);
}

.recht-crosslinks .btn {
  padding: 10px 18px;
  font-size: var(--fs-body-sm);
}


/* --------------------------------------------------------------------------
   9. Staffelung des Einblendens
   --------------------------------------------------------------------------
   js/main.js setzt .is-visible, die Verzoegerung steuert --reveal-delay.
   -------------------------------------------------------------------------- */

.recht-body > *:nth-child(2) { --reveal-delay: 70ms; }
.recht-body > *:nth-child(3) { --reveal-delay: 140ms; }
.recht-body > *:nth-child(4) { --reveal-delay: 210ms; }


/* --------------------------------------------------------------------------
   10. Breakpoint 700px - Inhaltsverzeichnis einspaltig
   -------------------------------------------------------------------------- */

@media (max-width: 699.98px) {

  .recht-toc-list {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* --------------------------------------------------------------------------
   11. Breakpoint 560px - Datenblock und Hinweiskasten stapeln
   -------------------------------------------------------------------------- */

@media (max-width: 559.98px) {

  .recht-dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .recht-dl dd + dt {
    margin-top: var(--sp-3);
  }

  .recht-note {
    flex-direction: column;
    gap: var(--sp-3);
  }
}


/* --------------------------------------------------------------------------
   12. Breakpoint 380px - Innenabstaende zuruecknehmen
   -------------------------------------------------------------------------- */

@media (max-width: 379.98px) {

  .recht-note,
  .recht-toc,
  .recht-dl {
    padding: 18px;
  }

  .recht-crosslinks .btn {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   13. Reduzierte Bewegung
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .recht-toc-list a {
    transition: none;
  }
}