/* =======================================================
   style.css (für das neue Quelle Branding)
   Die folgenden CSS-Variablen definieren die neue 
   Farbpalette, die in den Tailwind-Klassen verwendet wird.
   ======================================================= */

:root {
  /* Quelle Primäre Farben (Cyan/Türkis/Grau) */
  --color1: #00A9A5; /* Quellen-Akzent (Klares Türkis) - CTA, Haupt-Highlights */
  --color2: #007B78; /* Sekundärakzent (Dunkles Türkis) - Hover */
  --color3: #1A1A1A; /* Dunkler Hintergrund (Fast Schwarz) - Haupt-Hintergrund */
  --color4: #B5F9FF; /* Heller Akzent (Sehr helles Türkis) - Akzent-Text, Akzent-Details */
  --color5: #F5F5F5; /* Heller Haupt-Text (Off-White) - Haupt-Text/Hintergrund */
}

/* Hinweis: Wenn Sie echtes Tailwind verwenden, müssen 
   diese Werte in Ihrer tailwind.config.js unter 'theme.extend.colors'
   definiert werden, z.B.
   
   theme: {
     extend: {
       colors: {
         'color1': '#00A9A5',
         'color3': '#1A1A1A',
         ...
       }
     }
   }
*/

/* Beispiel für globale Stile, falls nicht von Tailwind abgedeckt */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

/* Beispiel für Parallax und Reveal Effekte */
.parallax-element-slow {
    transform: translateZ(-0.5px) scale(1.5); /* Beispielwert, muss mit JS/CSS angepasst werden */
}

.parallax-element-fast {
    transform: translateZ(0.5px) scale(0.5); /* Beispielwert, muss mit JS/CSS angepasst werden */
}

.section-bg-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.section-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split-screen-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.split-screen-content {
    /* Stellt sicher, dass der Inhalt auch auf kleinen Bildschirmen sichtbar ist */
    min-height: 400px; 
}


/* Mobile Menu Logik */
#mobile-menu {
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
#mobile-menu.open {
    transform: translateX(0);
}

/* Dekoratives Grid im Stil der System-Analyse */
.deco-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, rgba(181, 249, 255, 0.1) 1px, transparent 1px), 
                      linear-gradient(to bottom, rgba(181, 249, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.1;
    z-index: 0;
}