commit 2d961adad4d7e2fb59b04105e5bc5f51e3d497c9 Author: knuthtimo-lab Date: Thu Jul 23 21:59:15 2026 +0200 Initialisieren diff --git a/.audit-next.err.log b/.audit-next.err.log new file mode 100644 index 0000000..a4d0dc3 --- /dev/null +++ b/.audit-next.err.log @@ -0,0 +1,2 @@ +⚠ "next start" does not work with "output: standalone" configuration. Use "node .next/standalone/server.js" instead. +^C \ No newline at end of file diff --git a/.audit-next.out.log b/.audit-next.out.log new file mode 100644 index 0000000..2e6c307 --- /dev/null +++ b/.audit-next.out.log @@ -0,0 +1,8 @@ + +> webseite@0.1.0 start +> next start -p 3100 + +▲ Next.js 16.2.11 +- Local: http://localhost:3100 +- Network: http://10.5.0.2:3100 +✓ Ready in 249ms diff --git a/.claude/launch.json b/.claude/launch.json new file mode 100644 index 0000000..6527ef8 --- /dev/null +++ b/.claude/launch.json @@ -0,0 +1,12 @@ +{ + "version": "0.0.1", + "configurations": [ + { + "name": "dev", + "runtimeExecutable": "npm", + "runtimeArgs": ["run", "dev"], + "port": 3000, + "autoPort": true + } + ] +} diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..072ca2e --- /dev/null +++ b/.dockerignore @@ -0,0 +1,32 @@ +# dependencies +node_modules +.pnp +.pnp.* + +# next.js build output +.next +out +build + +# git +.git +.gitignore + +# env files (pass secrets via docker-compose env_file / environment instead) +.env +.env.* +!.env.example + +# docs and planning files (not needed inside the image) +*.md +*.csv + +# editor/OS +.DS_Store +.vscode +.idea + +# docker itself +Dockerfile +.dockerignore +docker-compose.yml diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..5ef6a52 --- /dev/null +++ b/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..8bd0e39 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,5 @@ + +# This is NOT the Next.js you know + +This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices. + diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..43c994c --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..243d9d9 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,32 @@ +# syntax=docker/dockerfile:1 + +FROM node:20-alpine AS deps +WORKDIR /app +COPY package.json package-lock.json ./ +RUN npm ci + +FROM node:20-alpine AS builder +WORKDIR /app +ENV NEXT_TELEMETRY_DISABLED=1 +COPY --from=deps /app/node_modules ./node_modules +COPY . . +RUN npm run build + +FROM node:20-alpine AS runner +WORKDIR /app +ENV NODE_ENV=production \ + NEXT_TELEMETRY_DISABLED=1 \ + PORT=3000 \ + HOSTNAME=0.0.0.0 + +RUN addgroup --system --gid 1001 nodejs \ + && adduser --system --uid 1001 nextjs + +COPY --from=builder /app/public ./public +COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ +COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static + +USER nextjs +EXPOSE 3000 + +CMD ["node", "server.js"] diff --git a/Keyword Stats 2026-07-22 at 23_08_06.csv b/Keyword Stats 2026-07-22 at 23_08_06.csv new file mode 100644 index 0000000..452365b Binary files /dev/null and b/Keyword Stats 2026-07-22 at 23_08_06.csv differ diff --git a/Keyword Stats 2026-07-22 at 23_15_06.csv b/Keyword Stats 2026-07-22 at 23_15_06.csv new file mode 100644 index 0000000..2b5ea61 Binary files /dev/null and b/Keyword Stats 2026-07-22 at 23_15_06.csv differ diff --git a/LIVE-PLAN-entscheidomat.md b/LIVE-PLAN-entscheidomat.md new file mode 100644 index 0000000..c4ea5e8 --- /dev/null +++ b/LIVE-PLAN-entscheidomat.md @@ -0,0 +1,384 @@ +# Entscheidomat – Allgemeiner Go-Live-Plan + +**Projekt:** Entscheidomat-Webseite +**Projektordner:** `C:\Users\timo\Documents\Elena\webseite` +**Zieldomain:** `https://entscheidomat.com` +**Ziel:** Die Website sicher, rechtlich sauber, technisch stabil und öffentlich nutzbar live nehmen. + +--- + +## Go-Live-Status heute + +### Bereits vorhanden + +- [x] Next.js-Projekt funktioniert lokal +- [x] Produktions-Build läuft erfolgreich +- [x] Haupt-Tool-Oberfläche vorhanden +- [x] Münze, Glücksrad, Würfel, Zufallszahl, Magic 8-Ball und Listen-Tool vorhanden +- [x] responsive Grundstruktur vorhanden +- [x] deutsche Seitensprache vorhanden +- [x] grundlegende Title- und Description-Metadaten vorhanden + +### Noch offen + +- [ ] echte Domain verbinden und HTTPS prüfen +- [ ] Impressum +- [ ] Datenschutz +- [ ] Kontaktmöglichkeit +- [ ] Canonical URL +- [ ] Open-Graph- und Twitter-Metadaten +- [ ] Sitemap +- [ ] Robots-Datei +- [ ] Structured Data / JSON-LD +- [ ] SEO-Unterseiten für die wichtigsten Tools +- [ ] Lint-Fehler beheben +- [ ] mobile und Accessibility-QA +- [ ] Analytics und Consent-Lösung +- [ ] Search Console +- [ ] finale Produktionsprüfung + +--- + +# Phase 1 – Entscheidungen vor dem Launch + +## 1. Domain und Marke festlegen + +- [ ] Ist `entscheidomat.com` definitiv die Hauptdomain? +- [ ] Soll `www.entscheidomat.com` weiterleiten oder die Hauptdomain sein? +- [ ] finalen Markennamen und Logo festlegen +- [ ] Kontakt-E-Mail unter der Domain festlegen +- [ ] Betreiber/Verantwortlichen für Impressum und Datenschutz bestimmen + +**Ergebnis:** Eine einzige kanonische Domainvariante. + +## 2. Zielgruppe und Produktversprechen festlegen + +Finale Kurzbeschreibung: + +> Entscheidomat ist ein kostenloser Zufallsgenerator und eine digitale Entscheidungshilfe mit Münzwurf, Glücksrad, Würfel, Zufallszahl, Magic 8-Ball und Listen-Auswahl. + +Diese Beschreibung muss konsistent erscheinen in: + +- Homepage +- Meta Description +- Open Graph +- JSON-LD +- Social Profiles +- Impressum/Datenschutz, soweit relevant + +--- + +# Phase 2 – Rechtliche Grundlage + +Diese Punkte müssen vor dem öffentlichen Launch erledigt werden: + +- [ ] Impressum erstellen +- [ ] Datenschutzerklärung erstellen +- [ ] Kontaktmöglichkeit ergänzen +- [ ] Erklärung zu lokalen Speicherfunktionen ergänzen +- [ ] Erklärung zu Analytics ergänzen, falls Analytics eingesetzt wird +- [ ] Erklärung zu Werbung/AdSense ergänzen, sobald Werbung aktiv ist +- [ ] Cookie-/Consent-Management für nicht notwendige Cookies und personalisierte Werbung prüfen +- [ ] EEA-, UK- und Schweiz-Anforderungen für Google-Werbung prüfen +- [ ] Footer dauerhaft mit Impressum und Datenschutz verlinken + +**Go-Live-Blocker:** Ohne Impressum und Datenschutz nicht öffentlich starten. + +--- + +# Phase 3 – Produkt- und Funktionstest + +## 3.1 Alle Tools testen + +Für jedes Tool prüfen: + +- [ ] Tool öffnet ohne Fehler +- [ ] Startzustand ist verständlich +- [ ] Button funktioniert mehrfach hintereinander +- [ ] Ergebnis wird sichtbar aktualisiert +- [ ] Ergebnis ist für Screenreader angekündigt +- [ ] Reset/Neustart funktioniert +- [ ] keine falschen oder unmöglichen Ergebnisse +- [ ] keine Endlosschleife +- [ ] keine fehlerhaften Zufallsbereiche +- [ ] keine Daten gehen beim normalen Seitenwechsel unerwartet verloren + +## 3.2 Spezifische Tests + +### Münzwurf + +- [ ] Kopf und Zahl erscheinen korrekt +- [ ] Animation endet immer +- [ ] Ergebnis bleibt nach Animation sichtbar +- [ ] Animation funktioniert auch bei Reduced Motion + +### Glücksrad + +- [ ] Standardoptionen funktionieren +- [ ] eigene Optionen können hinzugefügt werden +- [ ] leere Eingaben werden abgefangen +- [ ] lange Optionen werden sauber dargestellt +- [ ] Rad bleibt innerhalb des Bildschirms + +### Würfel + +- [ ] Würfelanimation endet zuverlässig +- [ ] Ergebnis stimmt mit der gewählten Würfelart überein +- [ ] mehrfaches Würfeln funktioniert + +### Zufallszahl + +- [ ] Minimum und Maximum werden validiert +- [ ] Minimum größer als Maximum wird abgefangen +- [ ] Dezimalwerte werden sauber behandelt +- [ ] sehr große Werte verursachen keinen Layoutfehler + +### Magic 8-Ball + +- [ ] Frage kann eingegeben werden +- [ ] leere Frage wird sinnvoll behandelt +- [ ] Antwort wird deutlich angezeigt +- [ ] mehrfaches Fragen funktioniert + +### Listen-Auswahl + +- [ ] leere Liste wird abgefangen +- [ ] mehrere Einträge werden korrekt getrennt +- [ ] Sonderzeichen funktionieren +- [ ] zufällige Auswahl wird angezeigt + +--- + +# Phase 4 – Mobile, Browser und Accessibility + +## 4.1 Browsermatrix + +- [ ] Chrome Desktop +- [ ] Chrome Android +- [ ] Safari iPhone +- [ ] Safari macOS +- [ ] Firefox Desktop +- [ ] Edge Desktop + +## 4.2 Bildschirmgrößen + +- [ ] 320 px Breite +- [ ] 375 px Breite +- [ ] 390 px Breite +- [ ] 768 px Breite +- [ ] 1024 px Breite +- [ ] 1440 px Breite + +## 4.3 Accessibility + +- [ ] alle interaktiven Elemente per Tab erreichbar +- [ ] sichtbarer Focus-Ring vorhanden +- [ ] Buttons haben verständliche Namen +- [ ] Tabs haben korrekte ARIA-Zuordnung +- [ ] Ergebnisse werden per `aria-live` angekündigt +- [ ] keine wichtigen Inhalte nur über Farbe verständlich +- [ ] ausreichender Farbkontrast +- [ ] Reduced Motion funktioniert +- [ ] Sound wird nicht ungefragt abgespielt +- [ ] Escape/Back-Verhalten bei Overlays prüfen + +--- + +# Phase 5 – Technischer Produktions-Check + +## 5.1 Codequalität + +- [ ] `npm run build` erfolgreich +- [ ] `npm run lint` erfolgreich +- [ ] keine TypeScript-Fehler +- [ ] keine Browser-Console-Errors +- [ ] keine Hydration-Warnings +- [ ] keine unnötigen Debug-Logs +- [ ] keine Testdaten oder Platzhalter im Produktionsbuild +- [ ] keine privaten API-Keys im Clientcode + +Aktuell besteht der Build, aber der Lint-Lauf hat noch sechs Fehler in Preloader, Sound-Provider, Dice-Roller und zwei Hooks. Diese müssen vor dem finalen Go-Live behoben werden. + +## 5.2 Performance + +- [ ] Lighthouse Mobile prüfen +- [ ] Largest Contentful Paint prüfen +- [ ] Cumulative Layout Shift prüfen +- [ ] Interaction to Next Paint prüfen +- [ ] JavaScript-Bundle prüfen +- [ ] Animationen auf schwachen Geräten testen +- [ ] Fonts und externe Ressourcen prüfen +- [ ] keine unnötigen Audio-/Videoressourcen laden + +Zielwerte als praktische Launch-Grenze: + +- Performance mindestens 80 auf Mobile +- keine kritischen Accessibility-Fehler +- keine großen Layout Shifts +- sichtbarer Hauptinhalt ohne lange Wartezeit + +--- + +# Phase 6 – SEO-Basis vor dem Launch + +- [ ] finale Startseiten-H1 festlegen +- [ ] Title auf Produktkategorie und Nutzen ausrichten +- [ ] Description finalisieren +- [ ] Canonical setzen +- [ ] Open Graph setzen +- [ ] Twitter Card setzen +- [ ] Social Preview Image erstellen +- [ ] `app/robots.ts` erstellen +- [ ] `app/sitemap.ts` erstellen +- [ ] JSON-LD für WebApplication/WebSite ergänzen +- [ ] Haupt-Tools intern verlinken +- [ ] keine Testseiten indexierbar machen +- [ ] URLs für Tool-Unterseiten festlegen + +## Minimale empfehlenswerte Unterseiten + +- `/ja-nein-generator` +- `/gluecksrad` +- `/wuerfel-online` +- `/namen-auslosen` +- `/muenze-werfen` +- `/zufallszahl-generator` +- `/magic-8-ball` +- `/listen-generator` +- `/impressum` +- `/datenschutz` + +--- + +# Phase 7 – Analytics und Monitoring + +Vor dem Launch entscheiden: + +- [ ] Google Analytics 4 oder datenschutzfreundliche Alternative +- [ ] Consent-Management +- [ ] Search Console +- [ ] Bing Webmaster Tools +- [ ] Fehler-Monitoring + +Sinnvolle Events: + +- [ ] `tool_open` +- [ ] `tool_result` +- [ ] `tool_share` +- [ ] `tool_customized` +- [ ] `faq_open` + +Keine personenbezogenen Daten in Event-Parametern speichern. + +Nach dem Launch beobachten: + +- Indexierung +- Impressions +- Klicks +- CTR +- Tool-Nutzung +- Absprungrate +- Core Web Vitals +- Browserfehler +- mobile Fehler + +--- + +# Phase 8 – AdSense erst nach dem Basis-Launch + +AdSense nicht als allerersten Schritt einbauen. Erst muss die Seite einen klaren eigenständigen Nutzerwert und ausreichenden öffentlichen Content haben. + +Vor dem AdSense-Antrag: + +- [ ] Impressum und Datenschutz live +- [ ] Consent Management eingerichtet +- [ ] mehrere hochwertige Tool-Seiten live +- [ ] keine leeren oder dünnen Unterseiten +- [ ] keine Platzhaltertexte +- [ ] Kontaktmöglichkeit vorhanden +- [ ] Search Console eingerichtet +- [ ] Anzeigen nicht in interaktive Buttons integrieren +- [ ] Anzeigen klar als Werbung erkennbar +- [ ] keine Klickanreize +- [ ] keine Werbung vor dem eigentlichen Tool, wenn dadurch die Nutzung gestört wird + +Das Ziel ist nicht möglichst viele Anzeigen, sondern maximaler regelkonformer Umsatz bei guter UX. + +--- + +# Phase 9 – Go-Live-Ablauf + +## Einen Tag vor dem Launch + +- [ ] finalen Git-Commit/Backup erstellen +- [ ] Produktionsvariablen prüfen +- [ ] Domain-DNS prüfen +- [ ] HTTPS prüfen +- [ ] Build und Lint erneut ausführen +- [ ] mobile Smoke-Test durchführen +- [ ] rechtliche Seiten prüfen +- [ ] Social Preview testen +- [ ] robots.txt testen +- [ ] sitemap.xml testen + +## Zum Launch + +- [ ] Domain auf Produktionsversion zeigen lassen +- [ ] Startseite öffnen +- [ ] alle Haupt-URLs mit 200 testen +- [ ] HTTPS-Redirect testen +- [ ] Canonical im HTML prüfen +- [ ] robots.txt aufrufen +- [ ] sitemap.xml aufrufen +- [ ] Search Console bestätigen +- [ ] Sitemap einreichen +- [ ] erste URL-Inspektion starten + +## Direkt nach dem Launch + +- [ ] Server-/Browserfehler beobachten +- [ ] Search Console Coverage prüfen +- [ ] Mobile Usability prüfen +- [ ] Social Share testen +- [ ] mindestens ein Tool auf iPhone und Android testen +- [ ] Nutzerfeedback sammeln +- [ ] keine großen Content- oder URL-Änderungen ohne Redirect-Plan + +--- + +# Go/No-Go-Checkliste + +Die Website darf live gehen, wenn alle Punkte erfüllt sind: + +- [ ] Domain und HTTPS funktionieren +- [ ] Impressum vorhanden +- [ ] Datenschutz vorhanden +- [ ] Kontaktmöglichkeit vorhanden +- [ ] Build erfolgreich +- [ ] Lint erfolgreich +- [ ] keine Console Errors +- [ ] alle Kern-Tools funktionieren +- [ ] mobile Smoke-Tests bestanden +- [ ] Canonical korrekt +- [ ] robots.txt vorhanden +- [ ] sitemap.xml vorhanden +- [ ] keine versehentliche Noindex-Sperre +- [ ] Analytics/Consent-Entscheidung umgesetzt +- [ ] Backup vorhanden + +**Wenn ein rechtlicher Punkt, HTTPS, Build, Kernfunktion oder schwerer Mobile-Fehler offen ist: NO-GO.** + +--- + +# Empfohlene Reihenfolge für die nächsten konkreten Arbeiten + +1. Impressum, Datenschutz und Kontakt +2. Domain-/Canonical-Konfiguration +3. Lint-Fehler beheben +4. Mobile- und Accessibility-QA +5. Sitemap, Robots, Open Graph und JSON-LD +6. die fünf wichtigsten SEO-Unterseiten erstellen +7. Search Console und Monitoring einrichten +8. Website live nehmen +9. zwei bis vier Wochen Daten sammeln +10. erst danach AdSense beantragen und vorsichtig einbauen diff --git a/README.md b/README.md new file mode 100644 index 0000000..1885339 --- /dev/null +++ b/README.md @@ -0,0 +1,254 @@ +# Entscheidomat + +Entscheidomat ist eine deutschsprachige Next.js-Web-App mit sieben kostenlosen +Zufalls-Tools: Ja/Nein-Generator, Münze, Glücksrad, Würfel, +Zufallszahl-Generator, Magic 8-Ball und Namen-Auslosung. + +Die Anwendung wird als Docker-Container gebaut und hinter einem Reverse Proxy +wie Caddy betrieben. Diese Anleitung beschreibt den kompletten Weg vom +Produktionsserver bis zum sicheren Go-live von `entscheidomat.com`. + +## Überblick + +```text +Browser + -> Cloudflare DNS / CDN (optional) + -> Caddy (TLS, HTTPS, Redirects) + -> Docker-Container auf Port 3000 + -> Next.js-App +``` + +Die App selbst enthält keine Datenbank. Eigene Einstellungen der Tools werden im +Browser der Nutzenden gespeichert. Umami Cloud wird für anonyme, +aggregierte Nutzungsstatistiken geladen. + +## Voraussetzungen + +Auf dem Produktionsserver werden benötigt: + +- Linux-Server mit aktuellem Docker und Docker Compose Plugin +- eine Domain, z. B. `entscheidomat.com` +- Zugriff auf die DNS-Verwaltung, ggf. Cloudflare +- Caddy als Reverse Proxy (oder ein gleichwertiger Proxy) +- offene Ports `80` und `443` für Caddy + +Prüfen: + +```bash +docker --version +docker compose version +caddy version +``` + +## 1. Projekt auf den Server übertragen + +Lege auf dem Server ein Verzeichnis für die Anwendung an und übertrage den +Projektordner dorthin. Bei einem Git-Repository ist ein Clone am einfachsten: + +```bash +git clone /opt/entscheidomat +cd /opt/entscheidomat +``` + +Ohne Git kannst du den Projektordner per `rsync` oder SFTP übertragen. Nicht +mit übertragen werden müssen `node_modules` und `.next`; Docker erzeugt beides +beim Build neu. + +## 2. Produktionsumgebung konfigurieren + +Erstelle im Projektordner eine `.env`-Datei: + +```bash +APP_PORT=127.0.0.1:3000 +``` + +Damit ist der App-Port nur lokal auf dem Server erreichbar. Caddy leitet +Anfragen intern an die App weiter; Port 3000 muss nicht öffentlich offen sein. + +> Die `.env`-Datei gehört nicht in ein öffentliches Repository. Aktuell werden +> für die Anwendung keine weiteren Server-Geheimnisse benötigt. + +## 3. App bauen und starten + +```bash +cd /opt/entscheidomat +docker compose up -d --build +docker compose ps +docker compose logs -f app +``` + +Lokaler Gesundheitscheck auf dem Server: + +```bash +curl -I http://127.0.0.1:3000/ +``` + +Erwartet wird `HTTP/1.1 200 OK`. + +## 4. Caddy konfigurieren + +Lege eine Caddy-Konfiguration an oder ergänze die bestehende Caddyfile. Der +folgende Aufbau leitet `www` permanent auf die Hauptdomain und nutzt Caddy für +TLS und Reverse Proxying: + +```caddyfile +www.entscheidomat.com { + redir https://entscheidomat.com{uri} permanent +} + +entscheidomat.com { + encode zstd gzip + reverse_proxy 127.0.0.1:3000 +} +``` + +Nach dem Ändern die Konfiguration prüfen und neu laden: + +```bash +caddy validate --config /etc/caddy/Caddyfile +sudo systemctl reload caddy +``` + +Der genaue Pfad kann je nach Caddy-Installation abweichen. + +## 5. DNS und Cloudflare + +Lege für die Domain folgende DNS-Einträge an: + +| Typ | Name | Ziel | +| --- | --- | --- | +| A | `@` | Öffentliche IPv4-Adresse des Servers | +| CNAME | `www` | `entscheidomat.com` | + +Wenn Cloudflare verwendet wird: + +1. Stelle SSL/TLS auf **Full (strict)**. +2. Lass Caddy ein gültiges Zertifikat verwalten oder nutze ein korrekt + eingerichtetes Cloudflare Origin Certificate. +3. Aktiviere erst nach erfolgreichem Origin-Test den Proxy-Modus (orange Wolke). +4. Lege keine Cache-Regel an, die HTML-Seiten oder `robots.txt`/`sitemap.xml` + dauerhaft mit einem 404-Status cached. + +## 6. Go-live-Prüfung + +Nach DNS-Propagation alle folgenden Befehle ausführen: + +```bash +curl -I https://entscheidomat.com/ +curl -I https://entscheidomat.com/ja-nein-generator +curl -I https://entscheidomat.com/robots.txt +curl -I https://entscheidomat.com/sitemap.xml +curl -I http://entscheidomat.com/ +curl -I https://www.entscheidomat.com/ +``` + +Erwartungen: + +- Startseite, Toolseiten, `robots.txt` und `sitemap.xml`: `200` +- HTTP und `www`: ein permanenter Redirect auf `https://entscheidomat.com` +- keine Cloudflare- oder Proxy-404-Seiten + +Danach im Browser prüfen: + +- Canonical URLs +- Titel und Meta-Beschreibungen +- Open-Graph-Vorschau +- alle sieben Toolseiten +- Impressum und Datenschutzerklärung + +## 7. SEO nach dem Launch + +1. Property in Google Search Console und Bing Webmaster Tools bestätigen. +2. `https://entscheidomat.com/sitemap.xml` einreichen. +3. Nach einigen Tagen Coverage, Indexierung und Core Web Vitals prüfen. +4. Regelmäßig die Umami-Daten und Suchanfragen aus der Search Console auswerten. + +Die App erzeugt statisch unter anderem: + +- `/robots.txt` +- `/sitemap.xml` +- `/opengraph-image` +- `/twitter-image` + +## Aktualisierungen deployen + +Bei jeder Änderung: + +```bash +cd /opt/entscheidomat +git pull +docker compose up -d --build +docker compose logs --tail=100 app +``` + +Ohne Git zuerst die neuen Dateien übertragen und anschließend nur die letzten +zwei Befehle ausführen. + +Bei einem Fehler lässt sich der vorherige, funktionierende Stand am einfachsten +über den vorherigen Git-Commit und einen erneuten Build wiederherstellen. + +## Betrieb und Diagnose + +```bash +# Container-Status +docker compose ps + +# Live-Logs +docker compose logs -f app + +# Neustart ohne Neubau +docker compose restart app + +# Lokalen Container-Check ausführen +docker compose exec app wget --spider -q http://localhost:3000/ +``` + +Für Caddy: + +```bash +sudo systemctl status caddy +sudo journalctl -u caddy -f +``` + +Richte zusätzlich einen externen Uptime-Monitor für mindestens diese URLs ein: + +- `https://entscheidomat.com/` +- `https://entscheidomat.com/robots.txt` +- `https://entscheidomat.com/sitemap.xml` + +## Datenschutz und rechtliche Launch-Checkliste + +Vor der öffentlichen Veröffentlichung müssen die Angaben in Impressum und +Datenschutzerklärung auf die tatsächliche Konfiguration abgestimmt werden: + +- vollständige ladungsfähige Geschäftsanschrift des Einzelunternehmens +- tatsächlicher Name des Hostinganbieters +- Serverstandort Texas, USA, sowie Speicherdauer der Server-Logfiles +- dokumentierte Grundlage für den Datenübertragungsmechanismus in die USA +- Umami Cloud mit gewählter Datenregion EU und die passende + Auftragsverarbeitungs-/Datenschutzdokumentation +- Umsatzsteuer-ID oder Wirtschafts-ID nur, falls tatsächlich vorhanden + +Die vorhandenen Texte sind ein Pre-Launch-Stand und keine individuelle +Rechtsberatung. Vor dem Livegang sollte die finale Fassung rechtlich geprüft +werden. + +## Lokale Entwicklung + +```bash +npm ci +npm run dev +npm run lint +npm run build +``` + +Die lokale App ist anschließend unter `http://localhost:3000` erreichbar. + +## Tech-Stack + +- Next.js 16, React 19 und TypeScript +- Tailwind CSS v4 +- Docker mit Multi-Stage-Build +- Caddy als Reverse Proxy +- Cloudflare optional für DNS/CDN +- Umami Cloud, Datenregion EU diff --git a/SEO-LIVE-PLAN-entscheidomat.md b/SEO-LIVE-PLAN-entscheidomat.md new file mode 100644 index 0000000..17c1251 --- /dev/null +++ b/SEO-LIVE-PLAN-entscheidomat.md @@ -0,0 +1,730 @@ +# Entscheidomat.com – Masterplan für Livegang, SEO, AEO, GEO und AdSense + +**Erstellt:** 23. Juli 2026 +**Projekt:** `C:\Users\timo\Documents\Elena\webseite` +**Zieldomain:** `https://entscheidomat.com` +**Ziel:** Ein technisch sauberes, indexierbares, zitierfähiges und AdSense-taugliches Web-Tool-Portal auf Basis einer Exact-Match-Domain. + +> Dieser Plan ist ein Umsetzungsplan, keine Garantie für Rankings, AI-Zitate, AdSense-Freischaltung oder einen bestimmten Umsatz. Die Domain, Suchvolumina und CPCs sind Chancen-Signale, keine Traffic- oder Erlösprognosen. + +--- + +## 1. Executive Summary + +### Aktueller Stand + +Die bestehende Website ist ein visuell starkes, funktionierendes Next.js-Tool mit sechs interaktiven Zufalls-Tools: + +- Münze +- Glücksrad +- Würfel +- Zufallszahl +- Magic 8-Ball +- Listen-Auswahl + +Der Produktions-Build wurde erfolgreich ausgeführt: + +```text +✓ Compiled successfully +✓ Finished TypeScript +✓ Generating static pages +○ / Static prerendered +``` + +Der Lint-Lauf ist dagegen noch nicht sauber: + +```text +6 errors in: +- components/preloader.tsx +- components/providers/sound-provider.tsx +- components/tools/dice-roller.tsx +- hooks/use-local-storage.ts +- hooks/use-prefers-reduced-motion.ts +``` + +### Gesamturteil + +| Bereich | Aktueller Stand | Live-Urteil | +|---|---:|---| +| Design und Produktidee | stark | bereit nach QA | +| Interaktive Funktionalität | gut | bereit nach QA | +| Produktions-Build | bestanden | gut | +| SEO-Technik | lückenhaft | noch nicht bereit | +| AEO/GEO/AI-Zitierfähigkeit | schwach | noch nicht bereit | +| AdSense-Voraussetzungen | unvollständig | noch nicht beantragen | +| Rechtliches | nicht erkennbar | kritischer Blocker | + +**Empfehlung:** Erst P0/P1 abschließen, dann live stellen und indexieren. Nicht direkt mit einer reinen Tool-Oberfläche in AdSense gehen. + +--- + +## 2. Quellen und Audit-Methode + +Verwendet wurden: + +1. aktueller Code im Projektordner +2. echter `npm run build`-Lauf +3. echter `npm run lint`-Lauf +4. gerenderte lokale Seite im Browser +5. Keyword-Planner-Export `Keyword Stats 2026-07-22 at 23_15_06.csv` +6. großer Keyword-Planner-Export `Keyword Stats 2026-07-22 at 23_08_06.csv` +7. SEO-Audit- und AI-SEO-Skills +8. öffentlich gefundene Corey-Haines-Referenzen zu Programmatic SEO: Template-Design, Datenqualität, Quality Controls und technischem SEO +9. Google Search Central und Google AdSense-Hilfedokumentation + +Eine lokale Skill-Datei mit dem Namen „Corey Haynes“ wurde nicht gefunden. Deshalb wird hier kein nicht vorhandener Skill behauptet. Der Plan übernimmt den erkennbaren Corey-Haines-Ansatz: **erst Suchintention und Template-Architektur, dann skalieren; jede programmatische Seite braucht einzigartige Substanz, Qualitätskontrollen und einen echten Nutzerwert.** + +--- + +## 3. Keyword-Planner-Befund + +### 3.1 Entscheidomat-spezifischer Export + +Datei: + +`Keyword Stats 2026-07-22 at 23_15_06.csv` + +Auswertung: + +- 30 Keywords +- zusammen ausgewiesenes Volumen: **419.050 monatliche Suchen** +- 28 Keywords mit Wettbewerb „Niedrig“ +- die Summe darf **nicht** als erwartbarer Traffic addiert werden, weil Varianten und Suchintentionen sich überschneiden + +Wichtige Gruppen: + +| Cluster | Beispielkeywords | Planner-Volumen | Wettbewerb / CPC-Signal | +|---|---|---:|---| +| Ja/Nein | `ja nein generator`, `generator ja nein`, `ja oder nein generator` | je 50.000 | niedrig, Top-of-page ca. 0,80–1,08 € | +| Würfel | `wuerfel online` | 50.000 | niedrig, ca. 0,39–1,37 € | +| Namen | `zufallsgenerator namen`, `namen zufallsgenerator`, `namens zufallsgenerator` | je 50.000 | niedrig, CPC nicht durchgehend vorhanden | +| Glücksrad | `gluecksrad online` | 50.000 | niedrig, ca. 0,55–2,96 € | +| Entscheidungsrad | `entscheidungsrad` | 5.000 | niedrig, ca. 0,35–3,21 € | +| Glücksrad drehen | `glücksrad drehen` | 5.000 | niedrig, ca. 0,36–1,64 € | +| Münze | `münze werfen online` | 5.000 | niedrig, kein CPC-Wert im Export | +| Entscheidung | `entscheidungsfinder` | 500 | niedrig | + +### 3.2 Großer gemischter Export + +Datei: + +`Keyword Stats 2026-07-22 at 23_08_06.csv` + +Auswertung: + +- 869 Keywords +- zusammen ausgewiesenes Volumen: **2.903.900 monatliche Suchen** +- 773 Keywords mit Wettbewerb „Niedrig“ +- enthält mehrere Projekte und Themen, insbesondere Prozentrechner und Schriftgeneratoren + +Die größten Begriffe des großen Exports sind **nicht** Entscheidomat-Ziele: + +- `prozentrechner`: 500.000 +- `prozent rechner`: 500.000 +- zahlreiche Prozentrechnungsvarianten: 50.000 +- Schriftgenerator-Varianten: 50.000 + +**Konsequenz:** Die 2,9 Millionen dürfen nicht Entscheidomat zugerechnet werden. Prozentomat und Schriftgenerator gehören in separate Projekte bzw. Domains. Entscheidomat erhält ausschließlich die Zufalls-, Entscheidungs-, Würfel-, Rad-, Namen- und Münz-Cluster. + +### 3.3 Keyword-Strategie für die Exact-Match-Domain + +`entscheidomat.com` ist ein gutes Brand-/Category-Signal, aber eine Exact-Match-Domain ist **kein Ranking-Shortcut**. Sie ersetzt nicht: + +- hilfreiche Inhalte +- gute Seitenarchitektur +- interne Links +- externe Autorität +- technische Indexierbarkeit +- E-E-A-T + +Die Domain sollte als merkbare Marke für ein **Entscheidungs- und Zufallstool-Portal** positioniert werden. + +--- + +## 4. Empfohlene Seitenarchitektur + +### Startseite `/` + +**Primäre Funktion:** Marke plus Überblick über das Tool-Portfolio. + +Empfohlener Title: + +> Entscheidomat – Kostenloser Zufallsgenerator und Entscheidungshilfe + +Empfohlener H1: + +> Kostenloser Zufallsgenerator für schnelle Entscheidungen + +Markenclaim als Unterzeile: + +> Lass den Zufall entscheiden. + +Die Startseite soll nicht alle Keywords unnatürlich wiederholen. Sie erklärt das Produkt, verlinkt auf die Tool-Seiten und beantwortet die wichtigste Definition direkt. + +### Priorität-1-Seiten + +| URL | Primärintention | Primärkeywords | +|---|---|---| +| `/ja-nein-generator` | direkte Ja-/Nein-Entscheidung | `ja nein generator`, `ja oder nein generator`, `generator ja nein` | +| `/gluecksrad` | Rad drehen / Entscheidungsrad | `gluecksrad online`, `glücksrad drehen`, `entscheidungsrad` | +| `/wuerfel-online` | virtueller Würfel | `wuerfel online`, `online virtueller würfel` | +| `/namen-auslosen` | Namen zufällig ziehen | `zufallsgenerator namen`, `namen zufallsgenerator`, `namen auslosen` | +| `/muenze-werfen` | Kopf oder Zahl | `münze werfen online`, `online münze werfen`, `münze online werfen` | + +### Priorität-2-Seiten + +| URL | Zweck | +|---|---| +| `/zufallszahl-generator` | Zufallszahlen mit frei wählbarem Bereich | +| `/magic-8-ball` | Fragen und zufällige Antworten | +| `/listen-generator` | Liste mischen, Einträge ziehen, Gruppen bilden | +| `/entscheidungsrad` | Alias-/Intentseite, nur wenn eigenständig nützlich | +| `/zufallsgenerator` | zentrale Kategorie-Seite, falls die Suchintention separat belegt wird | + +**Wichtig:** Keine dünnen Doorway-Seiten erstellen. Jede Seite braucht ein eigenes Tool, eine eigene Erklärung, eigene Beispiele, eigene FAQs und eigene interne Linkbeziehungen. + +--- + +## 5. P0 – Kritische Live-Blocker + +### P0.1 Rechtliche Seiten + +Vor dem öffentlichen Launch ergänzen: + +- `/impressum` +- `/datenschutz` +- optional `/nutzungsbedingungen` +- Kontaktmöglichkeit + +Im Footer müssen diese Seiten dauerhaft verlinkt sein. Das ist insbesondere für eine deutsche Website und für AdSense wichtig. + +### P0.2 Domain- und URL-Konfiguration + +Nach Festlegung der echten Domain: + +- HTTPS erzwingen +- eine kanonische Variante festlegen: `https://entscheidomat.com` +- `www` entweder sauber weiterleiten oder als kanonische Variante festlegen +- HTTP auf HTTPS weiterleiten +- lokale/Preview-Domain niemals als Canonical ausliefern +- `metadataBase` auf `https://entscheidomat.com` setzen + +### P0.3 Canonical und Social Metadata + +In `app/layout.tsx` ergänzen: + +- `metadataBase` +- self-referencing canonical +- Open Graph title/description/url/image +- Twitter card +- locale `de_DE` +- Site name +- passende Social-Share-Grafik 1200×630 + +### P0.4 Robots und Sitemap + +Anlegen: + +- `app/robots.ts` +- `app/sitemap.ts` + +Die Sitemap darf nur 200er, kanonische und indexierbare URLs enthalten. Keine Test-, Query- oder internen URLs. + +Robots darf Suchcrawler nicht blockieren. Wenn AI-Zitate gewünscht sind, keine Sperren gegen GPTBot, ChatGPT-User, PerplexityBot, ClaudeBot, Google-Extended oder Bingbot einbauen, sofern keine bewusste andere Geschäftsentscheidung getroffen wird. + +### P0.5 Lint-Fehler beseitigen + +Vor Launch beheben: + +- `preloader.tsx`: Reduced-Motion-Initialisierung ohne problematisches synchrones State-Setzen im Effect +- `sound-provider.tsx`: Local-Storage-Hydration sauber behandeln +- `dice-roller.tsx`: Transformationszustand aus einem renderbaren State ableiten, nicht `ref.current` direkt rendern +- `use-local-storage.ts`: Hydration-Strategie prüfen +- `use-prefers-reduced-motion.ts`: Media-Query-Initialisierung sauber lösen + +Akzeptanzkriterium: + +```text +npm run build -> exit 0 +npm run lint -> exit 0 +``` + +### P0.6 Browser- und Accessibility-QA + +Prüfen: + +- Chrome Desktop +- Chrome Android / iPhone-Breite +- Tastaturbedienung +- Screenreader-Landmarks +- sichtbare Focus-Zustände +- `role=tab` mit passendem `tabpanel` +- `aria-controls` und `id` für Tabs +- keine Inhalte, die nur nach Animation sichtbar werden +- reduzierte Bewegung +- Sound standardmäßig nicht ungefragt abspielen + +--- + +## 6. P1 – Onpage-SEO und Informationsarchitektur + +### 6.1 Direct-Answer-Block auf der Startseite + +Direkt unter dem Hero, als sichtbarer HTML-Text: + +> **Was ist Entscheidomat?** +> Entscheidomat ist ein kostenloser Zufallsgenerator und eine digitale Entscheidungshilfe. Du kannst online eine Münze werfen, ein Glücksrad drehen, würfeln, eine Zufallszahl erzeugen, den Magic 8-Ball fragen oder eine eigene Liste auslosen – ohne Anmeldung und direkt im Browser. + +Der Absatz ist für Menschen, klassische Snippets und AI-Extraktion geschrieben. Kein Keyword-Stuffing. + +### 6.2 Tool-Abschnitte auf der Startseite + +Unter dem interaktiven Bereich je ein kurzer, echter Informationsabschnitt: + +- Was macht das Tool? +- Wann ist es hilfreich? +- Welche Optionen kann man anpassen? +- Link zur vertiefenden Tool-Seite + +### 6.3 Inhalte auf jeder Tool-Seite + +Jede Tool-Seite braucht mindestens: + +1. H1 mit natürlicher Suchintention +2. 40–60-Wörter-Direktantwort +3. das funktionierende Tool möglichst früh +4. kurze Bedienungsanleitung +5. konkrete Beispiele +6. Vorteile und Grenzen +7. verwandte Tools +8. 5–8 echte FAQs +9. Aktualisierungsdatum +10. interne Links zur Startseite und zu verwandten Seiten + +### 6.4 Beispiel für `/ja-nein-generator` + +H1: + +> Ja-Nein-Generator – schnelle Entscheidungen online treffen + +Direktantwort: + +> Der Ja-Nein-Generator beantwortet eine Frage zufällig mit Ja oder Nein. Formuliere deine Frage, starte den Generator und erhalte sofort eine zufällige Entscheidung – kostenlos, ohne Anmeldung und direkt im Browser. + +FAQs: + +- Wie funktioniert ein Ja-Nein-Generator? +- Ist das Ergebnis wirklich zufällig? +- Kann ich den Generator mehrfach verwenden? +- Eignet sich der Generator für Gruppenentscheidungen? +- Ersetzt ein Zufallsergebnis eine wichtige persönliche Entscheidung? + +### 6.5 Title-/H1-Mapping + +Jede URL bekommt einen eigenen Title, eine eigene H1 und eine eigene Description. Keine Serienseiten mit nur ausgetauschtem Keyword. + +--- + +## 7. P1 – Structured Data + +### Startseite + +- `WebSite` +- `Organization` oder `SoftwareApplication` +- `WebApplication` mit Name, URL, Beschreibung, Browser-Anforderung und kostenloser Nutzung + +### Tool-Seiten + +- `WebApplication` oder `SoftwareApplication` +- `BreadcrumbList` +- `FAQPage` nur für Fragen, die sichtbar auf der Seite stehen + +Schema muss exakt mit sichtbarem Inhalt übereinstimmen. Keine erfundenen Bewertungen, Preise, Nutzerzahlen oder Auszeichnungen. + +Google weist ausdrücklich darauf hin, dass Structured Data keine Garantie für Rich Results oder AI-Zitate ist. Es verbessert aber die maschinenlesbare Interpretation und die allgemeine SEO-Grundlage. + +--- + +## 8. P1 – AEO und GEO für AI-Sichtbarkeit + +### Grundprinzip + +Nicht separate „AI-Texte“ produzieren. Ein klarer, hilfreicher Inhalt soll gleichzeitig: + +- Menschen helfen +- Google ranken können +- von AI-Systemen extrahiert werden können +- als Quelle zitiert werden können + +### Content-Muster + +Für jede wichtige Seite: + +- Definition am Anfang +- direkte Antwort auf die Hauptfrage +- kurze Absätze +- eindeutige H2/H3-Fragen +- nummerierte Bedienungsanleitung +- Vergleichstabelle, wenn sinnvoll +- FAQ +- sichtbarer Stand/Aktualisierungszeitpunkt +- klare Verweise auf verwandte Tools + +### AI-Readiness-Checkliste + +- [ ] Hauptdefinition in den ersten 100 Wörtern +- [ ] jeder zentrale Absatz ohne Kontext verständlich +- [ ] keine wichtigen Informationen nur in Canvas/SVG/JavaScript +- [ ] semantisches HTML +- [ ] echte H1/H2/H3-Hierarchie +- [ ] Tool-Name und Zweck klar genannt +- [ ] FAQs sichtbar und nicht nur im Schema versteckt +- [ ] robots erlaubt gewünschte AI-Suchcrawler +- [ ] `llms.txt` optional als Zusatz, nicht als Ersatz für SEO +- [ ] keine KI-generierten Massenvarianten ohne eigenen Nutzwert + +### `/llms.txt` + +Optional anlegen, nachdem die echten Seiten existieren. Inhalt: + +- kurze Produktdefinition +- Zielgruppe +- Liste der Tools +- kanonische URLs +- Kontakt und rechtliche Seiten +- kurze Hinweise zu kostenloser Nutzung + +`llms.txt` ist ein Zusatzsignal für einige AI-Ökosysteme, aber kein offizieller Google-Ranking-Hebel und kein Ersatz für Sitemap, HTML, interne Links oder E-E-A-T. + +--- + +## 9. P1 – Corey-Haines-inspirierte Programmatic-SEO-Regeln + +Die geplanten Tool-Seiten dürfen über Templates erzeugt werden, aber nur mit Qualitätskontrollen. + +### Jede Seite muss eigene Daten enthalten + +- eigenes Keyword-Cluster +- eigene Suchintention +- eigenes Tool-Verhalten +- eigene Beispiele +- eigene FAQs +- eigener Direct-Answer-Text +- eigene interne Linkempfehlungen +- eigene Title/Description + +### Nicht skalieren, bevor eine Musterseite gut ist + +Reihenfolge: + +1. `/ja-nein-generator` vollständig bauen +2. als SEO-/UX-/Schema-/AdSense-Musterseite prüfen +3. `/gluecksrad` als zweite Musterseite bauen +4. erst danach Datenmodell und Seiten-Template auf alle Tools ausrollen + +### Quality Gate pro programmatischer Seite + +Eine Seite wird nur veröffentlicht, wenn: + +- sie ein echtes funktionierendes Tool besitzt +- mindestens 500–900 Wörter echter, nützlicher Kontext vorhanden sind, sofern die Intention das rechtfertigt +- der Text nicht künstlich verlängert ist +- mindestens 5 einzigartige FAQs vorhanden sind +- keine Copy-Paste-Blöcke von anderen Tool-Seiten bestehen +- Title, H1, URL und Suchintention zusammenpassen +- Links und Schema validiert sind +- mobile Darstellung geprüft wurde + +Die Wortzahl ist kein Selbstzweck. Nutzerwert und Vollständigkeit gehen vor künstlicher Länge. + +--- + +## 10. P2 – AdSense-Plan + +### Wichtige Realität + +AdSense wird nicht durch Keyword-Volumen allein freigeschaltet. Ein Tool-Portal braucht: + +- originellen, hilfreichen Content +- klare Navigation +- erreichbare rechtliche Seiten +- Datenschutz und Einwilligungsmanagement +- keine irreführenden Anzeigen +- keine ungültigen Klicks +- gute Nutzererfahrung +- ausreichende öffentliche Substanz + +Es gibt keinen seriösen Weg, „maximales AdSense“ zu garantieren. Das Ziel ist **maximale regelkonforme Ertragschance bei guter Nutzererfahrung**. + +### Vor AdSense-Antrag + +- [ ] Domain live und stabil +- [ ] HTTPS aktiv +- [ ] Impressum live +- [ ] Datenschutz live +- [ ] Cookie-/Consent-Lösung für EEA, UK und Schweiz eingerichtet +- [ ] Google-zertifizierte CMP bzw. Google Privacy & Messaging geprüft +- [ ] Sitemap und Search Console eingerichtet +- [ ] Seiten indexierbar +- [ ] mehrere echte Tool-Seiten live +- [ ] informative Inhalte pro Tool vorhanden +- [ ] Kontaktmöglichkeit vorhanden +- [ ] keine Platzhaltertexte +- [ ] keine leeren Kategorien +- [ ] keine übermäßigen Popups oder Interstitials + +### Ad-Platzierung + +Nicht direkt neben einem Button, der ein Ergebnis erzeugt. Keine Platzierung, die versehentliche Klicks provoziert. + +Empfohlene Reihenfolge: + +1. oberhalb/unterhalb des redaktionellen Direct-Answer-Blocks, nur wenn genug Inhalt vorhanden ist +2. zwischen Inhalt und FAQ, nicht innerhalb der eigentlichen Tool-Steuerung +3. ein responsives Ad im unteren Content-Bereich +4. optional ein dezentes Banner auf langen Erklärseiten + +Nicht empfehlen: + +- Ads als erste sichtbare Fläche vor dem Tool +- Ads zwischen Ja-/Nein-Buttons +- Ads neben Würfel-/Rad-Steuerungen +- Anzeigen in die interaktive Oberfläche hinein +- mehrere Ads auf einer kurzen, inhaltsarmen Seite +- „Klicke hier“-Formulierungen + +Google AdSense empfiehlt, Anzeigen als Anzeigen erkennbar zu halten, den eigenen Content hervorzuheben, responsive Formate zu verwenden und Bereiche mit wenig einzigartigem Content nicht mit Werbung zu überladen. + +### Ertragsoptimierung nach ausreichendem Traffic + +Erst nach stabilen Daten testen: + +- Ad-Viewability +- Page RPM +- Session RPM +- Engagement Rate +- Tool-Nutzung vor und nach Ad-Placement +- Core Web Vitals +- mobile vs. desktop +- Consent Rate + +Nicht nur CPC optimieren. Ein höherer CPC mit schlechter UX kann Umsatz und SEO verschlechtern. + +--- + +## 11. P2 – Analytics und Messung + +### Technische Einrichtung + +- Google Search Console +- GA4 oder datenschutzkonforme Alternative +- Consent Mode korrekt konfigurieren +- `sitemap.xml` einreichen +- Bing Webmaster Tools +- Ereignisse für Tool-Nutzung + +### Events + +Empfohlene Events: + +- `tool_open` +- `tool_result` +- `tool_customized` +- `tool_share` +- `faq_expand` +- `outbound_click` + +Keine personenbezogenen Daten in Event-Parametern speichern. + +### SEO-Monitoring + +Monatlich prüfen: + +- Klicks und Impressionen je URL +- CTR je Keyword +- Indexierungsstatus +- Core Web Vitals +- Suchanfragen mit Impressionen, aber niedriger CTR +- neue Suchintentionen +- Seiten ohne Impressionen +- interne Links und Crawlbarkeit + +### AI-Monitoring + +Monatlich 10–20 Queries testen: + +- „kostenloser Zufallsgenerator online" +- „bester Ja Nein Generator" +- „Glücksrad online drehen" +- „Würfel online" +- „Namen zufällig auslosen" +- „Münze werfen online" +- „Entscheidungshilfe ohne Anmeldung" + +In Google AI Overviews, ChatGPT, Perplexity und Bing/Copilot dokumentieren: + +- wird Entscheidomat genannt? +- wird eine URL zitiert? +- welche Wettbewerber werden zitiert? +- welche Formulierung verwendet die AI? +- welche Seite muss inhaltlich verbessert werden? + +--- + +## 12. Konkrete Umsetzungsreihenfolge + +### Phase A – Launch-Fundament + +- [ ] Domain `entscheidomat.com` verbinden +- [ ] HTTPS und Redirect-Strategie prüfen +- [ ] `metadataBase` und Canonical setzen +- [ ] OG-/Twitter-Card erstellen +- [ ] Social Image erzeugen +- [ ] Impressum erstellen +- [ ] Datenschutz erstellen +- [ ] Footer erweitern +- [ ] `app/robots.ts` erstellen +- [ ] `app/sitemap.ts` erstellen +- [ ] gewünschte AI-Crawler nicht blockieren +- [ ] Lint-Fehler beheben +- [ ] mobile QA durchführen + +### Phase B – Startseite SEO-/AI-fähig machen + +- [ ] Title auf Kategorie + Nutzen ausrichten +- [ ] H1 um „kostenloser Zufallsgenerator“ ergänzen +- [ ] Direct-Answer-Block hinzufügen +- [ ] sechs Tool-Erklärungen hinzufügen +- [ ] 8–10 FAQs hinzufügen +- [ ] WebApplication-/Organization-Schema ergänzen +- [ ] Breadcrumb-Schema für Unterseiten vorbereiten + +### Phase C – erste fünf Suchseiten + +- [ ] `/ja-nein-generator` +- [ ] `/gluecksrad` +- [ ] `/wuerfel-online` +- [ ] `/namen-auslosen` +- [ ] `/muenze-werfen` + +Für jede Seite: + +- [ ] eigenes Tool +- [ ] eigener Title/H1/Description +- [ ] Direct Answer +- [ ] Bedienungsanleitung +- [ ] Beispiele +- [ ] FAQ +- [ ] interne Links +- [ ] Schema +- [ ] Mobile-/Accessibility-QA + +### Phase D – Search Console und AdSense + +- [ ] Search Console bestätigen +- [ ] Sitemap einreichen +- [ ] Indexierung prüfen +- [ ] Analytics und Consent prüfen +- [ ] mindestens mehrere wertvolle Seiten stabil live haben +- [ ] AdSense-Policies prüfen +- [ ] AdSense beantragen +- [ ] Ads erst nach Freischaltung und in klar getrennten Content-Bereichen einbauen +- [ ] Viewability und UX messen + +### Phase E – Autorität und GEO + +- [ ] About-/Produktseite +- [ ] glaubwürdige Projekt-/Betreiberinformationen +- [ ] echte Erwähnungen und Reviews aufbauen +- [ ] Tool-Vergleiche und How-to-Inhalte +- [ ] keine künstlichen Backlinks +- [ ] keine massenhaft generierten Thin Pages +- [ ] monatliches AI-Citation-Tracking + +--- + +## 13. Definition of Done – perfekte Live-Version + +### Technik + +- [ ] `npm run build` exit 0 +- [ ] `npm run lint` exit 0 +- [ ] HTTPS und Canonical korrekt +- [ ] keine Console Errors +- [ ] mobile Layouts geprüft +- [ ] Tastatur und Screenreader geprüft +- [ ] Core Web Vitals gemessen + +### Crawlability + +- [ ] `/robots.txt` 200 +- [ ] `/sitemap.xml` 200 +- [ ] nur kanonische URLs in Sitemap +- [ ] keine wichtigen Inhalte hinter blockierendem Client-JS +- [ ] keine versehentlichen `noindex`-Signale + +### SEO + +- [ ] jede indexierbare Seite hat eigenen Title +- [ ] jede Seite hat eigene Description +- [ ] genau ein sinnvoller H1 +- [ ] Keywords werden natürlich eingesetzt +- [ ] interne Links sind beschreibend +- [ ] keine dünnen Doorway-Seiten + +### AEO/GEO + +- [ ] Definition am Seitenanfang +- [ ] direkte Antworten auf Nutzerfragen +- [ ] sichtbare FAQ +- [ ] semantische Überschriften +- [ ] Schema entspricht sichtbarem Content +- [ ] AI-Crawler-Entscheidung dokumentiert +- [ ] AI-Visibility-Baseline erstellt + +### AdSense + +- [ ] Impressum und Datenschutz +- [ ] Consent Management für EEA/UK/Schweiz +- [ ] keine Ads in Tool-Controls +- [ ] Ads klar erkennbar +- [ ] keine Klickanreize +- [ ] keine ungültigen Klicks +- [ ] ausreichender einzigartiger Content +- [ ] Ads nur dort, wo sie UX nicht zerstören + +--- + +## 14. Quellen + +### Google Search Central + +- [AI features and your website](https://developers.google.com/search/docs/appearance/ai-features) +- [Optimizing for generative AI features](https://developers.google.com/search/docs/fundamentals/ai-optimization-guide) +- [SEO Starter Guide](https://developers.google.com/search/docs/fundamentals/seo-starter-guide) +- [Structured Data introduction](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data) +- [Canonical URLs](https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls) +- [Sitemaps](https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview) + +### Google AdSense + +- [Best practices for ad placement](https://support.google.com/adsense/answer/1282097) +- [Viewability best practices](https://support.google.com/adsense/answer/6219980) +- [EU user consent policy / CMP](https://support.google.com/adsense/answer/7670013) +- [Consent optimization](https://support.google.com/adsense/answer/16878447) + +### Keyword-Daten + +- `Keyword Stats 2026-07-22 at 23_15_06.csv` – entscheidomat-spezifischer Export +- `Keyword Stats 2026-07-22 at 23_08_06.csv` – gemischter Portfolio-Export; nicht vollständig Entscheidomat zurechnen + +--- + +## Schlussentscheidung + +**Nicht als finale SEO-/AdSense-Version live nehmen.** + +**Als funktionierender Produktprototyp:** ja. +**Als sauberer öffentlicher Launch:** nach Phase A. +**Als SEO-/AI-/AdSense-optimierte Version:** nach Phase B bis D. +**Als skalierbares Portfolio:** erst nach einer vollständig geprüften Musterseite und einem stabilen Quality Gate für programmatische Seiten. diff --git a/ZUKUNFTSPLAN.md b/ZUKUNFTSPLAN.md new file mode 100644 index 0000000..9c8613c --- /dev/null +++ b/ZUKUNFTSPLAN.md @@ -0,0 +1,121 @@ +# 🚀 Zukunftsplan: SEO & EMD-Portfolio (Web-Tools) + +Dieses Dokument dient als strategischer Zukunftsplan und Fahrplan für das Web-Tool-Portfolio auf Basis der Google Keyword Planner Analysen. + +--- + +## 🎯 Strategische Grundausrichtung: Multi-Domain-Ansatz + +Anstatt alle unterschiedlichen Tools auf einer gemischten Website zu bündeln, setzen wir auf **fokussierte Exact-Match-Domains (EMDs)**. + +### Vorteile dieses Ansatzes: +- **100 % SEO-Relevanz:** Jede Domain bedient exakt ein Themenfeld. Google belohnt diese thematische Reinheit mit besseren organischen Rankings. +- **Hohe Click-Through-Rate (CTR):** Nutzer in den Suchergebnissen vertrauen prägnanten Domainnamen wie `entscheidomat.com` oder `prozentomat.de`. +- **Einfache Skalierbarkeit:** Neue Nischen können als eigenständige Marken gelaucht werden. + +--- + +## 🏆 Die Hauptprojekte & Roadmap + +```mermaid +graph TD + A[Web-Tool Portfolio] --> B[Projekt 1: entscheidomat.com] + A --> C[Projekt 2: prozentomat.de] + A --> D[Projekt 3: schriftomat.de] + A --> E[Projekt 4: nameomat.de] + + B --> B1[Glücksrad / 50k] + B --> B2[Ja/Nein Generator / 50k] + B --> B3[Würfel Online / 50k] + B --> B4[Namen-Auslosung / 50k] + B --> B5[Münzwurf / 5k] + + C --> C1[Prozentrechner / 500k] + C --> C2[Prozentuale Zu/Abnahme] + C --> C3[MwSt.-Rechner] + C --> C4[Dreisatz-Rechner] +``` + +--- + +## 1. 🎲 Projekt 1: `entscheidomat.com` (Sofort-Launch) + +* **Fokus:** Zufallsgeneratoren, Entscheidungs-Tools & Unterhaltung. +* **Suchvolumen-Pool:** **> 250.000 Suchen / Monat** (bei geringem Wettbewerb). +* **Entwicklungsstatus:** Tools sind bereits vollständig programmiert. + +### SEO-Titel & URL-Struktur: +- **Startseite (`/`):** *Entscheidomat – Der Online Entscheidungsfinder & Zufallsgenerator* +- **`/gluecksrad`:** *Online Glücksrad & Entscheidungsrad drehen* + - **Keywords:** `gluecksrad online` (50.000 Suchen) | `entscheidungsrad` (5.000 Suchen, **3,21 € Max CPC**) +- **`/ja-nein-generator`:** *Ja Nein Generator – Schnelle Antworten finden* + - **Keywords:** `ja nein generator` (50.000 Suchen, 1,08 € CPC) | `ja oder nein generator` (50.000 Suchen) +- **`/wuerfel-online`:** *Virtueller Würfel Online – 6er & 10er Würfel rollen* + - **Keywords:** `wuerfel online` (50.000 Suchen, 1,37 € CPC) +- **`/namen-auslosen`:** *Namen Zufallsgenerator – Gewinner & Teams ziehen* + - **Keywords:** `zufallsgenerator namen` (50.000 Suchen) +- **`/muenze-werfen`:** *Münze werfen online – Kopf oder Zahl* + - **Keywords:** `münze werfen online` (5.000 Suchen) + +--- + +## 2. 🧮 Projekt 2: `prozentomat.de` (Traffic- & Ertrags-Gigant) + +* **Fokus:** Prozentrechnung, Rabatt-, Finanz- & Schul-Rechner. +* **Suchvolumen-Pool:** **> 500.000 Suchen / Monat** +* **Monetarisierung:** **1,75 € Max CPC** (Finanz-Segment mit sehr hohem Werbewert). + +### Geplante Tools auf `prozentomat.de`: +1. **Klassischer Prozentrechner:** „Wie viel sind X % von Y?“ / „Wie viel % sind X von Y?“ +2. **Prozentuale Zu- & Abnahme (Rabattrechner):** „Betrag um X % erhöhen / verringern“. +3. **Mehrwertsteuer-Rechner:** 19 % & 7 % MwSt. hinzurechnen oder herausrechnen. +4. **Dreisatz-Prozentrechner:** Berechnung von Grundwert, Prozentwert und Prozentsatz. +5. **Prozentuale Veränderung:** prozentuale Differenz zwischen zwei Werten. + +--- + +## 3. 📦 Pipeline-Projekte (Zukunft) + +### ✍️ Projekt 3: `schriftomat.de` / `fontomat.de` +- **Fokus:** Unicode-Textgenerator & Instagram-Schriftarten zum Kopieren. +- **Traffic-Potenzial:** **> 340.000 Suchen / Monat** | CPC: **1,69 €** +- **Aufwand:** Sehr gering (rein clientseitiges JavaScript). + +### 💡 Projekt 4: `nameomat.de` +- **Fokus:** Namensgenerator für Marken, Firmen, Gaming & Haustiere. +- **Traffic-Potenzial:** **> 21.000 Suchen / Monat** | CPC: **1,90 €** (Höchster CPC im Generator-Segment). + +--- + +## 💰 Finanz- & Monetarisierungs-Prognose (AdSense) + +Basierend auf einer konservativen Klickrate (CTR) von 1,5 % – 2,0 % und den Klickpreisen (CPC) der Google Keyword Planner Daten: + +| Projekt | Monatliche Seitenaufrufe (geschätzt) | AdSense Umsatzerwartung / Monat | +| :--- | :---: | :---: | +| **`entscheidomat.com`** | ~120.000 Pageviews | **800 € – 2.200 €** | +| **`prozentomat.de`** | ~150.000 Pageviews | **1.800 € – 4.500 €** | +| **`schriftomat.de`** | ~100.000 Pageviews | **600 € – 1.600 €** | +| **GESAMT-PORTFOLIO** | **~370.000 Pageviews** | **3.200 € – 8.300 € / Monat** | + +--- + +## 📋 Schritt-für-Schritt Fahrplan zur Umsetzung + +### Phase 1: Launch von `entscheidomat.com` +- [ ] Domain `entscheidomat.com` registrieren. +- [ ] Bisheriges Tool-Set auf der Domain einrichten. +- [ ] Einzelseiten (`/gluecksrad`, `/ja-nein-generator`, `/wuerfel-online`, `/muenze-werfen`, `/namen-auslosen`) anlegen. +- [ ] SEO-Optimierung: Meta-Title, H1-Tags, Meta-Description, OpenGraph-Tags & Schema.org Markup (`SoftwareApplication` / `WebApplication`). +- [ ] In der Google Search Console anmelden & Sitemap einreichen. + +### Phase 2: Aufbau von `prozentomat.de` +- [ ] Domain `prozentomat.de` registrieren. +- [ ] Schnelles React/Next.js oder HTML/JS Frontend für die 5 Prozentrechner-Formulartools bauen. +- [ ] Erklärungstexte & Formeln unter die Rechner setzen (wichtig für Google SEO Content-Relevanz). +- [ ] Google Search Console Anmeldung & Indexierung anstoßen. + +### Phase 3: Monetarisierung & Ausbau +- [ ] Google AdSense Konto beantragen und Anzeigenplätze (Header, Sidebar, In-Content) optimieren. +- [ ] Affiliate-Partnerschaften einbinden (z. B. Buchhaltung / Finanzen bei Prozentomat). +- [ ] Pipeline-Projekte (`schriftomat.de`, `nameomat.de`) umsetzen. diff --git a/app/datenschutz/page.tsx b/app/datenschutz/page.tsx new file mode 100644 index 0000000..190e55c --- /dev/null +++ b/app/datenschutz/page.tsx @@ -0,0 +1,163 @@ +import type { Metadata } from "next"; +import Link from "next/link"; +import LegalLayout from "@/components/legal-layout"; + +export const metadata: Metadata = { + title: "Datenschutzerklärung", + description: "Datenschutzerklärung von Entscheidomat gemäß DSGVO.", + alternates: { canonical: "/datenschutz" }, +}; + +export default function DatenschutzPage() { + return ( + +
+

