/* JAACON — Rechtsseiten (Impressum, Datenschutz).
   Ergänzt main.css: ruhige Lesetypografie auf demselben schwarzen Grund. */

.legal {
  padding: calc(var(--header-h) + clamp(5rem, 14vh, 9rem)) 0 clamp(5rem, 12vh, 8rem);
}

.legal .container {
  max-width: 74ch;
}

.legal h1 {
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.15;
  margin: 0 0 clamp(2.5rem, 6vh, 4rem);
}

.legal h2 {
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  margin: clamp(3rem, 7vh, 4.5rem) 0 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}

.legal h3 {
  font-weight: 400;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  margin: 2rem 0 0.6rem;
  color: var(--ink);
}

.legal p,
.legal li {
  color: var(--ink-dim);
  font-size: 0.97rem;
  line-height: 1.75;
}

.legal ul {
  padding-left: 1.2rem;
}

.legal li {
  margin-bottom: 0.5rem;
}

.legal a {
  color: var(--ink);
  text-underline-offset: 4px;
}

.legal address {
  font-style: normal;
  color: var(--ink-dim);
  line-height: 1.9;
}

.legal .back {
  display: inline-block;
  margin-top: 3rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.legal .back:hover {
  color: var(--ink);
}

/* --------------------------------------------------------- Feste Kopfzeile */

/* Auf der Startseite schwebt die Kopfzeile ueber einem Video — dort genuegt
   der weiche Verlauf. Auf einer Textseite laeuft dagegen Fliesstext darunter
   hindurch, und die Wortmarke steht dann mitten in der Zeile. Deshalb bekommt
   die Kopfzeile hier einen eigenen, deckenden Grund. */
body:has(.legal) .site-header {
  background: rgba(0, 0, 0, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Ohne :has() — aeltere Browser — bleibt der Verlauf; dann sorgt wenigstens
   ein kraeftigerer Farbverlauf fuer Abstand. */
@supports not selector(:has(*)) {
  .site-header {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.96) 0,
      rgba(0, 0, 0, 0.88) 70%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}