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

        :root{
            /* ============================================================
               Papier und Bildschirm.

               Alle Werte stammen punktgenau aus logo.png, ausgezaehlt ueber
               116.000 Bildpunkte. Sechs Farben decken 98 Prozent der
               Logoflaeche ab, und jede hat hier genau eine Aufgabe.

               Die Namen unter "Bestand" sind die alten. Sie zeigen jetzt auf
               die Rollen darueber, damit die rund 900 vorhandenen Fundstellen
               weiterlaufen. Neuer Code benutzt die Rollennamen.
               ============================================================ */

            /* --- Flaechen --- */
            --grund:#EFEAD3;          /* Papier, der Grund der Seite       */
            --grund-tief:#E7DFC6;     /* leicht vertieft, fuer Absaetze    */
            --schirm:#FBFAE8;         /* die Flaeche in den Bildschirmen   */
            --band:#CBB88C;           /* Messing, fuer abgesetzte Baender  */

            /* --- Rahmen. Die drei Toene sind der Querschnitt durch den
                   Monitorrahmen des Logos: aussen fast schwarz, innen eine
                   dunklere Kante. Ohne sie wirkt der Rahmen wie ein Strich. */
            --rahmen:#031C42;
            --kante-aussen:#00082B;
            --kante-innen:#03173A;
            --haarlinie:rgba(3,28,66,0.22);

            /* --- Schrift --- */
            --titel:#753917;          /* Braun, wie im Schriftzug   7,4:1  */
            --text:#2A354E;           /* Fliesstext                10,1:1  */
            --text-matt:#5A6478;      /* gedaempft                  4,9:1  */

            /* --- Messing. Zwei Toene, weil einer nicht reicht: #A9894A
                   erreicht auf Papier nur 2,7:1 und ist als Schrift nicht
                   lesbar. Es bleibt Zierfarbe; fuer Text steht der
                   abgedunkelte Ton daneben. */
            --linie:#A9894A;          /* Raender, Laempchen, Zierlinien    */
            --gold:#7A6335;           /* dasselbe Messing, textsicher      */

            /* --- Zustandsfarben, papiertauglich abgedunkelt. Die alten
                   Werte waren fuer dunklen Grund gewaehlt und fielen hier
                   samt und sonders unter 2:1 durch. */
            --erfolg:#137838;
            --release:#2B7550;
            --presse:#326C99;
            --warnung:#876200;

            /* ============ Bestand: alte Namen, neue Werte ============ */
            --bg-deep:var(--grund);
            --bg-mid:var(--grund-tief);
            --bg-warm:var(--grund);
            --card-bg:var(--schirm);
            --card-border:var(--haarlinie);
            --copper:#874823;
            --accent-green:#245741;   /* 4,33 waren zu wenig, das hier sind 5,65 */
            --primary-brown:var(--titel);
            --text-light:var(--rahmen);
            --text-muted:var(--text);
            --text-dim:var(--text-matt);
            --sidebar-bg:var(--grund);

            /* Fremdmarken behalten ihren Ton; wo sie Schrift tragen, steht
               daneben eine abgedunkelte Fassung fuer hellen Grund. */
            --steam-blue:#66c0f4;
            --steam-blue-text:#086DA7;
            --itchio-red:#fa5c5c;
            --itchio-red-text:#D30101;
            --youtube-red:#ff0000;
            --youtube-red-text:#D20000;
            --steam-blue-transparent:rgba(8,109,167,0.3);
            --itchio-red-transparent:rgba(211,1,1,0.3);
            --youtube-red-transparent:rgba(210,0,0,0.3);
            --smiley-yellow:#876200;
            --hospital-red:#C92514;
            --imperium-gold:#816419;
            /* Der Pixelschweif in drei Stufen, als Maske. Steht hier, damit
               jedes Bauteil ihn holen kann - .schirm, die Regalkacheln und
               alles, was spaeter dazukommt. Die Bilddaten stehen dadurch
               genau einmal im Stil.

               gross  17 von 17 Steinen   Kopfbereich
               mittel 16 von 17          breite Einzelpanels
               klein  12 von 17          Regal und Karten          */
            --schweif-gross:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20112%20105%22%3E%3Crect%20x=%2256%22%20y=%220%22%20width=%2212%22%20height=%2211%22/%3E%3Crect%20x=%2282%22%20y=%2212%22%20width=%2214%22%20height=%2214%22/%3E%3Crect%20x=%2229%22%20y=%2220%22%20width=%2212%22%20height=%2212%22/%3E%3Crect%20x=%2263%22%20y=%2226%22%20width=%2218%22%20height=%2217%22/%3E%3Crect%20x=%2234%22%20y=%2241%22%20width=%2222%22%20height=%2221%22/%3E%3Crect%20x=%220%22%20y=%2248%22%20width=%226%22%20height=%227%22/%3E%3Crect%20x=%2217%22%20y=%2248%22%20width=%2213%22%20height=%2212%22/%3E%3Crect%20x=%2286%22%20y=%2248%22%20width=%2212%22%20height=%2212%22/%3E%3Crect%20x=%2269%22%20y=%2249%22%20width=%2211%22%20height=%2210%22/%3E%3Crect%20x=%226%22%20y=%2255%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%22100%22%20y=%2263%22%20width=%2212%22%20height=%2211%22/%3E%3Crect%20x=%2259%22%20y=%2265%22%20width=%2210%22%20height=%228%22/%3E%3Crect%20x=%2274%22%20y=%2271%22%20width=%2213%22%20height=%2212%22/%3E%3Crect%20x=%2294%22%20y=%2278%22%20width=%2211%22%20height=%2210%22/%3E%3Crect%20x=%22105%22%20y=%2288%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%2290%22%20y=%2293%22%20width=%224%22%20height=%223%22/%3E%3Crect%20x=%22100%22%20y=%2298%22%20width=%226%22%20height=%227%22/%3E%3C/svg%3E");
            --schweif-mittel:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20112%20105%22%3E%3Crect%20x=%2256%22%20y=%220%22%20width=%2212%22%20height=%2211%22/%3E%3Crect%20x=%2282%22%20y=%2212%22%20width=%2214%22%20height=%2214%22/%3E%3Crect%20x=%2229%22%20y=%2220%22%20width=%2212%22%20height=%2212%22/%3E%3Crect%20x=%2263%22%20y=%2226%22%20width=%2218%22%20height=%2217%22/%3E%3Crect%20x=%2234%22%20y=%2241%22%20width=%2222%22%20height=%2221%22/%3E%3Crect%20x=%220%22%20y=%2248%22%20width=%226%22%20height=%227%22/%3E%3Crect%20x=%2217%22%20y=%2248%22%20width=%2213%22%20height=%2212%22/%3E%3Crect%20x=%2286%22%20y=%2248%22%20width=%2212%22%20height=%2212%22/%3E%3Crect%20x=%2269%22%20y=%2249%22%20width=%2211%22%20height=%2210%22/%3E%3Crect%20x=%226%22%20y=%2255%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%22100%22%20y=%2263%22%20width=%2212%22%20height=%2211%22/%3E%3Crect%20x=%2259%22%20y=%2265%22%20width=%2210%22%20height=%228%22/%3E%3Crect%20x=%2274%22%20y=%2271%22%20width=%2213%22%20height=%2212%22/%3E%3Crect%20x=%2294%22%20y=%2278%22%20width=%2211%22%20height=%2210%22/%3E%3Crect%20x=%22105%22%20y=%2288%22%20width=%227%22%20height=%227%22/%3E%3Crect%20x=%22100%22%20y=%2298%22%20width=%226%22%20height=%227%22/%3E%3C/svg%3E");
            --schweif-klein:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20112%20105%22%3E%3Crect%20x=%2256%22%20y=%220%22%20width=%2212%22%20height=%2211%22/%3E%3Crect%20x=%2282%22%20y=%2212%22%20width=%2214%22%20height=%2214%22/%3E%3Crect%20x=%2229%22%20y=%2220%22%20width=%2212%22%20height=%2212%22/%3E%3Crect%20x=%2263%22%20y=%2226%22%20width=%2218%22%20height=%2217%22/%3E%3Crect%20x=%2234%22%20y=%2241%22%20width=%2222%22%20height=%2221%22/%3E%3Crect%20x=%2217%22%20y=%2248%22%20width=%2213%22%20height=%2212%22/%3E%3Crect%20x=%2286%22%20y=%2248%22%20width=%2212%22%20height=%2212%22/%3E%3Crect%20x=%2269%22%20y=%2249%22%20width=%2211%22%20height=%2210%22/%3E%3Crect%20x=%22100%22%20y=%2263%22%20width=%2212%22%20height=%2211%22/%3E%3Crect%20x=%2259%22%20y=%2265%22%20width=%2210%22%20height=%228%22/%3E%3Crect%20x=%2274%22%20y=%2271%22%20width=%2213%22%20height=%2212%22/%3E%3Crect%20x=%2294%22%20y=%2278%22%20width=%2211%22%20height=%2210%22/%3E%3C/svg%3E");
        }

        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;font-weight:600;color:var(--titel);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(3,28,66,0.08);color:var(--gold)}
        .sidebar-nav a.active{background:rgba(3,28,66,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(3,28,66,0.05);border:1px solid rgba(169,137,74,0.32);
            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(3,28,66,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(3,28,66,0.18);border:1px solid rgba(3,28,66,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(169,137,74,0.64);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(169,137,74,0.48);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(3,28,66,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(3,28,66,0.45);z-index:999;opacity:0;transition:opacity 0.3s;pointer-events:none}
        .sidebar-overlay.active{display:block;opacity:1;pointer-events:auto}


        /* Die grosse Karte darf zeigen, worum es geht: flacheres Bild ueber
           die doppelte Breite, groessere Ueberschrift, dazu der Kurztext, den
           die kleinen weglassen. */
        .nw-gross .nw-bild{aspect-ratio:16/7}
        .nw-gross .nw-kartentitel{font-size:1.35rem}
        .nw-gross .nw-inhalt{padding:1rem 1.15rem 1.2rem;gap:0.5rem}
        .nw-gross .nw-text{display:block;font-size:0.95rem}
        .nw-gross .nw-mehr{display:inline-flex}
        .nw-gross .nw-tatzeile{display:flex}

        /* Die kleinen bleiben knapp: Bild, Projekt, Datum, Ueberschrift. */
        .nw-karte .nw-text,
        .nw-karte .nw-mehr,
        .nw-karte .nw-tatzeile{display:none}
        .nw-karte .nw-bild{aspect-ratio:16/10}
        .nw-karte .nw-inhalt{gap:0.35rem;padding:0.75rem 0.85rem 0.9rem}
        .nw-karte .nw-projekt{font-size:0.85rem;gap:0.4rem}
        .nw-karte .nw-symbol{width:22px;height:22px;border-radius:6px}
        .nw-karte .nw-kartentitel{font-size:0.96rem;line-height:1.3}
        .nw-karte .nw-plakette{font-size:0.58rem;padding:0.15rem 0.45rem}
        .nw-karte .nw-datum{font-size:0.7rem}
        .nw-karte .nw-zeile{gap:0.4rem}

        /* ===== 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(3,28,66,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(169,137,74,0.32))}
        .hero-badge{
            display:inline-block;padding:0.5rem 1.5rem;border-radius:5px;
            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(169,137,74,0.32)}50%{box-shadow:0 0 15px rgba(169,137,74,0.48)}}

        .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:7px;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(169,137,74,0.48);transform:translateY(-5px);box-shadow:0 10px 40px rgba(3,28,66,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:#04122B;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(169,137,74,0.48);
            border:none;cursor:pointer;transition:all 0.3s;
        }
        .crt-dot.active{background:var(--gold);box-shadow:0 0 8px rgba(169,137,74,0.64)}
        .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:var(--grund-tief);padding:1.5rem;border-radius:12px;
        }
        .platform-link{
            background:var(--schirm);border:1px solid var(--haarlinie);
            border-radius:12px;padding:1rem;text-align:center;text-decoration:none;transition:all 0.3s;
        }
        .platform-link:hover{transform:translateY(-3px);box-shadow:0 4px 14px rgba(3,28,66,0.14)}
        .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:var(--grund-tief);
        }
        .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(169,137,74,0.48);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(3,28,66,0.06);border-radius:16px;
            border:1px solid rgba(3,28,66,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(3,28,66,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:var(--grund-tief);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(3,28,66,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(169,137,74,0.24),transparent 70%);
            opacity:0;transition:opacity 0.4s;pointer-events:none;
        }
        .tech-card:hover{transform:translateY(-8px);border-color:rgba(169,137,74,0.48);box-shadow:0 8px 24px rgba(3,28,66,0.12)}
        .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}

        /* ===== 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 6px 18px rgba(3,28,66,0.12)}
        .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(169,137,74,0.32);
        }
        .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:var(--schirm);color:var(--text);
        }
        .form-group input:focus,.form-group select:focus,.form-group textarea:focus{
            outline:none;border-color:var(--gold);
            box-shadow:0 0 15px rgba(3,28,66,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: var(--erfolg);
            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, #E4EEE6, #CBE3D3);
            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(3,28,66,0.1);
            border: 1px solid rgba(169,137,74,0.48);
            color: var(--gold);
            text-decoration: none;
            font-size: 0.85rem;
            transition: all 0.3s;
        }
        .google-play-link:hover {
            background: rgba(169,137,74,0.24);
            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(169,137,74,0.48);
            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(169,137,74,0.64);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)}

        /* ----- Raster -----
           Ein Raster, zwei Kartengroessen. Oben die drei neuesten Meldungen
           gross, darunter sechs kleine mit dem, was wir dauerhaft empfehlen.
           Vorher waren das zwei getrennte Zonen — eine Schiene und eine Liste
           daneben. Von aussen war nicht zu erkennen, warum eine Meldung hier
           und eine dort stand, und was hinter der Wischgeste lag, sah kaum
           jemand. Jetzt sagt die Groesse, was Vorrang hat, und die
           Beschriftung sagt, warum der Rest dasteht.

           Feste Spaltenzahl statt auto-fill: drei oben und sechs unten sollen
           uebereinander stehen, nicht je nach Restbreite verrutschen. */
        .nw-raster{display:grid;gap:0.9rem;grid-template-columns:1fr}
        @media(min-width:560px){.nw-raster{grid-template-columns:repeat(2,1fr)}}
        @media(min-width:900px){.nw-raster{grid-template-columns:repeat(3,1fr)}}

        /* Zwischen 560 und 900 px stehen zwei Spalten. Drei grosse Karten
           liessen dort eine Luecke; ueber die volle Breite gestellt bleibt
           die Reihe geschlossen. Das Bild wird dabei flacher, sonst nimmt
           eine einzelne Karte den halben Bildschirm ein. */
        @media(min-width:560px) and (max-width:899px){
            .nw-raster .nw-gross{grid-column:1/-1}
            .nw-raster .nw-gross .nw-bild{aspect-ratio:21/9}
        }

        /* Die Beschriftung laeuft ueber alle Spalten und trennt die beiden
           Gruppen, ohne den Bereich in zwei Kaesten zu zerlegen. */
        .nw-trenner{
            grid-column:1/-1;margin:0.6rem 0 0;padding-top:1rem;
            border-top:1px solid var(--card-border);
            font-family:'Press Start 2P',monospace;font-size:0.52rem;
            letter-spacing:0.1em;text-transform:uppercase;color:var(--copper);
        }

        .nw-karte{
            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(169,137,74,0.51))}
        /* 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(3,28,66,0.10) 0 12px,transparent 12px 24px),
                linear-gradient(135deg,var(--nw-akzent,var(--linie)),#CBB88C 55%,#E5D9B0);
        }
        .nw-ersatz img{width:64px;height:64px;border-radius:14px;box-shadow:0 4px 12px rgba(3,28,66,0.16)}
        .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:var(--release)}
        .nw-p-update{color:var(--gold)}
        .nw-p-press{color:var(--presse)}
        .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 6px rgba(3,28,66,0.14);
        }
        .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}

        /* Traegt eine Meldung ein Ziel nach draussen, steht es als Knopf auf
           der Karte. "Weiterlesen" rueckt daneben und wird zur Nebensache:
           Wer vorregistrieren will, soll nicht erst den Artikel lesen. */
        .nw-tatzeile{
            margin-top:auto;padding-top:0.7rem;
            display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.9rem;
        }
        .nw-tat{
            font-size:0.85rem;font-weight:600;text-decoration:none;
            color:var(--schirm);background:var(--rahmen);
            padding:0.42rem 0.85rem;border-radius:7px;
            border:1px solid var(--kante-aussen);
        }
        .nw-tat:hover{background:var(--kante-aussen)}
        .nw-tat:focus-visible{outline:2px solid var(--linie);outline-offset:2px}
        .nw-tatzeile .nw-mehr{margin-top:0;padding-top:0}


        /* ----- Startseite -----
           Ein Rahmen um den ganzen Bereich: die drei grossen und die sechs
           kleinen Karten gehoeren zusammen, und das soll man sehen. Deutlicher
           als die Kartenraender, sonst verschwimmt er mit ihnen und der Block
           zerfaellt optisch in neun lose Kacheln. */
        .nw-bereich{
            border:1px solid rgba(169,137,74,0.48);border-radius:16px;
            padding:1.5rem;background:rgba(3,28,66,0.035);
            box-shadow:0 0 0 1px var(--haarlinie) inset;
        }

        /* Die kleinen Karten bleiben knapp: Bild, Projekt, Datum, Ueberschrift.
           Der Fliesstext steht auf der Meldungsseite noch einmal; in der
           Vorschau waere er nur Wiederholung, und die Karte ist ganz verlinkt. */
        .nw-raster .nw-text,
        .nw-raster .nw-mehr,
        .nw-raster .nw-tatzeile{display:none}
        .nw-raster .nw-inhalt{gap:0.35rem;padding:0.85rem 0.95rem 0.95rem}
        /* Ohne Bild traegt der Farbstreifen oben die Zuordnung zum Projekt
           allein — darum etwas kraeftiger als auf den grossen Karten. */
        .nw-raster .nw-karte:not(.nw-gross)::before{height:4px;opacity:1}
        .nw-raster .nw-projekt{font-size:0.82rem;gap:0.4rem}
        .nw-raster .nw-symbol{width:20px;height:20px;border-radius:5px}
        .nw-raster .nw-kartentitel{font-size:0.92rem;line-height:1.3}
        .nw-raster .nw-plakette{font-size:0.56rem;padding:0.14rem 0.42rem}
        .nw-raster .nw-datum{font-size:0.68rem}
        .nw-raster .nw-zeile{gap:0.4rem}

        /* Die drei neuesten fuehren: mehr Bild, groessere Schrift und zwei
           Zeilen Text, die die kleinen weglassen. Gleiche Spezifitaet wie
           oben, steht aber spaeter — also gilt sie. */
        .nw-raster .nw-gross .nw-bild{aspect-ratio:16/10}
        .nw-raster .nw-gross .nw-inhalt{gap:0.5rem;padding:1rem 1.15rem 1.2rem}
        .nw-raster .nw-gross .nw-projekt{font-size:1rem;gap:0.55rem}
        .nw-raster .nw-gross .nw-symbol{width:28px;height:28px;border-radius:8px}
        .nw-raster .nw-gross .nw-kartentitel{font-size:1.12rem}
        .nw-raster .nw-gross .nw-plakette{font-size:0.64rem;padding:0.2rem 0.55rem}
        .nw-raster .nw-gross .nw-datum{font-size:0.76rem}
        .nw-raster .nw-gross .nw-ersatz img{width:64px;height:64px}
        .nw-raster .nw-gross .nw-ersatz span{font-size:0.6rem}
        .nw-raster .nw-gross .nw-text{
            display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
            overflow:hidden;font-size:0.9rem;line-height:1.55;
        }
        .nw-raster .nw-gross .nw-mehr{display:inline-flex}

        @media(max-width:640px){
            .nw-bereich{padding:0.9rem;border-radius:14px}
            .nw-raster{gap:0.7rem}
        }

        /* ----- Archivseite ----- */
        .nw-archiv{display:grid;gap:1.5rem;max-width:820px;margin:0 auto}
        .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(max-width:768px){
            .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: var(--rahmen); color: var(--schirm); 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 var(--gold);
            outline-offset: 2px;
            border-radius: 4px;
        }
        /* Fuer Browser ohne :focus-visible */
        a:focus, button:focus { outline-color: var(--gold); }

        /* 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: var(--gold); }

        /* ==================== 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(3,28,66,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(169,137,74,0.29);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(169,137,74,0.51)}
        .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}
        }


        /* ============================================================
           BAUTEILE AUS DEM LOGO
           ============================================================
           Der Monitor des Logos ist der einzige Panelbaustein. Gemessen
           wurde am Bild, nicht geschaetzt:

             Rahmen        12 von 327 Punkten Monitorbreite
             Eckenradius   rund 2 Prozent
             Querschnitt   1 px #00082B | Gehaeuse | 1 px #03173A
             Abriss oben   x=222 bis Ende, also 121 px
             Abriss rechts bis y=163, also 62 px
             Pixelschweif  17 Quadrate zwischen 4 und 22 Punkten

           Der Rahmen hat oben rechts KEINE Ecke. Er bricht auf, weil die
           Pixel wegfliegen - deshalb gehoeren Bruch und Schweif zusammen.
           ============================================================ */

        .schirm{
            --sw-b:34px; --sw-h:32px;
            --sw-bild:var(--schweif-klein);
            --rahmen-dies:6px;
            position:relative;
            background:var(--schirm);
            border:var(--rahmen-dies) solid var(--rahmen);
            border-radius:9px;
            border-top-right-radius:0;
            box-shadow:0 0 0 1px var(--kante-aussen);
        }
        .schirm-mittel{
            --sw-b:62px; --sw-h:58px;
            --sw-bild:var(--schweif-mittel);
        }
        /* Am Kopfbereich ist die Ecke gross genug, dass die Flaeche
           dahinter auffiele. Dort deckt der obere Radierer den ganzen
           Block ab. Auf Karten bleibt es beim Streifen - der Block waere
           dort so hoch wie die halbe Karte. */
        .schirm-gross{
            /* 160 statt 112: rund 15 Prozent der Panelbreite. Bei 112 wirkten
               die Steine neben einem 1030 Punkte breiten Panel wie Staub. */
            --sw-b:160px; --sw-h:150px;
            --sw-bild:var(--schweif-gross);
            --rahmen-dies:14px;
        }

        /* Zwei Radierer in der Grundfarbe, auf dem Rahmen liegend. Der eine
           Punkt Ueberstand verhindert eine Haarlinie bei 125- und
           150-Prozent-Anzeige. */
        /* Die Radierer greifen zwei Punkte weiter nach aussen als der
           Rahmen dick ist. Sonst bleibt die aeussere Kantenlinie stehen -
           die ist ein box-shadow und liegt einen Punkt AUSSERHALB des
           Rahmenkastens, wo ein Radierer auf dem Rahmen nicht hinreicht. */
        .schirm::before,
        .schirm::after{
            content:'';position:absolute;background:var(--grund-hier,var(--grund));
            pointer-events:none;
            top:calc(-1 * (var(--rahmen-dies) + 2px));
            right:calc(-1 * (var(--rahmen-dies) + 2px));
        }
        /* Der ganze Eckblock, nicht nur der Rahmenstreifen: sonst steht die
           helle Panelflaeche noch dort, wo der Monitor aufhoert. */
        .schirm::before{width:calc(var(--sw-b) * 1.08);height:calc(var(--rahmen-dies) + 3px);z-index:0}
        .schirm::after{width:calc(var(--rahmen-dies) + 3px);height:calc(var(--sw-h) * 0.59);z-index:0}
        .schirm > *{position:relative;z-index:1}
        .schirm > .schweif{z-index:2}

        /* Der Schweif als Maske ueber currentColor: eine Datei, jede Farbe. */
        .schweif{
            position:absolute;z-index:2;pointer-events:none;
            width:var(--sw-b);height:var(--sw-h);
            top:calc(-0.457 * var(--sw-h));right:0;
            color:var(--rahmen);background-color:currentColor;
            -webkit-mask-image:var(--sw-bild);mask-image:var(--sw-bild);
            -webkit-mask-size:100% 100%;mask-size:100% 100%;
            -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
        }

        /* Betriebslaempchen, wie der helle Punkt am Rahmen des Logos */
        .laempchen{
            position:absolute;top:9px;right:11px;width:6px;height:6px;
            border-radius:50%;background:var(--linie);
            box-shadow:0 0 0 2px rgba(169,137,74,0.22);
        }

        /* Abgesetzte Baender. Sie tragen die Farbe der Seite - das Menue
           bleibt Papier, damit das Logo dort freisteht. */
        .band{
            background:var(--band);
            --grund-hier:var(--band);
            padding:2.5rem 0;
        }
        .band h2,.band h3{color:#5F2D12}

        /* Der Fuss des Monitors, einmal je Seite unter dem Kopfbereich */
        .monitor-hals{width:70px;height:16px;background:var(--rahmen);margin:0 auto;border-radius:0 0 3px 3px}
        .monitor-sockel{width:170px;height:11px;background:var(--rahmen);margin:0 auto;border-radius:6px}

        /* Abschnittsmarke: zwei Quadrate aus dem Pixelschweif */
        .marke{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem}
        .marke i{width:9px;height:9px;background:var(--rahmen);display:block}
        .marke i:last-child{width:6px;height:6px;background:var(--linie)}


        /* ============================================================
           WERKSTATTBUCH
           ============================================================
           Dieselben Karten wie im Archiv, auf der Startseite aber als
           datierte Liste. Sechs bebilderte Karten kosteten oben eine ganze
           Bildschirmhoehe, bevor ein einziges Ding zu sehen war; als Zeilen
           passen dieselben sechs in ein Fuenftel des Platzes.

           Nur #nw-raster, nicht .nw-karte allgemein - das Archiv auf
           news.html benutzt .nw-archiv und behaelt seine Karten.
           ============================================================ */
        #nw-raster{display:flex;flex-direction:column;gap:0}
        #nw-raster .nw-karte{
            display:block;background:none;border:none;border-radius:0;
            box-shadow:none;padding:0;margin:0;
            border-bottom:1px solid var(--haarlinie);
        }
        #nw-raster .nw-karte:first-child{border-top:1px solid var(--haarlinie)}
        #nw-raster .nw-karte:hover{transform:none;box-shadow:none}
        #nw-raster .nw-bild{display:none}
        #nw-raster .nw-inhalt{
            display:grid;gap:0.15rem 1.2rem;padding:0.75rem 0;
            grid-template-columns:11rem minmax(0,1fr);align-items:baseline;
        }
        #nw-raster .nw-projekt{
            grid-column:1;margin:0;font-size:0.82rem;font-weight:600;
            color:var(--text-matt);display:flex;align-items:center;gap:0.4rem;
        }
        #nw-raster .nw-symbol{width:20px;height:20px;border-radius:5px}
        #nw-raster .nw-zeile{grid-column:1;display:flex;align-items:center;gap:0.5rem;margin:0}
        #nw-raster .nw-datum{font-size:0.75rem;font-variant-numeric:tabular-nums}
        #nw-raster .nw-kartentitel{grid-column:2;grid-row:1;margin:0;font-size:1.22rem;line-height:1.3}
        #nw-raster .nw-text{grid-column:2;grid-row:2;margin:0;font-size:0.86rem;color:var(--text-matt)}
        #nw-raster .nw-mehr{grid-column:2;grid-row:3;margin-top:0.25rem;font-size:0.8rem}
        #nw-raster .nw-trenner{
            margin:1.6rem 0 0.2rem;font-size:0.7rem;letter-spacing:0.14em;
            text-transform:uppercase;color:var(--gold);
        }
        @media (max-width:720px){
            #nw-raster .nw-inhalt{grid-template-columns:minmax(0,1fr)}
            #nw-raster .nw-projekt,#nw-raster .nw-zeile{grid-column:1}
            #nw-raster .nw-kartentitel,#nw-raster .nw-text,#nw-raster .nw-mehr{grid-column:1;grid-row:auto}
        }

        /* ============================================================
           DAS REGAL
           ============================================================ */
        .regal-titel{
            font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
            color:var(--gold);margin:2rem 0 0.8rem;font-weight:700;
        }
        .regal-titel:first-of-type{margin-top:1rem}

        /* ============================================================
           KOPFBEREICH ALS MONITOR
           ============================================================
           Der Kopfbereich ist der Monitor aus dem Logo in Seitengroesse.
           Hals und Sockel stehen ausserhalb des Schirms, damit sie nicht
           vom Rahmen beschnitten werden.
           ============================================================ */
        .hero-schirm{padding:2.5rem clamp(1.5rem,3vw,2.5rem)}
        /* Nur ab Tablet aufwaerts: Diese Regel steht hinter allen
           Medienabfragen und wuerde deren Handy-Abstaende sonst
           ueberschreiben - dort sind 0,6rem Rand bewusst gewaehlt. */
        @media (min-width:769px){
            #hero{min-height:auto;padding:3rem 2rem 4rem}
        }
        @media (max-width:768px){
            #hero{min-height:auto}
        }
        #hero .hero-content{position:relative}

        /* Markierfarbe. Ohne Angabe nimmt der Browser sein Systemblau -
           neben Papier und Marine der einzige Fremdton auf der Seite. */
        ::selection{background:var(--linie);color:var(--rahmen)}
        ::-moz-selection{background:var(--linie);color:var(--rahmen)}

        /* ============================================================
           FEINSCHLIFF nach dem ersten Blick auf die fertige Seite
           ============================================================ */

        /* Der Projektstreifen ueber jeder Meldung: auf einer Karte ein
           Akzent, in der Liste ein Zaun quer durch den Lesefluss. In der
           Liste wird daraus ein kurzer Strich vor der Zeile. */
        #nw-raster .nw-karte::before{
            width:3px;height:auto;top:0.75rem;bottom:0.75rem;left:-0.9rem;right:auto;
            opacity:1;border-radius:2px;
        }
        #nw-raster .nw-karte{position:relative;padding-left:0.9rem}
        #nw-raster .nw-karte:hover{border-color:transparent}
        #nw-raster .nw-karte:hover .nw-kartentitel{text-decoration:underline}

        /* Marke und Ueberschrift gehoeren zusammen. Der Bestand zentriert
           .section-title; in den umgebauten Abschnitten steht beides links,
           sonst schwebt das Zeichen allein am Rand. */
        /* Alle vier Abschnitte gleich: Marke links, Ueberschrift daneben.
           Zwei linksbuendige und zwei mittige Ueberschriften auf derselben
           Seite lesen sich wie ein Versehen. */
        #regal .section-title,
        #news .section-title,
        #about .section-title,
        #contact .section-title,
        #regal .section-subtitle{text-align:left;margin-left:0}
        #regal .section-subtitle{margin-right:auto;font-style:normal}
        #news .marke,#regal .marke{margin-bottom:0.2rem}

        /* Marke und Ueberschrift gehoeren zusammen und zaehlen im Flex-Kasten
           der Kopfzeile als EIN Kind. Ohne die Huelle waren es drei, und
           space-between schob die Ueberschrift in die Mitte. */
        .nw-kopf-titel{display:flex;flex-direction:column;gap:0.1rem;min-width:0}
        .nw-kopf-titel .section-title{margin-bottom:0;text-align:left}

        /* ============================================================
           WERKSTATTBUCH-TAFEL
           ============================================================
           Die Liste steht auf einem etwas tieferen Papierton, so wie im
           Entwurf. Auf blankem Grund schwebte sie ohne Halt; der Ton
           setzt sie ab, ohne einen Kasten zu ziehen.

           Die drei neuesten Eintraege bekommen ein kleines Vorschaubild.
           Alle neun waeren wieder eine Kartenwand - genau davon sollte
           die Liste ja wegkommen.
           ============================================================ */
        #news .container > .nw-bereich,
        #nw-raster{
            background:var(--grund-tief);
            border-radius:10px;
            padding:0.4rem 1.2rem;
        }
        #nw-raster .nw-karte:first-child{border-top:none}

        /* Bild nur bei den ersten drei, und klein.

           .nw-bild ist Geschwister von .nw-inhalt, nicht Kind - die ZEILE
           wird deshalb zum Raster, nicht der Inhaltskasten. Beim ersten
           Versuch stand das Bild dadurch ueber der Zeile statt daneben. */
        /* Bild nur bei den ersten drei, als schmales Banner ueber dem
           Titel. Vorher stand es als 104-Pixel-Miniatur rechts neben dem
           Text; darauf war auf einem Bildschirmfoto nichts zu erkennen.
           Ueber die ganze Zeilenbreite sind es rund 700 Pixel, und weil
           das Banner flach bleibt, waechst die Liste kaum. */
        #nw-raster .nw-karte:nth-child(-n+3){
            display:block;padding-top:0.75rem;
        }
        #nw-raster .nw-karte:nth-child(-n+3) .nw-bild{
            display:block;width:100%;height:104px;
            overflow:hidden;border-radius:6px;
            border:2px solid var(--rahmen);margin-bottom:0.7rem;
        }
        #nw-raster .nw-karte:nth-child(-n+3) .nw-bild img{
            width:100%;height:100%;object-fit:cover;display:block;border-radius:0;
            /* Mittig beschnitten: Die Bilder sind fuer die Mitte gebaut,
               ein Versatz nach oben schneidet dem Taschenlampen-Symbol
               den Fuss ab. */
            object-position:center;
        }
        #nw-raster .nw-karte:nth-child(-n+3) .nw-ersatz{
            width:100%;height:100%;display:flex;align-items:center;
            justify-content:center;gap:0.6rem;border-radius:0;
        }
        #nw-raster .nw-karte:nth-child(-n+3) .nw-ersatz img{
            width:30px;height:30px;border-radius:7px;box-shadow:none;
        }
        #nw-raster .nw-karte:nth-child(-n+3) .nw-ersatz span{font-size:0.8rem}
        @media (max-width:760px){
            #nw-raster .nw-karte:nth-child(-n+3) .nw-bild{height:78px}
        }