/* Grundlagen: Farben, Schriften, Hintergrund. Die Schriften selbst kommen aus fonts/fonts.css. */
:root {
  --soot: #0B0D10;
  --graphite: #14181E;
  --graphite-2: #1B2027;
  --brass: #C9A15A;
  --brass-hi: #E9C987;
  --brass-lo: #8A6A32;
  --copper: #B8733A;
  --verdigris: #4FD1B5;
  --amber: #FFB547;
  --steel: #6FA8DC;
  --ink: #ECE6DA;
  --tin: #9AA0A6;
  --danger: #FF7A6B;
  --f-display: 'Michroma', 'Eurostile', 'Bank Gothic', 'Microgramma', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Barlow', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --brass-grad: linear-gradient(135deg, #8A6A32 0%, #E9C987 38%, #A57E3D 72%, #CFA95F 100%);
  --k: 1; /* 1 = voller Auftakt, kleiner = verkürzt (wird von boot.js gesetzt) */
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; background: var(--soot); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--soot);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Hintergrund: Blaupausen-Raster, weiches Licht, Rand-Abdunklung */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--soot); }
.bg::before {
  content: '';
  position: absolute;
  inset: -80px 0;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(79, 209, 181, .08), transparent 58%),
    radial-gradient(90% 60% at 85% 108%, rgba(201, 161, 90, .07), transparent 62%),
    linear-gradient(rgba(201, 161, 90, .045) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(201, 161, 90, .045) 1px, transparent 1px) 0 0 / 40px 40px;
  transform: translate3d(0, max(-40px, calc(var(--sy, 0) * -.04px)), 0);
}
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55));
}
.bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 8px;
  background: var(--graphite); color: var(--ink); border: 1px solid var(--brass); text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 12px; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }

::selection { background: rgba(201, 161, 90, .35); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Einfahrende Banner dürfen nie eine waagerechte Scrollleiste erzeugen. */
html, body { overflow-x: clip; }