1. Verantwortlicher

+

+ Verantwortlich für die Datenverarbeitung auf dieser Website im + Sinne der Datenschutz-Grundverordnung (DSGVO) ist: +

+

+ Timo Knuth +
+ E-Mail: info@entscheidomat.com +

+

+ Die vollständige ladungsfähige Geschäftsanschrift wird vor dem + öffentlichen Launch ergänzt. +

+

+ Weitere Angaben finden Sie im{" "} + Impressum. +

+
+ +
+

2. Grundsatz der Datenverarbeitung

+

+ Entscheidomat ist bewusst datensparsam aufgebaut: Die + Zufalls-Tools (Münze, Glücksrad, Würfel, Zufallszahl, Magic + 8-Ball, Listen-Auswahl, Ja/Nein-Generator) laufen vollständig im + Browser. Eingaben wie eigene Beschriftungen, Listen oder + Fragen werden nicht an unseren Server übertragen. +

+
+ +
+

3. Hosting und Server-Logfiles

+

+ Beim Aufruf dieser Website verarbeitet der Hostinganbieter + automatisch technische Zugriffsdaten (z. B. IP-Adresse, + Datum und Uhrzeit des Zugriffs, aufgerufene Seite, verwendeter + Browser) in Server-Logfiles. Dies ist technisch notwendig, um die + Website sicher und stabil auszuliefern (Rechtsgrundlage: Art. 6 + Abs. 1 lit. f DSGVO, berechtigtes Interesse an einem + funktionsfähigen Betrieb). +

