DogFatherGitandClaude Opus 5
d870a9c1d7
Filipe: "webhook id faengt bei mir nicht mit w an und wo finde ich plan fuer betreung" Er hat recht, ich hatte unrecht. An der Quelle nachgeprueft: Webhook-ID: 0NH55953DH663215D -- OHNE Vorsilbe, ~17 Zeichen Ereignis-ID: WH-3F562076HD293871E-... -- DIE beginnt mit WH- Meine Anleitung und der Hinweistext im Formular behaupteten beide "beginnt mit WH-". Wer sich daran haelt, sucht an der falschen Stelle oder traegt eine Ereignis-Kennung ein -- und die Signaturpruefung scheitert dann bei der ersten echten Zahlung, mit einer Meldung, die nicht auf die Ursache zeigt. Beide Stellen berichtigt, in der Anleitung mit ausdruecklichem Hinweis, dass dort vorher etwas Falsches stand. Wer sie schon gelesen hat, soll den Widerspruch erklaert bekommen und nicht stillschweigend eine andere Fassung vorfinden. ABO-PLAN: Der Grund fuer die Frage ist ein echter Stolperstein -- Abo-Plaene werden NICHT im Entwicklerbereich angelegt, sondern im normalen Geschaeftskonto. Unter developer.paypal.com sucht man vergeblich. Jetzt mit direkter Adresse (paypal.com/billing/plans), dem Weg ueber das Menue und dem Schritt, den man am ehesten vergisst: den Plan nach dem Speichern auch AKTIVIEREN. Ein gespeicherter, aber nicht aktivierter Plan sieht fertig aus und funktioniert nicht. Ausserdem klargestellt, dass dieser ganze Schritt entfaellt, wenn kein monatliches Abo verkauft wird -- Anzahlung und Restbetrag laufen ohne. Versionsstempel und Cache auf v15. 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=20260823wd15" />
|
||
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd15" />
|
||
<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: rgb(var(--wd-glas-rgb) / .5);
|
||
}
|
||
.pr-tabelle td { border: none; padding: .45rem 1rem; }
|
||
.pr-tabelle td::before {
|
||
content: attr(data-titel);
|
||
display: block; font-size: 0.75rem; 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=20260823wd15"></script>
|
||
<script src="/assets/js/wd-core.js?v=20260823wd15"></script>
|
||
</body>
|
||
</html>
|