/* =========================================
   CORE CONFIG: DEEP SPACE & DESOFT PALETTE
   ========================================= */
:root {
    --bg-deep: #010101;
    --text-bright: #ffffff;
    
    --ds-orange: #ff4d00; 
    --accent-orange: #ff4d00;
    
    --ds-silver: #D6DBDF; 
    --ds-grau-dark: #666666;
    --ds-charcoal: #2F3640;
    --ds-petrol: #0E4D56;
    --ds-midnight: #1B2631;

    --text-medium: var(--ds-silver);
    --accent-gradient: linear-gradient(135deg, #ff4d00, #ff8c00);
    
    --glass-bg: rgba(20, 25, 30, 0.4); 
    --glass-border: rgba(255, 255, 255, 0.1);
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --header-height: 90px;
}

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

html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

body {
    font-family: var(--font-main); 
    line-height: 1.7; 
    color: var(--text-medium);
    min-height: 100vh; 
    position: relative;
    background-color: var(--bg-deep);
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 10; }
a { text-decoration: none; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }

/* HINTERGRUND */
.noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; pointer-events: none; opacity: 0.07; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyBAMAAADsEZWCAAAAGFBMVEUAAAA5OTkAAABMTExERERmZmYzMzMyMjJOUlOTAAAACHRSTlMAMwAqzMzM/wO30gAAAApJREFUOMtjwA4AABQAAVMxv14AAAAASUVORK5CYII='); }
.star-container { position: fixed; top: 50%; left: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); z-index: -9; animation: rotate-stars 600s linear infinite; }
.star-layer { position: absolute; border-radius: 50%; background: transparent; }
.stars-small { width: 1px; height: 1px; box-shadow: 5vw 10vh #fff, 15vw 85vh #fff, 35vw 45vh #fff, 85vw 15vh #fff, 25vw 25vh #fff, 95vw 95vh #fff, 45vw 65vh #fff, 75vw 35vh #fff, 10vw 55vh #fff, 60vw 10vh #fff, 90vw 60vh #fff, 20vw 80vh #fff, 55vw 50vh #fff, 30vw 15vh #fff, 70vw 90vh #fff, 40vw 30vh #fff, 80vw 50vh #fff, 50vw 80vh #fff, 12vw 33vh #fff, 66vw 22vh #fff, 33vw 88vh #fff, 88vw 11vh #fff, 44vw 44vh #fff, 22vw 66vh #fff, 3vw 5vh #fff, 92vw 8vh #fff, 48vw 42vh #fff, 22vw 78vh #fff; opacity: 0.5; }
.stars-medium { width: 2px; height: 2px; box-shadow: 12vw 45vh #fff, 68vw 12vh #fff, 34vw 76vh #fff, 92vw 34vh #fff, 56vw 56vh #fff; animation: twinkle-aggressive 3s infinite; }
.stars-medium-alt { width: 2px; height: 2px; box-shadow: 78vw 23vh #fff, 45vw 12vh #fff, 89vw 67vh #fff, 12vw 90vh #fff; animation: twinkle-aggressive 4s infinite -1.5s; }
.stars-bright { width: 3px; height: 3px; box-shadow: 20vw 20vh #fff, 80vw 80vh #fff; opacity: 1.0; filter: drop-shadow(0 0 3px rgba(255,255,255,1)); animation: twinkle-only 6s infinite alternate-reverse; }
.stars-bright-alt { width: 3px; height: 3px; box-shadow: 50vw 10vh #fff, 90vw 50vh #fff; opacity: 1.0; filter: drop-shadow(0 0 3px rgba(255,255,255,1)); animation: twinkle-only 7s infinite alternate -3s; }
.shooting-star-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -8; pointer-events: none; }
.shooting-star-line { position: absolute; height: 1px; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); opacity: 0; }
.wrapper-1 { transform: rotate(-45deg); } .star-1 { top: 20%; left: -20%; width: 150px; animation: shoot-subtle 16s linear infinite; animation-delay: 2s; }
.wrapper-2 { transform: rotate(-20deg); } .star-2 { top: 40%; left: -20%; width: 200px; animation: shoot-subtle 25s linear infinite; animation-delay: 10s; }
.wrapper-3 { transform: rotate(-60deg); } .star-3 { top: 10%; left: -20%; width: 120px; animation: shoot-subtle 32s linear infinite; animation-delay: 20s; }
.sun-blocker-mask { position: fixed; top: 50%; right: -20%; transform: translateY(-50%); width: 120vh; height: 120vh; z-index: -7; background: radial-gradient(circle, #010101 0%, #010101 65%, transparent 85%); pointer-events: none; }
.sun-right { position: fixed; top: 50%; right: -20%; transform: translateY(-50%); width: 120vh; height: 120vh; z-index: -6; background: radial-gradient(circle, rgba(255, 130, 50, 0.25) 0%, rgba(150, 50, 0, 0.05) 50%, transparent 70%); pointer-events: none; }
.void-left { position: fixed; top: 50%; left: -30%; transform: translateY(-50%); width: 100vh; height: 100vh; z-index: -6; background: radial-gradient(circle, rgba(20, 40, 120, 0.15) 0%, transparent 60%); pointer-events: none; }
.nebula-top-left { position: fixed; top: 0; left: 0; width: 80vh; height: 60vh; transform: translate(-20%, -20%) rotate(-15deg); z-index: -6; background: radial-gradient(ellipse at center, rgba(140, 60, 230, 0.15) 0%, transparent 70%); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; filter: blur(80px); opacity: 0.8; pointer-events: none; }
.nebula-white-overlay { position: fixed; top: 15%; left: -15%; width: 100vh; height: 25vh; transform: translate(-20%, -20%) rotate(-40deg); z-index: -6; background: radial-gradient(ellipse at center, rgba(210, 230, 255, 0.1) 0%, transparent 60%); border-radius: 50% 50% 50% 50% / 10% 10% 90% 90%; filter: blur(60px); opacity: 0.6; pointer-events: none; }
.solar-system { position: fixed; top: 50%; left: 80%; width: 0; height: 0; transform: scaleY(0.35); z-index: -5; pointer-events: none; }
.orbit-track { position: absolute; top: 0; left: 0; width: 120vw; height: 120vw; margin-left: -60vw; margin-top: -60vw; border-radius: 50%; animation: rotate-slow 180s linear infinite; }
.planet-glow { position: absolute; left: 0; top: 50%; width: 400px; height: 400px; margin-left: -200px; margin-top: -200px; background: radial-gradient(circle, rgba(200, 220, 255, 0.15) 0%, rgba(200, 220, 255, 0.05) 30%, transparent 70%); transform: scaleY(2.8); }
.orbit-track-2 { width: 160vw; height: 160vw; margin-left: -80vw; margin-top: -80vw; animation: rotate-slow 240s linear infinite; animation-delay: -50s; }
.planet-glow-2 { position: absolute; left: 0; top: 50%; width: 500px; height: 500px; margin-left: -250px; margin-top: -250px; background: radial-gradient(circle, rgba(150, 160, 170, 0.1) 0%, transparent 60%); transform: scaleY(2.8); }
@keyframes rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes rotate-stars { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes twinkle-only { 0% { opacity: 0.5; } 100% { opacity: 1.0; } }
@keyframes twinkle-aggressive { 0%, 100% { opacity: 0.2; } 25% { opacity: 0.8; } 50% { opacity: 0.4; } 75% { opacity: 1.0; } }
@keyframes shoot-subtle { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 0.3; } 20% { transform: translateX(200vw); opacity: 0; } 100% { transform: translateX(200vw); opacity: 0; } }


/* =========================================
   UI & LAYOUT
   ========================================= */

/* GLOBAL HOVER GLOW (Desktop Only) */
/* WICHTIG: .active ist hier entfernt! */
.card:hover, .product-card:hover, .metric-item:hover, .glass-chip:hover, .partner-box:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #ffffff !important;
    transform: translateY(-5px);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease;
}

section { padding: 60px 0; }

/* =========================================
   HERO SECTION - Verwendet auf mehreren Seiten
   ========================================= */

.hero { 
    min-height: 85vh; 
    display: flex; flex-direction: column; justify-content: center; 
    padding-top: 40px; 
}
.hero-label {
    color: var(--ds-orange);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: block;
    text-shadow: 0 0 10px rgba(255, 77, 0, 0.4);
}
.hero-text {
    font-size: 1.2rem;
    max-width: 700px;
    margin-bottom: 40px;
    color: var(--text-medium);
}
.hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}
.metric-val.metric-val-orange {
    color: var(--ds-orange);
}

.section-intro-left {
    text-align: left;
    max-width: 800px;
    margin-bottom: 30px;
}

.section-intro-left h2 {
    margin-top: 10px;
}

.section-intro-left p {
    color: var(--text-medium);
    font-size: 1.1rem;
}

.section-label {
    color: var(--ds-orange);
    letter-spacing: 2px;
    font-weight: bold;
    display: block;
}

.card-link {
    color: var(--ds-orange);
    font-weight: bold;
    font-size: 0.9rem;
    display: block;
    margin-top: 20px;
}

.link-center {
    text-align: center;
    margin-top: 40px;
}

.link-arrow {
    color: var(--ds-orange);
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
}

.link-arrow:hover {
    transform: translateX(5px);
}

.products-section {
    margin-top: 80px;
    margin-bottom: 60px;
}

.section-label-center {
    display: block;
    text-align: center;
    color: var(--ds-orange);
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 10px;
}

.section-title-center {
    text-align: center;
    margin-bottom: 40px;
    color: var(--text-bright);
}

.cta-section {
    margin-top: 60px;
}

.cta-box {
    margin-top: 60px;
    text-align: center;
    background: rgba(255,255,255,0.05);
    padding: 40px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.1);
}

.cta-box h3 {
    color: #fff;
    margin-bottom: 15px;
}

.cta-box p {
    margin-bottom: 30px;
    color: var(--text-medium);
}

/* =========================================
   VISION & MISSION SECTION - About Page
   ========================================= */

#vision-mission {
    margin-top: 60px;
}
/* Zentrierter Content-Block für Überschriften und Intro-Texte */
.section-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px auto;
}
.section-intro h2 {
    margin-bottom: 20px;
}
.section-intro p {
    color: var(--text-medium);
}
.dev-grid.mobile-tap-container {
    align-items: stretch;
}

