/* ============================================================
   Maly Development — Legal pages (Impressum / Datenschutz / AGB)
   Matches the main site: dark theme + violet/cyan, with light-mode
   support. Maps the legacy variable names the legal HTML uses to the
   new design tokens, so only minimal HTML changes are needed.
   ============================================================ */

:root {
  --bg: 10 11 18;
  --bg-soft: 16 18 28;
  --surface: 20 23 36;
  --fg: 245 247 255;
  --muted: 160 167 194;
  --border: 40 44 64;
  --violet: 124 108 255;
  --cyan: 34 211 238;

  /* legacy semantic names used inline by the legal HTML */
  --color-text-primary: rgb(var(--fg));
  --color-text-muted: rgb(var(--muted));
  --color-accent-light: #a99cff;
  --color-border-subtle: rgb(var(--border) / 0.6);
  --font-display: 'Space Grotesk', 'Inter', sans-serif;

  --nav-height: 64px;
  --transition-fast: 0.2s ease;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-24: 6rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-xl: 1.25rem;
  --text-3xl: clamp(1.6rem, 4vw, 2rem);
  --text-4xl: clamp(2.25rem, 5vw, 3rem);
  --space-1: 0.25rem;
  --space-5: 1.25rem;
  --space-16: 4rem;
  --color-text-secondary: rgb(var(--fg) / 0.82);
}

.light {
  --bg: 246 247 251;
  --bg-soft: 255 255 255;
  --surface: 255 255 255;
  --fg: 20 22 42;
  --muted: 92 99 122;
  --border: 224 228 240;
  --violet: 91 79 224;
  --cyan: 14 151 184;
  --color-accent-light: #5b4fe0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}

/* Ambient glow background (matches the main site) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(40% 35% at 18% 10%, rgb(var(--violet) / 0.14), transparent 70%),
    radial-gradient(45% 40% at 88% 85%, rgb(var(--cyan) / 0.1), transparent 70%);
}
.light body::before {
  background:
    radial-gradient(40% 35% at 18% 10%, rgb(var(--violet) / 0.07), transparent 70%),
    radial-gradient(45% 40% at 88% 85%, rgb(var(--cyan) / 0.06), transparent 70%);
}

/* 3D background (Scene canvas) + legibility scrim — mirrors the main site */
#legal-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; }
#legal-bg canvas { display: block; }
#legal-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgb(var(--bg)); opacity: 0.5; }

::selection { background: rgb(var(--violet) / 0.35); color: rgb(var(--fg)); }
a { color: var(--color-accent-light); }

.container { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 1.5rem; }

/* ---- Header ---- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgb(var(--bg) / 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgb(var(--border) / 0.6);
}
.nav__container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav__logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.nav__logo-text { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: rgb(var(--fg)); }
.nav__actions { display: flex; align-items: center; gap: 0.75rem; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: 999px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: all var(--transition-fast); cursor: pointer; border: none;
}
.btn--sm { height: 2.5rem; padding: 0 1.1rem; font-size: var(--text-sm); }
.btn--ghost { border: 1px solid rgb(var(--border) / 0.9); background: rgb(var(--fg) / 0.02); color: rgb(var(--fg)); }
.btn--ghost:hover { border-color: rgb(var(--violet) / 0.6); background: rgb(var(--fg) / 0.05); }

/* ---- Theme toggle ---- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  border: 1px solid rgb(var(--border) / 0.7); background: transparent;
  color: rgb(var(--fg) / 0.75); cursor: pointer; transition: color var(--transition-fast);
}
.theme-toggle:hover { color: rgb(var(--fg)); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
.light .theme-toggle .icon-sun { display: none; }
.light .theme-toggle .icon-moon { display: inline; }

/* ---- Language toggle (DE/EN) + bilingual content ---- */
.lang-en { display: none; }
html.md-en .lang-en { display: block; }
html.md-en .lang-de { display: none; }
html.md-en .btn .lang-en { display: inline; }
.lang-toggle { display: inline-flex; align-items: center; border: 1px solid rgb(var(--border) / 0.7); border-radius: 999px; padding: 2px; }
.lang-toggle button { border: none; background: transparent; color: rgb(var(--muted)); font: 600 11px/1 'Inter', system-ui, sans-serif; letter-spacing: 0.05em; padding: 5px 9px; border-radius: 999px; cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); }
.lang-toggle button:hover { color: rgb(var(--fg)); }
.lang-toggle button.is-active { background: rgb(var(--fg) / 0.1); color: rgb(var(--fg)); }

/* ---- Legal content ---- */
.legal-page { min-height: 100vh; padding-top: calc(var(--nav-height) + var(--space-12)); padding-bottom: var(--space-24); }
.legal-page .container { max-width: 800px; }
.legal-page h1 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--fg)); margin-bottom: var(--space-8); }
.legal-page h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; color: rgb(var(--fg)); margin-top: var(--space-10); margin-bottom: var(--space-3); }
.legal-page h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: rgb(var(--fg)); margin-top: var(--space-6); margin-bottom: var(--space-2); }
.legal-page p, .legal-page address, .legal-page li { color: rgb(var(--muted)); line-height: 1.75; font-style: normal; margin-bottom: var(--space-4); }
.legal-page ul, .legal-page ol { padding-left: 1.25rem; margin-bottom: var(--space-4); }
.legal-page li { margin-bottom: 0.4rem; }
.legal-page a { color: var(--color-accent-light); text-decoration: underline; text-underline-offset: 3px; }
.legal-page a:hover { color: rgb(var(--fg)); }
.legal-page strong { color: rgb(var(--fg)); font-weight: 600; }
.legal-page table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); font-size: 0.9rem; }
.legal-page th, .legal-page td { border: 1px solid rgb(var(--border) / 0.6); padding: 0.6rem 0.8rem; text-align: left; color: rgb(var(--muted)); vertical-align: top; }
.legal-page th { color: rgb(var(--fg)); font-weight: 600; }

/* AGB "Teil 2" divider — beats `.legal-page h2` specificity so it stays large */
.legal-page h2.legal-section-title { font-size: var(--text-3xl); font-weight: 700; margin-top: var(--space-16); padding-top: var(--space-4); }
.legal-page .legal-notice-box { background: rgb(var(--violet) / 0.08); border: 1px solid rgb(var(--violet) / 0.22); border-radius: 12px; }

/* TOC "Inhalt" box: the inline rgba(255,255,255,0.03) glass is invisible on the
   light background — give it a clearly visible frosted-glass card in light mode
   (dark mode keeps the subtle inline style). */
.light .toc {
  background: rgb(255 255 255 / 0.45);
  border: 1px solid rgb(var(--fg) / 0.1);
  box-shadow: 0 10px 28px -18px rgb(20 22 42 / 0.14);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.back-link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: rgb(var(--muted)); text-decoration: none; margin-bottom: var(--space-10); transition: color var(--transition-fast); }
.back-link:hover { color: rgb(var(--cyan)); }
.back-link svg { width: 16px; height: 16px; }

.legal-divider { border: none; border-top: 1px solid rgb(var(--border) / 0.6); margin: var(--space-8) 0; }

/* ---- Footer ---- */
.footer { border-top: 1px solid rgb(var(--border) / 0.6); margin-top: var(--space-12); }
.footer__copy { color: rgb(var(--muted)); font-size: 0.875rem; }
.footer a:hover { color: rgb(var(--fg)) !important; }