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]>
481 lines
28 KiB
HTML
481 lines
28 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>Dogfather Webdesign — individuelle Webseiten, persönlich umgesetzt</title>
|
||
<meta name="description" content="Individuell gebaute Webseiten statt Baukasten: Onepager ab 300 €, professionelle Websites ab 500 €, Shops ab 1.000 €. Klare Preise, klare Zeitrahmen, eine feste Ansprechperson." />
|
||
<meta name="robots" content="noindex, nofollow, noarchive" />
|
||
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
|
||
<meta name="theme-color" content="#05070b" />
|
||
<!-- Als App installierbar auf Handy und Computer. iOS ignoriert das
|
||
Manifest für das Startbildschirm-Symbol vollständig und nimmt NUR
|
||
apple-touch-icon — deshalb beides. -->
|
||
<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>
|
||
/* ---------- Nur auf der Startseite gebraucht ---------- */
|
||
|
||
/* Marken-Intro nach erfolgreichem Zugang (Masterplan S.3, Schritt 02).
|
||
Läuft bewusst NUR EINMAL pro Browser-Sitzung und lässt sich jederzeit
|
||
wegklicken — ein Vorspann, den man bei jedem Seitenaufruf wieder sieht,
|
||
wird nach dem zweiten Mal zur Belastung. */
|
||
.wd-intro {
|
||
position: fixed; inset: 0; z-index: 999;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
gap: .3rem; text-align: center;
|
||
background: radial-gradient(ellipse at 50% 40%, #0d1826 0%, #05070b 68%);
|
||
animation: wd-intro-weg .7s ease forwards 2.6s;
|
||
}
|
||
.wd-intro[hidden] { display: none; }
|
||
.wd-intro-logo { width: clamp(110px, 20vw, 160px); animation: wd-intro-auf .9s cubic-bezier(.22,1,.36,1) both; }
|
||
.wd-intro-gruss {
|
||
font-family: var(--font-head); font-weight: 800;
|
||
font-size: clamp(1.5rem, 4.5vw, 2.4rem); margin: 1rem 0 0; color: var(--wd-text);
|
||
animation: wd-intro-auf .9s cubic-bezier(.22,1,.36,1) both .25s;
|
||
}
|
||
.wd-intro-unter {
|
||
font-size: .84rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
|
||
color: var(--wd-blau); margin: .3rem 0 0;
|
||
animation: wd-intro-auf .9s cubic-bezier(.22,1,.36,1) both .45s;
|
||
}
|
||
.wd-intro-skip {
|
||
position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
|
||
background: none; border: 1px solid var(--wd-rand); color: var(--wd-text-soft);
|
||
border-radius: 999px; padding: .55rem 1.2rem; min-height: 44px; cursor: pointer; font-size: .88rem;
|
||
}
|
||
.wd-intro-skip:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); }
|
||
@keyframes wd-intro-auf { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
|
||
@keyframes wd-intro-weg { to { opacity: 0; visibility: hidden; } }
|
||
/* Bei Bewegungsreduktion gar kein Vorspann — er ist reine Inszenierung
|
||
und trägt keine Information, die man sonst verpassen würde. */
|
||
@media (prefers-reduced-motion: reduce) { .wd-intro { display: none !important; } }
|
||
|
||
/* Projektkarte */
|
||
.wd-projekt { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
|
||
.wd-projekt-bild {
|
||
width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
|
||
border-bottom: 1px solid var(--wd-rand);
|
||
}
|
||
.wd-projekt-text { padding: clamp(1.2rem, 2.4vw, 1.7rem); display: flex; flex-direction: column; flex: 1; }
|
||
.wd-projekt-text h3 { margin-bottom: .3em; }
|
||
.wd-projekt-zeile { margin: .9rem 0 0; }
|
||
.wd-projekt-zeile dt {
|
||
font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
|
||
font-weight: 800; color: var(--wd-blau); margin-bottom: .15rem;
|
||
}
|
||
.wd-projekt-zeile dd { margin: 0 0 .8rem; color: var(--wd-text-mid); font-size: .98rem; }
|
||
.wd-projekt-text .wd-btn { margin-top: auto; align-self: flex-start; }
|
||
|
||
/* Foto-Block "Warum Dogfather" */
|
||
.wd-portrait-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
|
||
@media (max-width: 820px) { .wd-portrait-grid { grid-template-columns: 1fr; } }
|
||
.wd-portrait {
|
||
width: 100%; max-width: 380px; border-radius: var(--wd-r-gross);
|
||
aspect-ratio: 4 / 5; object-fit: cover;
|
||
border: 1px solid var(--wd-rand-stark);
|
||
box-shadow: var(--wd-schatten-tief);
|
||
}
|
||
|
||
/* Abschluss-CTA */
|
||
.wd-cta-flaeche {
|
||
text-align: center; border-radius: var(--wd-r-gross);
|
||
padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.2rem, 4vw, 3rem);
|
||
background:
|
||
linear-gradient(180deg, rgba(20,32,50,.8), rgba(9,15,26,.9)) padding-box,
|
||
linear-gradient(120deg, rgba(127,208,232,.5), rgba(183,157,255,.4)) border-box;
|
||
border: 1px solid transparent;
|
||
box-shadow: var(--wd-schatten-tief);
|
||
}
|
||
.wd-cta-flaeche p { max-width: 60ch; margin-left: auto; margin-right: auto; }
|
||
.wd-cta-flaeche .wd-btn-reihe { justify-content: center; }
|
||
</style>
|
||
</head>
|
||
<body class="wd">
|
||
|
||
<!-- Marken-Intro: steht bewusst VOR allem anderen und startet versteckt.
|
||
Das Skript ganz unten blendet es nur ein, wenn man in dieser
|
||
Browser-Sitzung gerade erst durch die Zugangswand gekommen ist. -->
|
||
<div class="wd-intro" id="wd-intro" hidden>
|
||
<img class="wd-intro-logo" src="/assets/img/logo-dogfather-transparent.png" alt="" width="472" height="476" />
|
||
<p class="wd-intro-gruss" id="wd-intro-gruss">Willkommen</p>
|
||
<p class="wd-intro-unter" data-i18n="intro_unter">Dogfather Webdesign — Vorabversion</p>
|
||
<button type="button" class="wd-intro-skip" id="wd-intro-skip" data-i18n="intro_ueberspringen">Überspringen</button>
|
||
</div>
|
||
|
||
<div id="wd-kopf"></div>
|
||
|
||
<main id="wd-inhalt">
|
||
|
||
<!-- ================= 01 HERO =================
|
||
Hero-Regel (Masterplan S.7): ein starkes Versprechen, ein kurzer
|
||
Nutzen, EINE eindeutige Aktion — ohne Scrollen sichtbar. -->
|
||
<section class="wd-hero">
|
||
<div class="wd-container">
|
||
<div class="wd-hero-inhalt">
|
||
<span class="wd-eyebrow" data-i18n="hero_eyebrow">Dogfather Webdesign</span>
|
||
<h1 data-i18n="hero_h1">Deine Webseite soll nicht mithalten.<br /><span class="wd-hero-glanz">Sie soll auffallen.</span></h1>
|
||
<p class="wd-lead" data-i18n="hero_text">Individuell gebaut statt aus dem Baukasten. Du sprichst von der ersten Idee bis zur fertigen Seite mit einer Person — und weißt vorher, was es kostet und wie lange es dauert.</p>
|
||
<div class="wd-btn-reihe">
|
||
<a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="hero_cta">Projekt anfragen</a>
|
||
<a class="wd-btn wd-btn--zweit" href="/webdesign/portfolio.html" data-i18n="hero_cta2">Beispiele ansehen</a>
|
||
</div>
|
||
<div class="wd-hero-belege">
|
||
<span class="wd-hero-beleg" data-i18n="hero_beleg1">Ab 300 €</span>
|
||
<span class="wd-hero-beleg" data-i18n="hero_beleg2">Erste Seiten in 5–10 Arbeitstagen</span>
|
||
<span class="wd-hero-beleg" data-i18n="hero_beleg3">Eine feste Ansprechperson</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= 02 VERTRAUEN ================= -->
|
||
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
||
<div class="wd-container">
|
||
<h2 class="wd-auf" data-i18n="vt_h2">Warum das hier anders läuft</h2>
|
||
<div class="wd-grid wd-grid--4" style="margin-top:2rem">
|
||
<div class="wd-karte wd-karte--kappe wd-auf">
|
||
<h3 data-i18n="vt_1_h3">Individuell</h3>
|
||
<p data-i18n="vt_1_p">Kein fertiges Muster mit ausgetauschtem Logo. Aufbau, Farben und Texte entstehen für dein Vorhaben.</p>
|
||
</div>
|
||
<div class="wd-karte wd-karte--lila wd-karte--kappe wd-auf">
|
||
<h3 data-i18n="vt_2_h3">Persönlich</h3>
|
||
<p data-i18n="vt_2_p">Du hast eine Ansprechperson — keine Ticketnummer und keine wechselnden Zuständigkeiten.</p>
|
||
</div>
|
||
<div class="wd-karte wd-karte--kappe wd-auf">
|
||
<h3 data-i18n="vt_3_h3">Auf jedem Gerät</h3>
|
||
<p data-i18n="vt_3_p">Handy zuerst geprüft, dann Tablet und Computer. Nichts wird abgeschnitten, nichts ist zu klein zum Antippen.</p>
|
||
</div>
|
||
<div class="wd-karte wd-karte--lila wd-karte--kappe wd-auf">
|
||
<h3 data-i18n="vt_4_h3">Klare Preise</h3>
|
||
<p data-i18n="vt_4_p">Einstiegspreise und Zeitrahmen stehen offen auf der Seite. Der Endpreis kommt schriftlich, bevor gearbeitet wird.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= 03 LEISTUNGSKARTEN ================= -->
|
||
<section class="wd-abschnitt">
|
||
<div class="wd-container">
|
||
<span class="wd-eyebrow" data-i18n="ls_eyebrow">Leistungen</span>
|
||
<h2 class="wd-auf" data-i18n="ls_h2">Vier Wege zu deiner Seite</h2>
|
||
<p class="wd-lead wd-auf" style="max-width:70ch" data-i18n="ls_text">Alle Preise sind Einstiegspunkte. Umfang, Funktionen und Personalisierung können Preis und Dauer verändern — was bei dir gilt, steht im schriftlichen Angebot.</p>
|
||
|
||
<div class="wd-grid wd-grid--2" style="margin-top:2.2rem">
|
||
|
||
<div class="wd-karte wd-karte--kappe wd-preis-karte wd-auf">
|
||
<h3 data-i18n="pk_onepager_h3">Onepager</h3>
|
||
<p class="wd-preis"><span data-i18n="ab_preis">ab</span> 300 €</p>
|
||
<div class="wd-preis-zeile">
|
||
<span class="wd-preis-label" data-i18n="dauer">Dauer</span>
|
||
<span class="wd-preis-wert" data-i18n="pk_onepager_dauer">ca. 5–10 Arbeitstage</span>
|
||
</div>
|
||
<p data-i18n="pk_onepager_p">Eine starke einzelne Seite für Person, Angebot, Aktion oder Kampagne.</p>
|
||
<p class="wd-personalisierung" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
|
||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/leistungen.html#onepager" data-i18n="pk_details">Was genau enthalten ist</a>
|
||
</div>
|
||
|
||
<div class="wd-karte wd-karte--lila wd-karte--kappe wd-preis-karte wd-auf">
|
||
<h3 data-i18n="pk_website_h3">Professionelle Website</h3>
|
||
<p class="wd-preis"><span data-i18n="ab_preis">ab</span> 500 €</p>
|
||
<div class="wd-preis-zeile">
|
||
<span class="wd-preis-label" data-i18n="dauer">Dauer</span>
|
||
<span class="wd-preis-wert" data-i18n="pk_website_dauer">ca. 2–4 Wochen</span>
|
||
</div>
|
||
<p data-i18n="pk_website_p">Mehrere Unterseiten für Unternehmen, Creator, Teams oder Projekte.</p>
|
||
<p class="wd-personalisierung" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
|
||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/leistungen.html#website" data-i18n="pk_details">Was genau enthalten ist</a>
|
||
</div>
|
||
|
||
<div class="wd-karte wd-karte--kappe wd-preis-karte wd-auf">
|
||
<h3 data-i18n="pk_shop_h3">Shop & umfangreiche Website</h3>
|
||
<p class="wd-preis"><span data-i18n="ab_preis">ab</span> 1.000 €</p>
|
||
<div class="wd-preis-zeile">
|
||
<span class="wd-preis-label" data-i18n="dauer">Dauer</span>
|
||
<span class="wd-preis-wert" data-i18n="pk_shop_dauer">ca. 4–8 Wochen</span>
|
||
</div>
|
||
<p data-i18n="pk_shop_p">Produktverkauf, Nutzerbereiche und umfangreiche Funktionen.</p>
|
||
<p class="wd-personalisierung" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
|
||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/leistungen.html#shop" data-i18n="pk_details">Was genau enthalten ist</a>
|
||
</div>
|
||
|
||
<div class="wd-karte wd-karte--lila wd-karte--kappe wd-preis-karte wd-auf">
|
||
<h3 data-i18n="pk_verwaltung_h3">Buchhaltungs- & Steuerverwaltungsseiten</h3>
|
||
<p class="wd-preis"><span data-i18n="ab_preis">ab</span> 1.500 €</p>
|
||
<div class="wd-preis-zeile">
|
||
<span class="wd-preis-label" data-i18n="dauer">Dauer</span>
|
||
<span class="wd-preis-wert" data-i18n="pk_verwaltung_dauer">ca. 6–12 Wochen</span>
|
||
</div>
|
||
<p data-i18n="pk_verwaltung_p">Technisches Portal für Belege, Einnahmen, Ausgaben und Dokumente.</p>
|
||
<p class="wd-personalisierung" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
|
||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/leistungen.html#verwaltung" data-i18n="pk_details">Was genau enthalten ist</a>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="wd-grid wd-grid--2" style="margin-top:1.5rem">
|
||
<div class="wd-karte wd-karte--lila wd-karte--kappe wd-preis-karte wd-auf">
|
||
<h3 data-i18n="betreuung_h3">Laufende Betreuung</h3>
|
||
<p class="wd-preis" data-i18n="betreuung_preis">ab 49 € / Monat</p>
|
||
<p data-i18n="betreuung_p">Kleine Änderungen werden typischerweise innerhalb von ca. 2–5 Arbeitstagen bearbeitet. Umfang und Priorität richten sich nach dem gewählten Paket.</p>
|
||
</div>
|
||
<!-- Gold = wichtiger Hinweis / Zahlungsinformation. Bewusst die
|
||
einzige goldene Fläche auf dieser Seite. -->
|
||
<div class="wd-hinweis wd-auf">
|
||
<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>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= 04 AUSGEWÄHLTE PROJEKTE ================= -->
|
||
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
||
<div class="wd-container">
|
||
<span class="wd-eyebrow wd-eyebrow--lila" data-i18n="pf_eyebrow">Ausgewählte Projekte</span>
|
||
<h2 class="wd-auf" data-i18n="pf_h2">Zwei Seiten, die wirklich laufen</h2>
|
||
<p class="wd-lead wd-auf" style="max-width:70ch" data-i18n="pf_text">Keine erfundenen Beispiele und keine Bewertungen, die es nie gab. Beides sind echte, öffentlich erreichbare Seiten mit allem, was dahintersteckt.</p>
|
||
|
||
<div class="wd-grid wd-grid--2" style="margin-top:2.2rem">
|
||
|
||
<article class="wd-karte wd-projekt wd-auf">
|
||
<img class="wd-projekt-bild" src="/assets/img/wd-projekt-universe.jpg"
|
||
alt="Startseite von dogfather-universe.com" width="1200" height="750" loading="lazy" decoding="async"
|
||
data-i18n-attr="alt:pf_universe_alt" />
|
||
<div class="wd-projekt-text">
|
||
<h3 data-i18n="pf_universe_h3">Dogfather Universe</h3>
|
||
<p data-i18n="pf_universe_p">Content- und Community-Plattform mit fünf Sprachen, Teamseiten, Streamplan, Bewerbungssystem, Supporter-Abo und eigenem Verwaltungsbereich.</p>
|
||
<dl class="wd-projekt-zeile">
|
||
<dt data-i18n="pf_aufgabe">Aufgabe</dt>
|
||
<dd data-i18n="pf_universe_aufgabe">Drei getrennte Welten unter ein Dach bringen, ohne dass es unübersichtlich wird.</dd>
|
||
<dt data-i18n="pf_ergebnis">Ergebnis</dt>
|
||
<dd data-i18n="pf_universe_ergebnis">Öffentlich seit August 2026, läuft auf einem eigenen Server, inhaltlich komplett selbst pflegbar.</dd>
|
||
</dl>
|
||
<div class="wd-tags" style="margin-bottom:1.1rem">
|
||
<span class="wd-tag" data-i18n="pf_tag_mehrsprachig">5 Sprachen</span>
|
||
<span class="wd-tag" data-i18n="pf_tag_verwaltung">Eigene Verwaltung</span>
|
||
<span class="wd-tag" data-i18n="pf_tag_abo">Abo & Zahlung</span>
|
||
</div>
|
||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://dogfather-universe.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
|
||
</div>
|
||
</article>
|
||
|
||
<!-- Zweites Projekt. Das Vorschaubild ist ein ECHTER Screenshot der
|
||
laufenden Seite (22.08.2026), kein Mockup. Der interne
|
||
Hinweisbalken ganz oben wurde bewusst weggeschnitten — er
|
||
gehört nicht in ein Portfolio. -->
|
||
<article class="wd-karte wd-karte--lila wd-projekt wd-auf">
|
||
<img class="wd-projekt-bild" src="/assets/img/wd-projekt-vandiy.jpg"
|
||
alt="Startseite von vans-diy-bastelbedarf.com" width="1200" height="696" loading="lazy" decoding="async"
|
||
data-i18n-attr="alt:pf_shop_alt" />
|
||
<div class="wd-projekt-text">
|
||
<h3 data-i18n="pf_shop_h3">Van's DIY & Bastelbedarf</h3>
|
||
<p data-i18n="pf_shop_p">Vollständiger Onlineshop mit Produktverwaltung, Warenkorb, Gutscheincodes, Versandabläufen und einem Adminbereich, in dem Artikel ohne Technikkenntnisse gepflegt werden.</p>
|
||
<dl class="wd-projekt-zeile">
|
||
<dt data-i18n="pf_aufgabe">Aufgabe</dt>
|
||
<dd data-i18n="pf_shop_aufgabe">Ein Shop, den die Inhaberin komplett selbst befüllen kann — ohne Schulung und ohne Angst, etwas kaputtzumachen.</dd>
|
||
<dt data-i18n="pf_ergebnis">Ergebnis</dt>
|
||
<dd data-i18n="pf_shop_ergebnis">Läuft auf eigener Domain und eigenem Server; Artikelpflege passiert selbstständig im Adminbereich.</dd>
|
||
</dl>
|
||
<div class="wd-tags" style="margin-bottom:1.1rem">
|
||
<span class="wd-tag wd-tag--lila" data-i18n="pf_tag_shop">Shop & Kasse</span>
|
||
<span class="wd-tag wd-tag--lila" data-i18n="pf_tag_admin">Selbstpflege</span>
|
||
<span class="wd-tag wd-tag--lila" data-i18n="pf_tag_gutschein">Gutscheincodes</span>
|
||
</div>
|
||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="https://vans-diy-bastelbedarf.com/" target="_blank" rel="noopener" data-i18n="pf_ansehen">Live ansehen</a>
|
||
</div>
|
||
</article>
|
||
|
||
</div>
|
||
|
||
<div class="wd-btn-reihe" style="margin-top:1.6rem">
|
||
<a class="wd-btn wd-btn--still" href="/webdesign/portfolio.html" data-i18n="pf_alle">Alle Projekte ansehen</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= 05 SO LÄUFT ES AB ================= -->
|
||
<section class="wd-abschnitt">
|
||
<div class="wd-container wd-container--schmal">
|
||
<span class="wd-eyebrow" data-i18n="ab_eyebrow">So läuft es ab</span>
|
||
<h2 class="wd-auf" data-i18n="ab_h2">Von der Anfrage bis zur Übergabe</h2>
|
||
|
||
<div class="wd-schritte" style="margin-top:2rem">
|
||
<div class="wd-schritt wd-auf">
|
||
<span class="wd-schritt-nr" aria-hidden="true">01</span>
|
||
<div><h3 data-i18n="ab_1_h3">Anfrage</h3><p data-i18n="ab_1_p">Du füllst das Formular aus. Es fragt genau das ab, was für ein ehrliches Angebot nötig ist — nicht mehr.</p></div>
|
||
</div>
|
||
<div class="wd-schritt wd-auf">
|
||
<span class="wd-schritt-nr" aria-hidden="true">02</span>
|
||
<div><h3 data-i18n="ab_2_h3">Briefing</h3><p data-i18n="ab_2_p">Wir klären offene Punkte im Gespräch: Ziel, Zielgruppe, Umfang und was du schon an Inhalten hast.</p></div>
|
||
</div>
|
||
<div class="wd-schritt wd-auf">
|
||
<span class="wd-schritt-nr" aria-hidden="true">03</span>
|
||
<div><h3 data-i18n="ab_3_h3">Angebot</h3><p data-i18n="ab_3_p">Du bekommst Preis, Zeitrahmen und Umfang schriftlich. Erst wenn du zustimmst und die 30 % Anzahlung da sind, wird dein Termin reserviert.</p></div>
|
||
</div>
|
||
<div class="wd-schritt wd-auf">
|
||
<span class="wd-schritt-nr" aria-hidden="true">04</span>
|
||
<div><h3 data-i18n="ab_4_h3">Design</h3><p data-i18n="ab_4_p">Du siehst den Entwurf, bevor gebaut wird — auf Handy und Computer. Zwei Feedbackrunden sind üblich eingeplant.</p></div>
|
||
</div>
|
||
<div class="wd-schritt wd-auf">
|
||
<span class="wd-schritt-nr" aria-hidden="true">05</span>
|
||
<div><h3 data-i18n="ab_5_h3">Entwicklung & Tests</h3><p data-i18n="ab_5_p">Die Seite wird gebaut und danach durchgespielt: jedes Formular, jeder Link, jeder Fehlerfall — auf echten Bildschirmgrößen.</p></div>
|
||
</div>
|
||
<div class="wd-schritt wd-auf">
|
||
<span class="wd-schritt-nr" aria-hidden="true">06</span>
|
||
<div><h3 data-i18n="ab_6_h3">Übergabe</h3><p data-i18n="ab_6_p">Veröffentlichung erst nach deiner ausdrücklichen Freigabe. Danach eine Einweisung, damit du deine Inhalte selbst pflegen kannst.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= 06 WARUM DOGFATHER ================= -->
|
||
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
||
<div class="wd-container">
|
||
<div class="wd-portrait-grid">
|
||
<img class="wd-portrait wd-auf" src="/assets/img/wd-dogfather-portrait.jpg"
|
||
alt="Dogfather" width="900" height="1125" loading="lazy" decoding="async"
|
||
data-i18n-attr="alt:wd_foto_alt" />
|
||
<div>
|
||
<span class="wd-eyebrow" data-i18n="wd_eyebrow">Warum Dogfather</span>
|
||
<h2 class="wd-auf" data-i18n="wd_h2">Eine Person, die dranbleibt</h2>
|
||
<p class="wd-auf" data-i18n="wd_p1">Hinter Dogfather Webdesign steht keine Agentur mit wechselnden Zuständigkeiten, sondern eine Person, die dein Projekt von Anfang bis Ende begleitet — und die dieselbe Sorgfalt hineinsteckt, die im Dogfather Universe steckt.</p>
|
||
<p class="wd-auf" data-i18n="wd_p2">Das heißt auch: keine Versprechen, die später nicht gehalten werden. Was nicht geht, sage ich vorher — nicht, wenn die Anzahlung schon da ist.</p>
|
||
<div class="wd-btn-reihe">
|
||
<a class="wd-btn wd-btn--zweit" href="/webdesign/ueber.html" data-i18n="wd_mehr">Mehr über Dogfather</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= 07 FAQ ================= -->
|
||
<section class="wd-abschnitt">
|
||
<div class="wd-container wd-container--schmal">
|
||
<span class="wd-eyebrow" data-i18n="faq_eyebrow">Häufige Fragen</span>
|
||
<h2 class="wd-auf" data-i18n="faq_h2">Das, was fast alle fragen</h2>
|
||
|
||
<div style="margin-top:1.8rem">
|
||
<details class="wd-faq wd-auf">
|
||
<summary data-i18n="faq_1_f">Ist der genannte Preis der Endpreis?</summary>
|
||
<div class="wd-faq-inhalt"><p data-i18n="faq_1_a">Nein. Die Beträge auf dieser Seite sind Einstiegspreise. Der verbindliche Endpreis entsteht erst durch ein schriftliches Angebot, nachdem der tatsächliche Umfang geklärt ist. Das Anfrageformular erzeugt keinen Vertrag.</p></div>
|
||
</details>
|
||
<details class="wd-faq wd-auf">
|
||
<summary data-i18n="faq_2_f">Warum 30 % Anzahlung?</summary>
|
||
<div class="wd-faq-inhalt"><p data-i18n="faq_2_a">Weil damit dein Zeitfenster fest reserviert wird. Solange keine Anzahlung da ist, ist kein Termin blockiert — und ein Projekt, das kurzfristig abspringt, geht sonst auf Kosten aller anderen, die warten.</p></div>
|
||
</details>
|
||
<details class="wd-faq wd-auf">
|
||
<summary data-i18n="faq_3_f">Was ist, wenn ich noch keine Texte und Bilder habe?</summary>
|
||
<div class="wd-faq-inhalt"><p data-i18n="faq_3_a">Das ist normal und kein Hindernis. Sag es im Anfrageformular ehrlich — dann planen wir es von Anfang an ein, statt später überrascht zu werden. Fehlende Inhalte sind der häufigste Grund, warum Projekte länger dauern als geplant.</p></div>
|
||
</details>
|
||
<details class="wd-faq wd-auf">
|
||
<summary data-i18n="faq_4_f">Gehört die Seite danach mir?</summary>
|
||
<div class="wd-faq-inhalt"><p data-i18n="faq_4_a">Ja. Nach vollständiger Bezahlung erhältst du die Nutzungsrechte an der für dich erstellten Seite samt Inhalten. Eingesetzte fremde Bausteine (z. B. Schriften oder Bilder aus Bibliotheken) behalten ihre eigene Lizenz — welche das sind, steht im Angebot.</p></div>
|
||
</details>
|
||
<details class="wd-faq wd-auf">
|
||
<summary data-i18n="faq_5_f">Wird ohne meine Zustimmung etwas veröffentlicht?</summary>
|
||
<div class="wd-faq-inhalt"><p data-i18n="faq_5_a">Nein. Weder die Seite selbst noch ein Beispiel davon im Portfolio. Beides braucht deine ausdrückliche Freigabe, und beides ist getrennt — du kannst die Seite live schalten und trotzdem nicht im Portfolio auftauchen wollen.</p></div>
|
||
</details>
|
||
</div>
|
||
|
||
<div class="wd-btn-reihe" style="margin-top:1.4rem">
|
||
<a class="wd-btn wd-btn--still" href="/webdesign/faq.html" data-i18n="faq_alle">Alle Fragen und Antworten</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ================= 08 ABSCHLUSS-CTA ================= -->
|
||
<section class="wd-abschnitt">
|
||
<div class="wd-container">
|
||
<div class="wd-cta-flaeche wd-auf">
|
||
<h2 data-i18n="cta_h2">Erzähl mir von deinem Vorhaben</h2>
|
||
<p class="wd-lead" data-i18n="cta_p">Ein paar Minuten für das Formular reichen. Du bekommst danach eine Zusammenfassung, ich melde mich mit Rückfragen oder direkt mit einem Angebot — unverbindlich und ohne Kosten.</p>
|
||
<div class="wd-btn-reihe">
|
||
<a class="wd-btn wd-btn--haupt" href="/webdesign/anfrage.html" data-i18n="cta_knopf">Projekt anfragen</a>
|
||
</div>
|
||
<p class="wd-klein wd-leise" style="margin:1.2rem 0 0" data-i18n="cta_klein">Unverbindlich · Keine Kosten · Keine automatische Preiszusage</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<div id="wd-fuss"></div>
|
||
|
||
<script src="/assets/js/i18n-wd-index.js?v=20260822wd"></script>
|
||
<script src="/assets/js/wd-core.js?v=20260822wd"></script>
|
||
<script>
|
||
/* ---------------------------------------------------------------------
|
||
Marken-Intro (Masterplan S.3, Schritt 02: "Nach erfolgreichem Code
|
||
erscheint ein kurzes, hochwertiges Intro mit Dogfather-Branding und
|
||
direktem Übergang zur Startseite").
|
||
|
||
Bewusste Entscheidungen:
|
||
- Nur EINMAL pro Browser-Sitzung (sessionStorage). Ein Vorspann bei
|
||
jedem Aufruf wäre nach dem zweiten Mal reine Belastung.
|
||
- Jederzeit wegklickbar und per Escape schließbar.
|
||
- Bei prefers-reduced-motion gar nicht erst gezeigt (CSS oben).
|
||
- Die Anrede kommt aus dem Rollen-Cookie, das die Zugangsprüfung
|
||
gesetzt hat. Es trägt KEINE Berechtigung — wer es fälscht, ändert
|
||
nur die Begrüßung, nicht den Zugang.
|
||
--------------------------------------------------------------------- */
|
||
(function () {
|
||
"use strict";
|
||
var box = document.getElementById("wd-intro");
|
||
var gruss = document.getElementById("wd-intro-gruss");
|
||
var skip = document.getElementById("wd-intro-skip");
|
||
if (!box) return;
|
||
|
||
var SCHLUESSEL = "wd-intro-gesehen";
|
||
var schonGesehen = false;
|
||
try { schonGesehen = sessionStorage.getItem(SCHLUESSEL) === "ja"; } catch (e) { schonGesehen = true; }
|
||
|
||
var reduziert = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||
if (schonGesehen || reduziert) return;
|
||
|
||
function rolleAusCookie() {
|
||
var treffer = document.cookie.split(";").map(function (s) { return s.trim(); })
|
||
.filter(function (s) { return s.indexOf("dogiwd_rolle=") === 0; })[0];
|
||
return treffer ? decodeURIComponent(treffer.split("=")[1]) : null;
|
||
}
|
||
|
||
function schliessen() {
|
||
box.hidden = true;
|
||
try { sessionStorage.setItem(SCHLUESSEL, "ja"); } catch (e) { /* egal */ }
|
||
}
|
||
|
||
function anzeigen() {
|
||
var rolle = rolleAusCookie();
|
||
/* Dritter Fall (kein Rollen-Cookie) ist bewusst vorgesehen: das Cookie
|
||
kann fehlen, wenn der Bereich auf "freigegeben" steht und jemand
|
||
ohne Anmeldung hereinkommt. Dann eine neutrale Begrüßung statt
|
||
einer falschen Anrede. */
|
||
gruss.textContent = rolle === "vanvan"
|
||
? window.WD.t("intro_gruss_vanvan")
|
||
: rolle === "dogfather"
|
||
? window.WD.t("intro_gruss_dogfather")
|
||
: window.WD.t("intro_gruss_allgemein");
|
||
box.hidden = false;
|
||
/* Nach dem Weg-Animieren (CSS: 2.6s Wartezeit + 0.7s Blende) endgültig
|
||
aus dem Weg räumen — sonst liegt ein unsichtbares Element über der
|
||
Seite und schluckt jeden Klick. */
|
||
setTimeout(schliessen, 3400);
|
||
}
|
||
|
||
skip.addEventListener("click", schliessen);
|
||
document.addEventListener("keydown", function (e) { if (e.key === "Escape") schliessen(); });
|
||
|
||
/* Auf wd-core warten, damit die Begrüßung schon in der richtigen Sprache
|
||
steht statt kurz auf Deutsch aufzublitzen. */
|
||
if (window.WD) anzeigen();
|
||
else document.addEventListener("wd-bereit", anzeigen);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|