/* ═══════════════════════════════════════════════════════════════
   legal.css — Impressum + Datenschutz reading layout

   Loaded ON TOP of the global style.css design tokens. Goal: a calm,
   high-contrast reading page that matches the site's dark cinematic
   aesthetic but stays out of the way. No animations on the content
   itself — these are reference documents people scan, not experiences.
   ═══════════════════════════════════════════════════════════════ */

/* The .legal-page body class lets us disable site-wide effects that
   make a 1500-word reading page worse: custom cursor (input
   accessibility on long pages), GSAP scroll smoother (search/Ctrl-F
   feels wrong with smoothed scroll on text), and any reveal
   animations that would delay body text. */
body.legal-page {
  background: var(--dark, #080C10);
  color: var(--text, #F7F6F4);
}

/* Restore the OS text cursor on the reading area so users can select
   passages naturally. The global `cursor: none` from style.css turns
   into a hostile UX on a wall of legal text. */
body.legal-page,
body.legal-page * {
  cursor: auto;
}
body.legal-page a {
  cursor: pointer;
}

/* Hide the custom dot/ring on legal pages — they distract from
   reading and aren't needed when the OS cursor is back. */
body.legal-page .cursor-dot,
body.legal-page .cursor-ring {
  display: none !important;
}


/* ─── Main reading container ────────────────────────────────── */
.legal-main {
  /* Push past the fixed nav. Nav height is roughly 72px on desktop,
     plus breathing room. */
  padding-top: clamp(7rem, 14vh, 11rem);
  padding-bottom: clamp(5rem, 10vh, 8rem);
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  min-height: 100vh;
  /* Subtle radial spotlight so the page doesn't feel as flat as a
     plain dark rectangle. */
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(232, 160, 32, 0.04) 0%,
      transparent 50%),
    var(--dark, #080C10);
}

.legal-article {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--sans, 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(247, 246, 244, 0.92);
}


/* ─── Header / title block ──────────────────────────────────── */
.legal-header {
  margin-bottom: clamp(3rem, 7vh, 5rem);
  text-align: left;
}

.legal-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent, #E8A020);
  margin-bottom: 1.2rem;
}

.legal-title {
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.85rem 0;
  color: #fff;
}

.legal-subtitle {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  color: rgba(247, 246, 244, 0.55);
  margin: 0;
  font-weight: 300;
}


/* ─── Sections ───────────────────────────────────────────────── */
.legal-section {
  margin-block: clamp(2rem, 4vh, 3rem);
  /* Subtle hairline above each section so the long page has visible
     rhythm without feeling cluttered. */
  padding-top: clamp(2rem, 4vh, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.legal-section:first-of-type {
  /* No hairline above the very first section — the header already
     separates it from the title block. */
  padding-top: 0;
  border-top: none;
}

.legal-section h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 1.2rem 0;
  color: #fff;
}

.legal-section h3 {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  font-weight: 500;
  margin: 2rem 0 1rem 0;
  color: rgba(255, 255, 255, 0.92);
}

.legal-section p {
  margin: 0 0 1rem 0;
  font-size: clamp(0.95rem, 1.1vw, 1rem);
}
.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section strong {
  font-weight: 500;
  color: #fff;
}

/* ─── Lists ─────────────────────────────────────────────────── */
.legal-list {
  margin: 0 0 1rem 0;
  padding: 0;
  list-style: none;
}
.legal-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.65rem;
  font-size: clamp(0.95rem, 1.1vw, 1rem);
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 1px;
  background: var(--accent, #E8A020);
}


/* ─── Links ─────────────────────────────────────────────────── */
.legal-link {
  color: var(--accent, #E8A020);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 160, 32, 0.3);
  transition: border-color .2s ease, color .2s ease;
}
.legal-link:hover {
  color: #fff;
  border-bottom-color: #fff;
}


/* ─── Aside / meta lines ────────────────────────────────────── */
.legal-note {
  font-size: 0.9rem;
  color: rgba(247, 246, 244, 0.6);
  font-style: italic;
}

.legal-meta {
  margin-top: clamp(3rem, 6vh, 5rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.85rem;
  color: rgba(247, 246, 244, 0.5);
  letter-spacing: 0.05em;
}


/* ─── Selection colour ──────────────────────────────────────── */
body.legal-page ::selection {
  background: rgba(232, 160, 32, 0.3);
  color: #fff;
}


/* ─── Narrow viewports ──────────────────────────────────────── */
@media (max-width: 600px) {
  .legal-main {
    padding-top: clamp(5rem, 10vh, 7rem);
  }
  .legal-article {
    line-height: 1.65;
  }
  .legal-section {
    margin-block: 2rem;
    padding-top: 2rem;
  }
}


/* ─── Reduced motion (no specific motion here, but for consistency
   with site-wide pattern) ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .legal-link {
    transition: none;
  }
}