design: Auth-Seiten als 2-Spalter + Preis-Hierarchie

- Login/Register: links Formular, rechts Vertrauens-Panel (Logo, 🇨🇭 Daten in
  der Schweiz, Backups, kündbar) → wirkt hochwertiger als nackte Box
- Preise: empfohlene Karte hervorgehoben (angehoben, Akzent-Glow, Tönung)
- responsive: Aside/Lift fällt unter 760/860px weg

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

public/js/hosting-app.js

@@ -39,13 +39,32 @@
   function card(inner, wide) {
     return '<div class="hosting-card' + (wide ? " wide" : "") + '">' + inner + "</div>";
   }
+
+  // Auth-Karten als 2-Spalter: links Formular, rechts Vertrauens-Panel.
+  // (Login/Register) — wirkt deutlich hochwertiger als die nackte Box.
+  function authCard(formInner) {
+    return (
+      '<div class="hosting-auth">' +
+        '<div class="hosting-auth-form">' + formInner + "</div>" +
+        '<div class="hosting-auth-aside">' +
+          '<div class="rapport-logo-card" style="margin:0 0 28px"><div class="rapport-logo-text">RAPPORT</div><div class="rapport-logo-sub">Hosting</div></div>' +
+          '<ul class="hosting-aside-list">' +
+            "<li>🇨🇭 Daten in der Schweiz</li>" +
+            "<li>Tägliche Backups</li>" +
+            "<li>In Minuten startklar</li>" +
+            "<li>Monatlich kündbar</li>" +
+          "</ul>" +
+        "</div>" +
+      "</div>"
+    );
+  }
   function msg(el, text, kind) {
     el.innerHTML = text ? '<div class="hosting-msg ' + kind + '">' + esc(text) + "</div>" : "";
   }
 
   // ── Login ──────────────────────────────────────────────────────────────
   function renderLogin() {
-    root.innerHTML = card(
+    root.innerHTML = card(authCard(
       '<div class="hosting-title">Anmelden</div>' +
       '<div class="hosting-sub">Zu Ihrer Rapport-Instanz</div>' +
       '<div id="m"></div>' +
@@ -58,7 +77,7 @@
       "</form>" +
       '<div class="hosting-foot">Noch kein Konto? ' +
       '<button class="hosting-link" id="toReg">Registrieren</button></div>'
-    );
+    ), true);
     const m = root.querySelector("#m");
     root.querySelector("#toReg").onclick = () => go("/register/");
     root.querySelector("#f").onsubmit = async (e) => {
@@ -76,7 +95,7 @@
 
   // ── Registrierung ──────────────────────────────────────────────────────
   function renderRegister() {
-    root.innerHTML = card(
+    root.innerHTML = card(authCard(
       '<div class="hosting-title">Konto erstellen</div>' +
       '<div class="hosting-sub">In Minuten zur eigenen Instanz</div>' +
       '<div id="m"></div>' +
@@ -89,7 +108,7 @@
       "</form>" +
       '<div class="hosting-foot">Schon ein Konto? ' +
       '<button class="hosting-link" id="toLogin">Anmelden</button></div>'
-    );
+    ), true);
     const m = root.querySelector("#m");
     root.querySelector("#toLogin").onclick = () => go("/login/");
     root.querySelector("#f").onsubmit = async (e) => {