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

        :root{
            --bg-deep:#1a1510;
            --bg-mid:#211a12;
            --bg-warm:#1a1510;
            --card-bg:#2a231a;
            --card-border:rgba(212,165,116,0.12);
            --gold:#d4a574;
            --copper:#b87333;
            --accent-green:#2d6a4f;
            --primary-brown:#6b4423;
            --text-light:#ffffff;
            --text-muted:#e8e2d6;
            --text-dim:#c9bfb0;
            --sidebar-bg:#1e1814;
            --steam-blue:#66c0f4;
            --itchio-red:#fa5c5c;
            --youtube-red:#ff0000;
            --steam-blue-transparent:rgba(102,192,244,0.3);
            --itchio-red-transparent:rgba(250,92,92,0.3);
            --youtube-red-transparent:rgba(255,0,0,0.3);
            --smiley-yellow:#FFB800;
            --hospital-red:#e74c3c;
            --imperium-gold:#c49a2a;
        }

        html{scroll-behavior:smooth;overflow-x:hidden}

        body{
            font-family:'Inter',sans-serif;
            background:var(--bg-deep);
            color:var(--text-muted);
            line-height:1.7;
            overflow-x:hidden;
            margin-left:260px;
        }

        /* Subtle grain texture */
        body::after{
            content:'';position:fixed;top:0;left:0;width:100%;height:100%;
            opacity:0.02;pointer-events:none;z-index:10000;
            background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-repeat:repeat;
        }

        .serif-title{font-family:'Playfair Display',serif;color:var(--gold);line-height:1.3}
        .pixel-font{font-family:'Press Start 2P',monospace}
        h1{font-size:clamp(2.2rem,5.5vw,4.2rem)}
        h2{font-size:clamp(1.5rem,4vw,2.5rem);margin-bottom:1.5rem}
        h3{font-size:clamp(1.1rem,2.5vw,1.6rem);margin-bottom:1rem}
        p{color:var(--text-dim);max-width:800px;margin:0 auto 1rem}

        /* ===== PARTICLE CANVAS ===== */
        #particle-canvas{
            position:fixed;top:0;left:260px;width:calc(100% - 260px);height:100%;
            z-index:0;pointer-events:none;
        }

        /* ===== SIDEBAR ===== */
        .sidebar{
            position:fixed;top:0;left:0;width:260px;height:100vh;
            background:var(--sidebar-bg);z-index:1000;
            display:flex;flex-direction:column;padding:2rem 1.5rem;
            overflow-y:auto;border-right:1px solid var(--card-border);
        }
        .sidebar-logo{text-align:center;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--card-border)}
        .sidebar-logo a{text-decoration:none}
        .sidebar-logo img{width:180px;height:auto}
        .nav-group{margin-bottom:0.5rem}
        .nav-group-label{
            display:block;font-size:0.7rem;font-weight:700;text-transform:uppercase;
            letter-spacing:1.2px;color:var(--gold);padding:0 1rem;margin-bottom:0.3rem;
            font-variant:small-caps;
        }
        .sidebar-nav{list-style:none}
        .sidebar-nav li{margin-bottom:0.1rem}
        .sidebar-nav a{
            display:block;padding:0.5rem 1rem;color:var(--text-muted);
            text-decoration:none;font-weight:500;font-size:0.92rem;
            border-radius:8px;transition:all 0.3s;
        }
        .sidebar-nav a:hover{background:rgba(212,165,116,0.08);color:var(--gold)}
        .sidebar-nav a.active{background:rgba(212,165,116,0.12);color:var(--gold)}
        .sidebar-bottom{padding-top:1rem;border-top:1px solid var(--card-border);margin-top:auto}
        .sidebar-legal a{
            display:block;padding:0.35rem 1rem;font-size:0.8rem;
            color:var(--text-dim);text-decoration:none;transition:color 0.2s;
        }
        .sidebar-legal a:hover{color:var(--gold)}

        /* Sound Toggle */
        .sound-toggle{
            display:flex;align-items:center;gap:0.5rem;
            padding:0.5rem 1rem;margin-top:0.8rem;cursor:pointer;
            background:rgba(212,165,116,0.05);border:1px solid rgba(212,165,116,0.2);
            border-radius:8px;color:var(--text-dim);font-size:0.8rem;
            transition:all 0.3s;font-family:'Inter',sans-serif;width:100%;
        }
        .sound-toggle:hover{background:rgba(212,165,116,0.1);color:var(--gold)}

        /* ===== FLOATING DOT NAV ===== */
        .dot-nav{
            position:fixed;right:1.5rem;top:50%;transform:translateY(-50%);
            z-index:999;display:flex;flex-direction:column;gap:1rem;
        }
        .dot-nav a{
            width:12px;height:12px;border-radius:50%;
            background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);
            transition:all 0.3s;display:block;position:relative;
        }
        .dot-nav a::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 44px;
            height: 44px;
            border-radius: 50%;
        }
        .dot-nav a:hover,.dot-nav a.active{
            background:var(--gold);border-color:var(--gold);
            box-shadow:0 0 10px rgba(212,165,116,0.4);transform:scale(1.3);
        }

        /* ===== MOBILE TOPBAR ===== */
        .mobile-topbar{
            display:none;position:fixed;top:0;left:0;width:100%;height:56px;
            background:var(--sidebar-bg);z-index:1001;padding:0 1rem;
            align-items:center;justify-content:space-between;
            border-bottom:1px solid var(--card-border);
        }
        .mobile-topbar .mobile-logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none}
        .mobile-topbar .mobile-logo img{height:36px;width:auto}
        .mobile-topbar .mobile-logo span{font-family:'Playfair Display',serif;font-size:1rem;font-weight:700;color:var(--text-muted)}
        .mobile-menu-btn{
            width:40px;height:40px;background:transparent;
            border:1px solid rgba(212,165,116,0.3);border-radius:8px;cursor:pointer;
            display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
            transition:all 0.3s;
        }
        .mobile-menu-btn:hover{background:rgba(212,165,116,0.1)}
        .mobile-menu-btn span{display:block;width:20px;height:2px;background:var(--gold);transition:all 0.3s}
        .sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:999;opacity:0;transition:opacity 0.3s;pointer-events:none}
        .sidebar-overlay.active{display:block;opacity:1;pointer-events:auto}

        /* ===== SECTIONS ===== */
        section{position:relative;z-index:1}
        .container{max-width:1400px;margin:0 auto;padding:5rem 2rem}
        .section-title{text-align:center;margin-bottom:4rem}
        .section-subtitle{text-align:center;font-style:italic;color:var(--text-dim);max-width:700px;margin:-2rem auto 4rem}

        /* Scroll Reveal */
        .reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s ease,transform 0.8s ease}
        .reveal.visible{opacity:1;transform:translateY(0)}
        .reveal-delay-1{transition-delay:0.15s}
        .reveal-delay-2{transition-delay:0.3s}
        .reveal-delay-3{transition-delay:0.45s}

        /* ===== HERO ===== */
        #hero{
            min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
            text-align:center;padding:4rem 2rem 2rem;position:relative;
            background:radial-gradient(ellipse at 50% 50%,rgba(212,165,116,0.03) 0%,transparent 70%);
        }
        .hero-content{position:relative;z-index:1}
        .hero-logo{width:250px;height:auto;margin:0 auto 2rem;display:block;filter:drop-shadow(0 0 30px rgba(212,165,116,0.2))}
        .hero-badge{
            display:inline-block;padding:0.5rem 1.5rem;border-radius:50px;
            font-size:0.8rem;font-weight:700;margin-bottom:2rem;
            text-transform:uppercase;letter-spacing:2px;
            background:transparent;border:1px solid var(--gold);
            color:var(--gold);font-variant:small-caps;
            animation:badge-pulse 3s ease-in-out infinite;
        }
        @keyframes badge-pulse{0%,100%{box-shadow:0 0 5px rgba(212,165,116,0.2)}50%{box-shadow:0 0 15px rgba(212,165,116,0.3)}}

        .hero-title{color:var(--text-light)!important;margin-bottom:0.5rem}
        .hero-subtitle{font-size:clamp(1.1rem,2.5vw,1.6rem);margin:1.5rem 0;color:var(--text-dim);font-style:italic;line-height:1.6}
        @keyframes blink-caret{from,to{border-color:transparent}50%{border-color:var(--gold)}}
        .btn{
            padding:1rem 2.5rem;border:none;border-radius:50px;font-weight:600;
            font-size:1rem;cursor:pointer;transition:all 0.3s;text-decoration:none;
            display:inline-block;font-family:'Inter',sans-serif;
        }
        .btn-primary{
            background:var(--primary-brown);color:white;
            box-shadow:0 4px 15px rgba(107,68,35,0.3);
        }
        .btn-primary:hover{transform:translateY(-2px);background:var(--copper);box-shadow:0 6px 20px rgba(184,115,51,0.3)}
        .btn-secondary{background:transparent;border:2px solid var(--gold);color:var(--gold)}
        .btn-secondary:hover{background:var(--gold);color:var(--bg-deep)}
        @keyframes spin-slow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
        @keyframes float-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

        /* ===== ABOUT CARDS ===== */
        .about-grid{display:grid;grid-template-columns:2fr 1fr;gap:2rem;margin-top:4rem}
        .about-card{
            background:var(--card-bg);padding:2.5rem;border-radius:16px;
            border:1px solid var(--card-border);transition:all 0.4s;position:relative;overflow:hidden;
        }
        .about-card::before{
            content:'';position:absolute;top:0;left:0;right:0;height:2px;
            background:linear-gradient(90deg,transparent,var(--gold),transparent);
            opacity:0;transition:opacity 0.4s;
        }
        .about-card:hover{border-color:rgba(212,165,116,0.3);transform:translateY(-5px);box-shadow:0 10px 40px rgba(212,165,116,0.1)}
        .about-card:hover::before{opacity:1}
        .about-card-icon{font-size:3rem;margin-bottom:1.5rem}
        .about-card h3{color:var(--gold)}

        /* ===== PORTFOLIO ===== */
        .portfolio-category-title{
            text-align:left;border-left:3px solid var(--gold);padding-left:1rem;
            margin-bottom:2rem;margin-top:3rem;color:var(--gold);
            font-family:'Playfair Display',serif;font-size:1.6rem;
        }
        .portfolio-showcase{
            background:var(--card-bg);border-radius:20px;overflow:hidden;
            border:1px solid var(--card-border);margin-bottom:3rem;
            transition:all 0.4s;width:100%;max-width:100%;
        }
        .portfolio-content{padding:2.5rem}
        .portfolio-badge{
            display:inline-block;padding:0.4rem 1rem;border-radius:20px;
            font-size:0.85rem;font-weight:600;margin-bottom:1rem;
        }

        /* CRT Monitor Frame */
        .crt-frame{
            position:relative;background:#0a0a0a;padding:1.5rem;
            border-radius:16px 16px 0 0;overflow:hidden;
        }
        .crt-frame::before{
            content:'';position:absolute;top:0;left:0;right:0;bottom:0;
            background:repeating-linear-gradient(0deg,rgba(0,0,0,0.15) 0px,rgba(0,0,0,0.15) 1px,transparent 1px,transparent 3px);
            pointer-events:none;z-index:2;animation:scanline-move 10s linear infinite;
        }
        .crt-frame::after{
            content:'';position:absolute;top:0;left:0;right:0;bottom:0;
            background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,0.4));
            pointer-events:none;z-index:3;
        }
        @keyframes scanline-move{from{background-position:0 0}to{background-position:0 100vh}}

        .crt-carousel{position:relative;width:100%;overflow:hidden;border-radius:8px}
        .crt-carousel-inner{display:flex;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1)}
        .crt-carousel-inner img{width:100%;flex-shrink:0;height:300px;object-fit:cover}
        .crt-controls{
            display:flex;justify-content:center;gap:0.8rem;
            padding:0.8rem 0;position:relative;z-index:4;
        }
        .crt-dot{
            width:10px;height:10px;border-radius:50%;background:rgba(212,165,116,0.3);
            border:none;cursor:pointer;transition:all 0.3s;
        }
        .crt-dot.active{background:var(--gold);box-shadow:0 0 8px rgba(212,165,116,0.4)}
        .crt-power{
            position:absolute;top:0.8rem;right:0.8rem;z-index:5;
            width:10px;height:10px;border-radius:50%;background:var(--accent-green);
            box-shadow:0 0 6px rgba(45,106,79,0.5);animation:power-blink 4s ease-in-out infinite;
        }
        @keyframes power-blink{0%,90%,100%{opacity:1}95%{opacity:0.3}}

        /* Platform links grid */
        .platform-grid{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
            gap:1rem;margin:2rem 0;background:rgba(0,0,0,0.3);padding:1.5rem;border-radius:12px;
        }
        .platform-link{
            background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.1);
            border-radius:12px;padding:1rem;text-align:center;text-decoration:none;transition:all 0.3s;
        }
        .platform-link:hover{transform:translateY(-3px);box-shadow:0 5px 20px rgba(0,0,0,0.3)}
        .platform-link .icon{font-size:2rem}
        .platform-link .label{font-weight:600;margin-top:0.5rem;font-size:0.9rem}
        .platform-link .sublabel{color:var(--text-dim);font-size:0.75rem}

        /* Game feature list */
        .game-features{color:var(--text-dim);margin:2rem 0;line-height:2.2;list-style:none;padding:0}
        .game-features li{padding-left:0.5rem}
        .game-status-box{
            padding:1.5rem;border-radius:12px;margin-bottom:1.5rem;
            background:rgba(255,255,255,0.03);
        }
        .game-status-box p{font-size:0.95rem;color:var(--text-muted);margin:0}

        /* ===== APP CARDS ===== */
        .app-card{
            background:var(--card-bg);border-radius:16px;overflow:hidden;
            border:1px solid var(--card-border);margin-bottom:2rem;
            transition:all 0.4s;width:100%;max-width:100%;
        }
        .app-card:hover{border-color:rgba(212,165,116,0.3);transform:translateY(-3px);box-shadow:0 8px 30px rgba(107,68,35,0.15)}
        .app-card-inner{
            display:grid;grid-template-columns:auto 1fr;gap:2rem;
            padding:2.5rem;align-items:start;
        }
        .app-card:nth-child(even) .app-card-inner{grid-template-columns:1fr auto}
        .app-card-icon{
            font-size:4rem;width:100px;height:100px;
            display:flex;align-items:center;justify-content:center;
            background:rgba(212,165,116,0.06);border-radius:16px;
            border:1px solid rgba(212,165,116,0.1);
            overflow:hidden;
        }
        .app-card-icon img{
            width:100%;height:100%;object-fit:cover;border-radius:14px;display:block;
        }
        .app-card-content h3{color:var(--gold);font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:0.5rem}
        .app-card-content p{color:var(--text-dim);line-height:1.7;font-size:0.95rem;max-width:100%}
        .app-card-badge{
            display:inline-block;padding:0.3rem 0.8rem;border-radius:12px;
            font-size:0.75rem;font-weight:600;margin-bottom:0.8rem;
            background:rgba(45,106,79,0.15);color:var(--accent-green);
            border:1px solid rgba(45,106,79,0.3);
        }
        .app-card-price{
            display:inline-block;margin-top:0.8rem;padding:0.3rem 0.8rem;
            border-radius:8px;font-size:0.85rem;font-weight:600;
            background:rgba(212,165,116,0.1);color:var(--gold);
        }

        /* ===== POLL — Terminal Style ===== */
        .poll-terminal{
            max-width:700px;margin:3rem auto;background:#0a0e0a;
            padding:0;border-radius:12px;border:1px solid rgba(45,106,79,0.3);
            overflow:hidden;font-family:'Press Start 2P',monospace;
        }
        .poll-terminal-bar{
            background:rgba(45,106,79,0.1);padding:0.6rem 1rem;
            display:flex;align-items:center;gap:0.5rem;
            border-bottom:1px solid rgba(45,106,79,0.2);
        }
        .poll-terminal-bar .dot{width:8px;height:8px;border-radius:50%}
        .poll-terminal-bar .dot.r{background:#ff5f57}
        .poll-terminal-bar .dot.y{background:#ffbd2e}
        .poll-terminal-bar .dot.g{background:#28c840}
        .poll-terminal-bar span{color:var(--accent-green);font-size:0.55rem;margin-left:0.5rem}
        .poll-terminal-body{padding:2rem}
        .poll-terminal-body .prompt{color:var(--accent-green);font-size:0.6rem;margin-bottom:1.5rem;line-height:1.8}

        .poll-option{margin:0.8rem 0;position:relative}
        .poll-option input[type="radio"]{display:none}
        .poll-option label{
            display:block;padding:1rem 1.2rem;background:rgba(45,106,79,0.04);
            border:1px solid rgba(45,106,79,0.2);border-radius:8px;cursor:pointer;
            transition:all 0.3s;font-family:'Inter',sans-serif;font-size:0.95rem;
            color:var(--text-muted);
        }
        .poll-option input[type="radio"]:checked + label{
            background:rgba(45,106,79,0.15);border-color:var(--accent-green);
            color:var(--accent-green);box-shadow:0 4px 15px rgba(45,106,79,0.15);
        }
        .poll-option label:hover{border-color:rgba(45,106,79,0.5);transform:translateX(5px)}
        .poll-option.disabled{opacity:0.4;pointer-events:none}
        .poll-option .dev-badge{
            position:absolute;right:1rem;top:50%;transform:translateY(-50%);
            padding:0.2rem 0.6rem;border-radius:12px;font-size:0.7rem;font-weight:600;
        }
        .poll-submit{width:100%;margin-top:1.5rem;font-family:'Press Start 2P',monospace;font-size:0.7rem;letter-spacing:1px}
        .poll-results{margin-top:2rem;padding:1.5rem;background:rgba(45,106,79,0.05);border-radius:10px;display:none}
        .poll-results.active{display:block}
        .result-bar{margin:1rem 0}
        .result-label{display:flex;justify-content:space-between;margin-bottom:0.5rem;font-weight:500;color:var(--text-muted);font-size:0.9rem}
        .result-progress{height:28px;background:rgba(255,255,255,0.05);border-radius:5px;overflow:hidden}
        .result-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--copper));transition:width 0.8s ease;display:flex;align-items:center;padding:0 1rem;color:var(--bg-deep);font-weight:700;font-size:0.85rem;border-radius:5px}
        .poll-info-box{
            background:rgba(212,165,116,0.08);padding:1rem;border-radius:8px;
            border-left:3px solid var(--gold);margin-bottom:2rem;font-size:0.9rem;
            color:var(--text-dim);
        }

        /* ===== TECH STACK ===== */
        .tech-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-top:4rem}
        .tech-card{
            background:var(--card-bg);padding:2.5rem 2rem;border-radius:16px;
            border:1px solid var(--card-border);text-align:center;transition:all 0.4s;
            position:relative;
        }
        .tech-card::after{
            content:'';position:absolute;inset:0;border-radius:16px;
            background:radial-gradient(circle at 50% 0%,rgba(212,165,116,0.15),transparent 70%);
            opacity:0;transition:opacity 0.4s;pointer-events:none;
        }
        .tech-card:hover{transform:translateY(-8px);border-color:rgba(212,165,116,0.3);box-shadow:0 15px 40px rgba(0,0,0,0.3)}
        .tech-card:hover::after{opacity:1}
        .tech-icon{font-size:3.5rem;margin-bottom:1rem}
        .tech-card h3{font-family:'Playfair Display',serif;color:var(--gold);margin-bottom:0.8rem;font-size:1.3rem}
        .tech-card p{color:var(--text-dim);font-size:0.9rem;line-height:1.6}

        /* ===== BEHIND THE SCENES ===== */
        .timeline{max-width:900px;margin:4rem auto;position:relative}
        .timeline::before{
            content:'';position:absolute;left:30px;top:0;bottom:0;width:2px;
            background:linear-gradient(to bottom,var(--gold),var(--copper),var(--primary-brown));
        }
        .process-step{display:flex;gap:2rem;margin-bottom:3rem;align-items:flex-start}
        .step-number{
            min-width:60px;height:60px;background:var(--card-bg);
            color:var(--gold);border:2px solid var(--gold);
            border-radius:50%;display:flex;align-items:center;justify-content:center;
            font-family:'Press Start 2P',monospace;font-size:1rem;flex-shrink:0;
            position:relative;z-index:2;transition:all 0.4s;
        }
        .process-step.visible .step-number{
            box-shadow:0 4px 15px rgba(212,165,116,0.2);
            background:rgba(212,165,116,0.1);
        }
        .step-content h3{font-family:'Playfair Display',serif;color:var(--gold);margin-bottom:0.8rem;font-size:1.4rem}
        .step-content p{color:var(--text-dim);line-height:1.8;font-size:1rem}

        .solodev-box{
            background:linear-gradient(135deg,rgba(212,165,116,0.1),rgba(184,115,51,0.05));
            border:1px solid rgba(212,165,116,0.2);
            padding:3rem;border-radius:20px;margin-top:4rem;text-align:center;
            position:relative;overflow:hidden;
        }
        .solodev-box::before{
            content:'';position:absolute;inset:0;
            background:radial-gradient(ellipse at center,rgba(212,165,116,0.08),transparent 70%);
            animation:warm-glow 4s ease-in-out infinite alternate;
        }
        @keyframes warm-glow{from{opacity:0.5}to{opacity:1}}
        .solodev-box h3{color:var(--gold);font-family:'Playfair Display',serif;font-size:1.8rem;margin-bottom:1rem;position:relative}
        .solodev-box p{font-size:1.05rem;line-height:1.8;max-width:700px;margin:0 auto;color:var(--text-muted);position:relative}

        /* ===== COMMUNITY ===== */
        .community-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem;margin-top:2rem}
        .community-card{
            background:var(--card-bg);padding:2rem;border-radius:12px;
            border-left:3px solid var(--gold);transition:all 0.3s;
        }
        .community-card:nth-child(even){border-left-color:var(--copper)}
        .community-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,0.3)}
        .community-card h3{color:var(--gold);margin-bottom:0.8rem;font-size:1.1rem}
        .community-card p{color:var(--text-dim);line-height:1.7;font-size:0.95rem}
        .community-ctas{
            text-align:center;margin-top:3rem;padding-top:2rem;
            border-top:1px solid rgba(212,165,116,0.2);
        }
        .community-ctas .cta-link{
            display:inline-block;padding:0.8rem 1.8rem;border-radius:8px;
            text-decoration:none;font-weight:600;transition:all 0.3s;margin:0.5rem;
        }

        /* ===== CONTACT ===== */
        .contact-form{
            max-width:700px;margin:3rem auto;background:var(--card-bg);
            padding:3rem;border-radius:16px;border:1px solid var(--card-border);
        }
        .form-group{margin-bottom:2rem}
        .form-group label{display:block;margin-bottom:0.5rem;font-weight:600;color:var(--gold)}
        .form-group input,.form-group select,.form-group textarea{
            width:100%;padding:1rem;border:1px solid var(--card-border);border-radius:8px;
            font-family:'Inter',sans-serif;font-size:1rem;transition:all 0.3s;
            background:rgba(255,255,255,0.03);color:var(--text-muted);
        }
        .form-group input:focus,.form-group select:focus,.form-group textarea:focus{
            outline:none;border-color:var(--gold);
            box-shadow:0 0 15px rgba(212,165,116,0.1);
        }
        .form-group textarea{min-height:150px;resize:vertical}
        .form-group select option{background:var(--bg-deep);color:var(--text-muted)}
        .checkbox-label{display:flex;align-items:center;gap:0.5rem;font-weight:normal!important;color:var(--text-dim)!important;font-size:0.9rem}
        .checkbox-label a{color:var(--copper)}

        /* ===== FOOTER ===== */
        footer{
            background:var(--sidebar-bg);border-top:1px solid var(--card-border);
            padding:4rem 2rem 2rem;margin-top:6rem;position:relative;z-index:1;
        }
        .footer-content{
            max-width:1400px;margin:0 auto;
            display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
            gap:3rem;margin-bottom:3rem;
        }
        .footer-section h3{color:var(--gold);margin-bottom:1.5rem;font-size:1.1rem}
        .footer-section p,.footer-section a{
            color:var(--text-dim);text-decoration:none;display:block;
            margin-bottom:0.5rem;transition:color 0.3s;font-size:0.9rem;
        }
        .footer-section a:hover{color:var(--gold)}
        .footer-bottom{
            border-top:1px solid var(--card-border);padding-top:2rem;
            text-align:center;color:var(--text-dim);
        }
        .footer-links{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
        .footer-links a{color:var(--text-dim);text-decoration:none;font-size:0.9rem}
        .footer-links a:hover{color:var(--gold)}

        /* ===== FOCUS STATES FOR ACCESSIBILITY ===== */
        a:focus-visible, button:focus-visible, .sidebar-nav a:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
            border-radius: 4px;
        }
        .dot-nav a:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 4px;
        }

        /* ===== RESPONSIVE ===== */

        /* Mobile (<=768px) */
        @media(max-width:768px){
            body{margin-left:0;padding-top:56px}
            html{scroll-padding-top:70px}
            #particle-canvas{left:0;width:100%}
            .sidebar{transform:translateX(-100%);transition:transform 0.3s ease;z-index:1002;width:min(280px, 85vw)}
            .sidebar.open{transform:translateX(0)}
            .sidebar-overlay{pointer-events:none}.sidebar-overlay.active{display:block;pointer-events:auto}
            .mobile-topbar{display:flex}
            .dot-nav{display:none}
            #hero{padding:2rem 1rem 3rem;min-height:85vh;align-items:center;text-align:center}
            .hero-logo{width:160px}
            .hero-badge{font-size:0.7rem;padding:0.4rem 1rem}
            .about-grid{grid-template-columns:1fr;gap:1.5rem}
            .about-card{padding:2rem}
            .portfolio-content{padding:1.5rem}
            .crt-carousel-inner img{height:200px}
            .platform-grid{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:0.8rem;padding:1rem}
            .platform-link{padding:0.8rem 0.5rem}
            .platform-link .label{font-size:0.75rem}
            .poll-terminal-body{padding:1.5rem}
            .tech-grid{grid-template-columns:1fr 1fr;gap:1rem}
            .tech-card{padding:1.5rem 1rem}
            .process-step{flex-direction:column;gap:1rem}
            .timeline::before{left:30px}
            .community-grid{grid-template-columns:1fr}
            .contact-form{padding:2rem}
            .container{padding:3rem 1rem}
            .footer-content{grid-template-columns:1fr;gap:2rem}
            .app-card-inner{grid-template-columns:1fr;text-align:center}
            .app-card-icon{margin:0 auto}
            .app-card:nth-child(even) .app-card-inner{direction:ltr}
        }

        /* Small phones (<=480px) */
        @media(max-width:480px){
            #hero{padding:1.5rem 0.6rem 2rem}
            h1{font-size:1.6rem}
            .section-title{margin-bottom:2rem}
            .tech-grid{grid-template-columns:1fr}
        }

        /* Tablets (481px - 767px) */
        @media(min-width:481px) and (max-width:767px){
            #hero{padding:2.5rem 1.5rem}
            .tech-grid{grid-template-columns:1fr 1fr}
            .about-grid{grid-template-columns:1fr}
            .platform-grid{grid-template-columns:repeat(3,1fr)}
            .container{padding:3.5rem 1.5rem}
        }

        /* Laptops (1024px - 1440px) */
        @media(min-width:1024px) and (max-width:1440px){
            .container{padding:4rem 1.5rem}
            .about-grid{grid-template-columns:1fr 1fr}
            .tech-grid{grid-template-columns:repeat(3,1fr)}
            .platform-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:0.8rem}
            #hero{padding:4rem 3rem 2rem}
            .hero-content{max-width:700px}
        }

        /* Hero left-align on wider screens (1200px+) */
        @media(min-width:1200px){
            #hero{align-items:flex-start;text-align:left;padding-left:6rem}
            .hero-content{max-width:800px}
        }

        /* Large desktops (1441px - 1919px) */
        @media(min-width:1441px) and (max-width:1919px){
            .container{max-width:1400px;padding:5rem 2.5rem}
            .hero-content{max-width:850px}
            .hero-logo{width:280px}
            .tech-grid{grid-template-columns:repeat(4,1fr)}
        }

        /* Full HD+ (1920px - 2559px) */
        @media(min-width:1920px){
            .sidebar{width:280px}
            body{margin-left:280px}
            #particle-canvas{left:280px;width:calc(100% - 280px)}
            .container{max-width:1600px;padding:5rem 3rem}
            .hero-content{max-width:900px}
            .hero-logo{width:300px}
            h1{font-size:4.2rem}
            h2{font-size:2.5rem}
            .tech-grid{grid-template-columns:repeat(4,1fr)}
            .about-grid{grid-template-columns:2fr 1fr}
            .community-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
        }

        /* 4K / Ultra-wide (2560px+) */
        @media(min-width:2560px){
            .sidebar{width:300px}
            body{margin-left:300px}
            #particle-canvas{left:300px;width:calc(100% - 300px)}
            .container{max-width:2000px;padding:6rem 3rem}
            .hero-content{max-width:1000px}
            .hero-logo{width:350px}
            h1{font-size:5rem}
            h2{font-size:3rem}
            h3{font-size:2rem}
            p{font-size:1.15rem}
            .section-title{margin-bottom:5rem}
            .section-subtitle{font-size:1.2rem;max-width:900px}
            .about-card{padding:3rem}
            .tech-card{padding:3rem 2.5rem}
            .tech-icon{font-size:4.5rem}
            .portfolio-content{padding:3rem}
            .game-features{font-size:1.05rem}
            .platform-link .label{font-size:1rem}
            .platform-link .icon{font-size:2.5rem}
            .community-card{padding:2.5rem}
            .contact-form{max-width:900px;padding:4rem}
            .footer-content{max-width:2000px}
            .btn{font-size:1.1rem;padding:1.1rem 2.8rem}
            .crt-carousel-inner img{height:450px}
            .dot-nav a{width:14px;height:14px}
        }

        /* Badge styles for repeated patterns */
        .badge-live {
            background: rgba(45, 106, 79, 0.25);
            color: #4ade80;
            border-color: rgba(45, 106, 79, 0.5);
        }
        .badge-coming-soon-yellow {
            background: linear-gradient(135deg, #FFB800, #FF8C00);
            color: #1a0e00;
        }
        .badge-coming-soon-red {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
            color: white;
        }
        .portfolio-header-grid {
            background: linear-gradient(135deg, #1a3a2a, #2c6e3f);
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 0.5rem;
            padding: 1rem;
            height: 220px;
        }
        .portfolio-header-grid img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
            display: block;
        }
        .google-play-link {
            display: inline-block;
            padding: 0.4rem 1rem;
            border-radius: 8px;
            background: rgba(212, 165, 116, 0.1);
            border: 1px solid rgba(212, 165, 116, 0.3);
            color: var(--gold);
            text-decoration: none;
            font-size: 0.85rem;
            transition: all 0.3s;
        }
        .google-play-link:hover {
            background: rgba(212, 165, 116, 0.15);
            color: var(--gold);
        }

        /* Toast notifications */
        .toast {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(30, 24, 20, 0.95);
            color: var(--text-light);
            padding: 1rem 1.5rem;
            border-radius: 8px;
            border: 1px solid rgba(212, 165, 116, 0.3);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            font-size: 0.9rem;
            max-width: 400px;
            z-index: 5000;
            animation: slideInUp 0.3s ease-out;
        }
        .toast.error {
            border-color: rgba(231, 76, 60, 0.5);
            background: rgba(139, 0, 0, 0.1);
        }
        .toast.success {
            border-color: rgba(45, 106, 79, 0.5);
            background: rgba(45, 106, 79, 0.1);
        }
        @keyframes slideInUp {
            from {
                transform: translateX(-50%) translateY(100px);
                opacity: 0;
            }
            to {
                transform: translateX(-50%) translateY(0);
                opacity: 1;
            }
        }

        /* Reduced motion */
        @media(prefers-reduced-motion:reduce){
            .reveal{opacity:1;transform:none;transition:none}
            .crt-frame::before{animation:none}
            .hero-badge{animation:none}
            .crt-frame{animation:none}
            .power-indicator{animation:none}
            .solodev-box{animation:none}
            .about-card,.tech-card,.community-card,.portfolio-showcase,.app-card{transition:none}
            #particle-canvas{display:none}
        }

        /* Ein einzelner Weg ins Spiel, unter den Zahlen im Hero. */
        .hero-weg{margin:2.25rem 0 0;text-align:center}
        .hero-weg a{
            color:var(--gold);text-decoration:none;font-weight:600;font-size:1.05rem;
            border-bottom:1px solid rgba(212,165,116,0.4);padding-bottom:2px;
            transition:color 0.2s,border-color 0.2s;
        }
        .hero-weg a:hover{color:var(--copper);border-color:var(--copper)}
        @media(min-width:1024px){.hero-weg{text-align:left}}

        /* ==================== NEUIGKEITEN ====================
           Steht auf der Startseite direkt unter dem Hero und auf news.html.
           Kartenschiene statt Karussell: alle Meldungen sind gleichzeitig
           sichtbar, gewischt wird mit dem nativen Scrollen des Browsers, die
           Pfeile sind nur Zugabe. Ohne JavaScript bleibt alles bedienbar. */

        #news .container{padding-top:3.5rem}
        .nw-kopf{
            display:flex;align-items:baseline;justify-content:space-between;
            gap:1rem;flex-wrap:wrap;margin-bottom:2rem;
        }
        .nw-kopf .section-title{margin-bottom:0;text-align:left}
        .nw-alle{
            font-size:0.95rem;font-weight:600;color:var(--gold);
            text-decoration:none;white-space:nowrap;
        }
        .nw-alle:hover{color:var(--copper)}

        /* ----- Zwei Zonen: neu und dauerhaft -----
           Die Schiene zeigt, was neu ist. Daneben stehen Empfehlungen, die
           bleiben. Sie lagen vorher in derselben Schiene und belegten zwei der
           drei sichtbaren Plaetze; damit war die Schiene keine Neuigkeit mehr.
           Nebeneinander erst ab 1800 px: Bei 1500 px blieben der Schiene nur
           660 px, das sind 215 px je Karte. Darunter steht die Empfehlung als
           Reihe unter der Schiene, dann bleiben drei Karten in voller Breite. */
        .nw-bereich{display:grid;gap:1.6rem}
        @media(min-width:1800px){
            .nw-bereich{grid-template-columns:minmax(0,1fr) 320px;gap:2rem;align-items:start}
        }
        .nw-haupt{min-width:0}

        .nw-empfehlungen[hidden]{display:none}
        .nw-empf-kopf{
            font-family:'Press Start 2P',monospace;font-size:0.52rem;letter-spacing:0.1em;
            color:var(--copper);text-transform:uppercase;margin:0 0 0.9rem;
        }
        .nw-empf-liste{display:grid;gap:0.7rem}
        @media(min-width:700px) and (max-width:1799px){
            .nw-empf-liste{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
        }
        .nw-empf{
            display:flex;align-items:center;gap:0.7rem;text-decoration:none;
            background:var(--card-bg);border:1px solid var(--card-border);
            border-radius:10px;padding:0.7rem 0.85rem;
            transition:border-color 0.2s,transform 0.2s;
        }
        .nw-empf:hover{border-color:rgba(212,165,116,0.32);transform:translateY(-2px)}
        .nw-empf-symbol{width:28px;height:28px;border-radius:7px;flex:0 0 auto}
        .nw-empf-text{display:flex;flex-direction:column;gap:0.15rem;min-width:0}
        .nw-empf-titel{
            font-size:0.88rem;font-weight:600;color:var(--text-light);line-height:1.3;
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
        }
        .nw-empf-quelle{font-size:0.7rem;color:var(--text-dim);opacity:0.7}
        .nw-empf-pfeil{margin-left:auto;color:var(--gold);font-size:0.9rem;flex:0 0 auto}

        /* ----- Kartenschiene ----- */
        .nw-huelle{position:relative}
        .nw-schiene{
            display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:1.25rem;
            overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.2rem;
            scrollbar-width:thin;scrollbar-color:rgba(212,165,116,0.3) transparent;
        }
        .nw-schiene::-webkit-scrollbar{height:6px}
        .nw-schiene::-webkit-scrollbar-thumb{background:rgba(212,165,116,0.3);border-radius:3px}
        .nw-schiene:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

        .nw-karte{
            scroll-snap-align:start;display:flex;flex-direction:column;
            background:var(--card-bg);border:1px solid var(--card-border);
            border-radius:12px;overflow:hidden;
            transition:transform 0.25s ease,border-color 0.25s ease;
        }
        .nw-karte{position:relative}
        .nw-karte:hover{transform:translateY(-4px);border-color:var(--nw-akzent,rgba(212,165,116,0.32))}
        /* Der Titel ist der Verweis, sein ::after deckt die ganze Karte ab.
           So ist die Karte anklickbar, ohne Verweise ineinander zu schachteln. */
        .nw-kartenlink{color:inherit;text-decoration:none}
        .nw-kartenlink::after{content:'';position:absolute;inset:0;z-index:1}
        .nw-karte:hover .nw-kartenlink{color:var(--nw-akzent,var(--gold))}
        .nw-kartenlink:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
        /* Schmaler Streifen in der Projektfarbe — bindet Bild, Name und Karte
           zusammen, ohne dass die Farbe die Flaeche uebernimmt. */
        .nw-karte::before{
            content:'';display:block;height:3px;flex:0 0 auto;
            background:var(--nw-akzent,var(--gold));opacity:0.9;
        }

        .nw-bild{aspect-ratio:16/9;overflow:hidden;background:#14100b}
        .nw-bild img{width:100%;height:100%;object-fit:cover;display:block}
        /* Meldung ohne Screenshot: App-Symbol auf Verlauf, damit die Reihe haelt. */
        .nw-ersatz{
            width:100%;height:100%;display:flex;flex-direction:column;gap:0.8rem;
            align-items:center;justify-content:center;
            background:
                repeating-linear-gradient(135deg,rgba(0,0,0,0.12) 0 12px,transparent 12px 24px),
                linear-gradient(135deg,var(--nw-akzent,var(--copper)),#8c5a26 55%,#3a2a18);
        }
        .nw-ersatz img{width:64px;height:64px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,0.35)}
        .nw-ersatz span{
            font-family:'Press Start 2P',monospace;font-size:0.6rem;line-height:1.9;
            color:rgba(26,21,16,0.85);text-align:center;padding:0 1rem;
        }

        .nw-inhalt{display:flex;flex-direction:column;gap:0.55rem;padding:1.2rem 1.3rem 1.4rem;flex:1}
        .nw-zeile{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap}
        .nw-plakette{
            font-size:0.66rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;
            padding:0.22rem 0.6rem;border-radius:4px;border:1px solid currentColor;
        }
        .nw-p-release{color:#6fc79b}
        .nw-p-update{color:var(--gold)}
        .nw-p-press{color:#8fb8d8}
        .nw-p-note{color:var(--copper)}
        /* Angekuendigt, noch nicht ausgeliefert: gestrichelt statt durchgezogen. */
        .nw-p-preview{color:var(--gold);border-style:dashed}
        .nw-datum{font-size:0.78rem;color:var(--text-dim);opacity:0.75;font-variant-numeric:tabular-nums}
        /* Projektzeile: App-Symbol und Name in der Farbe des Projekts.
           Die Farbe kommt als --nw-akzent aus news.json, damit ein neues
           Projekt nur einen Wert in der Datei braucht und keine neue Regel. */
        .nw-projekt{
            display:flex;align-items:center;gap:0.55rem;margin:0;
            font-family:'Playfair Display',serif;font-size:1.02rem;font-weight:700;
            color:var(--nw-akzent,var(--gold));line-height:1.2;
        }
        .nw-symbol{
            width:30px;height:30px;border-radius:8px;flex:0 0 auto;
            box-shadow:0 2px 8px rgba(0,0,0,0.35);
        }
        .nw-kartentitel{
            font-family:'Playfair Display',serif;font-size:1.15rem;line-height:1.3;
            color:var(--text-light);margin:0;
        }
        .nw-text{font-size:0.92rem;line-height:1.6;color:var(--text-dim);margin:0;max-width:none}
        .nw-mehr{
            margin-top:auto;padding-top:0.5rem;font-size:0.85rem;font-weight:600;
            color:var(--gold);text-decoration:none;display:inline-flex;align-items:center;gap:0.35rem;
        }
        .nw-mehr:hover{color:var(--copper)}
        .nw-extern,.nw-pfeilchen{font-size:0.9em}

        /* ----- Pfeile -----
           Ohne JavaScript taeten sie nichts, deshalb erscheinen sie erst, wenn
           news.js die Klasse nw-js gesetzt hat. Wischen und Scrollen der
           Schiene funktionieren auch ohne sie. */
        .nw-pfeil{display:none}
        .nw-js .nw-pfeil{
            position:absolute;top:calc(50% - 1.6rem);transform:translateY(-50%);z-index:3;
            width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
            cursor:pointer;font-size:1.2rem;line-height:1;
            background:rgba(26,21,16,0.92);border:1px solid rgba(212,165,116,0.32);color:var(--gold);
            transition:background 0.2s,opacity 0.2s;
        }
        .nw-pfeil:hover{background:var(--card-bg)}
        .nw-pfeil:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
        .nw-pfeil[disabled]{opacity:0;pointer-events:none}
        .nw-pfeil-links{left:-16px}
        .nw-pfeil-rechts{right:-16px}

        /* ----- Archivseite ----- */
        .nw-archiv{display:grid;gap:1.5rem;max-width:820px;margin:0 auto}
        .nw-archiv .nw-karte{scroll-snap-align:none}
        .nw-jahr{
            font-family:'Press Start 2P',monospace;font-size:0.75rem;color:var(--copper);
            letter-spacing:0.1em;margin:2rem 0 0.5rem;
        }
        .nw-archiv .nw-jahr:first-child{margin-top:0}
        @media(min-width:700px){
            .nw-archiv .nw-karte{flex-direction:row}
            /* In der Zeile wird aus dem Streifen oben ein Streifen links. */
            .nw-archiv .nw-karte::before{height:auto;width:3px;align-self:stretch}
            .nw-archiv .nw-bild{flex:0 0 40%;aspect-ratio:auto;min-height:190px}
            .nw-archiv .nw-inhalt{padding:1.4rem 1.6rem}
        }

        @media(min-width:600px){.nw-schiene{grid-auto-columns:47%}}
        @media(min-width:1000px){.nw-schiene{grid-auto-columns:31.4%}}
        @media(max-width:768px){
            .nw-js .nw-pfeil{display:none}
            .nw-kopf{margin-bottom:1.4rem}
            .nw-leiste-marke{font-size:0.42rem;padding:0.6rem 0.8rem}
        }
        @media(prefers-reduced-motion:reduce){
            .nw-lauf{animation:none}
            .nw-bahn{overflow-x:auto}
            .nw-karte{transition:none}
            .nw-karte:hover{transform:none}
        }

        /* ==================== BEDIENUNG ====================
           Lag als Inline-Block nur in index.html. Damit hatte jede neue
           Seite weder Sprungmarke noch sichtbaren Fokus — news.html hat
           genau das vorgefuehrt. Gehoert allen Seiten gemeinsam. */
        /* Sprungmarke: nur sichtbar, wenn sie den Tastaturfokus hat. Ohne sie muss
           sich jeder Tastaturnutzer durch das ganze Menue arbeiten. */
        .zum-inhalt {
            position: absolute; left: -9999px; top: 0; z-index: 10000;
            padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0;
            background: #d4a574; color: #1a1510; font-weight: 700; text-decoration: none;
        }
        .zum-inhalt:focus { left: 0; }

        /* Sichtbarer Fokus. Vorher gab es dafuer drei bis fuenf Regeln auf der ganzen
           Seite - wer mit der Tastatur navigiert, sah meist nicht, wo er steht. */
        a:focus-visible, button:focus-visible, input:focus-visible,
        textarea:focus-visible, select:focus-visible, summary:focus-visible,
        [tabindex]:focus-visible {
            outline: 3px solid #d4a574;
            outline-offset: 2px;
            border-radius: 4px;
        }
        /* Fuer Browser ohne :focus-visible */
        a:focus, button:focus { outline-color: #d4a574; }

        /* Verweise im Fliesstext etwas heller: der Datenschutz-Verweis im
           Kontaktformular lag bei 4,09 statt der noetigen 4,5. */
        .checkbox-group a, .form-group a, label a { color: #e0b98a; }

        /* ==================== ARTIKELSEITE ====================
           Eine Meldung als eigene Seite. Erzeugt von _tools/inhalte_build.py,
           nicht von Hand gepflegt. */

        .ar-seite{max-width:760px;margin:0 auto;padding:4.5rem 2rem 5rem}
        /* Zurueck und Sprachwahl in einer Zeile, links und rechts. */
        .ar-oben{
            display:flex;align-items:center;justify-content:space-between;
            gap:1rem;margin-bottom:2.5rem;
        }
        .ar-weg{
            font-size:0.88rem;font-weight:600;color:var(--text-dim);
            text-decoration:none;transition:color 0.2s;
        }
        .ar-weg:hover{color:var(--gold)}
        .ar-sprache{
            font-size:0.78rem;font-weight:600;letter-spacing:0.04em;
            color:var(--text-dim);text-decoration:none;
            border:1px solid var(--card-border);border-radius:999px;
            padding:0.3rem 0.9rem;transition:color 0.2s,border-color 0.2s;
        }
        .ar-sprache:hover{color:var(--gold);border-color:var(--gold)}

        .ar-kopf{border-left:3px solid var(--nw-akzent,var(--gold));padding-left:1.4rem;margin-bottom:2.5rem}
        .ar-projekt{
            font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;
            color:var(--nw-akzent,var(--gold));margin:0 0 0.6rem;font-weight:600;
        }
        .ar-zeile{display:flex;align-items:center;gap:0.7rem;flex-wrap:wrap;margin-bottom:0.9rem}
        .ar-kopf h1{
            font-family:'Playfair Display',serif;color:var(--text-light);
            font-size:clamp(1.7rem,4vw,2.5rem);line-height:1.2;margin:0;text-wrap:balance;
        }

        .ar-bild{margin:0 0 2.2rem;border-radius:12px;overflow:hidden;border:1px solid var(--card-border)}
        .ar-bild img{width:100%;height:auto;display:block}

        .ar-text{font-size:1.02rem;line-height:1.85;color:var(--text-dim)}
        .ar-text p{margin:0 0 1.2rem;max-width:none}
        .ar-text p:last-child{margin-bottom:0}
        .ar-text strong{color:var(--text-muted)}
        .ar-text ul{margin:0 0 1.2rem 1.2rem}
        .ar-text li{margin-bottom:0.5rem}
        .ar-text blockquote{
            margin:0 0 1.2rem;padding:0.6rem 0 0.6rem 1.1rem;
            border-left:3px solid var(--nw-akzent,var(--gold));
            color:var(--text-muted);font-style:italic;
        }
        .ar-text a{color:var(--gold)}
        /* Zwischenueberschriften gliedern den Artikel. Der Strich links
           greift die Projektfarbe des Kopfes wieder auf. */
        .ar-text h2{
            font-family:'Playfair Display',serif;color:var(--text-light);
            font-size:1.32rem;line-height:1.3;font-weight:600;
            margin:2.4rem 0 0.9rem;padding-left:0.9rem;
            border-left:3px solid var(--nw-akzent,var(--gold));
        }
        .ar-text h2:first-child{margin-top:0}

        .ar-quelle{margin:2.5rem 0 0}
        .ar-quelle a{
            display:inline-flex;align-items:center;gap:0.4rem;
            padding:0.7rem 1.4rem;border-radius:8px;
            background:rgba(212,165,116,0.1);border:1px solid var(--card-border);
            color:var(--gold);text-decoration:none;font-weight:600;font-size:0.92rem;
            transition:background 0.2s,border-color 0.2s;
        }
        .ar-quelle a:hover{background:rgba(212,165,116,0.18);border-color:var(--nw-akzent,var(--gold))}

        .ar-nachbarn{
            display:grid;gap:0.8rem;margin-top:3.5rem;padding-top:2rem;
            border-top:1px solid var(--card-border);
        }
        @media(min-width:640px){.ar-nachbarn{grid-template-columns:1fr 1fr}}
        .ar-nachbar{
            display:flex;align-items:center;gap:0.7rem;text-decoration:none;
            background:var(--card-bg);border:1px solid var(--card-border);
            border-radius:10px;padding:0.9rem 1.1rem;transition:border-color 0.2s;
        }
        .ar-nachbar:hover{border-color:rgba(212,165,116,0.32)}
        .ar-nachbar-pfeil{color:var(--gold);flex:0 0 auto}
        .ar-nachbar-titel{
            font-size:0.88rem;color:var(--text-muted);line-height:1.35;
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
        }
        .ar-aelter{text-align:right}
        .ar-aelter .ar-nachbar-pfeil{order:2}

        @media(max-width:768px){
            .ar-seite{padding:4rem 1.2rem 3.5rem}
            .ar-kopf{padding-left:1rem}
        }