/* =================
   FEHLENDE ICONS FÜR ÜBER UNS SEITE
   ================= */
.network-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.network-icon::before {
    content: '🏠';
    font-size: 28px;
    color: white;
}

.security-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.security-icon::before {
    content: '🌐';
    font-size: 28px;
}

/* Desktop Icons */
@media (min-width: 769px) {
    .network-icon,
    .security-icon {
        width: 80px;
        height: 80px;
        box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
    }
    
    .network-icon::before,
    .security-icon::before {
        font-size: 36px;
    }
}

/* =================
   ZAHNRÄDER ANIMATION - VEREINFACHT
   ================= */
.gears-icon {
    position: relative;
    width: 60px;
    height: 60px;
}

.gear {
    position: absolute;
    border-radius: 50%;
    background: var(--primary-color);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
}

.gear::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    height: 40%;
    background: white;
    border-radius: 50%;
}

.gear-large {
    width: 35px;
    height: 35px;
    top: 0;
    left: 15px;
    clip-path: polygon(50% 0%, 65% 25%, 100% 25%, 80% 50%, 100% 75%, 65% 75%, 50% 100%, 35% 75%, 0% 75%, 20% 50%, 0% 25%, 35% 25%);
    animation: rotateClockwise 8s linear infinite;
}

.gear-small {
    width: 25px;
    height: 25px;
    top: 20px;
    right: 5px;
    clip-path: polygon(50% 0%, 65% 25%, 100% 25%, 80% 50%, 100% 75%, 65% 75%, 50% 100%, 35% 75%, 0% 75%, 20% 50%, 0% 25%, 35% 25%);
    animation: rotateCounterClockwise 6s linear infinite;
}

/* Desktop Gears */
@media (min-width: 769px) {
    .gears-icon {
        width: 80px;
        height: 80px;
    }
    
    .gear {
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    }
    
    .gear-large {
        width: 55px;
        height: 55px;
        left: 15px;
    }
    
    .gear-small {
        width: 38px;
        height: 38px;
        top: 30px;
        right: 5px;
    }
}

.highlight-card:hover .gear-large {
    animation: rotateClockwiseFast 2s linear infinite;
}

.highlight-card:hover .gear-small {
    animation: rotateCounterClockwiseFast 1.5s linear infinite;
}

.highlight-card.active .gear-large {
    animation: rotateClockwiseFast 2s linear infinite;
}

.highlight-card.active .gear-small {
    animation: rotateCounterClockwiseFast 1.5s linear infinite;
}

/* =================
   LOKALE KARTE ICON - ERSETZT AUTO
   ================= */
.map-icon {
    position: relative;
    width: 80px;
    height: 50px;
    overflow: visible;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 8px;
    border: 2px solid #d1d5db;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Karten-Hintergrund mit Straßen */
.map-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(90deg, #e5e7eb 1px, transparent 1px),
        linear-gradient(0deg, #e5e7eb 1px, transparent 1px);
    background-size: 8px 8px;
    opacity: 0.3;
    border-radius: 6px;
}

.map-background::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #9ca3af;
    border-radius: 1px;
}

.map-background::after {
    content: '';
    position: absolute;
    top: 60%;
    left: 20%;
    right: 20%;
    height: 1px;
    background: #9ca3af;
    border-radius: 1px;
}

/* Standort-Pin */
.location-pin {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #dc2626;
    border-radius: 50% 50% 50% 0;
    transform: translateX(-50%) rotate(-45deg);
    box-shadow: 
        0 2px 6px rgba(220, 38, 38, 0.4),
        0 0 0 2px rgba(220, 38, 38, 0.2);
    z-index: 10;
    animation: pinPulse 2s ease-in-out infinite;
}

.location-pin::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
}

/* Puls-Kreise */
.pulse-ring {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid #dc2626;
    border-radius: 50%;
    opacity: 0;
    z-index: 5;
}

.pulse-ring-1 {
    width: 20px;
    height: 20px;
    animation: pulseRing 2s ease-out infinite;
    animation-delay: 0s;
}

.pulse-ring-2 {
    width: 30px;
    height: 30px;
    animation: pulseRing 2s ease-out infinite;
    animation-delay: 0.5s;
}

.pulse-ring-3 {
    width: 40px;
    height: 40px;
    animation: pulseRing 2s ease-out infinite;
    animation-delay: 1s;
}

/* Hover/Touch Effekt */
.highlight-card:hover .pulse-ring-1,
.highlight-card:active .pulse-ring-1 {
    animation: pulseRingFast 1s ease-out infinite;
    animation-delay: 0s;
}

.highlight-card:hover .pulse-ring-2,
.highlight-card:active .pulse-ring-2 {
    animation: pulseRingFast 1s ease-out infinite;
    animation-delay: 0.2s;
}

.highlight-card:hover .pulse-ring-3,
.highlight-card:active .pulse-ring-3 {
    animation: pulseRingFast 1s ease-out infinite;
    animation-delay: 0.4s;
}

.highlight-card:hover .location-pin,
.highlight-card:active .location-pin {
    animation: pinPulseFast 1s ease-in-out infinite;
    transform: translateX(-50%) rotate(-45deg) scale(1.2);
}

/* Desktop Karte */
@media (min-width: 769px) {
    .map-icon {
        width: 120px;
        height: 80px;
    }
    
    .location-pin {
        width: 16px;
        height: 16px;
    }
    
    .location-pin::before {
        top: 3px;
        left: 3px;
        width: 10px;
        height: 10px;
    }
    
    .pulse-ring-1 {
        width: 30px;
        height: 30px;
    }
    
    .pulse-ring-2 {
        width: 45px;
        height: 45px;
    }
    
    .pulse-ring-3 {
        width: 60px;
        height: 60px;
    }
    
    .map-background::before {
        height: 3px;
    }
    
    .map-background::after {
        height: 2px;
    }
}

/* =================
   LOKALE KARTE - INTERAKTIV
   ================= */
.local-map {
    width: 100%;
    height: 100%;
    padding: 8px;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    --road-path: path("M36 94 C58 78, 78 70, 106 64 C134 58, 156 58, 186 50 C214 42, 238 34, 258 30");
}

.map-surface {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    border: none;
}

.map-road-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.map-route-path {
    fill: none;
    stroke: rgba(191, 219, 254, 0.98);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px rgba(147, 197, 253, 0.5));
}

.map-card-icon {
    width: 300px;
    height: 120px;
}

