"Sieht gut aus" ist Geschmack und laesst sich nicht pruefen. Handwerkliche
Qualitaet laesst sich pruefen -- und bei einer WEBDESIGN-Seite ist sie
zugleich das Verkaufsargument: Wer selbst schludert, kann schlecht
Sorgfalt verkaufen.
Neues Werkzeug pruef-design.mjs misst 13 Seiten x 5 Sprachen auf
Handy-Breite gegen WCAG 2.2 AA -- denselben Standard, auf den auch das
Barrierefreiheitsstaerkungsgesetz verweist. Der Browser rechnet, es wird
nichts geschaetzt.
ERGEBNIS: 0 Befunde. Kontrast, Klickflaechen, Tastaturfokus,
Ueberschriftenstruktur, Bildalternativen, Feldbeschriftungen,
lang-Attribut, Schriftgroessen.
ECHTE BEFUNDE, DIE BEHOBEN WURDEN
1. 23 Schriftgroessen unter 12px (bis hinunter zu 10,9px), verteilt ueber
CSS und sieben Seiten. Betroffen waren durchweg gesperrte
Grossbuchstaben-Beschriftungen -- also genau die Textsorte, die klein
ohnehin am schlechtesten lesbar ist. Alle auf mindestens 12px, die
gesperrten auf 12,8px. Das ist zugleich die Dauervorgabe
"augenschonend" ernst genommen.
2. Ueberschriftensprung h2 -> h4 in der Fusszeile, auf ALLEN 13 Seiten in
allen 5 Sprachen (42 Stellen). Wer sich mit einem Screenreader durch
die Ueberschriften bewegt, hoert dadurch eine Gliederung, die es nicht
gibt, und vermutet uebersprungene Abschnitte. Jetzt h2 mit
Gestaltungsklasse: Die Ebene sagt etwas ueber die STRUKTUR, die
Groesse ueber die GEWICHTUNG -- zwei verschiedene Dinge.
3. code-Auszeichnung auf der Rechtsseite rutschte durch relative
Groessenangabe auf 11,2px. Jetzt mit Untergrenze abgesichert.
SECHS FEHLALARME IM WERKZEUG -- ALLE GEFUNDEN UND BESEITIGT
Der erste Lauf meldete 302 Fundstellen. Fast alle waren falsch. Haette
ich sie "repariert", haette ich funktionierende Gestaltung zerstoert.
Jeder Fehlalarm hatte eine eigene, nicht offensichtliche Ursache:
* Farbverlaeufe: getComputedStyle().backgroundColor liefert bei einer
reinen Verlaufsflaeche "rgba(0,0,0,0)". Die Suche lief an der hellen
Knopfflaeche VORBEI bis zum dunklen Seitengrund und verglich dunkle
Schrift mit dunklem Grund -- Ergebnis 1:1 fuer 60 einwandfreie
Knoepfe. Jetzt werden die Farbstopps ausgelesen und der
unguenstigste Fall gerechnet.
* MEHRERE Hintergrundebenen: Die Karten nutzen den bekannten Kniff
"Flaeche padding-box, Rahmenverlauf border-box". Der helle
Rahmenverlauf ist im Textbereich gar nicht sichtbar. Alle Ebenen
zusammenzurechnen ergab 820 Meldungen mit Werten wie "3,45:1" fuer
Text, der in Wahrheit ueber 7:1 liegt. CSS malt die ERSTE Ebene oben
-- nur die zaehlt. Das Trennen an Kommas muss dabei die Kommas
INNERHALB der Verlaufsklammern respektieren.
* Verlaufsschrift (background-clip:text): Dort ist die Schriftfarbe
durchsichtig und der Verlauf IST der Text. Farbe gegen Hintergrund zu
vergleichen ergibt zwangslaeufig 1:1.
* Verlaufsstopps mit wenig Deckkraft (9 % und 4 % Gold in den
Hinweiskaesten) wurden verworfen statt auf den Untergrund gerechnet.
Uebrig blieb "nicht messbar" fuer 72 Textstellen. Ein Pruefwerkzeug,
das bei allem passt, prueft nichts.
* Laufende Ueberblendungen: getComputedStyle liefert waehrend einer
Ueberblendung den ZWISCHENWERT. Nach blur() verblasst der Fokusring
ueber 0,16 s -- misst man sofort, sieht man ihn noch, und "vorher"
ist identisch mit "nachher". Das Codefeld der Verwaltung wurde
dadurch als "ohne sichtbaren Fokus" gemeldet. Nachgewiesen mit
el.matches(":focus") === false bei gleichzeitig sichtbarem Schatten.
Loesung: Ueberblendungen fuer die Messung abschalten.
* Ausgeblendete Abschnitte: Eine Ueberschrift in einem versteckten
Bereich hat selbst weiterhin display:block. Im Portal wurden dadurch
drei h1 gezaehlt, obwohl immer nur eine sichtbar ist. Jetzt
getClientRects().
Dazu zwei bekannte Muster, die das Werkzeug jetzt kennt: der Sprunglink
(absichtlich aus dem Bild geschoben) und die winzigen Auswahlfelder
hinter den Kacheln (die Kachel IST die Klickflaeche).
ALLE UEBRIGEN PRUEFUNGEN WEITERHIN GRUEN nach den Aenderungen:
Anfragedetail 20, Verwaltung 69, Portal 32, Widerruf 58, Textkodierung
55 Seiten-Sprach-Kombinationen.
Versionsstempel und Cache-Name auf v8.
Co-Authored-By: Claude Opus 5 <[email protected]>
338 lines
19 KiB
HTML
338 lines
19 KiB
HTML
<!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=20260823wd8" />
|
||
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
|
||
<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 & umfangreiche Website</a>
|
||
<a href="#verwaltung" data-i18n="vw_h2">Buchhaltungs- & 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 €</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 €</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 & umfangreiche Website</h2>
|
||
<div class="ls-preiszeile">
|
||
<span class="ls-preis"><span data-i18n="ab_preis">ab</span> 1.000 €</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 & 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- & Steuerverwaltungsseiten</h2>
|
||
<div class="ls-preiszeile">
|
||
<span class="ls-preis"><span data-i18n="ab_preis">ab</span> 1.500 €</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=20260823wd8"></script>
|
||
<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
|
||
</body>
|
||
</html>
|