*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  background: var(--c-dunkel);
  color: var(--c-text-hell);
  font-family: var(--font-copy);
  font-weight: 300;
  font-size: var(--size-copy);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-headline); font-weight: 400; line-height: 1.18; }
a { color: inherit; text-decoration: none; }
/* Seit die Bilder ihre echten Maße im Markup tragen, kennt der Browser
   das Seitenverhältnis vor dem Laden und die Seite hört auf zu springen.
   Damit die Attribute die Darstellung nicht verzerren, wo das CSS nur
   eine Seite vorgibt, rechnet die andere automatisch mit. */
img { max-width: 100%; display: block; height: auto; }
.section { position: relative; padding: var(--space-l) 0; }
.wrap { width: min(100% - 2 * var(--space-m), 1280px); margin-inline: auto; }
.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--size-klein);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--c-text-sekundaer-dunkel);
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 3px;
}
.gradient-text {
  background: var(--gradient-spektrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#aurora { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; }

/* ================= Hintergrund-Bildwelt ================= */
#bgwelt {
  position: fixed;
  inset: -3%;
  z-index: -1;
  background: #070709;
  will-change: transform;
}
.bg-schicht {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity, transform;
}

/* ================= Intro-Overlay ================= */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--c-dunkel);
  display: grid;
  place-items: center;
}
#intro-overlay:empty { display: none; }
.intro-logo { width: min(60vw, 280px); }
body.intro-laeuft { overflow: hidden; }

/* ================= Fix-Navigation ================= */
#fixnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: 0.8rem var(--space-m);
  background: rgba(19, 19, 22, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#fixnav.sichtbar { opacity: 1; visibility: visible; }
.fixnav-logo img { height: 20px; width: auto; }
.fixnav-links { display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); }
.fixnav-links a {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-bottom: 3px;
  background-image: var(--gradient-spektrum);
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  transition: background-size 0.35s ease;
}
@media (hover: hover) {
  .fixnav-links a:hover { background-size: 100% 2px; }
}
#fixnav.auf-hell { background: rgba(243, 241, 237, 0.6); }
#fixnav.auf-hell .fixnav-links a { color: var(--c-dunkel); }
#fixnav.auf-hell .fixnav-logo img { filter: invert(1) brightness(0.2); }
.fixnav-burger {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.fixnav-burger span { display: block; width: 26px; height: 2px; background: currentColor; color: var(--c-text-hell); }
#fixnav.auf-hell .fixnav-burger span { color: var(--c-dunkel); }
#mobilmenue[hidden] { display: none; }
#mobilmenue {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(19, 19, 22, 0.96);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#mobilmenue.offen { opacity: 1; }
#mobilmenue nav { display: flex; flex-direction: column; gap: var(--space-m); text-align: center; }
#mobilmenue a {
  font-family: var(--font-headline);
  font-size: var(--size-headline-m);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-text-hell);
}
@media (max-width: 900px) {
  .fixnav-links { display: none; }
  .fixnav-burger { display: flex; }
}
#fixnav.menue-offen { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
#fixnav.menue-offen .fixnav-logo img { filter: none; }
#fixnav.menue-offen .fixnav-burger span { color: var(--c-text-hell); }