.map-pin {
    position: absolute;
    left: 89%;
    top: 10%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.map-car-track {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.map-house {
    position: absolute;
    left: 8%;
    bottom: 14%;
    width: 40px;
    height: 32px;
    z-index: 2;
}

.house-roof {
    position: absolute;
    top: 0;
    left: 1px;
    width: 0;
    height: 0;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    border-bottom: 14px solid #1f2937;
    filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.25));
}

.house-body {
    position: absolute;
    top: 12px;
    left: 4px;
    width: 32px;
    height: 20px;
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 2px;
}

.house-door {
    position: absolute;
    bottom: 2px;
    left: 17px;
    width: 7px;
    height: 11px;
    background: #334155;
    border-radius: 2px;
}

.house-window {
    position: absolute;
    top: 14px;
    width: 7px;
    height: 7px;
    background: rgba(191, 219, 254, 0.85);
    border-radius: 2px;
}

.window-left { left: 6px; }
.window-right { right: 6px; }

.pin-core {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ef4444;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35);
}

.pin-core::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    left: 5px;
    top: 5px;
    background: #ffffff;
    border-radius: 50%;
    transform: rotate(45deg);
}

.pin-pulse {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    border: 2px solid rgba(239, 68, 68, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: mapPulse 2.2s ease-out infinite;
}

.pin-pulse-2 { animation-delay: 0.6s; }
.pin-pulse-3 { animation-delay: 1.2s; }

.map-car {
    position: absolute;
    width: 52px;
    height: 19px;
    transition: offset-distance 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
    offset-path: var(--road-path);
    offset-distance: 0%;
    offset-rotate: auto 0deg;
    offset-anchor: 50% 50%;
    z-index: 8;
}

.car-body {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    border-radius: 10px 12px 8px 8px;
    box-shadow: 0 6px 10px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    outline: 2px solid rgba(226, 232, 240, 0.35);
}

.car-window {
    position: absolute;
    right: 9px;
    top: 3px;
    width: 14px;
    height: 6px;
    background: rgba(224, 231, 255, 0.85);
    border-radius: 3px;
}

.car-text {
    position: absolute;
    left: 6px;
    top: 7px;
    font-size: 4px;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: #dbeafe;
    text-transform: uppercase;
}

.car-wheel {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #0f172a;
    border-radius: 50%;
    bottom: -4px;
    box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.2);
}

.wheel-front { right: 8px; }
.wheel-back { left: 8px; }

.car-smoke {
    position: absolute;
    width: 14px;
    height: 14px;
    left: -6px;
    bottom: 7px;
    background: rgba(148, 163, 184, 0.8);
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
}

.smoke-2 {
    width: 11px;
    height: 11px;
    left: -10px;
    bottom: 11px;
}

.car-smoke.smoke-3 {
    width: 9px;
    height: 9px;
    left: -2px;
    bottom: 2px;
}

.car-skid {
    position: absolute;
    width: 24px;
    height: 4px;
    left: -6px;
    bottom: -2px;
    border-bottom: 2px solid rgba(15, 23, 42, 0.5);
    opacity: 0;
}

.skid-2 {
    left: 6px;
    bottom: -5px;
    width: 18px;
}

.skid-3 {
    left: -2px;
    bottom: -6px;
    width: 14px;
}

.local-map.active .map-car {
    offset-distance: 100%;
}

.local-map.active .car-smoke {
    animation: smokePuff 1.3s ease-out;
}

.local-map.active .smoke-2 {
    animation-delay: 0.1s;
}

.local-map.active .car-skid {
    animation: skidMarks 1s ease-out;
}

@keyframes mapPulse {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.7; }
    70% { opacity: 0.2; }
    100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

@keyframes smokePuff {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: translate(-12px, -8px) scale(1.3); opacity: 0; }
}

@keyframes skidMarks {
    0% { opacity: 0; }
    30% { opacity: 0.8; }
    100% { opacity: 0; }
}

@media (min-width: 769px) {
    .map-car {
    width: 56px;
    height: 21px;
    }

    .car-text {
        font-size: 7px;
    }
}

@media (min-width: 769px) {
    .card-icon.map-card-icon {
        width: 320px;
        height: 110px;
    }
}

@media (max-width: 768px) {
    .map-card-icon {
        width: 240px;
        height: 100px;
    }
}

@media (max-width: 768px) {
    .card-icon.map-card-icon {
        width: 240px;
        height: 100px;
    }
}

/* =================
   SERVICES LISTE - MOBILE-FIRST
   ================= */
.services-list {
    background: #f8f9fa;
    padding: 30px 20px;
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
    margin-top: 40px;
}

.services-list h3 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--dark-color);
    text-align: center;
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.services-grid ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.services-grid li {
    padding: 10px 0;
    padding-left: 30px;
    position: relative;
    color: var(--text-light);
    line-height: 1.5;
    transition: var(--transition);
    cursor: pointer;
    border-radius: 6px;
    font-size: 0.95rem;
}

.services-grid li:hover,
.services-grid li:active {
    transform: translateX(5px);
    color: var(--dark-color);
    background: rgba(37, 99, 235, 0.05);
    padding-left: 35px;
}

.services-grid li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
    transition: var(--transition);
}

.services-grid li:hover::before,
.services-grid li:active::before {
    color: #dc2626;
    transform: scale(1.2);
}


@media (min-width: 769px) {
    .services-list {
        padding: 40px;
        border-radius: 15px;
        border-left-width: 5px;
    }
    
    .services-list h3 {
        font-size: 1.3rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        margin-top: 2rem;
    }
    
    .services-grid li {
        padding: 12px 0;
        padding-left: 35px;
        font-size: 1rem;
    }
    
    .services-grid li:hover {
        transform: translateX(10px) scale(1.05);
        padding-left: 40px;
    }
    
    .services-grid li::before {
        font-size: 1.2rem;
    }
    
    .services-grid li:hover::before {
        font-size: 1.4rem;
    }
}

/* =================
   SOLUTIONS SECTIONS - MOBILE-FIRST
   ================= */
.solutions,
.network-security,
.richtfunk,
.sicherheitstechnik {
    padding: 60px 0;
}

.solutions {
    background: white;
}

.network-security {
    background: var(--light-color);
}

.richtfunk {
    background: white;
}

.sicherheitstechnik {
    background: var(--light-color);
}

.solution-content {
    display: block;
    text-align: left;
}

.solution-text h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--dark-color);
    line-height: 1.3;
}

.solution-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.solution-text strong {
    color: var(--dark-color);
}

.solution-text a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.solution-text a:hover {
    text-decoration: underline;
}

