Files
dogfather-universe/webdesign/leistungen.html
T
DogFatherGitandClaude Opus 5 4b3ec450d5 Webdesign-Bereich: Fundament, oeffentliche Seiten, Zugangsschutz, PayPal
Umsetzung des "Website Masterplan" (16 Seiten) unter /webdesign.

Zugangsschutz mit EIGENER Schranke (server/webdesign-gate.js) statt gate.js:
gate.js laesst seit dem oeffentlichen Start am 21.08.2026 jeden durch, weil
die Pruefung auf SITE_PUBLIC_LAUNCH_AT als allererste Zeile steht. Haette man
/webdesign dahintergehaengt, waere der ausdruecklich nicht-oeffentliche Bereich
inklusive Preisen und spaeteren Kundendaten ab der ersten Sekunde fuer jeden
lesbar gewesen. Eigenes Sitzungs-Cookie, bereich="webdesign" im Token, damit
ein gueltiges Universe-Cookie hier NICHT gilt. 37/37 Tests.

Sieben oeffentliche Seiten in fuenf Sprachen (de, de-CH mit echtem Dialekt, en,
fr, pt). Preise, Zeitrahmen, Paketnamen und die 30-%-Regel stehen an genau
EINER Stelle in wd-core.js -- der Masterplan verlangt "ueberall
widerspruchsfrei", und vier Kopien laufen bei der ersten Preisaenderung
auseinander.

Als App installierbar auf Handy und PC. Der Service Worker speichert bewusst
KEINE HTML-Seite zwischen: nach dem Abmelden wuerden sonst geschuetzte Seiten
weiter ausgeliefert, ohne dass der Server je gefragt wird. 18/18 Tests.

Handy-Abnahme ueber alle Seiten in fuenf Breiten (320-1440) und fuenf Sprachen:
40/40. Der Test fand 35 echte Fehler (Touch-Ziele unter 44px), behoben im
Designsystem statt einzeln pro Seite.

PayPal (Wunsch 22.08.2026 "sofort auf meinem paypal"): Orders API mit
intent=CAPTURE, also sofortiger Einzug statt blosser Reservierung. Gebuehr und
Nettobetrag getrennt gespeichert. Betraege durchgehend als Ganzzahl in Cent.
Gefaelschte Webhooks werden abgewiesen. Fail closed solange Zugangsdaten
fehlen. 28/28 Tests gegen einen nachgebauten PayPal-Server.

Datenbank: 15 Tabellen mit Praefix wd_, fachlich vollstaendig vom Universe
getrennt.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-22 18:06:52 +02:00

