/*++++++ Scroll-Tracking Sektion ++++++*/
.services-scroll-section {
    padding-top: 20px; 
    padding-bottom: 120px;
    position: relative;
    /* WICHTIG: KEIN overflow: hidden hier, sonst bricht position: sticky! */
}

/* ==========================================
   NEUER ORGANISCHER BLOB IM HINTERGRUND
   ========================================== */
.scroll-section-blob {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 400px; /* Halbe Größe */
    height: 400px; /* Halbe Größe */
    /* Kräftiges, deckendes Orange-Rot */
    background: linear-gradient(135deg, #FF7F00 0%, #ff4500 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: translate(-50%, -50%);
    animation: morphScrollBlob 15s ease-in-out infinite alternate;
}

@keyframes morphScrollBlob {
    0% { 
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    50% { 
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; 
        transform: translate(-40%, -60%) scale(1.1) rotate(10deg);
    }
    100% { 
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
        transform: translate(-60%, -40%) scale(0.9) rotate(-10deg);
    }
}

.scroll-reveal-section {
    position: relative;
    z-index: 1; 
    background-attachment: fixed !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding-bottom: 20vh;
}
.sticky-header-container {
    position: sticky;
    font-family: var(--font-base);
    top: 95px; 
    z-index: 90;
    background: transparent; 
    padding: 0;
    margin-bottom: 20px; 
}
.scroll-tracker-menu { 
    display: grid;
    grid-template-columns: repeat(7, max-content); 
    gap: 5px 30px; 
    justify-content: center; 
    align-items: center;
    padding: 0;
    margin: 0 auto;
    max-width: 1200px; 
}
.tracker-item {
    font-weight: 300;
    color: #9ca3af;
    position: relative;
    padding-left: 15px;
    transition: color 0.3s ease;
    font-size: 1rem;
    cursor: pointer;
    white-space: nowrap; 
}
.tracker-item::before {
    content: "";
    position: absolute;
    left: -5px; 
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #e5e7eb;
    transition: all 0.3s ease;
}
.tracker-item.active { 
    color: #111111; 
    font-weight:500;
}
.tracker-item.active::before {
    background-color: #FF7F00;
    width: 12px;
    border-radius: 4px;
    left: -3px; 
}
.custom-btn {
    background-color: #FF7F00;
    color: #f1f1f1;
    border-radius: 4px;
    transition: all 0.3s ease;
    width: auto !important;
}
.custom-btn:hover {
    background-color: #111111;
    color: #FF7F00;
}
.scroll-wrapper {
    height: 600vh; 
    position: relative;
}
.sticky-container {
    position: sticky;
    top: 140px; 
    height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    background: transparent; 
    z-index: 90;
}
.text-item {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translate3d(0, -50%, 0);
    opacity: 0;
    will-change: transform, opacity;
}

/* ==========================================
   GEOMETRISCHE TEXTBOX (Overlapping)
   ========================================== */
.geom-text-box {
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* border-left entfernt */
    padding: 3.5rem;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    overflow: hidden;
}

.geom-text-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 127, 0, 0.08) 100%);
    border-radius: 100% 0 0 0;
    z-index: 0;
    pointer-events: none;
}

@media (min-width: 992px) {
    .geom-text-box {
        width: 125%; 
        padding-right: 28%; 
        border-radius: 16px 100px 100px 16px; 
    }
}

.scroll-image-col {
    position: relative;
    z-index: 5 !important;
}

.image-wrapper {
    aspect-ratio: 4 / 3.5;
    position: relative;
}

.fade-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.fade-img.active {
    opacity: 1;
    z-index: 2;
}

@media (max-width: 991px) {
    .scroll-tracker-menu {
        grid-template-columns: repeat(2, max-content); 
        gap: 10px 20px;
    }
    .tracker-logo {
        grid-column: span 2;
        text-align: center;
        border-right: none !important;
        padding-right: 0 !important;
        margin-bottom: 10px;
    }
}

/* ==========================================================================
   HERO SLIDER (Ken Burns, Dark Glass, Slide & Fade)
   ========================================================================== */

.hero-slider-section, 
#mainHeroSlider, 
.carousel-inner, 
.carousel-item {
    height: 85vh; 
    min-height: 650px;
    position: relative;
    overflow: hidden;
    background-color: #0b0b0b;
}

