/* ── LEGAL PAGES (Impressum / Datenschutz) ─────────────── */

/* ── HERO ─────────────────────────────────────────────── */

.legal-hero {
  padding: 160px var(--page-padding) 72px;
  border-bottom: 1px solid var(--border-subtle);

  .legal-tag {
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-teal);
    margin-bottom: 20px;
  }

  h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
    margin: 0;
  }
}

/* ── CONTENT ──────────────────────────────────────────── */

.legal-body {
  max-width: 760px;
  padding: 72px var(--page-padding) 120px;

  h2 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 48px 0 12px;
    letter-spacing: 0.02em;

    &:first-child { margin-top: 0; }
  }

  h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 28px 0 8px;
  }

  p {
    color: var(--color-text-muted);
    line-height: 1.75;
    margin: 0 0 16px;

    strong { color: var(--color-text); font-weight: 500; }
  }

  a {
    color: var(--color-teal);
    text-decoration: none;
    transition: color var(--t-fast);

    &:hover { color: var(--color-teal-lt); }
  }

  .legal-address {
    background: var(--color-surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 24px 28px;
    margin-bottom: 40px;

    p { margin: 0; color: var(--color-text); line-height: 1.7; }
  }

  .legal-downloads {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0 16px;

    a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.88rem;

      &::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232aada0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        flex-shrink: 0;
      }
    }
  }

  .legal-divider {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 48px 0;
  }
}

/* ── LIGHT THEME ──────────────────────────────────────── */

[data-theme="light"] .legal-hero {
  h1 { color: var(--color-text); }
}

[data-theme="light"] .legal-body {
  h2 { color: var(--color-text); }
  p { color: var(--color-text-muted); }
  p strong { color: var(--color-text); }

  .legal-address {
    background: var(--color-bg-deep);
    border-color: var(--color-border-card);
    p { color: var(--color-text); }
  }
}

/* ── LIGHT MODE: legal nav override ────────── */
/* No dark hero image → nav needs dark text immediately, no overlay */
[data-theme="light"] .site-nav:not(.scrolled)::before {
  display: none;
}

[data-theme="light"] .site-nav {
  & .nav-links a {
    color: var(--color-nav-link);

    &:hover,
    &.active {
      color: var(--color-teal);
    }
  }

  & .nav-cta {
    border-color: var(--color-teal);
    color: var(--color-teal);

    &:hover {
      background: var(--color-teal);
      color: var(--color-bg);
    }
  }

  & .theme-toggle {
    border-color: var(--color-border);
    color: var(--color-text-muted);
    &:hover {
      border-color: var(--color-border-accent);
      color: var(--color-teal);
      background: var(--color-process-bg);
    }
  }

  /* Hamburger sofort dunkel — kein dunkles Hero-Bild dahinter */
  & .nav-mobile-toggle span {
    background: var(--color-text);
  }
}

[data-theme="light"] .nav-logo {
  & img {
    filter: none;
  }
  &:hover img {
    filter: brightness(0.85);
  }
}

/* ── RESPONSIVE ───────────────────────────────────────── */

@media (max-width: 768px) {
  .legal-hero {
    padding-top: 120px;
    padding-bottom: 48px;
  }

  .legal-body {
    padding-top: 48px;
    padding-bottom: 80px;
  }
}