/* ===========================================================================
   PROTEVIA · Legal pages (imprint + privacy)
   Design system v3 "Technical Dossier" · fixed dark theme.
   =========================================================================== */

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

:root {
  --navy:   #0B1218;
  --graphite: #0B1218;
  --surface: #131F2A;
  --panel:  #101923;
  --blue:   #2E96C8;
  --teal:   #2DBDBD;
  --teal-deep: #23A6A6;
  --steel:  #8FA0AA;
  --muted:  #C6D0D6;
  --ice:    #F4F7F8;
  --border: rgba(244,247,248,0.09);
  --border-strong: rgba(244,247,248,0.18);
  --border-teal: rgba(45,189,189,0.30);
  --max:    980px;
  --gutter: clamp(24px,5vw,72px);
  --disp:   "Archivo", "Arial Black", system-ui, sans-serif;
  --sans:   "Inter", system-ui, -apple-system, sans-serif;
  --mono:   "IBM Plex Mono", "SF Mono", Menlo, monospace;
  --chrome-bg: rgba(9,14,19,0.86);
}

body {
  font-family: var(--sans);
  background: var(--graphite);
  color: var(--ice);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
a { color: var(--teal); text-decoration: none; }
::selection { background: rgba(45,189,189,0.30); color: #fff; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.label {
  font-family: var(--mono);
  color: var(--teal); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}

/* ── NAV ── */
#nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  background: var(--chrome-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { display: flex; align-items: center; gap: 12px; }
.nav-symbol { width: 32px; height: 32px; flex-shrink: 0; }
.nav-wordmark { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.nav-name {
  font-family: var(--disp); font-variation-settings: "wdth" 122;
  font-size: 0.98rem; font-weight: 700; color: var(--ice);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.nav-descriptor {
  font-family: var(--mono);
  font-size: 0.5rem; font-weight: 500; color: var(--teal);
  letter-spacing: 0.26em; text-transform: uppercase;
}
.nav-back {
  font-family: var(--mono);
  font-size: 0.66rem; font-weight: 600; color: var(--steel);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.nav-back:hover { color: var(--teal); }

/* ── PAGE HERO ── */
.page-hero {
  padding-top: clamp(128px, 16vw, 180px);
  padding-bottom: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--border);
}
.page-kicker { margin-bottom: 20px; }
.page-title {
  font-family: var(--disp); font-variation-settings: "wdth" 110;
  font-size: clamp(2rem, 4.4vw, 3rem); font-weight: 700;
  letter-spacing: 0.004em; line-height: 1.08; color: var(--ice); margin-bottom: 20px;
}
.page-sub { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--muted); line-height: 1.6; max-width: 680px; }
.page-meta { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--steel); margin-top: 18px; }

/* ── CONTENT ── */
.content { padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(72px, 9vw, 120px); }
.section-block { margin-bottom: clamp(40px, 5vw, 60px); padding-bottom: clamp(40px, 5vw, 60px); border-bottom: 1px solid var(--border); }
.section-block:last-child { border-bottom: 0; margin-bottom: 0; }
.section-label { margin-bottom: 14px; }
.section-heading {
  font-family: var(--disp); font-variation-settings: "wdth" 106;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 650;
  letter-spacing: 0.002em; line-height: 1.2; color: var(--ice); margin-bottom: 20px;
}
.sub-heading {
  font-family: var(--mono);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal); margin: 28px 0 12px;
}
.body-text { font-size: 0.96rem; color: var(--muted); line-height: 1.78; margin-bottom: 16px; max-width: 760px; }
.body-text strong { color: var(--ice); font-weight: 600; }
.body-text a { color: var(--teal); }

