/* ─────────────────────────────────────────────────────────────
   subpage.css · shared chrome for About / Impressum / Datenschutz
   Compute Freedom · p|d · Marianen palette · v1 · 06.07.2026
   Fonts are loaded separately via fonts.css (self-hosted, DSGVO).
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: dark;
  --marianen:#08111A; --abyss:#050B11; --surface:#0C1722; --surface-2:#11202D;
  --burnt:#B85025; --burnt-bright:#DD7740; --lightblue:#A8BCC7; --blue-bright:#C6D7E0; --sand:#B8A082;
  --ink:#D4DDE4; --ink-soft:#C3D0D8; --ink-dim:#8A9AA5;
  --hairline:rgba(168,188,199,0.12); --hairline-2:rgba(168,188,199,0.22);
  --burnt-veil:rgba(184,80,37,0.14); --blue-veil:rgba(168,188,199,0.10);
  --maxw:820px; --ease:cubic-bezier(0.16,1,0.3,1);
}

html { scroll-behavior:smooth; background-color:var(--marianen); }
body {
  background-color:var(--marianen);
  background-image:
    radial-gradient(1100px 600px at 80% -10%, var(--burnt-veil) 0%, transparent 60%),
    radial-gradient(900px 700px at 0% 22%, var(--blue-veil) 0%, transparent 55%);
  background-attachment:fixed;
  color:var(--ink-soft);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
body::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background:var(--burnt); color:#fff; }
a { color:var(--lightblue); text-decoration:none; }
.wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ── header ── */
header {
  position:sticky; top:0; z-index:100;
  background:rgba(8,17,26,0.72);
  backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--hairline);
}
.nav { max-width:1180px; margin:0 auto; padding:0 28px; height:68px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:15px; flex-shrink:0; }
.brand svg { height:38px; width:auto; display:block; overflow:visible; }
.wordmark { font-family:'Newsreader','DM Serif Display',serif; font-weight:500; font-size:21px; letter-spacing:0.015em; color:var(--ink); white-space:nowrap; }
.wordmark b { color:var(--burnt); font-weight:500; text-shadow:0 0 10px rgba(221,119,64,0.9),0 0 24px rgba(221,119,64,0.5); }
.wordmark i { color:var(--lightblue); font-style:normal; text-shadow:0 0 10px rgba(168,188,199,0.9),0 0 24px rgba(168,188,199,0.5); }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links a { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-dim); position:relative; padding:4px 0; transition:color .2s ease; }
.nav-links a:hover { color:var(--ink); }
.nav-links a::after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--burnt); transition:width .25s var(--ease); }
.nav-links a:hover::after, .nav-links a.here::after { width:100%; }
.nav-links a.here { color:var(--ink); }

/* ── page head ── */
main { padding:clamp(48px,7vw,96px) 0 clamp(40px,6vw,72px); }
.eyebrow { font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:0.28em; text-transform:uppercase; color:var(--burnt); display:inline-flex; align-items:center; gap:14px; margin-bottom:22px; }
.eyebrow::before { content:""; width:38px; height:1px; background:var(--burnt); }
h1 { font-family:'DM Serif Display',serif; font-weight:400; font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.05; letter-spacing:-0.015em; color:var(--ink); text-wrap:balance; margin-bottom:20px; }
.lede { font-family:'IBM Plex Sans',sans-serif; font-style:normal; font-weight:400; font-size:clamp(1.15rem,2.4vw,1.45rem); line-height:1.6; color:var(--ink-soft); max-width:62ch; margin-bottom:clamp(32px,5vw,52px); }

