/* ==========================================================================
   KLINGE — 95-legal.css · Rechtsseiten und Fehlerseite
   Benutzt von impressum.html, datenschutz.html und 404.html.
   Diese drei Seiten stehen für sich: keine Navigation der Startseite,
   nur die schmale Kopfleiste .legal-bar.

   Namensraum: .legal-page · .legal-bar · .legal · .legal__… · .legal-404
   Nur Layout und Typografie dieser Dokumente — globale Klassen aus
   01-base.css (.btn, .link, .eyebrow, .rule, .container …) werden benutzt,
   nie überschrieben. Farben, Abstände und Radien ausschließlich aus Tokens.

   Lesbarkeit vor Effekt: Fließtext höchstens 68 Zeichen breit,
   Zeilenhöhe 1.65, Textfarben mindestens auf --t-body-Niveau.
   ========================================================================== */

/* ==========================================================================
   1. Seitengrund
   ========================================================================== */
.legal-page {
  background: var(--c-coal);
  color: var(--t-strong);
}

/* ==========================================================================
   2. Kopfleiste — schmal, fixiert, Hairline unten
   Wortmarke links, Geisterknopf „Zurück zur Startseite“ rechts.
   backdrop-filter ist hier zulässig, weil das Element fixiert ist.
   ========================================================================== */
.legal-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  background: var(--c-coal);
  background: color-mix(in srgb, var(--c-coal) 76%, transparent);
  box-shadow: inset 0 -1px 0 var(--line);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

/* Haarfeine Signalkante ganz links — die Klinge im Kopf der Seite */
.legal-bar::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: var(--c-signal);
}

/* .legal-bar__inner ist der Standardname; .legal-bar__core wird mitgeführt,
   damit die Leiste auch mit der Doppelrand-Schreibweise sitzt.            */
.legal-bar__inner,
.legal-bar__core {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 3.4rem;
  padding-block: 0.55rem;
}

.legal-bar__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.4rem;
  color: var(--t-strong);
  transition: color var(--d-base) var(--e-sleek);
}
.legal-bar__brand:hover { color: var(--c-signal); }

.legal-bar__mark {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.14em;
  color: inherit;
}

.legal-bar__sub {
  position: relative;
  padding-inline-start: 0.85rem;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--t-body);
  line-height: 1;
}
.legal-bar__sub::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  width: 1px;
  height: 1em;
  transform: translateY(-50%);
  background: var(--line-strong);
}

/* ==========================================================================
   3. Dokumentkopf
   ========================================================================== */
.legal {
  position: relative;
  padding-block-start: calc(var(--sp-8) + var(--sp-4));
}

.legal__hero { position: relative; }

/* Riesiges Paragrafenzeichen als Konturschatten — rein dekorativ */
.legal__glyph {
  position: absolute;
  inset-block-start: -0.22em;
  inset-inline-end: 0;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(9rem, 19vw, 16rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.legal__hero-inner {
  position: relative;
  z-index: var(--z-base);
}

.legal__title {
  margin-block-start: var(--sp-4);
  max-width: 20ch;
}
.legal__title .line { padding-block: 0.04em 0.14em; }

.legal__title-sub {
  display: block;
  margin-block-start: 0.1em;
  font-size: 0.42em;
  letter-spacing: 0.03em;
  color: var(--t-body);
}
.legal__title-sub em { font-style: normal; color: var(--c-signal); }

.legal__lead {
  margin-block-start: var(--sp-4);
  max-width: 54ch;
}

/* Stand-Datum: Mono-Zeile mit Signalstrich */
.legal__stand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-block-start: var(--sp-4);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  line-height: 1;
  color: var(--t-body);
}
.legal__stand::before {
  content: '';
  width: var(--sp-4);
  height: 1px;
  background: var(--c-signal);
  flex: none;
}

/* ==========================================================================
   4. Hinweiskasten — Doppelrand (Schale + konzentrischer Kern)
   Funktioniert allein oder zusammen mit .panel / .panel__core.
   ========================================================================== */
.legal__note {
  margin-block-start: var(--sp-6);
  max-width: 44rem;
  padding: var(--bezel);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}

.legal__note-core {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-core);
  background: var(--c-steel);
  box-shadow: inset 2px 0 0 var(--c-signal), inset 0 0 0 1px var(--line-soft), var(--edge);
}