+

+ Der Webserver befindet sich in Texas, USA. Die Bezeichnung des + Hostinganbieters und die Speicherdauer der Logfiles werden vor dem + öffentlichen Launch ergänzt. +

+ +

3.1 Datenübermittlung in die USA (Drittlandtransfer)

+

+ Diese Website wird auf einem Server in Texas, USA gehostet. Dabei werden + personenbezogene Daten (insbesondere die technischen + Zugriffsdaten aus Ziffer 3) in ein Land außerhalb der + Europäischen Union und des Europäischen Wirtschaftsraums + (sogenanntes Drittland) übertragen. +

+

+ Vor dem öffentlichen Launch wird geprüft und dokumentiert, auf + welcher konkreten Grundlage die Datenübermittlung erfolgt und ob + der gewählte Hostinganbieter die erforderlichen Garantien für den + Drittlandtransfer bietet. +

+
+ +
+

4. Lokale Speicherung (localStorage)

+

+ Eigene Einstellungen – z. B. Münz-Beschriftungen, eigene + Würfel-Texte, Listen-Einträge, Magic-8-Ball-Antworten oder die + Sound-Einstellung – werden ausschließlich im{" "} + localStorage Ihres Browsers auf Ihrem Gerät + gespeichert, damit sie bei erneutem Besuch erhalten bleiben. + Diese Daten verlassen Ihr Gerät nicht und werden nicht an uns + übertragen. Sie können diese Daten jederzeit über die + Browsereinstellungen (Website-Daten löschen) entfernen. +

