DogFatherGitandClaude Opus 5
469a6c195f
Schritt 4 von 4 -- damit sind beide Wuensche vom 22.08.2026 vollstaendig:
"wenn sie drauf druecken sollen sie auch sehen was ich schon gemacht habe
von dem was im plan war" und "die kunden sollen mir auch nachrichten
hinterlassen koennen".
AUFGABENLISTE IM PROJEKT
Bisher sah der Kunde nur die Phase ("Design . 3/7") -- eine Zahl ohne
Inhalt. Sie beantwortet die eigentliche Frage nicht: WAS ist denn fertig?
Die Liste steht GANZ OBEN, direkt nach dem Projektkopf, noch vor
Zahlungen und Dateien. Die sind wichtig, aber sie sind nicht der Grund
fuer den Klick.
Zwei Entscheidungen praegen die Ansicht:
1. Offene Kundenpunkte stehen in einem EIGENEN Kasten ganz oben ("Das
brauche ich noch von dir"), nicht nur farblich markiert irgendwo
mittendrin. Wer eine lange Liste sieht, liest sie als Bericht ueber
fremde Arbeit und ueberliest seinen eigenen Teil -- genau daraus
entstehen die meisten Verzoegerungen. Ist nichts offen, steht das
auch da: "Von dir wird gerade nichts gebraucht." Eine gute Nachricht
darf ausgesprochen werden.
2. Der Kunde hakt seine eigenen Punkte selbst ab. Nur diese haben einen
Knopf; bei fremden Punkten ist das Zeichen reine Anzeige. Ein Knopf,
der nichts tut, laesst die Seite kaputt wirken. Geprueft: 4 Knoepfe
bei 2 offenen eigenen Punkten (sie erscheinen zweimal), 5 feste.
Grosse Zahl statt Prozent: "2 von 6 erledigt" ist greifbar, "33 %" ist
eine Rechnung, die niemand fuehlt. Der Balken traegt die vier
Prozessfarben -- dieselben wie auf der Ablaufseite und in der Verwaltung.
Der Ton ist bewusst gewaehlt. Der Kunde liest die Liste, wenn er unsicher
ist -- also im Zweifel schon angespannt. "Wir warten auf dich" waere
Druck, "Das brauche ich noch von dir" ist eine Bitte.
POSTFACH AUF DER UEBERSICHT
Bewusst auf der Uebersicht, nicht im Projekt: Wer kein Projekt hat -- oder
eine Frage, die zu keinem gehoert -- konnte vorher gar nicht schreiben und
musste zur E-Mail greifen. Damit war der Verlauf weg, sobald man ihn
brauchte.
Niedrigschwellig: kein Betreff, kein Pflichtfeld, der Projektbezug ist
freiwillig. Wer glaubt, eine Nachricht muesse eine "richtige" Anfrage
sein, schreibt gar nicht erst -- und genau die kurzen Fragen sollen hier
landen. Wird nachgeladen, damit die Uebersicht sofort dasteht.
Projekt- und Aufgabendaten werden gleichzeitig angefordert statt
nacheinander -- sonst waere die Wartezeit die Summe beider Anfragen. Die
Aufgabenliste darf dabei fehlschlagen, ohne die Seite mitzureissen: Wer
wegen einer leeren Liste seine Zahlungen nicht mehr saehe, waere
schlechter dran als vorher.
EIN SICHTBARER FEHLER GEFUNDEN
Auf dem Screenshot stand "Ideen & Aenderungswuensche". Ursache ist
eine Falle mit zwei Wegen: Texte ueber data-i18n landen als HTML in der
Seite, dort ist "&" richtig. Derselbe Text im JavaScript laeuft aber
durch die Absicherung und wird ein zweites Mal kodiert. Derselbe Baustein
ist also je nach Verwendungsort richtig oder falsch.
Das kann man nicht im Kopf behalten -- deshalb neu pruef-texte.mjs mit
ZWEI Pruefungen:
Anzeige: alle 11 Seiten x 5 Sprachen = 55 Kombinationen, sichtbarer
Text darf keine Kodierungsreste enthalten.
Quelltext: welcher Baustein mit "&" wird irgendwo abgesichert
eingesetzt?
Beide sind noetig. Gegengeprueft: Die Anzeigepruefung allein haette den
Fehler NICHT gefunden, weil die Ideen-Karte erst nach einer Anmeldung
erscheint. Die Quelltextpruefung findet ihn ohne Anzeige.
Auch die Quelltextpruefung selbst wurde zweimal gegengeprueft: Zuerst
meldete sie zusaetzlich po_senden ("Senden", voellig harmlos) -- ihre
Blockerkennung lief bis zum naechsten Schluessel und schluckte dabei
einen Kommentar mit "&". Jetzt zaehlt sie geschweifte Klammern. Ein
Fehlalarm im Pruefwerkzeug ist fast so schaedlich wie ein uebersehener
Fehler: Man gewoehnt sich daran, ihn wegzusehen.
GEPRUEFT
32 Pruefungen im Portal (Computer und Handy), alle bestanden. Darunter:
114 Texte in allen fuenf Sprachen vollstaendig, Kundenpunkte stehen vor
der langen Liste, Aufgaben vor den Zahlungen, Abhaken meldet den
richtigen Punkt, alle Kaestchen mindestens 24 px, keine Fehler im
Protokoll. Dazu 55 Seiten-Sprach-Kombinationen ohne Kodierungsreste.
Ein Fehler im Test selbst gefunden und behoben: Die Adressabfrage prueft
jetzt den PFAD statt der ganzen Adresse. Der API-Server heisst
"postfach.dogfather-universe.com" -- ein includes("/postfach") traf den
HOSTNAMEN und damit jede Anfrage, auch die Uebersicht.
Versionsstempel und Cache-Name auf v5.
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=20260823wd5" />
|
||
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd5" />
|
||
<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=20260823wd5"></script>
|
||
<script src="/assets/js/wd-core.js?v=20260823wd5"></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>
|