/* ==========================================================================
   pages/legal.css — Impressum, Datenschutzerklärung und die 404-Seite.

   Drei Seiten, ein Stil: schmale Lesespalte, ruhige Gliederung, sichere
   Sprungmarken unter der fixierten Kopfleiste. Alles Übrige kommt aus
   base.css, layout.css und components.css — hier steht nur, was diese
   drei Seiten zusätzlich brauchen. Präfix aller eigenen Klassen: .legal
   ========================================================================== */


/* ==========================================================================
   1. DOKUMENTRAHMEN
   ========================================================================== */

/* Die Rechtstexte stehen bewusst schmaler als .wrap--narrow es vorgibt:
   Gesetzestext liest sich in kurzen Zeilen deutlich leichter. */
.legalDoc{
  max-width:74ch;
  margin-inline:auto;
}

.legalDoc > * + *{
  margin-top:clamp(2rem,4vw,3rem);
}


/* ==========================================================================
   2. SEITENKOPF
   ========================================================================== */

.legalHead{
  display:flex;
  flex-direction:column;
  gap:var(--s4);
  padding-bottom:clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--line-soft);
}

.legalHead h1{
  margin:0;
}

.legalHead .lead{
  margin:0;
}

/* Meta-Zeile: Stand der Fassung, Verantwortliche. Klein, aber lesbar. */
.legalHead__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem .9rem;
  margin:0;
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--ink-soft);
  max-width:none;
}

.legalHead__meta > span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}

.legalHead__meta svg{
  flex:0 0 auto;
  width:1.05em;
  height:1.05em;
  color:var(--clay-600);
}


/* ==========================================================================
   3. INHALTSVERZEICHNIS
   Die Chips selbst sind .tag aus components.css — hier nur der Rahmen.
   ========================================================================== */

.legalToc{
  padding:clamp(1.25rem,3vw,1.75rem);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background-color:var(--sand-2);
}

.legalToc__title{
  margin:0 0 var(--s3);
  font-family:var(--font-sans);
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:var(--ls-wider);
  text-transform:uppercase;
  color:var(--clay-700);
}

/* Laufende Nummer vor dem Sprungziel — hilft beim Wiederfinden. */
.legalToc__no{
  font-family:var(--font-display);
  font-size:1em;
  font-weight:600;
  color:var(--clay-600);
  font-variant-numeric:tabular-nums;
}

.legalToc .tag{
  background-color:var(--paper);
  border-color:var(--line);
}


/* ==========================================================================
   4. TEXTKÖRPER UND ABSCHNITTE
   ========================================================================== */

.legalBody{
  max-width:none;
}

.legalSection{
  /* Sprungmarke: die Überschrift darf nicht unter der Kopfleiste landen.
     base.css setzt das für h2[id]; hier zusätzlich für den Abschnitt,
     damit auch :target auf dem <section> sauber anhält. */
  scroll-margin-top:calc(clamp(68px,8vw,88px) + var(--s6));
  padding-top:clamp(1.75rem,4vw,2.75rem);
}

.legalSection + .legalSection{
  border-top:1px solid var(--line-soft);
}

.legalSection > h2{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  margin-top:0;
  margin-bottom:var(--s4);
  scroll-margin-top:calc(clamp(68px,8vw,88px) + var(--s6));
}

/* Abschnittsziffer in der Display-Schrift — dezent, nie Fließtextfarbe. */
.legalSection__no{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:.72em;
  font-weight:600;
  line-height:1;
  color:var(--clay-400);
  font-variant-numeric:tabular-nums;
}

.legalSection > h3{
  margin-top:var(--s5);
}

.legalSection > p,
.legalSection > ul,
.legalSection > ol,
.legalSection > dl{
  max-width:66ch;
}

.legalSection > :last-child{
  margin-bottom:0;
}

/* Rücksprung an den Seitenanfang — ein Textlink, kein zweiter Knopf. */
.legalSection__top{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  margin-top:var(--s4);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  min-height:44px;
  transition:color var(--t-base) var(--ease-soft);
}

.legalSection__top svg{
  width:1.05em;
  height:1.05em;
  transition:transform var(--t-base) var(--ease-out);
}