.legal__note-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--surface-deep);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--c-signal);
}
.legal__note-icon svg { width: 16px; height: 16px; }

.legal__note-text {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--t-body);
  max-width: 62ch;
  text-wrap: pretty;
}

/* ==========================================================================
   5. Raster: Inhaltsverzeichnis + Dokument
   ========================================================================== */
.legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-block-start: var(--sp-7);
}

/* Verzeichnis erst ab 900px sichtbar (siehe Abschnitt 11) */
.legal__toc { display: none; }

.legal__toc-title {
  display: block;
  padding-block-end: var(--sp-2);
  box-shadow: inset 0 -1px 0 var(--line);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--t-body);
  line-height: 1;
}

.legal__toc-list {
  margin-block-start: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.legal__toc-link {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--t-body);
  transition: color var(--d-base) var(--e-sleek), background-color var(--d-base) var(--e-sleek);
}
.legal__toc-link:hover { color: var(--t-strong); background: var(--surface); }

.legal__toc-num {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--t-muted);
  transition: color var(--d-base) var(--e-sleek);
}
.legal__toc-link:hover .legal__toc-num { color: var(--c-signal); }

/* ==========================================================================
   6. Abschnitte
   ========================================================================== */
.legal__sec {
  padding-block: var(--sp-6);
  box-shadow: inset 0 1px 0 var(--line-soft);
  scroll-margin-block-start: var(--sp-8);
}
.legal__sections > .legal__sec:first-child {
  padding-block-start: 0;
  box-shadow: none;
}

.legal__sec-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.legal__sec-num {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-micro);
  font-variant-numeric: tabular-nums;
  color: var(--t-body);
  line-height: 1;
}
.legal__sec-rule {
  height: 1px;
  width: var(--sp-6);
  background: var(--c-signal);
  opacity: 0.65;
  flex: none;
}

/* Abschnittsüberschrift — Versalien, Big Shoulders.
   .legal__h ist der Standardname, .legal__h2 wird mitgeführt.            */
.legal__h,
.legal__h2 {
  margin-block-start: var(--sp-3);
  max-width: 26ch;
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: 0.012em;
  color: var(--t-strong);
}
.legal__h3 {
  margin-block-start: var(--sp-5);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: 0.02em;
  color: var(--t-strong);
}

/* ==========================================================================
   7. Fließtext, Listen, Werte
   ========================================================================== */
.legal__p {
  margin-block-start: var(--sp-3);
  max-width: 68ch;
  line-height: 1.65;
  color: var(--t-body);
  text-wrap: pretty;
}
.legal__p--tight { margin-block-start: var(--sp-2); }

.legal__strong {
  color: var(--t-strong);
  font-weight: 600;
}

/* Technischer Wert, z. B. ein Speicherschlüssel */
.legal__key {
  display: inline-block;
  padding: 0.08em 0.5em;
  border-radius: var(--r-sm);
  background: var(--surface-deep);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  font-family: var(--f-mono);
  font-size: 0.86em;
  color: var(--t-strong);
  overflow-wrap: anywhere;
}

/* Genannte, bewusst nicht verlinkte Adresse */
.legal__url {
  font-family: var(--f-mono);
  font-size: 0.9em;
  color: var(--c-signal-lite);
  overflow-wrap: anywhere;
}

/* Fließtext-Link mit fester Unterkante */
.legal__link {
  color: var(--t-strong);
  box-shadow: inset 0 -1px 0 var(--line-strong);
  transition: color var(--d-base) var(--e-sleek), box-shadow var(--d-base) var(--e-sleek);
}
.legal__link:hover {
  color: var(--c-signal-lite);
  box-shadow: inset 0 -1px 0 var(--c-signal);
}

/* Aufzählung mit Signalquadrat statt Punkt */
.legal__list {
  margin-block-start: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 68ch;
}
.legal__li {
  position: relative;
  padding-inline-start: var(--sp-5);
  line-height: 1.65;
  color: var(--t-body);
  text-wrap: pretty;
}
.legal__li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.66em;
  width: 6px;
  height: 6px;
  background: var(--c-signal);
}
.legal__li .legal__strong { display: block; }

/* ==========================================================================
   8. Definitionslisten — Schlüssel in Mono, Werte in Archivo
   ========================================================================== */
.legal__dl {
  margin-block-start: var(--sp-4);
  max-width: 46rem;
}

