DogiCrew-Registrierung: "Coming Soon"-Sperre + Bald-Badge im Nav-Knopf

Nutzer-Wunsch 20.08.2026: DogiCrew ist "das geilste Bonus" -- der Registrieren-
Knopf soll noch nicht bedienbar sein (Dogis PayPal-Business-Zugangsdaten fehlen
noch, siehe DogFather Website - Offene Punkte.md), aber Besucher sollen ueber
den Nav-Knopf trotzdem ganz normal auf die Seite kommen und die Vorschau sehen
duerfen -- "soll alles bleiben" ausser dem einen Knopf.

- Nav-Knopf (DogiCrew/Abo aktivieren, main.js renderAboButton): neues kleines
  Schimmer-Badge "Bald" direkt in der Pille (main.css .nav-cta-soon, reine
  Wiederverwendung von .btn-silver-text/-spark in kleinerem Massstab). Nur auf
  den drei Zielen, die zur (noch gesperrten) Registrierung fuehren -- NICHT auf
  supporter.html, das ist der echte, bereits funktionierende Bereich fuer
  Dogi/VanVan als Test-Supporter.
- abonnieren.html: Registrieren-Knopf ersetzt durch neue .btn-gold-locked-
  Komponente -- eigener Gold/Schloss-Stil (nicht das schon anderswo auf dieser
  Seite vergebene .btn-silver), natives disabled-Attribut (kein JS noetig,
  disabled-Buttons feuern keine Click-Events -- der bestehende Listener bleibt
  unveraendert und inert). Formularfelder bleiben normal ausfuellbar (Teaser),
  nur der Absende-Knopf ist gesperrt.

Bug waehrend der Umsetzung gefunden UND behoben, nicht nur uebersehen: die
rotierende Conic-Gradient-Randmaske von .btn-silver/.btn-legendary (copy-paste
als erster Versuch) verzieht sich auf diesem sehr langgestreckten 100%-Breite-
Knopf zu einer krummen Schlaufe -- exakt die dokumentierte Lektion in
Projektregeln.md Punkt 14 (03.08.2026, TikTok-Button-Bug), die beim ersten
Entwurf übersehen wurde. Per Playwright-Screenshots über mehrere Animations-
Frames nachgewiesen (nicht nur vermutet) und auch am bereits LIVE laufenden
.btn-silver auf dieser Seite reproduziert, um auszuschliessen, dass es an der
neuen Komponente statt an der Technik selbst liegt. Fix: derselbe sichere
Zwei-Layer-Background-Trick wie bei .abo-google-frame (gleiche Datei) --
Bewegung nur ueber background-position, bleibt geometrieunabhaengig exakt an
der Kontur. Nach dem Fix erneut ueber mehrere Frames verifiziert, sauber.

Co-Authored-By: Claude Opus 5 <[email protected]>

abonnieren.html

@@ -320,7 +320,23 @@
             <label for="reg-email" data-i18n="ab_feld_email">E-Mail-Adresse</label>
             <input type="email" id="reg-email" maxlength="120" />
           </div>
-          <button type="button" class="btn btn-primary" style="width:100%;" id="btn-register" data-i18n="ab_btn_register">Registrieren</button>
+          <!-- Bugfix/Nutzer-Wunsch 20.08.2026: Die DogiCrew-Registrierung ist
+               technisch fertig, aber ohne Dogis echte PayPal-Business-Zugangsdaten
+               kann niemand wirklich zahlen (siehe DogFather Website - Offene
+               Punkte.md). Bis die stehen: Knopf bleibt sichtbar (Teaser, "soll
+               alles bleiben"), aber NICHT bedienbar — natives disabled-Attribut
+               (nicht nur optisch/pointer-events, damit es auch für Tastatur/
+               Screenreader korrekt gesperrt ist). main.js hängt weiterhin
+               unverändert einen Klick-Listener an dieselbe ID — disabled-Buttons
+               feuern in allen Browsern keine Click-Events, daher hier bewusst
+               KEINE JS-Änderung nötig. Eigener Gold/Schloss-Stil (.btn-gold-locked,
+               siehe main.css) statt des generischen .btn-silver, der auf dieser
+               Seite schon für die Teddy-Kollektion vergeben ist. -->
+          <button type="button" class="btn-gold-locked" style="width:100%;margin-top:.2rem;" id="btn-register"
+                  disabled aria-disabled="true">
+            <span class="btn-gold-locked-lock" aria-hidden="true">🔒</span>
+            <span class="btn-gold-locked-text" data-i18n="ab_kollektion_coming_soon">Coming soon…</span>
+          </button>
           <p class="abo-fehler" id="register-fehler"></p>
           <p class="abo-switch"><a id="switch-to-login" data-i18n="ab_switch_login">Schon Supporter? Hier einloggen</a></p>
         </div>