Webdesign, das knallt.

Wie Neonlicht im Regen.

Dein System-Upgrade steht an.
EXECUTE website_build_v2.0
Die digitale Welt ist laut, dunkel und voller Bugs. Abteilung 83 ist dein Fixer. Websites, die nicht nur funktionieren, sondern leuchten. Schnell wie ein Neuro-Link, sauber wie ein frisch gewischter Serverraum. ⮐
sh start_project.sh
open_work_vault()
/* Max Headroom says: keep it glitchy, not kitschy */
/stack → WordPress + Breakdance/Oxygen

Fesch. Frisch.

Future.

Deploy ready. Less Noise. Nice Data. No Bloat.
Webdesign das kompiliert. Für Menschen!

/Highlights
/value-snapshot → Why us()
// LOG FILE: [STATUS: DEPRECATED]
Uh, well, okay Biff, uh, I'll finish that on up tonight and I'll bring it over first thing tomorrow morning.
// END OF LOG. This is why we use structured deployment.
Schnell.
const lcp = "< 2s";
Messbar flotter Start.
Lesbar.
humanReadable(true)
Design & Code leicht wartbar.
Konform.
privacy.on()
DSGVO & Consent korrekt.
/process → Timeline

Process

Dein Weg. Dein Ziel: Klarer Output.

Built with empathy. Measured in ms.

run /initial --mode=discovery

Briefing

Ziele, Inhalte, Mood
Schärfen, Umfang fixen, To-dos priorisieren.

fn init_details() keyboard-return
commit: design-freeze

Design

Wireframe → UI (Figma/Headspin)
Struktur & Flow definieren, Content-Skelette bauen.
Visuelles Vokabular festlegen (clean-neon).

fn check_design_manifest() keyboard-return
build deploy --env=prod

Build

WordPress + Breakdance = Performance
Schlüsselseiten final gestalten (Hero, Nav, Card, Form).
Inhalte rein, suchbar machen.

fn get_deploy_report() keyboard-return
status: lighthouse > 90

Ship

Launch → Tracking → Handover
Live schalten. QA kann nie schaden.
Ruhe nach dem Ship.

fn protocol_ship_details() keyboard-return
/work → Portfolio Highlights

Highlights

Weniger Blabla, mehr Builds.

commit: clean-ship

/Work
Bornemann und Partner
TiNA – Wort- und Markenatelier
Messner GesmbH
I Wood like Kumpusch
Lieperts
Dr. med. univ. Pina Treiber

Bornemann & Partner
Consulting

Führende Unternehmensberatung an der Schnittstelle von HR-Tradition und KI-Innovation. Spezialisiert auf Organisationsentwicklung, Führungskräfte-Coaching und die strategische Implementierung künstlicher Intelligenz in Unternehmen.
open ./Details

TiNA

Wor- und Markenatelier

Pixel-genaue Umsetzung einer individuellen Markenidentität, Bewegung und Performance.
open ./Details

Messner GesmbH

Wie übersetzt man die physische Qualität eines Printmagazins in den Browser? Kein “Scroll-Durch”, sondern ein “Blättern-Gefühl”.
open ./Details

I Wood Like Kumpusch

Digitale Transformation eines Traditionsbetriebs zum Design-Studio. Radikale Anpassung eines WordPress-Templates, um die Fusion aus Handwerk, ‘Robotic’ und modernem Interior-Design markengerecht zu inszenieren.
open ./Details

Lieperts

Fine Dining & Boutique Hotel. Kein “Theme”, sondern “Michelin-Stern”.
open ./Details

Essen & Psyche

Dr. med. univ. Pina Treiber

Horizontale User Journey für eine Fachpraxis. Ein experimentelles Oxygen-Design, das Desktop-User seitwärts durch die Inhalte führt, um Entschleunigung und Fokus zu fördern.
open ./Details

A user interface is like a joke. If you have to explain it, it's not that good.
– Martin Cooper

/tech → Tools

Tech & Stack

Sauberer Code, leichte Assets.

Human-readable. Machine-tested.

/More
[KERNEL] WordPress
status: stable • updates: rolling

