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]>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,202 @@
|
||||
<!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=20260822wd" />
|
||||
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd" />
|
||||
<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=20260822wd"></script>
|
||||
<script src="/assets/js/wd-core.js?v=20260822wd"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user