/* --- 1. Die neuen Background-Texturen --- */
.ken-burns-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: kenBurnsAnim 20s ease-out infinite alternate;
    z-index: 1;
}

/* Dunkel mit sanften orangen Akzenten */
.texture-darkmode {
    background: 
      radial-gradient(circle at -3% 23%, rgba(255, 127, 0, 0.05) 70%, transparent 0),
      linear-gradient(29deg, rgba(255, 127, 0, 0.03) 57%, transparent 0),
      linear-gradient(62deg, #0b0b0b 0%, #1a1a24 100%);
}

/* Intensiveres Orange */
.texture-orange {
    background: 
      radial-gradient(circle at 54% -2%, rgba(255, 255, 255, 0.05) 68%, transparent 0),
      linear-gradient(127deg, rgba(0, 0, 0, 0.2) 68%, transparent 0),
      linear-gradient(62deg, #FF7F00 0%, #cc5200 100%);
}

/* Geometrisch Grau/Schwarz */
.texture-geometry {
    background: 
      linear-gradient(15deg, rgba(255,127,0,0.04) 40%, transparent 0),
      linear-gradient(105deg, rgba(255,255,255,0.02) 60%, transparent 0),
      linear-gradient(62deg, #111 0%, #222 100%);
}

@keyframes kenBurnsAnim {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* --- 2. Overlays & Content --- */
.hero-overlay {
    position: absolute;
    inset: 0;
    /* Vertikaler Verlauf: Oben leicht transparent, unten 100% deckendes Dunkelgrau/Schwarz */
    background: linear-gradient(to bottom, rgba(11, 11, 11, 0.2) 0%, rgba(11, 11, 11, 0.8) 80%, rgba(11, 11, 11, 1) 100%);
    z-index: 2;
    pointer-events: none;
}

.hero-overlay-right {
    background: linear-gradient(to bottom, rgba(11, 11, 11, 0.2) 0%, rgba(11, 11, 11, 0.8) 80%, rgba(11, 11, 11, 1) 100%);
}

.hero-content-container {
    position: relative;
    z-index: 10; 
}

/* --- 3. Die Glassbox (Jetzt viel transparenter!) --- */
.hero-dark-glass {
    /* Opacity von 0.55 auf 0.2 reduziert für mehr Transparenz */
    background: rgba(20, 20, 25, 0.2); 
    backdrop-filter: blur(12px); /* Blur leicht reduziert, damit es klarer wirkt */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    position: relative;
}

.hero-badge {
    display: inline-block;
    background-color: #FF7F00;
    color: #fff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* --- 4. Slide & Fade Animation (Der Magic Trick) --- */
/* Grundzustand: Unsichtbar und nach rechts verschoben */
.carousel-item .content-slide-anim,
.carousel-item .visual-slide-anim {
    opacity: 0;
    transform: translateX(80px);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.carousel-item .visual-slide-anim {
    transition-delay: 0.15s; /* Bild kommt minimal später rein */
}

/* Aktiver Zustand: Sichtbar und an Originalposition */
.carousel-item.active .content-slide-anim,
.carousel-item.active .visual-slide-anim {
    opacity: 1;
    transform: translateX(0);
}

/* Zustand beim Verlassen: Nach links wegschieben */
.carousel-item-start .content-slide-anim,
.carousel-item-start .visual-slide-anim {
    opacity: 0;
    transform: translateX(-80px);
}

/* --- 5. Visual Layouts (Rechte Seite) --- */
.hero-visual-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

/* Layout 1: Blob + Bild */
.hero-geom-shape {
    position: absolute;
    width: 80%;
    height: 80%;
    background: linear-gradient(135deg, #FF7F00 0%, #cc5200 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; 
    z-index: 1;
    animation: morphBlob 8s ease-in-out infinite alternate;
}
.hero-fg-img {
    position: relative;
    z-index: 2;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    max-width: 90%;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Layout 2: Staggered Images (Überlappend) */
.staggered-images {
    position: relative;
    width: 100%;
    height: 400px;
}
.stagger-img-1 {
    position: absolute;
    top: 0; left: 0;
    width: 65%;
    border-radius: 16px;
    z-index: 1;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.stagger-img-2 {
    position: absolute;
    bottom: 0; right: 0;
    width: 60%;
    border-radius: 16px;
    z-index: 2;
    border: 4px solid #1a1a1a;
    box-shadow: -10px -10px 30px rgba(0,0,0,0.4);
}

/* Layout 3: UI Mockups (SaaS Style) */
.ui-mockup-container {
    position: relative;
    width: 100%;
    height: 350px;
}
.ui-card {
    position: absolute;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
}
.ui-card.card-1 {
    width: 80%; height: 200px;
    top: 20px; left: 10%;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255,127,0,0.2) 0%, rgba(255,255,255,0.05) 100%);
}
.ui-card.card-2 {
    width: 60%; height: 150px;
    bottom: 20px; right: 5%;
    z-index: 2;
    box-shadow: -10px 20px 30px rgba(0,0,0,0.5);
}

/* --- 6. Floating Animations --- */
.float-anim-1 { animation: floatY 6s ease-in-out infinite; }
.float-anim-2 { animation: floatY 7s ease-in-out infinite 1s; }

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
@keyframes morphBlob {
    0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
    100% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
}

/* Controls */
.hero-slider-section .carousel-indicators [data-bs-target] {
    width: 12px; height: 12px; border-radius: 50%;
    background-color: rgba(255,255,255,0.3); border: none; margin: 0 8px;
}
.hero-slider-section .carousel-indicators .active {
    background-color: #FF7F00; transform: scale(1.2);
}

/* --- 1. Die Background-Texturen (Streng getrennte Farbwelten) --- */
.ken-burns-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: kenBurnsAnim 20s ease-out infinite alternate;
    z-index: 1;
}

/* Texture 1: Dark (Nur Schwarz, Anthrazit und minimales Weiß für die Kanten) */
.texture-dark {
    background: 
      /* Großer, dunkler Kreis */
      radial-gradient(circle at -3% 23%, rgba(0, 0, 0, 0.4) 70%, transparent 0),
      /* Schräge, fast schwarze Kante */
      linear-gradient(29deg, rgba(0, 0, 0, 0.6) 57%, transparent 0),
      /* Hauchfeine weiße Lichtkante */
      linear-gradient(127deg, rgba(255, 255, 255, 0.03) 68%, transparent 0),
      /* Grundverlauf: Tiefes Dunkelgrau */
      linear-gradient(62deg, #181818 0%, #2a2a35 100%);
}

/* Texture 2: Orange (Orange, Schwarz, Weiß) */
.texture-orange {
    background: 
      radial-gradient(circle at 54% -2%, rgba(255, 255, 255, 0.25) 68%, transparent 0),
      linear-gradient(127deg, rgba(0, 0, 0, 0.2) 68%, transparent 0),
      linear-gradient(62deg, #FF7F00 0%, #e55e00 100%);
}

/* Texture 3: Silver (Nur Silber, Grau und Weiß) */
.texture-silver {
    background: 
      /* Schräge, strahlend weiße Fläche */
      linear-gradient(15deg, rgba(255, 255, 255, 0.6) 40%, transparent 0),
      /* Dunkelgrauer Schatten für Tiefe */
      linear-gradient(105deg, rgba(0, 0, 0, 0.08) 60%, transparent 0),
      /* Weitere weiße Kante */
      linear-gradient(250deg, rgba(255, 255, 255, 0.3) 30%, transparent 0),
      /* Grundverlauf: Silber/Platin */
      linear-gradient(62deg, #9ca3af 0%, #e5e7eb 100%);
}


/* --- 2. Das Original-Overlay (Wiederhergestellt) --- */
.hero-overlay {
    position: absolute;
    inset: 0;
    /* Links 90% Schwarz, rechts 40% Schwarz */
    background: linear-gradient(90deg, rgba(10, 10, 12, 0.9) 0%, rgba(10, 10, 12, 0.4) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Das gespiegelte Overlay für Slide 2 (Text ist rechts, also muss es rechts dunkel sein) */
.hero-overlay-right {
    /* Rechts 90% Schwarz, links 20% Schwarz */
    background: linear-gradient(270deg, rgba(10, 10, 12, 0.9) 0%, rgba(10, 10, 12, 0.2) 100%);
}

/* --- NEU: Texture Silver Light (Sehr helles, edles Silber) --- */
.texture-silver-light {
    background: 
      /* Dezente weiße Lichtkante */
      linear-gradient(15deg, rgba(255, 255, 255, 0.8) 40%, transparent 0),
      /* Leichter, kühler Schatten */
      linear-gradient(105deg, rgba(0, 0, 0, 0.03) 60%, transparent 0),
      /* Zweite weiße Kante für Tiefe */
      linear-gradient(250deg, rgba(255, 255, 255, 0.5) 30%, transparent 0),
      /* Grundverlauf: Sehr helles Grau zu fast Weiß */
      linear-gradient(62deg, #e5e7eb 0%, #f9fafb 100%);
}

/* --- NEU: Texture White (Reinweiß mit minimalen Geometrie-Akzenten) --- */
.texture-white {
    background: 
      /* Hauchfeine graue Kante (nur 2% sichtbar) */
      linear-gradient(15deg, rgba(0, 0, 0, 0.02) 40%, transparent 0),
      /* Zweite hauchfeine Kante */
      linear-gradient(105deg, rgba(0, 0, 0, 0.01) 60%, transparent 0),
      /* Grundverlauf: Pures Weiß zu extrem hellem Grau */
      linear-gradient(62deg, #ffffff 0%, #f3f4f6 100%);
}

/* --- NEU: Texture Silver Dark (Sattes, metallisches Dunkelsilber / Titan) --- */
.texture-silver-dark {
    background: 
      /* Helle Lichtkante (wirkt wie eine Reflexion auf Metall) */
      linear-gradient(15deg, rgba(255, 255, 255, 0.15) 40%, transparent 0),
      /* Harter, dunkler Schatten */
      linear-gradient(105deg, rgba(0, 0, 0, 0.2) 60%, transparent 0),
      /* Zweite dunkle Kante */
      linear-gradient(250deg, rgba(0, 0, 0, 0.1) 30%, transparent 0),
      /* Grundverlauf: Mittleres bis dunkles Grau (Titan-Look) */
      linear-gradient(62deg, #4b5563 0%, #6b7280 100%);
}

/* --- 1. Die neuen Zitatboxen (Slide 3) --- */
.ui-mockup-container {
    position: relative;
    width: 100%;
    height: 400px; /* Etwas höher für den Text */
}

.ui-card {
    position: absolute;
    /* Heller Glassmorphismus für die Zitatboxen */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.ui-card.card-1 {
    width: 75%; 
    height: 200px;
    top: 10px; 
    left: 5%;
    z-index: 2;
}

.ui-card.card-2 {
    width: 70%; 
    height: 180px;
    bottom: 20px; 
    right: 5%;
    z-index: 1;
    /* Zweite Box leicht abgedunkelt für Tiefe */
    background: rgba(240, 240, 245, 0.9);
}

/* --- 2. Progress Bar & Play/Pause Button --- */
.slider-controls-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3); /* Leichter dunkler Balken ganz unten */
    height: 4px; /* Höhe der Leiste */
}

.play-pause-btn {
    background: #FF7F00;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease;
    /* Zieht den Button etwas nach oben, damit er auf der Linie sitzt */
    transform: translateY(-18px); 
    border-radius: 0 4px 0 0;
}

.play-pause-btn:hover {
    background: #cc5200;
}

.progress-bar-container {
    flex-grow: 1;
    height: 100%;
    background: transparent;
    position: relative;
}

.progress-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #FF7F00;
    width: 0%;
    /* Wird per JS animiert */
}

/* ==========================================================================
   SLIDER OVERRIDES (Slide 2 PNGs & Slide 3 Zitat)
   ========================================================================== */

/* Slide 2: PNGs ohne Rahmen und Schatten */
.stagger-img-1, .stagger-img-2 {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Slide 3: Stylische Zitat-Karte */
.testimonial-card {
    background: rgba(20, 20, 25, 0.6); /* Dunkles Glas */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 4px solid #FF7F00; /* Oranger Akzentstreifen links */
    border-radius: 16px;
    padding: 2.5rem;
    color: #fff;
    max-width: 90%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.testimonial-card .quote-icon {
    color: #FF7F00;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.testimonial-card .quote-text {
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 0;
    color: #f8f9fa;
}

.testimonial-card .quote-author strong {
    display: block;
    font-size: 1.1rem;
    color: #fff;
}

.testimonial-card .quote-author span {
    font-size: 0.9rem;
    color: #adb5bd;
}

.text-primary {
    color:#ff4500 !important;
}