+
+ +
+

5. Cookies und Werbung

+

+ Entscheidomat setzt aktuell keine Cookies und keine Werbedienste + ein. Sollte künftig Werbung (z. B. Google AdSense) + hinzukommen, wird diese Datenschutzerklärung vorher aktualisiert + und eine Einwilligungslösung (Consent-Banner) für Nutzerinnen und + Nutzer aus der EU, dem UK und der Schweiz eingebaut, bevor der + Dienst aktiv geschaltet wird. +

+
+ +
+

6. Webanalyse mit Umami

+

+ Wir nutzen Umami Cloud (Umami Software, Inc.) mit Datenregion EU, + um anonyme, aggregierte Nutzungsstatistiken zu erheben (z. B. + Seitenaufrufe, Referrer, ungefähre geografische Region, verwendetes + Gerät). Rechtsgrundlage ist unser berechtigtes Interesse an der + Analyse und Verbesserung des Angebots (Art. 6 Abs. 1 lit. f DSGVO). +

+

+ Umami setzt keine Cookies und verwendet keine + persistente, geräteübergreifende Kennung zur Wiedererkennung + einzelner Personen. IP-Adressen werden nicht gespeichert; es + erfolgt lediglich eine tagesaktuelle, nicht rückverfolgbare + Kennzeichnung zur Unterscheidung wiederkehrender Besuche + (Hashing). Eine Zusammenführung mit anderen Diensten oder eine + Profilbildung findet nicht statt. Die Daten werden auf Servern in + der EU verarbeitet. +

