[{"data":1,"prerenderedAt":526},["ShallowReactive",2],{"refs-all":3},[4,100,193,298,374,466],{"id":5,"title":6,"body":7,"branche":82,"description":75,"displayName":83,"extension":84,"liveUrl":85,"meta":86,"name":87,"navigation":88,"path":89,"rank":90,"relatedService":91,"screenshot":92,"seo":93,"slug":94,"stack":95,"stem":96,"summary":97,"year":98,"__hash__":99},"referenzen\u002Freferenzen\u002Fpowerofrock.md","Powerofrock",{"type":8,"value":9,"toc":74},"minimark",[10,15,27,31,59,63],[11,12,14],"h2",{"id":13},"briefing","Briefing",[16,17,18,22,23,26],"p",{},[19,20,21],"strong",{},"Power of Rock e.V."," macht Rockmusik in Bad Fredeburg. Die Site soll Events, Bands, Anfahrt und Tickets bündeln und dazu einen ",[19,24,25],{},"Vereins-Shop"," mit Versand betreiben. Die Vorgänger-Lösung war WordPress mit Event-Plugin, Shop-Plugin, Karten-Plugin. Jedes Update brachte zwei neue Konflikte. Anfahrtskarten waren statische Screenshots, der Shop ein PayPal-Link in der Bio.",[11,28,30],{"id":29},"lösung","Lösung",[16,32,33,34,38,39,42,43,46,47,50,51,54,55,58],{},"Eine ",[35,36,37],"em",{},"Nuxt 3"," SSR-Site mit ",[19,40,41],{},"Directus"," als Headless-CMS. Veranstaltungen werden in Directus gepflegt, inklusive Geo-Koordinaten als PostGIS-Point. Auf der Site läuft eine ",[35,44,45],{},"Mapbox GL","-Karte mit den exakten Locations. Der Shop ist voll integriert: Produkte und Kategorien aus Directus, Warenkorb im LocalStorage (DSGVO-konform, kein Tracking), Checkout über ",[19,48,49],{},"Stripe Checkout",", Order-Status per Stripe-Webhook zurück nach Directus. Bestellnummern, Lagerbestand, Backorder-Logik laufen serverseitig. ",[35,52,53],{},"Sentry"," fängt Fehler ab, ",[35,56,57],{},"AOS"," macht die Scroll-Animationen.",[11,60,62],{"id":61},"outcome","Outcome",[16,64,65,66,69,70,73],{},"Veranstaltungen sind in Directus in ",[19,67,68],{},"2 Minuten"," angelegt, Karte und Countdown füllen sich automatisch. Der Shop verkauft Vereins-Merch ohne externen Anbieter, Zahlungen landen direkt auf dem Vereinskonto. Mobile lädt unter LTE schnell genug, dass Fans am Festival-Eingang noch das Bandprogramm checken. Die Redaktion arbeitet in ",[35,71,72],{},"einem"," Backend statt in drei Plugin-Oberflächen.",{"title":75,"searchDepth":76,"depth":77,"links":78},"",2,3,[79,80,81],{"id":13,"depth":76,"text":14},{"id":29,"depth":76,"text":30},{"id":61,"depth":76,"text":62},"Event","POWEROFROCK","md","https:\u002F\u002Fpowerofrock.de",{},"powerofrock.de",true,"\u002Freferenzen\u002Fpowerofrock",1,"web-app","\u002Freferenzen\u002Fpowerofrock.webp",{"description":75},"powerofrock","Nuxt","referenzen\u002Fpowerofrock","Event-Plattform mit Programm und Ticket-Funnel.",2024,"LI_2R4vm06MT-wt0Z009Ke7S5rz3OflG3tZpxOMl2vE",{"id":101,"title":102,"body":103,"branche":181,"description":75,"displayName":182,"extension":84,"liveUrl":183,"meta":184,"name":185,"navigation":88,"path":186,"rank":76,"relatedService":91,"screenshot":187,"seo":188,"slug":189,"stack":95,"stem":190,"summary":191,"year":98,"__hash__":192},"referenzen\u002Freferenzen\u002Fmb-caravan.md","Mb Caravan",{"type":8,"value":104,"toc":176},[105,107,117,119,163,165],[11,106,14],{"id":13},[16,108,109,112,113,116],{},[19,110,111],{},"MB-Caravan"," vermietet Wohnwagen im ",[19,114,115],{},"Sauerland",". Buchungen kamen vorher per Telefon und E-Mail, parallel lief ein Google-Kalender, der das Team manuell pflegen musste. Doppelbuchungen passierten, freie Termine wurden übersehen. Saisonale Preise (Hoch-\u002FMittel-\u002FNebensaison) hat jeder Mitarbeiter im Kopf gerechnet. Es fehlte ein Funnel, der Verfügbarkeit, Preis und Anfrage in einem Schritt liefert.",[11,118,30],{"id":29},[16,120,33,121,123,124,127,128,131,132,135,136,139,140,143,144,147,148,151,152,155,156,159,160,162],{},[35,122,37],{},"-Site auf ",[19,125,126],{},"Cloudflare Workers",", gebaut für genau diesen einen Buchungs-Funnel. Der ",[19,129,130],{},"Datepicker"," liest belegte Tage live aus dem ",[19,133,134],{},"Google Calendar"," (Service-Account, JWT-Auth) und sperrt sie. Preise berechnet ein Saisonmodell direkt im Browser: 79 €\u002FNacht in der Hauptsaison Juni–August, 75 € im Mai\u002FSeptember, 70 € März\u002FApril\u002FOktober. Anfragen werden mit ",[35,137,138],{},"Zod"," validiert, ",[35,141,142],{},"Cloudflare Turnstile"," hält Bots draußen. Im Backend landen sie in ",[19,145,146],{},"Cloudflare D1"," über ",[35,149,150],{},"Drizzle ORM",", gleichzeitig geht eine ",[35,153,154],{},"MJML","-formatierte Bestätigungsmail über ",[19,157,158],{},"AWS SES"," raus und ein Termin in den Kalender. Eine ",[35,161,45],{},"-Karte zeigt den Standort.",[11,164,62],{"id":61},[16,166,167,168,171,172,175],{},"Buchungsanfragen landen sortiert in der DB ",[35,169,170],{},"und"," im Kalender. Doppelbuchungen sind technisch ausgeschlossen, weil belegte Tage im Picker grau sind. Der Kunde sieht den Preis bevor er anfragt. Die Site läuft auf Workers, also ohne Server, ohne Wartung, mit Cold-Start unter 50 ms. Das Team beantwortet Anfragen, die schon ",[19,173,174],{},"vollständig"," sind statt zu telefonieren, um Datum und Personenzahl zu klären.",{"title":75,"searchDepth":76,"depth":77,"links":177},[178,179,180],{"id":13,"depth":76,"text":14},{"id":29,"depth":76,"text":30},{"id":61,"depth":76,"text":62},"Caravan-Vermietung","MB-CARAVAN","https:\u002F\u002Fmb-caravan.de",{},"mb-caravan.de","\u002Freferenzen\u002Fmb-caravan","\u002Freferenzen\u002Fmb-caravan.webp",{"description":75},"mb-caravan","referenzen\u002Fmb-caravan","Wohnwagen-Vermietung mit Live-Verfügbarkeit aus Google Calendar und Saison-Pricing.","Hvl-sVUCOSoQ-L4KBl25-th9oRInxCvITn5mw5wFYXc",{"id":194,"title":195,"body":196,"branche":285,"description":75,"displayName":286,"extension":84,"liveUrl":287,"meta":288,"name":289,"navigation":88,"path":290,"rank":77,"relatedService":91,"screenshot":291,"seo":292,"slug":293,"stack":95,"stem":294,"summary":295,"year":296,"__hash__":297},"referenzen\u002Freferenzen\u002Foma-doris.md","Oma Doris",{"type":8,"value":197,"toc":280},[198,200,209,211,265,267],[11,199,14],{"id":13},[16,201,202,204,205,208],{},[19,203,195],{}," ist eine kleine ",[19,206,207],{},"Backstube",": handgemachte Produkte, klare Story, persönlicher Auftritt. Vorher lief eine WordPress-Seite mit Plugin-Stack, die bei jedem Update zickte. Es fehlte ein zentraler Ort für Galerie, Blog, Produkte und Kontakt, der ohne Entwickler pflegbar bleibt.",[11,210,30],{"id":29},[16,212,33,213,123,216,218,219,221,222,224,225,228,229,232,233,237,238,241,242,245,246,249,250,253,254,147,257,260,261,264],{},[35,214,215],{},"Nuxt 4",[19,217,126],{}," mit ",[19,220,146],{}," als SQLite-Datenbank. Kontaktformular validiert serverseitig mit ",[35,223,138],{}," und verschickt Mails über ",[35,226,227],{},"worker-mailer"," per SMTP. ",[19,230,231],{},"Schema.org"," ist global als ",[234,235,236],"code",{},"LocalBusiness","\u002F",[234,239,240],{},"Bakery"," ausgezeichnet, Blog-Artikel als ",[234,243,244],{},"BlogPosting",". ",[19,247,248],{},"OG-Images"," werden pro Seite über ",[35,251,252],{},"Satori"," generiert, Sitemap inkl. Blog und Galerie automatisch. Für KI-Crawler liegt eine D1-gestützte ",[234,255,256],{},"llms.txt",[35,258,259],{},"nuxt-ai-ready"," bereit. Brand-Farben (rose-blush, rose-deep, sand, bark) und die Custom-Font ",[35,262,263],{},"TirelesslyLoveYou"," tragen den Look.",[11,266,62],{"id":61},[16,268,269,270,272,273,276,277,279],{},"Die Site lädt unter 1 s, OG-Cards sehen auf jeder Plattform sauber aus. Neue Blog-Artikel landen automatisch in Sitemap und ",[234,271,256],{},", ohne Handarbeit. Pflege läuft über kurze Edits, kein Plugin-Update mehr. Die ",[19,274,275],{},"Bäckerei aus dem Sauerland"," taucht in lokalen Suchen jetzt mit ",[234,278,236],{},"-Markup auf, inkl. Öffnungszeiten und Standort.",{"title":75,"searchDepth":76,"depth":77,"links":281},[282,283,284],{"id":13,"depth":76,"text":14},{"id":29,"depth":76,"text":30},{"id":61,"depth":76,"text":62},"Brand","OMA-DORIS","https:\u002F\u002Foma-doris.de",{},"oma-doris.de","\u002Freferenzen\u002Foma-doris","\u002Freferenzen\u002Foma-doris.webp",{"description":75},"oma-doris","referenzen\u002Foma-doris","Brand-Site mit Story- und Produkt-Bereich.",2025,"zCeKugsZhCw9mXWSPQ03ZSWxs8ALsbYQ0Kz6FOv9X4k",{"id":299,"title":300,"body":301,"branche":361,"description":75,"displayName":362,"extension":84,"liveUrl":363,"meta":364,"name":365,"navigation":88,"path":366,"rank":367,"relatedService":91,"screenshot":368,"seo":369,"slug":370,"stack":95,"stem":371,"summary":372,"year":98,"__hash__":373},"referenzen\u002Freferenzen\u002Fcrosstheatlas.md","Crosstheatlas",{"type":8,"value":302,"toc":356},[303,305,315,317,343,345],[11,304,14],{"id":13},[16,306,307,310,311,314],{},[19,308,309],{},"Cross the Atlas"," ist eine Alternative-Rock-\u002FMetal-Band aus dem ",[19,312,313],{},"Hochsauerland",". Die Site soll Bandprofil, Shows, Musik, Pressekit und Booking-Kontakt bündeln. Auftritt: dunkel, industriell, schnell, ohne Theme-Optik. Veranstalter brauchen einen Ort, an dem sie Tech Rider, Pressefotos und Pressetext in einem Klick finden.",[11,316,30],{"id":29},[16,318,33,319,123,321,323,324,327,328,331,332,335,336,339,340,342],{},[35,320,215],{},[19,322,126],{}," mit eigenem ",[19,325,326],{},"KV-basierten Asset-Storage",". Bilder und das Hero-Video (1920×1440, H.264 + VP9, Brightness-Flash-Reveal) liegen in ",[35,329,330],{},"Cloudflare KV"," und werden über eine Server-Route ausgeliefert. Die Navigation ist eine ",[19,333,334],{},"Fullscreen-Kompassrose"," mit vier SVG-Nadeln, die auf Hover stehen bleiben. Auf Mobile passt sich das Video per ",[234,337,338],{},"object-contain"," an, damit der Logo-Kompass komplett sichtbar bleibt. Kontaktformular läuft über ",[35,341,142],{},", ein eigenes Consent-Gate hält Spotify- und YouTube-Embeds zurück, bis der User zustimmt. Fonts (Montserrat + Montserrat Alternates) liegen lokal als woff2, also keine Google-Requests.",[11,344,62],{"id":61},[16,346,347,348,351,352,355],{},"Veranstalter laden Pressekit, Tech Rider und Pressefotos auf einer eigenen ",[234,349,350],{},"\u002Fdownloads","-Seite herunter. Die Site fühlt sich an wie ein Live-Set: Hero-Reveal in 2 s, Stagger-Animationen, kein Stockfoto. Performance ist trotz Hero-Video grün, weil Bilder als WebP über KV laufen und der Cold-Start auf Workers unter 50 ms liegt. ",[234,353,354],{},"prefers-reduced-motion"," wird respektiert.",{"title":75,"searchDepth":76,"depth":77,"links":357},[358,359,360],{"id":13,"depth":76,"text":14},{"id":29,"depth":76,"text":30},{"id":61,"depth":76,"text":62},"Band","CROSS-THE-ATLAS","https:\u002F\u002Fcrosstheatlas.de",{},"crosstheatlas.de","\u002Freferenzen\u002Fcrosstheatlas",4,"\u002Freferenzen\u002Fcrosstheatlas.webp",{"description":75},"crosstheatlas","referenzen\u002Fcrosstheatlas","Band-Site mit Hero-Video, Kompass-Navigation und Veranstalter-Downloads.","oIjC8qdNgh2HtfVHr-zu-hmg4FZBYbm-ohJHP-o-H9g",{"id":375,"title":376,"body":377,"branche":453,"description":75,"displayName":454,"extension":84,"liveUrl":455,"meta":456,"name":457,"navigation":88,"path":458,"rank":459,"relatedService":91,"screenshot":460,"seo":461,"slug":462,"stack":95,"stem":463,"summary":464,"year":296,"__hash__":465},"referenzen\u002Freferenzen\u002Fpawlickundpawlick.md","Pawlickundpawlick",{"type":8,"value":378,"toc":448},[379,381,387,389,435,437],[11,380,14],{"id":13},[16,382,383,386],{},[19,384,385],{},"Pawlick & Pawlick GmbH"," ist ein Trockenbau-Betrieb. Die alte Site lief auf Express + Pug + MongoDB + Strapi, ein Stack, der für eine Firmen-Website zu schwer war. Server-Wartung, Strapi-Updates, MongoDB-Backups: alles Aufwand für eine Site, die im Kern eine Leistungs-Übersicht und eine Referenz-Galerie ist. Dazu der Anspruch, das Ganze barrierefrei zu machen.",[11,388,30],{"id":29},[16,390,391,392,218,394,397,398,401,402,405,406,409,410,413,414,417,418,397,420,422,423,426,427,430,431,434],{},"Migration auf ",[35,393,215],{},[19,395,396],{},"Cloudflare Pages",", ",[19,399,400],{},"D1"," für Daten und ",[19,403,404],{},"R2"," für Bilder. Projekte und Bilder liegen in ",[35,407,408],{},"Drizzle","-Schemas, jedes Referenz-Projekt hat eine Galerie mit ",[35,411,412],{},"PhotoSwipe","-Lightbox. Karte über ",[35,415,416],{},"Leaflet"," mit OpenStreetMap. Kontaktformular validiert serverseitig, schickt Mails über ",[19,419,158],{},[35,421,142],{}," gegen Bots, Header-Injection wird sanitisiert. Das ",[19,424,425],{},"Theme-System"," bringt vier Modi: Dark (Default), Light, ",[19,428,429],{},"High-Contrast (WCAG AAA)"," und Reader-Mode mit Sepia + größeren Fonts. Ein ",[234,432,433],{},"useAccessibility()","-Composable steuert Schriftgröße, Reduce-Motion, Lesehilfen, Cursor-Modi und Bilder-Ausblendung, alles in LocalStorage gemerkt.",[11,436,62],{"id":61},[16,438,439,440,443,444,447],{},"Server-Wartung entfällt komplett, die Site läuft auf Workers. Statische Seiten (Impressum, Datenschutz, Barrierefreiheit) werden vorgerendert, die Startseite läuft über ISR (1 h Revalidate), Referenz-Detailseiten über SSR mit 30 min Edge-Cache. Bildauslieferung kommt direkt aus R2 über ",[234,441,442],{},"images.pawlickundpawlick.de",". Die ",[19,445,446],{},"Trockenbau-Firma"," liefert Referenzen jetzt in einer Galerie statt in einem PDF-Anhang. Wer mit Screenreader oder Lesemaske auf die Site kommt, findet ein eigenes Setting dafür.",{"title":75,"searchDepth":76,"depth":77,"links":449},[450,451,452],{"id":13,"depth":76,"text":14},{"id":29,"depth":76,"text":30},{"id":61,"depth":76,"text":62},"Handwerk","PAWLICK-UND-PAWLICK","https:\u002F\u002Fpawlickundpawlick.de",{},"pawlickundpawlick.de","\u002Freferenzen\u002Fpawlickundpawlick",5,"\u002Freferenzen\u002Fpawlickundpawlick.webp",{"description":75},"pawlickundpawlick","referenzen\u002Fpawlickundpawlick","Trockenbau-Site mit Referenz-Galerie, Theme-System und Barrierefreiheits-Modus.","Iig6NAyVm8XaGdFFns3OT-jsRKcoCzPskK0CTYhne6Y",{"id":467,"title":468,"body":469,"branche":511,"description":75,"displayName":512,"extension":84,"liveUrl":513,"meta":514,"name":515,"navigation":88,"path":516,"rank":517,"relatedService":91,"screenshot":518,"seo":519,"slug":520,"stack":521,"stem":522,"summary":523,"year":524,"__hash__":525},"referenzen\u002Freferenzen\u002Fguntermanns-stuben.md","Guntermanns Stuben",{"type":8,"value":470,"toc":506},[471,473,481,483,497,499],[11,472,14],{"id":13},[16,474,475,477,478,480],{},[19,476,468],{}," ist eine Gastronomie im ",[19,479,115],{},". Die Site soll Karte, Bilder und Reservierungs-Kontakt zeigen, ohne CMS-Overhead. Gepflegt wird selten, dafür gründlich. Hosting beim lokalen Provider, kein Node, kein Build-Server, kein Update-Stress um drei Uhr morgens.",[11,482,30],{"id":29},[16,484,33,485,488,489,492,493,496],{},[19,486,487],{},"statische HTML\u002FCSS\u002FJS-Site",", gebaut mit ",[35,490,491],{},"Gulp",". CSS und JS werden konkateniert, minifiziert und in einen ausgelieferten Ordner geschrieben. ",[35,494,495],{},"FontAwesome"," für Icons, eigene Fotos statt Stockmaterial. Karte und Adresse oben, Reservierung per Telefon und Mail mit einem Klick. Speisekarte als statischer Content, der bei saisonalen Wechseln per Edit getauscht wird. Vollständiger Favicon- und PWA-Icon-Satz für Apple-, Android- und MS-Devices.",[11,498,62],{"id":61},[16,500,501,502,505],{},"Auslieferung als reines HTML, Time-to-First-Byte unter 100 ms beim klassischen Webhoster. Keine Datenbank, keine PHP-Updates, kein Plugin, das ausläuft. Die Site liegt seit 2019 produktiv und braucht im Schnitt ",[19,503,504],{},"einen Edit pro Quartal",". Gäste sehen auf dem Smartphone Adresse, Öffnungszeiten und Telefonnummer ohne Scrollen.",{"title":75,"searchDepth":76,"depth":77,"links":507},[508,509,510],{"id":13,"depth":76,"text":14},{"id":29,"depth":76,"text":30},{"id":61,"depth":76,"text":62},"Gastronomie","GUNTERMANNS-STUBEN","https:\u002F\u002Fguntermanns-stuben.de",{},"guntermanns-stuben.de","\u002Freferenzen\u002Fguntermanns-stuben",6,"\u002Freferenzen\u002Fguntermanns-stuben.webp",{"description":75},"guntermanns-stuben","HTML\u002FCSS","referenzen\u002Fguntermanns-stuben","Statische Gastro-Site im Sauerland mit Speisekarte, Galerie und Reservierungs-Kontakt.",2019,"6EdbfacNjW2D29fFR62aQWOZAN3W-QIOQpaZkCvPO5s",1779196540687]