/* =====================================================================
   LEGAL PAGES — Impressum · Datenschutz · AGB
   Nüchternes, dichtes, juristisch-seriöses Raster.
   - Alle Gewichte 500 (keine fetten Überschriften)
   - Fließtext 18px / letter-spacing 1px
   - Einheitliche, kompakte Abstände
   - Sticky Header: Logo mittig + „Zurück" links + weicher schwarzer Fade
   ===================================================================== */

:root {
  --lg-bg:       #15110d;
  --lg-fg:       #ECE8E1;
  --lg-fg-soft:  rgba(236, 232, 225, 0.72);
  --lg-fg-faint: rgba(236, 232, 225, 0.48);
  --lg-line:     rgba(236, 232, 225, 0.10);
  --lg-accent:   #ffd9a8;
  --lg-card:     rgba(236, 232, 225, 0.035);
}

body {
  background: var(--lg-bg);
  color: var(--lg-fg);
  font-family: var(--sans, 'TT Norms', system-ui, sans-serif);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

/* ===== Sticky Header ===== */
.legal-topbar {
  position: fixed; inset: 0 0 auto 0; height: 64px;
  display: flex; align-items: center; justify-content: center;
  z-index: 100; pointer-events: none;
}
.legal-topbar .legal-logo {
  pointer-events: auto;
  font-size: 20px; font-weight: 500; color: var(--lg-fg);
  text-decoration: none; letter-spacing: 0.01em;
}
.legal-topbar .legal-logo strong { font-weight: 600; }
.legal-back {
  position: absolute; left: clamp(16px, 4vw, 32px); pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 13px 0 10px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.3px;
  color: var(--lg-fg-soft);
  border: 1px solid var(--lg-line); border-radius: 999px;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.legal-back:hover { color: var(--lg-fg); border-color: rgba(236,232,225,.35); background: rgba(236,232,225,.05); }

/* Weicher schwarzer Fade: hoher Verlauf + sanfte Blur-Maske (kein harter Rand) */
.legal-fade {
  position: fixed; inset: 0 0 auto 0; height: 220px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.66) 22%, rgba(0,0,0,0.40) 48%,
    rgba(0,0,0,0.16) 72%, rgba(0,0,0,0) 100%);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 16%, rgba(0,0,0,0.5) 56%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 16%, rgba(0,0,0,0.5) 56%, transparent 100%);
  z-index: 90; pointer-events: none;
}

/* ===== Container ===== */
.legal-page { max-width: 720px; margin: 0 auto; padding: 84px clamp(20px, 5vw, 40px) 96px; }
.legal-kicker { display: none; }

.legal-h1 {
  font-size: clamp(30px, 4vw, 40px); font-weight: 500; line-height: 1.12;
  letter-spacing: -0.01em; color: var(--lg-fg); margin: 0 0 6px;
}
.legal-lead {
  font-family: var(--mono, 'Geist Mono', monospace);
  font-size: 13px; letter-spacing: 0.04em; color: var(--lg-fg-faint);
  margin: 0 0 40px;
}

/* ===== Body ===== */
.legal-body { display: flex; flex-direction: column; gap: 26px; }
/* WICHTIG: styles.css setzt global `section { padding:140px }` (Full-Bleed-
   Landingpage). Das muss hier hart zurückgesetzt werden, sonst bekommt jede
   Legal-Section 140px oben + unten = riesige Leer-Abstände. Der Rhythmus
   kommt allein aus .legal-body { gap }. */
.legal-section { padding: 0; margin: 0; position: relative; }
.legal-section h2 { font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--lg-fg); margin: 0 0 10px; letter-spacing: 0; }
.legal-section h3 { font-size: 16px; font-weight: 500; color: var(--lg-fg); margin: 16px 0 6px; letter-spacing: 0.2px; }
.legal-section p, .legal-section li { font-size: 18px; line-height: 1.6; letter-spacing: 1px; color: var(--lg-fg-soft); margin: 0 0 12px; }
.legal-section strong { color: var(--lg-fg); font-weight: 500; }
.legal-section a { color: var(--lg-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s ease; }
.legal-section a:hover { text-decoration: none; }
.legal-section ul, .legal-section ol { padding-left: 20px; margin: 0 0 12px; }
.legal-section ul li::marker { color: var(--lg-fg-faint); }

/* Adress-/Hinweis-Karte */
.legal-card { background: var(--lg-card); border: 1px solid var(--lg-line); border-radius: 14px; padding: 20px 24px; margin: 2px 0; }
.legal-card p { margin: 0 0 6px; color: var(--lg-fg); font-size: 17px; line-height: 1.55; letter-spacing: 0.5px; }
.legal-card p:last-child { margin-bottom: 0; }

/* Definition-List */
.legal-dl { margin: 0; display: grid; grid-template-columns: 130px 1fr; gap: 10px 24px; align-items: baseline; }
.legal-dl dt { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lg-fg-faint); }
.legal-dl dd { margin: 0; font-size: 17px; color: var(--lg-fg); letter-spacing: 0.5px; }
.legal-dl dd a { color: var(--lg-fg); text-decoration: none; border-bottom: 1px solid rgba(255,217,168,.4); padding-bottom: 1px; }
.legal-dl dd a:hover { color: #ffe8c8; border-bottom-color: var(--lg-accent); }

/* Boxen */
.legal-placeholder { background: rgba(255,217,168,.07); border-left: 2px solid var(--lg-accent); padding: 12px 16px; margin: 4px 0; font-size: 14px; line-height: 1.5; letter-spacing: .3px; color: var(--lg-fg-soft); border-radius: 0 6px 6px 0; }
.legal-placeholder::before { content: '\26A0 Hinweis: '; color: var(--lg-accent); font-weight: 500; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.legal-warning { background: rgba(255,99,99,.08); border-left: 2px solid #ff8c8c; padding: 14px 18px; margin: 0 0 8px; font-size: 15px; line-height: 1.55; letter-spacing: .3px; color: var(--lg-fg); border-radius: 0 6px 6px 0; }
.legal-warning strong { color: #ffb8b8; font-weight: 500; }

.legal-foot { display: none; }

/* ===== AGB-Klartext (legal-plain): Überschriften nur fett, gleiche Größe, keine Flächen ===== */
.legal-plain .legal-section h2,
.legal-plain .legal-section h3 {
  font-size: 18px; font-weight: 700; line-height: 1.6; letter-spacing: 1px; color: var(--lg-fg);
}
.legal-plain .legal-section h2 { margin: 0 0 6px; }
.legal-plain .legal-section h3 { margin: 22px 0 6px; }
.legal-plain .legal-section strong { font-weight: 700; color: var(--lg-fg); }

/* ===== Mobile ===== */
@media (max-width: 640px) {
  .legal-topbar { height: 56px; }
  .legal-topbar .legal-logo { font-size: 18px; }
  .legal-fade { height: 170px; }
  .legal-page { padding: 72px 20px 80px; }
  .legal-h1 { font-size: 28px; }
  .legal-lead { margin-bottom: 28px; }
  .legal-body { gap: 22px; }
  .legal-section h2 { font-size: 18px; }
  .legal-section p, .legal-section li { font-size: 16px; }
  .legal-plain .legal-section h2, .legal-plain .legal-section h3 { font-size: 16px; }
  .legal-dl { grid-template-columns: 1fr; gap: 4px 0; }
  .legal-dl dt { margin-top: 10px; }
  .legal-dl dt:first-child { margin-top: 0; }
}