/* Definition der Farbvariablen */
:root {
  --primary-green: #4CAF50; /* Zeile 2: Grün aus 75% Cyan und 100% Yellow */
  --text-color-light: #333333; /* Zeile 3: 80% Schwarz */
  --text-color-dark:  #CCCCCC; /* Zeile 4: 80% Weiß (Silber) */
}

/*  Raleway lokal einbinden mit WOFF2 und WOFF */
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-VariableFont_wght.woff2') format('woff2'),
       url('../fonts/Raleway-VariableFont_wght.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

/* Einbindung der italic Variante von Raleway */
@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-Italic-VariableFont_wght.woff2') format('woff2'),
       url('../fonts/Raleway-Italic-VariableFont_wght.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

/* Basis-Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Raleway', 'Roboto', sans-serif;
  /* Für ein elastisches Layout: Basis-Schriftgröße in rem */
  font-size: 1rem;
}

/* Navigation Bar */
.navbar {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

/* Container für die Nav-Inhalte – hier nur der Button */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Hamburger Button: Grundsätzlich sichtbar auf mobilen Geräten */
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.8rem;
  color: var(--primary-green);
}

/* Auf Desktop (größere Bildschirme) zunächst ausblenden */
@media (min-width: 1024px) {
  .menu-toggle {
    display: none;
  }
  /* Wenn die Klasse .scrolled hinzugefügt wird, wird der Button sichtbar */
  .menu-toggle.scrolled {
    display: block;
  }
}

/* Offcanvas-Footer: Positioniert die Icon-Buttons ganz unten im Menü */
.offcanvas-footer {
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 2rem; /* Abstand zwischen den Icons */
}

/* Styling für die Footer-Buttons */
.footer-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.8rem;
  color: var(--primary-green); /* oder eine andere passende Farbe */
  padding: 0.5rem;
  transition: color 0.3s ease;
}

.footer-btn:hover {
  color: var(--primary-green-hover);
}

/* Fokus-Stile für alle interaktiven Elemente (Buttons, Links) */
button:focus,
a:focus {
  outline: 0.125rem dashed var(--primary-green); /* 0.125rem entspricht ca. 2px, kann angepasst werden */
  outline-offset: 0.125rem;
}

/* Startvideo-Bereich: Vollflächig auf Desktop, mobile Anpassung per Media Query */
#start-video {
  position: relative;
  width: 100vw;
  height: 100vh; /* Auf Desktop den gesamten Viewport ausfüllen */
  overflow: hidden;
}
#start-video video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* sorgt dafür, dass das Video den Container komplett ausfüllt */
  object-position: center; /* zentriert das Video */
}

/* Branding-Overlay zentral positioniert und animiert */
.branding-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;       /* Volle Breite des Viewports */
  text-align: center;
  transform: translate(-50%, -50%) scale(0); /* Start klein, zentriert */
  opacity: 0;
  animation: expandOverlay 2s ease-out 1s forwards;
}

/* Animation: wächst aus der Mitte */
@keyframes expandOverlay {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

/* Firmenname in Arial Black, dynamisch skaliert */
.branding-title {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: bold;
  font-size: clamp(4rem, 10vw, 8rem); /* passt sich an die Bildschirmbreite an */
  margin: 0;
  margin-bottom: -1rem;
  color: #333333;
  -webkit-text-stroke: 0.05rem white;  /* feine, weiße Kontur */
  text-stroke: 0.05rem white;
}

/* Hervorhebung des Teils "M.U.T." in Grün */
.branding-title .highlight {
  color: var(--primary-green); /* z.B. #6EB453 */
  -webkit-text-stroke: 0.05rem white;
  text-stroke: 0.05rem white;
}

/* Slogan in Arial Black, kursiv, dynamisch skaliert */
.branding-tagline {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: bold;
  font-style: italic;  /* Synthetisch, da Arial Black keine native Italic hat */
  font-size: clamp(2rem, 5vw, 4rem);
  margin: 0;
  color: #333333;
  -webkit-text-stroke: 0.05rem white;
  text-stroke: 0.05rem white;
}

/* Container für die Aktion-Buttons: Volle Breite und zentriert */
.action-buttons {
  position: absolute;
  width: 100%;
  /* Platzierung näher am Branding-Overlay: statt bottom 10% verwenden wir z. B. 8% */
  bottom: 8%;
  text-align: center;
  /* Entferne das bisherige margin-top, da wir die Position direkt festlegen */
  z-index: 10;
  /* Kein gemeinsamer Animationseintrag mehr – die Buttons animieren sich individuell */
}

/* Angepasste, kleinere und schmalere Buttons mit Icons */
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  padding: clamp(0.3rem, 0.8vw, 0.6rem) clamp(0.8rem, 1.5vw, 1rem);
  color: #fff;
  background-color: var(--primary-green);
  border: none;
  border-radius: 0.3rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
  /* Basisanimation für das Hereinblenden */
  animation: fadeIn 0.5s ease-out forwards;
}

/* Individuelle Animation-Delays, sodass die Buttons nacheinander erscheinen */
.action-btn:nth-child(1) {
  animation-delay: 3s;
}
.action-btn:nth-child(2) {
  animation-delay: 3.3s;
}
.action-btn:nth-child(3) {
  animation-delay: 3.6s;
}

/* Icon-Styling: Icon links, abgetrennt durch einen dezenten Trenner */
.action-btn i {
  margin-right: 0.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  padding-right: 0.5rem;
}

/* Hover-Effekt */
.action-btn:hover {
  background-color: #333333;
}

/* Keyframe für fadeIn */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Für große Monitore: Abstand reduzieren */
@media (min-width: 1200px) {
  .action-buttons {
    bottom: 15%; /* Buttons kommen näher an den Text */
  }
}
@media (max-width: 600px) {
  .action-buttons {
    display: none;
  }
  .branding-title {
    font-size: clamp(2.5rem, 7vw, 4rem);
    margin-bottom: 0;
  }
  .branding-tagline {
    font-size: clamp(1.2rem, 3.5vw, 2.5rem);
  }
}

/* Im Portrait-Modus: Volle Breite, Höhe passt sich dem natürlichen Seitenverhältnis des Videos an */
@media (orientation: portrait) {
  #start-video {
    width: 100vw;
    height: auto; /* Höhe wird anhand des Videos skaliert */
  }
  #start-video video {
    position: static;  /* Positionierung zurücksetzen */
    width: 100%;
    height: auto;
    transform: none;
    object-fit: contain;  /* Sicherstellen, dass das gesamte Video sichtbar bleibt */
  }
}