/* Breadcrumb auf dunklem Hero */
        .breadcrumb {
            background: #fff;
        }

        /* Hero Section - Dark Gradient Style */
        .page-hero {
            padding: 80px 56px;
            background: linear-gradient(135deg, #0a0f14 0%, #0d1a24 50%, #0a1520 100%);
            position: relative;
            overflow: hidden;
        }
        .page-hero::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(0,177,235,0.15) 0%, transparent 70%);
        }
        .page-hero::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -10%;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(0,177,235,0.1) 0%, transparent 70%);
        }
        .page-hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #00B1EB;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
            width: fit-content;
            position: relative;
            z-index: 1;
        }
        .page-hero-badge::before { content: ''; width: 32px; height: 2px; background: #00B1EB; }
        .page-hero-title {
            font-size: 52px;
            font-weight: 700;
            letter-spacing: -1.5px;
            line-height: 1.05;
            margin-bottom: 24px;
            color: #fff !important;
            position: relative;
            z-index: 1;
        }
        .page-hero-text {
            font-size: 18px;
            color: rgba(255,255,255,0.7) !important;
            line-height: 1.8;
            max-width: 600px;
            margin-bottom: 40px;
            position: relative;
            z-index: 1;
        }
        .hero-buttons { display: flex; gap: 16px; position: relative; z-index: 1; }
        .btn { font-size: 13px; font-weight: 600; padding: 14px 28px; letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 10px; transition: all 0.2s; }
        .btn-primary { background: #00B1EB; color: #fff; }
        .btn-primary:hover { background: #0095c8; }
        .btn-secondary { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.3); }
        .btn-secondary:hover { border-color: #fff; }
        .btn svg { width: 16px; height: 16px; }

        /* Hero Stats */
        .hero-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            background: rgba(0,0,0,0.3);
            margin-top: 48px;
            position: relative;
            z-index: 1;
        }
        .hero-stat {
            padding: 24px;
            text-align: center;
            border-right: 1px solid rgba(255,255,255,0.1);
        }
        .hero-stat:last-child { border-right: none; }
        .hero-stat-number {
            font-size: 28px;
            font-weight: 700;
            color: #00B1EB;
            margin-bottom: 4px;
        }
        .hero-stat-label {
            font-size: 11px;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Quick Actions Grid */
        .quick-actions { padding: 80px 56px; background: #f8f9fa; border-bottom: 1px solid #e8eaed; }
        .section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #00B1EB; display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 16px; }
        .section-label::before, .section-label::after { content: ''; width: 24px; height: 2px; background: #00B1EB; }
        .section-header { text-align: center; margin-bottom: 56px; }
        .section-header h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.5px; color: #0a0f14; margin-bottom: 16px; }
        .section-header p { font-size: 16px; color: #5f6368; max-width: 600px; margin: 0 auto; }

        .actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .action-card { background: #fff; border: 1px solid #e8eaed; padding: 40px 32px; text-align: center; transition: all 0.2s; }
        .action-card:hover { border-color: #00B1EB; box-shadow: 0 4px 12px rgba(0,177,235,0.08); }
        .action-card-icon { width: 64px; height: 64px; background: #f8f9fa; border: 1px solid #e8eaed; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
        .action-card-icon svg { width: 28px; height: 28px; color: #00B1EB; }
        .action-card h3 { font-size: 18px; font-weight: 600; color: #0a0f14; margin-bottom: 12px; }
        .action-card p { font-size: 14px; color: #5f6368; line-height: 1.6; margin-bottom: 20px; }
        .action-card-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; background: #00B1EB; padding: 12px 24px; transition: all 0.2s; }
        .action-card-btn:hover { background: #0095c8; }
        .action-card-btn svg { width: 16px; height: 16px; }

        /* Combined Support Section */
        .support-two-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
        .support-info-card { background: #f8f9fa; border: 1px solid #e8eaed; padding: 32px; }
        .support-info-card h3 { font-size: 16px; font-weight: 600; color: #0a0f14; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
        .support-info-card h3 svg { width: 20px; height: 20px; color: #00B1EB; }
        .hours-list { display: flex; flex-direction: column; gap: 8px; }
        .hours-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #e8eaed; }
        .hours-item:last-child { border-bottom: none; }
        .hours-item-day { font-size: 14px; color: #5f6368; }
        .hours-item-time { font-size: 14px; font-weight: 600; color: #0a0f14; }
        .hours-item-time.closed { color: #dc3545; }
        .hours-emergency { margin-top: 16px; padding: 16px; background: #0a0f14; }
        .hours-emergency h4 { font-size: 12px; font-weight: 600; color: #00B1EB; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
        .hours-emergency p { font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 8px; }
        .hours-emergency-phone { font-size: 18px; font-weight: 700; color: #fff; }
        .contact-list { display: flex; flex-direction: column; gap: 16px; }
        .contact-item { display: flex; flex-direction: column; gap: 4px; }
        .contact-item-label { font-size: 12px; font-weight: 600; color: #5f6368; text-transform: uppercase; letter-spacing: 0.5px; }
        .contact-item-value { font-size: 15px; font-weight: 600; color: #00B1EB; transition: color 0.2s; }
        .contact-item-value:hover { color: #0095c8; }

        /* Remote Support Section */
        .remote-section { padding: 80px 56px; background: #f8f9fa; border-bottom: 1px solid #e8eaed; }
        .remote-single { background: #fff; border: 1px solid #e8eaed; padding: 48px; display: flex; gap: 32px; align-items: center; max-width: 700px; margin: 0 auto; }
        .remote-card-icon { width: 80px; height: 80px; background: #f8f9fa; border: 1px solid #e8eaed; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .remote-card-icon svg { width: 40px; height: 40px; color: #00B1EB; }
        .remote-card-content h3 { font-size: 20px; font-weight: 600; color: #0a0f14; margin-bottom: 12px; }
        .remote-card-content p { font-size: 15px; color: #5f6368; line-height: 1.7; margin-bottom: 20px; }
        .remote-card-links { display: flex; gap: 12px; flex-wrap: wrap; }
        .remote-download { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff; background: #00B1EB; padding: 12px 20px; transition: all 0.2s; }
        .remote-download:hover { background: #0095c8; }
        .remote-download svg { width: 16px; height: 16px; }

        /* Server Status Section */
        .status-section { padding: 80px 56px; border-bottom: 1px solid #e8eaed; }
        .status-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
        .status-header h2 { font-size: 28px; font-weight: 700; color: #0a0f14; }
        .status-link { color: #00B1EB; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; }
        .status-link:hover { color: #0095c8; }

        /* Status Banner */
        .status-banner { display: flex; align-items: center; gap: 16px; padding: 24px 32px; background: #f8f9fa; border: 1px solid #e8eaed; margin-bottom: 24px; }
        .status-banner.operational { border-left: 4px solid #22c55e; }
        .status-banner.degraded { border-left: 4px solid #f59e0b; }
        .status-banner.partial_outage { border-left: 4px solid #f97316; }
        .status-banner.major_outage { border-left: 4px solid #ef4444; }
        .status-banner.maintenance { border-left: 4px solid #00B1EB; }
        .status-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
        .status-icon.operational { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
        .status-icon.degraded { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
        .status-icon.partial_outage { background: rgba(249, 115, 22, 0.1); color: #f97316; }
        .status-icon.major_outage { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
        .status-icon.maintenance { background: rgba(0, 177, 235, 0.1); color: #00B1EB; }
        .status-text h3 { font-size: 18px; font-weight: 600; color: #0a0f14; margin-bottom: 4px; }
        .status-text p { font-size: 14px; color: #5f6368; margin: 0; }

        /* Services List */
        .services-list { display: flex; flex-direction: column; gap: 12px; }
        .service-group { background: #fff; border: 1px solid #e8eaed; overflow: hidden; transition: border-color 0.2s; }
        .service-group:hover { border-color: #00B1EB; }
        .service-item { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
        .service-item.parent-service { background: #fff; }
        .service-item.parent-service .service-name { font-size: 15px; font-weight: 600; color: #0a0f14; }
        .child-services { background: #fafafa; border-top: 1px solid #e8eaed; }
        .service-item.child-service { padding: 12px 20px 12px 44px; border-bottom: 1px solid #f0f0f0; }
        .service-item.child-service:last-child { border-bottom: none; }
        .service-item.child-service .service-name { font-size: 13px; font-weight: 500; color: #5f6368; }
        .service-item.child-service .service-name::before { content: ''; display: inline-block; width: 12px; height: 1px; background: #d0d3d8; margin-right: 10px; vertical-align: middle; }
        .service-status { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
        .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .status-dot.operational { background: #22c55e; }
        .status-dot.degraded { background: #f59e0b; }
        .status-dot.partial_outage { background: #f97316; }
        .status-dot.major_outage { background: #ef4444; }
        .status-dot.maintenance { background: #00B1EB; }

        /* Active Incidents */
        .incidents-list { margin-top: 32px; }
        .incidents-title { font-size: 16px; font-weight: 600; color: #0a0f14; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
        .incidents-title .count { background: #ef4444; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
        .incident-card { background: #fff; border: 1px solid #e8eaed; padding: 20px; margin-bottom: 12px; }
        .incident-card:last-child { margin-bottom: 0; }
        .incident-title { font-size: 15px; font-weight: 600; color: #0a0f14; margin-bottom: 8px; }
        .incident-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
        .badge { display: inline-flex; align-items: center; padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
        .badge-investigating { background: rgba(245, 158, 11, 0.1); color: #d97706; }
        .badge-identified { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
        .badge-monitoring { background: rgba(0, 177, 235, 0.1); color: #0095c8; }
        .badge-resolved { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
        .badge-critical { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
        .badge-major { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
        .badge-minor { background: rgba(245, 158, 11, 0.1); color: #d97706; }
        .badge-maintenance { background: rgba(0, 177, 235, 0.1); color: #0095c8; }
        .incident-desc { font-size: 14px; color: #5f6368; line-height: 1.6; margin-bottom: 12px; }
        .incident-time { font-size: 12px; color: #5f6368; }
        .no-incidents { text-align: center; padding: 40px 20px; background: #f8f9fa; border: 1px solid #e8eaed; }
        .no-incidents-icon { width: 56px; height: 56px; background: rgba(34, 197, 94, 0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; color: #22c55e; }
        .no-incidents p { font-size: 14px; color: #5f6368; margin: 0; }
        .status-loading { text-align: center; padding: 60px 20px; color: #5f6368; }
        .status-error { text-align: center; padding: 40px 20px; background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.2); color: #dc2626; }

        /* Support Section */
        .support-section { padding: 80px 56px; border-bottom: 1px solid #e8eaed; }

        /* SLA Section */
        .sla-section { padding: 80px 56px; background: #0a0f14; }
        .sla-section .section-header h2 { color: #fff; }
        .sla-section .section-header p { color: rgba(255,255,255,0.6); }
        .sla-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; }
        .sla-item { text-align: center; padding: 32px 24px; border: 1px solid rgba(255,255,255,0.1); }
        .sla-item-value { font-size: 48px; font-weight: 700; color: #00B1EB; letter-spacing: -2px; margin-bottom: 8px; }
        .sla-item-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
        .sla-item-desc { font-size: 14px; color: rgba(255,255,255,0.4); }

        /* CTA */
        .cta-section { padding: 56px; text-align: center; background: #fff; border: 1px solid #e8eaed; margin: 56px; }
        .cta-title { font-size: 28px; font-weight: 700; color: #0a0f14; letter-spacing: -0.5px; margin-bottom: 12px; }
        .cta-text { font-size: 15px; color: #5f6368; margin-bottom: 32px; }
        .cta-buttons { display: flex; gap: 16px; justify-content: center; }

        /* Footer */
        .card-footer { background: #0a0f14; padding: 64px 56px; border-radius: 0 0 2px 2px; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 64px; }
        .card-footer .footer-brand { font-size: 14px; color: rgba(255,255,255,0.5); margin-top: 20px; line-height: 1.8; }
        .card-footer .footer-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,0.3); margin-bottom: 20px; }
        .card-footer .footer-links a { display: block; font-size: 14px; color: rgba(255,255,255,0.6); padding: 8px 0; transition: color 0.2s; }
        .card-footer .footer-links a:hover { color: #00B1EB; }
        .card-footer .footer-contact { font-size: 14px; color: rgba(255,255,255,0.6); }
        .card-footer .footer-contact strong { display: block; color: rgba(255,255,255,0.9); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
        .footer-copyright { text-align: center; padding-top: 40px; margin-top: 48px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: rgba(255,255,255,0.3); }

        @media (max-width: 1024px) {
            .actions-grid { grid-template-columns: repeat(2, 1fr); }
            .support-two-grid { grid-template-columns: 1fr; }
            .sla-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
        }
        @media (max-width: 1024px) {
            .hero-stats { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .page { padding: 16px; }
            .top-bar { padding: 10px 24px; font-size: 12px; }
            .top-bar-contact { gap: 16px; }
            .header { padding: 20px 24px; }
            .nav { display: none; }
            .page-hero { padding: 48px 24px; }
            .page-hero-title { font-size: 36px; }
            .hero-buttons { flex-direction: column; }
            .hero-stats { grid-template-columns: 1fr 1fr; }
            .hero-stat { padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.1); }
            .hero-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1); }
            .hero-stat:nth-child(even) { border-right: none; }
            .hero-stat:nth-last-child(-n+2) { border-bottom: none; }
            .hero-stat-number { font-size: 24px; }
            .quick-actions { padding: 48px 24px; }
            .actions-grid { grid-template-columns: 1fr; }
            .remote-section { padding: 48px 24px; }
            .remote-single { flex-direction: column; text-align: center; padding: 32px; }
            .remote-card-links { justify-content: center; }
            .status-section { padding: 48px 24px; }
            .status-header { flex-direction: column; gap: 12px; align-items: flex-start; }
            .status-banner { padding: 16px 20px; }
            .status-icon { width: 44px; height: 44px; font-size: 20px; }
            .service-item { padding: 12px 16px; }
            .service-item.child-service { padding-left: 32px; }
            .support-section { padding: 48px 24px; }
            .sla-section { padding: 48px 24px; }
            .sla-grid { grid-template-columns: 1fr 1fr; }
            .cta-section { padding: 32px 24px; margin: 24px; }
            .cta-buttons { flex-direction: column; }
            .card-footer { padding: 40px 24px; }
            .footer-grid { grid-template-columns: 1fr; gap: 32px; }
        }