/* Desktop Solutions */
@media (min-width: 769px) {
    .solutions,
    .network-security,
    .richtfunk,
    .sicherheitstechnik {
        padding: 100px 0;
    }
    
    .solution-text h2 {
        font-size: 2.2rem;
        margin-bottom: 2rem;
    }
    
    .solution-text p {
        font-size: 1.1rem;
        line-height: 1.8;
        margin-bottom: 1.5rem;
    }
}

/* =================
   NETWORK HUB GRAPHIC - MOBILE-FIRST
   ================= */
.network-hub-graphic {
    position: relative;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.hub-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.central-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.hub-core {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-radius: 50%;
    border: 2px solid #1e40af;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
    animation: hubPulse 3s ease-in-out infinite;
}

.hub-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    font-size: 9px;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.device {
    position: absolute;
    width: 35px;
    height: 35px;
    z-index: 5;
    transition: var(--transition);
}

.device-icon {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: var(--transition);
    font-size: 16px;
}

.device-label {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

/* Desktop Network Hub */
@media (min-width: 769px) {
    .network-hub-graphic {
        width: 400px;
        height: 400px;
    }
    
    .central-hub {
        width: 80px;
        height: 80px;
    }
    
    .hub-core {
        border-width: 4px;
        box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
    }
    
    .hub-label {
        font-size: 11px;
    }
    
    .device {
        width: 50px;
        height: 50px;
    }
    
    .device-icon {
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        font-size: 22px;
    }
    
    .device-label {
        bottom: -20px;
        font-size: 10px;
    }
    
    .network-hub-graphic:hover .device {
        transform: scale(1.1);
    }
    
    .network-hub-graphic:hover .device-icon {
        box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    }
}

/* Device Icons */
.laptop-icon { background: linear-gradient(135deg, #374151, #1f2937); }
.laptop-icon::before { content: '💻'; }

.phone-icon { background: linear-gradient(135deg, #1f2937, #111827); border-radius: 15px; }
.phone-icon::before { content: '📱'; }

.tablet-icon { background: linear-gradient(135deg, #4b5563, #374151); }
.tablet-icon::before { content: '📲'; }

.tv-icon { background: linear-gradient(135deg, #1f2937, #111827); }
.tv-icon::before { content: '📺'; }

.iot-icon { background: linear-gradient(135deg, #059669, #047857); border-radius: 50%; }
.iot-icon::before { content: '🏠'; }

.gaming-icon { background: linear-gradient(135deg, #7c3aed, #6d28d9); }
.gaming-icon::before { content: '🎮'; }

/* Device Positions - Mobile */
.laptop-device { top: 20px; left: 50%; transform: translateX(-50%); }
.phone-device { top: 50px; right: 20px; }
.tablet-device { bottom: 50px; right: 20px; }
.tv-device { bottom: 20px; left: 50%; transform: translateX(-50%); }
.iot-device { bottom: 50px; left: 20px; }
.gaming-device { top: 50px; left: 20px; }

/* Device Positions - Desktop */
@media (min-width: 769px) {
    .laptop-device { top: 30px; left: 175px; transform: none; }
    .phone-device { top: 80px; right: 30px; }
    .tablet-device { bottom: 80px; right: 30px; }
    .tv-device { bottom: 30px; left: 175px; transform: none; }
    .iot-device { bottom: 80px; left: 30px; }
    .gaming-device { top: 80px; left: 30px; }
}

/* =================
   CONTACT SECTION - MOBILE-FIRST
   ================= */
.contact {
    padding: 60px 0;
    background: var(--gradient-dark);
    color: white;
}

.contact-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-header h2 {
    font-size: 2rem;
    color: white;
    margin-bottom: 1rem;
}

.contact-content {
    display: block;
}

.contact-info {
    margin-bottom: 3rem;
    text-align: center;
}

.contact-info h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.contact-info p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
}

.contact-info a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.contact-info a:hover {
    text-decoration: underline;
}

.contact-form {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--primary-color);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    transition: var(--transition);
    -webkit-appearance: none;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.checkbox-group {
    margin: 1.5rem 0;
}

.submit-btn {
    background: var(--gradient-primary);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    -webkit-appearance: none;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.4);
}

/* Desktop Contact */
@media (min-width: 769px) {
    .contact {
        padding: 100px 0;
    }
    
    .contact-header {
        margin-bottom: 4rem;
    }
    
    .contact-header h2 {
        font-size: 3rem;
    }
    
    .contact-content {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 60px;
        align-items: start;
    }
    
    .contact-info {
        margin-bottom: 0;
        text-align: left;
    }
    
    .contact-info h3 {
        font-size: 1.3rem;
    }
    
    .contact-form {
        padding: 40px;
        border-radius: 15px;
    }
    
    .form-group {
        margin-bottom: 2rem;
    }
    
    .checkbox-group {
        margin: 2rem 0;
    }
    
    .submit-btn {
        width: auto;
        padding: 15px 40px;
        font-size: 1.1rem;
    }
}

/* =================
   FOOTER - MOBILE-FIRST
   ================= */
.footer {
    background: var(--dark-color);
    padding: 30px 0;
    color: white;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.footer-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    text-align: center;
    font-size: 0.9rem;
}

.footer-social {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.social-icon {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition);
    font-size: 16px;
    color: white;
}

.social-icon:hover {
    background: var(--primary-color);
    transform: translateY(-2px);
}

/* Desktop Footer */
@media (min-width: 769px) {
    .footer {
        padding: 40px 0;
    }
    
    .footer-links {
        flex-direction: row;
        gap: 20px;
    }
    
    .social-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* =================
   LEGAL PAGES - MOBILE-FIRST
   ================= */
.legal-page {
    padding: 80px 0 60px;
    background: var(--light-color);
    min-height: 100vh;
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-content h1 {
    font-size: 2rem;
    color: var(--dark-color);
    margin-bottom: 2rem;
    text-align: center;
}

.legal-section {
    margin-bottom: 2rem;
}

.legal-section h2 {
    font-size: 1.5rem;
    color: var(--dark-color);
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.5rem;
}

.legal-section h3 {
    font-size: 1.2rem;
    color: var(--dark-color);
    margin-bottom: 0.8rem;
    margin-top: 1.5rem;
}

.legal-section p {
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.legal-section ul {
    margin: 1rem 0;
    padding-left: 20px;
}

.legal-section li {
    line-height: 1.5;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.legal-section a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.legal-section a:hover {
    text-decoration: underline;
}

.highlight-box {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
    margin: 1rem 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.highlight-box p {
    margin: 0;
    color: var(--dark-color);
}

/* Desktop Legal Pages */
@media (min-width: 769px) {
    .legal-page {
        padding: 120px 0 80px;
    }
    
    .legal-content h1 {
        font-size: 3rem;
        margin-bottom: 3rem;
    }
    
    .legal-section {
        margin-bottom: 3rem;
    }
    
    .legal-section h2 {
        font-size: 1.8rem;
    }
    
    .legal-section h3 {
        font-size: 1.4rem;
    }
    
    .legal-section p,
    .legal-section li {
        font-size: 1rem;
    }
    
    .legal-section p {
        line-height: 1.8;
    }
    
    .legal-section li {
        line-height: 1.6;
    }
    
    .highlight-box {
        padding: 20px;
    }
}

/* =================
   ABOUT US PAGE - MOBILE-FIRST
   ================= */
.about-hero {
    height: 50vh;
    min-height: 300px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-dark);
    overflow: hidden;
}

.about-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, var(--primary-color) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, var(--primary-color) 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px;
    opacity: 0.1;
    animation: networkFloat 15s ease-in-out infinite;
}

.about-hero-content {
    text-align: center;
    z-index: 2;
    color: white;
    padding: 0 20px;
}

.about-hero-content h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: white;
}

.about-hero-content h2 {
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 300;
}

.about-details {
    padding: 60px 0;
    background: white;
}

.about-text-section {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.about-text-section h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: var(--dark-color);
}

.about-text-section h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    margin-top: 2rem;
    color: var(--dark-color);
}

.about-text-section p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-light);
    text-align: left;
    margin-bottom: 1rem;
}

.about-text-section ul {
    margin: 1.5rem 0;
    padding-left: 20px;
    text-align: left;
}

.about-text-section li {
    line-height: 1.5;
    color: var(--text-light);
    margin-bottom: 0.8rem;
    font-size: 1rem;
}

.contact-cta {
    padding: 60px 0;
    background: var(--light-color);
}

.cta-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.cta-text h2 {
    font-size: 2rem;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

.cta-text h3 {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.cta-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 1.5rem;
    text-align: left;
}

.cta-text a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.cta-text a:hover {
    text-decoration: underline;
}

.cta-button {
    display: inline-block;
    background: var(--gradient-primary);
    color: white !important;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    transition: var(--transition);
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
    color: white !important;
    text-decoration: none !important;
}

/* Desktop About */
@media (min-width: 769px) {
    .about-hero {
        height: 60vh;
        min-height: 400px;
    }
    
    .about-hero-background {
        background-size: 100px 100px, 150px 150px;
    }
    
    .about-hero-content h1 {
        font-size: 3.5rem;
    }
    
    .about-hero-content h2 {
        font-size: 1.5rem;
    }
    
    .about-details {
        padding: 80px 0;
    }
    
    .about-text-section {
        text-align: center;
    }
    
    .about-text-section h2 {
        font-size: 2.2rem;
    }
    
    .about-text-section h3 {
        font-size: 1.6rem;
    }
    
    .about-text-section p {
        font-size: 1.2rem;
        line-height: 1.8;
    }
    
    .about-text-section li {
        font-size: 1.1rem;
        line-height: 1.6;
    }
    
    .contact-cta {
        padding: 80px 0;
    }
    
    .cta-text h2 {
        font-size: 2.5rem;
    }
    
    .cta-text h3 {
        font-size: 1.3rem;
        margin-bottom: 2rem;
    }
    
    .cta-text p {
        font-size: 1.1rem;
        line-height: 1.8;
        margin-bottom: 2rem;
        text-align: justify;
    }
    
    .cta-button {
        padding: 15px 30px;
        font-size: 1.1rem;
    }
}

/* =================
   ANIMATIONEN - VEREINFACHT
   ================= */
@keyframes logoFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    50% { 
        transform: translateY(-3px) rotate(180deg); 
    }
}

@keyframes techGlow {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 30px rgba(37, 99, 235, 0.3);
    }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 40px rgba(37, 99, 235, 0.5);
    }
}

@keyframes wifiPulse {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

@keyframes networkFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes rotateClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateCounterClockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes rotateClockwiseFast {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateCounterClockwiseFast {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@keyframes pinPulse {
    0%, 100% { 
        transform: translateX(-50%) rotate(-45deg) scale(1);
        box-shadow: 
            0 2px 6px rgba(220, 38, 38, 0.4),
            0 0 0 2px rgba(220, 38, 38, 0.2);
    }
    50% { 
        transform: translateX(-50%) rotate(-45deg) scale(1.1);
        box-shadow: 
            0 3px 8px rgba(220, 38, 38, 0.6),
            0 0 0 3px rgba(220, 38, 38, 0.3);
    }
}

@keyframes pinPulseFast {
    0%, 100% { 
        transform: translateX(-50%) rotate(-45deg) scale(1.2);
        box-shadow: 
            0 4px 12px rgba(220, 38, 38, 0.6),
            0 0 0 3px rgba(220, 38, 38, 0.4);
    }
    50% { 
        transform: translateX(-50%) rotate(-45deg) scale(1.4);
        box-shadow: 
            0 6px 16px rgba(220, 38, 38, 0.8),
            0 0 0 4px rgba(220, 38, 38, 0.5);
    }
}

@keyframes pulseRing {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.5);
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }
}

@keyframes pulseRingFast {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.3);
    }
    50% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes hubPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 0 25px rgba(37, 99, 235, 0.6);
    }
}

/* Desktop Hub Pulse */
@media (min-width: 769px) {
    @keyframes hubPulse {
        0%, 100% {
            transform: translate(-50%, -50%) scale(1);
            box-shadow: 0 0 20px rgba(37, 99, 235, 0.4);
        }
        50% {
            transform: translate(-50%, -50%) scale(1.05);
            box-shadow: 0 0 30px rgba(37, 99, 235, 0.6);
        }
    }
}

/* =================
   MOBILE SCROLL FIXES
   ================= */

/* Verhindert horizontales Scrollen */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* iOS Safari Fixes */
@supports (-webkit-touch-callout: none) {
    .navbar,
    .nav-menu,
    .contact-form {
        -webkit-backdrop-filter: blur(15px);
    }
    
    .hero {
        height: -webkit-fill-available;
        min-height: 500px;
    }
    
    .form-group input,
    .form-group textarea,
    .submit-btn {
        -webkit-appearance: none;
        border-radius: 8px;
    }
    
    /* Verhindert Zoom bei Input Focus */
    .form-group input,
    .form-group textarea {
        font-size: 16px;
    }
}

/* =================
   LANDSCAPE MOBILE FIXES
   ================= */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        height: 100vh;
        min-height: 400px;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .about-hero {
        height: 70vh;
        min-height: 300px;
    }
    
    .navbar {
        height: 50px;
    }
    
    .nav-menu {
        top: 50px;
        height: calc(100vh - 50px);
    }
    
    .logo-icon {
        width: 28px;
        height: 28px;
    }
    
    .logo-text {
        font-size: 1rem;
    }
}

/* =================
   SEHR KLEINE SCREENS (≤375px)
   ================= */
@media (max-width: 375px) {
    .container {
        padding: 0 10px;
    }
    
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .highlights h2,
    .contact-header h2 {
        font-size: 1.8rem;
    }
    
    .about-text-section h2,
    .solution-text h2 {
        font-size: 1.6rem;
    }
    
    .tech-graphic {
        width: 180px;
        height: 180px;
    }
    
    .network-hub-graphic {
        width: 200px;
        height: 200px;
    }
    
    .central-hub {
        width: 40px;
        height: 40px;
    }
    
    .device {
        width: 30px;
        height: 30px;
    }
    
    .device-icon {
        font-size: 14px;
    }
    
    .device-label {
        font-size: 7px;
    }
    
    .highlight-card {
        padding: 25px 15px;
    }
    
    .card-icon {
        width: 50px;
        height: 50px;
    }
    
    .contact-form {
        padding: 20px 15px;
    }
}

/* =================
   BARRIEREFREIHEIT
   ================= */

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Erhöhter Kontrast */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #1d4ed8;
        --text-color: #000000;
        --text-light: #374151;
        --border-color: #6b7280;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .legal-page,
    .about-details,
    .highlights,
    .solutions,
    .richtfunk {
        background: var(--dark-color);
    }
    
    .legal-content h1,
    .legal-section h2,
    .legal-section h3,
    .about-text-section h2,
    .about-text-section h3,
    .solution-text h2,
    .highlights h2 {
        color: white;
    }
    
    .legal-section p,
    .legal-section li,
    .about-text-section p,
    .about-text-section li,
    .solution-text p,
    .section-subtitle {
        color: rgba(255, 255, 255, 0.8);
    }
    
    .highlight-box,
    .services-list {
        background: rgba(255, 255, 255, 0.1);
    }
    
    .highlight-card {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    .highlight-card h3 {
        color: white;
    }
    
    .highlight-card p {
        color: rgba(255, 255, 255, 0.8);
    }
}

/* =================
   HIGH DPI DISPLAYS
   ================= */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .logo-icon {
        filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.3));
    }
    
    .hero-title {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(37, 99, 235, 0.3);
    }
}

/* =================
   TOUCH OPTIMIERUNGEN
   ================= */
@media (hover: none) and (pointer: coarse) {
    /* Für Touch-Only Geräte */
    .highlight-card:hover {
        transform: none;
    }
    
    .nav-menu a:hover {
        background: none;
        color: white;
        padding-left: 10px;
    }
    
    .services-grid li:hover {
        transform: none;
        background: none;
        color: var(--text-light);
        padding-left: 30px;
    }
    
    .social-icon:hover,
    .footer-links a:hover,
    .submit-btn:hover {
        transform: none;
    }
}

/* =================
   DESKTOP SCHRIFTFARBEN - BEHÄLT AKTUELLE FARBEN
   ================= */
@media (min-width: 769px) {
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
        font-weight: 400;
    }

    .highlight-card h3 {
        font-size: 1.3rem;
        font-weight: 500; /* WENIGER FETT */
        color: #111827 !important;
    }
    
    .highlight-card p {
        font-size: 1rem;
        line-height: 1.6;
        color: #374151 !important;
        font-weight: 400; /* NORMAL */
    }
    
    .about-text h2,
    .about-text h3,
    .solution-text h2,
    .highlights h2,
    .solutions h2,
    .richtfunk h2,
    .network-security h2,
    .sicherheitstechnik h2 {
        color: #111827 !important;
        font-weight: 500;
    }
    
    .about-text p,
    .solution-text p,
    .highlights .section-subtitle {
        color: #374151 !important;
        font-weight: 400;
    }

    .services-grid li {
        font-weight: 400;
    }

    .services-grid li:hover {
        font-weight: 500;
    }
}

/* 8. SERVICES LIST - Spezielle Behandlung */
.services-list {
    background: #f8f9fa;
}

.services-list h3 {
    color: #111827 !important;
}

.services-grid li {
    color: #374151 !important;
    font-weight: 500;
}

.services-grid li:hover,
.services-grid li:active {
    color: #111827 !important;
    font-weight: 600;
}

/* LEGAL PAGES - Heller Hintergrund → DUNKLE SCHRIFT */
.legal-page,
.about-details {
    background: var(--light-color);
}

.legal-content h1,
.legal-section h2,
.legal-section h3,
.about-text-section h2,
.about-text-section h3 {
    color: #111827 !important;
}

.legal-section p,
.legal-section li,
.about-text-section p,
.about-text-section li {
    color: #374151 !important;
}

/* WirtWire - MOBILE-FIRST und FUNKTIONAL */
/* Alle Desktop-Features bleiben, aber Mobile wird priorisiert */

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

:root {
    --primary-color: #2563eb;
    --secondary-color: #64748b;
    --accent-color: #94a3b8;
    --dark-color: #0f172a;
    --light-color: #f8f9fa;
    --text-color: #1e293b;
    --text-light: #64748b;
    --border-color: #e2e8f0;
    --gradient-primary: linear-gradient(135deg, #2563eb, #3b82f6);
    --gradient-secondary: linear-gradient(135deg, #64748b, #94a3b8);
    --gradient-dark: linear-gradient(135deg, #0f172a, #1e293b);
    --shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --transition: all 0.3s ease;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
}

/* =================
   MODERNE SCHRIFTART GLOBAL
   ================= */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400; /* NORMAL, NICHT DICK */
    line-height: 1.6;
    color: var(--text-color);
    overflow-x: hidden;
}

/* Alle Überschriften moderner und weniger fett */
h1, h2, h3, h4, h5, h6 {
    font-weight: 500; /* LEICHT FETT STATT BOLD */
}

/* Normale Texte bleiben normal */
p, li, span, div {
    font-weight: 400;
}

/* =================
   MOBILE-FIRST CONTAINER
   ================= */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Responsive Container */
@media (min-width: 576px) {
    .container { padding: 0 20px; }
}

@media (min-width: 1200px) {
    .container { padding: 0 30px; }
}

/* =================
   NAVIGATION - MOBILE-FIRST
   ================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1000;
    transition: var(--transition);
    border-bottom: 1px solid rgba(37, 99, 235, 0.2);
}

/* Desktop Navbar */
@media (min-width: 769px) {
    .navbar {
        height: 70px;
    }
}

.nav-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
}

/* Logo - Mobile optimiert */
.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1001;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: white;
}

.logo-icon {
    width: 32px;
    height: 32px;
    animation: logoFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.3));
}

