Entwicklungsplan

HTML, CSS, JS, Media-Ordner

object-fit: cover — funktioniert auf allen Auflösungen

Pulsierender Gold-Effekt, Hover-Label, korrekte Positionierung bei allen Bildschirmgrößen

Glasmorphism, Icon, Titel, Beschreibung, Links. Schließbar via ×, ESC, Außenklick

logo_hebold_de_f.png, mix-blend-mode: multiply, thront oben über der Homepage

Changelog, Handbuch, What's New, Entwicklungsplan

Alle 9 Punkte exakt auf die Objekte setzen, ggf. bei neuem Startbild wiederholen

Platzhaltertexte und # ersetzen durch echte Beschreibungen und URLs

Browser-Tab-Icon auf Basis des Logos erstellen

@media (max-width: 768px): Panel als Bottom Sheet, kompakter Header, Hamburger-Menü mit Pull-Down-Navigation, größere Hotspot-Ringe, Labels immer sichtbar. Touch-Support via touchstart.

Kurzes Intro wenn das Startbild lädt — kein weißer Flash

Gesetzlich vorgeschriebene Seiten angelegt — Adresse noch eintragen

DSGVO-konformer Hinweis auf technisch notwendige Cookies

SVG-Favicon (goldenes h), robots.txt sperrt api/, data/, config/

impressum.html und datenschutz.html mit echter Adresse vervollständigen

Fonts lokal einbinden statt via Google CDN — verbessert Datenschutz und Ladezeit

blog.html (öffentlich) und admin.html (geschützt) als erste Unterseiten. Bücher-Hotspot zeigt Blog-Vorschau direkt im Panel.

Spotlight-Effekt: Hover über Hotspot verdunkelt das Bild, nur der Bereich um das Objekt bleibt beleuchtet. Radius pro Objekt individuell konfigurierbar.

Im „Kontakt"-Panel direkt ausfüllbar, auch über Nav-Menü erreichbar. PHP-Mailversand mit Honeypot-Spamschutz.

admin.html mit TinyMCE 7 WYSIWYG-Editor (jsDelivr CDN, kein API-Key), Day/Night-Toggle, Cover-Bild-Upload. PHP-Backend (api/posts.php) speichert als JSON. Auth-geschützt.

api/upload.php — MIME-Validierung (finfo), max. 8 MB, speichert in media/uploads/. TinyMCE-Integration: Bilder direkt in den Editor laden.

blog.html — Papier-Textur, Masthead "Der frühe Vogel kriegt den Mittelsitz", 4-Spalten-Grid, Rubrikenbalken, "In dieser Ausgabe"-Strip, Cover-Bilder, Drop Caps, Artikel-Reader-Overlay. Fonts: Playfair Display + Lora.

blog_test.html — BlogZeitung.png als Vollbild-Hintergrund (wie Schreibtisch), transparente Artikel-Zonen über den Zeitungsbereichen, Spotlight-Hover, Artikel-Reader-Overlay.

Leuchtender Kern mit Glow-Effekt und dot-glow-Animation, zwei konzentrische Ringe expandieren via box-shadow (Radar-Effekt). Größe von 20px auf 28px.

☀/🌙-Button im Header schaltet helles Design um. CSS custom properties auf body.light-mode überschreiben alle Farben (Header, Panel, Modals, Tour, Spotlight). Auswahl wird in localStorage gespeichert.

Startbild wechselt automatisch je nach Jahreszeit (4 Varianten). Nach Login: manueller Season-Picker mit Dropdown, Auswahl in localStorage. js/season.js verwaltet Bildwechsel mit sanftem Crossfade.

Optionales leises Hintergrundgeräusch (Schreibtischambiente, Regen, etc.)

Versteckte Interaktionen auf dem Schreibtisch für aufmerksame Besucher

Panel-Inhalte über ein einfaches Backend pflegen statt direkt im JS

Interaktive 3D-Szene statt statischem Foto — mit Three.js o.ä.

Eigene Fotografie-Sektion — empfohlen als Subdomain fotos.hebold.de: gleiche Domain-Autorität, eigene Identität, eigenes Design. Vom Schreibtisch-Hotspot direkt verlinkbar.