/* HEADER */
.main-header {
    width: 100%; height: 90px;
    position: sticky; top: 0; z-index: 1000;
    background: rgba(1, 1, 1, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    display: flex; align-items: center;
}
.header-inner {
    width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.logo-img { height: 45px; width: auto; object-fit: contain; }

.main-nav ul { display: flex; gap: 30px; align-items: center; }
.nav-link { font-weight: 500; font-size: 0.95rem; color: var(--text-medium); transition: 0.3s; }
.nav-link:hover { color: var(--text-bright); }
.nav-btn {
    display: inline-block; padding: 10px 25px;
    background: var(--accent-gradient); color: white !important;
    font-weight: 600; border-radius: 50px;
    box-shadow: 0 0 15px rgba(255, 77, 0, 0.3); transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}
.nav-btn:hover { transform: translateY(-2px); box-shadow: 0 0 25px rgba(255, 77, 0, 0.6); }

/* =========================================
   HAMBURGER MENU - Mobile Only
   ========================================= */

.mobile-toggle { 
    display: none; 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 10px;
    position: relative;
    z-index: 2001;
}

.hamburger { 
    width: 30px; 
    height: 3px; 
    background: #fff; 
    position: relative; 
    transition: 0.3s;
    display: block;
}

.hamburger::before, 
.hamburger::after {
    content: ''; 
    position: absolute; 
    left: 0; 
    width: 30px; 
    height: 3px; 
    background: #fff; 
    transition: 0.3s;
}

.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }

body.menu-open { overflow: hidden; }
body.menu-open .mobile-toggle .hamburger { background: transparent; }
body.menu-open .mobile-toggle .hamburger::before { 
    top: 0; 
    transform: rotate(45deg); 
    background: var(--ds-orange); 
}
body.menu-open .mobile-toggle .hamburger::after { 
    top: 0; 
    transform: rotate(-45deg); 
    background: var(--ds-orange); 
}

/* Mobile sichtbar */
@media (max-width: 900px) {
    .mobile-toggle {
        display: block !important;
    }
    
    .hero {
        text-align: center;
    }
    
    .hero-buttons {
        justify-content: center;
        width: 100%;
    }
}

/* TYPOGRAPHY */
h1 { 
    font-size: clamp(3rem, 6vw, 5.5rem); 
    line-height: 1.2; 
    margin-bottom: 25px;
    color: var(--text-bright); 
    font-weight: 700; 
    letter-spacing: -0.5px;
    text-shadow: 0 0 30px rgba(0,0,0,0.5);
    padding-bottom: 10px; 
}
h2 { font-size: 2.5rem; color: var(--text-bright); font-weight: 700; margin-bottom: 40px; }
.highlight-text {
    background: var(--accent-gradient); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; font-weight: 800; display: inline-block;
    padding-bottom: 5px;
}

/* BUTTONS */
.btn {
    display: inline-block; margin-top: 40px; padding: 18px 45px;
    background: var(--accent-gradient); color: white; text-decoration: none;
    font-weight: 600; border-radius: 50px;
    box-shadow: 0 0 20px rgba(255, 77, 0, 0.4); 
    transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.2);
}
.btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 40px rgba(255, 77, 0, 0.7); }

/* METRICS */
.metrics-bar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 40px; padding: 50px; 
    margin-top: 60px; margin-bottom: 60px;
    background: var(--glass-bg); backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border); border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4); text-align: center;
}
.metric-val { 
    font-size: 2.5rem; font-weight: 800; display: block; 
    color: var(--text-bright); margin-bottom: 5px; 
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
}
.metric-val[style*="accent-orange"] {
    background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.metric-label { font-size: 0.9rem; color: var(--text-medium); text-transform: uppercase; letter-spacing: 1px; font-weight: 600;}

/* SWISS SHIELD */
.about-section {
    width: 100%; margin: 80px 0; padding: 80px 0; position: relative; z-index: 5;
    background: #050505;
    border-top: 1px solid rgba(255, 77, 0, 0.3); border-bottom: 1px solid rgba(255, 77, 0, 0.3);
    box-shadow: 0 0 50px rgba(0,0,0,0.5); backdrop-filter: blur(10px);
}
.about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: center; }
.about-text-columns {
    column-count: 2; column-gap: 50px; color: #ccc; font-size: 1.05rem; text-align: justify;
    border-left: 1px solid rgba(255,255,255,0.1); padding-left: 40px;
}
.tech-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--accent-orange); }

.tech-section {
    text-align: center;
    margin-top: 80px;
}



/* SPLIT FEATURE */
.split-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin: 60px 0; align-items: center; }
.check-list li { margin-bottom: 15px; display: flex; align-items: center; gap: 15px; font-size: 1.1rem; color: var(--text-bright); }
.check-icon {
    width: 24px; height: 24px; background: var(--accent-gradient); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #fff;
    box-shadow: 0 0 10px var(--accent-orange);
}

/* CARDS */
.grid, .product-showcase { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; margin: 60px 0; }
a.card { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.card, .product-card {
    background: linear-gradient(145deg, rgba(40,40,40,0.6) 0%, rgba(20,20,20,0.8) 100%);
    padding: 50px 35px; border-radius: 24px; border: 1px solid var(--glass-border);
    transition: all 0.3s ease; position: relative; overflow: hidden;
    backdrop-filter: blur(15px); display: flex; flex-direction: column;
}
.icon-circle {
    width: 60px; height: 60px; background: rgba(255, 77, 0, 0.15);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-bottom: 25px; color: var(--accent-orange); font-size: 1.2rem; font-weight: bold;
    box-shadow: 0 0 15px rgba(255, 77, 0, 0.1);
}
.card h3, .product-card h3 { font-size: 1.5rem; margin-bottom: 15px; color: #fff; }
.card p, .product-card p { opacity: 0.8; font-size: 1rem; margin-bottom: 20px; }
.prod-tag {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--accent-orange); border: 1px solid var(--accent-orange);
    padding: 2px 8px; border-radius: 4px; display: inline-block; margin-bottom: 15px;
}
.card-list { margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; }
.card-list li { margin-bottom: 8px; list-style: none; font-size: 0.9rem; color: #bbb; }
.card-list li::before { content: '• '; color: var(--accent-orange); font-weight: bold; margin-right: 5px; }

/* TECH */
.tech-container, .logo-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 40px; }
.glass-chip {
    padding: 12px 25px; border-radius: 50px; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-medium);
    font-weight: 500; font-size: 0.9rem; backdrop-filter: blur(5px);
    display: flex; align-items: center; gap: 10px; cursor: default;
    transition: all 0.3s ease;
}
.glass-chip img { height: 20px; width: 20px; filter: grayscale(1); transition: 0.3s; }
.glass-chip:hover { color: #fff; }
.glass-chip:hover img { filter: grayscale(0); }
.partner-box {
    width: 150px; height: 80px; 
    border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
    background: rgba(0,0,0,0.3); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.partner-box img { max-height: 40px; max-width: 80%; filter: grayscale(1) brightness(200%); opacity: 0.7; transition: 0.3s; }
.partner-box:hover img { filter: none; opacity: 1; }
.trust-section { text-align: center; opacity: 0.9; margin: 100px 0; }
.trust-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 30px; display: block; color: var(--accent-orange); }

/* TEAM CALCULATOR */
.calculator-container {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: 24px; padding: 40px; margin: 60px 0;
    backdrop-filter: blur(20px); box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.calc-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center; }
.role-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.role-info h4 { margin: 0; color: #fff; font-size: 1.1rem; }
.role-info span { font-size: 0.8rem; color: var(--text-medium); }
.role-controls { display: flex; align-items: center; gap: 15px; }
input[type=range] { -webkit-appearance: none; width: 150px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 5px; outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-orange); cursor: pointer; box-shadow: 0 0 10px var(--accent-orange); }
.count-display { font-family: monospace; font-size: 1.2rem; font-weight: bold; color: #fff; width: 30px; text-align: right; }
.calc-result-box { text-align: center; padding: 40px; background: linear-gradient(135deg, rgba(255,77,0,0.1), rgba(0,0,0,0)); border: 1px solid var(--accent-orange); border-radius: 20px; position: relative; overflow: hidden; }
.calc-result-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: var(--accent-orange); box-shadow: 0 0 20px var(--accent-orange); }
.savings-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: #ccc; margin-bottom: 10px; display: block; }
.savings-amount { font-size: 3.5rem; font-weight: 800; color: #fff; text-shadow: 0 0 20px rgba(255,77,0,0.5); display: block; line-height: 1.1; }
.savings-period { font-size: 0.8rem; opacity: 0.6; margin-top: 5px; display: block; }

/* STICKY SCROLL (Nearshoring) */
.sticky-scroll-wrapper {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; position: relative; margin: 60px 0;
}
.sticky-left-content { position: -webkit-sticky; position: sticky; top: 120px; height: fit-content; }
.scroll-right-content { display: flex; flex-direction: column; gap: 30px; }

/* --- GLASS CARDS (Development) --- */
/* WICHTIG: Kein .active hier oben! */
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 30px; }
.card-glass {
    position: relative; background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px; padding: 40px; overflow: hidden;
    transition: all 0.4s ease; z-index: 1;
}
.card-glass:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}
.big-num {
    position: absolute; top: -15px; right: -15px;
    font-size: 8rem; font-weight: 800; line-height: 1;
    color: rgba(255, 255, 255, 0.03); z-index: -1;
    transition: 0.4s ease; font-family: var(--font-main);
}
.card-glass:hover .big-num {
    color: var(--ds-orange); opacity: 0.2;
    transform: scale(1.1) rotate(-5deg);
    text-shadow: 0 0 30px var(--ds-orange);
}
.glass-h3 { font-size: 1.5rem; color: var(--text-bright); margin-bottom: 20px; font-weight: 700; }
.glass-p { color: var(--text-medium); font-size: 1rem; line-height: 1.6; font-weight: 400; }
.glass-subtitle { color: var(--text-medium); font-size: 0.9rem; font-weight: 700; margin-bottom: 15px; display: block; text-transform: uppercase; letter-spacing: 1px; }

