/* ═══════════════════════════════════════════════════════════════════
   Pojana v2 — Impressum und Datenschutz, die helle Fassung
   docs/design-spec.md Abschnitt 2 (helle Fassung), 3 (Lesespalte
   38 rem), 8.5 und 8.6 · Baureihenfolge Schritt 8

   Der Wortlaut dieser beiden Seiten ist eingefroren
   (tests/fixtures/legal-*.txt). Gestaltet wird deshalb alles außer den
   Wörtern: Grund, Farbe, Maß, Spalte, Rhythmus.

   Die helle Fassung kennt genau drei Schriftfarben:
     --ink        Lesetext, Überschriften
     --mute-hell  Nebenschrift (5,1:1 auf --cream)
     --aqua-d     Akzent und Links (4,8:1 auf --cream)
   --mute ist hier verboten, es hat auf --cream nur 2,3:1.

   --mute-hell und --aqua-d liegen zueinander bei 1,07:1 — die Farbe
   allein unterscheidet sie nicht. Überall, wo beide nebeneinander
   stehen (Navigation, Inhaltsverzeichnis, Links im Fließtext), trägt
   der Akzent zusätzlich eine Unterstreichung oder mehr Gewicht.

   Setzt css/base.css und css/komponenten.css voraus. Kopf, Daumen-
   leiste und Fuß sind dieselben Bausteine wie überall; .hell an <html>
   dreht ihre Rollenfarben um.
   ═══════════════════════════════════════════════════════════════════ */


/* ── Lesefortschritt (Spec 8.5/8.6, Motion-Moment) ──────────────────
   Der eine Bewegungsmoment dieser Seiten, neben dem Seitenwechsel aus
   6.3: ein Balken am oberen Rand, der mitläuft, wie weit man im Text
   ist. Scrollgebundene CSS-Animation, 0 KB JavaScript.

   Er ist bewusst nichts weiter. Ein Rechtstext braucht keine
   Choreografie, und mehr wäre respektlos gegenüber dem, was da steht.

   Ohne `animation-timeline: scroll()` gibt es den Balken gar nicht —
   sonst läge eine leere Spur über der Seite, die nichts anzeigt.
   Deshalb steht `display: none` als Voreinstellung und nur die
   @supports-Gruppe holt ihn hervor.

   Er bleibt auch in der ruhigen Fassung: er bewegt sich ausschließlich
   so schnell, wie der Besucher selbst scrollt, und ist damit keine
   Bewegung, vor der prefers-reduced-motion schützen soll. Er ist
   überdies aria-hidden — die Scrollposition steht der Bedienung schon
   über die Bildlaufleiste zur Verfügung, Bewegung ist nie die einzige
   Quelle einer Information (Spec 9).

   Maß aus Spec 5.9: 2 px hoch, Spur gedeckt, Füllung im Signalton.   */

.fortschritt { display: none; }

@supports (animation-timeline: scroll()) {
  .fortschritt {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: block;
    height: 2px;
    background: color-mix(in srgb, var(--ink) 12%, transparent);
  }
  .fortschritt span {
    display: block;
    height: 100%;
    background: var(--aqua-d);
    transform: scaleX(0);
    transform-origin: 0 50%;
    animation: lesen linear both;
    animation-timeline: scroll(root block);
    will-change: transform;
  }
  @keyframes lesen {
    to { transform: scaleX(1); }
  }
}


/* ── Aufmacher (Spec 8.5/8.6) ───────────────────────────────────────
   Die Seitenüberschrift sehr groß über einem schmalen Messingband.
   Mehr steht hier nicht: keine Zierzeile, kein erfundenes Stand-Datum,
   kein Bild. Was gesagt werden darf, steht im Text darunter.

   Das Band läuft links am Randabstand los und rechts über die
   Viewportkante hinaus — volle Breite ist die Voreinstellung (Spec 4),
   und eine Fläche, die an der Kante endet, wirkt abgeschnitten.      */