/* ── prose ── */
h2 { font-family:'DM Serif Display',serif; font-weight:400; font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.12; letter-spacing:-0.01em; color:var(--ink); margin:clamp(40px,6vw,64px) 0 20px; padding-top:26px; border-top:1px solid var(--hairline); text-wrap:balance; }
h2:first-of-type { border-top:0; padding-top:0; }
h2 .num { display:block; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:var(--burnt); margin-bottom:12px; }
h3 { font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:1.05rem; color:var(--ink); margin:26px 0 8px; letter-spacing:0.01em; }
p { margin-bottom:1.2em; max-width:68ch; }
p:last-child { margin-bottom:0; }
strong, b { color:var(--ink); font-weight:600; }
.term-burnt { color:var(--burnt); font-weight:600; }
.term-blue { color:var(--lightblue); font-weight:600; }
main a[href^="http"], main a[href^="mailto"] { color:var(--lightblue); border-bottom:1px solid var(--hairline-2); }
main a[href^="http"]:hover, main a[href^="mailto"]:hover { color:var(--blue-bright); border-color:var(--lightblue); }

.pull { font-family:'DM Serif Display',serif; font-size:clamp(1.5rem,3.4vw,2.3rem); line-height:1.18; color:var(--ink); letter-spacing:-0.01em; text-wrap:balance; border-left:2px solid var(--burnt); padding:6px 0 6px 26px; margin:clamp(32px,5vw,52px) 0; max-width:24ch; }
.pull.blue { border-color:var(--lightblue); }
.pull em { color:var(--blue-bright); font-weight:700; font-style:normal; font-family:'IBM Plex Sans',sans-serif; font-size:0.86em; }

/* facts list (About) */
.facts { list-style:none; display:grid; gap:13px; margin:24px 0; max-width:70ch; }
.facts li { position:relative; padding-left:28px; color:var(--ink-soft); }
.facts li::before { content:""; position:absolute; left:0; top:0.72em; width:12px; height:1px; background:var(--burnt); }
.facts li b { color:var(--ink); font-weight:600; }

/* definition blocks (Impressum) */
.legal-block { background:var(--surface); border:1px solid var(--hairline); border-radius:5px; padding:clamp(22px,3.5vw,32px); margin:20px 0; }
.legal-block .k { font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-dim); display:block; margin-bottom:6px; }
.legal-block .v { color:var(--ink); font-size:1.02rem; }
.legal-block .v + .k { margin-top:20px; }
.tag { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--burnt); background:var(--burnt-veil); border:1px solid rgba(184,80,37,0.35); border-radius:999px; padding:3px 11px; display:inline-block; margin-bottom:10px; }
.stamp { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-dim); letter-spacing:0.04em; margin-top:36px; padding-top:22px; border-top:1px solid var(--hairline); }

/* ── footer ── */
footer { border-top:1px solid var(--hairline); padding:56px 0 64px; background:var(--abyss); margin-top:clamp(56px,8vw,110px); }
.foot-grid { max-width:1180px; margin:0 auto; padding:0 28px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.foot-brand { display:flex; align-items:center; gap:12px; }
.foot-brand svg { height:30px; width:auto; }
.foot-nav { display:flex; gap:22px; flex-wrap:wrap; }
.foot-nav a { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-dim); }
.foot-nav a:hover, .foot-nav a.here { color:var(--lightblue); }
.foot-meta { font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--ink-dim); letter-spacing:0.04em; }
.foot-meta a { color:var(--ink-dim); }
.foot-meta a:hover { color:var(--lightblue); }
.foot-tag { font-family:'IBM Plex Sans',sans-serif; font-style:normal; font-weight:700; font-size:1.15rem; letter-spacing:0.01em; color:var(--blue-bright); margin:28px auto 0; max-width:1180px; padding:28px 28px 0; border-top:1px solid var(--hairline); text-align:center; text-wrap:balance; }
.foot-copy { font-family:'JetBrains Mono',monospace; font-size:12.5px; color:var(--ink-dim); text-align:center; margin-top:18px; }

@media (max-width:620px){
  .nav-links { gap:18px; }
  .nav-links a:not(.here) { display:none; }
  .wrap { padding:0 20px; }
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* language toggle + legal note (v3.3) */
.lang-toggle{background:none;border:1px solid var(--hairline-2);color:var(--ink-dim);cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.08em;padding:6px 10px;border-radius:3px;margin-left:6px;line-height:1;transition:color .2s,border-color .2s}
.lang-toggle:hover{color:var(--ink);border-color:var(--ink-dim)}
.legal-note{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:0.04em;color:var(--ink-dim);margin:-6px 0 26px}