/* ============================================================
   techmacher — Rechtsseiten (Impressum / Datenschutz)
   Eigenständig lesbar, auch ohne JavaScript und außerhalb des OS.
   Wird zusätzlich vom techmacherOS in ein Fenster geladen.
   ============================================================ */

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/space-grotesk-var.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-var.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-400.woff2') format('woff2'); }

:root {
  --ink-900: #0B0826; --ink-850: #100C30; --ink-800: #16113B; --ink-700: #1F1950; --ink-600: #2B2468;
  --green-300: #8BFFBE; --green-400: #45FF93; --green-500: #00FF6C; --green-600: #00E061; --green-700: #00BB51;
  --fg-1: #FFFFFF; --fg-2: #C7C4E0; --fg-3: #8B87AE; --fg-on-green: #062012;
  --line: rgba(255,255,255,0.09); --line-strong: rgba(255,255,255,0.16);
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
}

/* Globale Regeln nur für die Standalone-Seiten — im OS wird dieselbe Datei
   geladen, darf dort aber die Oberfläche nicht überschreiben */
.legal-page * { box-sizing: border-box; margin: 0; padding: 0; }
.legal-page {
  background: var(--ink-900); color: var(--fg-2);
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(80% 55% at 70% -5%, rgba(0,255,108,0.07), transparent 70%);
  background-repeat: no-repeat;
}
.legal-page a { color: var(--green-400); text-decoration: none; overflow-wrap: anywhere; }
.legal-page a:hover { color: var(--green-300); text-decoration: underline; }
.legal a { overflow-wrap: anywhere; }

.legal-top {
  border-bottom: 1px solid var(--line);
  background: rgba(11,8,38,0.75);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  position: sticky; top: 0; z-index: 10;
}
.legal-top-in {
  max-width: 900px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.legal-top img { display: block; height: 26px; width: auto; }
.legal-nav { display: flex; align-items: center; gap: 18px; font-size: 13.5px; font-weight: 600; }
.legal-nav a { color: var(--fg-3); }
.legal-nav a:hover, .legal-nav a[aria-current="page"] { color: var(--green-400); text-decoration: none; }
.legal-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line-strong);
  color: var(--fg-1); font-family: var(--font-display); font-size: 13px; font-weight: 600;
}
.legal-back:hover { background: rgba(0,255,108,0.1); border-color: rgba(0,255,108,0.3); color: var(--fg-1); text-decoration: none; }
.legal-back svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.legal { max-width: 900px; margin: 0 auto; padding: 48px 24px 96px; }
.legal-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--green-400); }
.legal h1 {
  font-family: var(--font-display); font-weight: 700; color: var(--fg-1);
  font-size: clamp(30px, 4.5vw, 44px); line-height: 1.12; margin: 10px 0 16px;
}
.legal-intro { font-size: 17px; color: var(--fg-2); max-width: 68ch; }
.legal h2 {
  font-family: var(--font-display); font-weight: 600; color: var(--fg-1);
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25;
  margin: 48px 0 14px; padding-top: 24px; border-top: 1px solid var(--line);
}
.legal h3 { font-family: var(--font-display); font-weight: 600; color: var(--green-300); font-size: 17px; margin: 28px 0 8px; }
.legal h4 { font-family: var(--font-display); font-weight: 600; color: var(--fg-1); font-size: 15px; margin: 20px 0 6px; }
.legal p { margin-bottom: 14px; max-width: 74ch; }
.legal ul { margin: 0 0 14px 0; padding-left: 0; list-style: none; max-width: 74ch; }
.legal li { position: relative; padding-left: 22px; margin-bottom: 7px; }
.legal li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px; border-right: 2px solid var(--green-500); border-bottom: 2px solid var(--green-500);
  transform: rotate(-45deg);
}
.legal strong { color: var(--fg-1); font-weight: 700; }
.legal address { font-style: normal; margin-bottom: 14px; }

.legal-card {
  padding: 20px 24px; border-radius: var(--r-md); margin-bottom: 16px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
}
.legal-card.accent { background: linear-gradient(140deg, rgba(0,255,108,0.08), rgba(0,255,108,0.015)); border-color: rgba(0,255,108,0.22); }
.legal-card p:last-child { margin-bottom: 0; }
.legal-label { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }

.legal-toc { margin: 34px 0 8px; padding: 22px 24px; border-radius: var(--r-md); background: rgba(0,0,0,0.2); border: 1px solid var(--line); }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; font-size: 14px; }
.legal-toc li { padding-left: 0; margin-bottom: 6px; break-inside: avoid; }
.legal-toc li::before { display: none; }

.legal-foot { border-top: 1px solid var(--line); margin-top: 56px; padding-top: 22px; font-size: 13.5px; color: var(--fg-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 640px) {
  body { font-size: 15px; }
  .legal { padding: 32px 18px 64px; }
  .legal-top-in { padding: 12px 18px; }
  .legal-toc ol { columns: 1; }
  .legal h2 { margin-top: 36px; }
}

.legal-loading { font-size: 14px; color: var(--fg-3); }

/* Im OS-Fenster: Kopf und Fuß der Standalone-Seite ausblenden, Ränder anpassen */
.in-os .legal-top, .in-os .legal-foot { display: none; }
.in-os .legal { padding: 0; max-width: none; }
.in-os .legal h1 { font-size: 26px; }
.in-os .legal-intro { font-size: 15px; }
.in-os .legal h2 { font-size: 20px; margin-top: 36px; }