.recht-auf {
  position: relative;
  /* Voller Bildschirm beim Einstieg (Spec 8), abzüglich der
     Daumenleiste, die fest darüber liegt. Ab 62 rem ist --daumen-h
     null und der Ausdruck wieder 100svh. */
  min-height: calc(100svh - var(--daumen-h));
  display: grid;
  /* Der Satz steht unten auf dem Bildschirm, nicht mittig: das Band
     wird damit zur Grundlinie der Seite, und der Text darüber hat die
     ganze Fläche für sich. Mittig gesetzt zerfiel der Aufmacher in
     zwei gleich große Leerflächen — oben und unten dasselbe Nichts. */
  align-content: end;
  padding: 7rem 0 var(--luft);
}

.recht-auf__vor {
  margin: 0 0 var(--raum-1);
  padding: 0 var(--pad);
}

.recht-auf__h1 {
  margin: 0 0 var(--raum-2);
  padding: 0 var(--pad);
  /* „Datenschutzerklärung" ist ein Wort von zwanzig Zeichen. Bei
     390 px passt es gerade noch in eine Zeile; darunter muss es
     brechen. hyphens: auto trennt es dann nach deutschen Regeln
     (<html lang="de">) statt mitten im Wort — overflow-wrap steht nur
     als letzte Sicherung dahinter, falls ein Browser keine
     Trennmuster für Deutsch mitbringt. */
  hyphens: auto;
  overflow-wrap: break-word;
}

.recht-auf__band {
  height: .5rem;
  margin-left: var(--pad);
  background: var(--aqua-d);
}

/* Die Navigation zwischen den beiden Rechtstexten und zurück zur
   Startseite. Sie steht direkt unter dem Band und ist der einzige
   Zusatz im Aufmacher — ein Weg, kein Text.

   Der aktuelle Eintrag steht in --mute-hell ohne Linie, die Wege in
   --aqua-d mit Unterstreichung. Die beiden Töne liegen dicht
   beieinander, deshalb trägt der Unterschied hier die Linie und nicht
   die Farbe. */
.rechtnav {
  margin: var(--raum-2) 0 0;
  padding: 0 var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  font-family: var(--disp);
  font-size: .92rem;
  font-stretch: 104%;
}
.rechtnav__hier {
  font-weight: 700;
  color: var(--mute-hell);
}
.rechtnav a {
  font-weight: 600;
  color: var(--aqua-d);
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
}
.rechtnav a:hover { text-decoration-thickness: 2px; }

@media (min-width: 62rem) {
  .recht-auf { padding: 8rem 0 var(--luft); }
  /* Das Band bekommt am Desktop etwas mehr Gewicht — es trägt dort
     eine Überschrift von bis zu 104 px. */
  .recht-auf__band { height: .75rem; }
}


/* ── Der Textkörper ─────────────────────────────────────────────────
   Lesespalte 38 rem (Spec 3, Regeln). Das ist eine Spalte, und die ist
   hier begründet: längerer Fließtext wird nicht breiter gesetzt, egal
   wie viel Platz daneben frei ist.

   Damit daneben trotzdem nicht einfach Leere steht, bekommt die Seite
   ab 62 rem eine linke Spalte — auf dem Datenschutz das mitlaufende
   Inhaltsverzeichnis, auf dem Impressum die Paarung aus Überschrift
   und Angabe (siehe .recht--blatt weiter unten).                      */

.recht {
  padding: var(--luft) var(--pad) var(--luft);
  display: grid;
  gap: var(--raum-3);
}

.recht__text { max-width: var(--spalte-text); }

.recht__text h2 {
  /* Die Tafel-Stufe der Skala (Spec 3). Die Abschnitt-Stufe wäre für
     eine Zwischenüberschrift im Rechtstext dreimal zu laut. */
  margin: var(--luft) 0 var(--raum-1);
  font-size: var(--t-tafel);
}
.recht__text > :first-child { margin-top: 0; }

.recht__text p {
  margin: 0 0 var(--raum-1);
  max-width: var(--spalte-text);
  font-size: var(--t-lese);
  line-height: 1.7;
}

/* Die Aufzählungen im Datenschutz sind Listen von Datenarten, keine
   Argumente: kein Punkt, sondern ein kurzer Messingstrich, der zeigt,
   dass hier etwas aufgezählt wird. */