.legal__dl-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
  padding-block: var(--sp-2);
  box-shadow: inset 0 -1px 0 var(--line-soft);
}
.legal__dl-row:first-child {
  box-shadow: inset 0 1px 0 var(--line-soft), inset 0 -1px 0 var(--line-soft);
}

.legal__dt {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--t-body);
}

.legal__dd {
  font-family: var(--f-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--t-strong);
  overflow-wrap: anywhere;
}
.legal__dd-line { display: block; }

/* ==========================================================================
   9. Fußzeile
   ========================================================================== */
.legal__foot {
  padding-block: var(--sp-7) var(--sp-6);
}

.legal__foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-block-start: var(--sp-5);
}

.legal__foot-copy {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--t-body);
  font-variant-numeric: tabular-nums;
}

.legal__foot-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
}

.legal__foot-note {
  margin-block-start: var(--sp-4);
  max-width: 68ch;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--t-body);
  text-wrap: pretty;
}

/* ==========================================================================
   10. Fehlerseite — zentrierter Block, riesige 404, Streifenkante
   ========================================================================== */
.legal-404 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: calc(var(--sp-8) + var(--sp-4)) var(--sp-8);
  text-align: center;
}

.legal-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

.legal-404__num {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-mega);
  line-height: var(--lh-blade);
  letter-spacing: 0.01em;
  color: var(--t-strong);
  font-variant-numeric: tabular-nums;
}
.legal-404__num em { font-style: normal; color: var(--c-signal); }

/* Barber-Streifenkante unter der Zahl */
.legal-404 .rule--stripe {
  width: min(100%, 22rem);
  margin-block: var(--sp-1) var(--sp-2);
}

.legal-404__title {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: 0.012em;
  color: var(--t-strong);
}

.legal-404__text {
  max-width: 48ch;
  line-height: 1.65;
  color: var(--t-body);
  text-wrap: pretty;
}

.legal-404__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}

.legal-404__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  margin-block-start: var(--sp-4);
  padding-block-start: var(--sp-4);
  width: 100%;
  box-shadow: inset 0 1px 0 var(--line-soft);
}

/* ==========================================================================
   11. Ab 900px: zweispaltig mit klebendem Verzeichnis
   ========================================================================== */
@media (min-width: 900px) {
  .legal__grid {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: start;
  }
  .legal__toc {
    display: block;
    position: sticky;
    inset-block-start: var(--sp-7);
  }
  .legal__dl-row {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: baseline;
    padding-block: var(--sp-3);
  }
  .legal__sec { padding-block: var(--sp-7); }
}

/* ==========================================================================
   12. Mobil: einspaltig, ruhig, Touch-Ziele ab 44px
   ========================================================================== */
@media (max-width: 767px) {
  .legal__glyph { display: none; }
  .legal-bar__sub { display: none; }
  .legal-bar__brand { min-height: 44px; }
  .legal-bar__inner .btn,
  .legal-bar__core .btn { min-height: 44px; }
  .legal__title { max-width: none; }
  .legal__foot-row { justify-content: flex-start; }
  .legal__foot-nav { gap: var(--sp-1) var(--sp-4); }
  .legal__foot-nav .link { padding-block: 0.8rem; }
  .legal-404__links .link { padding-block: 0.8rem; }
}

/* ==========================================================================
   13. Reduzierte Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .legal-bar__brand,
  .legal__toc-link,
  .legal__toc-num,
  .legal__link { transition: none; }
}

/* ==========================================================================
   14. Druck: Farbrollen umdrehen, Zierrat weglassen
   ========================================================================== */
@media print {
  .legal-page {
    --t-strong: var(--t-strong-inv);
    --t-body:   var(--t-body-inv);
    --t-muted:  var(--t-muted-inv);
    --t-faint:  var(--t-faint-inv);
    --line:        var(--line-inv);
    --line-soft:   var(--line-inv-soft);
    --line-strong: var(--line-inv-strong);
    --surface:      var(--surface-inv);
    --surface-deep: var(--surface-inv);
    background: var(--c-chalk-warm);
    color: var(--t-strong-inv);
  }
  .legal-bar { display: none; }
  .legal__toc { display: none; }
  .legal__glyph { display: none; }
  .legal { padding-block-start: 0; }
  .legal__grid { display: block; }
  .legal__sec { break-inside: avoid; }
  .legal__note-core { background: none; }
  .legal-404 { min-height: 0; }
}