.logo-text {
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    letter-spacing: 1px;
}

/* Desktop Logo */
@media (min-width: 769px) {
    .logo-icon {
        width: 40px;
        height: 40px;
    }
    
    .logo-text {
        font-size: 1.5rem;
        letter-spacing: 2px;
    }
}

/* =================
   HAMBURGER MENU - FORCE VISIBLE
   ================= */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 6px;
    z-index: 1002;
    justify-content: center;
    align-items: center;
}

.hamburger span {
    width: 22px;
    height: 3px;
    background: #ffffff !important;
    transition: all 0.3s ease;
    border-radius: 2px;
    display: block !important;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
    background: #ffffff !important;
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
    background: #ffffff !important;
}

/* MOBILE: Hamburger SICHTBAR machen */
@media (max-width: 768px) {
    .hamburger {
        display: flex !important;
    }
    
    .nav-menu {
        display: flex !important;
    }
}

/* Navigation Menu - Mobile */
.nav-menu {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    padding: 20px;
    list-style: none;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.nav-menu.active {
    transform: translateX(0);
}

.nav-menu li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-menu a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 10px;
    font-weight: 500;
    font-size: 1.1rem;
    transition: var(--transition);
    position: relative;
}

.nav-menu a:hover {
    background: rgba(37, 99, 235, 0.1);
    color: #3b82f6;
    padding-left: 20px;
}

