@extends('layouts.app')

@section('content')

    <!-- =============================================
         1. HERO SECTION
         ============================================= -->
    <header class="hero" style="padding: 160px 5% 80px; text-align: center; background: radial-gradient(circle at 50% 0%, #eff6ff 0%, #ffffff 70%);">
        <div class="container reveal active">
            <span style="background: #e0f2fe; color: var(--primary); padding: 8px 20px; border-radius: 50px; font-weight: 800; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; display: inline-block; margin-bottom: 30px;">
                Engineering & Development
            </span>
            <h1 style="font-size: clamp(3.5rem, 9vw, 6rem); font-weight: 900; line-height: 1; letter-spacing: -3px; margin-bottom: 30px; color: var(--text-main);">
                Software & Hardware.<br>
                <span style="color: var(--primary);">Made by Kotsch.tech</span>
            </h1>
            <p style="font-size: 1.4rem; color: var(--text-muted); max-width: 800px; margin: 0 auto 50px; line-height: 1.6;">
                Willkommen im Hub. Hier findest du meine Software-Projekte, Apps und Hardware-Entwicklungen. Alles aus einer Hand.
            </p>
        </div>
    </header>

  






<!-- =============================================
     3. WINDOWS SECTION (Ultimate PC Simulation - FINAL)
     ============================================= -->
<section id="windows" style="background: #f8fafc; padding: 140px 5%; overflow: hidden;">
    <div class="container">
        <div class="win-flex-layout">
            
            <!-- LINKER BEREICH: TEXT -->
            <div class="win-text-content reveal active">
                <span class="label">Desktop Ecosystem</span>
                <h2 style="font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 25px; letter-spacing: -2px;">Windows in <span style="color: #2563eb;">Perfektion.</span></h2>
                <p class="lead" style="font-size: 1.25rem; color: #64748b; margin-bottom: 40px;">
                    Native Software, entwickelt für maximale Effizienz. Erlebe meine Tools live in der Simulation – pfeilschnell, sauber strukturiert und bereit für deinen Workflow.
                </p>
                <a href="/windows" class="btn-win-main">ALLE TOOLS ENTDECKEN</a>
            </div>

            <!-- RECHTER BEREICH: DER HIGH-END PC -->
            <div class="pc-showroom">
                <div class="monitor-hardware">
                    <div class="monitor-screen">
                        <div class="win-desktop">
                            
                            <!-- Animierte Maus -->
                            <div id="sim-mouse" class="sim-mouse">
                                <svg width="18" height="18" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1 1V14.5L5 11L8.5 18L11 16.5L7.5 9.5L12.5 8.5L1 1Z" fill="black" stroke="white" stroke-width="2"/>
                                </svg>
                                <div class="click-pulse"></div>
                            </div>

                            <!-- Desktop Icons -->
                            <div class="win-icon-grid">
                                <div class="win-icon" id="target-commander">
                                    <div class="icon-shell blue"><i class="fas fa-terminal"></i></div>
                                    <span>Commander</span>
                                </div>
                                <div class="win-icon" id="target-cleaner">
                                    <div class="icon-shell green"><i class="fas fa-broom"></i></div>
                                    <span>Cleaner</span>
                                </div>
                                <div class="win-icon" id="target-notes">
                                    <div class="icon-shell gold"><i class="fas fa-sticky-note"></i></div>
                                    <span>Notes</span>
                                </div>
                            </div>

                            <!-- Das simulierte Fenster -->
                            <div id="sim-window" class="sim-window">
                                <div class="sim-win-header">
                                    <div class="sim-win-title">
                                        <i class="fas fa-window-maximize"></i> 
                                        <span id="sim-win-label">SOFTWARE</span>
                                    </div>
                                    <div class="sim-win-controls">
                                        <span class="dot"></span>
                                        <span class="dot"></span>
                                        <div id="sim-win-close" class="dot-close"></div>
                                    </div>
                                </div>
                                <div class="sim-win-body">
                                    <iframe id="sim-iframe" src="about:blank" style="width: 100%; height: 100%; border: none; overflow: hidden;"></iframe>
                                </div>
                            </div>

                            <!-- Windows Taskleiste -->
                            <div class="sim-taskbar">
                                <div class="taskbar-center">
                                    <i class="fab fa-windows" style="color: #2563eb;"></i>
                                    <i class="fas fa-search"></i>
                                    <i class="fas fa-folder-open" style="color: #facc15;"></i>
                                </div>
                                <div id="sim-clock">12:00</div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="monitor-stand"></div>
                <div class="monitor-base"></div>
            </div>

        </div>
    </div>
</section>