Dein Content-Kernel: seit Jahren battle-tested, mit Hooks/Filters als Event-Bus, REST API & WP-CLI für Automation, CPT/ACF für saubere Datenmodelle, Role/Capability-System für Least-Privilege, und ein absurd großes Plugin-Ökosystem (ohne Vendor-Lock).

Ergebnis: schnelle Pflege, reproduzierbare Deploys, klare Rechte, SEO-Basics & Schema ready.

Open Source

[BUILDER] Oxygen
build: deterministic • markup: clean • bloat: zero-shortcode.

Dev-first und themenlos (ersetzt das Theme): volle DOM-/Markup-Kontrolle ohne Shortcode-Müll, BEM/Utility-Klassen + CSS-Tokens, Global Styles & Templates, Repeater/Conditions für dynamische Views (WP Query, ACF/Meta). PHP-/JS-Snippets, Hooks/Filters, Reusable Parts – alles versionierbar.
Ergebnis: pixelgenaue Custom-Layouts, „heavy custom“ und Legacy-Refactors ohne Ballast; sauberes HTML, CWV-freundlich.

If, at first, you do not succeed, call it version 1.0.
― Khayri R.R. Woulfe
[BUILDER] Breakdance
let's dance

Component-driven Page-Builder ohne Shortcode-Ballast: sauberes HTML/ARIA, CSS-Tokens & Global Styles, clamp()-Typo, Grid/Flex, Query Loops + Conditions, Dynamic Data (ACF/CPT), Bild-Pipelines (WebP/srcset, Lazy). Fein steuerbare Motions ohne jQuery, Class-Manager für BEM/Utilities, Woo-Hooks ready.
Ergebnis: schlanker Output, A11y-freundliche Patterns, stabile CWV

[EDITOR] Pinegrow
build: deterministic • payload: lean.

Visuelles Frontend-Lab für reines Markup: DOM-Inspector, CSS-Grid/Flex-Tools, Tailwind Visual Editor, SCSS-Pipeline, Components/Master-Pages, GSAP-Interactions. Exportiert sauberes, git-freundliches HTML/CSS/JS – zero Shortcodes, zero Vendor-Lock.
Ergebnis: Headless/Static-Templates ohne CMS-Ballast; Tokens & Partials versionierbar; perfekte Vorlagen für Astro/Eleventy/Next-Pipelines.

[ECOMMERCE] WooCommerce

Pay, Ship, Fulfill.

native WP-Commerce-Engine: CPTs für Produkte/Bestellungen, Attribute/Varianten, REST API & Webhooks, Hooks/Filters für Gateways/Checkout, HPOS (High-Performance Order Storage), Shipping Zones/Methods, Steuern/VAT (OSS), Coupons/Inventar. Template-Overrides & Blocks für UX, Integrationen (Stripe/PayPal/SEPA, CRM/Mail, Subscriptions, „Germanized/AT“).
Ergebnis: datenhoheitlicher, skalierbarer Store ohne Bloat – schnell, erweiterbar, audit-freundlich.

[IDE] VS CODE
schnelle Iteration, sauberer Git-Flow

Leichte IDE fürs WP-DevOps: Multi-Root-Workspace für Theme/Plugin parallel, Tasks für npm/Vite/wp i18n, Launch/Debug für PHP/Xdebug & JS, Snippets/Code Actions für Hooks/Filters. Extensions-Stack: ESLint, Prettier (on save), Emmet, EditorConfig, Thunder Client/REST, Docker, GitLens.

Not just a placeholder

"If debugging is the process of removing software bugs, then programming must be the process of putting them in."

Demographics matter

"Simplicity is prerequisite for reliability." – Edsger Dijkstra

"The best code is no code at all."

Simple things should be simple, complex things should be possible.
– Alan Kay

Modular as possible

/services → Modules

SERVICE

Weniger Blabla, mehr Builds.

commit: clean-ship

/More

One-Pager

Focus Mode.

Eine Seite, ein Ziel

Leads auf den Punkt.

// UNIT_PRICE: 1700.00 EUR

