:root {
            --bg-deep: #030305;              
            --bg-card-tint: rgba(10, 10, 18, 0.7); 
            --text-main: #f0f0f5;           
            --text-muted: #9595a5;          
            --color-blue: #0088ff;          
            --color-violet: #7700ff;        
            --color-magenta: #ff0077; 
            --color-cyan: #00e5ff;
            --color-green: #00ff88;
            --color-deepblue: #0033ff;      
            
            --gradient-1: linear-gradient(135deg, var(--color-blue), var(--color-violet));
            --gradient-2: linear-gradient(135deg, var(--color-violet), var(--color-magenta));
            --gradient-3: linear-gradient(135deg, var(--color-magenta), var(--color-blue));
            --gradient-4: linear-gradient(135deg, var(--color-blue), var(--color-cyan));
            --gradient-5: linear-gradient(135deg, var(--color-deepblue), var(--color-violet));
            --gradient-6: linear-gradient(135deg, var(--color-cyan), var(--color-green));
            
            --font-main: 'Inter', sans-serif;
            --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        html { scroll-behavior: smooth; }
        body {
            margin: 0; padding: 0;
            background-color: var(--bg-deep);
            color: var(--text-main);
            font-family: var(--font-main);
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            position: relative;
        }

        /* ANIMIERTER HINTERGRUND (Farbige Orbs) */
        .background-orbs {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1; overflow: hidden; filter: blur(120px); opacity: 0.6; pointer-events: none;
        }
        .orb { position: absolute; border-radius: 50%; }
        .orb-1 { top: -10%; left: -10%; width: 50vw; height: 50vw; background: var(--color-blue); opacity: 0.3; animation: float1 25s infinite alternate; }
        .orb-2 { top: 40%; right: -15%; width: 40vw; height: 40vw; background: var(--color-violet); opacity: 0.25; animation: float2 30s infinite alternate; }
        .orb-3 { bottom: -15%; left: 10%; width: 35vw; height: 35vw; background: var(--color-magenta); opacity: 0.2; animation: float3 28s infinite alternate; }

        @keyframes float1 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(10vw, 5vh, 0); } }
        @keyframes float2 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-10vw, -5vh, 0); } }
        @keyframes float3 { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(5vw, -10vh, 0); } }

        /* NEU: Canvas für das animierte Netzwerk */
        #networkCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0; /* Liegt über den Orbs (-1) aber unter dem Container (1) */
            pointer-events: none; /* Klicks gehen durch das Canvas hindurch */
        }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; }

        /* HERO SECTION */
        header.hero { 
            height: 100vh; display: flex; flex-direction: column; 
            justify-content: center; align-items: flex-start; position: relative; 
        }
        header.hero h1 {
            font-size: clamp(3.5rem, 11vw, 8rem); 
            font-weight: 800; margin: 0; line-height: 0.95; letter-spacing: -0.05em; 
            background: linear-gradient(180deg, #ffffff 20%, #a0a0b5 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            overflow: visible; padding-right: 0.1em; word-wrap: break-word;
        }
        header.hero .subtitle {
            font-size: clamp(1.1rem, 2.5vw, 1.6rem); color: var(--text-muted); margin-top: 2.5rem; max-width: 750px; font-weight: 300;
            border-left: 3px solid transparent; padding-left: 2rem; border-image: var(--gradient-1) 1;
        }

        .scroll-arrow {
            position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
            width: 30px; height: 30px; opacity: 0.6; cursor: pointer; transition: 0.3s;
        }
        .scroll-arrow svg { fill: none; stroke: var(--text-main); stroke-width: 2px; animation: bounce 2s infinite; }
        @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } }

        /* EXPERTISE GRID */
        section#expertise { padding: 10rem 0 5rem 0; }
        h2.section-title { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; color: var(--text-muted); margin-bottom: 5rem; text-align: center; }
        h2.section-title::after { content: ""; display: block; width: 60px; height: 2px; background: var(--gradient-1); margin: 1.5rem auto 0; }

        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; }
        
        /* CARD DESIGN MIT RUNDEN ECKEN FIX */
        .card {
            background-color: var(--bg-card-tint); padding: 3.5rem 2.5rem; border-radius: 24px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
            transition: var(--transition); position: relative;
            display: flex; flex-direction: column; backdrop-filter: blur(15px);
        }
        .card::after {
            content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 2px;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor; mask-composite: exclude;
            opacity: 0; transition: var(--transition); pointer-events: none;
        }
        .card:hover { transform: translateY(-8px); }
        .card:hover::after { opacity: 1; }
        
        .card h3 { font-size: 1.5rem; color: var(--text-main); margin-bottom: 1.5rem; font-weight: 700; }
        .card h3 span.highlight { color: var(--color-blue); }
        .card p { color: var(--text-muted); margin: 0; font-size: 1.05rem; flex-grow: 1; }

        /* Farben der 6 Karten */
        .card:nth-child(1)::after { background: var(--gradient-1); }
        .card:nth-child(2)::after { background: var(--gradient-2); }
        .card:nth-child(2) h3 span.highlight { color: var(--color-violet); }
        .card:nth-child(3)::after { background: var(--gradient-3); }
        .card:nth-child(3) h3 span.highlight { color: var(--color-magenta); }
        .card:nth-child(4)::after { background: var(--gradient-4); }
        .card:nth-child(4) h3 span.highlight { color: var(--color-cyan); }
        .card:nth-child(5)::after { background: var(--gradient-5); }
        .card:nth-child(5) h3 span.highlight { color: var(--color-deepblue); }
        .card:nth-child(6)::after { background: var(--gradient-6); }
        .card:nth-child(6) h3 span.highlight { color: var(--color-green); }

        /* AGENTUR SEKTION */
        section#agency { padding: 8rem 0; border-top: 1px solid rgba(255, 255, 255, 0.05); text-align: center; }
        .agency-content {
            max-width: 800px; margin: 0 auto; padding: 3.5rem;
            background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 100%);
            border-radius: 32px; border: 1px solid rgba(255,255,255,0.05);
        }
        .agency-content h2 { font-size: 2rem; font-weight: 800; margin-bottom: 1.5rem; }
        .agency-content p { font-size: 1.2rem; color: var(--text-muted); margin-bottom: 2.5rem; font-weight: 300; }
        .agency-link {
            font-size: 0.9rem; font-weight: 700; color: var(--text-main); text-decoration: none;
            text-transform: uppercase; letter-spacing: 0.2em; border-bottom: 2px solid var(--color-blue);
            padding-bottom: 5px; transition: 0.3s;
        }
        .agency-link:hover { color: var(--color-blue); border-color: var(--text-main); }

        /* KONTAKT */
        section#contact { padding: 8rem 0; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.05); }
        section#contact h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1.5rem; font-weight: 800; }
        .contact-grid { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 3rem; }
        .contact-btn {
            display: inline-block; font-size: 1rem; font-weight: 700; color: #fff; text-decoration: none;
            padding: 1.2rem 2.5rem; border-radius: 50px; transition: var(--transition);
        }
        .btn-email { background: var(--gradient-1); box-shadow: 0 10px 20px rgba(0, 136, 255, 0.2); }
        .btn-phone { background: var(--gradient-6); color: #000; box-shadow: 0 10px 20px rgba(0, 255, 136, 0.2); }
        .contact-btn:hover { transform: translateY(-3px); filter: brightness(1.1); }

        /* FOOTER */
        footer { padding: 4rem 0; text-align: center; font-size: 0.85rem; color: var(--text-muted); }
        footer a { color: var(--text-main); text-decoration: none; margin: 0 1rem; transition: 0.3s; }
        footer a:hover { color: var(--color-blue); }

        /* MOBILE OPTIMIERUNGEN */
        @media (max-width: 768px) {
            header.hero { height: 100vh; height: 100dvh; padding: 0; }
            .scroll-arrow { bottom: 30px; }
            .agency-content { padding: 2rem; }
            
            .contact-grid { flex-direction: column; align-items: center; gap: 1rem; }
            .contact-btn { width: 100%; max-width: 300px; text-align: center; }

            .background-orbs { filter: blur(60px); opacity: 0.7; }
            .orb-1 { width: 100vw; height: 100vw; top: -10%; left: -20%; }
            .orb-2 { width: 90vw; height: 90vw; top: 40%; right: -20%; }
            .orb-3 { width: 80vw; height: 80vw; bottom: 0; left: 0; }
        }