/* =======================================================
   LANDING.CSS – Feinanpassung für die Startseite
   ======================================================= */


/* =======================================================
   HEADERKOMPONENTE – Landingpage (Yorks Fotos)
   Feinjustierung: kompakter Header, zentrierter Titel
======================================================= */

.main-header {
  margin-top: 0;                /* kein sichtbarer Abstand zum oberen Rand */
  padding-top: 1.2rem;          /* dezenter Puffer gegen Browserkante */
  margin-bottom: 0.4rem;        /* kleiner Abstand zum Menü */
  text-align: center;
  position: relative;
  z-index: 20;
}

/* Titelstil: dominant, elegant, leicht geneigt */
.main-header .title {
  margin: 0;
  padding: 0;
  font-size: clamp(5.6rem, 7.5vw, 7.8rem);  /* fließend skaliert */
  font-weight: 700;                         /* kräftig */
  font-style: italic;                       /* leichte Neigung für Dynamik */
  letter-spacing: 0.08em;                   /* lockerer Zeichenabstand */
  line-height: 1;                           /* kompakte vertikale Ausrichtung */
  opacity: 0;
  animation: fadeInTitle 1.2s ease-out forwards;
  text-shadow:
    0 0 10px rgba(160, 240, 255, 0.7),
    0 0 28px rgba(0, 180, 255, 0.45);
}

/* sanftes Einblenden des Titels */
@keyframes fadeInTitle {
  from { opacity: 0; transform: translateY(-15px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Optional: Mobile-Optimierung */
@media (max-width: 768px) {
  .main-header {
    padding-top: 2rem;          /* auf kleinen Geräten etwas mehr Luft */
    margin-bottom: 0.6rem;
  }

  .main-header .title {
    font-size: clamp(3.2rem, 10vw, 4.8rem); /* etwas kleiner, aber klar lesbar */
  }
}

/* =======================================================
   LAYOUT-FIX: kompakter Header-Bereich auf Landingpage
   ======================================================= */

html, body {
  min-height: auto !important;  /* überschreibt 100vh aus base.css */
  height: auto !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
/* =======================================================
   HEADER-FIX • Kein Leerraum durch Starfield-Canvas
   ======================================================= */

#starfield {
  position: fixed !important; /* statt normal im Fluss */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;                 /* bleibt hinter allem */
  pointer-events: none;       /* klicks gehen durch */
  margin: 0 !important;
  padding: 0 !important;
  display: block;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: auto !important;
  overflow-x: hidden;
}
/* === Headerkompression === */
.main-header {
  margin-top: 0;              /* Kein Leerraum oben */
  padding-top: 1.2rem;        /* sanfter Puffer gegen Fensterrand */
  margin-bottom: 0.4rem;      /* kompakt unterhalb des Titels */
  text-align: center;
  position: relative;
  z-index: 20;
}

/* Titel-Feintuning */
.main-header .title {
  font-size: clamp(5.6rem, 7.5vw, 7.8rem);
  font-weight: 700;
  font-style: italic;          /* leichte Neigung, edel */
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
  padding: 0;
  opacity: 0;
  animation: fadeInTitle 1.2s ease-out forwards;
  text-shadow:
    0 0 10px rgba(160, 240, 255, 0.7),
    0 0 28px rgba(0, 180, 255, 0.45);
}