OUTPUT_PARAMETERS

  • Deine Botschaft auf einer Spur – zero Noise, maximaler Impact.
  • Ideal für Launches & Kampagnen, die sofort zünden.
  • Hero-Story, Proof, Logos, CTA, Kontakt
  • Socials

BUILD_SUCCESS

  • klare Conversion-Journey
  • Launch in Tagen
  • 90+ Lighthouse
sh start_project.sh
* Flatrate inkl. Korrekturschleife. Exkl. etwaige Lizenzen.

Multi-Pager

Focus Mode.

Strukturierter Markenauftritt

SEO-Breit

// BASE_PRICE: 2800.00 EUR+

OUTPUT_PARAMETERS

  • Strukturierter Auftritt mit Tiefe und klarer Navigation.
  • Für Wachstum: mehr Content, mehr Leads, weniger Reibung.
  • Landing, Leistungen/Service, Cases, Portfolio, Team, Blog, Über uns, Kontakt
  • Socials

BUILD_SUCCESS

  • skalierbar
  • sauber versioniert
  • Content-Wachstum
sh start_project.sh
* Flatrate inkl. Korrekturschleife. Exkl. etwaige Lizenzen.

? TIMELINE: Deployment_Duration

--lang="Wie lange dauert es?

  • One-Pager
    meist 1–2 Wochen (inkl. 1–2 Feedback-Runden). In Tagen wenn du alle Inhalte fertig hast.
  • Multi-Pager
    ca. 2–3 Wochen – abhängig von Seitenzahl & Content.
  • E-Commerce 3–5 Wochen
  • Integrationen/Varianten verlängern die Timeline.

? DATAPACKET: Required_Payload

--lang="Welche Inhalte brauche ich?

Logo, CI/Farben, Kurztexte (USP, Leistungen), Bilder/Referenzen; für Shops zusätzlich Produktdaten (Titel, Preise, Varianten, Bilder).

Fehlendes Material übernehme ich auf Wunsch (Recherche, Copy, Bildauswahl).

? HOSTING: Status_Unspecified

--lang="Ich habe keine Domain/Host?

Kein Problem. Wir entwicklen deine Seite gemeinsam in einer Testumgebung. Währenddessen hast du genügend Zeit um dir einen passenden Host und eine passende Domain zu suchen. Gerne helfe ich dabei mit Empfehlungen.

? COMPLIANCE: Regulation_Check

--lang="Was ist mit SEO & DSGVO?

On-Page-Basics (Titel/Meta, saubere Struktur), schnelle Ladezeiten, Bild-Optimierung, Consent-Banner inklusive. Notwendige Rechtstexte/Seiten (Impressum/Datenschutz) lieferst du.
Erweiterte SEO/Tracking ist zubuchbar. Rechtliche Prüfung helfe ich gerne zu vermitteln.

? ACCESS: Self_Service_Mode

--lang="Gibt es ein DIY-Kit?

Ja klar, dafür gibt es ein cooles DIY-Kit. Du bekommst ein fertiges Setup in einer Testumgebung und kannst dir deine Seite selbst zusammen setzen. Beim Übertragen auf deinen Server helfe ich dir.

? CONTROL: Post_Deploy_Edit

--lang="Kann ich selbst ändern?

Ja. WordPress + Breakdance = visuelles Editing für Seiten, Texte, Bilder, Produkte. Du bekommst eine kurze Einschulung & ein Mini-Manual; Rollen/Rechte richte ich auf Wunsch ein.

Data is a precious thing and will last longer than the systems themselves.
– Tim Berners-Lee

/faq → human-readable()

## PROTOCOL: KNOWLEDGE_BASE

? FAQ_PROTOCOL: Query_Access

/Questions_overload
/contact → Messages

Kontakt & Drop_

Sauberer Code, leichte Assets.

Human-readable. Machine-tested.

INITIATE DATA TRANSFER

// SYSTEM_READY

Awaiting input
[ INITIATE_PROJECT_PROTOCOL ]
Impressum Cookie Richtlinien Datenschutz (EU)
© 20?? Abteilung83. Alle Rechte vorbehalten.
SYSTEM: ONLINE

