/* Basis: Hintergrund soll schwarz bleiben */
html, body {
  height: 100%;
  margin: 0;
  background: #000;
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Intro-Overlay: schwarzer Screen */
#intro-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 9999;
  user-select: none;
}

/* Logo: max 90% Breite/Höhe */
#intro-logo {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  opacity: 1;
  transform: translateZ(0);
  -webkit-user-drag: none;
}

/* Animation startet, sobald JS .play setzt
   - längere Dauer (3.4s)
   - sanfter Start (cubic-bezier mit mehr ease-in) */
#intro-overlay.play #intro-logo {
  animation: vkSpinSlowFade 3.4s cubic-bezier(0.45, 0.0, 0.2, 1) forwards;
}

/* Overlay am Ende leicht ausblenden */
#intro-overlay.fadeout {
  transition: opacity 220ms ease;
  opacity: 0;
}

/* 15x drehen + am Ende ausblenden
   - 12% Zwischenstufe sorgt für spürbar sanfteren Start */
@keyframes vkSpinSlowFade {
  0%   { transform: rotate(0turn) scale(1);     opacity: 1; }
  12%  { transform: rotate(1.2turn) scale(1);   opacity: 1; } /* softer Start */
  80%  { opacity: 1; }
  100% { transform: rotate(15turn) scale(0.98); opacity: 0; }
}

/* Headline Bereich (späterer Seiteninhalt) */
main {
  min-height: 100vh;
}

/* Überschrift erscheint nach Intro */
.hero {
  text-align: center;
  padding: 20px 16px 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.hero.show {
  opacity: 1;
  transform: translateY(0);
}

.hero h1{
  font-family:"Orbitron",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:800;
  font-size:clamp(42px,6vw,72px);
  letter-spacing:1px;
  line-height: 0.95;     
  margin: 0;
}

.hero p {
  margin: 8px 0 0;
  font-size: clamp(14px, 2vw, 20px);
  opacity: 0.9;
}

/* Reduced Motion: lieber ohne Animation */
@media (prefers-reduced-motion: reduce) {
  #intro-overlay.play #intro-logo {
    animation: none !important;
  }
}