DogFatherGitandClaude Opus 5
98fc04c666
Drei Server-Funktionen existierten seit Tagen und hatten KEINE Oberflaeche.
Erst im Vergleich "was kann der Server" gegen "was ruft die Seite auf"
ist es aufgefallen:
POST /admin/projekte/:id projektAendern
POST /admin/aenderungen/:id/beziffern
POST /admin/projekt-nachricht
Jede davon schliesst einen Kreis, der bisher offen war.
1. DIE SCHMERZHAFTESTE LUECKE: DER STAND
Der Kunde sieht in seinem Portal GANZ OBEN die Phasenleiste und den
"naechsten Schritt". Beides liess sich nirgends aendern. Ein Projekt blieb
also fuer immer im Briefing stehen, egal wie weit es wirklich war -- und
der prominenteste Text im ganzen Kundenportal war dauerhaft leer.
Jetzt: sieben Phasen als Knoepfe (plus Pausiert/Abgebrochen daneben, denn
das sind keine Phasen, sondern Zustaende), "wer ist am Zug", naechster
Schritt, Richttermin, Zahlungsstand, Portfolio-Freigabe.
Phase und "wer ist am Zug" speichern SOFORT ohne Speichern-Knopf: Es ist
ein Klick auf genau einen Wert, ein zweiter Klick waere Zeremonie. Die
Textfelder haben einen Knopf, weil man beim Tippen zwischendurch nicht
speichern will.
2. AENDERUNGSWUENSCHE
Der Kunde konnte Ideen einreichen, seit es das Portal gibt. Beziffern ging
serverseitig auch -- nur gab es keine Oberflaeche. Der Kreis war offen: Er
schickt etwas los und hoert nie wieder davon.
Jetzt stehen alle Wuensche im Projekt, offene mit Feldern fuer Preis,
Dauer und einer kurzen Erklaerung. Ohne Preis geht nichts raus (geprueft)
-- ohne Preis kann der Kunde nicht entscheiden, und ein "Angebot" ohne
Zahl ist keins.
3. NACHRICHTEN ZUM PROJEKT
Getrennt vom allgemeinen Postfach, weil sie zum Projekt gehoeren und im
Portal auch dort erscheinen. Sie hier nicht zu haben hiess: Der Kunde
schreibt im Projekt, und ich kann ihm nur woanders antworten.
AUFBAU
Neuer Endpunkt /admin/projekte/:id/alles liefert Projekt, Aufgaben,
Fortschritt, Aenderungswuensche und Nachrichten in EINER Antwort. Fuenf
Anfragen hintereinander wuerden die Ansicht sichtbar ruckelnd aufbauen.
Dieselbe Aufteilung wie in der Anfrageansicht -- links die Arbeit
(Aufgaben), rechts das Steuern. Wer zwischen beiden Ansichten wechselt,
muss nicht umdenken.
GEPRUEFT: 69 Pruefungen, Computer und Handy, alle bestanden.
Die neuen Pruefungen schauen nicht darauf, ob sich ein Knopf einfaerbt --
das beweist nichts. Sie schneiden mit, was die Seite TATSAECHLICH an den
Server schickt: {"status":"entwicklung"}, {"restBezahlt":true},
{"preisEuro":250,"dauer":"3 Tage"}. Und sie pruefen den Fall, in dem
nichts rausgehen darf: Ohne Preis bleibt die Mitschrift leer.
Ein Fehler im Test selbst behoben: Die Nachrichtenzaehlung war
document-weit und zaehlte die Nachrichten der geschlossenen Projektansicht
mit -- geschlossen heisst nicht aus dem Dokument entfernt. Jetzt auf den
Postfach-Verlauf eingegrenzt.
Versionsstempel und Cache-Name auf v6.
Co-Authored-By: Claude Opus 5 <[email protected]>
203 lines
12 KiB
HTML
203 lines
12 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>Preise & Zeit — Dogfather Webdesign</title>
|
||
<meta name="description" content="Einstiegspreise, Zeitrahmen, 30 % Anzahlung und was den Preis nach oben oder unten bewegt — offen aufgeschrieben." />
|
||
<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=20260823wd6" />
|
||
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd6" />
|
||
<style>
|
||
.pr-preis-gross { font-family: var(--font-head); font-weight: 800; color: var(--wd-blau); white-space: nowrap; }
|
||
|
||
/* Die Übersichtstabelle wird auf dem Handy zu Karten umgebaut, statt
|
||
waagerecht zu scrollen. Vier Spalten mit langen deutschen Texten sind
|
||
auf 390px auch mit Scrollbalken nicht lesbar — man verliert beim
|
||
Wischen sofort den Bezug zur Zeile. Deshalb: jede Zeile wird eine
|
||
eigene Karte, die Spaltenüberschrift steht per ::before davor. */
|
||
@media (max-width: 760px) {
|
||
.pr-tabelle, .pr-tabelle tbody, .pr-tabelle tr, .pr-tabelle td { display: block; width: 100%; }
|
||
.pr-tabelle { min-width: 0; }
|
||
.pr-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
|
||
.pr-tabelle tr {
|
||
border: 1px solid var(--wd-rand); border-radius: var(--wd-r);
|
||
margin-bottom: .8rem; padding: .3rem .2rem; background: rgba(16,26,41,.5);
|
||
}
|
||
.pr-tabelle td { border: none; padding: .45rem 1rem; }
|
||
.pr-tabelle td::before {
|
||
content: attr(data-titel);
|
||
display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
|
||
font-weight: 800; color: var(--wd-blau); margin-bottom: .1rem;
|
||
}
|
||
/* Die erste Zelle ist der Paketname — der braucht keine Beschriftung. */
|
||
.pr-tabelle td:first-child { padding-top: .8rem; }
|
||
.pr-tabelle td:first-child::before { display: none; }
|
||
.pr-tabelle td:first-child strong { font-size: 1.1rem; }
|
||
.pr-tabelle td:last-child { padding-bottom: .8rem; }
|
||
}
|
||
|
||
.pr-zahlung { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
|
||
@media (max-width: 980px) { .pr-zahlung { grid-template-columns: repeat(2, 1fr); } }
|
||
@media (max-width: 560px) { .pr-zahlung { grid-template-columns: 1fr; } }
|
||
</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="pr_eyebrow">Preise & Zeit</span>
|
||
<h1 data-i18n="pr_h1">Was es kostet und wie lange es dauert</h1>
|
||
<p class="wd-lead" style="max-width:72ch" data-i18n="pr_lead">Alle Werte sind transparente Einstiegspunkte. Personalisierung, Funktionsumfang, Materialien und zusätzliche Änderungswünsche können Preis und Dauer verändern.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ---------------- Übersicht ---------------- -->
|
||
<section class="wd-abschnitt" style="padding-top:0">
|
||
<div class="wd-container">
|
||
<h2 class="wd-auf" data-i18n="pr_tabelle_titel">Alles auf einen Blick</h2>
|
||
<div class="wd-tabelle-rahmen wd-auf" style="margin-top:1.4rem">
|
||
<table class="wd-tabelle pr-tabelle">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col" data-i18n="pr_sp_paket">Paket</th>
|
||
<th scope="col" data-i18n="pr_sp_preis">Einstiegspreis</th>
|
||
<th scope="col" data-i18n="pr_sp_dauer">Zeitrahmen</th>
|
||
<th scope="col" data-i18n="pr_sp_fuer">Gedacht für</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><strong data-i18n="pk_onepager_h3">Onepager</strong></td>
|
||
<td data-titel="Einstiegspreis" data-i18n-attr="data-titel:pr_sp_preis"><span class="pr-preis-gross">ab 300 €</span></td>
|
||
<td data-titel="Zeitrahmen" data-i18n-attr="data-titel:pr_sp_dauer"><span data-i18n="pk_onepager_dauer">ca. 5–10 Arbeitstage</span></td>
|
||
<td data-titel="Gedacht für" data-i18n-attr="data-titel:pr_sp_fuer"><span data-i18n="pr_kurz_onepager">Eine Person, ein Angebot, eine Aktion</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong data-i18n="pk_website_h3">Professionelle Website</strong></td>
|
||
<td data-titel="Einstiegspreis" data-i18n-attr="data-titel:pr_sp_preis"><span class="pr-preis-gross">ab 500 €</span></td>
|
||
<td data-titel="Zeitrahmen" data-i18n-attr="data-titel:pr_sp_dauer"><span data-i18n="pk_website_dauer">ca. 2–4 Wochen</span></td>
|
||
<td data-titel="Gedacht für" data-i18n-attr="data-titel:pr_sp_fuer"><span data-i18n="pr_kurz_website">Firmen, Teams, mehrere Themen</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong data-i18n="pk_shop_h3">Shop & umfangreiche Website</strong></td>
|
||
<td data-titel="Einstiegspreis" data-i18n-attr="data-titel:pr_sp_preis"><span class="pr-preis-gross">ab 1.000 €</span></td>
|
||
<td data-titel="Zeitrahmen" data-i18n-attr="data-titel:pr_sp_dauer"><span data-i18n="pk_shop_dauer">ca. 4–8 Wochen</span></td>
|
||
<td data-titel="Gedacht für" data-i18n-attr="data-titel:pr_sp_fuer"><span data-i18n="pr_kurz_shop">Wer wirklich online verkauft</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong data-i18n="pk_verwaltung_h3">Buchhaltungs- & Steuerverwaltungsseiten</strong></td>
|
||
<td data-titel="Einstiegspreis" data-i18n-attr="data-titel:pr_sp_preis"><span class="pr-preis-gross">ab 1.500 €</span></td>
|
||
<td data-titel="Zeitrahmen" data-i18n-attr="data-titel:pr_sp_dauer"><span data-i18n="pk_verwaltung_dauer">ca. 6–12 Wochen</span></td>
|
||
<td data-titel="Gedacht für" data-i18n-attr="data-titel:pr_sp_fuer"><span data-i18n="pr_kurz_verwaltung">Belege und Zahlen organisieren</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td><strong data-i18n="betreuung_h3">Laufende Betreuung</strong></td>
|
||
<td data-titel="Einstiegspreis" data-i18n-attr="data-titel:pr_sp_preis"><span class="pr-preis-gross" data-i18n="betreuung_preis">ab 49 € / Monat</span></td>
|
||
<td data-titel="Zeitrahmen" data-i18n-attr="data-titel:pr_sp_dauer">—</td>
|
||
<td data-titel="Gedacht für" data-i18n-attr="data-titel:pr_sp_fuer"><span data-i18n="pr_kurz_betreuung">Nach der Übergabe weiterlaufen lassen</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<p class="wd-personalisierung wd-auf" style="margin-top:.9rem" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ---------------- Was den Preis bewegt ---------------- -->
|
||
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
||
<div class="wd-container">
|
||
<h2 class="wd-auf" data-i18n="pr_was_h2">Was den Preis bewegt</h2>
|
||
<div class="wd-grid wd-grid--2" style="margin-top:1.8rem">
|
||
<div class="wd-karte wd-karte--lila wd-karte--kappe wd-auf">
|
||
<h3 data-i18n="pr_hoch_h3">Macht es teurer und länger</h3>
|
||
<ul class="wd-liste">
|
||
<li data-i18n="pr_hoch_1">Viele Unterseiten oder viele Produkte</li>
|
||
<li data-i18n="pr_hoch_2">Zusätzliche Sprachen</li>
|
||
<li data-i18n="pr_hoch_3">Texte und Bilder müssen erst erstellt werden</li>
|
||
<li data-i18n="pr_hoch_4">Anbindung an fremde Systeme (Kasse, Kalender, Warenwirtschaft)</li>
|
||
<li data-i18n="pr_hoch_5">Mehr Feedbackrunden als vereinbart</li>
|
||
</ul>
|
||
</div>
|
||
<div class="wd-karte wd-karte--kappe wd-auf">
|
||
<h3 data-i18n="pr_runter_h3">Macht es günstiger und schneller</h3>
|
||
<ul class="wd-liste">
|
||
<li data-i18n="pr_runter_1">Texte, Logo und Bilder liegen fertig vor</li>
|
||
<li data-i18n="pr_runter_2">Klare Vorstellung vom Ziel der Seite</li>
|
||
<li data-i18n="pr_runter_3">Eine Person entscheidet, nicht ein Gremium</li>
|
||
<li data-i18n="pr_runter_4">Rückmeldungen gebündelt statt tröpfchenweise</li>
|
||
<li data-i18n="pr_runter_5">Bestehende Domain und bestehendes Hosting</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ---------------- Zahlung ---------------- -->
|
||
<section class="wd-abschnitt">
|
||
<div class="wd-container">
|
||
<h2 class="wd-auf" data-i18n="pr_zahlung_h2">Wie bezahlt wird</h2>
|
||
|
||
<div class="pr-zahlung" style="margin-top:1.8rem">
|
||
<div class="wd-karte wd-karte--kappe wd-auf">
|
||
<h3 data-i18n="pr_z1_h3">1. Angebot</h3>
|
||
<p data-i18n="pr_z1_p">Nach dem Briefing bekommst du Preis, Umfang und Zeitrahmen schriftlich. Bis dahin entstehen dir keine Kosten.</p>
|
||
</div>
|
||
<div class="wd-karte wd-karte--kappe wd-auf">
|
||
<h3 data-i18n="pr_z2_h3">2. Anzahlung 30 %</h3>
|
||
<p data-i18n="pr_z2_p">Mit der Annahme des Angebots und dem Eingang der Anzahlung wird dein Zeitfenster fest reserviert. Erst dann beginnt die Arbeit.</p>
|
||
</div>
|
||
<div class="wd-karte wd-karte--kappe wd-auf">
|
||
<h3 data-i18n="pr_z3_h3">3. Restbetrag</h3>
|
||
<p data-i18n="pr_z3_p">Der Rest wird nach deiner Abnahme fällig, vor der Veröffentlichung. Die Nutzungsrechte gehen mit der vollständigen Bezahlung an dich über.</p>
|
||
</div>
|
||
<div class="wd-karte wd-karte--lila wd-karte--kappe wd-auf">
|
||
<h3 data-i18n="pr_z4_h3">Betreuung</h3>
|
||
<p data-i18n="pr_z4_p">Läuft monatlich und ist jederzeit zum Monatsende kündbar. Keine Mindestlaufzeit, keine automatische Verlängerung um ein ganzes Jahr.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gold: Zahlungsinformation — genau der vorgesehene Zweck. -->
|
||
<div class="wd-hinweis wd-auf" style="margin-top:1.5rem">
|
||
<p class="wd-hinweis-titel" data-i18n="anzahlung_titel">Wichtig: 30 % Anzahlung</p>
|
||
<p data-i18n="anzahlung_text">Der Projektstart wird nach Annahme des schriftlichen Angebots und Eingang einer Anzahlung von 30 % des vereinbarten Gesamtpreises reserviert.</p>
|
||
</div>
|
||
|
||
<div class="wd-hinweis wd-auf" style="margin-top:1rem">
|
||
<p class="wd-hinweis-titel" data-i18n="pr_keine_zusage_titel">Keine automatische Preiszusage</p>
|
||
<p data-i18n="pr_keine_zusage_text">Die Angaben auf dieser Seite sind Richtwerte, kein Vertrag. Auch das Anfrageformular erzeugt keine verbindliche Zusage. Der Endpreis entsteht ausschließlich durch ein schriftliches Angebot nach Prüfung des tatsächlichen Umfangs.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
||
<div class="wd-container wd-container--schmal" style="text-align:center">
|
||
<h2 data-i18n="pr_cta_h2">Passt das zu deinem Budget?</h2>
|
||
<p class="wd-lead" data-i18n="pr_cta_p">Sag im Formular einfach, welcher Rahmen realistisch ist. Wenn es nicht passt, sage ich das offen — statt ein Angebot zu schreiben, das nachher niemand bezahlen will.</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>
|
||
<a class="wd-btn wd-btn--zweit" href="/webdesign/leistungen.html" data-i18n="nav_leistungen">Leistungen</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<div id="wd-fuss"></div>
|
||
|
||
<script src="/assets/js/i18n-wd-preise.js?v=20260823wd6"></script>
|
||
<script src="/assets/js/wd-core.js?v=20260823wd6"></script>
|
||
</body>
|
||
</html>
|