:root {
            --section-bg: #0480c1;
            --card-bg: #ffffff;
            --brand-blue: #0480c1;
            --brand-blue-hover: #036999;
            --brand-blue-light: #f0f9ff;
            --text-dark: #0f172a;
            --text-muted: #475569;
            --border-color: #e2e8f0;
            --transition-curve: cubic-bezier(0.16, 1, 0.3, 1);
        }

		.argument-section {
            background-color: var(--section-bg);
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }

        .serif-title {
            font-weight: 500;
            color: var(--text-dark);
            letter-spacing: -0.01em;
        }

        .desc-text {
            font-size: 0.95rem;
            color: var(--text-muted);
            line-height: 1.6;
            font-weight: 400;
            max-width: 340px;
            margin: 0 auto;
        }

        /* Interaktive Karten auf blauem Hintergrund */
        .arg-card {
            background: var(--card-bg);
            border: 2px solid transparent;
            border-radius: 24px;
            padding: 55px 35px;
            cursor: pointer;
            transition: all 0.5s var(--transition-curve);
            position: relative;
            user-select: none;
            height: 100%;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }

        /* Hover-Zustand */
        .arg-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border-color: rgba(255, 255, 255, 0.4);
        }

        /* Aktiver Zustand (ausgewählt) */
        .arg-card.active {
            transform: translateY(-8px);
            border-color: #ffffff;
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
        }

        /* Kreisrunder Badge für die Icons */
        .icon-badge {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            background-color: var(--brand-blue-light);
            color: var(--brand-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px auto;
            transition: all 0.5s var(--transition-curve);
            border: 1px solid rgba(4, 128, 193, 0.1);
        }

        .arg-card:hover .icon-badge,
        .arg-card.active .icon-badge {
            background-color: var(--brand-blue);
            color: #ffffff;
            transform: scale(1.08);
            box-shadow: 0 10px 20px -5px rgba(4, 128, 193, 0.3);
        }

        .icon-badge svg {
            width: 44px;
            height: 44px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* */
        /* 1. Glühbirne (Psychologie): Pulsieren & Glow-Effekt */
        @keyframes bulb-glow {
            0%, 100% {
                filter: drop-shadow(0 0 2px rgba(4, 128, 193, 0.1));
                opacity: 0.85;
            }
            50% {
                filter: drop-shadow(0 0 12px rgba(4, 128, 193, 0.7));
                opacity: 1;
            }
        }
        .arg-card:hover .glow-path,
        .arg-card.active .glow-path {
            animation: bulb-glow 1.5s infinite ease-in-out;
        }

        /* 2. ELA-Mastering (Lautsprecher): Ausbreitende Schallwellen */
        @keyframes wave-pulse-1 {
            0% { transform: scale(0.9); opacity: 0.3; }
            50% { transform: scale(1.05); opacity: 1; }
            100% { transform: scale(0.9); opacity: 0.3; }
        }
        @keyframes wave-pulse-2 {
            0% { transform: scale(0.85); opacity: 0.2; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(0.85); opacity: 0.2; }
        }
        .arg-card:hover .wave-path-1,
        .arg-card.active .wave-path-1 {
            animation: wave-pulse-1 1.2s infinite ease-in-out;
            transform-origin: 11px 12px; /* Zentrum des Lautsprecherkörpers */
        }
        .arg-card:hover .wave-path-2,
        .arg-card.active .wave-path-2 {
            animation: wave-pulse-2 1.2s infinite ease-in-out 0.3s;
            transform-origin: 11px 12px;
        }

        /* 3. GEMA-frei (Hand mit schwebendem Dollarzeichen): Schwebe-Effekt */
        @keyframes dollar-float {
            0%, 100% {
                transform: translateY(0px) scale(1);
            }
            50% {
                transform: translateY(-5px) scale(1.05);
            }
        }
        @keyframes hand-cushion {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(1px);
            }
        }
        .arg-card:hover .dollar-path,
        .arg-card.active .dollar-path {
            animation: dollar-float 1.8s infinite ease-in-out;
            transform-origin: center;
        }
        .arg-card:hover .hand-path,
        .arg-card.active .hand-path {
            animation: hand-cushion 1.8s infinite ease-in-out;
            transform-origin: center;
        }

        /* Visueller Indikator-Pfeil, der zum aufklappenden Detail zeigt */
        .arg-card::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%) scale(0.8);
            border-width: 12px 12px 0;
            border-style: solid;
            border-color: #ffffff transparent;
            display: block;
            width: 0;
            opacity: 0;
            transition: all 0.3s var(--transition-curve);
            pointer-events: none;
            z-index: 15;
        }

        .arg-card.active::after {
            opacity: 1;
            transform: translateX(-50%) scale(1);
            bottom: -12px;
        }

        /* Detail-Sektion Styling */
        .info-drawer {
            opacity: 0;
            overflow: hidden;
            transition: all 0.5s var(--transition-curve);
            background: #ffffff;
            border-radius: 28px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
            margin-top: 0;
        }

        .info-drawer.show {
            opacity: 1;
            margin-top: 50px;
            padding: 50px;
        }

        .pane-content {
            display: none;
        }

        .pane-content.active {
            display: block;
            animation: slideInUp 0.45s var(--transition-curve) forwards;
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(24px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .close-btn {
            background: #f1f5f9;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .close-btn:hover {
            background: #e2e8f0;
            color: var(--text-dark);
            transform: scale(1.05);
        }

        .badge-info {
            background-color: #e0f2fe;
            color: var(--brand-blue);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 30px;
            display: inline-block;
            letter-spacing: 0.05em;
        }