/* Desktop Navigation */
@media (min-width: 769px) {
    .hamburger {
        display: none !important; /* DESKTOP VERSTECKT */
    }
    
    .nav-menu {
        position: static;
        width: auto;
        height: auto;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        flex-direction: row;
        padding: 0;
        transform: none;
        gap: 30px;
        overflow: visible;
    }
    
    .nav-menu li {
        width: auto;
        border-bottom: none;
    }
    
    .nav-menu a {
        padding: 0;
        font-size: 1rem;
        position: relative;
    }
    
    .nav-menu a:hover {
        background: none;
        color: var(--primary-color);
        padding-left: 0;
        transform: translateY(-2px);
        text-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
    }
    
    .nav-menu a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--gradient-primary);
        transition: var(--transition);
        border-radius: 1px;
    }
    
    .nav-menu a:hover::after {
        width: 100%;
        box-shadow: 0 0 8px rgba(37, 99, 235, 0.6);
    }
}

/* =================
   HERO SECTION - MOBILE-FIRST
   ================= */
.hero {
    height: 100vh;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
    position: relative;
    overflow: hidden;
    padding-top: 60px;
}

/* Desktop Hero */
@media (min-width: 769px) {
    .hero {
        padding-top: 70px;
    }
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}

.network-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.4) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.3) 1px, transparent 1px);
    background-size: 100px 100px, 150px 150px;
    animation: networkFloat 20s ease-in-out infinite;
}

