/* --- Neue Farbpalette (Discernment) --- */
/* Primary: Dunkles Blau/Fast Schwarz */
.bg-primary { background-color: #0D1117; }
.text-primary { color: #0D1117; }
.border-primary { border-color: #0D1117; }

/* Secondary: Etwas helleres Dunkelgrau */
.bg-secondary { background-color: #161B22; }
.border-secondary { border-color: #161B22; }

/* Primary-Dark: Noch dunkler, für Main Sektion/Kontrast */
.bg-primary-dark { background-color: #010409; }
.bg-primary { background-color: #0D1117; }
/* ... (остальные цвета) ... */
.bg-primary-dark { background-color: #010409; }
/* Accent: Helles Cyan/Blau */
.bg-accent { background-color: #00C4FF; }
/* ... */


/* NEUER STIL FÜR DIE HAUPTSEKTION: Vertikaler Gradient */
.bg-gradient-hero {
    /* Oben: Leichteres Blau (aus Akzentfarbe abgeleitet) 
       Unten: Primary-Dark (Fast Schwarz) */
    background: linear-gradient(180deg, rgba(0, 196, 255, 0.1) 0%, rgba(13, 17, 23, 1) 100%);
}
/* Secondary-Dark: Für abwechselnde Sektionen */
.bg-secondary-dark { background-color: #161B22; }

/* Accent: Helles Cyan/Blau */
.bg-accent { background-color: #00C4FF; }
.text-accent { color: #00C4FF; }
.border-accent { border-color: #00C4FF; }
.hover\:text-accent:hover { color: #00C4FF; }

/* Text Mid: Mittelgrau */
.text-text-mid { color: #8B949E; }
.placeholder-text-mid::placeholder { color: #8B949E; }

/* Text Light: Helles Grau/Fast Weiß */
.bg-text-light { background-color: #E6E6E6; }
.text-text-light { color: #E6E6E6; }

/* Hover-Effekte auf Akzent (Text-Light = fast weiß) */
.hover\:bg-text-light:hover { background-color: #E6E6E6; }

/* --- Allgemeine Stile (angepasst) --- */
html {
   
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   }

/* --- NEUE SPEZIFISCHE STILE FÜR V2 --- */

/* Zeitlinie für Sektion 3 */
.timeline-container {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.timeline-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #161B22; /* Secondary */
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .timeline-line {
    left: 32px; /* Linksbündig auf Mobile */
    transform: none;
  }
}

.timeline-item {
  position: relative;
}

.timeline-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #0D1117; /* Primary, um es abzuheben */
  z-index: 10;
  top: 2rem;
}

/* Positionierung des Dots für Desktop */
@media (min-width: 768px) {
  .timeline-item:nth-child(odd) .timeline-dot {
    left: calc(100% + 50% - 8px - 6px); /* Rechts von der Box, links von der Linie */
  }
  .timeline-item:nth-child(even) .timeline-dot {
    right: calc(100% + 50% - 8px - 6px); /* Links von der Box, rechts von der Linie */
  }
  .timeline-item:nth-child(2) .timeline-dot {
    left: 50%; /* Zentrales Element */
    transform: translateX(-50%);
    border-color: #00C4FF; /* Akzent für den Mittelpunkt */
  }
}

/* Positionierung des Dots für Mobile */
@media (max-width: 767px) {
  .timeline-dot {
    left: 24px; /* Neben der mobilen Timeline-Linie */
    top: 0.5rem;
  }
  .timeline-item {
    padding-left: 2rem; /* Abstand vom Dot */
  }
}


/* Scroll-Reveal (unverändert) */
.scroll-reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity 0.8s cubic-bezier(0.215, 0.610, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
   transition-delay: var(--scroll-delay, 0s);
  }

.scroll-reveal.is-visible {
   opacity: 1;
   transform: translateY(0);
  }