Update homepage maps and tower catalog

index.html

@@ -117,6 +117,24 @@
     .card-icon span { transform: rotate(-45deg); }
     .card h3 { font-size: 1.45rem; text-transform: uppercase; }
     .card p { position: relative; z-index: 1; color: var(--muted); margin: 14px 0 0; }
+    .catalog { background: radial-gradient(circle at 85% 18%, rgba(92,236,255,.08), transparent 32%), #06131f; }
+    .catalog-grid { display: grid; gap: 14px; }
+    .sector-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .tower-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .catalog-card { position: relative; min-height: 184px; padding: 24px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(12,39,55,.94), rgba(3,15,24,.98)); }
+    .catalog-card::after { content: attr(data-index); position: absolute; right: 12px; bottom: -20px; color: rgba(92,236,255,.055); font-size: 6.5rem; font-weight: 900; line-height: 1; }
+    .catalog-card > * { position: relative; z-index: 1; }
+    .catalog-card h3 { margin: 18px 0 6px; font-size: 1.2rem; letter-spacing: .035em; text-transform: uppercase; }
+    .catalog-card p { max-width: 32ch; margin: 0; color: var(--muted); font-size: .94rem; }
+    .catalog-tag { display: inline-block; padding: 5px 8px; border: 1px solid rgba(92,236,255,.3); color: var(--cyan); font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
+    .catalog-tag.locked { border-color: rgba(255,190,104,.34); color: #ffc57b; }
+    .catalog-tag.ground { border-color: rgba(107,235,155,.34); color: #8cf0ad; }
+    .catalog-tag.air { border-color: rgba(255,126,133,.36); color: #ff9ba0; }
+    .catalog-tag.multi { border-color: rgba(92,206,255,.36); color: #8cddff; }
+    .tower-card { min-height: 172px; }
+    .tower-card h3 { margin-top: 15px; }
+    .tower-card .tower-role { margin: 10px 0 0; color: #d5e5ec; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
+    .catalog-note { margin: 24px 0 0; color: var(--muted); font-size: .9rem; }
     .development { overflow: hidden; background: #040d15; }
     .gallery { background: radial-gradient(circle at 10% 30%, rgba(92,236,255,.08), transparent 35%), #06131f; }
     .gallery-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 18px; align-items: stretch; }
@@ -151,6 +169,8 @@
       .section-grid, .dev-panel { grid-template-columns: 1fr; }
       .dev-icon { width: min(190px, 55vw); }
       .cards { grid-template-columns: 1fr; }
+      .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      .tower-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       .gallery-grid { grid-template-columns: 1fr; }
       .card { min-height: 240px; }
       .card-icon { margin-bottom: 35px; }
@@ -170,6 +190,7 @@
       .stat { padding: 20px; min-height: 120px; }
       .button, .status { width: 100%; }
       .store-grid { grid-template-columns: 1fr; }
+      .sector-grid, .tower-grid { grid-template-columns: 1fr; }
       .platforms { gap: 12px 18px; }
     }
     @media (prefers-reduced-motion: reduce) {
@@ -183,6 +204,8 @@
   <header class="topbar">
     <nav class="nav shell" aria-label="Hauptnavigation">
       <a class="brand" href="#start" aria-label="GerGames – Startseite"><span class="brand-mark" aria-hidden="true"></span><span>GER<small>GAMES</small></span></a>
+      <a class="nav-link" href="#karten">Karten</a>
+      <a class="nav-link" href="#tuerme">Türme</a>
       <a class="nav-link" href="#entwicklung">Entwicklungsstand</a>
     </nav>
   </header>
@@ -202,7 +225,7 @@
           <div class="platforms" aria-label="Geplante Plattformen"><span>Windows</span><span>Android</span><span>iOS</span></div>
         </div>
       </div>
-      <img class="tower-strip" src="assets/towers.webp" alt="Kinetik-, Laser- und Raketenturm aus Void Bastion">
+      <img class="tower-strip" src="assets/towers.webp" alt="Kinetik-, Laser- und Raketenturm aus der Void-Bastion-Startausrüstung">
     </section>
 
     <section class="intro" id="spiel">
@@ -213,8 +236,8 @@
           <p class="copy"><strong>Void Bastion verbindet klar lesbare Karten mit taktischen Entscheidungen.</strong> Nutze Reichweite, Feuerrate und Schaden deiner Türme, verteidige unterschiedliche Weltraumsektoren und entscheide nach der letzten Missionswelle selbst, ob du im Endlosmodus weiterkämpfst.</p>
         </div>
         <div class="stats reveal" aria-label="Spielumfang">
-          <div class="stat"><strong>03</strong><span>Weltraumkarten</span></div>
+          <div class="stat"><strong>07</strong><span>Weltraumkarten</span></div>
-          <div class="stat"><strong>03</strong><span>Turmklassen</span></div>
+          <div class="stat"><strong>06</strong><span>verschiedene Türme</span></div>
           <div class="stat"><strong>15</strong><span>Missionswellen</span></div>
           <div class="stat"><strong>∞</strong><span>Endlosmodus</span></div>
         </div>
@@ -229,12 +252,48 @@
         </div>
         <div class="cards">
           <article class="card reveal" data-index="1"><div class="card-icon"><span>01</span></div><h3>Position wählen</h3><p>Nutze das Bauraster und platziere jeden Turm dort, wo seine Reichweite den Gegnerweg optimal abdeckt.</p></article>
-          <article class="card reveal" data-index="2"><div class="card-icon"><span>02</span></div><h3>Systeme kombinieren</h3><p>Kinetik, Laser und Raketen erfüllen verschiedene Rollen – vom schnellen Einzelziel bis zum schweren Flächenschaden.</p></article>
+          <article class="card reveal" data-index="2"><div class="card-icon"><span>02</span></div><h3>Systeme kombinieren</h3><p>Sechs Türme decken Boden- und Luftziele ab: Laser gegen Schilde, EMP gegen Gruppen und Railgun-Strahlen durch mehrere Gegner.</p></article>
-          <article class="card reveal" data-index="3"><div class="card-icon"><span>03</span></div><h3>Gemeinsam halten</h3><p>Verteidige im Koop eine gespiegelte Station mit getrennten Ressourcen und einem gemeinsamen Reaktor – lokal mit KI, später auch online.</p></article>
+          <article class="card reveal" data-index="3"><div class="card-icon"><span>03</span></div><h3>Gemeinsam halten</h3><p>Verteidige eine gespiegelte Station mit getrennten Ressourcen und gemeinsamem Reaktor – lokal mit KI, Online-Koop ist in Entwicklung.</p></article>
         </div>
       </div>
     </section>
 
+    <section class="catalog" id="karten" aria-labelledby="sectors-title">
+      <div class="shell">
+        <div class="section-head reveal">
+          <div><p class="eyebrow">Einsatzsektoren</p><h2 id="sectors-title">Sieben Karten. Sieben Fronten.</h2></div>
+          <p>Drei Sektoren sind direkt anwählbar. Vier weitere werden im Arsenal mit Kernkristallen freigeschaltet. Jede Route ist auf das Bauraster abgestimmt und führt zum Reaktor.</p>
+        </div>
+        <div class="catalog-grid sector-grid">
+          <article class="catalog-card reveal" data-index="01"><span class="catalog-tag">Startkarte</span><h3>Bastion Prime</h3><p>Dreifache Feuerlinie</p></article>
+          <article class="catalog-card reveal" data-index="02"><span class="catalog-tag">Startkarte</span><h3>Helios-Werft</h3><p>Langer Werft-Korridor</p></article>
+          <article class="catalog-card reveal" data-index="03"><span class="catalog-tag">Startkarte</span><h3>Pyrax-Raffinerie</h3><p>Gefährlicher Asteroidenring</p></article>
+          <article class="catalog-card reveal" data-index="04"><span class="catalog-tag locked">Im Arsenal</span><h3>Nova-Arkologie</h3><p>Biodom über dem Nebel</p></article>
+          <article class="catalog-card reveal" data-index="05"><span class="catalog-tag locked">Im Arsenal</span><h3>Cryo-Schleuse</h3><p>Eisige Raffinerie</p></article>
+          <article class="catalog-card reveal" data-index="06"><span class="catalog-tag locked">Im Arsenal</span><h3>Solarforge</h3><p>Schmiede am Gasriesen</p></article>
+          <article class="catalog-card reveal" data-index="07"><span class="catalog-tag locked">Im Arsenal</span><h3>Vestige-9</h3><p>Verlassene Megastruktur</p></article>
+        </div>
+      </div>
+    </section>
+
+    <section class="tactics" id="tuerme" aria-labelledby="towers-title">
+      <div class="shell">
+        <div class="section-head reveal">
+          <div><p class="eyebrow">GerGames-Arsenal</p><h2 id="towers-title">Sechs Systeme zur Wahl.</h2></div>
+          <p>Drei Türme starten mit dir. Plasma, EMP-Puls und Railgun schaltest du im Spiel mit Kernkristallen frei — ohne Echtgeldkauf in dieser Testversion.</p>
+        </div>
+        <div class="catalog-grid tower-grid">
+          <article class="catalog-card tower-card reveal" data-index="01"><span class="catalog-tag ground">Startausrüstung</span><h3>Kinetik</h3><p class="tower-role">Boden · Einzelziel</p><p>Schnelle, verlässliche Abwehr gegen Bodeneinheiten.</p></article>
+          <article class="catalog-card tower-card reveal" data-index="02"><span class="catalog-tag multi">Startausrüstung</span><h3>Laser</h3><p class="tower-role">Luft &amp; Boden · Schildbrecher</p><p>Mehrzwecklaser, der Schilde von Luft- und Bodenzielen schwächt.</p></article>
+          <article class="catalog-card tower-card reveal" data-index="03"><span class="catalog-tag ground">Startausrüstung</span><h3>Rakete</h3><p class="tower-role">Boden · Flächenschaden</p><p>Trifft Bodenziele und Gegnergruppen mit Explosionsschaden.</p></article>
+          <article class="catalog-card tower-card reveal" data-index="04"><span class="catalog-tag locked">Mit Kristallen</span><h3>Plasma</h3><p class="tower-role">Luft &amp; Boden · Flächenschaden</p><p>Plasmaexplosionen treffen mehrere Gegner im Umkreis.</p></article>
+          <article class="catalog-card tower-card reveal" data-index="05"><span class="catalog-tag locked">Mit Kristallen</span><h3>EMP-Puls</h3><p class="tower-role">Luft &amp; Boden · Impuls</p><p>Schwächt alle Ziele im Radius mit einem breiten Impuls.</p></article>
+          <article class="catalog-card tower-card reveal" data-index="06"><span class="catalog-tag locked">Mit Kristallen</span><h3>Railgun</h3><p class="tower-role">Luft &amp; Boden · Durchschlag</p><p>Ein lila Strahl durchschlägt mehrere Gegner auf einer Linie.</p></article>
+        </div>
+        <p class="catalog-note">Turmrollen und Freischaltungen können sich während der Alpha-Entwicklung noch ändern.</p>
+      </div>
+    </section>
+
     <section class="gallery" aria-labelledby="gallery-title">
       <div class="shell">
         <div class="section-head reveal">