.hero-content {
    text-align: center;
    z-index: 2;
    padding: 0 20px;
    width: 100%;
    max-width: 600px;
}

.hero-title {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 1.2rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
}

.hero-description {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

/* Desktop Hero Text */
@media (min-width: 769px) {
    .hero-content {
        max-width: 800px;
    }
    
    .hero-title {
        font-size: 4rem;
        letter-spacing: 3px;
    }
    
    .hero-subtitle {
        font-size: 1.8rem;
    }
    
    .hero-description {
        font-size: 1.1rem;
        line-height: 1.8;
    }
}

/* =================
   ABOUT SECTION - MOBILE-FIRST
   ================= */
.about {
    padding: 60px 0;
    background: var(--light-color);
}

.about-content {
    display: block;
}

.about-text h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--dark-color);
    text-align: center;
}

.highlight {
    color: var(--primary-color);
}

.about-text h3 {
    font-size: 1.2rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
    text-align: center;
}

.about-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 1rem;
}

.about-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
}

/* Desktop About */
@media (min-width: 769px) {
    .about {
        padding: 100px 0;
    }
    
    .about-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }
    
    .about-text h2 {
        font-size: 2.5rem;
        text-align: left;
    }
    
    .about-text h3 {
        font-size: 1.3rem;
        text-align: left;
    }
    
    .about-text p {
        font-size: 1.1rem;
        line-height: 1.8;
    }
    
    .about-visual {
        margin-top: 0;
    }
}

/* =================
   TECH SPHERE - MOBILE-FIRST
   ================= */
.tech-graphic {
    position: relative;
    width: 200px;
    height: 200px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: techGlow 4s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.3);
    cursor: pointer;
    transition: transform 0.3s ease;
    overflow: hidden;
    margin: 0 auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.tech-graphic:hover {
    animation-play-state: paused;
}

/* Desktop Tech Sphere */
@media (min-width: 769px) {
    .tech-graphic {
        width: 300px;
        height: 300px;
        box-shadow: 0 0 40px rgba(37, 99, 235, 0.3);
    }
}

/* Matrix Code Effect */
.matrix-code {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.matrix-column {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    color: #00ff00;
    font-weight: bold;
    line-height: 10px;
    text-shadow: 0 0 3px #00ff00;
}

.matrix-char-message {
    color: #ffffff !important;
    text-shadow: 0 0 8px #ffffff;
    font-weight: bold;
}

/* Desktop Matrix */
@media (min-width: 769px) {
    .matrix-column {
        font-size: 12px;
        line-height: 12px;
    }
    
    .tech-graphic:hover .matrix-code {
        opacity: 1;
    }
}

/* WIFI Icon */
.wifi-icon {
    position: relative;
}

.wifi-waves {
    position: relative;
    width: 80px;
    height: 80px;
}

.wave {
    position: absolute;
    border: 2px solid white;
    border-radius: 50%;
    opacity: 0;
    animation: wifiPulse 2s ease-in-out infinite;
}

.wave-1 {
    width: 30px;
    height: 30px;
    top: 25px;
    left: 25px;
}

.wave-2 {
    width: 50px;
    height: 50px;
    top: 15px;
    left: 15px;
    animation-delay: 0.5s;
}

.wave-3 {
    width: 80px;
    height: 80px;
    top: 0;
    left: 0;
    animation-delay: 1s;
}

/* Desktop WIFI */
@media (min-width: 769px) {
    .wifi-waves {
        width: 120px;
        height: 120px;
    }
    
    .wave {
        border-width: 3px;
    }
    
    .wave-1 {
        width: 40px;
        height: 40px;
        top: 40px;
        left: 40px;
    }
    
    .wave-2 {
        width: 80px;
        height: 80px;
        top: 20px;
        left: 20px;
    }
    
    .wave-3 {
        width: 120px;
        height: 120px;
        top: 0;
        left: 0;
    }
}

/* =================
   HIGHLIGHTS SECTION - MOBILE-FIRST
   ================= */
.highlights {
    padding: 60px 0;
    background: white;
}

.highlights h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--dark-color);
}

