/* ═══════════════════════════════════════════════════════════════
   Rechtsseiten — Impressum und Datenschutz.

   Erbt alle Farben, Schriften und Maße aus styles.css. Hier steht
   nur, was eine Textseite zusätzlich braucht: eine Lesespalte, eine
   Gliederung und eine Rückkehr zur Startseite.

   Designregeln von V2 gelten weiter:
   Messing = alles, was der Besucher anfasst. Violett = nur Struktur.
   Border-Radius 0.
   ═══════════════════════════════════════════════════════════════ */

/* ── Kopf ────────────────────────────────────────────────────── */
.legal-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(7,6,26,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.legal-nav__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:1.1rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.legal-back{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.06em;
  color:var(--brass); text-decoration:none;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 0; border-bottom:1px solid transparent;
}
.legal-back:hover{ color:var(--brass-hi); border-bottom-color:var(--brass-hi); }
.legal-back::before{ content:"←"; font-size:1em; }

/* ── Lesespalte ──────────────────────────────────────────────── */
.legal{
  max-width:min(720px, 100%);
  margin:0 auto;
  padding:clamp(3.5rem,9vw,6rem) var(--gutter) clamp(5rem,10vw,8rem);
}
.legal .legal__eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass); margin:0 0 1.1rem;
}
.legal .legal__h1{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.1rem,6vw,3.1rem); line-height:1.1;
  color:var(--ink); margin:0 0 1rem;
}
.legal .legal__stand{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em;
  color:var(--muted); margin:0 0 3.5rem;
  padding-bottom:2rem; border-bottom:1px solid var(--line);
}

/* ── Gliederung ──────────────────────────────────────────────── */
.legal h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.25rem,3vw,1.55rem); line-height:1.25;
  color:var(--ink); margin:3.2rem 0 1rem;
  /* Die Ziffer sitzt außen — dieselbe Logik wie die Skala auf der
     Startseite: Nummerierung nur da, wo echte Reihenfolge drin ist. */
  position:relative;
}
.legal h2 .num{
  font-family:var(--mono); font-size:.62em; font-weight:500;
  color:var(--violet-ink); margin-right:.75rem;
  font-variant-numeric:tabular-nums;
}
.legal h3{
  font-family:var(--mono); font-weight:500;
  font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:2rem 0 .7rem;
}
.legal p, .legal li{
  font-family:var(--sans); font-size:1rem; line-height:1.75;
  color:var(--body); margin:0 0 1.1rem;
}
.legal ul{ margin:0 0 1.1rem; padding-left:1.4rem; }
.legal li{ margin-bottom:.5rem; }
.legal li::marker{ color:var(--brass); }
.legal a{ color:var(--brass); text-decoration:underline; text-underline-offset:.22em; }
.legal a:hover{ color:var(--brass-hi); }
.legal strong{ color:var(--ink); font-weight:600; }

/* ── Datenblock: Anschrift, Kontakt ──────────────────────────── */
.legal__block{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:2px solid var(--brass);
  padding:1.5rem 1.7rem;
  margin:0 0 1.6rem;
}
.legal__block p{ margin:0; line-height:1.9; }

/* ── Fuß ─────────────────────────────────────────────────────── */
.legal-foot{
  border-top:1px solid var(--line);
  padding:2.5rem var(--gutter);
}
.legal-foot__inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem;
  align-items:center; justify-content:space-between;
}
.legal-foot a{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.05em;
  color:var(--muted); text-decoration:none;
}
.legal-foot a:hover{ color:var(--brass); }
.legal-foot__base{
  font-family:var(--mono); font-size:.72rem; color:var(--muted); margin:0;
}
.legal-foot__links{ display:flex; gap:2rem; flex-wrap:wrap; }

@media (max-width:600px){
  /* Der Kopf ist eng: neben der Wortmarke bleibt kein Platz für
     den ganzen Satz. Gleiche Lösung wie .btn__long im Hauptmenü. */
  .legal-back__long{ display:none; }
  .legal h2{ margin-top:2.6rem; }
  .legal__block{ padding:1.2rem 1.3rem; }
}