/* Why DeSoft */
.why-grid-clean { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-top: 40px; text-align: center; }
.why-icon-clean {
    width: 70px; height: 70px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 25px auto; font-size: 1.8rem; transition: 0.3s;
    filter: grayscale(100%) brightness(500%);
}
.why-item:hover .why-icon-clean { border-color: #fff; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); transform: scale(1.1); }
.why-h3 { font-size: 1.3rem; color: var(--text-bright); margin-bottom: 15px; font-weight: 700; }
.why-p { color: var(--text-medium); font-size: 1rem; line-height: 1.6; }

/* Orbit */
.orbit-section { position: relative; height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 40px 0; }
.sun-center { width: 90px; height: 90px; border-radius: 50%; background: #000; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; letter-spacing: 2px; box-shadow: 0 0 40px rgba(255,255,255,0.05); }
.orbit-ring { position: absolute; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; }
.ring-1 { width: 300px; height: 300px; animation: spin-right 40s linear infinite; }
.ring-2 { width: 500px; height: 500px; animation: spin-left 60s linear infinite; }
.planet { position: absolute; top: 50%; left: 50%; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; font-weight: 500; background: #050505; transition: 0.3s; box-shadow: 0 0 15px rgba(0,0,0,0.8); }
.planet:hover { transform: scale(1.3) !important; z-index: 10; background: #111; }
.planet-s { width: 50px; height: 50px; margin:-25px; }
.planet-m { width: 70px; height: 70px; margin:-35px; }
.planet-l { width: 90px; height: 90px; margin:-45px; }
.p-petrol { border: 1px solid #0E4D56; color: var(--text-medium); }
.p-midnight { border: 1px solid #1B2631; color: var(--text-medium); }
.p-charcoal { border: 1px solid #2F3640; color: var(--text-medium); }
.p-orange { border: 1px solid var(--ds-orange); color: #fff; }
.pos-1 { transform: rotate(0deg) translateX(150px) rotate(0deg); }
.pos-2 { transform: rotate(120deg) translateX(150px) rotate(-120deg); }
.pos-3 { transform: rotate(240deg) translateX(150px) rotate(-240deg); }
.pos-4 { transform: rotate(45deg) translateX(250px) rotate(-45deg); }
.pos-5 { transform: rotate(135deg) translateX(250px) rotate(-135deg); }
.pos-6 { transform: rotate(225deg) translateX(250px) rotate(-225deg); }
.pos-7 { transform: rotate(315deg) translateX(250px) rotate(-315deg); }

/* Timeline */
.constellation-timeline { position: relative; max-width: 800px; margin: 0 auto; padding: 20px 0; }
.constellation-timeline::before { content: ''; position: absolute; top: 0; left: 50%; height: 100%; width: 1px; background: rgba(255, 255, 255, 0.15); }
.star-point { position: relative; margin-bottom: 60px; width: 100%; display: flex; }
.star-point:last-child { margin-bottom: 0; }
.star-point:nth-child(odd) { justify-content: flex-start; padding-right: 50%; }
.star-point:nth-child(even) { justify-content: flex-end; padding-left: 50%; text-align: right; }
.star-marker { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin-left: -7px; background: #000; border: 2px solid #fff; border-radius: 50%; z-index: 2; box-shadow: 0 0 15px rgba(255,255,255,0.6); }
.star-point:hover .star-marker { background: #fff; box-shadow: 0 0 25px rgba(255,255,255,0.9); }
.star-content { padding: 0 40px; }
.star-h3 { color: var(--text-bright); margin: 0 0 10px 0; font-size: 1.3rem; font-weight: 700; }

/* FOOTER */
footer { padding: 80px 0 30px; border-top: 1px solid var(--glass-border); background: rgba(10, 10, 15, 0.9); backdrop-filter: blur(20px); margin-top: 100px; width: 100%; }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-col h4 { color: #fff; margin-bottom: 25px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.footer-col ul { padding: 0; list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { display: block; color: var(--text-medium); opacity: 0.8; text-decoration: none; transition: 0.3s; }
.footer-col a:hover { opacity: 1; color: var(--accent-orange); }

/* MOBILE */
@media (max-width: 900px) {
    section { padding: 40px 0; }
    .hero { padding-top: 40px; }
    .metrics-bar { margin: 20px 0 40px 0; padding: 30px; }
    .footer-content, .split-feature, .calc-grid, .about-grid, .dev-grid, .why-grid-clean, .sticky-scroll-wrapper { grid-template-columns: 1fr; gap: 40px; }
    .about-text-columns { column-count: 1; border-left: none; padding-left: 0; }
    .sticky-left-content { position: relative; top: 0; margin-bottom: 40px; }
    .main-nav { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: rgba(5, 5, 10, 0.98); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; transition: 0.4s ease-in-out; z-index: 1000; }
    body.menu-open .main-nav { right: 0; }
    .main-nav ul { flex-direction: column; gap: 40px; text-align: center; }
    .nav-link { font-size: 1.5rem; }
    .nav-btn { font-size: 1.2rem; padding: 15px 40px; margin-top: 20px; }
    .constellation-timeline::before { left: 20px; }
    .star-point:nth-child(odd), .star-point:nth-child(even) { justify-content: flex-start; padding: 0 0 0 50px; text-align: left; }
    .star-marker { left: 20px; margin-left: -7px; }
    h1 { font-size: 2.5rem; }
    
    /* MOBILE ACTIVE STATES (Nur hier!) */
    .card.active, 
    .product-card.active, 
    .metric-item.active, 
    .glass-chip.active, 
    .partner-box.active,
    .card-glass.active {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: #ffffff !important;
        transform: translateY(-5px);
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.2) !important;
    }
    
    /* Speziell für Glass Cards: Orange Zahl */
    .card-glass.active .big-num {
        color: var(--ds-orange); opacity: 0.2;
        transform: scale(1.1) rotate(-5deg);
        text-shadow: 0 0 30px var(--ds-orange);
    }
    
    /* Speziell für Glass Cards: Hintergrund weisslich statt orange */
    .card-glass.active {
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.1) !important;
    }
}
@media(max-width:768px){ 
    .display-desktop-only { display:none !important; }
    .display-mobile-only { display:grid !important; grid-template-columns: 1fr 1fr; gap:15px; }
    .tech-item-m { background: rgba(255,255,255,0.05); color: var(--text-medium); padding: 15px; text-align: center; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); }
}
@media (max-width: 600px) { .footer-content { grid-template-columns: 1fr; } }

/* TECH CHIPS & PARTNERS */
.tech-container, .logo-grid { 
    display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 40px; 
}
.glass-chip {
    padding: 12px 25px; border-radius: 50px; background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-medium);
    font-weight: 500; font-size: 0.9rem; backdrop-filter: blur(5px);
    display: flex; align-items: center; gap: 10px; cursor: default;
    transition: all 0.3s ease;
}
.glass-chip img { height: 20px; width: 20px; filter: grayscale(1); transition: 0.3s; }
.glass-chip:hover { color: #fff; }
.glass-chip:hover img { filter: grayscale(0); }

.partner-box {
    width: 150px; height: 80px; 
    border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
    background: rgba(0,0,0,0.3); backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.partner-box img { 
    max-height: 40px; max-width: 80%; 
    filter: grayscale(1) brightness(200%); opacity: 0.7; transition: 0.3s;
}
.partner-box:hover img { filter: none; opacity: 1; }

.trust-section { text-align: center; opacity: 0.9; margin: 100px 0; }
.trust-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 30px; display: block; color: var(--accent-orange); }

/* DEVELOPMENT PAGE SPECIFICS */
.dev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 30px; }

.big-num {
    position: absolute; top: -15px; right: -15px;
    font-size: 8rem; font-weight: 800; line-height: 1;
    color: rgba(255, 255, 255, 0.03); z-index: -1;
    transition: 0.4s ease; font-family: var(--font-main);
}
.card-glass:hover .big-num, .card-glass.active .big-num {
    color: var(--ds-orange); opacity: 0.2;
    transform: scale(1.1) rotate(-5deg);
    text-shadow: 0 0 30px var(--ds-orange);
}
.glass-h3 { font-size: 1.5rem; color: var(--text-bright); margin-bottom: 20px; font-weight: 700; letter-spacing: -0.5px; }
.glass-p { color: var(--text-medium); font-size: 1rem; line-height: 1.6; font-weight: 400; }
.glass-subtitle { color: var(--text-medium); font-size: 0.9rem; font-weight: 700; margin-bottom: 15px; display: block; text-transform: uppercase; letter-spacing: 1px; }

/* Why DeSoft Clean */
.why-grid-clean { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-top: 40px; text-align: center; }
.why-icon-clean {
    width: 70px; height: 70px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 25px auto; font-size: 1.8rem; transition: 0.3s;
    filter: grayscale(100%) brightness(500%);
}
.why-item:hover .why-icon-clean { border-color: #fff; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); transform: scale(1.1); }
.why-h3 { font-size: 1.3rem; color: var(--text-bright); margin-bottom: 15px; font-weight: 700; }
.why-p { color: var(--text-medium); font-size: 1rem; line-height: 1.6; }

/* Orbit System */
.orbit-section { position: relative; height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 40px 0; }
.sun-center { width: 90px; height: 90px; border-radius: 50%; background: #000; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; letter-spacing: 2px; box-shadow: 0 0 40px rgba(255,255,255,0.05); }
.orbit-ring { position: absolute; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; }
.ring-1 { width: 300px; height: 300px; animation: spin-right 40s linear infinite; }
.ring-2 { width: 500px; height: 500px; animation: spin-left 60s linear infinite; }
.planet { position: absolute; top: 50%; left: 50%; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; font-weight: 500; background: #050505; transition: 0.3s; box-shadow: 0 0 15px rgba(0,0,0,0.8); }
.planet:hover { transform: scale(1.3) !important; z-index: 10; background: #111; }
.planet-s { width: 50px; height: 50px; margin:-25px; }
.planet-m { width: 70px; height: 70px; margin:-35px; }
.planet-l { width: 90px; height: 90px; margin:-45px; }
.p-petrol { border: 1px solid #0E4D56; color: var(--text-medium); }
.p-midnight { border: 1px solid #1B2631; color: var(--text-medium); }
.p-charcoal { border: 1px solid #2F3640; color: var(--text-medium); }
.p-orange { border: 1px solid var(--ds-orange); color: #fff; }
.pos-1 { transform: rotate(0deg) translateX(150px) rotate(0deg); }
.pos-2 { transform: rotate(120deg) translateX(150px) rotate(-120deg); }
.pos-3 { transform: rotate(240deg) translateX(150px) rotate(-240deg); }
.pos-4 { transform: rotate(45deg) translateX(250px) rotate(-45deg); }
.pos-5 { transform: rotate(135deg) translateX(250px) rotate(-135deg); }
.pos-6 { transform: rotate(225deg) translateX(250px) rotate(-225deg); }
.pos-7 { transform: rotate(315deg) translateX(250px) rotate(-315deg); }

/* Constellation Timeline */
.constellation-timeline { position: relative; max-width: 800px; margin: 0 auto; padding: 20px 0; }
.constellation-timeline::before { content: ''; position: absolute; top: 0; left: 50%; height: 100%; width: 1px; background: rgba(255, 255, 255, 0.15); }
.star-point { position: relative; margin-bottom: 60px; width: 100%; display: flex; }
.star-point:last-child { margin-bottom: 0; }
.star-point:nth-child(odd) { justify-content: flex-start; padding-right: 50%; }
.star-point:nth-child(even) { justify-content: flex-end; padding-left: 50%; text-align: right; }
.star-marker { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin-left: -7px; background: #000; border: 2px solid #fff; border-radius: 50%; z-index: 2; box-shadow: 0 0 15px rgba(255,255,255,0.6); }
.star-point:hover .star-marker { background: #fff; box-shadow: 0 0 25px rgba(255,255,255,0.9); }
.star-content { padding: 0 40px; }
.star-h3 { color: var(--text-bright); margin: 0 0 10px 0; font-size: 1.3rem; font-weight: 700; }

/* FOOTER */
footer { padding: 80px 0 30px; border-top: 1px solid var(--glass-border); background: rgba(10, 10, 15, 0.9); backdrop-filter: blur(20px); margin-top: 100px; width: 100%; }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.footer-col h4 { color: #fff; margin-bottom: 25px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.footer-col ul { padding: 0; list-style: none; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { display: block; color: var(--text-medium); opacity: 0.8; text-decoration: none; transition: 0.3s; }
.footer-col a:hover { opacity: 1; color: var(--accent-orange); }

/* MOBILE / RESPONSIVE ANPASSUNGEN */
@media (max-width: 900px) {
    section { padding: 40px 0; }
    .hero { padding-top: 40px; }
    .metrics-bar { margin: 20px 0 40px 0; padding: 30px; }
    
    .footer-content, .split-feature, .calc-grid, .about-grid, .dev-grid, .why-grid-clean, .sticky-scroll-wrapper { grid-template-columns: 1fr; gap: 40px; }
    .about-text-columns { column-count: 1; border-left: none; padding-left: 0; }
    .sticky-left-content { position: relative; top: 0; margin-bottom: 40px; }
    
    .main-nav { position: fixed; top: 0; right: -100%; width: 100%; height: 100vh; background: rgba(5, 5, 10, 0.98); backdrop-filter: blur(20px); display: flex; align-items: center; justify-content: center; transition: 0.4s ease-in-out; z-index: 1000; }
    body.menu-open .main-nav { right: 0; }
    .main-nav ul { flex-direction: column; gap: 40px; text-align: center; }
    .nav-link { font-size: 1.5rem; }
    .nav-btn { font-size: 1.2rem; padding: 15px 40px; margin-top: 20px; }
    
    .constellation-timeline::before { left: 20px; }
    .star-point:nth-child(odd), .star-point:nth-child(even) { justify-content: flex-start; padding: 0 0 0 50px; text-align: left; }
    .star-marker { left: 20px; margin-left: -7px; }
    
    h1 { font-size: 2.5rem; }
    .savings-amount { font-size: 2.2rem; }
}
@media(max-width:768px){ 
    .display-desktop-only { display:none !important; }
    .display-mobile-only { display:grid !important; grid-template-columns: 1fr 1fr; gap:15px; }
    .tech-item-m { background: rgba(255,255,255,0.05); color: var(--text-medium); padding: 15px; text-align: center; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); }
}
@media (max-width: 600px) { .footer-content { grid-template-columns: 1fr; } }
/* =========================================
   DEVELOPMENT PAGE: BENTO & EXPERIMENTS
   ========================================= */

/* 1. BENTO GRID (Asymmetrisches Raster) */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

/* Macht eine Karte doppelt so breit (wenn Platz da ist) */
.card-wide {
    grid-column: span 2;
}

@media (max-width: 900px) {
    .card-wide { grid-column: span 1; } /* Mobile: wieder normal */
}

/* 2. TECH MATRIX (Strukturierte Liste statt Wolke) */
.tech-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
    margin-top: 40px;
}

.tech-column h4 {
    color: var(--accent-orange);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tech-list {
    list-style: none;
    padding: 0;
}

.tech-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #ccc;
    font-size: 0.95rem;
}

/* 3. PROCESS PIPELINE (Visueller Flow) */
.process-pipeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 60px 0;
    border-left: 2px solid rgba(255, 77, 0, 0.3); /* Die Linie */
    padding-left: 40px;
}

.process-step {
    position: relative;
    margin-bottom: 50px;
}

/* Der Punkt auf der Linie */
.process-step::before {
    content: '';
    position: absolute;
    left: -49px; /* Position auf der Linie */
    top: 0;
    width: 16px;
    height: 16px;
    background: var(--bg-deep);
    border: 2px solid var(--accent-orange);
    border-radius: 50%;
    z-index: 2;
    transition: 0.3s;
}

.process-step:hover::before {
    background: var(--accent-orange);
    box-shadow: 0 0 15px var(--accent-orange);
}

.step-number {
    font-size: 0.8rem;
    color: var(--accent-orange);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
}

.step-content h3 { margin: 0 0 10px 0; font-size: 1.3rem; color: #fff; }
.step-content p { color: var(--text-medium); font-size: 0.95rem; margin: 0; }

/* 4. VISUAL FEATURE STRIP (Icons groß) */
.feature-strip {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
    text-align: center;
    margin-bottom: 60px;
    padding: 40px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.feature-box h3 { color: #fff; margin-bottom: 5px; font-size: 1.1rem; }
.feature-box p { font-size: 0.9rem; color: #888; }
.big-icon { font-size: 2rem; margin-bottom: 15px; display: block; opacity: 0.8; }
/* =========================================
   DEVELOPMENT PAGE: MODERN & ORBITAL
   ========================================= */

/* 1. BIG NUMBER CARDS (Statt Icons) */
.service-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin: 60px 0;
}

.card-modern {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
    transition: 0.4s ease;
    z-index: 1;
}

/* Der Streifen (Stripe) */
.card-modern::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: var(--accent-gradient);
    opacity: 0.5; transition: 0.3s;
}

.card-modern:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.card-modern:hover::before { opacity: 1; width: 6px; box-shadow: 0 0 20px var(--accent-orange); }

/* Die riesige Zahl im Hintergrund */
.big-bg-num {
    position: absolute;
    top: -20px; right: -20px;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    z-index: -1;
    line-height: 1;
    transition: 0.4s;
}
.card-modern:hover .big-bg-num {
    color: rgba(255, 77, 0, 0.1);
    transform: scale(1.1) rotate(-5deg);
}

.modern-h3 { font-size: 1.6rem; color: #fff; margin-bottom: 20px; }
.modern-p { color: #aaa; font-size: 1rem; line-height: 1.7; }


/* 2. GLOWING ORBS (Statt langweiliger Icons) */
.orb-container {
    display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 40px;
}
.orb-item {
    width: 140px; height: 140px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), transparent);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    position: relative;
    transition: 0.3s;
}
.orb-item:hover {
    border-color: var(--accent-orange);
    box-shadow: 0 0 30px rgba(255, 77, 0, 0.2);
    transform: scale(1.05);
}
.orb-icon { font-size: 2rem; margin-bottom: 5px; display: block; }
.orb-text { font-size: 0.85rem; color: #fff; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }


/* 3. ORBIT ANIMATION (Tech Stack) */
.orbit-section {
    position: relative;
    height: 600px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    margin: 80px 0;
}
.sun-center {
    width: 100px; height: 100px;
    background: var(--accent-gradient);
    border-radius: 50%;
    box-shadow: 0 0 60px var(--accent-orange);
    position: absolute;
    z-index: 10;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: bold; font-size: 1.2rem;
}
.orbit-ring {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}
.ring-1 { width: 300px; height: 300px; animation: spin-right 20s linear infinite; }
.ring-2 { width: 500px; height: 500px; animation: spin-left 35s linear infinite; }
.ring-3 { width: 700px; height: 700px; border-style: dashed; opacity: 0.5; animation: spin-right 60s linear infinite; }

.planet {
    position: absolute;
    top: 50%; left: 50%;
    width: 50px; height: 50px;
    margin-top: -25px; margin-left: -25px; /* Center pivot */
    background: #111;
    border: 1px solid var(--accent-orange);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.7rem; font-weight: bold;
    box-shadow: 0 0 15px rgba(255,77,0,0.3);
}

/* Position planets on rings via transform */
.pos-1 { transform: rotate(0deg) translateX(150px) rotate(0deg); }
.pos-2 { transform: rotate(120deg) translateX(150px) rotate(-120deg); }
.pos-3 { transform: rotate(240deg) translateX(150px) rotate(-240deg); }

.pos-4 { transform: rotate(45deg) translateX(250px) rotate(-45deg); }
.pos-5 { transform: rotate(135deg) translateX(250px) rotate(-135deg); }
.pos-6 { transform: rotate(225deg) translateX(250px) rotate(-225deg); }
.pos-7 { transform: rotate(315deg) translateX(250px) rotate(-315deg); }

@keyframes spin-right { 100% { transform: rotate(360deg); } }
@keyframes spin-left { 100% { transform: rotate(-360deg); } }

/* Mobile Fallback for Orbit */
@media (max-width: 768px) {
    .orbit-section { height: auto; display: block; margin: 40px 0; }
    .orbit-ring, .sun-center { display: none; }
    .tech-grid-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
    .tech-item-m { background: rgba(255,255,255,0.05); padding: 15px; text-align: center; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); }
}
/* =========================================
   FEINSCHLIFF: MULTI-COLOR & CONSTELLATIONS
   ========================================= */

/* --- 1. SERVICE CARDS: FARB-VARIANTEN & MOBILE TAP --- */

/* Basis-Karte (Orange Accent - wie gehabt) */
.card-modern {
    position: relative;
    background: linear-gradient(145deg, rgba(40,40,40,0.3) 0%, rgba(20,20,20,0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy transition */
    z-index: 1;
}
/* Der Streifen (Orange Standard) */
.card-modern::before {
    content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
    background: var(--accent-orange); opacity: 0.3; transition: 0.3s;
}
/* Hover & Active State (Orange) */
.card-modern:hover, .card-modern.active {
    transform: translateY(-7px) scale(1.02);
    background: linear-gradient(145deg, rgba(255, 77, 0, 0.1) 0%, rgba(10,10,10,0.8) 100%);
    border-color: var(--accent-orange);
    box-shadow: 0 15px 40px rgba(255, 77, 0, 0.2);
}
.card-modern:hover::before, .card-modern.active::before { opacity: 1; width: 5px; box-shadow: 0 0 25px var(--accent-orange); }


/* VARIANTE BLAU/CYAN (Kühler Akzent) */
:root { --accent-cyan: #00d2ff; } /* Neue Variable für Cyan */

.card-modern.accent-cyan::before { background: var(--accent-cyan); }
.card-modern.accent-cyan:hover, .card-modern.accent-cyan.active {
    background: linear-gradient(145deg, rgba(0, 210, 255, 0.1) 0%, rgba(10,10,10,0.8) 100%);
    border-color: var(--accent-cyan);
    box-shadow: 0 15px 40px rgba(0, 210, 255, 0.2);
}
.card-modern.accent-cyan:hover::before, .card-modern.accent-cyan.active::before { box-shadow: 0 0 25px var(--accent-cyan); }
.card-modern.accent-cyan:hover .big-bg-num, .card-modern.accent-cyan.active .big-bg-num { color: rgba(0, 210, 255, 0.1); }

/* Hintergrund-Zahl Anpassung */
.big-bg-num {
    font-family: 'Inter', sans-serif; /* Sicherstellen der Font */
    letter-spacing: -5px;
}

/* --- 3. WHY DESOFT (REDESIGN: Pure Black & Abstract Orbs) --- */
.why-section-dark {
    /* Überschreibt den alten Streifen-Look mit tiefem Schwarz */
    background: #030305 !important; 
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: none !important;
}

.abstract-orb-container {
    display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px;
}

.abstract-orb {
    width: 100px; height: 100px;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

/* Der leuchtende Kreis */
.orb-core {
    width: 60px; height: 60px; border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,77,0,0.8), rgba(0,0,0,0) 70%);
    border: 1px solid rgba(255,77,0,0.3);
    box-shadow: 0 0 30px rgba(255,77,0,0.2);
    margin-bottom: 15px;
    position: relative;
}
/* Ein kleiner Ring drumherum */
.orb-core::after {
    content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: 50%; border: 1px dashed rgba(255,255,255,0.2);
    animation: spin-right 20s linear infinite;
}

.orb-label {
    font-size: 0.9rem; color: #fff; font-weight: 600; letter-spacing: 1px;
    /* KEIN UPPERCASE MEHR */
}


/* --- 4. PROZESS ALS STERNBILD (Constellation Timeline) --- */
.constellation-timeline {
    position: relative;
    max-width: 800px; margin: 0 auto;
    padding: 40px 0;
}

/* Die Verbindungslinien (SVG-Look via CSS Border) */
.constellation-timeline::before {
    content: ''; position: absolute; top: 0; left: 50%; height: 100%; width: 2px;
    background: linear-gradient(to bottom, transparent, var(--accent-orange) 20%, var(--accent-cyan) 80%, transparent);
    opacity: 0.3;
    /* Zick-Zack Effekt durch Clip-Path wäre komplexer, wir nehmen eine zentrale Linie mit versetzten Sternen für den Anfang */
}

.star-point {
    position: relative;
    margin-bottom: 80px;
    width: 100%;
    display: flex;
    /* Abwechselnd links/rechts anordnen */
}
.star-point:nth-child(odd) { justify-content: flex-start; padding-right: 50%; }
.star-point:nth-child(even) { justify-content: flex-end; padding-left: 50%; text-align: right; }

/* Der funkelnde Stern */
.star-marker {
    position: absolute;
    left: 50%; top: 0;
    width: 20px; height: 20px;
    margin-left: -10px; /* Zentrieren auf der Linie */
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 20px #fff, 0 0 40px var(--accent-cyan);
    animation: twinkle-star 3s infinite alternate;
    z-index: 2;
}
/* Verschiedene Farben für die Sterne */
.star-point:nth-child(2n) .star-marker { box-shadow: 0 0 20px #fff, 0 0 40px var(--accent-orange); animation-delay: 1s; }
.star-point:nth-child(3n) .star-marker { box-shadow: 0 0 20px #fff, 0 0 40px #bd00ff; animation-delay: 2s; }

@keyframes twinkle-star {
    0% { transform: scale(0.8); opacity: 0.7; }
    100% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 30px #fff, 0 0 60px var(--accent-cyan); }
}

.star-content {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 30px; border-radius: 20px;
    position: relative;
    width: 90%; /* Etwas Abstand zur Mitte */
    backdrop-filter: blur(5px);
}

/* Funkelnder Titel */
.twinkle-title {
    color: #fff; margin-top: 0;
    animation: text-flicker 5s infinite alternate;
}
@keyframes text-flicker {
    0%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(255,255,255,0.2); }
    50% { opacity: 0.8; text-shadow: 0 0 0px transparent; }
}

/* Mobile Anpassung Sternbild (wieder untereinander) */
@media (max-width: 768px) {
    .constellation-timeline::before { left: 20px; }
    .star-point:nth-child(odd), .star-point:nth-child(even) { justify-content: flex-start; padding: 0 0 0 60px; text-align: left; }
    .star-marker { left: 20px; }
    .star-content { width: 100%; }
}
/* =========================================
   FINAL POLISH: HERO CONSISTENCY (White/Grey)
   ========================================= */

:root {
    --ds-orange: #F29200;
    --ds-charcoal: #2F3640;
}

/* --- 1. GLASS CARDS (Services & Models) --- */
.dev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.card-glass {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    overflow: hidden;
    transition: all 0.4s ease;
    z-index: 1;
}

.card-glass:hover, .card-glass.active {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

/* Grosse Zahl im Hintergrund (Orange Leuchten bleibt als Akzent) */
.big-num {
    position: absolute; top: -15px; right: -15px;
    font-size: 8rem; font-weight: 800; line-height: 1;
    color: rgba(255, 255, 255, 0.03); z-index: -1;
    transition: 0.4s ease; font-family: var(--font-main);
}

/* TYPO: Exakt wie Hero Section */
.glass-h3 {
    font-size: 1.5rem;
    color: var(--text-bright); /* Reinweiss (#fff) */
    margin-bottom: 20px;
    font-weight: 700; 
}
.glass-p {
    color: var(--text-medium); /* Das Standard-Grau (#a0a0a0) */
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
}
/* Untertitel in Karten (z.B. "Ideal für...") */
.glass-subtitle {
    color: var(--text-medium); /* Grau statt Orange */
    font-size: 0.9rem;
    font-weight: 700; /* Fett aber Grau */
    margin-bottom: 15px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* --- 2. WHY DESOFT (3 Icons, Clean) --- */
.why-grid-clean {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-top: 40px;
    text-align: center;
}

.why-icon-clean {
    width: 70px; height: 70px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 25px auto;
    font-size: 1.8rem;
    transition: 0.3s;
    filter: grayscale(100%) brightness(500%); /* Weiss erzwingen */
}
.why-item:hover .why-icon-clean {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.why-h3 {
    font-size: 1.3rem;
    color: var(--text-bright); /* Reinweiss */
    margin-bottom: 15px;
    font-weight: 700;
}
.why-p {
    color: var(--text-medium); /* Grau */
    font-size: 1rem;
    line-height: 1.6;
}


/* --- 3. SOLAR SYSTEM (Dezentere Farben) --- */
.orbit-section { position: relative; height: 600px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin: 40px 0; }
.sun-center { width: 90px; height: 90px; border-radius: 50%; background: #000; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.9rem; letter-spacing: 2px; box-shadow: 0 0 40px rgba(255,255,255,0.05); }
.orbit-ring { position: absolute; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; }
.ring-1 { width: 300px; height: 300px; animation: spin-right 40s linear infinite; }
.ring-2 { width: 500px; height: 500px; animation: spin-left 60s linear infinite; }

.planet {
    position: absolute; top: 50%; left: 50%;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 0.8rem; font-weight: 500;
    background: #050505; transition: 0.3s;
    box-shadow: 0 0 15px rgba(0,0,0,0.8);
}
.planet:hover { transform: scale(1.3) !important; z-index: 10; background: #111; }

.planet-s { width: 50px; height: 50px; margin:-25px; }
.planet-m { width: 70px; height: 70px; margin:-35px; }
.planet-l { width: 90px; height: 90px; margin:-45px; }

/* Dezentere Planeten-Farben */
.p-petrol { border: 1px solid #0E4D56; color: var(--text-medium); }
.p-midnight { border: 1px solid #1B2631; color: var(--text-medium); }
.p-charcoal { border: 1px solid #2F3640; color: var(--text-medium); }
.p-orange { border: 1px solid var(--ds-orange); color: #fff; }

.pos-1 { transform: rotate(0deg) translateX(150px) rotate(0deg); }
.pos-2 { transform: rotate(120deg) translateX(150px) rotate(-120deg); }
.pos-3 { transform: rotate(240deg) translateX(150px) rotate(-240deg); }
.pos-4 { transform: rotate(45deg) translateX(250px) rotate(-45deg); }
.pos-5 { transform: rotate(135deg) translateX(250px) rotate(-135deg); }
.pos-6 { transform: rotate(225deg) translateX(250px) rotate(-225deg); }
.pos-7 { transform: rotate(315deg) translateX(250px) rotate(-315deg); }

@keyframes spin-right { 100% { transform: rotate(360deg); } }
@keyframes spin-left { 100% { transform: rotate(-360deg); } }


/* --- 4. PROZESS (Weiss & Grau) --- */
.constellation-timeline { position: relative; max-width: 800px; margin: 0 auto; padding: 20px 0; }
.constellation-timeline::before { content: ''; position: absolute; top: 0; left: 50%; height: 100%; width: 1px; background: rgba(255, 255, 255, 0.15); }
.star-point { position: relative; margin-bottom: 60px; width: 100%; display: flex; }
.star-point:last-child { margin-bottom: 0; }
.star-point:nth-child(odd) { justify-content: flex-start; padding-right: 50%; }
.star-point:nth-child(even) { justify-content: flex-end; padding-left: 50%; text-align: right; }
.star-marker { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin-left: -7px; background: #000; border: 2px solid #fff; border-radius: 50%; z-index: 2; box-shadow: 0 0 15px rgba(255,255,255,0.6); }
.star-point:hover .star-marker { background: #fff; box-shadow: 0 0 25px rgba(255,255,255,0.9); }
.star-content { padding: 0 40px; }

.star-h3 { 
    color: var(--text-bright); /* Weiss */
    margin: 0 0 10px 0; 
    font-size: 1.3rem; 
    font-weight: 700; 
}

/* Mobile Fallbacks */
@media (max-width: 900px) {
    .constellation-timeline::before { left: 20px; }
    .star-point:nth-child(odd), .star-point:nth-child(even) { justify-content: flex-start; padding: 0 0 0 50px; text-align: left; }
    .star-marker { left: 20px; margin-left: -7px; }
}
@media(max-width:768px){ 
    .display-desktop-only { display:none !important; }
    .display-mobile-only { display:grid !important; grid-template-columns: 1fr 1fr; gap:15px; }
    .tech-item-m { background: rgba(255,255,255,0.05); color: var(--text-medium); padding: 15px; text-align: center; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); }
}
/* =========================================
   NEUES ELEMENT: SORGLOS PAUSCHALE (Deep Navy Metallic)
   ========================================= */

.sorglos-section {
    /* BREAKOUT TRICK: Sprengt den Eltern-Container */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    
    padding: 100px 20px;
    margin-top: 80px;
    margin-bottom: 80px;
    margin-top: 100px;
    
    /* HINTERGRUND: Deep Navy Metallic Gradient (#0a1224) */
    /* Startet oben etwas heller (Lichtkante) und geht ins tiefe Dunkelblau */
    background: radial-gradient(circle at 50% -10%, #1c2b4a, #0a1224 60%, #020408 100%);
    
    /* Feine Linien zur Abgrenzung */
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    overflow: hidden;
}

/* Metallic Noise Texture */
.sorglos-section::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDMiLz4KPC9zdmc+');
    opacity: 0.4; pointer-events: none; mix-blend-mode: overlay;
}
.sorglos-inner {
    max-width: 1200px; margin: 0 auto; text-align: center; position: relative; z-index: 2;
}
.section-title {
    margin-bottom: 20px;
    color: var(--text-bright); /* Fallback wenn nicht gesetzt */
}

.section-subtitle {
    color: var(--text-medium);
}

/* TYPOGRAFIE */
.sl-title {
    font-size: 2.8rem; color: #fff; margin: 0 0 20px 0; font-weight: 800; letter-spacing: -1px;
    text-shadow: 0 0 30px rgba(10, 18, 36, 0.8);
}
.sl-highlight { color: var(--ds-orange); }

.sl-desc {
    font-size: 1.2rem; color: #cfd8e3; /* Kühles Silber-Blau */
    margin: 0 auto 70px auto; max-width: 700px;
    line-height: 1.6; opacity: 0.9;
}

/* GRID FÜR DIE KUGELN */
.sphere-grid {
    display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 60px;
}

.sphere-item {
    width: 220px; display: flex; flex-direction: column; align-items: center;
}

/* DIE KUGEL (Metallic Glass Look) */
.sphere-bubble {
    width: 120px; height: 120px; border-radius: 50%;
    
    /* Dunkles Glas auf Navy Hintergrund */
    background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(10,18,36,0.6));
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.3); /* Scharfe Lichtkante */
    
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 30px;
    font-size: 2.5rem;
    transition: 0.3s ease;
    
    /* Icon Weiss erzwingen */
    filter: grayscale(100%) brightness(1000%);
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.sphere-item:hover .sphere-bubble {
    transform: translateY(-5px);
    background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(10,18,36,0.4));
    border-color: rgba(255,255,255,0.4);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.sphere-title { font-size: 1.2rem; color: #fff; font-weight: 700; margin-bottom: 15px; }
.sphere-text { font-size: 0.95rem; color: #cfd8e3; line-height: 1.6; }

/* SPEZIAL BUTTON FÜR DIESE SEKTION */
.btn-glow {
    display: inline-block; padding: 18px 50px;
    background: linear-gradient(90deg, #ff4d00, #ff8c00);
    color: #fff; text-decoration: none; font-weight: 600; border-radius: 50px;
    box-shadow: 0 10px 30px rgba(255, 77, 0, 0.2);
    transition: 0.3s; border: 1px solid rgba(255,255,255,0.1);
}
.btn-center {
    text-align: center;
    margin-top: 40px;
}
.btn-glow:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(255, 77, 0, 0.4); }

/* MOBILE ANPASSUNG */
@media(max-width: 900px) {
    .sphere-grid { flex-direction: column; align-items: center; gap: 60px; }
    .sorglos-section { padding: 60px 20px; }
    .sl-title { font-size: 2.2rem; }
    .sphere-item { width: 100%; max-width: 300px; }
}
/* =========================================
   CONSULTING: NO RISK MODEL STYLES
   ========================================= */

.risk-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr; /* Links | Linie | Rechts */
    gap: 40px;
    align-items: center;
    text-align: left;
    max-width: 900px;
    margin: 60px auto 0 auto;
}

/* Die Trennlinie in der Mitte */
.risk-divider {
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, var(--ds-orange), transparent);
    opacity: 0.5;
}

.risk-item h4 {
    font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px;
    color: var(--ds-silver); margin-bottom: 15px;
}

.risk-value {
    font-size: 3.5rem; font-weight: 800; color: #fff;
    line-height: 1; margin-bottom: 20px;
    text-shadow: 0 0 30px rgba(255,255,255,0.1);
}

/* Akzent für den "Share of Savings" Teil */
.risk-value.highlight {
    color: var(--ds-orange);
    text-shadow: 0 0 30px rgba(255, 77, 0, 0.3);
}

.risk-desc {
    font-size: 1rem; color: #aaa; line-height: 1.6;
}

/* Mobile Anpassung für das Risk Grid */
@media(max-width: 800px) {
    .risk-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 60px;
    }
    .risk-divider {
        width: 100%; height: 1px;
        background: linear-gradient(to right, transparent, var(--ds-orange), transparent);
    }
}
/* =========================================
   ADD-ON: SORGLOS & MOBILE FIXES (End of File)
   ========================================= */

/* 1. SORGLOS BANNER (Full Width Breakout) */
.sorglos-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 100px 20px;
    margin-top: 80px;
    margin-bottom: 80px;
    /* Deep Navy Metallic #0a1224 */
    background: radial-gradient(circle at 50% -10%, #1c2b4a, #0a1224 60%, #020408 100%);
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    overflow: hidden;
}

.sorglos-inner { max-width: 1200px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.sl-title { font-size: 2.8rem; color: #fff; margin: 0 0 20px 0; font-weight: 800; letter-spacing: -1px; text-shadow: 0 0 30px rgba(10, 18, 36, 0.8); }
.sl-highlight { color: #ff4d00; }
.sl-desc { font-size: 1.2rem; color: #cfd8e3; margin: 0 auto 70px auto; max-width: 700px; line-height: 1.6; opacity: 0.9; }

/* SPHERES (Kugeln) */
.sphere-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 60px; }
.sphere-item { width: 220px; display: flex; flex-direction: column; align-items: center; }
.sphere-bubble {
    width: 120px; height: 120px; border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(10,18,36,0.6));
    border: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center; margin-bottom: 30px; 
    font-size: 2.5rem; transition: 0.3s ease;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
.sphere-bubble svg { width: 45px; height: 45px; fill: none; stroke: #fff; stroke-width: 1.5; }
.sphere-item:hover .sphere-bubble { 
    transform: translateY(-5px); 
    background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(10,18,36,0.4)); 
    border-color: rgba(255,255,255,0.4);
}
.sphere-title { font-size: 1.2rem; color: #fff; font-weight: 700; margin-bottom: 15px; }
.sphere-text { font-size: 0.95rem; color: #cfd8e3; line-height: 1.6; }

/* SPEZIAL BUTTON */
.btn-glow {
    display: inline-block; padding: 18px 50px; background: linear-gradient(90deg, #ff4d00, #ff8c00);
    color: #fff; text-decoration: none; font-weight: 600; border-radius: 50px;
    box-shadow: 0 10px 30px rgba(255, 77, 0, 0.2); transition: 0.3s; border: 1px solid rgba(255,255,255,0.1);
}
.btn-glow:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(255, 77, 0, 0.4); }

/* =========================================
   FIXES & UPDATES: SORGLOS, STICKY & WHITE GLOW
   ========================================= */

/* 1. SORGLOS BANNER (Deep Navy) */
.sorglos-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 100px 20px;
    margin-top: 80px;
    margin-bottom: 80px;
    background: radial-gradient(circle at 50% -10%, #1c2b4a, #0a1224 60%, #020408 100%);
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    overflow: hidden;
}
.sorglos-inner { max-width: 1200px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.sl-title { font-size: 2.8rem; color: #fff; margin: 0 0 20px 0; font-weight: 800; letter-spacing: -1px; text-shadow: 0 0 30px rgba(10, 18, 36, 0.8); }
.sl-highlight { color: #ff8c00; text-shadow: 0 0 20px rgba(255, 77, 0, 0.5); } /* Nur hier Orange! */
.sl-desc { font-size: 1.2rem; color: #cfd8e3; margin: 0 auto 70px auto; max-width: 700px; line-height: 1.6; opacity: 0.9; }

/* SPHERES */
.sphere-grid { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; margin-bottom: 60px; }
.sphere-item { width: 220px; display: flex; flex-direction: column; align-items: center; }
.sphere-bubble {
    width: 120px; height: 120px; border-radius: 50%;
    background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(10,18,36,0.6));
    border: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center; margin-bottom: 30px; 
    font-size: 2.5rem; transition: 0.3s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}
.sphere-bubble svg { width: 45px; height: 45px; fill: none; stroke: #fff; stroke-width: 1.5; }
.sphere-item:hover .sphere-bubble { 
    transform: translateY(-5px); 
    background: linear-gradient(145deg, rgba(255,255,255,0.15), rgba(10,18,36,0.4)); 
    border-color: rgba(255,255,255,0.4);
}
.sphere-title { font-size: 1.2rem; color: #fff; font-weight: 700; margin-bottom: 15px; }
.sphere-text { font-size: 0.95rem; color: #cfd8e3; line-height: 1.6; }

/* BUTTON */
.btn-glow {
    display: inline-block; padding: 18px 50px; background: linear-gradient(90deg, #ff4d00, #ff8c00);
    color: #fff; text-decoration: none; font-weight: 600; border-radius: 50px;
    box-shadow: 0 10px 30px rgba(255, 77, 0, 0.2); transition: 0.3s; border: 1px solid rgba(255,255,255,0.1);
}
.btn-glow:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(255, 77, 0, 0.4); }

/* 2. STICKY FIX (Nearshoring) */
.sticky-scroll-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start; /* WICHTIG: Damit Sticky funktioniert */
    position: relative;
    margin: 60px 0;
}
.sticky-left-content {
    position: -webkit-sticky;
    position: sticky;
    top: 150px; /* Abstand von oben */
    height: fit-content;
    z-index: 10;
}

/* 3. WHITE GLOW MODE (Für Nearshoring Karten) */
/* Erzwingt weisses Leuchten beim Hover und aktivem Status */
.white-glow:hover, .white-glow.active {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-5px);
}
/* Die große Nummer in Weiss */
.white-glow:hover .big-num, .white-glow.active .big-num {
    color: #ffffff !important;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6) !important;
    opacity: 0.2 !important;
}

/* 4. ICON CLEANER (Macht alle SVGs in Kreisen weiss) */
.icon-circle svg, .why-icon-clean svg, .sphere-bubble svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* MOBILE FIXES */
@media (max-width: 900px) {
    .sphere-grid { flex-direction: column; align-items: center; gap: 60px; }
    .sorglos-section { padding: 60px 20px; }
    .sticky-scroll-wrapper { grid-template-columns: 1fr; }
    .sticky-left-content { position: relative; top: 0; margin-bottom: 40px; }
    
    .card-glass.active .big-num {
        color: #ff4d00; text-shadow: 0 0 30px #ff4d00; opacity: 0.3;
    }
    
    /* White Glow Mobile Override */
    .white-glow.active {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: #ffffff !important;
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.2) !important;
    }
}
    /* --- GOLDEN CIRCLE STYLES --- */
    .gc-section {
        padding: 20px 0;
        position: relative;
        overflow: hidden;
    }

    .gc-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 80px;
        align-items: center;
        max-width: 1100px;
        margin: 0 auto;
    }

    /* KREISE */
    .gc-visual {
        position: relative;
        height: 450px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .circle {
        position: absolute;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        font-weight: 800;
        letter-spacing: 2px;
        color: #fff;
        text-shadow: 0 0 10px rgba(0,0,0,0.5);
    }

    .c-what {
        width: 420px; height: 420px;
        border: 1px solid rgba(255,255,255,0.15);
        background: rgba(255,255,255,0.02);
        color: #888;
        z-index: 1;
        align-items: flex-start; padding-top: 25px;
    }

    .c-how {
        width: 280px; height: 280px;
        border: 1px solid rgba(255,255,255,0.3);
        background: rgba(255,255,255,0.05);
        backdrop-filter: blur(5px);
        z-index: 2;
        align-items: flex-start; padding-top: 25px;
        color: #ccc;
    }

    .c-why {
        width: 140px; height: 140px;
        background: var(--ds-orange);
        box-shadow: 0 0 50px rgba(255, 77, 0, 0.4);
        z-index: 3;
        border: 2px solid #fff;
    }

    /* TEXT KARTEN */
    .gc-cards {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .gc-text-card {
        padding: 35px;
        border-radius: 16px;
        border: 1px solid transparent;
        background: rgba(255,255,255,0.02);
        transition: 0.3s;
        cursor: default;
    }

    .gc-text-card h3 { margin: 0 0 15px 0; font-size: 1.4rem; color: #fff; }
    .gc-text-card p { margin: 0; font-size: 1.05rem; color: var(--text-medium); line-height: 1.7; }
    
    .gc-label { 
        font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; 
        font-weight: bold; display: block; margin-bottom: 10px; opacity: 0.6;
    }

    .gc-text-card:hover {
        background: rgba(255,255,255,0.08);
        border-color: rgba(255,255,255,0.2);
        transform: translateX(10px);
        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    }

    /* CARD STYLE OVERRIDES FÜR BILD-KARTEN */
    .img-card-header {
        position: relative; 
        height: 200px; 
        margin: -40px -40px 30px -40px; 
        overflow: hidden;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .img-card-overlay {
        position: absolute; 
        inset: 0; 
        background: linear-gradient(to bottom, transparent 0%, rgba(20,20,20,0.8) 100%); 
        z-index: 2;
    }
    .img-card-photo {
        width: 100%; 
        height: 100%; 
        object-fit: cover; 
        filter: grayscale(0.4) contrast(1.1); 
        transition: 0.5s;
    }
    .card:hover .img-card-photo {
        filter: grayscale(0) contrast(1);
        transform: scale(1.05);
    }

    @media (max-width: 900px) {
        .gc-grid { grid-template-columns: 1fr; gap: 50px; }
        .gc-visual { height: 320px; }
        .c-what { width: 300px; height: 300px; }
        .c-how { width: 190px; height: 190px; }
        .c-why { width: 100px; height: 100px; }
    }

    /* FAQ Accordion Styles */

    details { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; margin-bottom: 15px; overflow: hidden; transition: all 0.3s ease; }
    details:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
    details[open] { background: rgba(255,255,255,0.05); border-color: var(--ds-orange); }
    summary { padding: 25px; cursor: pointer; font-weight: bold; color: #fff; list-style: none; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; }
    summary::-webkit-details-marker { display: none; }
    summary::after { content: '+'; font-size: 1.5rem; color: var(--ds-orange); font-weight: 300; transition: transform 0.3s; }
    details[open] summary::after { content: '-'; transform: rotate(180deg); }
    .faq-content { padding: 0 25px 25px 25px; color: var(--text-medium); line-height: 1.7; font-size: 1rem; border-top: 1px solid rgba(255,255,255,0.05); margin-top: -10px; padding-top: 20px; }

    /* Mobile Reset */
    @media (max-width: 900px) {
        .gc-grid { grid-template-columns: 1fr; }
    }
    /* =========================================
   NEARSHORING PAGE - Zusätzliche Klassen
   ========================================= */

/* Hero Features Grid */
.hero-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
    text-align: left;
}

.feature-box .feature-title {
    color: white;
    font-weight: bold;
    margin-bottom: 5px;
}

.feature-box .feature-desc {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Sticky Section */
.sticky-title {
    margin-bottom: 30px;
    margin-top: 10px;
}

.sticky-desc {
    opacity: 0.8;
    margin-bottom: 30px;
    line-height: 1.8;
}

/* Card Focus Label */
.card-focus {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 15px;
}

/* Card List Default Spacing */
.card-list {
    margin-top: 20px;
}

/* =========================================
   DEVELOPMENT PAGE - Zusätzliche Klassen
   ========================================= */

.coop-section {
    margin-top: 60px;
}

/* Mobile Display Helper - bereits vorhanden, aber sicherstellen */
@media(max-width:768px) { 
    .display-desktop-only { 
        display: none !important; 
    } 
    .display-mobile-only { 
        display: grid !important; 
    } 
}
/* Display Helper Classes */
.display-mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .display-desktop-only {
        display: none !important;
    }
    
    .display-mobile-only {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
}

/* =========================================
   IT-MANAGEMENT PAGE - Zusätzliche Klassen
   ========================================= */

.intro-section {
    padding-bottom: 0;
}

.intro-box {
    max-width: 900px;
    text-align: center;
}

.intro-box h2 {
    color: var(--text-bright);
    margin-bottom: 30px;
}

.intro-box p {
    color: var(--text-medium);
    font-size: 1.1rem;
    line-height: 1.8;
}
/* =========================================
   ABOUT PAGE - Zusätzliche Klassen
   ========================================= */

.gc-label-orange {
    color: var(--ds-orange);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.product-tag {
    color: var(--ds-orange);
    font-family: monospace;
    font-size: 0.8rem;
    letter-spacing: 1px;
    display: block;
}

.product-title {
    margin: 10px 0;
    color: #fff;
}

.products-section-about {
    margin-top: 120px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* =========================================
   WEB-ENGINEERING PAGE - Pricing & Zusätze
   ========================================= */

/* Pricing Styles (vorher im inline <style>) */
.pricing-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.price-tag {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    display: block;
    margin: 10px 0;
}

.price-tag-orange {
    color: var(--ds-orange);
}

.price-sub {
    font-size: 0.9rem;
    opacity: 0.6;
    display: block;
    margin-bottom: 20px;
}

.highlight-card {
    border: 1px solid var(--ds-orange) !important;
    background: rgba(255, 77, 0, 0.05) !important;
    transform: scale(1.05);
    z-index: 2;
}

@media(max-width: 900px) { 
    .highlight-card { 
        transform: scale(1); 
    } 
}

.check-list-price { 
    list-style: none; 
    padding: 0; 
    text-align: left; 
    margin-bottom: 30px; 
}

.check-list-price li { 
    margin-bottom: 10px; 
    color: var(--text-medium); 
    font-size: 0.95rem; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.check-list-price li::before { 
    content: '✓'; 
    color: var(--ds-orange); 
    font-weight: bold; 
}

/* Neue Klassen */
.pricing-grid {
    align-items: center;
}

.pricing-card {
    text-align: center;
}

.popular-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--ds-orange);
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 5px 0;
    letter-spacing: 1px;
}

.pricing-header-popular {
    margin-top: 20px;
}

.btn-outline {
    background: transparent;
    border: 1px solid #fff;
    width: 100%;
}

.btn-full {
    width: 100%;
}
/* =========================================
   CONSULTING PAGE - Zusätzliche Klassen
   ========================================= */

.btn-glow-spaced {
    margin-top: 60px;
}

/* =========================================
   MINIMAL COOKIE BANNER - Performance optimiert
   ========================================= */

.cb-hidden {
  display: none !important;
}

#cb {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(1, 1, 1, 0.98);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 77, 0, 0.3);
  padding: 20px;
  z-index: 9999;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
  animation: slideUp 0.4s ease;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.cb-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cb-content p {
  color: var(--text-medium);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
}

.cb-content strong {
  color: var(--text-bright);
}

.cb-content a {
  color: var(--ds-orange);
  text-decoration: underline;
}

.cb-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cb-btns button {
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid rgba(255, 77, 0, 0.5);
  background: var(--accent-gradient);
  color: white;
  transition: transform 0.2s;
}

.cb-btns button:hover {
  transform: translateY(-2px);
}

.cb-btns .cb-sec {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--text-medium);
}

/* Mobile */
@media (max-width: 768px) {
  .cb-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .cb-btns {
    width: 100%;
  }
  
  .cb-btns button {
    flex: 1;
  }
}