Files
dogfather-universe/webdesign/leistungen.html
T
DogFatherGitandClaude Opus 5 469a6c195f Portal: Aufgabenliste und Postfach fuer den Kunden
Schritt 4 von 4 -- damit sind beide Wuensche vom 22.08.2026 vollstaendig:
"wenn sie drauf druecken sollen sie auch sehen was ich schon gemacht habe
von dem was im plan war" und "die kunden sollen mir auch nachrichten
hinterlassen koennen".

AUFGABENLISTE IM PROJEKT

Bisher sah der Kunde nur die Phase ("Design . 3/7") -- eine Zahl ohne
Inhalt. Sie beantwortet die eigentliche Frage nicht: WAS ist denn fertig?

Die Liste steht GANZ OBEN, direkt nach dem Projektkopf, noch vor
Zahlungen und Dateien. Die sind wichtig, aber sie sind nicht der Grund
fuer den Klick.

Zwei Entscheidungen praegen die Ansicht:

1. Offene Kundenpunkte stehen in einem EIGENEN Kasten ganz oben ("Das
   brauche ich noch von dir"), nicht nur farblich markiert irgendwo
   mittendrin. Wer eine lange Liste sieht, liest sie als Bericht ueber
   fremde Arbeit und ueberliest seinen eigenen Teil -- genau daraus
   entstehen die meisten Verzoegerungen. Ist nichts offen, steht das
   auch da: "Von dir wird gerade nichts gebraucht." Eine gute Nachricht
   darf ausgesprochen werden.

2. Der Kunde hakt seine eigenen Punkte selbst ab. Nur diese haben einen
   Knopf; bei fremden Punkten ist das Zeichen reine Anzeige. Ein Knopf,
   der nichts tut, laesst die Seite kaputt wirken. Geprueft: 4 Knoepfe
   bei 2 offenen eigenen Punkten (sie erscheinen zweimal), 5 feste.

Grosse Zahl statt Prozent: "2 von 6 erledigt" ist greifbar, "33 %" ist
eine Rechnung, die niemand fuehlt. Der Balken traegt die vier
Prozessfarben -- dieselben wie auf der Ablaufseite und in der Verwaltung.

Der Ton ist bewusst gewaehlt. Der Kunde liest die Liste, wenn er unsicher
ist -- also im Zweifel schon angespannt. "Wir warten auf dich" waere
Druck, "Das brauche ich noch von dir" ist eine Bitte.

POSTFACH AUF DER UEBERSICHT

Bewusst auf der Uebersicht, nicht im Projekt: Wer kein Projekt hat -- oder
eine Frage, die zu keinem gehoert -- konnte vorher gar nicht schreiben und
musste zur E-Mail greifen. Damit war der Verlauf weg, sobald man ihn
brauchte.

Niedrigschwellig: kein Betreff, kein Pflichtfeld, der Projektbezug ist
freiwillig. Wer glaubt, eine Nachricht muesse eine "richtige" Anfrage
sein, schreibt gar nicht erst -- und genau die kurzen Fragen sollen hier
landen. Wird nachgeladen, damit die Uebersicht sofort dasteht.

Projekt- und Aufgabendaten werden gleichzeitig angefordert statt
nacheinander -- sonst waere die Wartezeit die Summe beider Anfragen. Die
Aufgabenliste darf dabei fehlschlagen, ohne die Seite mitzureissen: Wer
wegen einer leeren Liste seine Zahlungen nicht mehr saehe, waere
schlechter dran als vorher.

EIN SICHTBARER FEHLER GEFUNDEN

Auf dem Screenshot stand "Ideen & Aenderungswuensche". Ursache ist
eine Falle mit zwei Wegen: Texte ueber data-i18n landen als HTML in der
Seite, dort ist "&" richtig. Derselbe Text im JavaScript laeuft aber
durch die Absicherung und wird ein zweites Mal kodiert. Derselbe Baustein
ist also je nach Verwendungsort richtig oder falsch.

Das kann man nicht im Kopf behalten -- deshalb neu pruef-texte.mjs mit
ZWEI Pruefungen:

  Anzeige:   alle 11 Seiten x 5 Sprachen = 55 Kombinationen, sichtbarer
             Text darf keine Kodierungsreste enthalten.
  Quelltext: welcher Baustein mit "&" wird irgendwo abgesichert
             eingesetzt?

Beide sind noetig. Gegengeprueft: Die Anzeigepruefung allein haette den
Fehler NICHT gefunden, weil die Ideen-Karte erst nach einer Anmeldung
erscheint. Die Quelltextpruefung findet ihn ohne Anzeige.

Auch die Quelltextpruefung selbst wurde zweimal gegengeprueft: Zuerst
meldete sie zusaetzlich po_senden ("Senden", voellig harmlos) -- ihre
Blockerkennung lief bis zum naechsten Schluessel und schluckte dabei
einen Kommentar mit "&". Jetzt zaehlt sie geschweifte Klammern. Ein
Fehlalarm im Pruefwerkzeug ist fast so schaedlich wie ein uebersehener
Fehler: Man gewoehnt sich daran, ihn wegzusehen.

GEPRUEFT

32 Pruefungen im Portal (Computer und Handy), alle bestanden. Darunter:
114 Texte in allen fuenf Sprachen vollstaendig, Kundenpunkte stehen vor
der langen Liste, Aufgaben vor den Zahlungen, Abhaken meldet den
richtigen Punkt, alle Kaestchen mindestens 24 px, keine Fehler im
Protokoll. Dazu 55 Seiten-Sprach-Kombinationen ohne Kodierungsreste.

Ein Fehler im Test selbst gefunden und behoben: Die Adressabfrage prueft
jetzt den PFAD statt der ganzen Adresse. Der API-Server heisst
"postfach.dogfather-universe.com" -- ein includes("/postfach") traf den
HOSTNAMEN und damit jede Anfrage, auch die Uebersicht.

Versionsstempel und Cache-Name auf v5.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-23 10:46:09 +02:00

338 lines
19 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=20260823wd5" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd5" />
<style>
/* Sprungmarken.
Frueher eine waagerecht wischbare Leiste. Rueckmeldung 22.08.2026:
"ich will nicht dass man die hin und her schieben muss man soll die
alle sehen aber nicht schieben muessen" -- voellig richtig. Eine
Wischleiste verbirgt, DASS es noch mehr gibt: was rechts aus dem Bild
ragt, existiert fuer die meisten Menschen nicht. Dazu kommt ein
haesslicher Balken quer ueber die Seite.
Jetzt bricht die Leiste einfach um. Der Text in den Knoepfen darf
dabei mitbrechen (white-space: normal) -- sonst sprengt ein langer
Name wie "Buchhaltungs- & Steuerverwaltungsseiten" auf 320px die
Zeile und der waagerechte Ueberlauf waere durch die Hintertuer
zurueck. */
.ls-sprung {
display: flex; flex-wrap: wrap; gap: .5rem;
padding: .2rem 0 1rem;
}
.ls-sprung a {
flex: 0 1 auto;
padding: .55rem 1rem; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 12px; border: 1px solid var(--wd-rand);
font-size: .92rem; font-weight: 600; color: var(--wd-text-mid);
white-space: normal; text-align: center; line-height: 1.25;
}
.ls-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); }
/* Ab 700px alle nebeneinander in EINER Reihe.
Rueckmeldung 22.08.2026: "alle neben einander bitte". Vorher passten
nur vier in die Zeile und die fuenfte rutschte allein darunter — das
sieht aus wie ein Versehen, nicht wie eine Gestaltung.
"flex: 1 1 0" statt "auto": damit teilen sich alle fuenf den Platz zu
gleichen Teilen, unabhaengig von der Textlaenge. Mit "auto" waere
"Preise & Zahlung" schmal und "Inhalte & Zusammenarbeit" breit —
ungleiche Kacheln in einer Reihe, genau was hier nicht gewollt ist.
"min-width: 0" ist noetig, weil Flex-Elemente sonst nicht unter ihre
Inhaltsbreite schrumpfen und die Reihe doch wieder umbrechen wuerde.
Laengere Namen brechen dadurch innerhalb ihrer Kachel auf zwei
Zeilen; die Kacheln bleiben durch die Reihe trotzdem gleich hoch.
Unter 700px bleibt es beim Umbruch — fuenf Spalten waeren auf einem
Handy unlesbar schmal. */
@media (min-width: 700px) {
.ls-sprung a { flex: 1 1 0; min-width: 0; padding-left: .6rem; padding-right: .6rem; }
}
/* 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=20260823wd5"></script>
<script src="/assets/js/wd-core.js?v=20260823wd5"></script>
</body>
</html>