.section-subtitle {
    text-align: center;
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 3rem;
    padding: 0 20px;
}

.highlights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 2rem;
}

.highlight-card {
    background: white;
    padding: 30px 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

.highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: var(--transition);
}

.highlight-card:hover::before,
.highlight-card:active::before {
    transform: scaleX(1);
}

.card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.card-icon.map-card-icon {
    width: 300px;
    height: 120px;
    margin-top: -12px;
    margin-bottom: 0.7rem;
}

/* =================
   SCHRIFTFARBEN SYSTEMATISCH NACH SEKTION
   ================= */

/* 1. ABOUT SECTION - Heller Hintergrund (#f8f9fa) */
.about {
    background: var(--light-color);
}

.about h2,
.about-text h2 {
    color: #111827 !important;
}

.about h3,
.about-text h3 {
    color: #111827 !important;
}

.about p,
.about-text p {
    color: #374151 !important;
    font-weight: 500;
}

/* 2. HIGHLIGHTS SECTION - Weißer Hintergrund */
.highlights {
    background: white;
}

.highlights h2 {
    color: #111827 !important;
}

.highlights .section-subtitle {
    color: #374151 !important;
}

.highlight-card {
    background: white;
}

.highlight-card h3 {
    color: #111827 !important;
    font-weight: 600;
}

.highlight-card p {
    color: #374151 !important;
    font-weight: 500;
}

/* 3. SOLUTIONS (WLAN) - Weißer Hintergrund */
.solutions {
    background: white;
}

.solutions h2,
.solution-text h2 {
    color: #111827 !important;
}

.solutions p,
.solution-text p {
    color: #374151 !important;
    font-weight: 500;
}

/* 4. NETWORK-SECURITY - Heller Hintergrund (#f8f9fa) */
.network-security {
    background: var(--light-color);
}

.network-security h2,
.network-security .solution-text h2 {
    color: #111827 !important;
}

.network-security p,
.network-security .solution-text p {
    color: #374151 !important;
    font-weight: 500;
}

/* 5. RICHTFUNK - Weißer Hintergrund */
.richtfunk {
    background: white;
}

.richtfunk h2,
.richtfunk .solution-text h2 {
    color: #111827 !important;
}

.richtfunk p,
.richtfunk .solution-text p {
    color: #374151 !important;
    font-weight: 500;
}

/* 6. SICHERHEITSTECHNIK - Heller Hintergrund (#f8f9fa) */
.sicherheitstechnik {
    background: var(--light-color);
}

.sicherheitstechnik h2,
.sicherheitstechnik .solution-text h2 {
    color: #111827 !important;
}

.sicherheitstechnik p,
.sicherheitstechnik .solution-text p {
    color: #374151 !important;
    font-weight: 500;
}

/* 7. CONTACT SECTION - Dunkler Gradient */
.contact {
    background: var(--gradient-dark);
}

.contact h2,
.contact-header h2 {
    color: #ffffff !important;
}

.contact h3,
.contact-info h3 {
    color: var(--primary-color) !important;
}

.contact p,
.contact-info p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ABOUT-HERO SECTION - Dunkler Gradient → HELLE SCHRIFT */
.about-hero {
    background: var(--gradient-dark);
}

.about-hero-content h1 {
    color: #ffffff !important;
}

.about-hero-content h2 {
    color: #60a5fa !important; /* HELLER BLAU */
}

.services-list {
    background: #f8f9fa;
}

.services-list h3 {
    color: #111827 !important;
}

.services-grid li {
    color: #374151 !important;
    font-weight: 500;
}

.services-grid li:hover,
.services-grid li:active {
    color: #111827 !important;
    font-weight: 600;
}

/* 9. HERO SECTION - Dunkler Gradient (bereits korrekt) */
.hero-title {
    color: white !important;
}

.hero-subtitle {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Desktop Highlights */
@media (min-width: 576px) {
    .highlights-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 40px;
    }
}

@media (min-width: 769px) {
    .highlights {
        padding: 100px 0;
    }
    
    .highlights h2 {
        font-size: 2.5rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
        margin-bottom: 4rem;
        padding: 0;
    }
    
    .highlight-card {
        padding: 40px 30px;
        border-radius: 20px;
    }
    
    .highlight-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: var(--shadow-lg);
    }
    
    .card-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 2rem;
    }
}

/* =================
   MOBILE KORREKT - DUNKLE BEREICHE HABEN HELLE SCHRIFT
   ================= */

