/* ─── Fonts ──────────────────────────────────────────────────── */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/Orbitron-Black.ttf') format('truetype');
}

@font-face {
  font-family: 'Quantico';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/Quantico-Bold.ttf') format('truetype');
}

/* ─── CSS Variables ──────────────────────────────────────────── */
:root {
  --cyan:      #00d4ff;
  --cyan-dim:  rgba(0, 212, 255, 0.35);
  --cyan-glow: rgba(0, 212, 255, 0.85);
  --white:     #ffffff;
  --border-w:  3px;
  --border-r:  18px;
}

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

html, body {
  width: 100%; height: 100%;
  background: #000;
  color: var(--white);
  font-family: 'Quantico', sans-serif;
  overflow-x: hidden;
}

/* ─── Background ─────────────────────────────────────────────── */
.bg {
  position: fixed;
  inset: 0;
  background-image: url('assets/4k_Background_01.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(0,60,100,0.5) 0%, transparent 65%);
}

/* ─── Scene ──────────────────────────────────────────────────── */
.scene {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ─── Neon frame ─────────────────────────────────────────────── */
.frame {
  position: relative;
  width: 100%;
  max-width: 1360px;
  min-height: min(780px, 90vh);
  border: var(--border-w) solid var(--cyan);
  border-radius: var(--border-r);
  box-shadow:
    0 0 12px  var(--cyan-glow),
    0 0 40px  var(--cyan-dim),
    inset 0 0 20px rgba(0, 212, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 48px 52px;
  overflow: hidden;
  animation: fadeIn 1s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Planets ────────────────────────────────────────────────── */
.planet {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.planet-martian {
  width: clamp(90px, 12vw, 155px);
  top: -5%;
  left: 50%;
  animation: floatC 7s ease-in-out infinite alternate;
}
.planet-volcanic {
  width: clamp(160px, 22vw, 290px);
  top: 3%;
  right: -4%;
  animation: floatY 9s ease-in-out infinite alternate;
  animation-delay: 1.2s;
}
.planet-gas {
  width: clamp(230px, 32vw, 430px);
  bottom: -16%;
  left: -7%;
  animation: floatY 11s ease-in-out infinite alternate;
  animation-delay: 2.8s;
}
@keyframes floatY {
  from { transform: translateY(0px); }
  to   { transform: translateY(-16px); }
}
@keyframes floatC {
  from { transform: translateX(-50%) translateY(0px); }
  to   { transform: translateX(-50%) translateY(-12px); }
}

/* ─── Logo ───────────────────────────────────────────────────── */
.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  animation: slideDown 0.9s ease 0.2s both;
}
.logo-svg {
  width: clamp(260px, 42vw, 600px);
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.45));
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Tagline ────────────────────────────────────────────────── */
.tagline {
  font-family: 'Quantico', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.35vw, 17px);
  letter-spacing: 0.12em;
  text-align: center;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--white);
  max-width: 640px;
  margin-bottom: 40px;
  animation: slideDown 0.9s ease 0.4s both;
}

/* ─── Socials ────────────────────────────────────────────────── */
.socials-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: slideUp 0.9s ease 0.6s both;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.section-label {
  font-family: 'Quantico', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.1em;
  text-align: center;
  line-height: 1.5;
}
.icon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 38px);
  flex-wrap: wrap;
}
.icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 5.5vw, 64px);
  height: clamp(44px, 5.5vw, 64px);
  color: var(--white);
  text-decoration: none;
  transition: filter 0.25s ease, transform 0.25s ease;
}
.icon-link svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.icon-link:hover {
  filter:
    drop-shadow(0 0 5px white)
    drop-shadow(0 0 14px var(--cyan-glow))
    drop-shadow(0 0 30px rgba(0, 212, 255, 0.55));
  transform: scale(1.2);
}

/* ─── Divider ────────────────────────────────────────────────── */
.divider {
  width: clamp(100px, 18vw, 200px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent);
  margin: 10px 0 4px;
}

.community-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: slideUp 0.9s ease 0.8s both;
}

/* ─── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .frame { padding: 52px 18px 38px; border-radius: 14px; }
  .planet-volcanic { right: -10%; width: clamp(100px, 36vw, 180px); }
  .planet-gas      { width: clamp(180px, 52vw, 260px); bottom: -10%; left: -12%; }
}


.impressum {
	z-index: 4;
}
.footer {
  margin-top: 60px;

}