.recht__text ul {
  margin: 0 0 var(--raum-2);
  padding: 0;
  list-style: none;
  max-width: var(--spalte-text);
}
.recht__text li {
  position: relative;
  padding-left: 1.5rem;
  margin: 0 0 .45rem;
  line-height: 1.6;
}
.recht__text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: .8rem;
  height: 2px;
  background: var(--aqua-d);
}

/* Links im Fließtext: Signalton plus Unterstreichung. Die Adressen der
   beiden Dienstleister sind lang und müssen bei 390 px umbrechen
   dürfen, sonst schieben sie die Spalte aus dem Bild. */
.recht__text a {
  color: var(--aqua-d);
  font-weight: 500;
  overflow-wrap: anywhere;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.recht__text a:hover { text-decoration-thickness: 2px; }


/* ── Das Impressum als Angabenblatt ─────────────────────────────────
   Vier kurze Angaben. Als Fließtext untereinander wäre das eine halbe
   Bildschirmseite Luft; als Paarung aus Überschrift links und Angabe
   rechts ist es das, was es ist — ein Blatt mit Pflichtangaben.
   Ab 48 rem, darunter bleibt es gestapelt.

   Die Klasse heißt .angabe und nicht .blatt: .blatt ist im System
   schon das Formularblatt des Anfragebereichs (komponenten.css 5.6,
   js/bewegung.js sucht danach).                                       */

.recht--angaben .recht__text { max-width: 58rem; }

.angabe {
  margin: 0;
  padding: var(--raum-3) 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}
.angabe:first-of-type { border-top: 0; padding-top: 0; }

.angabe h2 { margin: 0 0 var(--raum-1); }
.angabe p  { margin: 0; }

@media (min-width: 48rem) {
  .angabe {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, var(--spalte-text));
    gap: var(--raum-3);
    align-items: start;
  }
  .angabe h2 {
    margin: 0;
    /* Die Überschrift steht links als Marke der Zeile, nicht als Ruf.
       Kleiner als die Tafel-Stufe wäre sie im Raster nicht mehr als
       Überschrift zu erkennen — deshalb bleibt die Größe und ändert
       sich nur die Rolle. */
    font-size: var(--t-tafel);
  }
}


/* ── Inhaltsverzeichnis — nur Datenschutz ───────────────────────────
   Elf Abschnitte sind zu viel, um sie am Stück zu suchen. Das
   Verzeichnis benennt sie mit genau ihren eigenen Überschriften; es
   kommt kein Wort hinzu, das nicht ohnehin auf der Seite steht.

   Am Handy steht es vor dem Text, am Desktop läuft es links mit.     */

/* Kein eigener Abstand nach unten: den Abstand zum Text macht auf jeder
   Breite der Rasterabstand von .recht. */
.inhalt { margin: 0; }
.inhalt__titel {
  margin: 0 0 var(--raum-1);
  font-family: var(--disp);
  font-size: var(--t-etikett);
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: .06em;
  color: var(--mute-hell);
}
.inhalt ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.inhalt li { margin: 0 0 .5rem; }
.inhalt a {
  display: inline-block;
  font-size: .95rem;
  line-height: 1.4;
  color: var(--aqua-d);
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
}
.inhalt a:hover { text-decoration-thickness: 2px; }
/* Die Nummer trägt die Nebenfarbe, der Titel den Akzent. Zwei Töne
   dicht beieinander — deshalb liegt der Unterschied zusätzlich im
   Gewicht und in der Linie, die nur der Titel hat. */
.inhalt .nr {
  display: inline-block;
  min-width: 1.6rem;
  font-family: var(--disp);
  font-weight: 700;
  font-stretch: 104%;
  color: var(--mute-hell);
  text-decoration: none;
}

@media (min-width: 62rem) {
  .recht--lang {
    grid-template-columns: minmax(13rem, 18rem) minmax(0, var(--spalte-text));
    gap: clamp(2.5rem, 6vw, 7rem);
    align-items: start;
  }
  .recht--lang .recht__rand {
    position: sticky;
    top: var(--raum-3);
  }
}