/* ── DETAIL / DATA TABLES ── */
.detail-table, .data-table {
  border: 1px solid var(--border); border-radius: 2px; overflow: hidden;
  margin: 22px 0; background: var(--panel);
}
.detail-row, .data-row {
  display: grid; grid-template-columns: 230px 1fr; gap: 20px;
  padding: 14px 20px; border-bottom: 1px solid var(--border);
}
.detail-row:last-child, .data-row:last-child { border-bottom: 0; }
.detail-key, .data-key {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--steel); padding-top: 2px;
}
.detail-val, .data-val { font-size: 0.88rem; color: var(--ice); }
.detail-val a, .data-val a { color: var(--teal); }
@media (max-width: 640px) {
  .detail-row, .data-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ── NOTICE BOX ── */
.notice-box {
  border: 1px solid var(--border-teal); border-left: 2px solid var(--teal);
  background: rgba(45,189,189,0.04); border-radius: 2px;
  padding: 20px 24px; margin: 24px 0; max-width: 760px;
}
.notice-box p { font-size: 0.88rem; color: var(--muted); line-height: 1.7; margin: 0; }

/* ── TOC (privacy) ── */
.toc-wrap { border: 1px solid var(--border); border-radius: 2px; background: var(--panel); padding: 24px 26px; margin-bottom: clamp(40px,5vw,56px); }
.toc-heading {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.toc-list { list-style: none; counter-reset: toc; columns: 2; column-gap: 40px; }
@media (max-width: 640px) { .toc-list { columns: 1; } }
.toc-list li { counter-increment: toc; margin-bottom: 9px; break-inside: avoid; }
.toc-list a { font-size: 0.86rem; color: var(--muted); }
.toc-list a:hover { color: var(--ice); }
.toc-list a::before { content: counter(toc, decimal-leading-zero) "  "; font-family: var(--mono); color: var(--steel); font-size: 0.76rem; }

/* ── RIGHTS GRID (privacy) ── */
.rights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; margin: 24px 0; }
@media (max-width: 640px) { .rights-grid { grid-template-columns: 1fr; } }
.right-item { background: var(--panel); padding: 22px 24px; }
.right-item-title {
  font-family: var(--disp); font-variation-settings: "wdth" 104;
  font-size: 1rem; font-weight: 600; color: var(--ice); margin-bottom: 10px;
}
.right-item-body { font-size: 0.86rem; color: var(--muted); line-height: 1.66; }

/* ── FOOTER ── */
#footer { background: #080E13; border-top: 1px solid var(--border); padding: 40px 0 36px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-copy { font-size: 0.74rem; color: #5B6B75; line-height: 1.6; }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a { font-size: 0.76rem; color: #8FA0AA; }
.footer-legal a:hover { color: var(--teal); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── LIGHT MODE — auto-follows the visitor's device (prefers-color-scheme) ──
   Content flips; nav + footer stay fixed dark chrome (matches the homepage). */
@media (prefers-color-scheme: light) {
  :root {
    --navy:          #FFFFFF;
    --graphite:      #F2F5F7;
    --surface:       #E9EFF2;
    --panel:         #FFFFFF;
    --blue:          #0A74A6;
    --teal:          #0D8080;
    --teal-deep:     #0A6E6E;
    --steel:         #6E7C85;
    --muted:         #44545E;
    --ice:           #0B141A;
    --border:        rgba(11,20,26,0.12);
    --border-strong: rgba(11,20,26,0.22);
    --border-teal:   rgba(13,128,128,0.30);
  }
  #nav { background: rgba(9,14,19,0.86); border-bottom-color: rgba(244,247,248,0.09); }
  .nav-name { color: #F4F7F8; }
  .nav-descriptor { color: #2DBDBD; }
  .nav-back { color: #8FA0AA; }
  .nav-back:hover { color: #2DBDBD; }
  #footer { border-top-color: rgba(244,247,248,0.09); }
  .footer-legal a:hover { color: #2DBDBD; }
}
/* ══════════════════════════════════════════════════════
   Language switcher (EN / DE) — added for multilingual rollout
   ══════════════════════════════════════════════════════ */
.lang-switch{display:inline-flex;align-items:center;gap:.3rem;margin-left:18px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.06em;line-height:1;white-space:nowrap}
.lang-switch a{color:var(--muted,#8CA1AD);text-decoration:none;padding:3px 5px;border-radius:3px;transition:color .18s ease,background .18s ease}
.lang-switch a:hover{color:var(--ice,#F4F7F8)}
.lang-switch a.on{color:var(--teal,#23A6A6);font-weight:600}
.lang-switch .sep{color:var(--muted,#8CA1AD);opacity:.45}
@media (max-width:640px){.lang-switch{margin-left:10px}}