:root {
            --primary-teal: #2dd4bf;
            --primary-yellow: #fbbf24;
            --white: #ffffff;
            --light-gray: #e3f2fd;
            --dark-gray: #0f172a;
            --success: #10b981;
            --error: #f43f5e;
            --warning: #f59e0b;
            --dark-bg: #020617;
            --dark-surface: #0f172a;
            --dark-text: #f8fafc;
            --accent: #a78bfa;
            --secondary-accent: #f472b6;
            --glass: rgba(255, 255, 255, 0.85);
            --glass-border: rgba(244, 114, 182, 0.4);
            --card-shadow: 0 10px 25px -5px rgba(244, 114, 182, 0.3), 0 8px 10px -6px rgba(167, 139, 250, 0.3);
            --color-bg-1: #f0fdfa;
            --color-bg-2: #f5f3ff;
            --color-bg-3: #fff1f2;
            --checker-bg-1: #e3f2fd;
            --checker-bg-2: #ffffff;
        }

        [data-theme="dark"] {
            --white: #1e293b;
            --light-gray: #0f172a;
            --dark-gray: #f1f5f9;
            --dark-text: #f1f5f9;
            --primary-teal: #38bdf8;
            --glass: rgba(15, 23, 42, 0.8);
            --glass-border: rgba(56, 189, 248, 0.2);
            --card-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            --color-bg-1: #020617;
            --color-bg-2: #0f172a;
            --color-bg-3: #1e293b;
            --checker-bg-1: #1e293b;
            --checker-bg-2: #0f172a;
        }

        /* Custom Scrollbar for Dark Mode */
        [data-theme="dark"] ::-webkit-scrollbar {
            width: 10px;
        }

        [data-theme="dark"] ::-webkit-scrollbar-track {
            background: #020617;
        }

        [data-theme="dark"] ::-webkit-scrollbar-thumb {
            background: #334155;
            border-radius: 5px;
            border: 2px solid #020617;
        }

        [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
            background: #475569;
        }

        [data-theme="dark"] body {
            color: #e5e7eb;
            background: #0f172a;
        }

        [data-theme="dark"] h1,
        [data-theme="dark"] h2,
        [data-theme="dark"] h3,
        [data-theme="dark"] h4,
        [data-theme="dark"] h5,
        [data-theme="dark"] h6 {
            color: #ffffff;
        }

        [data-theme="dark"] .hero {
            background: #1f2937;
            color: #e5e7eb;
        }

        [data-theme="dark"] nav {
            background: #1a1a1a;
            color: #e5e7eb;
        }

        [data-theme="dark"] nav .nav-links a {
            color: #e5e7eb;
        }

        [data-theme="dark"] nav .nav-links a:hover {
            color: #60a5fa;
        }

        [data-theme="dark"] nav .logo {
            color: #60a5fa;
        }

        /* Verbessertes Dark-Mode-Styling für Navigations-Buttons & Chat */
        [data-theme="dark"] .nav-btn {
            background: #111827;
            border-color: #4b5563;
            color: #e5e7eb;
        }

        /* Branded Icons Branding */
        .branded-icon {
            width: 1.5em;
            height: 1.5em;
            vertical-align: middle;
            margin-right: 0.5rem;
            stroke-width: 2.5px;
            color: var(--primary-teal);
            filter: drop-shadow(0 0 5px rgba(45, 212, 191, 0.3));
        }

        .game-icon-wrapper {
            font-size: 3rem;
            margin-bottom: 0.5rem;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--primary-teal);
        }

        .game-icon-wrapper i {
            width: 60px;
            height: 60px;
            stroke-width: 1.5px;
            animation: iconFloat 3s ease-in-out infinite;
        }

        @keyframes iconFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }
        }

        [data-theme="dark"] .nav-btn.theme-btn {
            background: #111827;
            border-color: #60a5fa;
            color: #e5e7eb;
        }

        [data-theme="dark"] .nav-btn:hover,
        [data-theme="dark"] .nav-btn.theme-btn:hover {
            background: var(--white);
            color: var(--dark-gray);
        }

        [data-theme="dark"] .nav-btn.snow-btn {
            border-color: var(--white);
            color: var(--white);
        }

        [data-theme="dark"] .nav-btn.snow-btn.active {
            background: rgba(56, 189, 248, 0.2);
            border-color: #38bdf8;
        }

        [data-theme="dark"] .nav-btn:hover,
        [data-theme="dark"] .nav-btn.theme-btn:hover {
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.5);
        }

        html {
            scroll-behavior: smooth;
        }

        section {
            scroll-margin-top: 100px;
        }

        [data-theme="dark"] .chat-button {
            background: #60a5fa;
            color: #0f172a;
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.7);
        }

        [data-theme="dark"] .hamburger span {
            background: #e5e7eb;
        }

        [data-theme="dark"] .interview-trigger {
            background: #1f2937;
            border-color: #374151;
        }

        [data-theme="dark"] .economy-divider {
            background: rgba(15, 23, 42, 0.6);
            border: 3px solid #38bdf8 !important;
            box-shadow: 0 0 20px rgba(56, 189, 248, 0.1);
        }

        [data-theme="dark"] .economy-divider span {
            color: #38bdf8;
            text-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
        }

        [data-theme="dark"] .quote-divider {
            background: rgba(15, 23, 42, 0.6);
            border: 3px solid #38bdf8 !important;
            /* Leuchtend Blau im Dark Mode für Konsistenz */
            box-shadow: 0 0 20px rgba(56, 189, 248, 0.1);
        }

        [data-theme="dark"] .quote-divider::before {
            background: rgba(56, 189, 248, 0.25);
            /* Soft Teal Highlighter */
            box-shadow: 0 0 20px rgba(56, 189, 248, 0.2);
        }

        [data-theme="dark"] #closing-quote::before {
            background: #fbbf24;
            /* More amber/gold for dark mode */
            box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
        }

        [data-theme="dark"] .hero .subtitle {
            color: #d1d5db;
        }

        [data-theme="dark"] .product-card,
        [data-theme="dark"] .interview-card,
        [data-theme="dark"] .scenario-section,
        [data-theme="dark"] .poll-card,
        [data-theme="dark"] .team-card,
        [data-theme="dark"] .feedback-form {
            background: #111827 !important;
            color: #e5e7eb;
            border-color: #38bdf8 !important;
        }

        [data-theme="dark"] .game-card {
            background: #111827 !important;
            /* Neutral Dark Slate */
            color: #f1f5f9;
            border: 1px solid rgba(56, 189, 248, 0.2);
        }

        [data-theme="dark"] .game-card h3,
        [data-theme="dark"] .game-card p {
            color: #ffffff !important;
        }

        [data-theme="dark"] .product-card h3,
        [data-theme="dark"] .interview-header h3,
        [data-theme="dark"] .scenario-section h3,
        [data-theme="dark"] .game-card h3,
        [data-theme="dark"] .poll-card h3,
        [data-theme="dark"] .team-name {
            color: #ffffff !important;
        }

        [data-theme="dark"] section h2 {
            color: #ffffff;
        }

        [data-theme="dark"] .product-card .origin,
        [data-theme="dark"] .team-role,
        [data-theme="dark"] .section-subtitle {
            color: #d1d5db;
        }

        [data-theme="dark"] .accordion-header {
            background: #1f2937;
            color: #38bdf8;
            border: 2px solid #38bdf8 !important;
        }

        [data-theme="dark"] .accordion-content {
            background: #1f2937;
            color: #e5e7eb;
            border: 2px solid #38bdf8 !important;
            border-top: none !important;
        }

        [data-theme="dark"] .accordion-body {
            background: #1f2937;
            color: #e5e7eb;
        }

        [data-theme="dark"] .qa-item {
            background: #1f2937;
            color: #e5e7eb;
            border-color: #374151;
        }

        [data-theme="dark"] .qa-item .question {
            color: #ffffff;
        }

        [data-theme="dark"] section {
            border-bottom: 1px solid rgba(56, 189, 248, 0.1);
        }

        [data-theme="dark"] .time-slot,
        [data-theme="dark"] .time-info {
            background: #1f2937;
            color: #e5e7eb;
        }

        [data-theme="dark"] .room-item {
            background: #1f2937;
            color: #e5e7eb;
            border-color: #60a5fa;
        }

        [data-theme="dark"] .room-counter-text {
            color: #60a5fa;
        }

        [data-theme="dark"] .room-percentage {
            color: #e5e7eb;
        }

        [data-theme="dark"] .quiz-option {
            background: #1f2937;
            color: #e5e7eb;
        }

        [data-theme="dark"] .form-group label {
            color: #60a5fa;
        }

        [data-theme="dark"] .game-card p[style*="#666666"] {
            color: #e5e7eb !important;
        }

        [data-theme="dark"] .form-group input,
        [data-theme="dark"] .form-group textarea {
            background: #020617;
            color: #f1f5f9;
            border-color: #334155;
        }

        [data-theme="dark"] .form-group input:focus,
        [data-theme="dark"] .form-group textarea:focus {
            border-color: #38bdf8;
            box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
        }

        [data-theme="dark"] .interview-header p {
            color: #f1f5f9 !important;
        }

        [data-theme="dark"] .tab {
            background: #1e293b;
            color: #94a3b8 !important;
            border: 1px solid #334155;
        }

        [data-theme="dark"] .tab.active {
            background: linear-gradient(135deg, var(--primary-teal), #38bdf8);
            color: white !important;
            border-color: transparent;
            box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
        }

        [data-theme="dark"] .tab:hover:not(.active) {
            background: #334155;
            color: #f1f5f9 !important;
        }

        [data-theme="dark"] .vote-result {
            background: #1e293b;
            border: 1px solid #475569;
        }

        [data-theme="dark"] .vote-result p {
            color: #f1f5f9;
        }

        [data-theme="dark"] .vote-result p[style*="color: #94a3b8"] {
            color: #94a3b8 !important;
        }

        [data-theme="dark"] .vote-bar-container {
            border-radius: 8px;
            overflow: hidden;
            background: #0f172a;
        }

        [data-theme="dark"] .qa-item .answer p {
            color: #e5e7eb;
        }

        [data-theme="dark"] a {
            color: #60a5fa;
        }

        [data-theme="dark"] a:hover {
            color: #93c5fd;
        }

        [data-theme="dark"] .filter-btn {
            background: #1f2937;
            color: #e5e7eb;
            border-color: #60a5fa;
        }

        [data-theme="dark"] .filter-btn:hover,
        [data-theme="dark"] .filter-btn.active {
            background: #60a5fa;
            color: #0f172a;
        }

        [data-theme="dark"] .cta-btn {
            background: #2d3748;
            color: #e5e7eb;
        }

        [data-theme="dark"] .cta-btn:first-child {
            background: #60a5fa;
            color: #0f172a;
        }

        [data-theme="dark"] .cta-btn:hover {
            background: #374151;
        }

        [data-theme="dark"] .cta-btn:first-child:hover {
            background: #93c5fd;
        }

        [data-theme="dark"] .country-card {
            background: #1f2937;
            color: #e5e7eb;
            border-color: #374151;
        }

        [data-theme="dark"] .country-card h2,
        [data-theme="dark"] .country-card h2,
        [data-theme="dark"] .country-card h3 {
            color: var(--primary-teal) !important;
        }

        [data-theme="dark"] #laenderprofile>div,
        [data-theme="dark"] #weltkarte>div,
        [data-theme="dark"] #spiele .section-border-wrapper,
        [data-theme="dark"] #umfragen .poll-card {
            border-color: #38bdf8 !important;
            background: #111827 !important;
            box-shadow: 0 0 20px rgba(56, 189, 248, 0.1);
        }

        [data-theme="dark"] .person-info,
        [data-theme="dark"] .person-role {
            color: #d1d5db;
        }

        [data-theme="dark"] #weltkarte {
            background: none;
        }

        [data-theme="dark"] .memory-card {
            background: #2d3748;
            border-color: #60a5fa;
        }

        [data-theme="dark"] .memory-card .card-back {
            color: #60a5fa;
        }

        [data-theme="dark"] .memory-card.flipped {
            background: #1f2937;
        }

        [data-theme="dark"] .memory-card .card-front {
            color: #e5e7eb;
        }

        [data-theme="dark"] .memory-stats div {
            background: #1f2937;
            color: #e5e7eb;
        }

        [data-theme="dark"] .modal-content {
            background: #1a1a1a;
            color: #e5e7eb;
        }

        [data-theme="dark"] .video-placeholder,
        [data-theme="dark"] .video-placeholder-box {
            background: #1f2937;
            border-color: #60a5fa;
            color: #e5e7eb;
        }

        [data-theme="dark"] .story-text {
            background: #1f2937;
            color: #e5e7eb;
        }

        [data-theme="dark"] .poll-option {
            background: #1f2937;
            border-color: #374151;
            color: #d1d5db;
        }

        [data-theme="dark"] .poll-option:hover {
            background: #38bdf8;
            color: #0f172a;
            border-color: #38bdf8;
        }

        [data-theme="dark"] .poll-option.selected {
            background: #0d9488;
            border-color: #0d9488;
            color: #ffffff;
        }

        [data-theme="dark"] .footer {
            background: #020617;
            border-top: 1px solid rgba(56, 189, 248, 0.1);
        }

        [data-theme="dark"] .modal-header {
            border-bottom-color: #374151;
        }

        [data-theme="dark"] .quiz-option:hover {
            border-color: #c084fc;
            background: rgba(192, 132, 252, 0.1);
        }

        [data-theme="dark"] .poll-option {
            background: #2d3748;
            color: #e5e7eb;
        }

        [data-theme="dark"] .poll-option:hover {
            background: #374151;
        }

        [data-theme="dark"] .poll-bar {
            background: #60a5fa;
        }

        [data-theme="dark"] .chat-window {
            background: #1e293b;
            border: 1px solid rgba(56, 189, 248, 0.3);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
        }

        [data-theme="dark"] .chat-header {
            background: #0f172a;
            border-bottom: 1px solid rgba(56, 189, 248, 0.2);
        }

        [data-theme="dark"] .chat-message.bot {
            background: rgba(75, 85, 99, 0.3);
            color: #f3f4f6;
        }

        [data-theme="dark"] .chat-messages {
            background: #0f172a;
        }

        [data-theme="dark"] .chat-input {
            background: #1e293b;
            color: #f8fafc;
            border-color: #334155;
        }

        [data-theme="dark"] footer {
            background: #1a1a1a;
        }

        [data-theme="dark"] .price-display {
            background: #1f2937;
            color: #e5e7eb;
        }

        [data-theme="dark"] .calculator-section select {
            background: #1f2937;
            color: #e5e7eb;
            border-color: #60a5fa;
        }

        [data-theme="dark"] .submit-btn {
            background: #60a5fa;
            color: #0f172a;
        }

        [data-theme="dark"] .submit-btn:hover {
            background: #93c5fd;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            color: #000000;
            background: radial-gradient(circle at top right, #fdf2f8, #f5f3ff, #eff6ff);
            /* Global light blue gradient as requested */
            overflow-x: hidden;
            background-attachment: fixed;
            letter-spacing: 0.01em;
            transition: background-color 0.35s ease, color 0.35s ease;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Outfit', sans-serif;
            font-weight: 700;
        }

        /* Navigation */

        /* ✨ NEW ANIMATIONS ✨ */
        .fade-in-section {
            opacity: 0;
            transform: translateY(100px) scale(0.8);
            transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
                transform 1s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: opacity, transform;
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        /* Glassmorphism Cards with 3D Hover Tilt */
        .product-card,
        .game-card,
        .interview-card,
        .country-card,
        .team-card,
        .poll-card {
            background: var(--glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 2rem;
            box-shadow: var(--card-shadow);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            perspective: 1000px;
        }

        .product-card:hover {
            transform: translateY(-15px) scale(1.06) rotateX(4deg) rotateY(4deg);
            box-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.35);
            border-color: var(--primary-teal);
            z-index: 10;
        }

        .game-card:hover {
            transform: translateY(-22px) scale(1.08) rotateX(7deg) rotateY(7deg);
            box-shadow: 0 45px 90px -20px rgba(0, 0, 0, 0.4);
            border-color: var(--primary-teal);
            z-index: 20;
        }

        .interview-card:hover,
        .country-card:hover,
        .team-card:hover {
            transform: translateY(-8px) scale(1.02) rotateX(2deg) rotateY(2deg);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border-color: var(--primary-teal);
        }

        /* Game Buttons matched to btn-primary */
        .game-btn {
            background: linear-gradient(135deg, var(--accent), var(--secondary-accent));
            color: #000;
            border: none;
            padding: 1rem 2rem;
            border-radius: 50px;
            /* Kept rounded for pill look */
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
            text-align: center;
            width: 100%;
            display: inline-block;
        }

        .game-btn:hover {
            background: var(--primary-yellow);
            color: #000 !important;
            transform: scale(1.05);
            animation: neonPulse 1.5s infinite ease-in-out;
            box-shadow: 0 0 35px rgba(168, 85, 247, 0.7);
        }

        @keyframes neonPulseWeak {

            0%,
            100% {
                box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
            }

            50% {
                box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
            }
        }

        /* Ripple Rings for Country Cards */
        .country-card {
            position: relative;
        }

        .country-card::before,
        .country-card::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            border: 2px solid var(--primary-teal);
            border-radius: 20px;
            transform: translate(-50%, -50%) scale(1);
            opacity: 0;
            pointer-events: none;
            transition: none;
        }

        .country-card:hover::before {
            animation: rippleRing 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
        }

        .country-card:hover::after {
            animation: rippleRing 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite 0.75s;
        }

        @keyframes rippleRing {
            0% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.8;
            }

            100% {
                transform: translate(-50%, -50%) scale(1.4);
                opacity: 0;
            }
        }

        /* Stagger delays - reinforced cascade */
        .product-card.fade-in-section:nth-child(2) {
            transition-delay: 0.1s;
        }

        .product-card.fade-in-section:nth-child(3) {
            transition-delay: 0.2s;
        }

        .product-card.fade-in-section:nth-child(4) {
            transition-delay: 0.3s;
        }

        .product-card.fade-in-section:nth-child(5) {
            transition-delay: 0.4s;
        }

        .product-card.fade-in-section:nth-child(6) {
            transition-delay: 0.5s;
        }

        .game-card.fade-in-section:nth-child(2) {
            transition-delay: 0.15s;
        }

        .game-card.fade-in-section:nth-child(3) {
            transition-delay: 0.3s;
        }

        .game-card.fade-in-section:nth-child(4) {
            transition-delay: 0.45s;
        }

        .team-card.fade-in-section:nth-child(2) {
            transition-delay: 0.1s;
        }

        .team-card.fade-in-section:nth-child(3) {
            transition-delay: 0.2s;
        }

        .team-card.fade-in-section:nth-child(4) {
            transition-delay: 0.3s;
        }

        .team-card.fade-in-section:nth-child(5) {
            transition-delay: 0.4s;
        }

        /* Typewriter Animation */
        #hero-title {
            min-height: 1.2em;
            display: inline-block;
            margin-top: 15px;
            margin-bottom: 30px;
        }

        #hero-title::after {
            content: '|';
            animation: blink 0.7s infinite;
            color: var(--primary-teal);
            font-weight: 300;
            margin-left: 2px;
        }

        #hero-title.typing-done::after {
            display: none;
        }

        /* No cursor for team names as requested */
        #romantic-text {
            min-height: 1.2em;
            display: inline-block;
        }

        @keyframes blink {

            0%,
            50% {
                opacity: 1;
            }

            51%,
            100% {
                opacity: 0;
            }
        }

        @keyframes heartPulse {
            0% {
                transform: scale(1) translateY(0);
                opacity: 0.8;
            }

            50% {
                transform: scale(1.4) translateY(-15px);
                opacity: 1;
            }

            100% {
                transform: scale(1) translateY(0);
                opacity: 0.8;
            }
        }

        /* Pulse Animation for CTA */
        @keyframes subtlePulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }

            100% {
                transform: scale(1);
            }
        }

        .pulse-animation {
            animation: subtlePulse 2s infinite ease-in-out;
        }

        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: #f5f5f5;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 1rem 2rem;
        }

        nav .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 2rem;
        }

        nav .logo {
            font-size: 1.6rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--primary-teal), var(--accent));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-decoration: none;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            transform: translateY(-2px);
        }

        nav .nav-links {
            display: flex;
            gap: 1.5rem;
            list-style: none;
            flex-wrap: nowrap;
            align-items: center;
        }

        nav .nav-links a {
            color: var(--dark-gray);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: color 0.3s;
            white-space: nowrap;
        }

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

        nav .nav-controls {
            display: flex;
            gap: 0.8rem;
            align-items: center;
            perspective: 1000px;
        }

        .nav-btn {
            background: var(--primary-teal);
            border: 1px solid var(--primary-teal);
            color: var(--white);
            padding: 0.5rem 1rem;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 600;
            transition: all 0.3s ease;
            transform: translateZ(0);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .nav-btn:hover {
            transform: translateY(-8px) scale(1.08) rotateX(10deg) rotateY(-8deg);
            box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.2);
            z-index: 10;
        }

        .nav-btn.theme-btn {
            background: transparent;
            border: 1px solid var(--dark-gray);
            color: var(--dark-gray);
        }

        .nav-btn.theme-btn:hover {
            background: var(--dark-gray);
            color: var(--white);
        }

        .nav-btn.snow-btn {
            background: transparent;
            border: 1px solid var(--dark-gray);
            color: var(--dark-gray);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-btn.snow-btn.active {
            background: #e0f2fe;
            border-color: #38bdf8;
            color: #0ea5e9;
            box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
        }

        /* Snow Effect CSS */
        #snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
            display: none;
        }

        #snow-container.active {
            display: block;
        }

        .snowflake {
            position: fixed;
            background: #fff;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0.8;
            z-index: 9999;
        }

        @keyframes fall {
            0% {
                transform: translateY(0) translateX(0);
            }

            25% {
                transform: translateY(25vh) translateX(-15px);
            }

            50% {
                transform: translateY(50vh) translateX(15px);
            }

            75% {
                transform: translateY(75vh) translateX(-10px);
            }

            100% {
                transform: translateY(100vh) translateX(10px);
            }
        }

        .hamburger {
            display: none;
            flex-direction: column;
            gap: 4px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
        }

        .hamburger span {
            width: 28px;
            height: 3px;
            background: var(--dark-gray);
            border-radius: 4px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-origin: center;
        }

        .hamburger.active span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

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

        .hamburger.active span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        /* Hero Section */
        .hero {
            background: radial-gradient(circle at top right, #fdf2f8, #f5f3ff, #eff6ff);
            color: var(--dark-gray);
            padding: 120px 2rem 4rem;
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            max-width: 100%;
            margin: 0;
        }

        [data-theme="dark"] .hero {
            background: radial-gradient(circle at top right, #1e293b, #0f172a);
        }


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

        .hero h1 {
            font-size: 2.8rem;
            font-weight: 800;
            margin-bottom: 1rem;
            color: var(--primary-teal);
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        .hero .subtitle {
            font-size: 1.1rem;
            margin-bottom: 2.5rem;
            color: var(--dark-gray);
        }

        .cta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.2rem;
            max-width: 900px;
            margin: 2.5rem auto 0 auto;
        }

        .cta-btn {
            background: var(--white);
            color: var(--dark-gray);
            padding: 1.2rem;
            border-radius: 16px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1rem;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.8rem;
            border: 1px solid var(--glass-border);
            backdrop-filter: blur(8px);
            animation: btnFloat 4s ease-in-out infinite;
        }

        .cta-btn i {
            width: 1.2rem;
            height: 1.2rem;
            color: var(--primary-teal);
            filter: drop-shadow(0 0 3px rgba(45, 212, 191, 0.4));
        }

        .cta-btn:nth-child(1) {
            animation-delay: 0s;
        }

        .cta-btn:nth-child(2) {
            animation-delay: 0.3s;
        }

        .cta-btn:nth-child(3) {
            animation-delay: 0.6s;
        }

        .cta-btn:nth-child(4) {
            animation-delay: 0.9s;
        }

        .cta-btn:nth-child(5) {
            animation-delay: 1.2s;
        }

        .cta-btn:nth-child(6) {
            animation-delay: 1.5s;
        }

        @keyframes btnFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .cta-btn:first-child {
            background: linear-gradient(135deg, var(--primary-teal), #0ea5e9);
            color: var(--white);
            border: none;
            box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.3);
        }

        .cta-btn:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            background: var(--primary-teal);
            color: var(--white);
            animation-play-state: paused;
        }

        .cta-btn:first-child:hover {
            box-shadow: 0 20px 25px -5px rgba(14, 165, 233, 0.4);
            filter: brightness(1.1);
        }

        /* Section Styles */
        section {
            padding: 4rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        #spiele {
            background: transparent;
            max-width: 100% !important;
            padding: 6rem 2rem;
        }

        #spiele>h2,
        #spiele>p,
        #spiele>.games-grid {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }


        section h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary-teal);
            text-align: center;
            margin-bottom: 1.2rem;
            letter-spacing: -0.02em;
            line-height: 1.25;
        }

        section .section-subtitle {
            text-align: center;
            font-size: 1.2rem;
            margin-bottom: 3rem;
            color: var(--accent);
            font-weight: 600;
        }

        /* Products Section */
        .filter-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }

        .filter-btn {
            background: var(--white);
            border: 2px solid var(--primary-teal);
            color: var(--primary-teal);
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }

        .filter-btn:hover,
        .filter-btn.active {
            background: var(--primary-teal);
            color: var(--white);
            box-shadow: 0 2px 8px rgba(26, 95, 122, 0.2);
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
        }

        .product-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            text-align: center;
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .product-card:hover {
            transform: translateY(-6px) scale(1.01);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
        }

        .product-card.favorite {
            border: 2px solid #FFD700;
            box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2), 0 0 0 1px rgba(255, 215, 0, 0.4);
            transform: translateY(-4px) scale(1.02);
        }

        .favorite-star {
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 2rem;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
        }

        .favorite-star:hover {
            transform: scale(1.2) rotate(15deg);
        }

        .favorite-star:focus {
            outline: 3px solid var(--primary-teal);
            outline-offset: 2px;
        }

        .favorite-star.active {
            animation: starPulse 0.5s ease-out;
        }

        @keyframes starPulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.4) rotate(180deg);
            }
        }

        .favorites-info {
            text-align: center;
            padding: 1rem;
            background: var(--color-bg-2);
            border-radius: 12px;
            margin-bottom: 2rem;
            font-weight: 600;
            color: var(--primary-teal);
            border: 2px solid #FFD700;
            animation: slideDown 0.4s ease-out;
        }

        .sound-toggle {
            position: fixed;
            top: 90px;
            right: 20px;
            background: var(--primary-teal);
            color: var(--white);
            border: none;
            padding: 0.75rem 1rem;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1.2rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            z-index: 999;
            transition: all 0.3s;
        }

        .sound-toggle:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .sound-toggle:focus {
            outline: 3px solid var(--primary-yellow);
            outline-offset: 2px;
        }

        .favorites-list {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }

        .favorite-badge {
            background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            color: var(--dark-gray);
            font-weight: 700;
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
            animation: slideDown 0.4s ease-out;
        }

        .product-card .emoji {
            font-size: 4rem;
            margin-bottom: 0.5rem;
        }

        .product-card h3 {
            color: var(--primary-teal);
            margin-bottom: 0;
            font-size: 1.1rem;
        }

        .product-details {
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity 0.3s ease, max-height 0.4s ease, margin-top 0.3s ease;
            margin-top: 0;
        }

        .product-card.expanded .product-details {
            opacity: 1;
            max-height: 500px;
            margin-top: 1rem;
        }

        .product-card.expanded {
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
        }

        .product-card .origin {
            color: var(--dark-gray);
            font-size: 0.9rem;
            margin: 0.5rem 0;
        }

        .product-card .price {
            font-weight: 700;
            color: var(--success);
            margin: 0.5rem 0;
        }

        /* Accordion */
        .accordion {
            margin-bottom: 1.2rem;
        }

        .accordion-header {
            background: var(--white);
            padding: 1.2rem 1.5rem;
            cursor: pointer;
            border-radius: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 800;
            color: #ef4444;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            border: 2px solid #1e293b;
        }

        .accordion-header:hover {
            background: var(--primary-yellow);
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
            color: #000000;
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            background: var(--white);
            border-radius: 0 0 12px 12px;
            margin-top: -8px;
            border: 2px solid #1e293b;
            border-top: none;
            opacity: 0;
        }

        .accordion-content.active {
            max-height: 1000px;
            opacity: 1;
            margin-bottom: 0.5rem;
        }

        .accordion-body {
            padding: 1.5rem;
        }

        .video-placeholder {
            background: var(--light-gray);
            padding: 3rem;
            border-radius: 12px;
            text-align: center;
            border: 3px dashed var(--primary-yellow);
            margin-bottom: 1rem;
        }

        /* Interview Section */
        .interview-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 16px;
            margin-bottom: 2rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
            transition: all 0.25s ease;
        }

        .interview-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
        }

        .interview-trigger {
            position: relative;
            overflow: hidden;
            border: 3px solid #000000;
            border-radius: 16px;
            animation: interview-float 5s ease-in-out infinite;
            cursor: pointer;
            z-index: 1;
        }

        /* Overlay similar to scenarios */
        .interview-trigger::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
            transition: all 0.4s ease;
            z-index: 0;
            opacity: 0;
        }

        .interview-trigger:hover::before {
            opacity: 1;
            background: linear-gradient(to top, rgba(45, 212, 191, 0.45) 0%, rgba(0, 0, 0, 0.1) 100%);
        }

        .interview-trigger img {
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            z-index: 2;
        }

        .interview-trigger div {
            position: relative;
            z-index: 2;
        }

        @keyframes pulseScale {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            50% {
                transform: scale(1.03);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
                border-color: #000000;
            }
        }

        .interview-trigger:nth-child(even) {
            animation-delay: -2.5s;
        }

        .interview-trigger:nth-child(3n) {
            animation-delay: -5s;
        }

        /* Old Interview Badge removed for new centered badge */

        .interview-trigger:hover {
            transform: translateY(-12px) scale(1.06);
            box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
        }

        .interview-trigger:hover img {
            transform: scale(1.15);
        }

        @keyframes interview-float {

            0%,
            100% {
                transform: translateY(0) scale(1);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            50% {
                transform: translateY(-22px) scale(1.04);
                box-shadow: 0 25px 45px rgba(0, 0, 0, 0.2);
            }
        }

        @keyframes shake-smuggle {
            0% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-3px);
            }

            50% {
                transform: translateX(3px);
            }

            75% {
                transform: translateX(-2px);
            }

            100% {
                transform: translateX(0);
            }
        }

        .interview-header {
            border-bottom: 3px solid var(--primary-yellow);
            padding-bottom: 1rem;
            margin-bottom: 1.5rem;
        }

        .interview-header h3 {
            color: var(--primary-teal);
            margin-bottom: 0.5rem;
        }

        .qa-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .qa-item {
            background: var(--white);
            padding: 1.25rem 1.75rem;
            border-radius: 16px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        }

        .qa-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            border-color: rgba(13, 148, 136, 0.4);
        }

        .qa-item.expanded {
            background: #f0fdfa;
            border-color: var(--primary-teal);
            box-shadow: 0 25px 50px -12px rgba(13, 148, 136, 0.25);
        }

        [data-theme="dark"] .qa-item.expanded {
            background: rgba(30, 41, 59, 0.8) !important;
            border-color: #38bdf8 !important;
            box-shadow: 0 25px 50px -12px rgba(56, 189, 248, 0.15) !important;
        }

        .qa-item .question {
            font-weight: 800;
            color: #1e293b;
            margin-bottom: 0;
            font-size: 1.05rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        [data-theme="dark"] .qa-item .question {
            color: #f1f5f9;
        }

        .qa-item .answer {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            margin-top: 0;
            color: #334155;
        }

        .qa-item .answer p {
            font-size: 1rem;
            line-height: 1.7;
            color: #475569;
        }

        [data-theme="dark"] .qa-item .answer p {
            color: #cbd5e1;
        }

        .qa-item.expanded .answer {
            max-height: 500px;
            opacity: 1;
            margin-top: 1.25rem;
            padding-top: 1.25rem;
            border-top: 1px solid rgba(13, 148, 136, 0.15);
        }

        [data-theme="dark"] .qa-item.expanded .answer {
            border-top-color: rgba(56, 189, 248, 0.2);
        }

        .tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .tab {
            background: #e2e8f0;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 12px;
            cursor: pointer;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            color: #64748b;
        }

        .tab.active {
            background: linear-gradient(135deg, var(--primary-teal), #0d9488);
            color: white !important;
            box-shadow: 0 4px 12px rgba(26, 95, 122, 0.2);
            transform: translateY(-2px);
        }

        .tab:hover:not(.active) {
            background: #cbd5e1;
            color: #1e293b;
        }

        .vote-buttons {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .vote-btn {
            flex: 1;
            padding: 0.8rem 1.5rem;
            border: 2px solid var(--primary-teal);
            background: var(--white);
            color: var(--primary-teal);
            border-radius: 12px;
            cursor: pointer;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 12px rgba(26, 95, 122, 0.08);
        }

        .vote-btn:hover {
            background: var(--primary-teal);
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(26, 95, 122, 0.2);
        }

        .vote-btn.voted {
            opacity: 0.5;
            pointer-events: none;
            filter: grayscale(0.5);
        }

        .vote-result {
            margin-top: 1.5rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
            animation: fadeIn 0.5s ease-out;
        }

        [data-theme="dark"] .vote-result {
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(56, 189, 248, 0.2);
        }

        .vote-bar-container {
            display: flex;
            height: 45px;
            background: #e2e8f0;
            border-radius: 12px;
            overflow: hidden;
            margin-top: 1rem;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        [data-theme="dark"] .vote-bar-container {
            background: #1e293b;
        }

        .vote-bar {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 700;
            font-size: 0.9rem;
            transition: width 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
            animation: barGrow 1.5s ease-out;
        }

        .vote-bar.agree {
            background: linear-gradient(90deg, #10b981, #059669);
        }

        .vote-bar.disagree {
            background: linear-gradient(90deg, #f43f5e, #e11d48);
        }

        @keyframes barGrow {
            from {
                width: 0;
            }
        }

        .vote-bar::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(rgba(255, 255, 255, 0.2), transparent);
            pointer-events: none;
        }

        /* Scenarios */
        .scenario-section {
            background: var(--white);
            padding: 2rem;
            border-radius: 16px;
            margin-bottom: 2rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
            display: none;
            opacity: 0;
            transform: translateY(10px);
        }

        .scenario-section.active {
            display: block;
            animation: scenarioFadeIn 0.5s ease forwards;
        }

        @keyframes scenarioFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .scenario-section:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
        }

        .scenario-section h3 {
            color: var(--primary-teal);
            margin-bottom: 1rem;
        }

        .time-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-top: 1rem;
            position: relative;
            perspective: 1000px;
        }

        .time-slot {
            background: #d4e6f1;
            padding: 0.8rem 0.6rem;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--dark-gray);
            transition: all 0.3s;
            border: 2px solid transparent;
        }

        .time-slot:hover {
            transform: translateY(-10px) scale(1.05) rotateX(8deg) rotateY(-10deg);
            box-shadow: 15px 15px 35px rgba(0, 0, 0, 0.15),
                0 0 20px rgba(45, 212, 191, 0.3);
            border-color: var(--primary-teal);
            background: var(--white);
            z-index: 10;
        }

        .time-slot.active {
            background: var(--primary-teal);
            color: var(--white);
            border-color: var(--primary-teal);
        }

        .time-info {
            grid-column: 1 / -1;
            background: #d4e6f1;
            padding: 1.5rem;
            border-radius: 12px;
            border-left: 4px solid var(--primary-teal);
            margin: 0.5rem 0;
            animation: slideDown 0.3s ease;
            font-size: 1.1rem;
            line-height: 1.6;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .room-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1rem;
            margin-top: 1rem;
        }

        @media (max-width: 1024px) {
            .room-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 768px) {
            .room-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .room-item {
            background: var(--white);
            border: 2px solid var(--primary-teal);
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            aspect-ratio: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .room-item.removed {
            opacity: 0.3;
            filter: grayscale(100%);
            border-color: var(--error);
        }

        .room-item .emoji {
            font-size: 2.5rem;
            display: block;
            margin-bottom: 0.3rem;
        }

        .room-item strong {
            font-size: 0.75rem;
            margin-top: 0.3rem;
        }

        .room-counter {
            text-align: center;
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        .room-counter-text {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-teal);
            margin-bottom: 0.5rem;
        }

        .product-card .price {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--secondary-accent);
            margin: 1rem 0;
            display: block;
        }

        .room-percentage {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--dark-gray);
            margin-bottom: 1rem;
        }

        .progress-bar {
            width: 100%;
            height: 24px;
            background: var(--light-gray);
            border-radius: 12px;
            overflow: hidden;
            margin-top: 0.5rem;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #ffc107 0%, #ff9800 50%, #ff6b6b 100%);
            transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--white);
            font-weight: 700;
            font-size: 0.9rem;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .calculator-section {
            background: var(--white);
            padding: 2rem;
            border-radius: 16px;
            max-width: 600px;
            margin: 0 auto;
        }

        .calculator-section select {
            width: 100%;
            padding: 1rem;
            border: 2px solid var(--primary-teal);
            border-radius: 8px;
            font-size: 1rem;
            margin-bottom: 1rem;
        }

        .price-display {
            background: #e3f2fd;
            padding: 1.5rem;
            border-radius: 12px;
            text-align: center;
            margin-top: 1.5rem;
            box-shadow: 0 10px 25px -5px rgba(96, 165, 250, 0.3);
            animation: priceFloat 4s ease-in-out infinite;
            position: relative;
        }

        @keyframes priceFloat {

            0%,
            100% {
                transform: translateY(0);
                box-shadow: 0 10px 25px -5px rgba(96, 165, 250, 0.3);
            }

            50% {
                transform: translateY(-10px);
                box-shadow: 0 20px 35px -5px rgba(96, 165, 250, 0.4);
            }
        }

        .price-display .big-emoji {
            font-size: 3rem;
        }

        .price-display .price-item {
            margin: 0.75rem 0;
            font-size: 1rem;
            font-weight: 700;
        }

        .price-display h3 {
            font-size: 1.1rem;
            margin: 0.5rem 0;
        }

        .price-normal {
            color: var(--success);
        }

        .price-high {
            color: var(--error);
        }

        /* Games */
        .games-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            align-items: stretch;
            max-width: 1200px;
            margin: 0 auto;
        }

        @media (max-width: 968px) {
            .games-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            .games-grid {
                grid-template-columns: 1fr;
            }
        }

        .game-card {
            background: #ccfbf1;
            /* Very light teal */
            color: var(--dark-gray);
            padding: 0;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 8px 35px rgba(0, 0, 0, 0.1);
            border: 2px solid #000000;
            display: flex;
            flex-direction: column;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            animation: gameFloat 5s ease-in-out infinite;
        }

        .game-card:nth-child(1) {
            animation-delay: 0s;
        }

        .game-card:nth-child(2) {
            animation-delay: 1.2s;
        }

        .game-card:nth-child(3) {
            animation-delay: 2.4s;
        }

        @keyframes gameFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-22px);
            }
        }

        .game-card:nth-child(3) {
            animation-delay: 1.6s;
        }

        .game-card-img {
            width: 100%;
            height: 160px;
            object-fit: cover;
            border-bottom: 2px solid rgba(0, 0, 0, 0.05);
        }

        .game-card-content {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .game-card:hover {
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1), 0 3px 8px rgba(0, 0, 0, 0.06);
            transform: translateY(-3px);
        }

        .game-card .game-btn {
            margin-top: auto;
        }

        .game-card h3 {
            color: var(--dark-gray);
            margin: 0.75rem 0 0.5rem 0;
        }

        .game-card p {
            color: var(--dark-gray);
            margin: 0.5rem 0 1rem 0;
        }

        .game-btn {
            background: var(--primary-yellow);
            border: none;
            padding: 0.875rem 1.75rem;
            border-radius: 50px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            margin-top: 0.75rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .game-btn:hover {
            transform: scale(1.03);
            box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
        }

        .game-btn:active {
            transform: scale(0.95);
        }

        /* Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .modal.active {
            display: flex;
        }

        /* 📈 Clean Stock Dashboard Styles */
        .shop-dashboard {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 1.5rem;
            margin: 1.5rem 0;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
            text-align: left;
        }

        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .dashboard-label {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.6);
        }

        .dashboard-value {
            font-size: 2rem;
            font-weight: 900;
            color: var(--white);
            font-variant-numeric: tabular-nums;
        }

        .dashboard-income {
            font-size: 0.9rem;
            color: var(--primary-teal);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .sparkline-container {
            width: 100%;
            height: 80px;
            margin-top: 1rem;
            position: relative;
        }

        .sparkline-svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        .sparkline-path {
            fill: none;
            stroke: var(--primary-teal);
            stroke-width: 3;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 4px 10px rgba(45, 212, 191, 0.4));
        }

        .sparkline-area {
            fill: url(#sparkline-gradient);
            opacity: 0.3;
        }

        @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }

        [data-theme="dark"] .shop-dashboard {
            background: rgba(15, 23, 42, 0.6);
            border-color: rgba(56, 189, 248, 0.2);
        }

        .chart-time-btn {
            transition: all 0.2s ease;
        }

        .chart-time-btn:hover {
            background: rgba(255, 255, 255, 0.2) !important;
            color: white !important;
        }

        .chart-time-btn.active {
            background: rgba(16, 185, 129, 0.3) !important;
            border-color: #10b981 !important;
            color: #10b981 !important;
        }

        .modal-content {
            background: var(--white);
            padding: 1.5rem;
            border-radius: 16px;
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.2);
            animation: modalSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .modal-content:has(.flappy-game-container) {
            padding: 0.8rem !important;
            background: var(--primary-teal) !important;
            border: 4px solid var(--white);
        }

        .modal-content:has(.flappy-menu-container),
        .modal-content:has(.smuggle-menu-container) {
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
            padding: 0 !important;
            max-width: 750px !important;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(20px) scale(0.95);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .modal-close {
            position: absolute;
            top: 1.25rem;
            right: 1.25rem;
            background: var(--error);
            color: var(--white);
            border: 4px solid var(--white);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            font-size: 1.8rem;
            cursor: pointer;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1001;
            /* Ensure it's on top of typewriter text and icons */
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
            transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            padding: 0;
            padding-bottom: 4px;
            /* Slight visual adjustment for the '×' character */
        }

        .modal-close:hover {
            transform: scale(1.1) rotate(90deg);
            background: #dc2626;
            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.6);
        }

        .modal-close:active {
            transform: scale(0.9);
        }

        /* Memory Game */
        .memory-game-container {
            text-align: center;
        }

        .memory-cards-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin: 2rem auto;
            max-width: 600px;
        }

        @media (max-width: 768px) {
            .memory-cards-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 0.5rem;
                max-width: 100%;
            }
        }

        .memory-card {
            background: #d4e6f1;
            padding: 0.5rem;
            border-radius: 12px;
            cursor: pointer;
            text-align: center;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            min-height: 100px;
            border: 2px solid #a0c4d9;
        }

        .memory-card.flipped {
            background: #ffffff;
            border: 3px solid var(--primary-teal);
        }

        .memory-card .card-back {
            position: absolute;
            opacity: 1;
            font-size: 2.5rem;
            color: var(--primary-teal);
            font-weight: 700;
        }

        .memory-card.flipped .card-back {
            opacity: 0;
            pointer-events: none;
        }

        .memory-card .card-front {
            opacity: 0;
            position: absolute;
            font-size: 0.9rem;
            font-weight: 600;
            padding: 0.5rem;
            color: #000000;
            pointer-events: none;
        }

        .memory-card.flipped .card-front {
            opacity: 1;
        }

        .memory-card.matched {
            background: var(--success);
            border: 3px solid var(--success);
            opacity: 0.6;
            cursor: default;
        }

        .memory-card.matched .card-front {
            opacity: 1;
        }

        .memory-card.matched .card-back {
            opacity: 0;
        }

        .memory-stats {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin: 2rem 0;
            font-size: 1.2rem;
            font-weight: 700;
        }

        .memory-stats div {
            padding: 1rem 2rem;
            background: var(--light-gray);
            border-radius: 12px;
        }

        .video-modal-content {
            text-align: center;
            padding: 2rem;
        }

        .video-modal-content .emoji {
            font-size: 5rem;
            margin-bottom: 1rem;
        }

        .video-modal-content h2 {
            color: var(--primary-teal);
            margin-bottom: 1rem;
        }

        .video-modal-content .video-placeholder-box {
            background: var(--light-gray);
            padding: 3rem 2rem;
            border-radius: 12px;
            border: 3px dashed var(--primary-yellow);
            margin: 2rem 0;
        }

        .video-modal-content .video-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
        }

        .video-modal-content .video-text {
            font-size: 1.2rem;
            line-height: 1.6;
            color: var(--dark-gray);
        }



        /* Quiz */
        .quiz-container {
            background: var(--white);
            padding: 2rem;
            border-radius: 16px;
        }

        .quiz-ready-text {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--dark-gray);
            text-align: center;
            margin-bottom: 2rem;
        }

        .quiz-question {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary-teal);
            margin-bottom: 1.2rem;
        }

        .quiz-options {
            display: grid;
            gap: 0.8rem;
        }

        .quiz-option {
            background: var(--light-gray);
            padding: 0.85rem;
            border-radius: 8px;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            text-align: left;
            font-size: 0.95rem;
        }

        .quiz-option:hover {
            border-color: #a855f7;
            background: rgba(168, 85, 247, 0.05);
            animation: neonPulse 1.5s infinite ease-in-out;
            transform: translateX(5px);
        }

        @keyframes neonPulse {
            0% {
                box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), inset 0 0 8px rgba(168, 85, 247, 0.2);
                border-color: rgba(168, 85, 247, 0.5);
            }

            50% {
                box-shadow: 0 0 45px rgba(168, 85, 247, 0.9), inset 0 0 20px rgba(168, 85, 247, 0.5);
                border-color: rgba(168, 85, 247, 1);
            }

            100% {
                box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), inset 0 0 8px rgba(168, 85, 247, 0.2);
                border-color: rgba(168, 85, 247, 0.5);
            }
        }

        .quiz-option.correct {
            background: var(--success);
            color: var(--white);
            border-color: var(--success);
            animation: correctFlash 0.5s ease-out;
        }

        .quiz-option.incorrect {
            background: var(--error);
            color: var(--white);
            border-color: var(--error);
            animation: incorrectShake 0.5s ease-out;
        }

        @keyframes correctFlash {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.7;
                background: #22c55e;
            }
        }

        @keyframes incorrectShake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-10px);
            }

            75% {
                transform: translateX(10px);
            }

            100% {
                transform: translateX(0);
            }
        }

        /* Polls */
        .polls-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
        }

        .poll-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 12px;
            border: 2px solid var(--color-border);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
            transition: all 0.25s ease;
        }

        .poll-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
        }

        .poll-card h3 {
            color: var(--primary-teal);
            margin-bottom: 1.5rem;
        }

        .poll-options {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .poll-option {
            background: var(--light-gray);
            padding: 1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
        }

        .poll-option:hover {
            background: var(--primary-yellow);
            transform: translateX(2px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .poll-result {
            margin-top: 0.5rem;
        }

        .poll-bar {
            height: 30px;
            background: var(--primary-teal);
            border-radius: 8px;
            transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            padding-left: 0.5rem;
            color: var(--white);
            font-weight: 700;
            animation: barGrow 0.8s ease-out;
        }

        @keyframes barGrow {
            from {
                width: 0 !important;
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* Team */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 1.5rem;
            margin-top: 2rem;
        }

        @media (max-width: 1024px) {
            .team-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 640px) {
            .team-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .team-card {
            background: var(--white);
            padding: 1.5rem 1.5rem 3rem 1.5rem;
            border-radius: 16px;
            text-align: center;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(0, 0, 0, 0.15);
            backdrop-filter: blur(10px);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            cursor: pointer;
            animation: teamFloat 5s ease-in-out infinite;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .team-card:nth-child(1) {
            animation-delay: 0s;
        }

        .team-card:nth-child(2) {
            animation-delay: 0.5s;
        }

        .team-card:nth-child(3) {
            animation-delay: 1s;
        }

        .team-card:nth-child(4) {
            animation-delay: 1.5s;
        }

        .team-card:nth-child(5) {
            animation-delay: 2s;
        }

        .team-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.15;
            transition: opacity 0.3s;
            z-index: 0;
        }

        .team-card:hover::before {
            opacity: 0.3;
        }

        .team-card>* {
            position: relative;
            z-index: 1;
        }

        /* White Background for Team Members */
        .team-card {
            background: var(--white);
            border: 1px solid rgba(0, 0, 0, 0.05);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .team-card .card-liquid-bg {
            position: absolute;
            bottom: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0ea5e9, #7dd3fc);
            transition: bottom 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            z-index: 0;
        }

        /* Continuous Animation for Avatars - Shape stays fixed */
        .team-avatar {
            animation: avatarGlowPulse 4s ease-in-out infinite, avatarFloat 4s ease-in-out infinite;
            position: relative;
            z-index: 2;
            transition: all 0.5s ease;
            border-radius: 50%;
            overflow: hidden;
            /* Keeps the oval shape */
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .team-avatar img {
            border-radius: 50%;
            animation: avatarScalePulse 8s ease-in-out infinite;
        }

        .team-avatar::after {
            content: '';
            position: absolute;
            top: -100%;
            left: -100%;
            width: 300%;
            height: 300%;
            background: linear-gradient(45deg,
                    transparent 0%,
                    rgba(255, 255, 255, 0.1) 45%,
                    rgba(255, 255, 255, 0.5) 50%,
                    rgba(255, 255, 255, 0.1) 55%,
                    transparent 100%);
            transform: rotate(25deg);
            animation: avatarShimmer 4s infinite;
            pointer-events: none;
        }

        @keyframes avatarGlowPulse {

            0%,
            100% {
                box-shadow: 0 0 15px rgba(14, 165, 233, 0.3), inset 0 0 5px rgba(14, 165, 233, 0.2);
                border-color: rgba(14, 165, 233, 0.4);
            }

            50% {
                box-shadow: 0 0 30px rgba(168, 85, 247, 0.6), inset 0 0 10px rgba(168, 85, 247, 0.3);
                border-color: rgba(168, 85, 247, 0.6);
            }
        }

        @keyframes avatarScalePulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.08);
            }
        }

        @keyframes avatarShimmer {
            0% {
                top: -100%;
                left: -100%;
            }

            100% {
                top: 100%;
                left: 100%;
            }
        }

        @keyframes avatarFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        @keyframes avatarFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .team-card:hover .card-liquid-bg {
            bottom: 0;
        }

        .team-card .card-wave {
            position: absolute;
            top: -20px;
            left: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 40%;
            animation: liquidRotation 4s linear infinite;
            pointer-events: none;
        }

        .team-card:hover {
            transform: translateY(-12px) scale(1.05);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .team-card:hover .team-name {
            color: white !important;
        }

        .team-card>* {
            position: relative;
            z-index: 2;
        }

        .scenario-selector-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin: 2rem auto 3rem;
            max-width: 1200px;
        }

        .scenario-selector-card {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            height: 200px;
            animation: scenarioFloat 6s ease-in-out infinite;
        }

        .scenario-selector-card:nth-child(2) {
            animation-delay: -1.5s;
        }

        .scenario-selector-card:nth-child(3) {
            animation-delay: -3s;
        }

        .scenario-selector-card:nth-child(4) {
            animation-delay: -4.5s;
        }

        .scenario-selector-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s;
        }

        .scenario-selector-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
            display: flex;
            align-items: flex-end;
            padding: 1.5rem;
            color: white;
            font-weight: 700;
            font-size: 1.1rem;
            transition: background 0.3s;
        }

        .scenario-selector-card:hover {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .scenario-selector-card:hover img {
            transform: scale(1.1);
        }

        .scenario-selector-card:hover .scenario-selector-overlay {
            background: linear-gradient(to top, rgba(45, 212, 191, 0.8) 0%, rgba(0, 0, 0, 0.3) 100%);
        }

        .scenario-selector-card::after,
        .info-image-card::after,
        .interview-trigger::after {
            content: 'Öffnen 🔍';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -20%);
            background: rgba(255, 255, 255, 0.95);
            color: #1e293b;
            /* Dark Slate instead of variable */
            padding: 0.6rem 1.2rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 800;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            pointer-events: none;
            z-index: 20;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        [data-theme="dark"] .scenario-selector-card::after,
        [data-theme="dark"] .info-image-card::after,
        [data-theme="dark"] .interview-trigger::after {
            background: #1e293b;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .scenario-selector-card:hover::after,
        .info-image-card:hover::after,
        .interview-trigger:hover::after {
            opacity: 1;
            transform: translate(-50%, -50%);
        }

        .info-image-card img {
            transition: transform 0.6s;
        }

        .info-image-card:hover img {
            transform: scale(1.1);
        }

        @keyframes teamFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-25px);
            }
        }

        @keyframes scenarioFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-30px);
            }
        }

        @keyframes pulse-lightbulb {

            0%,
            100% {
                transform: scale(1) translateY(0);
                filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.4));
            }

            50% {
                transform: scale(1.08) translateY(-2px);
                filter: drop-shadow(0 0 25px rgba(251, 191, 36, 0.7)) brightness(1.15);
            }
        }

        .lightbulb-btn {
            animation: pulse-lightbulb 2s infinite ease-in-out;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: inline-block;
        }

        .lightbulb-btn:hover {
            animation: none;
            transform: scale(1.2) rotate(15deg) !important;
        }

        .lightbulb-label {
            background: var(--primary-yellow);
            color: var(--dark-gray);
            padding: 4px 12px;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 800;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            z-index: 100;
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .typing-cursor::after {
            content: '|';
            animation: blink 0.7s infinite;
            color: var(--primary-teal);
            font-weight: 700;
            margin-left: 2px;
        }

        .lightbulb-btn:hover+.lightbulb-label {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        .lightbulb-label::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid var(--primary-yellow);
        }

        @keyframes label-float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-5px);
            }
        }

        .economy-divider::before {
            content: '';
            position: absolute;
            bottom: 10%;
            left: 50%;

            transform: translateX(-50%) skewX(-15deg);

            width: 0;
            height: 85%;
            background: rgba(251, 191, 36, 0.4);
            z-index: -1;
            border-radius: 2px;
        }

        .economy-divider.is-visible::before {
            animation: highlightEffect 1.2s forwards 3s cubic-bezier(0.65, 0, 0.35, 1);
        }

        @keyframes highlightEffect {
            from {
                width: 0;
            }

            to {
                width: 440px;
            }
        }

        .lightbulb-btn:hover+.lightbulb-label {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes strongFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-35px);
            }
        }

        @keyframes drawCircle {
            to {
                stroke-dashoffset: 0;
            }
        }

        .team-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
            border: 2px solid var(--primary-teal);
        }

        .team-avatar {
            font-size: 4rem;
            margin-bottom: 2rem;
        }

        .team-name {
            color: var(--primary-teal);
            font-size: 1.2rem;
            font-weight: 700;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .team-role {
            color: var(--dark-gray);
            font-size: 0.9rem;
            margin: 0;
        }

        /* Feedback Form */
        .feedback-form {
            background: var(--white);
            padding: 2rem;
            border-radius: 16px;
            max-width: 600px;
            margin: 0 auto;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
        }

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

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

        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 1rem;
            border: 2px solid var(--light-gray);
            border-radius: 8px;
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.2s ease;
        }

        .form-group input:focus,
        .form-group textarea:focus {
            border-color: var(--primary-teal);
            outline: none;
            box-shadow: 0 0 0 3px rgba(26, 95, 122, 0.1);
        }

        .form-group textarea {
            min-height: 150px;
            resize: vertical;
        }

        .submit-btn {
            background: var(--primary-teal);
            color: var(--white);
            border: none;
            padding: 1rem 2rem;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .submit-btn:hover {
            background: var(--primary-yellow);
            color: var(--primary-teal);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        /* Logbook (Achievements) - New Modern Design */
        .logbook-button {
            position: fixed;
            right: 20px;
            top: 32%;
            transform: translateY(-50%);
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-teal), #0d9488);
            color: var(--white);
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.2);
            font-size: 2.2rem;
            cursor: pointer;
            box-shadow: 0 10px 25px -5px rgba(13, 148, 136, 0.4);
            z-index: 999;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px);
        }

        .logbook-button:hover {
            transform: translateY(-52%) rotate(-10deg) scale(1.15);
            box-shadow: 0 15px 35px -5px rgba(13, 148, 136, 0.6);
            background: linear-gradient(135deg, #0d9488, var(--primary-teal));
        }

        .logbook-header-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.8));
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 24px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }

        [data-theme="dark"] .logbook-header-card {
            background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.7));
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .achievement-card {
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            padding: 1.25rem;
            display: flex;
            align-items: center;
            gap: 18px;
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            opacity: 0.5;
            filter: grayscale(1);
            backdrop-filter: blur(5px);
            position: relative;
            overflow: hidden;
        }

        [data-theme="dark"] .achievement-card {
            background: rgba(30, 41, 59, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .achievement-card.unlocked {
            opacity: 1;
            filter: grayscale(0);
            border-left: 5px solid var(--primary-teal);
            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.05);
            background: rgba(255, 255, 255, 0.9);
        }

        [data-theme="dark"] .achievement-card.unlocked {
            background: rgba(30, 41, 59, 0.8);
            border: 1px solid rgba(45, 212, 191, 0.2);
            border-left: 5px solid var(--primary-teal);
        }

        .achievement-card.unlocked:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.15);
        }

        .achievement-icon {
            font-size: 2.2rem;
            min-width: 60px;
            height: 60px;
            background: var(--light-gray);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s;
        }

        [data-theme="dark"] .achievement-icon {
            background: #0f172a;
        }

        .unlocked .achievement-icon {
            background: linear-gradient(135deg, rgba(45, 212, 191, 0.2), rgba(20, 184, 166, 0.1));
            box-shadow: inset 0 0 15px rgba(45, 212, 191, 0.1);
        }

        .achievement-info h4 {
            margin: 0;
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--dark-gray);
            letter-spacing: -0.01em;
        }

        [data-theme="dark"] .achievement-info h4 {
            color: #f1f5f9;
        }

        .achievement-info p {
            margin: 4px 0 0 0;
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.4;
        }

        [data-theme="dark"] .achievement-info p {
            color: #94a3b8;
        }

        .logbook-progress-container {
            position: relative;
            margin: 1.2rem 0;
        }

        .logbook-progress-wrapper {
            background: #e2e8f0;
            height: 24px;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
            position: relative;
        }

        [data-theme="dark"] .logbook-progress-wrapper {
            background: #1e293b;
        }

        .logbook-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #14b8a6, #2dd4bf, #14b8a6);
            background-size: 200% 100%;
            animation: shimmer 1s infinite linear;
            width: 0%;
            transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
        }

        .liquid-wave {
            position: absolute;
            top: -120%;
            left: -50%;
            width: 200%;
            height: 300%;
            background: rgba(255, 255, 255, 0.25);
            border-radius: 38% 42% 40% 45%;
            animation: liquidRotation 5s linear infinite;
            pointer-events: none;
        }

        .liquid-wave.wave-2 {
            top: -130%;
            background: rgba(255, 255, 255, 0.15);
            animation: liquidRotation 7s linear infinite reverse;
            border-radius: 45% 38% 42% 40%;
        }

        @keyframes liquidRotation {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes shimmer {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        .progress-percent {
            position: absolute;
            right: 0;
            top: -25px;
            font-weight: 900;
            color: var(--primary-teal);
            font-size: 0.9rem;
        }

        /* Chatbot */
        .chat-button {
            position: fixed;
            right: 20px;
            top: 52%;
            transform: translateY(-50%);
            width: 59px;
            height: 59px;
            background: var(--primary-teal);
            color: var(--white);
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.2);
            font-size: 2.3rem;
            cursor: pointer;
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
            z-index: 999;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            backdrop-filter: blur(8px);
        }

        .chat-button:hover {
            transform: translateY(-52%) rotate(-10deg) scale(1.15);
            box-shadow: 0 15px 35px -5px rgba(13, 148, 136, 0.6);
        }

        .chat-window {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 500px;
            height: 750px;
            background: #e0f2fe;
            /* Light blue background */
            border-radius: 32px;
            box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
            z-index: 2000;
            display: none;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.4);
            animation: chatSpring 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes chatSpring {
            from {
                transform: translateY(50px) scale(0.9);
                opacity: 0;
            }

            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        .chat-window.active {
            display: flex;
        }

        .chat-header {
            background: #0ea5e9;
            /* Sky blue header */
            color: var(--white);
            padding: 1.75rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        @keyframes meshGradient {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .chat-header .bot-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .chat-header .status-dot {
            width: 10px;
            height: 10px;
            background: #22d3ee;
            border-radius: 50%;
            box-shadow: 0 0 12px #22d3ee;
            animation: pulseBot 2s infinite;
        }

        @keyframes pulseBot {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.4);
                opacity: 0.6;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .chat-header h3 {
            font-size: 1.2rem;
            font-weight: 700;
            letter-spacing: -0.5px;
            margin: 0;
        }

        .chat-messages {
            flex: 1;
            padding: 2rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 1.4rem;
            background: radial-gradient(circle at top right, rgba(26, 95, 122, 0.05), transparent);
            scroll-behavior: smooth;
        }

        .chat-messages::-webkit-scrollbar {
            width: 5px;
        }

        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        .chat-message {
            padding: 1.2rem 1.5rem;
            border-radius: 24px;
            max-width: 88%;
            font-size: 1rem;
            line-height: 1.6;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .chat-message.user {
            background: linear-gradient(135deg, #1a5f7a, #145563);
            color: white;
            align-self: flex-end;
            border-bottom-right-radius: 6px;
            box-shadow: 0 10px 20px -5px rgba(26, 95, 122, 0.3);
        }

        .chat-message.bot {
            background: white;
            color: #1f2937;
            align-self: flex-start;
            border-bottom-left-radius: 6px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
        }

        .chat-input-container {
            padding: 1.5rem 2rem;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            display: flex;
            gap: 1rem;
            align-items: center;
            border-top: 1px solid rgba(0, 0, 0, 0.03);
        }

        .chat-input-wrapper {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
            background: white;
            border-radius: 100px;
            padding: 0.5rem 0.6rem 0.5rem 1.6rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
            border: 1px solid rgba(0, 0, 0, 0.04);
            transition: all 0.3s;
        }

        .chat-input-wrapper:focus-within {
            transform: translateY(-3px);
            box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.08);
            border-color: rgba(26, 95, 122, 0.2);
        }

        .chat-input {
            flex: 1;
            background: transparent !important;
            border: none !important;
            padding: 0.6rem 0;
            font-size: 1rem;
            outline: none;
            color: #1f2937;
        }

        .chat-send {
            background: #1a5f7a;
            color: white;
            border: none;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 6px 15px rgba(26, 95, 122, 0.3);
            flex-shrink: 0;
        }

        .chat-close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.8rem;
            cursor: pointer;
            opacity: 0.7;
            transition: all 0.3s;
        }

        .chat-close-btn:hover {
            opacity: 1;
            transform: rotate(90deg);
        }

        .chat-mic {
            background: none;
            border: none;
            font-size: 1.4rem;
            cursor: pointer;
            padding: 0 10px;
            opacity: 0.6;
            transition: all 0.3s;
            display: flex;
            align-items: center;
        }

        .chat-mic:hover {
            opacity: 1;
            transform: scale(1.2);
        }

        .chat-mic.listening {
            color: #ef4444;
            animation: micPulse 1.5s infinite;
            opacity: 1;
        }

        /* Suggestions */
        .chat-suggestions {
            padding: 0.75rem 1.5rem;
            display: flex;
            gap: 0.6rem;
            overflow-x: auto;
            background: rgba(255, 253, 241, 0.4);
            border-top: 1px solid rgba(0, 0, 0, 0.02);
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .chat-suggestions::-webkit-scrollbar {
            display: none;
        }

        .suggestion-chip {
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(26, 95, 122, 0.15);
            color: #1a5f7a;
            padding: 0.5rem 1rem;
            border-radius: 100px;
            font-size: 0.85rem;
            font-weight: 700;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
        }

        .suggestion-chip:hover {
            background: #1a5f7a;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(26, 95, 122, 0.2);
            border-color: #1a5f7a;
        }

        @keyframes micPulse {
            0% {
                transform: scale(1);
                filter: drop-shadow(0 0 0 rgba(239, 68, 68, 0));
            }

            50% {
                transform: scale(1.3);
                filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.6));
            }

            100% {
                transform: scale(1);
                filter: drop-shadow(0 0 0 rgba(239, 68, 68, 0));
            }
        }

        .chat-send:hover {
            transform: scale(1.15) rotate(8deg);
            background: var(--accent);
        }

        /* Footer */
        footer {
            background: var(--primary-teal);
            color: var(--white);
            padding: 3rem 2rem;
            text-align: center;
        }

        footer a {
            color: var(--primary-yellow);
            text-decoration: none;
        }

        /* Intro Video Responsiveness */
        .intro-modal-container {
            position: relative;
            width: 85%;
            max-width: 850px;
            animation: modalSlideIn 0.5s ease-out;
        }

        .intro-title {
            color: white;
            font-size: 2.0rem;
            margin-bottom: 1.8rem;
            text-align: center;
            text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            font-weight: 800;
            padding: 0 20px;
            animation: slideDown 0.5s ease-out;
        }

        @media (max-width: 1024px) {
            .intro-modal-container {
                width: 70%;
                max-width: 480px;
                /* Noch etwas kleiner auf Tablets */
            }

            .intro-title {
                font-size: 1.0rem;
                /* Schrift noch kleiner */
                margin-bottom: 1rem;
                max-width: 75%;
            }
        }

        @media (max-width: 768px) {
            .intro-modal-container {
                width: 75%;
                max-width: 380px;
            }

            .intro-title {
                font-size: 0.85rem;
                margin-bottom: 0.8rem;
                max-width: 90%;
            }
        }

        @media (max-width: 480px) {
            .intro-modal-container {
                width: 85%;
                max-width: 240px;
            }

            .intro-title {
                font-size: 0.75rem;
                margin-bottom: 0.8rem;
                padding: 0 10px;
            }
        }

        /* Responsive */
        /* Responsive adjustments for Tablets/iPads */
        /* Responsive adjustments for Tablets/iPads (up to 1400px to include iPad Pro) */
        @media (max-width: 1400px) {

            .nav-btn.theme-btn,
            .nav-btn.snow-btn {
                padding: 0.5rem;
                font-size: 1.1rem;
            }

            .btn-text {
                display: none;
            }

            .btn-balance {
                display: none;
            }

            nav {
                padding: 0.8rem 1rem;
            }

            .nav-container {
                gap: 1rem;
            }

            nav .nav-links {
                gap: 1rem;
            }

            nav .nav-links a {
                font-size: 0.85rem;
            }

            /* Chat Window size for Tablets (Custom 430x630) */
            .chat-window {
                width: 430px;
                height: 630px;
                bottom: 20px;
                right: 20px;
                border-radius: 24px;
            }

            .nav-controls {
                margin-right: 260px;
                transform: translateX(-25px);
                /* "Mini mini" shift left as requested (from 20 to 25) */
            }

            /* Fix Flappy Zoll Game Height on Tablets - reverted to 380px */
            .flappy-game-container {
                max-width: 380px !important;
            }

            /* Compact Flappy Header for Tablets (Overrides inline styles) */
            .flappy-game-container>div:first-of-type {
                padding: 0.8rem !important;
                gap: 0.5rem !important;
            }

            .flappy-game-container h2 {
                font-size: 1.1rem !important;
            }

            .flappy-game-container h2+div>span {
                font-size: 0.65rem !important;
                padding: 2px 6px !important;
            }

            .flappy-game-container>div:first-of-type>div:first-child>div:last-child>div:last-child {
                font-size: 1rem !important;
                /* Highscore value */
            }

            .flappy-game-container>div:first-of-type>div:last-child {
                font-size: 0.7rem !important;
                /* Level/Diff row */
            }

            /* Hide neon side accents on Tablets */
            .flappy-neon-left,
            .flappy-neon-right {
                display: none !important;
            }
        }

        @media (max-width: 768px) {
            nav {
                padding: 0.75rem 1rem;
            }

            .nav-container {
                gap: 1rem;
            }

            .nav-links {
                display: flex;
                flex-direction: column;
                position: fixed;
                top: 0;
                right: -100%;
                width: 80%;
                max-width: 300px;
                height: 100vh;
                background: var(--white);
                padding: 80px 2rem 2rem;
                box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
                transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
                z-index: 1001;
                gap: 1rem;
                overflow-y: auto;
            }

            .nav-controls .nav-btn {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 2px;
                padding: 0.6rem 0.4rem;
                min-width: 65px;
            }

            .nav-controls .nav-btn .btn-text {
                display: block !important;
                font-size: 0.7rem;
            }

            .nav-controls .nav-btn .btn-icon {
                font-size: 1.2rem;
            }

            .nav-links.active {
                right: 0;
            }

            .nav-backdrop {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0, 0, 0, 0.4);
                backdrop-filter: blur(4px);
                opacity: 0;
                visibility: hidden;
                transition: all 0.4s;
                z-index: 1000;
            }

            .nav-backdrop.active {
                opacity: 1;
                visibility: visible;
            }

            nav .nav-links a {
                font-size: 1.2rem;
                padding: 0.8rem 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                width: 100%;
                display: block;
            }

            .nav-controls {
                gap: 0.3rem;
            }

            .nav-btn {
                padding: 0.4rem 0.6rem;
                font-size: 0.8rem;
            }

            .hamburger {
                display: flex;
                z-index: 1002;
            }

            .btn-text {
                display: none;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .cta-grid {
                grid-template-columns: 1fr;
            }

            section h2 {
                font-size: 2rem;
            }

            .chat-window {
                width: calc(100% - 2rem);
                height: 450px;
                max-height: 60vh;
                right: 1rem;
                left: 1rem;
                bottom: 20px;
                border-radius: 20px;
            }

            .time-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .time-slot {
                font-size: 1.3rem;
                padding: 1.2rem 0.8rem;
            }

            .time-info {
                font-size: 1rem;
            }
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--accent), var(--secondary-accent));
            color: var(--white);
            border: none;
            padding: 1rem 2rem;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
        }

        .btn-primary:hover {
            background: var(--primary-yellow);
            color: var(--primary-teal);
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        .btn-primary:active {
            transform: scale(0.98);
        }

        .hidden {
            display: none;
        }

        /* World Map Section - Country Cards */
        #weltkarte {
            background: none;
            padding: 4rem 2rem;
        }

        .country-cards-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /* 4 Spalten für korrektes Schachbrett */
            gap: 1.5rem;
            max-width: 1200px;
            margin: 2rem auto;
        }

        /* Tablets Portrait / iPad (600px bis 1024px): 4 Spalten beibehalten */
        @media (max-width: 1024px) {
            .country-cards-grid {
                grid-template-columns: repeat(4, 1fr);
                gap: 1rem;
            }
        }

        /* Sehr kleine Tablets / große Phones: 2 Spalten */
        @media (max-width: 700px) {
            .country-cards-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.8rem;
            }
        }

        /* Mobile: 1 Spalte */
        @media (max-width: 480px) {
            .country-cards-grid {
                grid-template-columns: 1fr;
            }
        }

        .country-card {
            background: #f0faff;
            padding: 2rem;
            border-radius: 16px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border: 2px solid rgba(139, 92, 246, 0.1);
            animation: teamFloat 9s ease-in-out infinite;
        }

        .country-card:nth-child(even) {
            animation-delay: -1.5s;
        }

        .country-card:nth-child(3n) {
            animation-delay: -3s;
        }

        .country-card:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            border-color: var(--primary-teal);
        }

        .country-flag {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            line-height: 1;
        }

        .country-card {
            text-align: center;
            padding: 1.5rem;
            border-radius: 12px;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 1px solid rgba(0, 0, 0, 0.1);
            background: #f8fafc;
        }

        .country-card:nth-child(odd) {
            background: #e3f2fd;
        }

        .country-card:nth-child(even) {
            background: #bfdbfe;
        }

        .country-card h2,
        .country-card h3 {
            color: #1e3a8a;
            transition: color 0.3s ease;
        }

        [data-theme="dark"] .country-card {
            background: #1e293b !important;
            border-color: #334155 !important;
        }

        [data-theme="dark"] .country-card h2,
        [data-theme="dark"] .country-card h3 {
            color: #38bdf8 !important;
        }

        @media (min-width: 768px) {
            .country-flag {
                font-size: 5rem;
            }
        }

        @media (min-width: 1024px) {
            .country-flag {
                font-size: 6rem;
                margin-bottom: 1.5rem;
            }
        }

        .country-card h3 {
            color: var(--primary-teal);
            font-size: 1.5rem;
            font-weight: 700;
            margin: 0.5rem 0;
        }

        .person-info {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--dark-gray);
            margin: 0.5rem 0;
        }

        .person-role {
            font-size: 1rem;
            color: var(--dark-gray);
            opacity: 0.8;
            margin: 0.5rem 0;
        }

        .story-modal-content {
            text-align: left;
        }

        .story-modal-content h2 {
            color: var(--primary-teal);
            margin-bottom: 0.5rem;
        }

        .story-modal-content .story-meta {
            color: var(--dark-gray);
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
            font-weight: 600;
        }

        .story-modal-content .story-text {
            font-size: 1.15rem;
            line-height: 1.8;
            color: var(--dark-gray);
            background: var(--light-gray);
            padding: 1.5rem;
            border-radius: 12px;
            border-left: 4px solid var(--primary-teal);
        }

        .crossed-out {
            position: relative;
        }

        .crossed-out::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -5%;
            width: 0;
            height: 4px;
            background: #ef4444;
            /* Red color matching button */
            animation: strike 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            transform: rotate(-3deg);
            z-index: 10;
            border-radius: 2px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        @keyframes strike {
            to {
                width: 110%;
            }
        }

        /* Team Animation Styles */
        #romantic-text {
            font-weight: 700;
            font-family: 'Pacifico', cursive !important;
            font-size: 2.8rem !important;
            letter-spacing: 1px !important;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        }

        .team-collective-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 25px;
            pointer-events: none;
            z-index: 10;
        }

        .team-member-fly {
            opacity: 0;
            font-family: 'Pacifico', cursive !important;
            font-weight: 700;
            font-size: 2.2rem;
            animation: teamFlyIn 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            transition: all 0.3s ease;
            cursor: pointer;
            pointer-events: auto;
            display: inline-block;
        }

        .team-member-fly:hover {
            transform: scale(1.15) translateY(-5px);
            filter: brightness(1.2);
            text-shadow: 0 0 15px rgba(0, 0, 0, 0.2), 0 0 10px currentColor;
            z-index: 20;
        }

        @keyframes teamFlyIn {
            0% {
                opacity: 0;
                transform: scale(0.5) translateY(30px);
            }

            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        /* Animated Divider Style */
        .economy-divider {
            text-align: center;
            margin: 4rem auto;
            /* Mehr Abstand oben/unten und zentriert */
            padding: 1.5rem 2rem;
            max-width: 600px;
            /* Kompakter als das Zitat */
            position: relative;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.3);
            border: 3px solid #000000;
            border-radius: 20px;
            backdrop-filter: blur(5px);
        }

        .economy-divider span {
            font-family: 'Pacifico', cursive;
            font-size: 2.5rem;
            color: var(--primary-teal);
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            transition: none;
        }

        .economy-divider.is-visible span {
            animation: writeLetter 0.35s forwards;
        }

        @keyframes writeLetter {
            0% {
                opacity: 0;
                transform: translateY(10px) scale(0.8);
            }

            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        /* Staggered delays for each letter */
        .economy-divider.is-visible span:nth-child(1) {
            animation-delay: 0.15s;
        }

        .economy-divider.is-visible span:nth-child(2) {
            animation-delay: 0.35s;
        }

        .economy-divider.is-visible span:nth-child(3) {
            animation-delay: 0.55s;
        }

        .economy-divider.is-visible span:nth-child(4) {
            animation-delay: 0.75s;
        }

        .economy-divider.is-visible span:nth-child(5) {
            animation-delay: 0.95s;
        }

        .economy-divider.is-visible span:nth-child(6) {
            animation-delay: 1.15s;
        }

        .economy-divider.is-visible span:nth-child(7) {
            animation-delay: 1.35s;
        }

        .economy-divider.is-visible span:nth-child(8) {
            animation-delay: 1.55s;
        }

        .economy-divider.is-visible span:nth-child(9) {
            animation-delay: 1.75s;
        }

        @keyframes drawCircle {
            to {
                stroke-dashoffset: 0;
            }
        }

        /* Sadhguru Quote Styles */
        .quote-divider {
            text-align: center;
            margin: 6rem auto;
            padding: 3rem 2rem;
            max-width: 1000px;
            position: relative;
            font-family: 'Pacifico', cursive;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            backdrop-filter: blur(5px);
            border: 3px solid #000000;
            /* Schwarze Kontur added */
        }

        .quote-divider span {
            font-size: 2.2rem;
            color: #ef4444;
            font-weight: 700;
            text-shadow: 0 0 1px #ef4444;
            display: inline-block;
            opacity: 0;
            transform: translateY(10px);
            white-space: pre-wrap;
            transition: none;
        }

        .quote-divider.is-visible span {
            animation: writeLetter 0.4s forwards;
        }

        @keyframes heartPulse {

            0%,
            100% {
                transform: scale(1);
                opacity: 1;
            }

            50% {
                transform: scale(1.2);
                opacity: 0.8;
            }
        }

        /* Full Quote Highlight Effect */
        .quote-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) skewX(-10deg);
            width: 0;
            height: 65%;
            /* Smaller marker as requested */
            background: rgba(225, 255, 0, 0.6);
            /* Neon Yellow */
            box-shadow: 0 0 15px rgba(225, 255, 0, 0.4);
            z-index: -1;
            border-radius: 4px;
            pointer-events: none;
        }

        .quote-divider.is-visible::before {
            animation: quoteHighlight 1.5s forwards 4s cubic-bezier(0.65, 0, 0.35, 1);
        }

        /* Unique Marker Color for Closing Quote */
        /* Unique Marker Color for Closing Quote - APPLIED TO INNER WRAPPER */
        .closing-text-wrapper {
            position: relative;
            display: inline-block;
            z-index: 1;
        }

        .closing-text-wrapper::before {
            content: '';
            display: none;
            /* Marker komplett entfernt */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) skewX(-10deg);
            background: #ffff00;
            /* Vibrant Neon Yellow */
            box-shadow: 0 0 25px rgba(255, 255, 0, 0.6);
            /* Glowing effect */
            /* Glowing effect */
            height: 85%;
            z-index: -1;
            border-radius: 4px;
            pointer-events: none;
            width: 0;
            opacity: 0;
        }

        #closing-quote.is-visible .closing-text-wrapper::before {
            animation: quoteHighlight 1s forwards 3.2s cubic-bezier(0.65, 0, 0.35, 1);
        }

        @keyframes quoteHighlight {
            from {
                width: 0;
                opacity: 0;
            }

            to {
                width: 94%;
                opacity: 1;
            }
        }

        /* Neon Marker for Team Roles */
        .role-highlight {
            position: relative;
            z-index: 1;
            display: inline-block;
        }

        .role-highlight::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) skewX(-10deg);
            width: 0;
            height: 80%;
            background: #ffff00;
            box-shadow: 0 0 25px rgba(255, 255, 0, 0.6);
            z-index: -1;
            border-radius: 4px;
            pointer-events: none;
            opacity: 0;
            transition: all 1.5s cubic-bezier(0.65, 0, 0.35, 1);
        }

        .role-highlight.active::before {
            width: 110%;
            opacity: 1;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* Neue "Blur Reveal" Animation für Szenario A */
        @keyframes blurReveal {
            0% {
                opacity: 0;
                filter: blur(10px);
                transform: scale(0.95) translateY(10px);
            }

            100% {
                opacity: 1;
                filter: blur(0);
                transform: scale(1) translateY(0);
            }
        }

        .fly-in-text {
            animation: blurReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        /* Toast Notifications */
        #toast-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
        }

        .toast {
            background: rgba(15, 23, 42, 0.9);
            color: white;
            padding: 1rem 1.5rem;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            display: flex;
            align-items: center;
            gap: 12px;
            font-family: 'Outfit', sans-serif;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            min-width: 300px;
            transform: translateX(120%);
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            pointer-events: auto;
        }

        .toast.show {
            transform: translateX(0);
        }

        .toast-icon {
            font-size: 1.5rem;
        }

        .toast-content {
            display: flex;
            flex-direction: column;
        }

        .toast-title {
            font-weight: 700;
            font-size: 0.95rem;
            color: #fbbf24;
        }

        .toast-msg {
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.8);
        }

        /* Tablet/Mobile Adjustments for Quote */
        @media (max-width: 768px) {
            .quote-divider span {
                font-size: 1.8rem;
            }

            .quote-divider {
                margin: 4rem 1.5rem;
                padding: 2rem 1rem;
            }
        }

        /* 📱 Tablet/Mobile: Floating Buttons stop following scroll */
        @media (max-width: 1200px) {

            .sound-toggle,
            .logbook-button,
            .chat-button {
                position: absolute !important;
            }

            .sound-toggle {
                top: 160px !important;
                right: 15px !important;
            }

            .logbook-button {
                top: 360px !important;
                right: 15px !important;
                transform: none !important;
            }

            .chat-button {
                top: 560px !important;
                right: 15px !important;
                transform: none !important;
            }
        }

        @keyframes supplyMapFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        /* Globe auf Tablet mini minimal kleiner */
        @media (max-width: 1024px) {
            #globe-container {
                height: 520px !important;
            }
        }

        /* 🔐 Modern Auth Modal Styles */
        .auth-container {
            max-width: 450px;
            margin: 0 auto;
            padding: 1rem 0.5rem;
        }

        .auth-header {
            margin-bottom: 2.5rem;
        }

        .auth-header h2 {
            font-size: 2.2rem;
            font-weight: 900;
            color: var(--primary-teal);
            letter-spacing: -0.04em;
            margin-bottom: 1.2rem;
            /* Mehr Abstand nach unten */
        }

        .auth-header p {
            color: #64748b;
            font-size: 1rem;
            line-height: 1.5;
        }

        .auth-input-group {
            margin-bottom: 1.5rem;
            text-align: left;
        }

        .auth-input-group label {
            display: block;
            font-size: 0.85rem;
            font-weight: 800;
            color: var(--dark-gray);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.6rem;
        }

        .auth-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .auth-input-wrapper i {
            position: absolute;
            left: 1rem;
            color: #94a3b8;
            width: 18px;
            height: 18px;
            pointer-events: none;
        }

        .auth-input {
            width: 100%;
            padding: 0.85rem 1rem 0.85rem 3.5rem;
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 1rem;
            font-family: inherit;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: var(--dark-gray);
        }

        .auth-input:focus {
            background: white;
            border-color: var(--primary-teal);
            outline: none;
            box-shadow: 0 0 0 4px rgba(26, 95, 122, 0.1);
            transform: translateY(-1px);
        }

        .auth-actions {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-top: 2rem;
        }

        .auth-btn {
            width: 100%;
            padding: 1rem;
            border-radius: 14px;
            font-size: 1rem;
            font-weight: 800;
            cursor: pointer;
            border: none;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.8rem;
        }

        .auth-btn.login {
            background: linear-gradient(135deg, var(--primary-teal), #0d9488);
            color: white;
            box-shadow: 0 4px 15px rgba(26, 95, 122, 0.3);
        }

        .auth-btn.register {
            background: white;
            color: #6366f1;
            border: 2px solid #e0e7ff;
        }

        .auth-btn:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .auth-btn:active {
            transform: translateY(0);
        }

        .auth-message {
            margin-top: 1.5rem;
            font-weight: 700;
            font-size: 0.9rem;
            min-height: 1.5rem;
            padding: 0.5rem;
            border-radius: 8px;
            transition: all 0.3s;
        }

        .auth-message.error {
            color: #ef4444;
            background: #fef2f2;
        }

        .auth-message.success {
            color: #10b981;
            background: #ecfdf5;
        }

        [data-theme="dark"] .auth-header p {
            color: #94a3b8;
        }

        [data-theme="dark"] .auth-input {
            background: #1e293b;
            border-color: #334155;
            color: #f1f5f9;
        }

        [data-theme="dark"] .auth-input:focus {
            background: #0f172a;
            border-color: var(--primary-teal);
        }

        [data-theme="dark"] .auth-btn.register {
            background: #334155;
            color: #a5b4fc;
            border: none;
        }

        [data-theme="dark"] .auth-input-group label {
            color: #94a3b8;
        }

        /* Modal Fact Bulb */
        .modal-fact-bulb-btn {
            position: absolute;
            top: -10px;
            left: -10px;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: #fbbf24;
            border: 3px solid var(--white);
            color: #000;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 100;
            box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
            animation: bulbPulse 2s infinite;
            padding: 0;
            outline: none;
        }

        .modal-fact-bulb-btn:hover {
            transform: scale(1.1) rotate(10deg);
            box-shadow: 0 0 30px rgba(251, 191, 36, 0.8);
        }

        @keyframes bulbPulse {
            0% {
                box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
            }

            50% {
                box-shadow: 0 0 35px rgba(251, 191, 36, 0.9);
                transform: scale(1.05);
            }

            100% {
                box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
            }
        }

        /* Fact Bubble (Legacy - kept for safety or alternative uses) */
        .fact-bubble {
            display: none;
            /* Using the Overlay Modal instead now */
        }