/* MOBILE: Spezifische Schriftfarben für dunkle und helle Bereiche */
@media (max-width: 768px) {
    
    /* DUNKLE BEREICHE → WEIßE/HELLE SCHRIFT */
    .hero, .contact, .about-hero, .navbar, .nav-menu, .footer {
        color: #ffffff !important;
    }
    
    .hero *, .contact *, .about-hero *, .navbar *, .nav-menu *, .footer * {
        color: inherit !important;
    }
    
    /* Spezifische Überschreibungen für dunkle Bereiche */
    .hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
    .contact h1, .contact h2, .contact h3, .contact h4, .contact h5, .contact h6,
    .about-hero h1, .about-hero h2, .about-hero h3, .about-hero h4, .about-hero h5, .about-hero h6,
    .navbar h1, .navbar h2, .navbar h3, .navbar h4, .navbar h5, .navbar h6,
    .nav-menu h1, .nav-menu h2, .nav-menu h3, .nav-menu h4, .nav-menu h5, .nav-menu h6,
    .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
        color: #ffffff !important;
    }
    
    .hero p, .hero span, .hero div,
    .contact p, .contact span, .contact div,
    .about-hero p, .about-hero span, .about-hero div,
    .navbar p, .navbar span, .navbar div,
    .nav-menu p, .nav-menu span, .nav-menu div,
    .footer p, .footer span, .footer div {
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* Links in dunklen Bereichen */
    .hero a, .contact a, .about-hero a, .navbar a, .nav-menu a, .footer a {
        color: #60a5fa !important;
    }
    
    /* Hero Subtitle Gradient für Mobile */
    .hero-subtitle {
        background: linear-gradient(135deg, #ffffff, #e0e7ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 500;
    }
    
    /* HELLE BEREICHE → DUNKLE SCHRIFT (explizit überschreiben) */
    .about, .highlights, .solutions, .richtfunk, .network-security, .sicherheitstechnik, .services-list {
        color: #1e293b !important;
    }
    
    .about h1, .about h2, .about h3, .about h4, .about h5, .about h6,
    .highlights h1, .highlights h2, .highlights h3, .highlights h4, .highlights h5, .highlights h6,
    .solutions h1, .solutions h2, .solutions h3, .solutions h4, .solutions h5, .solutions h6,
    .richtfunk h1, .richtfunk h2, .richtfunk h3, .richtfunk h4, .richtfunk h5, .richtfunk h6,
    .network-security h1, .network-security h2, .network-security h3, .network-security h4, .network-security h5, .network-security h6,
    .sicherheitstechnik h1, .sicherheitstechnik h2, .sicherheitstechnik h3, .sicherheitstechnik h4, .sicherheitstechnik h5, .sicherheitstechnik h6,
    .services-list h1, .services-list h2, .services-list h3, .services-list h4, .services-list h5, .services-list h6 {
        color: #111827 !important;
    }
    
    .about p, .about span, .about div,
    .highlights p, .highlights span, .highlights div,
    .solutions p, .solutions span, .solutions div,
    .richtfunk p, .richtfunk span, .richtfunk div,
    .network-security p, .network-security span, .network-security div,
    .sicherheitstechnik p, .sicherheitstechnik span, .sicherheitstechnik div,
    .services-list p, .services-list span, .services-list div {
        color: #374151 !important;
    }
    
    /* Spezielle Elemente in hellen Bereichen */
    .about-text h2, .about-text h3,
    .solution-text h2,
    .highlights h2,
    .solutions h2,
    .richtfunk h2,
    .network-security h2,
    .sicherheitstechnik h2 {
        color: #111827 !important;
    }
    
    .about-text p,
    .solution-text p,
    .highlights .section-subtitle {
        color: #374151 !important;
    }
    
    .services-grid li {
        color: #374151 !important;
    }
    
    .services-grid li:hover,
    .services-grid li:active {
        color: #111827 !important;
    }
    
    .highlight-card h3 {
        color: #111827 !important;
    }
    
    .highlight-card p {
        color: #374151 !important;
    }
    
    /* Form Elements in dunklen Bereichen */
    .form-group label {
        color: #ffffff !important;
    }
    
    .form-group input,
    .form-group textarea {
        color: #ffffff !important;
    }
}

/* =================
   CHECKBOX STYLING - Universelle Lösung für alle Formulare
   ================= */

/* Verstecke die originale Checkbox komplett */
.form-group.checkbox-group .checkbox-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    pointer-events: none !important;
}

/* Container für die neue Checkbox */
.form-group.checkbox-group .checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 15px !important;
    cursor: pointer !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin: 1rem 0 !important;
    min-height: 44px !important;
    position: relative !important;
}

/* Erstelle die neue sichtbare Checkbox */
.form-group.checkbox-group .checkbox-label::before {
    content: '' !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    background: white !important;
    border: 3px solid #6b7280 !important;
    border-radius: 4px !important;
    display: block !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* Hover Effekt für die Checkbox */
.form-group.checkbox-group .checkbox-label:hover::before {
    border-color: #2563eb !important;
    box-shadow: 0 0 5px rgba(37, 99, 235, 0.3) !important;
}

/* Checked State - Wenn Checkbox aktiviert ist */
.form-group.checkbox-group .checkbox-label:has(input[type="checkbox"]:checked)::before {
    background: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.4) !important;
}

/* Checkmark Symbol im checked State */
.form-group.checkbox-group .checkbox-label:has(input[type="checkbox"]:checked)::after {
    content: '✓' !important;
    position: absolute !important;
    left: 6px !important;
    top: 6px !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: bold !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* Text neben der Checkbox */
.form-group.checkbox-group .checkbox-label > :not(input) {
    flex: 1 !important;
    padding-top: 2px !important;
}

/* Links in der Checkbox */
.form-group.checkbox-group .checkbox-label a {
    color: #60a5fa !important;
    text-decoration: underline !important;
}

/* Focus State für Accessibility */
.form-group.checkbox-group .checkbox-label:focus-within::before {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px !important;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .form-group.checkbox-group .checkbox-label {
        font-size: 16px !important;
        gap: 18px !important;
    }
    .form-group.checkbox-group .checkbox-label::before {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-width: 4px !important;
    }
    .form-group.checkbox-group .checkbox-label:has(input[type="checkbox"]:checked)::after {
        font-size: 18px !important;
        left: 7px !important;
        top: 7px !important;
    }
}

/* Verstecke eventuelle andere Checkmarks */
.form-group.checkbox-group .checkbox-label .checkmark,
.form-group.checkbox-group .checkbox-label span.checkmark {
    display: none !important;
}

/* Fallback für ältere Browser ohne :has() Support */
@supports not (selector(:has(*))) {
    .form-group.checkbox-group .checkbox-label input[type="checkbox"]:checked + *::before {
        background: #2563eb !important;
        border-color: #2563eb !important;
    }
    .form-group.checkbox-group .checkbox-label input[type="checkbox"]:checked + *::after {
        content: '✓' !important;
        position: absolute !important;
        left: 6px !important;
        top: 6px !important;
        color: white !important;
        font-size: 16px !important;
        font-weight: bold !important;
    }
}
	
	/* WhatsApp Button - Mobile Only */
.whatsapp-float {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .whatsapp-float {
        display: block !important;
    }
}

.whatsapp-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: white;
    border-radius: 50%;
}

.whatsapp-icon {
    font-size: 28px;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}
	
.whatsapp-svg {
    width: 28px;
    height: 28px;
    fill: white;
}
	
.social-icon.instagram {
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    color: white;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instagram-svg {
    width: 20px;
    height: 20px;
}

.social-icon.instagram:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(193, 53, 132, 0.4);
}