/* ============================================================
   SolarLense – gemeinsames Design für Rechtsseiten
   (Impressum, Datenschutz) – Tokens/Nav/Footer wie index.html
   ============================================================ */
:root {
  /* fonts */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* colors — brand green */
  --green-900: #0B4945; --green-800: #0E5F5C; --green-700: #12655E;
  --green-600: #1A7D74; --green-500: #2E9388; --green-400: #4FA89E;
  --green-300: #8FCAC2; --green-200: #C9E3DF; --green-100: #E6F2F0; --green-050: #F2F9F7;

  /* colors — sun (warm identity) */
  --sun-amber: #F7C948; --sun-orange: #F79724; --sun-deep: #F2900E; --sun-coral: #EE4A51;

  --horizon-yellow: #E9E000;

  /* neutrals */
  --ink: #2B2B2B; --ink-soft: #343434;
  --slate: #60605F; --gray-500: #8A8A8E;
  --gray-400: #A9A9AD; --gray-300: #C7C7CC;
  --gray-200: #E5E5EA; --gray-150: #ECECEF;
  --gray-100: #F2F2F4; --gray-050: #F8F8FA;
  --white: #FFFFFF; --black: #0C0E0E;

  /* semantic */
  --danger: #E5463F; --success: #1F9E7A;

  --gradient-green: linear-gradient(160deg, var(--green-500) 0%, var(--green-700) 100%);

  --shadow-sm: 0 2px 8px rgba(16,32,30,0.07);
  --shadow-md: 0 6px 20px rgba(16,32,30,0.09);
  --shadow-lg: 0 14px 36px rgba(16,32,30,0.12);

  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px;

  /* page-level aliases (match index.html) */
  --void: #0D1210;
  --teal: var(--green-600);
  --teal-deep: var(--green-700);
  --sand: var(--gray-050);
  --mist: var(--slate);
  --border: rgba(255,255,255,0.08);
  --chalk: rgba(255,255,255,0.88);
  --smoke: rgba(255,255,255,0.44);
  --mono: var(--font-mono);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--sand);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ── Nav (identisch zur Startseite) ────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(13,18,16,0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: 1080px; margin: 0 auto; padding: 0 28px;
  height: 56px; display: flex; align-items: center; justify-content: space-between;
}
.nav__logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; letter-spacing: -.02em; color: var(--chalk);
}
.nav__logo img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.nav__badge {
  font-family: var(--mono); font-size: 11px;
  color: rgba(233,224,0,0.7);
  border: 1px solid rgba(233,224,0,0.25);
  border-radius: 4px; padding: 5px 12px; letter-spacing: .06em;
}

/* ── Page header ───────────────────────────────────────────── */
.legal-hero { background: var(--void); padding: 56px 28px 48px; }
.legal-hero__inner { max-width: 1080px; margin: 0 auto; }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(233,224,0,0.75);
}
.legal-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700;
  letter-spacing: -.03em; color: var(--chalk); margin-top: 12px;
}
.legal-hero p { color: var(--smoke); margin-top: 12px; max-width: 640px; }

/* ── Footer (identisch zur Startseite) ─────────────────────── */
.footer { background: var(--void); border-top: 1px solid var(--border); padding: 36px 28px; }
.footer__inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.footer__logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.5);
}
.footer__logo img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; }
.footer__links { display: flex; gap: 20px; font-size: 13px; color: var(--smoke); flex-wrap: wrap; }
.footer__links a { transition: color .15s; }
.footer__links a:hover { color: var(--chalk); }
.footer__copy {
  width: 100%; font-family: var(--mono); font-size: 11px;
  color: rgba(255,255,255,0.2); letter-spacing: .04em; margin-top: 4px;
}