/* === 1. FONTS (lokal, wie gehabt) === */
/* Inter Variable */
@font-face {
  font-family: 'InterVariable';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-VariableFont_wght.ttf') format('ttf');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}


/* === 2. BASICS === */
html, body {
  height: auto;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'WorkSans', 'OpenSans', Arial, sans-serif;
  background: #7c7c80;
}
body {
  min-height: 100vh;
  background: #7c7c80;
}

/* === 3. BACKGROUND VIDEO === */
.background-video {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

/* === 4. OVERLAY-LAYER (entfernt: fixed/height) === */
.overlay {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  z-index: 2;
  display: block;
  background: rgba(10,10,20,0.40);
}

/* === 5. LOGO OBEN LINKS === */


/* Standardgröße für Desktop */
.logo {
  position: fixed;
  top: 2vw;
  left: 2vw;
  .logo {
  width: clamp(250px, 25vw, 500px) !important;
}

}

.logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* UltraWide-Monitore: noch größer */
@media (min-width: 1800px) {
  .logo {
    width: 400px; /* erhöhte Maximalgröße bei großen Monitoren */
  }
}

/* Tablets */
@media (max-width: 1100px) {
  .logo {
    width: 220px; /* etwas größer auf Tablets */
    max-width: none; /* keine unnötigen Einschränkungen */
  }
}

/* Kleine Tablets & große Smartphones */
@media (max-width: 800px) {
  .logo {
    width: 160px;
  }
}

/* Smartphones */
@media (max-width: 600px) {
  .logo {
    width: 120px;
  }
}


/* === 6. ZENTRALER CONTENT === */
.center-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 60vh;
  width: 100vw;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 160px;
  padding-left: 300px;
  padding-bottom: 140px;  /* Platz über Footer! */
  box-sizing: border-box;
}

/* === 7. HEADLINES === */
.headline-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 2.2rem;
  gap: 1.3rem;
  width: 100%;
  max-width: 900px;
  margin-left: 0.7vw;
}

.headline, h1, h2 {
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 800; /* Oder was du für Headlines brauchst */
  font-size: clamp(2.8rem, 6vw, 6rem);
  color: #fff;
  letter-spacing: -0.01em;
}
	

.headline2 {
  font-family: 'PlusJakartaSansVariable', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: #e0e0e0;
}
/* === 8. DETAILS-LISTE === */
./* Headlines immer einzeilig */
.headline, h1, h2 {
  font-family: 'InterVariable', 'Inter', Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 8vw, 6.2rem);
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1.07;
}

/* Detail-Liste modern & eindeutig Plus Jakarta Sans */
.detail-item {
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;          /* etwas kleiner */
  line-height: 1.8;            /* deutlich mehr Zeilenabstand */
  margin-bottom: 0.8rem;       /* etwas Abstand zwischen Punkten */
  color: #e0e0e0;
  max-width: 72ch;             /* Zeilen nicht zu lang – besser lesbar */
}



/* === 9. CTA-BUTTON === */
.cta-button {
  display: inline-block;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
  padding: 1rem 2.6rem;
  background: #33ccff;
  color: #153342;
  font-family: 'PlusJakartaSans', Arial, sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 3rem;
  border: none;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}
.cta-button:hover {
  background: #2996b8;
  color: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.22);
}

/* === 10. EINFLIEGEN Animation === */
.einfliegen {
  opacity: 0;
  transform: translateX(-80vw);
  transition:
    opacity 1.1s cubic-bezier(.77,0,.18,1.13),
    transform 1.1s cubic-bezier(.77,0,.18,1.13);
}
.einfliegen.visible {
  opacity: 1;
  transform: translateX(0);
}

.headline1.einfliegen { transition-delay: 0.2s; }
.headline2.einfliegen { transition-delay: 0.65s; }
.detail-item.einfliegen:nth-child(1) { transition-delay: 1.2s; }
.detail-item.einfliegen:nth-child(2) { transition-delay: 1.5s; }
.detail-item.einfliegen:nth-child(3) { transition-delay: 1.8s; }
.detail-item.einfliegen:nth-child(4) { transition-delay: 2.1s; }
.detail-item.einfliegen:nth-child(5) { transition-delay: 2.4s; }
.detail-item.einfliegen:nth-child(6) { transition-delay: 2.7s; }
.cta-button.einfliegen { transition-delay: 3.3s; }

/* === 11. FOOTER === */
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  z-index: 99;
  background: #33ccff;
  backdrop-filter: blur(3px);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
  padding: 0.2rem 0;
  font-size: 0.75rem;
  border-top: 1px solid #2996b8;
  text-align: center;
  font-family: 'OpenSans', Arial, sans-serif;
}


.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  color: #33ccff;
  line-height: 1.2;
}

.footer-links a {
  color: #33ccff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #222;
  text-decoration: underline;
}

.footer-links span {
  color: #2996b8;
  font-size: 1rem;
}

.footer {
  background-color: rgba(10, 10, 20, 0.45); /* deutlich transparenter */
  backdrop-filter: blur(2px); /* leichte Unschärfe bleibt */
}


@media (max-width: 1350px) {
  .center-content {
    padding-left: 200px;
    padding-top: 120px;
    max-width: 98vw;
  }
  .logo {
  width: clamp(180px, 12vw, 360px);
  position: fixed;
  top: 2vw;
  left: 2vw;
  z-index: 10; width: 140px; max-width: 22vw; }
}
@media (max-width: 1100px) {
  .center-content {
    padding-left: 100px;
    padding-top: 90px;
    padding-right: 10px;
  }
  .logo {
  width: clamp(180px, 12vw, 360px);
  position: fixed;
  top: 2vw;
  left: 2vw;
  z-index: 10; width: 100px; max-width: 19vw; }
}
@media (max-width: 800px) {
  .center-content {
    padding-left: 4vw;
    padding-top: 15vw;
    padding-bottom: 120px;
    max-width: 99vw;
  }
  .logo {
  width: clamp(180px, 12vw, 360px);
  position: fixed;
  top: 2vw;
  left: 2vw;
  z-index: 10; width: 72px; max-width: 18vw; }
}
@media (max-width: 600px) {
  .footer-links {
    font-size: 0.98rem;
    gap: 0.8rem;
  }
  .center-content {
    padding-left: 1.5vw;
    padding-top: 12vw;
    padding-bottom: 160px;
  }
  .logo {
  width: clamp(180px, 12vw, 360px);
  position: fixed;
  top: 2vw;
  left: 2vw;
  z-index: 10; width: 50px; max-width: 14vw; }
  .headline { font-size: 1.5rem; }
  .details-container { 
	  font-size: 1.05rem; 
	  padding-left: 0.3rem;
	  padding-right: 0.3rem; 
	}
  .cta-button { padding: 0.7rem 1.3rem; font-size: 0.99rem; }
}
@media (max-width: 400px) {
  .center-content { padding-top: 20vw; }
}



/* NEUER TRANSPARENTER HEADER FÜR LOGO */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 0.5vw 2vw;
  z-index: 100;
  background-color: rgba(10, 10, 20, 0.45); /* deutlich transparenter */
  backdrop-filter: blur(2px); /* leichte Unschärfe bleibt */
}


/* weiterhin dein Logo passend */
.header-logo {
  width: clamp(300px, 30vw, 600px);
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  .center-content {
    padding-top: 20vw;  /* Erhöht, damit Headline nicht vom Header überdeckt wird */
  }
}