.legalSection__top:hover,
.legalSection__top:focus-visible{
  color:var(--clay-800);
  text-decoration:none;
}

.legalSection__top:hover svg,
.legalSection__top:focus-visible svg{
  transform:translateY(-3px);
}


/* ==========================================================================
   5. ANGABENLISTE (Impressum)
   Zweispaltige Definitionsliste, einspaltig auf kleinen Bildschirmen.
   ========================================================================== */

.legalData{
  display:grid;
  grid-template-columns:minmax(11rem,15rem) 1fr;
  gap:var(--s3) var(--s5);
  margin:0 0 var(--s5);
  padding:clamp(1.25rem,3vw,1.75rem);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background-color:var(--paper);
  max-width:66ch;
}

.legalData dt{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  line-height:1.5;
  color:var(--ink-soft);
}

.legalData dd{
  margin:0;
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--ink);
}

.legalData dd a{
  color:var(--brand-ink);
}

/* Zeilentrenner nur zwischen den Paaren, nicht am Rand. */
.legalData dt:not(:first-of-type),
.legalData dd:not(:first-of-type){
  padding-top:var(--s3);
  border-top:1px solid var(--line-soft);
}

@media (max-width:640px){
  .legalData{
    grid-template-columns:1fr;
    gap:0;
  }

  .legalData dt{
    padding-top:var(--s4);
    border-top:1px solid var(--line-soft);
  }

  .legalData dt:first-of-type{
    padding-top:0;
    border-top:0;
  }

  /* Überschreibt zugleich die Trennlinie der Desktop-Regel oben. */
  .legalData dd,
  .legalData dd:not(:first-of-type){
    padding-top:var(--s1);
    border-top:0;
  }
}


/* ==========================================================================
   6. ABSCHLUSSBLOCK DER RECHTSTEXTE
   Ein ruhiger Kasten mit genau einem Handlungsaufruf.
   ========================================================================== */

.legalOutro{
  display:flex;
  flex-direction:column;
  gap:var(--s4);
  margin-top:clamp(2.5rem,5vw,4rem);
  padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background-color:var(--sand-2);
  box-shadow:var(--sh-xs);
}

.legalOutro h2{
  margin:0;
  font-size:var(--fs-h3);
}

.legalOutro p{
  margin:0;
  max-width:60ch;
  font-size:var(--fs-base);
  line-height:var(--lh-normal);
  color:var(--ink-soft);
}


/* ==========================================================================
   7. SEITE NICHT GEFUNDEN (404)
   ========================================================================== */

.legalNotFound{
  position:relative;
  overflow:hidden;
}

.legalNotFound__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--s5);
}

/* Weiche Form hinter dem Symbol — dieselbe Blob-Sprache wie im Hero. */
.legalNotFound__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(88px,16vw,128px);
  height:clamp(88px,16vw,128px);
  border-radius:var(--blob-a);
  background-color:var(--clay-100);
  color:var(--clay-700);
  box-shadow:var(--sh-sm);
  animation:blobMorph 18s linear infinite alternate;
}

.legalNotFound__icon svg{
  width:44%;
  height:44%;
}

/* Die Fehlernummer als Großdisplay: erlaubt in --clay-200, weil rein
   dekorativ und weit über 28px. */
.legalNotFound__code{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(3.5rem,14vw,7rem);
  font-weight:600;
  line-height:.9;
  letter-spacing:var(--ls-tight);
  color:var(--clay-200);
  font-variant-numeric:tabular-nums;
  user-select:none;
}

.legalNotFound__inner h1{
  margin:0;
  max-width:18ch;
}

.legalNotFound__inner .lead{
  margin:0;
  max-width:52ch;
}

.legalNotFound__grid{
  width:100%;
  margin-top:clamp(1rem,3vw,2rem);
  text-align:start;
}

.legalNotFound__grid .card{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:var(--s3);
}

.legalNotFound__note{
  margin:0;
  font-size:var(--fs-sm);
  color:var(--ink-soft);
}

.legalNotFound__note a{
  color:var(--brand-ink);
}

@media (max-width:520px){
  .legalNotFound__inner{
    gap:var(--s4);
  }
}