308 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de" data-i18n-titel="seiten_titel">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Leistungen — Dogfather Webdesign</title>
<meta name="description" content="Onepager, professionelle Website, Shop und Verwaltungsseiten: was jeweils enthalten ist, was extra kostet und wo die Grenze verläuft." />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
<meta name="theme-color" content="#05070b" />
<link rel="manifest" href="/webdesign/app.webmanifest" />
<link rel="apple-touch-icon" href="/assets/img/wd-app-180.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Dogfather Webdesign" />
<link rel="stylesheet" href="/assets/css/main.css?v=20260822wd" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd" />
<style>
/* Sprungmarken-Leiste: auf schmalen Bildschirmen waagerecht wischbar
statt umbrechend — vier lange deutsche Paketnamen ergeben sonst vier
Zeilen, die den halben ersten Bildschirm fressen. */
.ls-sprung {
display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .2rem 1rem;
scrollbar-width: thin; -webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
}
.ls-sprung a {
flex: 0 0 auto; scroll-snap-align: start;
padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center;
border-radius: 999px; border: 1px solid var(--wd-rand);
font-size: .92rem; font-weight: 600; color: var(--wd-text-mid); white-space: nowrap;
}
.ls-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); }
/* scroll-margin-top: sonst verschwindet die Abschnittsüberschrift beim
Anspringen unter der klebenden Kopfzeile. */
.ls-block { scroll-margin-top: 90px; }
.ls-block + .ls-block { margin-top: clamp(2rem, 5vw, 3.4rem); }
.ls-block h2 { margin-bottom: .25em; }
.ls-preiszeile {
display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem;
margin: 0 0 1.4rem;
}
.ls-preis { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2rem); color: var(--wd-blau); }
.ls-block--lila .ls-preis { color: var(--wd-lila); }
.ls-dauer { color: var(--wd-text-mid); font-size: 1rem; }
.ls-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.9rem, 2vw, 1.3rem); }
@media (max-width: 780px) { .ls-raster { grid-template-columns: 1fr; } }
.ls-feld h3 { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .5em; }
.ls-block--lila .ls-feld h3 { color: var(--wd-lila); }
.ls-feld p { margin: 0; }
</style>
</head>
<body class="wd">
<div id="wd-kopf"></div>
<main id="wd-inhalt">
<section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:clamp(2.4rem,6vw,4rem)">
<div class="wd-container">
<span class="wd-eyebrow" data-i18n="ls_eyebrow">Klare Pakete</span>
<h1 data-i18n="ls_h1">Was du ungefähr bekommst</h1>
<p class="wd-lead" style="max-width:72ch" data-i18n="ls_lead">Keine leeren Werbeversprechen. Zu jeder Kategorie steht hier, für wen sie gedacht ist, was typischerweise drin ist, was extra kostet — und wo die Grenze verläuft.</p>
<nav class="ls-sprung" aria-label="Abschnitte">
<a href="#onepager" data-i18n="op_h2">Onepager</a>
<a href="#website" data-i18n="ws_h2">Professionelle Website</a>
<a href="#shop" data-i18n="sh_h2">Shop &amp; umfangreiche Website</a>
<a href="#verwaltung" data-i18n="vw_h2">Buchhaltungs- &amp; Steuerverwaltungsseiten</a>
<a href="#betreuung" data-i18n="bt_h2">Laufende Betreuung</a>
</nav>
</div>
</section>
<section class="wd-abschnitt" style="padding-top:0">
<div class="wd-container">
<!-- ---------------- Onepager ---------------- -->
<article class="wd-karte wd-karte--kappe ls-block wd-auf" id="onepager">
<h2 data-i18n="op_h2">Onepager</h2>
<div class="ls-preiszeile">
<span class="ls-preis"><span data-i18n="ab_preis">ab</span> 300&nbsp;€</span>
<span class="ls-dauer"><strong data-i18n="dauer">Dauer</strong>: <span data-i18n="pk_onepager_dauer">ca. 5–10 Arbeitstage</span></span>
</div>
<p class="wd-personalisierung" style="margin-top:-1rem;margin-bottom:1.4rem" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
<div class="ls-raster">
<div class="ls-feld">
<h3 data-i18n="fuer_wen">Für wen</h3>
<p data-i18n="op_fuer">Einzelpersonen, Creator, eine einzelne Aktion oder ein klar umrissenes Angebot, das keine Unterseiten braucht.</p>
</div>
<div class="ls-feld">
<h3 data-i18n="enthalten">Typisch enthalten</h3>
<ul class="wd-liste">
<li data-i18n="op_1">Bis zu ca. fünf Inhaltsbereiche auf einer Seite</li>
<li data-i18n="op_2">Hero, Vorstellung, Angebot, Links und Kontakt</li>
<li data-i18n="op_3">Responsiv auf Handy, Tablet und Computer</li>
<li data-i18n="op_4">Grundstruktur für Suchmaschinen (Titel, Beschreibung, Überschriften)</li>
<li data-i18n="op_5">Typischerweise zwei Feedbackrunden</li>
</ul>
</div>
<div class="ls-feld">
<h3 data-i18n="beispiel">Konkretes Beispiel</h3>
<p data-i18n="op_beispiel">Eine Seite für einen Creator: oben wer du bist und was du machst, darunter die aktuelle Aktion, deine Kanäle, ein kurzes Kontaktformular. Alles auf einem Bildschirm erreichbar, ohne Menü.</p>
</div>
<div class="ls-feld">
<h3 data-i18n="grenze">Nicht enthalten</h3>
<p data-i18n="op_grenze">Kein Shop, keine Nutzerkonten, keine Unterseiten. Wenn absehbar mehr als eine Seite nötig wird, ist die professionelle Website der ehrlichere Weg — auch wenn sie mehr kostet.</p>
</div>
</div>
<div class="wd-notiz" style="margin-top:1.3rem">
<p><strong data-i18n="extras">Kostet extra</strong>: <span data-i18n="extras_allgemein">Zusätzliche Sprachen · weitere Unterseiten · Logo- und Bildbearbeitung · Texterstellung · Anbindung an fremde Systeme · zusätzliche Feedbackrunden über die vereinbarten hinaus</span></p>
</div>
<div class="wd-btn-reihe" style="margin-top:1.3rem">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html?paket=onepager" data-i18n="jetzt_anfragen">Dieses Paket anfragen</a>
</div>
</article>
<!-- ---------------- Professionelle Website ---------------- -->
<article class="wd-karte wd-karte--lila wd-karte--kappe ls-block ls-block--lila wd-auf" id="website">
<h2 data-i18n="ws_h2">Professionelle Website</h2>
<div class="ls-preiszeile">
<span class="ls-preis"><span data-i18n="ab_preis">ab</span> 500&nbsp;€</span>
<span class="ls-dauer"><strong data-i18n="dauer">Dauer</strong>: <span data-i18n="pk_website_dauer">ca. 2–4 Wochen</span></span>
</div>
<p class="wd-personalisierung" style="margin-top:-1rem;margin-bottom:1.4rem" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
<div class="ls-raster">
<div class="ls-feld">
<h3 data-i18n="fuer_wen">Für wen</h3>
<p data-i18n="ws_fuer">Unternehmen, Teams, Vereine, Creator mit mehreren Themen — überall dort, wo eine einzelne Seite zu voll würde.</p>
</div>
<div class="ls-feld">
<h3 data-i18n="enthalten">Typisch enthalten</h3>
<ul class="wd-liste">
<li data-i18n="ws_1">Typisch bis zu fünf Kernseiten</li>
<li data-i18n="ws_2">Navigation, Formulare, Galerie oder Videos</li>
<li data-i18n="ws_3">Responsive Umsetzung und Funktionscheck auf echten Geräten</li>
<li data-i18n="ws_4">Unterstützung bei der Veröffentlichung (Domain, Zertifikat, Umzug)</li>
<li data-i18n="ws_5">Einweisung, damit du Texte selbst ändern kannst</li>
</ul>
</div>
<div class="ls-feld">
<h3 data-i18n="beispiel">Konkretes Beispiel</h3>
<p data-i18n="ws_beispiel">Ein Handwerksbetrieb: Startseite, Leistungen, Referenzen mit Bildern, Über uns, Kontakt mit Anfahrt und Formular. Anfragen landen strukturiert im Postfach statt als formlose Mail.</p>
</div>
<div class="ls-feld">
<h3 data-i18n="grenze">Nicht enthalten</h3>
<p data-i18n="ws_grenze">Kein Produktverkauf und keine geschützten Nutzerbereiche. Sobald etwas verkauft oder ein Login gebraucht wird, gilt die nächste Kategorie.</p>
</div>
</div>
<div class="wd-notiz" style="margin-top:1.3rem">
<p><strong data-i18n="extras">Kostet extra</strong>: <span data-i18n="extras_allgemein">Zusätzliche Sprachen · weitere Unterseiten · Logo- und Bildbearbeitung · Texterstellung · Anbindung an fremde Systeme · zusätzliche Feedbackrunden über die vereinbarten hinaus</span></p>
</div>
<div class="wd-btn-reihe" style="margin-top:1.3rem">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html?paket=website" data-i18n="jetzt_anfragen">Dieses Paket anfragen</a>
</div>
</article>
<!-- ---------------- Shop ---------------- -->
<article class="wd-karte wd-karte--kappe ls-block wd-auf" id="shop">
<h2 data-i18n="sh_h2">Shop &amp; umfangreiche Website</h2>
<div class="ls-preiszeile">
<span class="ls-preis"><span data-i18n="ab_preis">ab</span> 1.000&nbsp;€</span>
<span class="ls-dauer"><strong data-i18n="dauer">Dauer</strong>: <span data-i18n="pk_shop_dauer">ca. 4–8 Wochen</span></span>
</div>
<p class="wd-personalisierung" style="margin-top:-1rem;margin-bottom:1.4rem" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
<div class="ls-raster">
<div class="ls-feld">
<h3 data-i18n="fuer_wen">Für wen</h3>
<p data-i18n="sh_fuer">Alle, die tatsächlich online verkaufen wollen — Handgemachtes, digitale Produkte, Merch — oder einen geschützten Bereich für Kundinnen und Kunden brauchen.</p>
</div>
<div class="ls-feld">
<h3 data-i18n="enthalten">Typisch enthalten</h3>
<ul class="wd-liste">
<li data-i18n="sh_1">Produkte, Detailseiten, Warenkorb und Kasse</li>
<li data-i18n="sh_2">Zahlungs- und Versandabläufe eingerichtet und durchgespielt</li>
<li data-i18n="sh_3">Mobile Kundenführung — Kasse funktioniert auf dem Handy wirklich</li>
<li data-i18n="sh_4">Adminbereich zur eigenständigen Produktpflege</li>
<li data-i18n="sh_5">Einweisung in die Produktpflege</li>
</ul>
</div>
<div class="ls-feld">
<h3 data-i18n="beispiel">Konkretes Beispiel</h3>
<p data-i18n="sh_beispiel">Van's DIY &amp; Bastelbedarf: Kategorien, Artikel mit Bildern und Varianten, Warenkorb, Gutscheincodes, Versandregeln — und ein Adminbereich, in dem neue Artikel ohne Technikkenntnisse angelegt werden.</p>
</div>
<div class="ls-feld">
<h3 data-i18n="grenze">Nicht enthalten</h3>
<p data-i18n="sh_grenze">Gebühren von Zahlungsanbietern, Kosten für Domain und Server sowie steuerliche Pflichten liegen bei dir. Ich richte die Technik ein, übernehme aber weder Buchhaltung noch Rechtsberatung.</p>
</div>
</div>
<div class="wd-notiz" style="margin-top:1.3rem">
<p><strong data-i18n="extras">Kostet extra</strong>: <span data-i18n="extras_allgemein">Zusätzliche Sprachen · weitere Unterseiten · Logo- und Bildbearbeitung · Texterstellung · Anbindung an fremde Systeme · zusätzliche Feedbackrunden über die vereinbarten hinaus</span></p>
</div>
<div class="wd-btn-reihe" style="margin-top:1.3rem">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html?paket=shop" data-i18n="jetzt_anfragen">Dieses Paket anfragen</a>
</div>
</article>
<!-- ---------------- Verwaltungsseiten ---------------- -->
<article class="wd-karte wd-karte--lila wd-karte--kappe ls-block ls-block--lila wd-auf" id="verwaltung">
<h2 data-i18n="vw_h2">Buchhaltungs- &amp; Steuerverwaltungsseiten</h2>
<div class="ls-preiszeile">
<span class="ls-preis"><span data-i18n="ab_preis">ab</span> 1.500&nbsp;€</span>
<span class="ls-dauer"><strong data-i18n="dauer">Dauer</strong>: <span data-i18n="pk_verwaltung_dauer">ca. 6–12 Wochen</span></span>
</div>
<p class="wd-personalisierung" style="margin-top:-1rem;margin-bottom:1.4rem" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
<div class="ls-raster">
<div class="ls-feld">
<h3 data-i18n="fuer_wen">Für wen</h3>
<p data-i18n="vw_fuer">Selbstständige und kleine Betriebe, die Belege, Einnahmen und Ausgaben nicht mehr in Ordnern und Tabellen suchen wollen.</p>
</div>
<div class="ls-feld">
<h3 data-i18n="enthalten">Typisch enthalten</h3>
<ul class="wd-liste">
<li data-i18n="vw_1">Geschützter Login und Benutzerrollen</li>
<li data-i18n="vw_2">Belege, Einnahmen, Ausgaben und Dokumente an einem Ort</li>
<li data-i18n="vw_3">Filter, Suche, Auswertungen und Export</li>
<li data-i18n="vw_4">Nachvollziehbarer Änderungsverlauf mit Zeitstempel</li>
<li data-i18n="vw_5">Regelmäßige Sicherungen mit geprüfter Wiederherstellung</li>
</ul>
</div>
<div class="ls-feld">
<h3 data-i18n="beispiel">Konkretes Beispiel</h3>
<p data-i18n="vw_beispiel">Ein Portal, in dem du ein Foto eines Belegs hochlädst, Betrag und Kategorie einträgst und am Jahresende alles gefiltert exportierst — statt einen Schuhkarton zur Steuerberatung zu tragen.</p>
</div>
<div class="ls-feld">
<h3 data-i18n="grenze">Nicht enthalten</h3>
<p data-i18n="vw_grenze">Das ist ausdrücklich eine technische Organisationslösung. Keine Buchhaltung, keine Steuerberatung, keine Erstellung von Steuererklärungen — dafür braucht es weiterhin eine Fachperson.</p>
</div>
</div>
<!-- Gold: die einzige rechtlich heikle Stelle dieser Seite. -->
<div class="wd-hinweis" style="margin-top:1.3rem">
<p class="wd-hinweis-titel" data-i18n="abgrenzung_titel">Technische Abgrenzung</p>
<p data-i18n="abgrenzung_text">Buchhaltungs- und Steuerverwaltungsseiten sind ausschließlich technische Organisationslösungen. Diese Seite verspricht keine Buchhaltung, keine Steuerberatung und keine Erstellung von Steuererklärungen.</p>
</div>
<div class="wd-btn-reihe" style="margin-top:1.3rem">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html?paket=verwaltung" data-i18n="jetzt_anfragen">Dieses Paket anfragen</a>
</div>
</article>
<!-- ---------------- Betreuung ---------------- -->
<article class="wd-karte wd-karte--kappe ls-block wd-auf" id="betreuung">
<h2 data-i18n="bt_h2">Laufende Betreuung</h2>
<div class="ls-preiszeile">
<span class="ls-preis" data-i18n="betreuung_preis">ab 49 € / Monat</span>
</div>
<div class="ls-raster">
<div class="ls-feld">
<h3 data-i18n="fuer_wen">Für wen</h3>
<p data-i18n="bt_fuer">Alle, die nach der Übergabe nicht selbst an der Technik schrauben wollen — oder einfach wissen möchten, dass jemand hinschaut.</p>
</div>
<div class="ls-feld">
<h3 data-i18n="enthalten">Typisch enthalten</h3>
<ul class="wd-liste">
<li data-i18n="bt_1">Kleine Änderungen typischerweise in ca. 2–5 Arbeitstagen</li>
<li data-i18n="bt_2">Sicherheitsaktualisierungen und Überwachung der Erreichbarkeit</li>
<li data-i18n="bt_3">Regelmäßige Sicherungen, die auch wirklich zurückgespielt werden können</li>
<li data-i18n="bt_4">Umfang und Priorität nach gewähltem Paket</li>
</ul>
</div>
<div class="ls-feld" style="grid-column:1/-1">
<h3 data-i18n="grenze">Nicht enthalten</h3>
<p data-i18n="bt_grenze">Betreuung ist keine unbegrenzte Weiterentwicklung. Neue Funktionen oder ganze Unterseiten sind eigene Aufträge — der Aufwand wird vorher genannt, du entscheidest.</p>
</div>
</div>
<div class="wd-btn-reihe" style="margin-top:1.3rem">
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html?paket=betreuung" data-i18n="jetzt_anfragen">Dieses Paket anfragen</a>
</div>
</article>
</div>
</section>
<section class="wd-abschnitt wd-abschnitt--gehoben">
<div class="wd-container wd-container--schmal" style="text-align:center">
<h2 data-i18n="cta_h2">Nicht sicher, welches Paket passt?</h2>
<p class="wd-lead" data-i18n="cta_p">Beschreib einfach dein Vorhaben. Wenn ein kleineres Paket reicht, sage ich das — auch wenn das weniger Umsatz bedeutet.</p>
<div class="wd-btn-reihe" style="justify-content:center">
<a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="nav_anfrage">Projekt anfragen</a>
</div>
</div>
</section>
</main>
<div id="wd-fuss"></div>
<script src="/assets/js/i18n-wd-leistungen.js?v=20260822wd"></script>
<script src="/assets/js/wd-core.js?v=20260822wd"></script>
</body>
</html>