+

+ Da keine Cookies gesetzt und keine personenbezogenen Kennungen + gespeichert werden, ist nach unserer Einschätzung keine + Einwilligung nach § 25 TDDDG erforderlich. + Weitere Informationen:{" "} + + umami.is/privacy + + . +

+
+ +
+

7. Ihre Rechte

+

Sie haben im Rahmen der geltenden Datenschutzgesetze jederzeit das Recht auf:

+
    +
  • Auskunft über Ihre bei uns gespeicherten personenbezogenen Daten (Art. 15 DSGVO)
    • +
  • Berichtigung unrichtiger Daten (Art. 16 DSGVO)
    • +
  • Löschung Ihrer bei uns gespeicherten Daten (Art. 17 DSGVO)
    • +
  • Einschränkung der Datenverarbeitung (Art. 18 DSGVO)
    • +
  • Widerspruch gegen die Verarbeitung (Art. 21 DSGVO)
    • +
  • Datenübertragbarkeit (Art. 20 DSGVO)
    • +
  • Beschwerde bei einer Datenschutz-Aufsichtsbehörde
    • +
+
+ +
+

8. Kontakt für Datenschutzanfragen

+

+ Bei Fragen zum Datenschutz wenden Sie sich bitte an:{" "} + info@entscheidomat.com. +

