/* ═══════════════════════════════════════════════════════════════════
   staffOS — Rechtsseiten (Impressum · Datenschutz · AGB)
   ADDITIV zu landing-assets/styles-v1.css. Diese Datei definiert KEIN
   einziges eigenes Farb-, Abstands- oder Typo-Token: alles kommt aus
   styles-v1.css (--ink, --ink-soft, --muted, --paper, --line, --brand,
   --step--1 .. --step-4, --gap, --pad, --rule-hair, --ease).

   WARUM EINE ZWEITE DATEI und nicht styles-v1.css erweitern:
   styles-v1.css wird von der Startseite geladen. Die Startseite ist die
   VORLAGE und wird in diesem Umbau nicht angefasst — eine Aenderung an
   ihrem Stylesheet waere eine Aenderung an ihr, nur auf Umwegen.

   Die Rechtsseiten brauchen genau zwei Dinge, die die Startseite nicht
   hat: einen Lese-Rhythmus fuer langen Fliesstext (.prose-legal) und
   einen mehrspaltigen Fuss. Beides steht hier.

   🔴 HELL UND DUNKEL kommen automatisch mit: styles-v1.css schaltet die
   Token per @media (prefers-color-scheme: dark) um. Hier wird deshalb
   KEINE einzige Farbe wiederholt — sonst haette der Dunkelmodus eine
   zweite, nicht mitgepflegte Wahrheit.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Rahmen des Rechtstextes ──────────────────────────────────────── */
.legal { padding-block: clamp(3rem, 7vh, 5rem) var(--gap); }

/* Lesebreite: 68ch. Die Startseite fuehrt .prose mit 62ch fuer Werbetext;
   ein Rechtstext mit Aufzaehlungen und langen Klammerzusaetzen liest sich
   etwas breiter besser, bleibt aber in derselben Groessenordnung. */
.legal-body { max-width: 68ch; margin-inline: auto; }

/* ── Fliesstext-Rhythmus ──────────────────────────────────────────────
   Ueberschreibt die globalen h1/h2/h3 aus styles-v1.css: die sind fuer
   Plakat-Ueberschriften der Startseite gebaut (h1 = --step-4, bis
   5,3rem) und waeren ueber einem 11-Abschnitte-Rechtstext unbrauchbar.
   Die Skala ist dieselbe, nur eine Stufe tiefer angesetzt. */
.prose-legal h1 {
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.022em;
  margin-bottom: 2.5rem;
}
/* Abschnittskopf mit Haarlinie — die Grammatik der .sec-head der
   Startseite (Ueberschrift + Linie), ohne deren Animation. */
.prose-legal h2 {
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.015em;
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: var(--rule-hair);
}
.prose-legal h3 {
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.01em;
  margin-top: 1.75rem;
  margin-bottom: .5rem;
}
.prose-legal p {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: .75rem;
}
.prose-legal ul {
  margin-top: .5rem;
  margin-bottom: 1rem;
  padding-left: 1.35rem;
  list-style-type: disc;
}
.prose-legal ul li {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: .4rem;
}
.prose-legal ul li::marker { color: var(--muted); }
.prose-legal strong { font-weight: 600; color: var(--ink); }

/* 🔴 Deutsche Rechtstexte tragen lange Komposita — Auftragsverarbeitungs-
   vertrag, Arbeitnehmerueberlassungs-Management-Plattform. styles-v1.css
   ist fuer die kurzen Plakatzeilen der Startseite gebaut und setzt kein
   overflow-wrap; gemessen am 12.09.2026 lief "Datenschutzerklaerung" auf
   390px aus der Spalte. Das trifft die Ueberschrift auf dem Telefon, also
   den haeufigsten Weg auf eine Rechtsseite. */
.prose-legal h1, .prose-legal h2, .prose-legal h3,
.prose-legal p, .prose-legal li { overflow-wrap: break-word; }
.prose-legal h1, .prose-legal h2, .prose-legal h3 { hyphens: auto; }

/* Links im Rechtstext werden UNTERSTRICHEN, nicht nur eingefaerbt:
   Farbe allein ist kein zulaessiges alleiniges Unterscheidungsmerkmal
   (WCAG 1.4.1). Auf der Startseite steht ein Link im Kontext einer
   Datenblatt-Zeile, hier mitten im Satz. */
.prose-legal a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--brand) 45%, transparent);
  transition: text-decoration-color 140ms var(--ease);
}
.prose-legal a:hover { text-decoration-color: var(--brand); }

/* Mono = Fakten, wie auf der Startseite. <code> steht im Datenschutz
   fuer technische Namen (cookie-consent). */
.prose-legal code {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: .9em;
  color: var(--ink-soft);
}

/* Abschnittsabstand — traegt, was vorher die Tailwind-Utility mb-8 tat. */
.prose-legal section { margin-bottom: 2.75rem; }
.prose-legal section:last-of-type { margin-bottom: 0; }

/* Die Stand-Zeile und der Steuernummer-Hinweis: zurueckgenommen, aber
   4,72:1 auf --paper (hell) bzw. 7,47:1 (dunkel) — ueber AA. */
.prose-legal .legal-note {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
}

/* ── Fuss mit Spalten ─────────────────────────────────────────────────
   Die Startseite fuehrt einen einzeiligen Fuss (.foot-in). Die
   Rechtsseiten tragen zusaetzlich zwei Linklisten und eine Kurzbeschreibung
   — derselbe Rahmen (.foot), nur mit Spalten darin. */
.foot-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 48rem) {
  .foot-cols { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
}
.foot-brand { max-width: 34ch; }
.foot-brand .wordmark { margin-bottom: .75rem; }
.foot-brand p {
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.6;
}
.foot-col h4 {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .875rem;
  letter-spacing: .01em;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: .5rem; }
.foot-col a {
  color: var(--muted);
  text-decoration: none;
  font-size: var(--step--1);
  transition: color 140ms var(--ease);
}
.foot-col a:hover { color: var(--ink); }
.foot-bottom { border-top: var(--rule-hair); padding-top: 1.5rem; }

/* Touch-Targets (WCAG 2.5.5) — wie in styles-v1.css fuer .foot a. */
@media (hover: none) and (pointer: coarse) {
  .foot-col a { min-height: 44px; display: inline-flex; align-items: center; }
}