/* Glassmorphismus Content-Box für den Text */
        .info-panel {
            color: #ffffff;
            background: rgba(13, 33, 55, 0.70);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 20px;
            padding: 3.5rem;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        }

        .slogan {
            font-weight: 800;
            font-size: 2.5rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, #ffffff 0%, #0d88c4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 2px 4px 10px rgba(0,0,0,0.2);
        }

        .lead-text {
            font-size: 1.15rem;
            line-height: 1.6;
            margin-bottom: 2rem;
            color: rgba(255, 255, 255, 0.9);
        }

        /* Feature Liste */
        .feature-list {
            list-style: none;
            padding: 0;
            margin-bottom: 2rem;
        }

        .feature-list li {
            font-size: 1.05rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: flex-start;
        }

        .feature-list i {
            color: #0d88c4;;
            font-size: 1.3rem;
            margin-right: 15px;
            margin-top: 3px;
        }

        /* Animierter Play-Button Bereich */
        .video-action-area {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .play-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #0d88c4 0%, #3a7bd5 100%);
            color: white;
            border-radius: 50%;
            text-decoration: none;
            font-size: 2.5rem;
            box-shadow: 0 0 25px rgba(0, 210, 255, 0.5);
            transition: all 0.3s ease;
            position: relative;
            border: 4px solid rgba(255,255,255,0.2);
            cursor: pointer;
            margin-bottom: 1.5rem;
        }

        .play-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 0 40px rgba(0, 210, 255, 0.8);
            color: white;
        }

        .play-btn::before {
            content: '';
            position: absolute;
            top: -12px; left: -12px; right: -12px; bottom: -12px;
            border: 2px solid #00d2ff;
            border-radius: 50%;
            animation: pulse 2s linear infinite;
            opacity: 0;
        }

        @keyframes pulse {
            0% { transform: scale(0.9); opacity: 0.8; }
            100% { transform: scale(1.4); opacity: 0; }
        }

        .video-label {
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 1rem;
            color: #ffffff;
            text-align: center;
            text-shadow: 0 2px 5px rgba(0,0,0,0.8); /* Schatten für Lesbarkeit auf hellem Grund */
        }

        .video-subtext {
            font-size: 0.85rem;
            color: #00d2ff;
            text-align: center;
            margin-top: 5px;
            text-shadow: 0 2px 5px rgba(0,0,0,0.8);
        }

        /* Modal & Video Container */
        .modal-content {
            background-color: transparent;
            border: none;
        }

        .modal-header {
            border-bottom: none;
            padding-bottom: 0;
        }

        .btn-close-white {
            filter: invert(1) grayscale(100%) brightness(200%);
            opacity: 0.8;
        }

        .video-container {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.7);
            background: #000;
        }

        .video-container iframe,
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Responsive Anpassungen */
        @media (max-width: 991px) {
            .info-panel {
                padding: 2rem;
                margin-bottom: 3rem;
            }
            .slogan {
                font-size: 2.2rem;
            }
            .video-action-area {
                margin-top: 2rem;
            }
        }

        @media (max-width: 768px) {
            .hero-section {
                align-items: flex-start;
                padding-top: 2rem;
            }
        }








        .promo-card {
            position: relative;
            background: linear-gradient(135deg, #091124 0%, #030816 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            transition: border-color 0.5s ease;
        }

        /* Der interaktive Wave-Canvas im Hintergrund */
        .wave-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            opacity: 0.55;
        }

        /* Inhalt über dem Canvas positionieren */
        .promo-content {
            position: relative;
            padding: 5.5rem 2rem;
        }

        /* Moderner, lebendiger Titel */
        .headline {
            font-weight: 800;
            font-size: clamp(1.8rem, 4vw, 3.2rem);
            line-height: 1.25;
            letter-spacing: -0.03em;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
        }

        .highlight-gema {
            color: #046ca2;
            text-shadow: 0 0 25px rgba(0, 245, 212, 0.4);
            position: relative;
            display: inline-block;
        }

        .highlight-gema::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #046ca2, #046ca2);
            border-radius: 2px;
        }