<style>
    /* 1. Layout & Struktur */
    .win-flex-layout { display: flex; align-items: center; gap: 80px; max-width: 1400px; margin: 0 auto; }
    .win-text-content { flex: 1; }
    .pc-showroom { flex: 1.3; position: relative; display: flex; flex-direction: column; align-items: center; }

    /* 2. Monitor Hardware Design */
    .monitor-hardware { 
        width: 100%; background: #0f172a; padding: 12px; border-radius: 24px; 
        border: 2px solid #334155; box-shadow: 0 50px 100px -20px rgba(0,0,0,0.3); 
    }
    .monitor-screen { width: 100%; height: 420px; background: #000; border-radius: 12px; overflow: hidden; position: relative; }
    .monitor-stand { width: 80px; height: 50px; background: #1e293b; margin-top: -2px; }
    .monitor-base { width: 220px; height: 10px; background: #0f172a; border-radius: 10px 10px 0 0; }

    /* 3. Desktop Oberfläche */
    .win-desktop { 
        width: 100%; height: 100%; background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%); 
        position: relative; padding: 25px; 
    }
    .win-icon-grid { display: grid; grid-template-columns: repeat(2, 70px); gap: 30px; }
    .win-icon { text-align: center; color: white; font-size: 0.6rem; font-weight: 700; cursor: default; }
    .icon-shell { 
        width: 48px; height: 48px; border-radius: 12px; margin: 0 auto 8px; 
        display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .icon-shell.blue { background: #2563eb; }
    .icon-shell.green { background: #10b981; }
    .icon-shell.gold { background: #f59e0b; }

    /* 4. Fenster Design (FIXED) */
    .sim-window { 
        position: absolute; top: 10%; left: 10%; width: 82%; height: 78%; 
        background: white; border-radius: 12px; box-shadow: 0 40px 80px rgba(0,0,0,0.5); 
        display: none; flex-direction: column; z-index: 10; overflow: hidden; 
        border: 1px solid rgba(255,255,255,0.4);
    }
    .sim-win-header { 
        background: #f1f5f9; height: 38px; display: flex; justify-content: space-between; 
        align-items: center; padding: 0 15px; border-bottom: 1px solid #e2e8f0;
    }
    .sim-win-title { 
        font-size: 0.65rem; font-weight: 800; color: #1e293b; 
        display: flex; align-items: center; gap: 10px; letter-spacing: 1px;
    }
    .sim-win-controls { display: flex; gap: 8px; }
    .sim-win-controls .dot { width: 11px; height: 11px; border-radius: 50%; background: #e2e8f0; }
    .dot-close { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; cursor: pointer; }

    .sim-win-body { flex: 1; background: white; overflow: hidden; }

    /* 5. Taskleiste */
    .sim-taskbar { 
        position: absolute; bottom: 0; left: 0; width: 100%; height: 42px; 
        background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px); 
        display: flex; align-items: center; padding: 0 20px;
    }
    .taskbar-center { flex: 1; display: flex; justify-content: center; gap: 20px; font-size: 1.1rem; }
    #sim-clock { font-size: 0.7rem; font-weight: 700; color: #0f172a; }

    /* 6. Maus & Animation */
    .sim-mouse { 
        position: absolute; top: 85%; left: 85%; z-index: 1000; 
        transition: all 1.2s cubic-bezier(0.45, 0, 0.55, 1); pointer-events: none;
    }
    .click-pulse { 
        position: absolute; top: 0; left: 0; width: 30px; height: 30px; 
        background: rgba(37, 99, 235, 0.4); border-radius: 50%; 
        transform: translate(-30%, -30%) scale(0); 
    }
    .clicked .click-pulse { animation: clickWave 0.4s ease-out; }
    @keyframes clickWave { 0% { transform: translate(-30%, -30%) scale(0); opacity: 1; } 100% { transform: translate(-30%, -30%) scale(1.6); opacity: 0; } }

    /* 7. Button */
    .btn-win-main { 
        background: #2563eb; color: white !important; padding: 18px 45px; 
        border-radius: 12px; text-decoration: none; font-weight: 800; 
        display: inline-block; margin-top: 30px; box-shadow: 0 10px 25px rgba(37,99,235,0.2); 
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const mouse = document.getElementById('sim-mouse');
        const win = document.getElementById('sim-window');
        const iframe = document.getElementById('sim-iframe');
        const label = document.getElementById('sim-win-label');
        
        const apps = [
            { id: 'target-commander', url: '/windows/commander?view=monitor', name: 'Commander' },
            { id: 'target-cleaner', url: '/windows/cleaner?view=monitor', name: 'Cleaner' },
            { id: 'target-notes', url: '/windows/notes?view=monitor', name: 'Notes' }
        ];
        
        let appIdx = 0;

        // Vorladen der ersten App
        iframe.src = apps[0].url;

        async function moveAndClick(targetId, isClose = false) {
            const target = document.getElementById(targetId);
            const rect = target.getBoundingClientRect();
            const parent = document.querySelector('.win-desktop').getBoundingClientRect();
            
            // Bewegung zur Mitte
            mouse.style.left = (rect.left - parent.left + rect.width/2) + 'px';
            mouse.style.top = (rect.top - parent.top + rect.height/2) + 'px';

            await new Promise(r => setTimeout(r, 1300));
            
            // Klick-Effekt
            mouse.classList.add('clicked');
            setTimeout(() => mouse.classList.remove('clicked'), 400);

            if(!isClose) {
                // Fenster öffnen
                label.innerText = apps[appIdx].name.toUpperCase();
                iframe.src = apps[appIdx].url;
                win.style.display = 'flex';
                
                await new Promise(r => setTimeout(r, 10000));
                moveAndClick('sim-win-close', true);
            } else {
                // Fenster schließen
                win.style.display = 'none';
                appIdx = (appIdx + 1) % apps.length;
                
                // Nächste App im Hintergrund laden
                setTimeout(() => {
                    iframe.src = apps[appIdx].url;
                    moveAndClick(apps[appIdx].id);
                }, 1500);
            }
        }

        // Start-Delay
        setTimeout(() => moveAndClick(apps[appIdx].id), 2000);

        // Uhrzeit Update
        setInterval(() => {
            const now = new Date();
            document.getElementById('sim-clock').innerText = now.getHours().toString().padStart(2, '0') + ":" + now.getMinutes().toString().padStart(2, '0');
        }, 1000);
    });
</script>
	
	
	
	
<!-- =============================================
         X. APPLE ECOSYSTEM (High-End Stage Version)
         ============================================= -->
    <section id="apple" style="padding: 160px 5%; background: #ffffff; overflow: hidden;">
        <div class="container reveal">
            <div class="apple-grid-layout">
                
                <!-- LINKER BEREICH: TEXT & AKTION -->
                <div class="apple-text-side">
                    <span class="label" style="color: #007aff;">Native Development</span>
                    <h2 style="font-size: 3.5rem; font-weight: 800; line-height: 1.1; margin-bottom: 25px; letter-spacing: -2px;">
                        Apps für <br><span>iOS & macOS.</span>
                    </h2>
                    <p class="lead" style="font-size: 1.25rem; color: #64748b; margin-bottom: 45px;">
                        Vom iPhone in der Hosentasche bis zum MacBook auf dem Schreibtisch. Ich entwickle Applikationen mit Swift und SwiftUI, die durch Geschwindigkeit und Apple-typische Ästhetik überzeugen.
                    </p>
                    
                    <!-- Feature Liste -->
                    <div style="margin-bottom: 50px; display: grid; gap: 20px;">
                        <div style="display: flex; align-items: center; gap: 15px;">
                            <div class="apple-icon-box"><i class="fab fa-swift"></i></div>
                            <div><strong style="display:block;">Swift 6 Core</strong><span style="color:#64748b; font-size: 0.9rem;">Hocheffizienter, nativer Programmcode.</span></div>
                        </div>
                        <div style="display: flex; align-items: center; gap: 15px;">
                            <div class="apple-icon-box"><i class="fas fa-sync-alt"></i></div>
                            <div><strong style="display:block;">iCloud Ecosystem</strong><span style="color:#64748b; font-size: 0.9rem;">Nahtloser Datenabgleich zwischen allen Geräten.</span></div>
                        </div>
                    </div>

                    <!-- DER FIX FÜR DEN BUTTON (Schwarz, wie die anderen) -->
                    <a href="/apple" 
                       style="background-color: #0f172a !important; 
                              color: #ffffff !important; 
                              padding: 20px 45px !important; 
                              border-radius: 12px !important; 
                              text-decoration: none !important; 
                              font-weight: 800 !important; 
                              font-size: 1rem !important; 
                              display: inline-flex !important; 
                              align-items: center;
                              gap: 12px;
                              box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
                              transition: 0.3s !important;
                              border: none !important;"
                       onmouseover="this.style.backgroundColor='#2563eb'; this.style.transform='translateY(-3px)'"
                       onmouseout="this.style.backgroundColor='#0f172a'; this.style.transform='translateY(0)'">
                        APPLE PORTFOLIO ÖFFNEN <i class="fas fa-chevron-right" style="font-size: 0.8rem;"></i>
                    </a>
                </div>

                <!-- RECHTER BEREICH: DIE GERÄTE (GETRENNT) -->
                <div class="apple-visual-stage">
                    
                    <!-- 1. MACBOOK (Links positioniert) -->
                    <div class="macbook-3d">
                        <div class="mac-frame">
                            <div class="mac-screen">
                                <div class="mac-app-content">
                                    <div class="mac-ui-header">
                                        <div class="mac-buttons"><span></span><span></span><span></span></div>
                                    </div>
                                    <div class="mac-ui-body">
                                        <div class="ui-chart">
                                            <div class="ui-bar" style="height: 60%"></div>
                                            <div class="ui-bar active" style="height: 90%"></div>
                                            <div class="ui-bar" style="height: 40%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mac-base"></div>
                    </div>

                    <!-- 2. IPHONE (Rechts positioniert, schwebt) -->
                    <div class="iphone-3d">
                        <div class="iphone-frame-ultra">
                            <div class="iphone-screen-content">
                                <div class="ios-island"></div>
                                <div class="ios-app-ui">
                                    <div class="ios-card"></div>
                                    <div class="ios-circle"></div>
                                    <div class="ios-rows"><span></span><span></span></div>
                                </div>
                            </div>
                        </div>
                        <!-- Schwebendes Glaselement für die Animation -->
                        <div class="glass-status-card">
                            <i class="fas fa-check-circle"></i> SYNC_OK
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </section>

    <style>
        /* GRID LAYOUT */
        .apple-grid-layout {
            display: grid;
            grid-template-columns: 1fr 1.6fr;
            gap: 80px;
            align-items: center;
        }

        .apple-icon-box {
            width: 48px; height: 48px; background: #f2f2f7; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.4rem; color: #007aff;
        }

        /* --- VISUAL STAGE --- */
        .apple-visual-stage {
            position: relative;
            height: 550px;
            display: flex;
            align-items: center;
            justify-content: space-between; /* Erzwingt Abstand zwischen den Geräten */
        }

        /* MACBOOK */
        .macbook-3d { width: 480px; position: relative; z-index: 1; transition: 0.5s; }
        .mac-frame { background: #1c1c1e; padding: 8px; border-radius: 14px; border: 1px solid #3a3a3c; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.3); }
        .mac-screen { height: 280px; background: #000; border-radius: 6px; overflow: hidden; border: 1px solid #2c2c2e; }
        .mac-ui-header { height: 30px; background: #161617; display: flex; align-items: center; padding: 0 12px; }
        .mac-buttons { display: flex; gap: 6px; }
        .mac-buttons span { width: 8px; height: 8px; border-radius: 50%; background: #333; }
        .mac-ui-body { padding: 30px; display: flex; align-items: flex-end; height: calc(100% - 30px); }
        .ui-chart { display: flex; gap: 10px; height: 120px; width: 100%; align-items: flex-end; }
        .ui-bar { flex: 1; background: #1a1a1a; border-radius: 4px; }
        .ui-bar.active { background: #007aff; box-shadow: 0 0 15px #007aff; }
        .mac-base { height: 10px; background: #3a3a3c; border-radius: 0 0 20px 20px; width: 110%; margin-left: -5%; border-top: 1px solid #555; }

        /* IPHONE */
        .iphone-3d { width: 200px; height: 410px; position: relative; z-index: 5; animation: floatApple 6s infinite ease-in-out; }
        .iphone-frame-ultra { 
            width: 100%; height: 100%; background: #000; border-radius: 40px; 
            padding: 6px; border: 1px solid #1c1c1e; box-shadow: 0 30px 60px rgba(0,0,0,0.4);
        }
        .iphone-screen-content { width: 100%; height: 100%; background: #fff; border-radius: 35px; position: relative; overflow: hidden; padding: 25px; }
        .ios-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 70px; height: 20px; background: #000; border-radius: 20px; }
        .ios-card { height: 100px; background: #f2f2f7; border-radius: 18px; margin-top: 30px; }
        .ios-circle { width: 80px; height: 80px; border: 5px solid #007aff; border-top-color: #f2f2f7; border-radius: 50%; margin: 30px auto; animation: spin 4s linear infinite; }
        .ios-rows span { display: block; height: 10px; background: #f2f2f7; border-radius: 5px; margin-bottom: 10px; }

        /* GADGET: GLASS CARD */
        .glass-status-card {
            position: absolute; top: 20%; left: -60px; background: rgba(255,255,255,0.7);
            backdrop-filter: blur(10px); padding: 12px 20px; border-radius: 50px;
            border: 1px solid white; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            font-weight: 800; font-size: 0.7rem; color: #007aff; z-index: 10;
        }

        /* ANIMATIONS */
        @keyframes floatApple { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
        @keyframes spin { 100% { transform: rotate(360deg); } }

        /* RESPONSIVE */
        @media (max-width: 1200px) {
            .macbook-3d { width: 380px; }
            .iphone-3d { width: 170px; height: 350px; }
            .apple-grid-layout { gap: 40px; }
        }

        @media (max-width: 900px) {
            .apple-grid-layout { grid-template-columns: 1fr !important; text-align: center; }
            .apple-visual-stage { height: 450px; justify-content: center; margin-bottom: 50px; }
            .macbook-3d { position: absolute; left: 0; }
            .iphone-3d { position: absolute; right: 0; }
            .apple-text-side a { width: 100%; justify-content: center; }
        }
    </style>
	
	
	
	
	

    <!-- =============================================
         4. ANDROID SECTION
         ============================================= -->
    <section id="android" class="bg-gray section-android">
        <div class="container reveal">
            <div class="grid-2-col-android" style="display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center;">
                <!-- PHONE MOCKUP -->
                <div style="display: flex; justify-content: center;">
                    <div class="phone-mockup" style="width: 300px; height: 600px; background: #1e293b; border-radius: 45px; border: 10px solid #334155; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center;">
                        <!-- Screen -->
                        <div style="width: 100%; height: 100%; background: linear-gradient(135deg, #10b981, #064e3b); border-radius: 35px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white;">
                            <!-- BRANDING -->
                            <i class="fab fa-android" style="font-size: 5rem; margin-bottom: 20px;"></i>
                            <h3 style="font-weight: 900; letter-spacing: 2px;">KOTSCH.TECH</h3>
                            <span style="background: rgba(255,255,255,0.2); padding: 5px 15px; border-radius: 50px; font-size: 0.7rem; margin-top: 10px;">MOBILE SUITE</span>
                        </div>
                        <!-- Notch -->
                        <div style="position: absolute; top: 0; width: 120px; height: 30px; background: #334155; border-radius: 0 0 20px 20px;"></div>
                    </div>
                </div>
                <!-- TEXT -->
                <div>
                    <span class="label" style="color: #10b981;">Mobile Universe</span>
                    <h2>Android Apps.</h2>
                    <p class="lead">Smarte Werkzeuge für die Hosentasche. Werbefrei, sauber und extrem nützlich.</p>
                    
                    <div style="margin-bottom: 40px; display: grid; gap: 20px;">
                        <div style="display: flex; align-items: center; gap: 15px;">
                            <i class="fas fa-lightbulb" style="color: #10b981; font-size: 1.5rem;"></i>
                            <div><strong style="display:block;">Lumina Pro</strong><span style="color:var(--text-muted);">Profi Taschenlampe</span></div>
                        </div>
                        <div style="display: flex; align-items: center; gap: 15px;">
                            <i class="fas fa-pills" style="color: #10b981; font-size: 1.5rem;"></i>
                            <div><strong style="display:block;">MedTimer</strong><span style="color:var(--text-muted);">Zuverlässiger Medikamenten-Tracker</span></div>
                        </div>
                        <div style="display: flex; align-items: center; gap: 15px;">
                            <i class="fas fa-calendar-check" style="color: #10b981; font-size: 1.5rem;"></i>
                            <div><strong style="display:block;">CorePlanner</strong><span style="color:var(--text-muted);">Tagesplanung leicht gemacht</span></div>
                        </div>
                    </div>

                    <a href="/android" class="btn-nav" style="background: #10b981;">Alle Apps im Store</a>
                </div>
            </div>
        </div>
    </section>

<!-- =============================================
         5. AUTOMATED WEBDESIGN SHOWROOM
         ============================================= -->
    <section id="webdesign" class="section-webdesign" style="background: white;">
        <div class="container reveal">
            <div class="grid-webdesign" style="display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: center;">
                
                <!-- LINKER BEREICH: TEXT & BUTTONS -->
                <div>
                    <span class="label" style="color: var(--accent);">Digital Presence</span>
                    <h2 style="font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin-bottom: 25px;">Webdesign Deluxe.</h2>
                    <p class="lead" style="font-size: 1.2rem; color: var(--text-gray); margin-bottom: 40px;">
                        Erleben Sie modernstes Webdesign in Aktion. Mein Simulator führt Sie durch exklusive Live-Demos – handgecoded, pfeilschnell und optimiert für KOTSCH.TECH Performance Standards.
                    </p>

                    <ul style="list-style: none; margin-bottom: 40px; display: grid; gap: 15px; padding-left: 0;">
                        <li style="display: flex; align-items: center; gap: 15px; font-weight: 600; color: var(--text-dark);">
                            <i class="fas fa-check-circle" style="color: var(--accent);"></i> Vollautomatische Live-Vorschau
                        </li>
                        <li style="display: flex; align-items: center; gap: 15px; font-weight: 600; color: var(--text-dark);">
                            <i class="fas fa-check-circle" style="color: var(--accent);"></i> Responsive & SEO Ready
                        </li>
                        <li style="display: flex; align-items: center; gap: 15px; font-weight: 600; color: var(--text-dark);">
                            <i class="fas fa-check-circle" style="color: var(--accent);"></i> Individuelle Framework-Lösungen
                        </li>
                    </ul>

                    <div class="webdesign-buttons" style="display: flex; flex-wrap: wrap; gap: 15px;">
                        <a href="/kontakt?subject=Webdesign" class="btn-nav" style="background: var(--accent); padding: 16px 35px; border-radius: 12px; font-size: 1rem; box-shadow: 0 10px 20px rgba(124, 58, 237, 0.2);">
                            Projekt starten
                        </a>
                        <a href="/webdesign" class="btn-nav" style="background: white; border: 2px solid #e2e8f0; color: var(--text-dark); padding: 16px 35px; border-radius: 12px; font-size: 1rem;">
                            Alle Vorlagen ansehen
                        </a>
                    </div>
                </div>

                <!-- RECHTER BEREICH: AUTOMATISCHER BROWSER-SIMULATOR -->
                <div class="webdesign-sim" style="position: relative;">
                    <!-- Browser Shell -->
                    <div style="background: white; border-radius: 16px; box-shadow: 0 40px 80px -20px rgba(0,0,0,0.15); border: 1px solid #cbd5e1; overflow: hidden;">
                        
                        <!-- Top Bar (Address Bar) -->
                        <div style="background: #f1f5f9; padding: 15px 20px; display: flex; align-items: center; border-bottom: 1px solid #e2e8f0;">
                            <div style="display: flex; gap: 8px; margin-right: 20px;">
                                <div style="width: 12px; height: 12px; background: #ef4444; border-radius: 50%;"></div>
                                <div style="width: 12px; height: 12px; background: #f59e0b; border-radius: 50%;"></div>
                                <div style="width: 12px; height: 12px; background: #10b981; border-radius: 50%;"></div>
                            </div>
                            <!-- Die "Tipp"-Leiste -->
                            <div class="webdesign-addressbar" style="background: white; flex: 1; padding: 8px 15px; border-radius: 6px; font-size: 0.85rem; color: var(--text-gray); font-family: 'Courier New', Courier, monospace; border: 1px solid #e2e8f0; display: flex; align-items: center; min-height: 36px; min-width: 0;">
                                <i class="fas fa-lock" style="color: #10b981; margin-right: 10px; font-size: 0.7rem;"></i>
                                <span style="white-space: nowrap;">https://kotsch.tech/demo/</span><span id="auto-url" style="color: var(--text-dark); font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></span><span class="typing-cursor">|</span>
                            </div>
                        </div>

                        <!-- Iframe Viewport -->
                        <div class="webdesign-iframe-viewport" style="height: 480px; background: #f8fafc; position: relative;">
                            <iframe id="auto-iframe" src="about:blank" style="width: 100%; height: 100%; border: none; transition: opacity 0.5s ease;"></iframe>
                            
                            <!-- Overlay Loader (erscheint beim "Laden") -->
                            <div id="iframe-loader" style="position: absolute; inset: 0; background: white; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.5s;">
                                <div style="text-align: center;">
                                    <i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: var(--accent); margin-bottom: 15px;"></i>
                                    <p style="font-size: 0.8rem; color: var(--text-gray); font-weight: 700; text-transform: uppercase; letter-spacing: 1px;">Warte auf Verbindung...</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Floating Indicator (Dynamic Text) -->
                    <div id="demo-indicator" style="position: absolute; bottom: -20px; right: 20px; background: var(--text-dark); color: white; padding: 10px 20px; border-radius: 10px; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; box-shadow: 0 10px 20px rgba(0,0,0,0.2);">
                        
                    </div>
                </div>

            </div>
        </div>
    </section>

    <style>
        .typing-cursor {
            color: var(--accent);
            font-weight: bold;
            animation: blink 0.8s infinite;
        }
        @keyframes blink { 50% { opacity: 0; } }

        /* =========================================================
           RESPONSIVE: WINDOWS / ANDROID / WEBDESIGN GRIDS
           (ohne Inhalte zu ändern)
           ========================================================= */
        @media (max-width: 1100px) {
            .grid-2-col-windows,
            .grid-2-col-android,
            .grid-webdesign {
                gap: 60px !important;
            }
        }

        @media (max-width: 900px) {
            .grid-2-col-windows,
            .grid-2-col-android {
                grid-template-columns: 1fr !important;
            }
            .monitor-wrap {
                order: -1;
            }
            .section-windows,
            .section-android {
                padding: 90px var(--mobile-pad) !important;
            }
        }

        @media (max-width: 768px) {
            .section-windows {
                padding: 80px var(--mobile-pad) !important;
            }

            .section-android {
                padding: 80px var(--mobile-pad) !important;
            }

            .phone-mockup {
                transform: scale(0.92);
                transform-origin: center;
                max-width: 100%;
            }

            /* Monitor: auf Mobile weniger hoch, bleibt proportional */
            .monitor-screen {
                height: 300px !important;
            }

            .grid-webdesign {
                grid-template-columns: 1fr !important;
                gap: 40px !important;
            }

            .webdesign-sim {
                order: 2;
            }

            /* Webdesign Headline auf Mobile */
            #webdesign h2 {
                font-size: 2.4rem !important;
                line-height: 1.15 !important;
            }

            .webdesign-buttons a.btn-nav {
                width: 100%;
                justify-content: center;
            }

            .webdesign-addressbar {
                font-size: 0.78rem !important;
                padding: 8px 10px !important;
            }

            .webdesign-iframe-viewport {
                height: 360px !important;
            }

            #demo-indicator {
                right: 12px !important;
                bottom: -18px !important;
                padding: 10px 14px !important;
                font-size: 0.72rem !important;
                max-width: calc(100% - 24px);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        @media (max-width: 420px) {
            .phone-mockup {
                transform: scale(0.86);
            }
            .monitor-screen {
                height: 270px !important;
            }
            .webdesign-iframe-viewport {
                height: 320px !important;
            }
        }
    </style>

    <script>
        // --- KONFIGURATION DER DEMOS ---
        const demos = [
            { slug: 'fashion', url: '/demo/fashion', name: '' },
            { slug: 'saas', url: '/demo/saas', name: '' },
            { slug: 'agency', url: '/demo/agency', name: '' }
        ];

        let currentIdx = 0;
        const urlDisplay = document.getElementById('auto-url');
        const iframe = document.getElementById('auto-iframe');
        const loader = document.getElementById('iframe-loader');
        const indicator = document.getElementById('demo-indicator');

        // Funktion zum Tippen (Typewriter)
        function typeWriter(text, i, callback) {
            if (i < text.length) {
                urlDisplay.innerHTML += text.charAt(i);
                setTimeout(() => typeWriter(text, i + 1, callback), 100); // Tipp-Geschwindigkeit
            } else {
                setTimeout(callback, 500);
            }
        }

        // Funktion zum Löschen (Backspace)
        function backspace(callback) {
            let text = urlDisplay.innerHTML;
            if (text.length > 0) {
                urlDisplay.innerHTML = text.substring(0, text.length - 1);
                setTimeout(() => backspace(callback), 50); // Lösch-Geschwindigkeit
            } else {
                setTimeout(callback, 500);
            }
        }

        // Der Haupt-Loop
        function startAutomation() {
            const currentDemo = demos[currentIdx];

            // 1. URL tippen
            typeWriter(currentDemo.slug, 0, () => {
                
                // 2. Iframe laden
                loader.style.opacity = '1';
                iframe.src = currentDemo.url;
            

                iframe.onload = () => {
                    loader.style.opacity = '0';
                    
                    // 3. 10 Sekunden warten
                    setTimeout(() => {
                        // 4. Löschen und zum nächsten
                        backspace(() => {
                            currentIdx = (currentIdx + 1) % demos.length;
                            startAutomation();
                        });
                    }, 10000); // 10 Sekunden Pause
                };
            });
        }

        // Start wenn im Sichtfeld (optional) oder direkt
        document.addEventListener('DOMContentLoaded', startAutomation);
    </script>









<!-- =============================================
         8. IT-HILFE & VOR-ORT-SERVICE (Senioren & Privatanwender)
         ============================================= -->
    <section id="support" style="padding: 140px 5%; background: #f8fafc;">
        <div class="container">
            
            <!-- Überschrift-Bereich -->
            <div class="reveal" style="text-align: center; margin-bottom: 80px;">
                <span class="label" style="color: #2563eb; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Persönliche IT-Hilfe</span>
                <h2 style="font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900; margin-top: 15px; line-height: 1.1; color: #0f172a;">
                    Probleme mit dem PC,<br>Handy oder Drucker?
                </h2>
                <p style="margin: 30px auto; max-width: 750px; font-size: 1.25rem; color: #64748b; line-height: 1.6;">
                    Technik kann kompliziert sein. Ich helfe Ihnen dabei, Ihre Geräte wieder fit zu machen – verständlich erklärt, mit viel Geduld und zu fairen Preisen direkt in der Region Sachsen.
                </p>
            </div>

            <!-- Service Karten -->
            <div class="support-grid-system reveal">
                
                <!-- Karte 1: PC -->
                <div class="help-card">
                    <div class="help-icon"><i class="fas fa-desktop"></i></div>
                    <h3>Computer-Hilfe</h3>
                    <p>Ihr Rechner ist langsam oder startet nicht mehr? Ich bereinige Ihr System von Datenmüll und Viren, installiere Windows neu oder richte Programme ein.</p>
                    <ul class="help-list">
                        <li><i class="fas fa-check"></i> Windows-Fehler beheben</li>
                        <li><i class="fas fa-check"></i> System-Reinigung (Speedup)</li>
                        <li><i class="fas fa-check"></i> Daten sicher übertragen</li>
                    </ul>
                </div>

                <!-- Karte 2: Smartphone (Hervorgehoben) -->
                <div class="help-card help-featured">
                    <div class="help-icon" style="background: #eff6ff; color: #2563eb;"><i class="fas fa-mobile-screen-button"></i></div>
                    <h3>Handy & Tablet</h3>
                    <p>Probleme mit WhatsApp, E-Mails oder der Foto-Galerie? Ich erkläre Ihnen Schritt für Schritt, wie Sie Ihr Smartphone sicher und einfach bedienen.</p>
                    <ul class="help-list">
                        <li><i class="fas fa-check"></i> WhatsApp & E-Mail Setup</li>
                        <li><i class="fas fa-check"></i> Fotos auf PC sichern</li>
                        <li><i class="fas fa-check"></i> Bedienung verständlich erklärt</li>
                    </ul>
                </div>

                <!-- Karte 3: Zubehör -->
                <div class="help-card">
                    <div class="help-icon"><i class="fas fa-print"></i></div>
                    <h3>Drucker & WLAN</h3>
                    <p>Das Internet bricht ab oder der Drucker wird nicht gefunden? Ich komme vorbei und sorge für eine stabile Verbindung in Ihrem ganzen Zuhause.</p>
                    <ul class="help-list">
                        <li><i class="fas fa-check"></i> WLAN-Empfang verbessern</li>
                        <li><i class="fas fa-check"></i> Drucker & Scanner einrichten</li>
                        <li><i class="fas fa-check"></i> Smart-TV & Netflix Setup</li>
                    </ul>
                </div>

            </div>

            <!-- Große Anfrage-Box mit dem Button -->
            <div class="reveal" style="text-align: center; margin-top: 80px;">
                <div class="action-box-container">
                    <h3 style="font-size: 1.8rem; font-weight: 800; color: #0f172a; margin-bottom: 20px;">Soll ich Ihnen helfen?</h3>
                    <p style="font-size: 1.1rem; color: #64748b; margin-bottom: 45px;">
                        Keine Sorge: Es gibt keine „dummen Fragen“. <br>
                        Schreiben Sie mir oder rufen Sie an – wir finden eine Lösung.
                    </p>
                    
                    <!-- DER FIX FÜR DEN BUTTON (Schwarz, fett, weißer Text) -->
                    <a href="/it-hilfe" 
                       style="background-color: #0f172a !important; 
                              color: #ffffff !important; 
                              padding: 22px 50px !important; 
                              border-radius: 50px !important; 
                              display: inline-block !important; 
                              font-weight: 800 !important; 
                              text-decoration: none !important; 
                              font-size: 1.2rem !important;
                              text-transform: uppercase !important;
                              letter-spacing: 1px !important;
                              box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
                              border: none !important;
                              cursor: pointer !important;
                              transition: all 0.3s ease !important;"
                       onmouseover="this.style.backgroundColor='#2563eb'; this.style.transform='translateY(-5px)'"
                       onmouseout="this.style.backgroundColor='#0f172a'; this.style.transform='translateY(0)'">
                        MEHR INFOS ZUR IT-HILFE <i class="fas fa-arrow-right" style="margin-left: 10px; color: #2563eb;"></i>
                    </a>
                    
                    <p style="margin-top: 30px; color: #94a3b8; font-size: 0.85rem; font-weight: 600;">
                        <i class="fas fa-map-marker-alt"></i> VOR-ORT-SERVICE IN LICHTENSTEIN & UMGEBUNG
                    </p>
                </div>
            </div>

        </div>
    </section>

    <!-- STYLES NUR FÜR DIESE SEKTION -->
    <style>
        .support-grid-system {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
        }

        .help-card {
            background: white;
            padding: 50px 40px;
            border-radius: 30px;
            border: 1px solid #e2e8f0;
            transition: all 0.4s ease;
            text-align: left;
            display: flex;
            flex-direction: column;
        }

        .help-card:hover {
            transform: translateY(-12px);
            border-color: #2563eb;
            box-shadow: 0 30px 60px -15px rgba(0,0,0,0.05);
        }

        .help-featured {
            border-bottom: 6px solid #2563eb;
        }

        .help-icon {
            width: 60px;
            height: 60px;
            background: #f8fafc;
            color: #0f172a;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin-bottom: 30px;
        }

        .help-card h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 15px; color: #0f172a; }
        .help-card p { font-size: 0.95rem; color: #64748b; line-height: 1.6; margin-bottom: 30px; flex-grow: 1; }

        .help-list { list-style: none; padding: 0; }
        .help-list li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: #0f172a; margin-bottom: 12px; font-size: 0.85rem; }
        .help-list i { color: #10b981; font-size: 1rem; }

        .action-box-container {
            background: white;
            border: 1px solid #e2e8f0;
            padding: 70px 40px;
            border-radius: 40px;
            display: inline-block;
            width: 100%;
            max-width: 900px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.02);
        }

        @media (max-width: 768px) {
            .support-grid-system { grid-template-columns: 1fr; }
            .action-box-container { padding: 40px 20px; }
            h2 { font-size: 2.2rem; }
        }
    </style>
	
	
	
	
	
	
	

<!-- =============================================
         5. HOSTING WAHL (Animiert & Clean)
         ============================================= -->
    <section id="hosting" class="section-hosting" style="padding: 140px 5%; background: var(--bg-gray);">
        <div class="container reveal">
            
            <div style="text-align: center; margin-bottom: 80px;">
                <span class="label" style="color: #7c3aed;">Infrastructure</span>
                <h2 style="font-size: 3.5rem; font-weight: 900; margin-bottom: 20px;">Dein Server.<br>Deine Wahl.</h2>
                <p class="lead" style="margin: 0 auto;">
                    Hosting auf privater Hardware in Sachsen. <br>
                    <strong>100 Mbit/s Anbindung | HDD Speicher | Persönlicher Support</strong>
                </p>
            </div>

            <div class="hosting-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px;">
                
                <!-- WEG 1: FÜR WEBSEITEN -->
                <div class="host-card-white">
                    <div class="host-visual">
                        <div class="cloud-animation">
                            <i class="fas fa-cloud"></i>
                        </div>
                    </div>
                    <div class="host-content">
                        <h3>Managed Web-Hosting</h3>
                        <p>Für Vereine, Portfolios oder Firmen. Ich richte deine Webseite komplett fertig ein. Du musst dich um keine Technik kümmern.</p>
                        <a href="/hosting/web" class="btn-host-action" style="background: var(--accent); color: white;">
                            Zu den Web-Paketen <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

                <!-- WEG 2: FÜR VSERVER & GAMES -->
                <div class="host-card-white">
                    <div class="host-visual">
                        <div class="terminal-animation">
                            <div class="term-head"><span></span><span></span><span></span></div>
                            <div class="term-content">
                                <span class="prompt">$</span> <span class="typing">./start_mc_server.sh</span>
                            </div>
                        </div>
                    </div>
                    <div class="host-content">
                        <h3>vServer & Game-Server</h3>
                        <p>Für Minecraft, Discord-Bots oder eigene Projekte. Du bekommst eine VM oder einen fertig eingerichteten Game-Server.</p>
                        <!-- DER SICHTBARE BUTTON -->
                        <a href="/hosting/vserver" class="btn-host-action" style="background: var(--primary); color: white;">
                            Server konfigurieren <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <style>
        .host-card-white {
            background: white;
            padding: 50px;
            border-radius: 30px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 10px 30px -5px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: 0.4s;
        }
        .host-card-white:hover {
            transform: translateY(-10px);
            border-color: var(--primary);
            box-shadow: 0 20px 50px -10px rgba(37, 99, 235, 0.15);
        }

        .host-visual {
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
        }

        .host-content { text-align: center; }
        .host-content h3 { font-size: 2rem; font-weight: 800; margin-bottom: 15px; color: var(--text-dark); }
        .host-content p { font-size: 1.05rem; color: var(--text-gray); margin-bottom: 40px; }

        .btn-host-action {
            display: block; width: 100%; text-align: center; padding: 18px;
            border-radius: 12px; font-weight: 800; text-decoration: none; transition: 0.3s;
        }
        .btn-host-action:hover { transform: scale(1.03); }

        /* Cloud Animation */
        .cloud-animation {
            font-size: 7rem;
            color: var(--accent);
            animation: cloudFloat 5s ease-in-out infinite;
        }
        @keyframes cloudFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-15px); }
        }

        /* Terminal Animation */
        .terminal-animation {
            width: 100%; max-width: 320px; background: #1e293b;
            border-radius: 10px; overflow: hidden; font-family: 'Courier New', monospace;
            font-size: 0.9rem; box-shadow: 0 15px 30px rgba(0,0,0,0.15);
            border: 1px solid #334155;
        }
        .term-head { background: #334155; padding: 8px 12px; display: flex; gap: 6px; }
        .term-head span { width: 10px; height: 10px; border-radius: 50%; background: #64748b; }
        .term-content { padding: 25px; color: #10b981; text-align: left; }
        .prompt { color: #64748b; }
        .typing { border-right: 3px solid #10b981; animation: typingBlink 0.7s infinite; }
        @keyframes typingBlink { 50% { border-color: transparent; } }

        /* =========================================================
           RESPONSIVE: Hosting Section
           ========================================================= */
        @media (max-width: 900px) {
            .section-hosting {
                padding: 90px var(--mobile-pad) !important;
            }
            .hosting-grid {
                grid-template-columns: 1fr !important;
            }
            .host-card-white {
                padding: 28px !important;
                border-radius: 22px !important;
            }
            .host-content h3 {
                font-size: 1.6rem !important;
            }
            .host-content p {
                font-size: 1rem !important;
            }
            #hosting h2 {
                font-size: 2.4rem !important;
                line-height: 1.15 !important;
            }
        }

        @media (max-width: 420px) {
            .host-visual {
                height: 150px !important;
            }
            .cloud-animation {
                font-size: 5.6rem !important;
            }
        }
    </style>
















<!-- =============================================
         6. HARDWARE SHOP (Premium Grid)
         ============================================= -->
    <section id="tech" class="bg-gray section-tech" style="padding: 120px 5%;">
        <div class="container reveal">
            
            <!-- Header mit Shop-Link -->
            <div style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; flex-wrap: wrap; gap: 20px;">
                <div>
                    <span class="label" style="color: #f59e0b;">Engineering Shop</span>
                    <h2 style="margin: 0; font-size: 3rem; font-weight: 900; color: var(--text-dark);">Hardware & Gear.</h2>
                </div>
                <a href="/shop" style="color: #f59e0b; font-weight: 800; text-decoration: none; border-bottom: 2px solid #f59e0b; padding-bottom: 2px; transition: 0.3s;" onmouseover="this.style.opacity='0.7'" onmouseout="this.style.opacity='1'">
                    ALLES ANZEIGEN <i class="fas fa-arrow-right"></i>
                </a>
            </div>

            <!-- Das neue 3er Grid -->
            <div class="shop-grid">

                <!-- PRODUKT 1: IoT Kit -->
                <div class="shop-card">
                    <div class="badge-new">Bestseller</div>
                    <div class="shop-img">
                        <i class="fas fa-microchip"></i>
                    </div>
                    <div class="shop-details">
                        <span class="shop-cat">Development</span>
                        <h4>ESP32 IoT Starter Kit</h4>
                        <p>Komplett-Set mit OLED, Sensoren & Kabeln.</p>
                        <div class="shop-bottom">
                            <span class="price">12,99 €</span>
                            <a href="/shop/esp32" class="btn-shop">Kaufen</a>
                        </div>
                    </div>
                </div>

                <!-- PRODUKT 2: Tools -->
                <div class="shop-card">
                    <div class="shop-img">
                        <i class="fas fa-screwdriver-wrench"></i>
                    </div>
                    <div class="shop-details">
                        <span class="shop-cat">Werkzeug</span>
                        <h4>Precision Tool Set</h4>
                        <p>48-in-1 Feinmechaniker Set aus S2-Stahl.</p>
                        <div class="shop-bottom">
                            <span class="price">24,50 €</span>
                            <a href="/shop/tools" class="btn-shop">Kaufen</a>
                        </div>
                    </div>
                </div>

                <!-- PRODUKT 3: Smart Meter -->
                <div class="shop-card">
                    <div class="badge-new" style="background: var(--text-dark); color: white;">Neu</div>
                    <div class="shop-img">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <div class="shop-details">
                        <span class="shop-cat">Messtechnik</span>
                        <h4>USB-C Power Meter</h4>
                        <p>Spannung & Ampere in Echtzeit messen.</p>
                        <div class="shop-bottom">
                            <span class="price">18,00 €</span>
                            <a href="/shop/meter" class="btn-shop">Kaufen</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- STYLES FÜR DIESE SEKTION -->
    <style>
        .shop-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .shop-card {
            background: white;
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            transition: all 0.4s ease;
            position: relative;
            display: flex;
            flex-direction: column;
        }

        .shop-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px -5px rgba(0,0,0,0.08);
            border-color: #f59e0b; /* Orange Border bei Hover */
        }

        .badge-new {
            position: absolute; top: 20px; left: 20px;
            background: #fef3c7; color: #b45309;
            font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
            padding: 5px 12px; border-radius: 50px; z-index: 2;
        }

        .shop-img {
            height: 220px;
            background: #fcfcfc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5rem;
            color: #cbd5e1; /* Helles Grau */
            transition: 0.4s;
        }

        .shop-card:hover .shop-img {
            color: #f59e0b; /* Icon wird Orange bei Hover */
        }

        .shop-details {
            padding: 25px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .shop-cat {
            font-size: 0.75rem;
            text-transform: uppercase;
            color: var(--text-gray);
            font-weight: 700;
            margin-bottom: 5px;
            letter-spacing: 1px;
        }

        .shop-card h4 {
            font-size: 1.25rem;
            font-weight: 800;
            margin-bottom: 10px;
            color: var(--text-dark);
        }

        .shop-card p {
            font-size: 0.95rem;
            color: var(--text-gray);
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .shop-bottom {
            margin-top: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f1f5f9;
            padding-top: 20px;
            gap: 14px;
        }

        .price {
            font-size: 1.4rem;
            font-weight: 900;
            color: var(--text-dark);
            white-space: nowrap;
        }

        .btn-shop {
            padding: 10px 20px;
            background: var(--text-dark);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.9rem;
            transition: 0.3s;
            min-width: 110px;
        }

        .btn-shop:hover {
            background: #f59e0b; /* Orange Button bei Hover */
            color: white;
        }

        @media (max-width: 768px) {
            .section-tech { padding: 90px var(--mobile-pad) !important; }
            .shop-grid { grid-template-columns: 1fr; }
            #tech h2 { font-size: 2.2rem !important; }
            .shop-img { height: 200px; font-size: 4.2rem; }
            .shop-details { padding: 20px; }
            .shop-bottom { flex-direction: column; align-items: stretch; }
            .btn-shop { width: 100%; min-height: var(--tap-min); }
            .price { text-align: left; }
        }

        @media (max-width: 420px) {
            .shop-img { height: 180px; font-size: 3.8rem; }
        }
    </style>
	
	
	
	
	
	
	
	

<!-- =============================================
         7. CUSTOM REQUEST (Clean Tech Version)
         ============================================= -->
    <section id="custom" class="section-custom" style="padding: 140px 5%; background: var(--bg-white);">
        <div class="container">
            <div class="custom-dev-wrapper reveal">
                
                <!-- LINKER BEREICH: TEXT -->
                <div class="dev-content">
                    <span class="label">Spezialanfertigungen</span>
                    <h2>Individuelle Lösungen.<br><span>Perfekt umgesetzt.</span></h2>
                    <p class="lead">Du hast eine Idee, für die es noch keine App gibt? Ich entwickle maßgeschneiderte Software-Systeme, die exakt deine Anforderungen erfüllen.</p>
                    
                    <div class="dev-feature-list">
                        <div class="dev-feature">
                            <i class="fas fa-layer-group"></i>
                            <div>
                                <strong>Modularer Aufbau</strong>
                                <p>Erweiterbare Architektur für Windows & Android.</p>
                            </div>
                        </div>
                        <div class="dev-feature">
                            <i class="fas fa-shield-halved"></i>
                            <div>
                                <strong>Security First</strong>
                                <p>Sichere Datenverarbeitung und lokale Verschlüsselung.</p>
                            </div>
                        </div>
                    </div>

                    <a href="/kontakt?subject=Individuelle-Loesung" class="btn-nav" style="background: var(--primary); color: white; padding: 20px 50px; border-radius: 50px; font-size: 1.1rem; display: inline-block; margin-top: 20px;">
                        PROJEKT STARTEN <i class="fas fa-arrow-right" style="margin-left: 10px;"></i>
                    </a>
                </div>

                <!-- RECHTER BEREICH: ISOMETRISCHE 3D GRAFIK -->
                <div class="dev-visual">
                    <div class="iso-container">
                        <!-- Schicht 3: UI -->
                        <div class="iso-layer layer-ui">
                            <i class="fas fa-mobile-screen"></i>
                            <span>Interface</span>
                        </div>
                        <!-- Schicht 2: Logic -->
                        <div class="iso-layer layer-logic">
                            <i class="fas fa-gears"></i>
                            <span>Logic</span>
                        </div>
                        <!-- Schicht 1: Data -->
                        <div class="iso-layer layer-data">
                            <i class="fas fa-database"></i>
                            <span>Data</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!-- SPEZIELLE STYLES FÜR DEN CLEAN TECH LOOK -->
    <style>
        .custom-dev-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 100px;
            align-items: center;
        }

        .dev-content h2 span {
            color: var(--primary);
        }

        .dev-feature-list {
            display: grid;
            gap: 30px;
            margin-bottom: 40px;
        }

        .dev-feature {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        .dev-feature i {
            width: 45px;
            height: 45px;
            background: var(--bg-gray);
            color: var(--primary);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
        }

        .dev-feature strong {
            display: block;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }

        .dev-feature p {
            color: var(--text-gray);
            font-size: 0.95rem;
        }

        /* --- ISOMETRIC 3D GRAPHIC --- */
        .dev-visual {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
        }

        .iso-container {
            position: relative;
            width: 300px;
            height: 300px;
            transform: rotateX(50deg) rotateZ(-45deg);
            transform-style: preserve-3d;
        }

        .iso-layer {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.9);
            border: 2px solid var(--primary);
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.05);
            transition: 0.5s ease;
            color: var(--primary);
        }

        .iso-layer i { font-size: 3rem; margin-bottom: 10px; }
        .iso-layer span { font-weight: 800; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 2px; }

        /* Die Ebenen übereinander stapeln */
        .layer-data { transform: translateZ(0px); opacity: 0.4; }
        .layer-logic { transform: translateZ(100px); opacity: 0.7; }
        .layer-ui { transform: translateZ(200px); background: white; box-shadow: 20px 20px 60px rgba(37, 99, 235, 0.2); }

        /* Animation beim Hovern der Sektion */
        .custom-dev-wrapper:hover .layer-ui { transform: translateZ(250px); }
        .custom-dev-wrapper:hover .layer-logic { transform: translateZ(125px); }
        .custom-dev-wrapper:hover .layer-data { transform: translateZ(0px); opacity: 0.6; }

        @media (max-width: 1100px) {
            .custom-dev-wrapper { grid-template-columns: 1fr; text-align: center; gap: 60px; }
            .dev-visual { display: none; }
            .dev-feature { justify-content: center; text-align: left; }
        }

        /* Mobile: Abstände + Button full width */
        @media (max-width: 768px) {
            .section-custom { padding: 90px var(--mobile-pad) !important; }
            #custom h2 { font-size: 2.2rem !important; line-height: 1.15 !important; }
            #custom .btn-nav { width: 100%; justify-content: center; padding: 18px 22px !important; border-radius: 18px !important; }
            .dev-feature-list { gap: 18px; }
        }
    </style>

@endsection