/* ============================================================
   Basis: Reset, Typografie, Layout-Helfer
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--bg-3) var(--bg);
  /* Scrollbar-Platz immer reservieren: kein Layout-Shift, wenn sie nach dem Rendern erscheint */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}
/* Nur für Browser ohne overflow: clip (altes Safari): horizontalen Überlauf am Body kappen */
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

::selection { background: var(--volt); color: #050607; }

h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }

/* Skip-Link: unsichtbar, bis er per Tab fokussiert wird */
.skip-link {
  position: fixed;
  left: 16px; top: -100px;
  z-index: 2000;
  padding: 10px 14px;
  background: var(--volt);
  color: #050607;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  transition: top .2s;
}
.skip-link:focus { top: 12px; outline-offset: 2px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 999px; border: 2px solid var(--bg); }

/* ---------- Helfer ---------- */
.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Layout ---------- */
/* overflow-x: clip, damit 3D-gekippte Sektionen und seitliche Deko-Objekte
   die Layout-Breite auf dem Handy nicht aufweiten */
main { position: relative; z-index: 1; overflow-x: clip; }

.section {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(70px, 12vh, 130px) var(--pad-x);
  scroll-margin-top: var(--nav-h);
}
.section--tight { padding-top: clamp(40px, 7vh, 80px); padding-bottom: clamp(40px, 7vh, 80px); }

/* Abschnittskopf im Schaltplan-Stil: "// 02 · ÜBER MICH ────" */
.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(28px, 5vh, 48px);
  font-family: var(--font-mono);
}
.section-head__num {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--volt);
}
.section-head__num::before { content: "// "; color: var(--muted-2); }
.section-head__title {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
  margin-left: 10px;
}