/* ==========================================================================
   MAIN-STYLESHEET HERO-PAGE
   ==========================================================================
   1. NAVIGATION .............. Header, Nav-Links o& Log
   2. LAYOUT & SECTIONS ....... Hero-Bereich & Grundstruktur
   3. LANGUAGE-SWITCHER ......... Language Toggle Logik
   4. COMPONENTS ............. Buttons & Interaktive Elemente
   5. SIDEBARS (LATERAL) ...... Seitliche Social-Media & Info-Leisten
   6. ANIMATIONS (KEYFRAMES) .. Globale Keyframes & Lauftexte
   ========================================================================== 
*/

/* --- 1. HEADER & NAVIGATION --- */
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 98px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(28, 28, 28, 1) 25%, rgba(28, 28, 28, 0.06) 100%);
}

.logo-wrapper {
  position: relative;
  height: 42px;
  width: 72px;
  cursor: pointer;
}

.logo-white {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.logo-wrapper:hover .logo-white {
  opacity: 1;
}

.nav-link {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  font-family: var(--font-second);
  font-size: 1.25rem;
}

nav a.nav-link .circle {
  opacity: 0;
  transition: opacity 0.2s ease;
}

nav a.nav-link .link-text:hover + .circle {
  opacity: 1;
}

/* --- 2. LAYOUT & SECTIONS --- */
section.hero {
  min-height: min(100dvh, 950px);
  height: min(100dvh, 900px);
  background: linear-gradient(45deg, var(--color-bg) 40%, var(--color-bg-second) 100%);
}

/* --- 3. LANGUAGE-SWITCHER --- */
/* --- 3. LANGUAGE-SWITCHER --- */

#toggle-btn {
  position: relative;
  display: inline-block; /* Sorgt dafür, dass der Container sich an den Inhalt anpasst */
}

/* Der DE-Wrapper gibt die Größe vor */
.lang-de-wrapper {
  position: relative; /* Nicht absolute! Er hält den Platz frei */
  transition: opacity 0.2s ease;
}

/* Der EN-Wrapper legt sich exakt über den DE-Wrapper */
.lang-en-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Hover-Logik (Standardbilder verschwinden, Hover-Bilder darunter werden sichtbar) */
.lang-de-default, 
.lang-en-default {
  position: relative;
  z-index: 2;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.lang-de-hover, 
.lang-en-hover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.lang-de-default:hover, 
.lang-en-default:hover {
  opacity: 0;
}

/* --- Status-Umschaltung --- */

/* Wenn Englisch aktiv: DE unsichtbar, EN sichtbar */
#toggle-btn.active .lang-de-wrapper {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#toggle-btn.active .lang-en-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
/* --- 4. COMPONENTS --- */
.button-wrapper {
  display: flex;
  font-size: 1.125rem;
  cursor: pointer;
  width: fit-content;
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--color-light);
  transition: border-color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.button-wrapper:hover {
  border-color: var(--color-accent);
}

.button-wrapper .content {
  padding: 12px 18px;
  position: absolute;
  transition: color 0.3s ease;
}

.button-wrapper .scroll-content {
  padding: 12px 18px;
  transform: translateX(100%);
  will-change: transform;
}

.button-wrapper:hover .content, 
.scroll-content {
  color: var(--color-accent);
}

.circle {
  height: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.inlay-arrow {
  transform: translateY(15px);
  animation: bounce 1.5s infinite;
}

/* --- 5. SIDEBARS (LATERAL) --- */
.left-lateral, .right-lateral {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  bottom: 0;
  gap: 12px;
}

.social-icon {
  display: flex;
  align-items: center;
  margin-left: 8px;
}

.img-hover {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.img-hover:hover, .img-hover:hover ~ .circle {
  opacity: 1;
}

/* --- 6. ANIMATIONS & SCROLL TEXT --- */
.scroll-wrapper {
  background-color: var(--color-scroll);
  transform: skewY(-3deg);
  backdrop-filter: blur(4px);
  z-index: 1;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 24px,
    black calc(100% - 24px),
    transparent 100%
  );
}

.scroll-container {
  animation: scrollLeft 48s linear infinite;
}

.scroll-text, .scroll-container img {
  color: var(--color-accent);
  margin: 0 24px;
  font-size: 2rem;
}

/* Keyframes */
@keyframes bounce {
  0%, 100% { transform: translateY(15px); }
  50% { transform: translateY(25px); }
}

@keyframes scrollLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes scrollOut {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

@keyframes scrollIn {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0%); }
}