DogFatherGitandClaude Opus 5
8ace955740
Gemeldet 22.08.2026 mit Bildschirmfoto: "immer noch so" -- das Logo im Marken-Intro stand weiterhin hochkant gestreckt da, obwohl die Korrektur (height:auto gegen die height-Attribute) laengst live war. Ursache war NICHT die Korrektur, sondern mein eigener Service Worker. Er lief fuer /assets/ als "stale-while-revalidate": die gespeicherte Fassung geht sofort raus, im Hintergrund wird eine frische geholt. Das ist schnell -- bedeutet aber, dass jede Aenderung an CSS oder JavaScript beim ersten Aufruf unsichtbar bleibt und erst beim zweiten wirkt. Ein behobener Fehler sieht dadurch aus wie ein nicht behobener. Die unangenehmste Sorte. Nachgemessen ist das Logo jetzt 160x161px bei einem natuerlichen Verhaeltnis von 472x476 -- also unverzerrt. Vorher erzwang das Attribut height="476" bei 160px Breite ein Verhaeltnis von 0,34 statt 0,99, genau das lange Gesicht auf dem Bildschirmfoto. Behoben: - Stilvorlagen und Skripte laufen jetzt "Netz zuerst", Zwischenspeicher nur als Notfallnetz. Richtigkeit vor Millisekunden. - Bilder und Symbole bleiben beim schnellen Weg -- die aendern sich praktisch nie und bekaemen sonst einen neuen Dateinamen. - CACHE_NAME auf v2 gesetzt, damit der alte Speicher beim naechsten Start vollstaendig weggeworfen wird. - Versionsnummer an allen CSS/JS-Verweisen hochgesetzt, damit es sich auch ohne Service Worker sofort selbst heilt. Ausserdem: Woerterbuch fuer das Anfrageformular, 101 Textbausteine in fuenf Sprachen (vier Schritte, Zusammenfassung, Fehlermeldungen). 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=20260822wd2" />
|
||
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
|
||
<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=20260822wd2"></script>
|
||
<script src="/assets/js/wd-core.js?v=20260822wd2"></script>
|
||
</body>
|
||
</html>
|