run /initial --mode=discovery

Die Diagnose vor der Operation.

// PROTOCOL: SCOPE_DEFINITION
Bevor wir auch nur eine Zeile Code schreiben, müssen wir das Ziel definieren. Wir vermeiden "Feature Creep" durch klare Absprachen. Wir analysieren nicht nur, was du willst, sondern was dein System braucht.
> INPUT_REQUIRED:
Bevor wir auch nur eine Zeile Code schreiben, müssen wir das Ziel definieren. Wir vermeiden "Feature Creep" durch klare Absprachen. Wir analysieren nicht nur, was du willst, sondern was dein System braucht.
  • Zielgruppen-Analyse (Wen jagst du?)
  • Content-Audit (Was hast du schon an Text/Bild?)
  • Design-Präferenzen (Moodboard / No-Gos)
  • Funktionale Anforderungen (Shop? Booking? Blog?)
> OUTPUT_GENERATED:
  • [DOC] Project Roadmap: Zeitplan & Meilensteine.
  • [STRUCT] Sitemap: Die Architektur deiner Seite.
  • [OFFER] Project Proposal: Detailliertes Angebot & Scope. Modular kalkuliert für maximale Flexibilität.
Close Terminal

commit: design-freeze

UI-Architecture & Visual Manifest.

// PROTOCOL: VISUAL_CONSTRUCTION
Wir nutzen keine fertigen Templates. Wir bauen ein Interface, das deine Marke atmet. In dieser Phase entsteht das Aussehen und das Gefühl (Look & Feel). Wir gestalten in Figma oder direkt im Browser – pixelgenau und responsive.
> THE_WORKFLOW:
  • Wireframing: Das Skelett der Seite (UX-Fokus).
  • Visual Design: Farben, Typografie, Whitespace (UI-Fokus).
  • Interaktions-Check: Wie fühlt sich der Button an?
> OUTPUT_GENERATED:
  • [UI] High-Fidelity Screendesigns: So wird es aussehen.
  • [STYLE] Design Tokens: Deine Farben & Schriften definiert.
  • [CHK] Korrekturschleife: Dein Feedback wird eingearbeitet (git merge).
Close Terminal

build deploy --env=prod

Clean Code & Component Assembly.

// PROTOCOL: DEVELOPMENT_PHASE
Hier passiert die Magie. Wir übersetzen das Design in sauberen, validen Code. Wir nutzen Breakdance/Oxygen für maximale Kontrolle und minimalen Bloat. Jeder Container, jede Klasse hat einen Zweck.
> TECH_SPECS:
  • Semantic HTML5: Für Google und Screenreader.
  • Responsive Logic: Sieht auf 4k und auf dem iPhone SE gut aus.
  • CMS-Config: Wir bauen das Backend so, dass du es bedienen kannst (ACF / CPTs).
> OUTPUT_GENERATED:
  • [SRV] Staging Umgebung: Ein privater Server für Live-Tests.
  • [PERF] Speed-Optimierung: Bildkomprimierung & Caching-Setup.
Close Terminal

status: lighthouse > 90

Launch Protocol & Handover.

// PROTOCOL: GO_LIVE
Eine Website online zu stellen, ist mehr als ein Klick. Wir prüfen alle Systeme, sichern die Datenbank und sorgen für einen sauberen Start. Danach übergeben wir dir die Schlüssel.
> CHECKLIST_EXECUTED:
  • Cross-Browser Testing: Safari, Chrome, Firefox, Edge.
  • Mobile Audit: Touch-Targets und Lesbarkeit geprüft.
  • SEO-Basics: Meta-Titel & Sitemap.xml eingereicht.
  • Security: Firewall-Setup, Login-Schutz, SSL-Zertifikat.
> OUTPUT_GENERATED:
  • [LIVE] Deployment: Seite online unter deiner Domain.
  • [MAN] Admin-Manual: Kurzanleitung für dich.
  • [KEYS] Full Access: Du besitzt 100% der Seite und Daten.
Close Terminal