/* Byte Vision — Rechtsseiten (Impressum, Datenschutz) */
@font-face { font-family: 'Space Grotesk'; font-weight: 400 700; font-display: swap; src: url("fonts/space-grotesk-latin.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }

:root {
  --blue-50: #eef0fc; --blue-100: #dadefb; --blue-300: #8893ec; --blue-500: #2c39c9; --blue-900: #040a87;
  --ink-950: #07080d; --ink-800: #1b1e2a; --ink-500: #5f6678; --ink-400: #868c9d; --ink-300: #b0b5c2;
  --ink-200: #d4d7df; --ink-100: #e8eaee; --ink-50: #f4f5f8;
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; background: #fff; color: var(--ink-800); font: 400 16px/1.7 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--blue-500); text-underline-offset: 3px; }
a:hover { color: var(--blue-900); }
:focus-visible { outline: 3px solid rgba(44, 57, 201, .4); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--ink-100); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink-950); font: 400 25px/1 var(--font-display); letter-spacing: -0.02em; }
.brand b { font-weight: 700; }
.brand svg { width: 36px; height: auto; display: block; }
.back { display: inline-flex; align-items: center; gap: 8px; font: 500 15px var(--font-sans); color: var(--ink-800); text-decoration: none; }
.back:hover { color: var(--blue-500); }

.page { max-width: 780px; margin: 0 auto; padding: 72px 24px 112px; }
.kicker { font: 500 12px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--blue-500); }
.kicker::before { content: "// "; }
h1 { font: 700 clamp(36px, 5vw, 54px)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--ink-950); margin: 16px 0 12px; }
.stand { font: 400 14px var(--font-mono); color: var(--ink-400); margin: 0 0 40px; }
.lead { font-size: 18px; color: var(--ink-500); margin: 0 0 40px; }
h2 { font: 600 24px/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--ink-950); margin: 52px 0 12px; scroll-margin-top: 90px; }
h3 { font: 600 18px/1.3 var(--font-display); color: var(--ink-950); margin: 28px 0 6px; }
p, li { margin: 0 0 14px; }
ul, ol { padding-left: 22px; margin: 0 0 16px; }
address { font-style: normal; }
.card { background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: 12px; padding: 22px 24px; margin: 0 0 18px; }
.card p:last-child { margin-bottom: 0; }
.toc { background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: 12px; padding: 20px 24px; margin: 0 0 40px; }
.toc strong { font: 500 12px var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-500); display: block; margin-bottom: 10px; }
.toc ol { margin: 0; columns: 2; column-gap: 32px; }
.toc li { margin: 0 0 6px; break-inside: avoid; }
.toc a { color: var(--ink-800); text-decoration: none; }
.toc a:hover { color: var(--blue-500); }
.notice { border-left: 3px solid var(--blue-900); background: var(--blue-50); padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 0 0 18px; }
mark.todo { background: #fff2b8; color: #6b4a00; padding: 1px 5px; border-radius: 4px; font-weight: 500; }

.site-footer { background: var(--ink-950); color: var(--ink-300); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-top: 32px; padding-bottom: 32px; font-size: 14px; }
.site-footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer a { color: var(--ink-300); text-decoration: none; }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: #fff; }
.site-footer small { color: var(--ink-400); font-size: 13px; }

@media (max-width: 640px) {
  .page { padding: 48px 16px 80px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .toc ol { columns: 1; }
  h1 { font-size: 34px; }
  .back span { display: none; }
}
@media print {
  .site-header, .site-footer, .toc { display: none; }
  .page { padding: 0; }
  a { color: inherit; }
}