Interne Vorschau-Seite /demo-abo/ für Konto mit aktivem Abo

Neue, nicht verlinkte Seite (noindex, aus der Sitemap ausgeschlossen), die
beim Aufruf ein Demo-Konto mit aktivem "Großes Abo" (14 bezahlte Monate,
verfügbare + bereits eingelöste Teddy-Prämien, mehrere Benachrichtigungen,
laufender Treuebonus-Fortschritt) ins localStorage DES AUFRUFENDEN BROWSERS
schreibt und direkt zum Abo-Tab im Kundenkonto weiterleitet — ändert nichts
an echten Kundendaten, jede Person sieht die Vorschau nur bei sich selbst.

Dafür neu: Layout.astro bekommt eine noindex-Prop, und die Kontoseite
unterstützt jetzt Deep-Links per URL-Hash (#abo, #treuebonus, …), damit die
Vorschau direkt im richtigen Tab landet.

Separat per `wrangler pages deploy --branch=vorschau-abo` auf eine eigene
Vorschau-URL deployed (vorschau-abo.vans-diy-bastelbedarf.pages.dev) —
komplett getrennt von der normalen Produktions-URL, wird nicht durch den
GitHub-Actions-Workflow (nur branch=main) überschrieben.

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

astro.config.mjs

@@ -8,7 +8,10 @@ const SITE_URL = 'https://www.vans-diy-bastelbedarf.de';
 
 export default defineConfig({
   site: SITE_URL,
-  integrations: [sitemap()],
+  // /demo-abo/ ist eine interne Vorschau-Seite (simuliertes aktives Abo, für VanVan und mich zum
+  // Anschauen) — soll nie in der Sitemap/Suchmaschinen auftauchen (siehe zusätzlich noindex-Meta
+  // in der Seite selbst).
+  integrations: [sitemap({ filter: (page) => !page.includes('/demo-abo/') })],
   vite: {
     server: {
       // Erlaubt Zugriff über den temporären cloudflared-Quick-Tunnel (nur für lokale

src/layouts/Layout.astro

@@ -13,6 +13,9 @@ interface Props {
   path?: string;
   /** Seite existiert nur auf Deutsch (Rechtstexte) — siehe LanguageSwitcher. */
   legalOnly?: boolean;
+  /** Interne Vorschau-/Demoseiten (z.B. /demo-abo/) sollen nie von Suchmaschinen indexiert
+   *  werden — setzt zusätzlich zum Sitemap-Ausschluss noch ein robots-Meta. */
+  noindex?: boolean;
 }
 const {
   title,
@@ -20,6 +23,7 @@ const {
   lang = defaultLocale,
   path = "/",
   legalOnly = false,
+  noindex = false,
 } = Astro.props;
 
 const t = useTranslations(lang);
@@ -39,6 +43,7 @@ const p = (href: string) => `${localePrefix(lang)}${href}`;
   <link rel="manifest" href="/manifest.webmanifest" />
   <title>{title} · Van's DIY & Bastelbedarf</title>
   <meta name="description" content={description} />
+  {noindex && <meta name="robots" content="noindex, nofollow" />}
   <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site ?? "https://vans-diy-bastelbedarf.de").toString()} />
   <meta property="og:type" content="website" />
   <meta property="og:site_name" content="Van's DIY & Bastelbedarf" />

src/pages/demo-abo/index.astro

@@ -0,0 +1,69 @@
+---
+import Layout from "../../layouts/Layout.astro";
+import type { Locale } from "../../i18n/config";
+
+const lang: Locale = "de";
+
+// Rein internes Vorschau-Konto (nicht verlinkt, nicht in der Sitemap, noindex) — zeigt, wie das
+// Kundenkonto MIT aktivem Abo aussieht: Großes Abo, 14 durchgehend bezahlte Monate, ein noch
+// verfügbarer kleiner Teddy, ein bereits eingelöster großer Teddy, ein paar realistische
+// Benachrichtigungen und laufender Treuebonus-Fortschritt (nur mit aktivem Abo überhaupt aktiv,
+// siehe scripts/account.ts). Wird per JS ins localStorage DIESES Browsers geschrieben, sobald
+// die Seite aufgerufen wird — ändert nichts an echten Kundendaten, jede Person, die den Link
+// öffnet (auch VanVan), sieht die Vorschau in ihrem eigenen Browser.
+const demoAccount = {
+  loggedIn: true,
+  name: "Vorschau Kundin",
+  username: "Vorschau",
+  email: "[email protected]",
+  photo: "",
+  bewerteteBestellungen: [],
+  treueBestellungen: 6,
+  treuebonusAktiv: false,
+  treuebonusArtikelSlug: null,
+  abo: {
+    stufe: "gross",
+    startDatum: "2025-06-03",
+    bezahltBisDatum: "2026-09-03",
+    bezahlteMonate: 14,
+    gekuendigt: false,
+    gekuendigtAm: null,
+    kleinTeddyFreigeschaltetGesamt: 2,
+    grossTeddyFreigeschaltetGesamt: 1,
+    kleinTeddyEingeloest: 1,
+    grossTeddyEingeloest: 1,
+    historie: [],
+  },
+  benachrichtigungen: [
+    { key: "abo_teddy_klein_frei", datum: "2026-07-03", gelesen: false },
+    { key: "abo_zahlung_erfolgreich", datum: "2026-07-03", gelesen: true },
+    { key: "abo_zahlung_erfolgreich", datum: "2026-06-03", gelesen: true },
+    { key: "abo_teddy_gross_eingeloest", datum: "2026-06-01", gelesen: true },
+    { key: "abo_gewechselt", stufe: "gross", datum: "2026-01-15", gelesen: true },
+    { key: "abo_abgeschlossen", datum: "2025-06-03", gelesen: true },
+  ],
+};
+---
+<Layout
+  title="Vorschau: Konto mit aktivem Abo"
+  description="Interne Vorschau-Seite — zeigt das Kundenkonto mit einem simulierten aktiven Abo."
+  lang={lang}
+  path="/demo-abo/"
+  noindex={true}
+>
+  <section class="section-tight">
+    <div class="container">
+      <p class="todo-note">
+        Interne Vorschau für VanVan — zeigt das Kundenkonto so, wie es mit einem aktiven "Großes Abo"
+        aussieht (Prämien, Benachrichtigungen, Treuebonus). Wird nur in DEINEM Browser simuliert,
+        ändert nichts an echten Kundendaten. Du wirst gleich automatisch weitergeleitet …
+      </p>
+      <p><a href="/konto/angemeldet/#abo" id="demo-weiter-link">Falls die Weiterleitung nicht klappt: hier klicken →</a></p>
+    </div>
+  </section>
+</Layout>
+
+<script define:vars={{ demoAccount }}>
+  localStorage.setItem("vandiy_account_v1", JSON.stringify(demoAccount));
+  window.location.href = "/konto/angemeldet/#abo";
+</script>

src/pages/konto/angemeldet.astro

@@ -503,7 +503,11 @@ const angekommeneBestellungen = beispielBestellungen.filter((b) => b.status ===
     datenSection?.scrollIntoView({ behavior: "smooth", block: "start" });
   });
 
-  setActiveTab(null);
+  // Deep-Link per URL-Hash (z.B. /konto/angemeldet/#abo) — springt direkt zum passenden Tab,
+  // genutzt u.a. von der Vorschau-Seite /demo-abo/.
+  const hashTab = location.hash.replace("#", "");
+  const gueltigeHashTabs = ["bestellungen", "offene", "wunschliste", "daten", "treuebonus", "abo"];
+  setActiveTab(gueltigeHashTabs.includes(hashTab) ? hashTab : null);
 </script>
 <script>
   import { getAccount, isLoggedIn, logout, setUsername, setPhoto, hatBestellungBewertet, anzeigeName, treueFortschritt, aboStatus, aboAbschliessen, aboZahlungSimulieren, aboKuendigen, teddyEinloesen } from "../../scripts/account";