+
+ + ); +} diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..b8af468 --- /dev/null +++ b/app/globals.css @@ -0,0 +1,374 @@ +@import "tailwindcss"; + +@theme { + /* Typografie */ + --font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif; + --font-display: var(--font-cormorant), Georgia, serif; + + /* Farben – Warmes Porzellan-Papier mit sattem Gelb-Grün / Smaragd */ + --color-paper: #faf8f3; + --color-surface: #ffffff; + --color-ink: #111412; + --color-ink-soft: #45504a; + --color-line: #e0eae4; + + --color-primary: #111412; + --color-primary-strong: #000000; + --color-primary-soft: #e6f7f0; + + /* Glücksspiel & Zufall – Gelb-Grün / Smaragdgrün */ + --color-emerald-accent: #0d7a57; + --color-emerald-strong: #095c41; + --color-emerald-soft: #e6f7f0; + --color-emerald-line: #b2e5d1; + + --color-clay: #b4633f; + --color-clay-soft: #f6eae2; + + /* Schatten */ + --shadow-soft: 0 2px 4px rgb(17 20 18 / 0.03), 0 12px 36px rgb(17 20 18 / 0.06); + --shadow-lift: 0 4px 12px rgb(17 20 18 / 0.06), 0 24px 52px rgb(17 20 18 / 0.10); + --shadow-cta: 0 12px 28px rgb(17 20 18 / 0.22); + + /* Animationen */ + --animate-float: float 7s ease-in-out infinite; + --animate-coin-spin: coin-spin 10s linear infinite; + --animate-bob: bob 2.4s ease-in-out infinite; + + @keyframes float { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-16px); + } + } + @keyframes coin-spin { + from { + transform: rotateY(0deg); + } + to { + transform: rotateY(360deg); + } + } + @keyframes bob { + 0%, + 100% { + transform: translateY(0); + opacity: 0.7; + } + 50% { + transform: translateY(6px); + opacity: 1; + } + } + @keyframes stream { + from { + stroke-dashoffset: 1000; + } + to { + stroke-dashoffset: 0; + } + } + @keyframes shootTL { + 0% { + transform: translate(0, 0); + opacity: 0; + } + 20% { + opacity: 0.7; + } + 80% { + opacity: 0.7; + } + 100% { + transform: translate(520px, 180px); + opacity: 0; + } + } + @keyframes shootTR { + 0% { + transform: translate(0, 0); + opacity: 0; + } + 20% { + opacity: 0.7; + } + 80% { + opacity: 0.7; + } + 100% { + transform: translate(-520px, 190px); + opacity: 0; + } + } + @keyframes shootBL { + 0% { + transform: translate(0, 0); + opacity: 0; + } + 20% { + opacity: 0.65; + } + 80% { + opacity: 0.65; + } + 100% { + transform: translate(480px, -170px); + opacity: 0; + } + } +} + +/* ---------- Basis ---------- */ + +html { + scroll-behavior: smooth; +} + +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } +} + +body { + background: var(--color-paper); + color: var(--color-ink); + font-family: var(--font-sans); + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} + +/* Der Inline-Check im Root-Layout läuft vor der Hydration. Dadurch blitzt der + Preloader bei einem Reload innerhalb derselben Browser-Session nicht auf. */ +html[data-preloader="cached"] [data-preloader-overlay] { + display: none; +} + +/* Der Preloader würde auf einem gedrosselten Mobilgerät das LCP-Element + verdecken. Die Seite bleibt dort sofort lesbar; Desktop behält den Effekt. */ +@media (max-width: 767px) { + [data-preloader-overlay] { + display: none; + } +} + +/* Die Hero-Inhalte sind bereits vor dem Öffnen des Vorhangs im Startzustand. + So kann GSAP sie nicht erst sichtbar machen und anschließend zurücksetzen. */ +@media (prefers-reduced-motion: no-preference) { + html[data-preloader="active"] .hero-el { + opacity: 0; + transform: translateY(34px); + } + + .reveal { + opacity: 0; + transform: translateY(var(--reveal-y, 30px)); + transition: + opacity 0.7s ease var(--reveal-delay, 0s), + transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0s); + } + + .reveal--visible { + opacity: 1; + transform: translateY(0); + } +} + +::selection { + background: rgb(22 21 19 / 0.12); +} + +:focus-visible { + outline: 2px solid var(--color-primary); + outline-offset: 2px; + border-radius: 6px; +} + +/* Dezente Scrollbar */ +::-webkit-scrollbar { + width: 10px; +} +::-webkit-scrollbar-track { + background: var(--color-paper); +} +::-webkit-scrollbar-thumb { + background: #d5d0c2; + border-radius: 8px; + border: 2px solid var(--color-paper); +} +::-webkit-scrollbar-thumb:hover { + background: #c1bbab; +} + +/* ---------- Hintergrund-Deko ---------- */ + +.bg-grid { + background-image: + linear-gradient(to right, rgb(32 30 25 / 0.045) 1px, transparent 1px), + linear-gradient(to bottom, rgb(32 30 25 / 0.045) 1px, transparent 1px); + background-size: 46px 46px; + mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, black 25%, transparent 78%); + -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 0%, black 25%, transparent 78%); +} + +.bg-noise { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); + opacity: 0.03; +} + +/* ---------- 3D-Münze (gebürstetes Messing, flach) ---------- */ + +.coin-scene { + perspective: 1100px; +} + +.coin { + position: relative; + width: 100%; + height: 100%; + transform-style: preserve-3d; + will-change: transform; +} + +.coin-face { + position: absolute; + inset: 0; + border-radius: 9999px; + display: flex; + align-items: center; + justify-content: center; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} + +.coin-face--front { + transform: translateZ(4px); + background: #dec998; + box-shadow: + inset 0 1px 2px rgb(255 250 235 / 0.5), + inset 0 -2px 4px rgb(120 90 40 / 0.12); +} + +.coin-face--back { + background: #d6be87; + box-shadow: + inset 0 1px 2px rgb(255 248 228 / 0.5), + inset 0 -2px 4px rgb(110 82 36 / 0.12); +} + +.coin-edge { + position: absolute; + inset: 0; + border-radius: 9999px; + background: #8a6f44; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} + +.coin-engraving { + position: absolute; + inset: 8%; + border-radius: 9999px; + border: 2px solid rgb(122 94 51 / 0.38); + pointer-events: none; +} + +.coin-engraving--inner { + inset: 16%; + border-width: 1px; + border-color: rgb(122 94 51 / 0.26); +} + +.coin-label { + font-family: var(--font-display); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.16em; + color: #6e5533; + text-shadow: 0 1px 0 rgb(255 246 224 / 0.8); + max-width: 78%; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* ---------- 3D-Würfel ---------- */ + +.dice-scene { + perspective: 900px; +} + +.dice { + position: relative; + width: 100%; + height: 100%; + transform-style: preserve-3d; + will-change: transform; +} + +.dice-face { + position: absolute; + inset: 0; + display: flex; + align-items: center; + justify-content: center; + background: #fdfcf9; + border: 1px solid var(--color-line); + border-radius: 18%; + box-shadow: inset 0 0 14px rgb(32 30 25 / 0.06); + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + overflow: hidden; + padding: 8%; +} + +.dice-face-label { + font-family: var(--font-display); + font-weight: 600; + font-size: clamp(9px, 1.6vw, 13px); + line-height: 1.2; + text-align: center; + color: var(--color-ink); + overflow-wrap: anywhere; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* ---------- Magic 8-Ball (warmes Anthrazit, flach) ---------- */ + +.ball-body { + background: #1d1b17; + box-shadow: + inset 0 -18px 42px rgb(0 0 0 / 0.6), + inset 0 10px 26px rgb(255 255 255 / 0.07), + 0 30px 60px rgb(32 30 25 / 0.28); +} + +.ball-window { + background: #12130f; + box-shadow: + inset 0 4px 18px rgb(0 0 0 / 0.75), + 0 0 0 6px rgb(255 255 255 / 0.05); +} + +/* ---------- Diverse ---------- */ + +.tabular { + font-variant-numeric: tabular-nums; +} + +input[type="number"]::-webkit-outer-spin-button, +input[type="number"]::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +input[type="number"] { + -moz-appearance: textfield; + appearance: textfield; +} diff --git a/app/gluecksrad/page.tsx b/app/gluecksrad/page.tsx new file mode 100644 index 0000000..f5c4d14 --- /dev/null +++ b/app/gluecksrad/page.tsx @@ -0,0 +1,163 @@ +import type { Metadata } from "next"; +import WheelOfFortune from "@/components/tools/wheel-of-fortune"; +import SubpageLayout from "@/components/subpage-layout"; + +const SITE_URL = "https://entscheidomat.com"; +const PAGE_URL = `${SITE_URL}/gluecksrad`; +const PAGE_TITLE = "Glücksrad online drehen – kostenloses Entscheidungsrad"; +const PAGE_DESCRIPTION = + "Glücksrad online mit bis zu 12 Optionen: eintragen, drehen und zufällig entscheiden lassen. Kostenlos, ohne Anmeldung und direkt im Browser."; +const UPDATED = "23. Juli 2026"; + +export const metadata: Metadata = { + title: PAGE_TITLE, + description: PAGE_DESCRIPTION, + alternates: { canonical: "/gluecksrad" }, + openGraph: { type: "website", locale: "de_DE", siteName: "Entscheidomat", title: PAGE_TITLE, description: PAGE_DESCRIPTION, url: PAGE_URL, images: ["/opengraph-image"] }, + twitter: { card: "summary_large_image", title: PAGE_TITLE, description: PAGE_DESCRIPTION, images: ["/twitter-image"] }, +}; + +const FAQS = [ + { + q: "Wie viele Optionen kann ich im Glücksrad eintragen?", + a: "Zwischen 2 und 12 Optionen. Du kannst sie jederzeit ändern, hinzufügen oder entfernen – deine Liste bleibt automatisch im Browser gespeichert.", + }, + { + q: "Wie wird die Option ausgewählt?", + a: "Beim Drehen erzeugt das Tool im Browser einen neuen Zufallswert und ordnet das Ergebnis einer sichtbaren Option zu. Das Glücksrad ist für spielerische Alltagsentscheidungen gedacht, nicht für verbindliche oder sicherheitskritische Zwecke.", + }, + { + q: "Werden meine Optionen gespeichert oder übertragen?", + a: "Deine Optionen werden ausschließlich lokal im localStorage deines Browsers gespeichert und nicht an einen Server übertragen.", + }, + { + q: "Kann ich das Rad auf die Standardoptionen zurücksetzen?", + a: "Ja, über den Button „Zurücksetzen“ im Optionen-Editor werden die Standardoptionen 1–6 wiederhergestellt.", + }, + { + q: "Eignet sich das Glücksrad für Gruppen und Präsentationen?", + a: "Ja, es ist groß und deutlich lesbar. Für wichtige Entscheidungen sollte es aber nicht der einzige Entscheidungsweg sein.", + }, + { + q: "Wie nutze ich das Glücksrad für eine faire Auswahl?", + a: "Trage jede Option genau einmal ein. Das Rad teilt alle Einträge in gleich große Segmente; doppelte Einträge erhöhen deshalb die Chance dieser Option. Prüfe die Liste vor dem Drehen, wenn alle dieselbe Gewinnchance haben sollen.", + }, + { + q: "Was ist der Unterschied zwischen Glücksrad und Namen auslosen?", + a: "Das Glücksrad zeigt die Optionen visuell und eignet sich besonders für kleine Gruppen oder Präsentationen mit bis zu 12 Einträgen. Bei langen Listen oder mehreren Ziehungen ohne Wiederholung ist die Namen-Auslosung übersichtlicher.", + }, +]; + +const jsonLd = { + "@context": "https://schema.org", + "@graph": [ + { + "@type": "BreadcrumbList", + itemListElement: [ + { "@type": "ListItem", position: 1, name: "Entscheidomat", item: SITE_URL }, + { "@type": "ListItem", position: 2, name: "Glücksrad", item: PAGE_URL }, + ], + }, + { + "@type": "WebApplication", + name: "Glücksrad", + url: PAGE_URL, + description: PAGE_DESCRIPTION, + applicationCategory: "UtilitiesApplication", + operatingSystem: "Any (Web-Browser)", + isPartOf: { "@id": `${SITE_URL}/#website` }, + offers: { "@type": "Offer", price: "0", priceCurrency: "EUR" }, + }, + { + "@type": "FAQPage", + mainEntity: FAQS.map((f) => ({ + "@type": "Question", + name: f.q, + acceptedAnswer: { "@type": "Answer", text: f.a }, + })), + }, + ], +}; + +const STEPS = [ + "Trage 2 bis 12 Optionen im Editor ein – z. B. Namen, Aktivitäten oder Restaurants.", + "Passe die Beschriftungen jederzeit an.", + "Tippe auf „Drehen!“ – das Rad dreht sich und bremst zufällig ab.", + "Der Zeiger markiert die gewonnene Option, inklusive Konfetti.", +]; + +const EXAMPLES = [ + "„Welches Restaurant heute Abend?“", + "„Wer räumt diese Woche auf?“", + "„Welcher Film wird geschaut?“", +]; + +const VORTEILE = ( +

+ Das Glücksrad eignet sich besonders für Gruppenentscheidungen mit mehreren + gleichwertigen Optionen, die visuell gut dargestellt werden können. Pro Option + sind bis zu 24 Zeichen und maximal 12 Optionen möglich – für sehr viele + Alternativen eignet sich eher die Listen-Auswahl. +

+); + +const ADDITIONAL_CONTENT = ( +
+

+ Glücksrad online: Entscheidungen sichtbar und fair auslosen +

+

+ Ein Online-Glücksrad ist eine Entscheidungshilfe für mehrere gleichwertige + Optionen. Du trägst zwischen zwei und zwölf Begriffe ein, das Tool verteilt sie + auf gleich große Segmente und der Zeiger bestimmt beim Drehen ein Ergebnis. + Dadurch hat jede einmal eingetragene Option dieselbe Chance. Typische Beispiele + sind Restaurants, Filme, Spiele, Aufgaben, Themen für einen Vortrag oder die + Reihenfolge in einer Gruppe. +

+

+ Damit die Auswahl fair bleibt, sollte jede Möglichkeit genau einmal in der Liste + stehen. Ein doppelter Eintrag nimmt zwei Segmente ein und wird entsprechend + wahrscheinlicher ausgewählt. Das ist nützlich, wenn du bewusst gewichten willst, + aber ungeeignet für eine faire Verlosung. Prüfe deshalb die Beschriftungen vor + dem Start und erkläre der Gruppe kurz, dass alle Segmente gleich groß sind. Die + gespeicherten Optionen bleiben nur lokal in deinem Browser und werden nicht an + einen Server übertragen. +

+

+ Für kleine Gruppen ist das drehende Rad oft besser als eine Liste, weil alle + Optionen gleichzeitig sichtbar sind und das Ergebnis einen gemeinsamen Moment + schafft. Bei vielen Namen oder wenn nach jeder Ziehung ein Eintrag verschwinden + soll, ist die Namen-Auslosung die bessere Wahl. Und wenn es nur um zwei + Möglichkeiten geht, sind Ja-Nein-Generator oder Münzwurf schneller. Für wichtige + Entscheidungen bleibt Zufall ein Impuls – Verantwortung und Folgen sollten alle + Beteiligten vorher besprechen. +

+
+); + +export default function GluecksradPage() { + return ( + <> + +