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:
@@ -0,0 +1,189 @@
|
||||
<!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>Ablauf — Dogfather Webdesign</title>
|
||||
<meta name="description" content="Von der Anfrage bis zur Übergabe: sieben Schritte, jeweils mit dem, was du machst, was ich mache und was am Ende dabei herauskommt." />
|
||||
<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>
|
||||
/* Zeitstrahl: die Linie verbindet die Nummernkreise. Sie liegt hinter
|
||||
den Kreisen (z-index) und endet beim letzten Schritt, damit sie nicht
|
||||
ins Leere weiterläuft. */
|
||||
.abl-strahl { position: relative; }
|
||||
.abl-strahl::before {
|
||||
content: "";
|
||||
position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
|
||||
background: linear-gradient(180deg, var(--wd-blau-tief), var(--wd-lila-tief));
|
||||
opacity: .35;
|
||||
}
|
||||
@media (max-width: 640px) { .abl-strahl::before { display: none; } }
|
||||
|
||||
.abl-schritt { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 1.2rem; margin-bottom: 1.1rem; }
|
||||
@media (max-width: 640px) { .abl-schritt { grid-template-columns: 1fr; gap: .7rem; } }
|
||||
|
||||
.abl-nr {
|
||||
position: relative; z-index: 1;
|
||||
width: 48px; height: 48px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
|
||||
color: var(--wd-blau); background: #0b1320;
|
||||
border: 2px solid var(--wd-rand-stark);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.abl-schritt--lila .abl-nr { color: var(--wd-lila); border-color: rgba(183,157,255,.4); }
|
||||
@media (max-width: 640px) { .abl-nr { width: 40px; height: 40px; font-size: 1rem; } }
|
||||
|
||||
.abl-karte h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); margin-bottom: .9em; }
|
||||
.abl-rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
|
||||
@media (max-width: 820px) { .abl-rollen { grid-template-columns: 1fr; gap: .8rem; } }
|
||||
.abl-rolle h3 { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .35em; color: var(--wd-blau); }
|
||||
.abl-schritt--lila .abl-rolle h3 { color: var(--wd-lila); }
|
||||
/* Die dritte Spalte ist das Ergebnis — bekommt einen leichten Rahmen,
|
||||
damit sie sich von "wer macht was" abhebt. */
|
||||
.abl-rolle--erg {
|
||||
background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
|
||||
border-radius: 12px; padding: .8rem .9rem; margin: -.8rem -.9rem;
|
||||
}
|
||||
.abl-rolle p { margin: 0; font-size: .98rem; }
|
||||
</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="ab_eyebrow">Ablauf</span>
|
||||
<h1 data-i18n="ab_h1">Sieben Schritte, keine Überraschungen</h1>
|
||||
<p class="wd-lead" style="max-width:72ch" data-i18n="ab_lead">Jeder Schritt endet mit etwas, das du sehen und prüfen kannst. Du weißt jederzeit, wo dein Projekt steht und was als Nächstes von wem gebraucht wird.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wd-abschnitt" style="padding-top:0">
|
||||
<div class="wd-container">
|
||||
<div class="abl-strahl">
|
||||
|
||||
<div class="abl-schritt wd-auf">
|
||||
<span class="abl-nr" aria-hidden="true">01</span>
|
||||
<div class="wd-karte abl-karte">
|
||||
<h2 data-i18n="s1_h2">Anfrage</h2>
|
||||
<div class="abl-rollen">
|
||||
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s1_du">Formular ausfüllen — Ziel, Umfang, Budgetrahmen, Wunschtermin.</p></div>
|
||||
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s1_ich">Anfrage prüfen und innerhalb weniger Tage melden.</p></div>
|
||||
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s1_erg">Eine Bestätigung mit Zusammenfassung dessen, was du angegeben hast.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="abl-schritt abl-schritt--lila wd-auf">
|
||||
<span class="abl-nr" aria-hidden="true">02</span>
|
||||
<div class="wd-karte wd-karte--lila abl-karte">
|
||||
<h2 data-i18n="s2_h2">Briefing</h2>
|
||||
<div class="abl-rollen">
|
||||
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s2_du">Fragen beantworten und sagen, was du schon an Texten, Bildern und Logo hast.</p></div>
|
||||
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s2_ich">Nachfragen, wo etwas unklar ist — lieber jetzt als mitten im Bau.</p></div>
|
||||
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s2_erg">Ein gemeinsames Bild davon, was die Seite können muss.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="abl-schritt wd-auf">
|
||||
<span class="abl-nr" aria-hidden="true">03</span>
|
||||
<div class="wd-karte abl-karte">
|
||||
<h2 data-i18n="s3_h2">Angebot & Anzahlung</h2>
|
||||
<div class="abl-rollen">
|
||||
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s3_du">Angebot lesen, Fragen stellen, annehmen oder ablehnen — und bei Annahme die 30 % überweisen.</p></div>
|
||||
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s3_ich">Preis, Umfang, Zeitrahmen und alles, was extra kostet, schriftlich festhalten.</p></div>
|
||||
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s3_erg">Ein reservierter Starttermin. Vorher wird kein Zeitfenster blockiert.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="abl-schritt abl-schritt--lila wd-auf">
|
||||
<span class="abl-nr" aria-hidden="true">04</span>
|
||||
<div class="wd-karte wd-karte--lila abl-karte">
|
||||
<h2 data-i18n="s4_h2">Design</h2>
|
||||
<div class="abl-rollen">
|
||||
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s4_du">Entwurf ansehen und Rückmeldung geben — am besten gesammelt statt in vielen einzelnen Nachrichten.</p></div>
|
||||
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s4_ich">Aufbau, Farben und Schriften entwerfen — und dir Handy- und Computeransicht zeigen, nicht nur eine davon.</p></div>
|
||||
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s4_erg">Ein freigegebener Entwurf. Erst danach wird gebaut.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="abl-schritt wd-auf">
|
||||
<span class="abl-nr" aria-hidden="true">05</span>
|
||||
<div class="wd-karte abl-karte">
|
||||
<h2 data-i18n="s5_h2">Entwicklung</h2>
|
||||
<div class="abl-rollen">
|
||||
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s5_du">Fehlende Inhalte nachliefern, falls noch welche offen sind.</p></div>
|
||||
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s5_ich">Die Seite bauen — mit den echten Inhalten, nicht mit Blindtext.</p></div>
|
||||
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s5_erg">Eine benutzbare Seite auf einer Vorschauadresse, die nur du und ich kennen.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="abl-schritt abl-schritt--lila wd-auf">
|
||||
<span class="abl-nr" aria-hidden="true">06</span>
|
||||
<div class="wd-karte wd-karte--lila abl-karte">
|
||||
<h2 data-i18n="s6_h2">Tests</h2>
|
||||
<div class="abl-rollen">
|
||||
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s6_du">Selbst durchklicken — besonders auf deinem eigenen Handy.</p></div>
|
||||
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s6_ich">Jedes Formular, jeden Link und jeden Fehlerfall durchspielen, auf Handy, Tablet und Computer.</p></div>
|
||||
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s6_erg">Eine Liste dessen, was geprüft wurde — und was bewusst nicht enthalten ist.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="abl-schritt wd-auf">
|
||||
<span class="abl-nr" aria-hidden="true">07</span>
|
||||
<div class="wd-karte abl-karte">
|
||||
<h2 data-i18n="s7_h2">Freigabe & Übergabe</h2>
|
||||
<div class="abl-rollen">
|
||||
<div class="abl-rolle"><h3 data-i18n="du_machst">Du machst</h3><p data-i18n="s7_du">Ausdrücklich freigeben und den Restbetrag begleichen.</p></div>
|
||||
<div class="abl-rolle"><h3 data-i18n="ich_mache">Ich mache</h3><p data-i18n="s7_ich">Live schalten, dich einweisen und die Zugänge übergeben.</p></div>
|
||||
<div class="abl-rolle abl-rolle--erg"><h3 data-i18n="ergebnis">Am Ende steht</h3><p data-i18n="s7_erg">Deine Seite, deine Zugänge, deine Nutzungsrechte. Betreuung ist optional, kein Zwang.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wd-hinweis wd-auf" style="margin-top:1.6rem">
|
||||
<p class="wd-hinweis-titel" data-i18n="ab_wichtig_titel">Keine Veröffentlichung ohne deine Freigabe</p>
|
||||
<p data-i18n="ab_wichtig_text">Die Seite geht ausschließlich dann online, wenn du das ausdrücklich sagst. Das gilt auch für die Aufnahme ins Portfolio — beides ist getrennt und beides brauchst du nicht zu erlauben.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
||||
<div class="wd-container wd-container--schmal">
|
||||
<h2 class="wd-auf" data-i18n="ab_dauer_h2">Wie lange dauert das insgesamt?</h2>
|
||||
<p class="wd-lead wd-auf" data-i18n="ab_dauer_p">Die Zeitrahmen auf der Preisseite gelten ab dem Eingang der Anzahlung — nicht ab der ersten Nachricht. Der häufigste Grund für Verzögerungen ist nicht die Technik, sondern dass Texte oder Bilder noch fehlen. Deshalb wird im Formular gleich danach gefragt.</p>
|
||||
<div class="wd-btn-reihe">
|
||||
<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/preise.html" data-i18n="ab_zu_preise">Zu den Zeitrahmen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="wd-fuss"></div>
|
||||
|
||||
<script src="/assets/js/i18n-wd-ablauf.js?v=20260822wd"></script>
|
||||
<script src="/assets/js/wd-core.js?v=20260822wd"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "Dogfather Webdesign",
|
||||
"short_name": "DF Webdesign",
|
||||
"description": "Individuell gebaute Webseiten, persönlich umgesetzt. Projekte anfragen, Angebote und Dateien im eigenen Kundenbereich verwalten.",
|
||||
"lang": "de",
|
||||
"dir": "ltr",
|
||||
"start_url": "/webdesign/",
|
||||
"scope": "/webdesign/",
|
||||
"id": "/webdesign/",
|
||||
"display": "standalone",
|
||||
"display_override": ["window-controls-overlay", "standalone", "minimal-ui"],
|
||||
"orientation": "any",
|
||||
"background_color": "#05070b",
|
||||
"theme_color": "#05070b",
|
||||
"categories": ["business", "productivity"],
|
||||
"icons": [
|
||||
{ "src": "/assets/img/wd-app-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
|
||||
{ "src": "/assets/img/wd-app-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
|
||||
{ "src": "/assets/img/wd-app-512-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
|
||||
],
|
||||
"shortcuts": [
|
||||
{
|
||||
"name": "Projekt anfragen",
|
||||
"short_name": "Anfrage",
|
||||
"url": "/webdesign/anfrage.html",
|
||||
"icons": [{ "src": "/assets/img/wd-app-192.png", "sizes": "192x192" }]
|
||||
},
|
||||
{
|
||||
"name": "Kundenportal",
|
||||
"short_name": "Portal",
|
||||
"url": "/webdesign/portal.html",
|
||||
"icons": [{ "src": "/assets/img/wd-app-192.png", "sizes": "192x192" }]
|
||||
},
|
||||
{
|
||||
"name": "Verwaltung",
|
||||
"short_name": "Verwaltung",
|
||||
"url": "/webdesign/verwaltung.html",
|
||||
"icons": [{ "src": "/assets/img/wd-app-192.png", "sizes": "192x192" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
<!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>Häufige Fragen — Dogfather Webdesign</title>
|
||||
<meta name="description" content="Preise, Dauer, Inhalte, Änderungen, Hosting, Rechte, Zahlung und Veröffentlichung — offen beantwortet." />
|
||||
<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>
|
||||
.fq-thema { scroll-margin-top: 90px; }
|
||||
.fq-thema + .fq-thema { margin-top: clamp(2rem, 4vw, 3rem); }
|
||||
.fq-thema > h2 {
|
||||
font-size: clamp(1.2rem, 2.6vw, 1.5rem);
|
||||
padding-bottom: .5rem; margin-bottom: 1.1rem;
|
||||
border-bottom: 1px solid var(--wd-rand);
|
||||
}
|
||||
/* Sprungmarken wie auf der Leistungsseite: waagerecht wischbar statt
|
||||
über vier Zeilen umbrechend. */
|
||||
.fq-sprung { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .2rem 1rem; scroll-snap-type: x proximity; }
|
||||
.fq-sprung a {
|
||||
flex: 0 0 auto; scroll-snap-align: start;
|
||||
padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center;
|
||||
border-radius: 999px; border: 1px solid var(--wd-rand);
|
||||
font-size: .92rem; font-weight: 600; color: var(--wd-text-mid); white-space: nowrap;
|
||||
}
|
||||
.fq-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); }
|
||||
</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 wd-container--schmal">
|
||||
<span class="wd-eyebrow" data-i18n="fq_eyebrow">Häufige Fragen</span>
|
||||
<h1 data-i18n="fq_h1">Alles, was vorher geklärt sein sollte</h1>
|
||||
<p class="wd-lead" data-i18n="fq_lead">Sortiert nach Thema. Wenn deine Frage nicht dabei ist, schreib sie einfach ins Anfrageformular — sie landet dann hier, wenn sie öfter kommt.</p>
|
||||
|
||||
<nav class="fq-sprung" aria-label="Themen">
|
||||
<a href="#preis" data-i18n="fq_t_preis">Preise & Zahlung</a>
|
||||
<a href="#dauer" data-i18n="fq_t_dauer">Dauer & Änderungen</a>
|
||||
<a href="#inhalt" data-i18n="fq_t_inhalt">Inhalte & Zusammenarbeit</a>
|
||||
<a href="#technik" data-i18n="fq_t_technik">Hosting, Domain & Rechte</a>
|
||||
<a href="#veroeff" data-i18n="fq_t_veroeff">Veröffentlichung & danach</a>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wd-abschnitt" style="padding-top:0">
|
||||
<div class="wd-container wd-container--schmal">
|
||||
|
||||
<div class="fq-thema wd-auf" id="preis">
|
||||
<h2 data-i18n="fq_t_preis">Preise & Zahlung</h2>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f1_f">Warum steht kein Festpreis auf der Seite?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f1_a">Weil ein ehrlicher Festpreis erst möglich ist, wenn der Umfang bekannt ist.</p></div>
|
||||
</details>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f2_f">Was passiert, wenn ich nach der Anzahlung abspringe?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f2_a">Die Anzahlung hat den Zweck, dein Zeitfenster zu reservieren.</p></div>
|
||||
</details>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f3_f">Kommen später versteckte Kosten dazu?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f3_a">Von mir nicht — was extra kostet, steht vorher im Angebot.</p></div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="fq-thema wd-auf" id="dauer">
|
||||
<h2 data-i18n="fq_t_dauer">Dauer & Änderungen</h2>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f4_f">Woran liegt es, wenn ein Projekt länger dauert?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f4_a">In den allermeisten Fällen an fehlenden Inhalten, nicht an der Technik.</p></div>
|
||||
</details>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f5_f">Wie viele Änderungen sind drin?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f5_a">Typischerweise zwei Feedbackrunden.</p></div>
|
||||
</details>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f6_f">Kann ich Texte später selbst ändern?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f6_a">Ja, das ist ausdrücklich das Ziel.</p></div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="fq-thema wd-auf" id="inhalt">
|
||||
<h2 data-i18n="fq_t_inhalt">Inhalte & Zusammenarbeit</h2>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f7_f">Ich habe kein Logo. Ist das ein Problem?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f7_a">Kein Hindernis, aber auch nicht kostenlos.</p></div>
|
||||
</details>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f8_f">Kann ich Bilder aus dem Internet verwenden?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f8_a">Nur wenn die Lizenz das erlaubt.</p></div>
|
||||
</details>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f9_f">Wie läuft die Kommunikation während des Projekts?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f9_a">Über deinen eigenen Kundenbereich auf dieser Seite.</p></div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="fq-thema wd-auf" id="technik">
|
||||
<h2 data-i18n="fq_t_technik">Hosting, Domain & Rechte</h2>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f10_f">Brauche ich eine eigene Domain und ein eigenes Hosting?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f10_a">Ja, beides gehört dir und läuft auf deinen Namen.</p></div>
|
||||
</details>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f11_f">Bin ich danach von dir abhängig?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f11_a">Nein, und das ist Absicht.</p></div>
|
||||
</details>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f12_f">Wie steht es um Datenschutz und Impressum?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f12_a">Die technischen Voraussetzungen baue ich ein.</p></div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="fq-thema wd-auf" id="veroeff">
|
||||
<h2 data-i18n="fq_t_veroeff">Veröffentlichung & danach</h2>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f13_f">Wird meine Seite ins Portfolio aufgenommen?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f13_a">Nur wenn du es erlaubst.</p></div>
|
||||
</details>
|
||||
<details class="wd-faq">
|
||||
<summary data-i18n="f14_f">Was passiert, wenn die Seite ausfällt?</summary>
|
||||
<div class="wd-faq-inhalt"><p data-i18n="f14_a">Mit Betreuung merke ich es in der Regel selbst.</p></div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Gold: Zahlungsinformation, hier als Erinnerung an die zentrale Regel. -->
|
||||
<div class="wd-hinweis wd-auf" style="margin-top:2rem">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
||||
<div class="wd-container wd-container--schmal" style="text-align:center">
|
||||
<h2 data-i18n="fq_rest_titel">Deine Frage war nicht dabei?</h2>
|
||||
<p class="wd-lead" data-i18n="fq_rest_text">Schreib sie einfach ins Anfrageformular — es gibt dort ein freies Feld dafür. Du kannst mir auch direkt eine E-Mail schreiben, wenn dir das lieber ist.</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="mailto:[email protected]" data-i18n="fuss_email">E-Mail schreiben</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="wd-fuss"></div>
|
||||
|
||||
<script src="/assets/js/i18n-wd-faq.js?v=20260822wd"></script>
|
||||
<script src="/assets/js/wd-core.js?v=20260822wd"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,480 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,307 @@
|
||||
<!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>Leistungen — Dogfather Webdesign</title>
|
||||
<meta name="description" content="Onepager, professionelle Website, Shop und Verwaltungsseiten: was jeweils enthalten ist, was extra kostet und wo die Grenze verläuft." />
|
||||
<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>
|
||||
/* Sprungmarken-Leiste: auf schmalen Bildschirmen waagerecht wischbar
|
||||
statt umbrechend — vier lange deutsche Paketnamen ergeben sonst vier
|
||||
Zeilen, die den halben ersten Bildschirm fressen. */
|
||||
.ls-sprung {
|
||||
display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .2rem 1rem;
|
||||
scrollbar-width: thin; -webkit-overflow-scrolling: touch;
|
||||
scroll-snap-type: x proximity;
|
||||
}
|
||||
.ls-sprung a {
|
||||
flex: 0 0 auto; scroll-snap-align: start;
|
||||
padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center;
|
||||
border-radius: 999px; border: 1px solid var(--wd-rand);
|
||||
font-size: .92rem; font-weight: 600; color: var(--wd-text-mid); white-space: nowrap;
|
||||
}
|
||||
.ls-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); }
|
||||
|
||||
/* scroll-margin-top: sonst verschwindet die Abschnittsüberschrift beim
|
||||
Anspringen unter der klebenden Kopfzeile. */
|
||||
.ls-block { scroll-margin-top: 90px; }
|
||||
.ls-block + .ls-block { margin-top: clamp(2rem, 5vw, 3.4rem); }
|
||||
.ls-block h2 { margin-bottom: .25em; }
|
||||
|
||||
.ls-preiszeile {
|
||||
display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem;
|
||||
margin: 0 0 1.4rem;
|
||||
}
|
||||
.ls-preis { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2rem); color: var(--wd-blau); }
|
||||
.ls-block--lila .ls-preis { color: var(--wd-lila); }
|
||||
.ls-dauer { color: var(--wd-text-mid); font-size: 1rem; }
|
||||
|
||||
.ls-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.9rem, 2vw, 1.3rem); }
|
||||
@media (max-width: 780px) { .ls-raster { grid-template-columns: 1fr; } }
|
||||
.ls-feld h3 { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .5em; }
|
||||
.ls-block--lila .ls-feld h3 { color: var(--wd-lila); }
|
||||
.ls-feld p { margin: 0; }
|
||||
</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="ls_eyebrow">Klare Pakete</span>
|
||||
<h1 data-i18n="ls_h1">Was du ungefähr bekommst</h1>
|
||||
<p class="wd-lead" style="max-width:72ch" data-i18n="ls_lead">Keine leeren Werbeversprechen. Zu jeder Kategorie steht hier, für wen sie gedacht ist, was typischerweise drin ist, was extra kostet — und wo die Grenze verläuft.</p>
|
||||
|
||||
<nav class="ls-sprung" aria-label="Abschnitte">
|
||||
<a href="#onepager" data-i18n="op_h2">Onepager</a>
|
||||
<a href="#website" data-i18n="ws_h2">Professionelle Website</a>
|
||||
<a href="#shop" data-i18n="sh_h2">Shop & umfangreiche Website</a>
|
||||
<a href="#verwaltung" data-i18n="vw_h2">Buchhaltungs- & Steuerverwaltungsseiten</a>
|
||||
<a href="#betreuung" data-i18n="bt_h2">Laufende Betreuung</a>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wd-abschnitt" style="padding-top:0">
|
||||
<div class="wd-container">
|
||||
|
||||
<!-- ---------------- Onepager ---------------- -->
|
||||
<article class="wd-karte wd-karte--kappe ls-block wd-auf" id="onepager">
|
||||
<h2 data-i18n="op_h2">Onepager</h2>
|
||||
<div class="ls-preiszeile">
|
||||
<span class="ls-preis"><span data-i18n="ab_preis">ab</span> 300 €</span>
|
||||
<span class="ls-dauer"><strong data-i18n="dauer">Dauer</strong>: <span data-i18n="pk_onepager_dauer">ca. 5–10 Arbeitstage</span></span>
|
||||
</div>
|
||||
<p class="wd-personalisierung" style="margin-top:-1rem;margin-bottom:1.4rem" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
|
||||
|
||||
<div class="ls-raster">
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="fuer_wen">Für wen</h3>
|
||||
<p data-i18n="op_fuer">Einzelpersonen, Creator, eine einzelne Aktion oder ein klar umrissenes Angebot, das keine Unterseiten braucht.</p>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="enthalten">Typisch enthalten</h3>
|
||||
<ul class="wd-liste">
|
||||
<li data-i18n="op_1">Bis zu ca. fünf Inhaltsbereiche auf einer Seite</li>
|
||||
<li data-i18n="op_2">Hero, Vorstellung, Angebot, Links und Kontakt</li>
|
||||
<li data-i18n="op_3">Responsiv auf Handy, Tablet und Computer</li>
|
||||
<li data-i18n="op_4">Grundstruktur für Suchmaschinen (Titel, Beschreibung, Überschriften)</li>
|
||||
<li data-i18n="op_5">Typischerweise zwei Feedbackrunden</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="beispiel">Konkretes Beispiel</h3>
|
||||
<p data-i18n="op_beispiel">Eine Seite für einen Creator: oben wer du bist und was du machst, darunter die aktuelle Aktion, deine Kanäle, ein kurzes Kontaktformular. Alles auf einem Bildschirm erreichbar, ohne Menü.</p>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="grenze">Nicht enthalten</h3>
|
||||
<p data-i18n="op_grenze">Kein Shop, keine Nutzerkonten, keine Unterseiten. Wenn absehbar mehr als eine Seite nötig wird, ist die professionelle Website der ehrlichere Weg — auch wenn sie mehr kostet.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wd-notiz" style="margin-top:1.3rem">
|
||||
<p><strong data-i18n="extras">Kostet extra</strong>: <span data-i18n="extras_allgemein">Zusätzliche Sprachen · weitere Unterseiten · Logo- und Bildbearbeitung · Texterstellung · Anbindung an fremde Systeme · zusätzliche Feedbackrunden über die vereinbarten hinaus</span></p>
|
||||
</div>
|
||||
|
||||
<div class="wd-btn-reihe" style="margin-top:1.3rem">
|
||||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html?paket=onepager" data-i18n="jetzt_anfragen">Dieses Paket anfragen</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ---------------- Professionelle Website ---------------- -->
|
||||
<article class="wd-karte wd-karte--lila wd-karte--kappe ls-block ls-block--lila wd-auf" id="website">
|
||||
<h2 data-i18n="ws_h2">Professionelle Website</h2>
|
||||
<div class="ls-preiszeile">
|
||||
<span class="ls-preis"><span data-i18n="ab_preis">ab</span> 500 €</span>
|
||||
<span class="ls-dauer"><strong data-i18n="dauer">Dauer</strong>: <span data-i18n="pk_website_dauer">ca. 2–4 Wochen</span></span>
|
||||
</div>
|
||||
<p class="wd-personalisierung" style="margin-top:-1rem;margin-bottom:1.4rem" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
|
||||
|
||||
<div class="ls-raster">
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="fuer_wen">Für wen</h3>
|
||||
<p data-i18n="ws_fuer">Unternehmen, Teams, Vereine, Creator mit mehreren Themen — überall dort, wo eine einzelne Seite zu voll würde.</p>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="enthalten">Typisch enthalten</h3>
|
||||
<ul class="wd-liste">
|
||||
<li data-i18n="ws_1">Typisch bis zu fünf Kernseiten</li>
|
||||
<li data-i18n="ws_2">Navigation, Formulare, Galerie oder Videos</li>
|
||||
<li data-i18n="ws_3">Responsive Umsetzung und Funktionscheck auf echten Geräten</li>
|
||||
<li data-i18n="ws_4">Unterstützung bei der Veröffentlichung (Domain, Zertifikat, Umzug)</li>
|
||||
<li data-i18n="ws_5">Einweisung, damit du Texte selbst ändern kannst</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="beispiel">Konkretes Beispiel</h3>
|
||||
<p data-i18n="ws_beispiel">Ein Handwerksbetrieb: Startseite, Leistungen, Referenzen mit Bildern, Über uns, Kontakt mit Anfahrt und Formular. Anfragen landen strukturiert im Postfach statt als formlose Mail.</p>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="grenze">Nicht enthalten</h3>
|
||||
<p data-i18n="ws_grenze">Kein Produktverkauf und keine geschützten Nutzerbereiche. Sobald etwas verkauft oder ein Login gebraucht wird, gilt die nächste Kategorie.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wd-notiz" style="margin-top:1.3rem">
|
||||
<p><strong data-i18n="extras">Kostet extra</strong>: <span data-i18n="extras_allgemein">Zusätzliche Sprachen · weitere Unterseiten · Logo- und Bildbearbeitung · Texterstellung · Anbindung an fremde Systeme · zusätzliche Feedbackrunden über die vereinbarten hinaus</span></p>
|
||||
</div>
|
||||
|
||||
<div class="wd-btn-reihe" style="margin-top:1.3rem">
|
||||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html?paket=website" data-i18n="jetzt_anfragen">Dieses Paket anfragen</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ---------------- Shop ---------------- -->
|
||||
<article class="wd-karte wd-karte--kappe ls-block wd-auf" id="shop">
|
||||
<h2 data-i18n="sh_h2">Shop & umfangreiche Website</h2>
|
||||
<div class="ls-preiszeile">
|
||||
<span class="ls-preis"><span data-i18n="ab_preis">ab</span> 1.000 €</span>
|
||||
<span class="ls-dauer"><strong data-i18n="dauer">Dauer</strong>: <span data-i18n="pk_shop_dauer">ca. 4–8 Wochen</span></span>
|
||||
</div>
|
||||
<p class="wd-personalisierung" style="margin-top:-1rem;margin-bottom:1.4rem" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
|
||||
|
||||
<div class="ls-raster">
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="fuer_wen">Für wen</h3>
|
||||
<p data-i18n="sh_fuer">Alle, die tatsächlich online verkaufen wollen — Handgemachtes, digitale Produkte, Merch — oder einen geschützten Bereich für Kundinnen und Kunden brauchen.</p>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="enthalten">Typisch enthalten</h3>
|
||||
<ul class="wd-liste">
|
||||
<li data-i18n="sh_1">Produkte, Detailseiten, Warenkorb und Kasse</li>
|
||||
<li data-i18n="sh_2">Zahlungs- und Versandabläufe eingerichtet und durchgespielt</li>
|
||||
<li data-i18n="sh_3">Mobile Kundenführung — Kasse funktioniert auf dem Handy wirklich</li>
|
||||
<li data-i18n="sh_4">Adminbereich zur eigenständigen Produktpflege</li>
|
||||
<li data-i18n="sh_5">Einweisung in die Produktpflege</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="beispiel">Konkretes Beispiel</h3>
|
||||
<p data-i18n="sh_beispiel">Van's DIY & Bastelbedarf: Kategorien, Artikel mit Bildern und Varianten, Warenkorb, Gutscheincodes, Versandregeln — und ein Adminbereich, in dem neue Artikel ohne Technikkenntnisse angelegt werden.</p>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="grenze">Nicht enthalten</h3>
|
||||
<p data-i18n="sh_grenze">Gebühren von Zahlungsanbietern, Kosten für Domain und Server sowie steuerliche Pflichten liegen bei dir. Ich richte die Technik ein, übernehme aber weder Buchhaltung noch Rechtsberatung.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wd-notiz" style="margin-top:1.3rem">
|
||||
<p><strong data-i18n="extras">Kostet extra</strong>: <span data-i18n="extras_allgemein">Zusätzliche Sprachen · weitere Unterseiten · Logo- und Bildbearbeitung · Texterstellung · Anbindung an fremde Systeme · zusätzliche Feedbackrunden über die vereinbarten hinaus</span></p>
|
||||
</div>
|
||||
|
||||
<div class="wd-btn-reihe" style="margin-top:1.3rem">
|
||||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html?paket=shop" data-i18n="jetzt_anfragen">Dieses Paket anfragen</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ---------------- Verwaltungsseiten ---------------- -->
|
||||
<article class="wd-karte wd-karte--lila wd-karte--kappe ls-block ls-block--lila wd-auf" id="verwaltung">
|
||||
<h2 data-i18n="vw_h2">Buchhaltungs- & Steuerverwaltungsseiten</h2>
|
||||
<div class="ls-preiszeile">
|
||||
<span class="ls-preis"><span data-i18n="ab_preis">ab</span> 1.500 €</span>
|
||||
<span class="ls-dauer"><strong data-i18n="dauer">Dauer</strong>: <span data-i18n="pk_verwaltung_dauer">ca. 6–12 Wochen</span></span>
|
||||
</div>
|
||||
<p class="wd-personalisierung" style="margin-top:-1rem;margin-bottom:1.4rem" data-i18n="pk_personalisierung">Personalisierung möglich — verändert Preis und Dauer.</p>
|
||||
|
||||
<div class="ls-raster">
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="fuer_wen">Für wen</h3>
|
||||
<p data-i18n="vw_fuer">Selbstständige und kleine Betriebe, die Belege, Einnahmen und Ausgaben nicht mehr in Ordnern und Tabellen suchen wollen.</p>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="enthalten">Typisch enthalten</h3>
|
||||
<ul class="wd-liste">
|
||||
<li data-i18n="vw_1">Geschützter Login und Benutzerrollen</li>
|
||||
<li data-i18n="vw_2">Belege, Einnahmen, Ausgaben und Dokumente an einem Ort</li>
|
||||
<li data-i18n="vw_3">Filter, Suche, Auswertungen und Export</li>
|
||||
<li data-i18n="vw_4">Nachvollziehbarer Änderungsverlauf mit Zeitstempel</li>
|
||||
<li data-i18n="vw_5">Regelmäßige Sicherungen mit geprüfter Wiederherstellung</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="beispiel">Konkretes Beispiel</h3>
|
||||
<p data-i18n="vw_beispiel">Ein Portal, in dem du ein Foto eines Belegs hochlädst, Betrag und Kategorie einträgst und am Jahresende alles gefiltert exportierst — statt einen Schuhkarton zur Steuerberatung zu tragen.</p>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="grenze">Nicht enthalten</h3>
|
||||
<p data-i18n="vw_grenze">Das ist ausdrücklich eine technische Organisationslösung. Keine Buchhaltung, keine Steuerberatung, keine Erstellung von Steuererklärungen — dafür braucht es weiterhin eine Fachperson.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gold: die einzige rechtlich heikle Stelle dieser Seite. -->
|
||||
<div class="wd-hinweis" style="margin-top:1.3rem">
|
||||
<p class="wd-hinweis-titel" data-i18n="abgrenzung_titel">Technische Abgrenzung</p>
|
||||
<p data-i18n="abgrenzung_text">Buchhaltungs- und Steuerverwaltungsseiten sind ausschließlich technische Organisationslösungen. Diese Seite verspricht keine Buchhaltung, keine Steuerberatung und keine Erstellung von Steuererklärungen.</p>
|
||||
</div>
|
||||
|
||||
<div class="wd-btn-reihe" style="margin-top:1.3rem">
|
||||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html?paket=verwaltung" data-i18n="jetzt_anfragen">Dieses Paket anfragen</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ---------------- Betreuung ---------------- -->
|
||||
<article class="wd-karte wd-karte--kappe ls-block wd-auf" id="betreuung">
|
||||
<h2 data-i18n="bt_h2">Laufende Betreuung</h2>
|
||||
<div class="ls-preiszeile">
|
||||
<span class="ls-preis" data-i18n="betreuung_preis">ab 49 € / Monat</span>
|
||||
</div>
|
||||
|
||||
<div class="ls-raster">
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="fuer_wen">Für wen</h3>
|
||||
<p data-i18n="bt_fuer">Alle, die nach der Übergabe nicht selbst an der Technik schrauben wollen — oder einfach wissen möchten, dass jemand hinschaut.</p>
|
||||
</div>
|
||||
<div class="ls-feld">
|
||||
<h3 data-i18n="enthalten">Typisch enthalten</h3>
|
||||
<ul class="wd-liste">
|
||||
<li data-i18n="bt_1">Kleine Änderungen typischerweise in ca. 2–5 Arbeitstagen</li>
|
||||
<li data-i18n="bt_2">Sicherheitsaktualisierungen und Überwachung der Erreichbarkeit</li>
|
||||
<li data-i18n="bt_3">Regelmäßige Sicherungen, die auch wirklich zurückgespielt werden können</li>
|
||||
<li data-i18n="bt_4">Umfang und Priorität nach gewähltem Paket</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ls-feld" style="grid-column:1/-1">
|
||||
<h3 data-i18n="grenze">Nicht enthalten</h3>
|
||||
<p data-i18n="bt_grenze">Betreuung ist keine unbegrenzte Weiterentwicklung. Neue Funktionen oder ganze Unterseiten sind eigene Aufträge — der Aufwand wird vorher genannt, du entscheidest.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wd-btn-reihe" style="margin-top:1.3rem">
|
||||
<a class="wd-btn wd-btn--zweit wd-btn--klein" href="/webdesign/anfrage.html?paket=betreuung" data-i18n="jetzt_anfragen">Dieses Paket anfragen</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
||||
<div class="wd-container wd-container--schmal" style="text-align:center">
|
||||
<h2 data-i18n="cta_h2">Nicht sicher, welches Paket passt?</h2>
|
||||
<p class="wd-lead" data-i18n="cta_p">Beschreib einfach dein Vorhaben. Wenn ein kleineres Paket reicht, sage ich das — auch wenn das weniger Umsatz bedeutet.</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="wd-fuss"></div>
|
||||
|
||||
<script src="/assets/js/i18n-wd-leistungen.js?v=20260822wd"></script>
|
||||
<script src="/assets/js/wd-core.js?v=20260822wd"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,198 @@
|
||||
<!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>Portfolio — Dogfather Webdesign</title>
|
||||
<meta name="description" content="Echte Projekte statt erfundener Beispiele: Dogfather Universe und Van's DIY & Bastelbedarf — mit Ausgangslage, Lösung und Ergebnis." />
|
||||
<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>
|
||||
.pfo-projekt { overflow: hidden; padding: 0; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
|
||||
.pfo-bild {
|
||||
width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
|
||||
border-bottom: 1px solid var(--wd-rand);
|
||||
}
|
||||
.pfo-inhalt { padding: clamp(1.3rem, 3vw, 2rem); }
|
||||
.pfo-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1rem; margin-bottom: 1rem; }
|
||||
.pfo-kopf h2 { margin: 0; font-size: clamp(1.4rem, 3.2vw, 1.9rem); }
|
||||
|
||||
.pfo-block { margin-bottom: 1.1rem; }
|
||||
.pfo-block h3 { font-size: .74rem; letter-spacing: .13em; text-transform: uppercase; color: var(--wd-blau); margin-bottom: .35em; }
|
||||
.wd-karte--lila .pfo-block h3 { color: var(--wd-lila); }
|
||||
.pfo-block p { margin: 0; }
|
||||
|
||||
/* Die Detailangaben stecken in einem aufklappbaren Bereich: die Karte
|
||||
bleibt beim Überfliegen kurz, wer mehr will, klappt auf. Bewusst das
|
||||
native Klapp-Element des Browsers, damit Tastatur und Screenreader
|
||||
ohne Zusatzcode funktionieren.
|
||||
(Der Tag-Name steht hier absichtlich nicht ausgeschrieben — sonst
|
||||
zählt ihn die Tag-Balance-Prüfung in server/pruefe-webdesign-i18n.mjs
|
||||
als öffnendes Element mit und meldet einen Fehler, den es nicht gibt.) */
|
||||
.pfo-mehr { margin-top: .4rem; }
|
||||
.pfo-mehr > summary {
|
||||
cursor: pointer; list-style: none;
|
||||
display: inline-flex; align-items: center; gap: .4rem;
|
||||
min-height: 44px; padding: .5rem .1rem;
|
||||
font-weight: 700; color: var(--wd-blau); font-size: .95rem;
|
||||
}
|
||||
.wd-karte--lila .pfo-mehr > summary { color: var(--wd-lila); }
|
||||
.pfo-mehr > summary::-webkit-details-marker { display: none; }
|
||||
.pfo-mehr > summary::after { content: "▾"; transition: transform var(--wd-zeit) ease; }
|
||||
.pfo-mehr[open] > summary::after { transform: rotate(180deg); }
|
||||
.pfo-mehr-inhalt { padding-top: .6rem; border-top: 1px solid var(--wd-rand); margin-top: .3rem; }
|
||||
</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="pf_eyebrow">Portfolio</span>
|
||||
<h1 data-i18n="pf_h1">Zwei Projekte, die man anfassen kann</h1>
|
||||
<p class="wd-lead" style="max-width:72ch" data-i18n="pf_lead">Beide Seiten laufen wirklich, unter ihrer eigenen Adresse, auf einem eigenen Server. Die Vorschaubilder sind echte Aufnahmen der laufenden Seiten — keine gezeichneten Entwürfe.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wd-abschnitt" style="padding-top:0">
|
||||
<div class="wd-container">
|
||||
|
||||
<!-- ---------------- Projekt 1 ---------------- -->
|
||||
<article class="wd-karte pfo-projekt wd-auf">
|
||||
<img class="pfo-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:p1_alt" />
|
||||
<div class="pfo-inhalt">
|
||||
<div class="pfo-kopf">
|
||||
<h2 data-i18n="p1_h2">Dogfather Universe</h2>
|
||||
<span class="wd-tag" data-i18n="p1_art">Umfangreiche Website</span>
|
||||
</div>
|
||||
|
||||
<div class="pfo-block">
|
||||
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
||||
<p data-i18n="p1_ausgang">Drei getrennte Welten sollten unter ein Dach, ohne dass Besucher sich verlaufen.</p>
|
||||
</div>
|
||||
<div class="pfo-block">
|
||||
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
||||
<p data-i18n="p1_loesung">Eine Seite mit drei farblich klar getrennten Welten, gemeinsamer Navigation und durchgängig fünf Sprachen.</p>
|
||||
</div>
|
||||
<div class="pfo-block">
|
||||
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
||||
<p data-i18n="p1_ergebnis">Seit August 2026 öffentlich und im täglichen Einsatz.</p>
|
||||
</div>
|
||||
|
||||
<details class="pfo-mehr">
|
||||
<summary data-i18n="pf_details">Details ansehen</summary>
|
||||
<div class="pfo-mehr-inhalt">
|
||||
<div class="pfo-block">
|
||||
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
||||
<ul class="wd-liste">
|
||||
<li data-i18n="p1_f1">Fünf Sprachen, inklusive echtem Schweizerdeutsch</li>
|
||||
<li data-i18n="p1_f2">Verwaltungsbereich mit Rollen und Rechten</li>
|
||||
<li data-i18n="p1_f3">Bewerbungssystem mit Statusverfolgung</li>
|
||||
<li data-i18n="p1_f4">Supporter-Abo mit Zahlungsanbindung</li>
|
||||
<li data-i18n="p1_f5">Automatische Live-Erkennung des Streams</li>
|
||||
<li data-i18n="p1_f6">Als App installierbar</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pfo-block">
|
||||
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
||||
<p data-i18n="p1_stil">Dunkel und cinematisch, mit einer eigenen Leitfarbe je Welt.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="wd-btn-reihe" style="margin-top:1rem">
|
||||
<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>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- ---------------- Projekt 2 ---------------- -->
|
||||
<article class="wd-karte wd-karte--lila pfo-projekt wd-auf">
|
||||
<img class="pfo-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:p2_alt" />
|
||||
<div class="pfo-inhalt">
|
||||
<div class="pfo-kopf">
|
||||
<h2 data-i18n="p2_h2">Van's DIY & Bastelbedarf</h2>
|
||||
<span class="wd-tag wd-tag--lila" data-i18n="p2_art">Onlineshop</span>
|
||||
</div>
|
||||
|
||||
<div class="pfo-block">
|
||||
<h3 data-i18n="pf_ausgang">Ausgangslage</h3>
|
||||
<p data-i18n="p2_ausgang">Handgemachtes wurde bis dahin über Nachrichten verkauft.</p>
|
||||
</div>
|
||||
<div class="pfo-block">
|
||||
<h3 data-i18n="pf_loesung">Umgesetzte Lösung</h3>
|
||||
<p data-i18n="p2_loesung">Ein vollständiger Shop mit Kategorien, Artikeln, Warenkorb und Gutscheincodes.</p>
|
||||
</div>
|
||||
<div class="pfo-block">
|
||||
<h3 data-i18n="pf_ergebnis">Ergebnis</h3>
|
||||
<p data-i18n="p2_ergebnis">Artikel werden selbstständig angelegt und gepflegt, ohne Rückfrage und ohne Wartezeit.</p>
|
||||
</div>
|
||||
|
||||
<details class="pfo-mehr">
|
||||
<summary data-i18n="pf_details">Details ansehen</summary>
|
||||
<div class="pfo-mehr-inhalt">
|
||||
<div class="pfo-block">
|
||||
<h3 data-i18n="pf_funktionen">Wichtigste Funktionen</h3>
|
||||
<ul class="wd-liste">
|
||||
<li data-i18n="p2_f1">Kategorien, Artikel und Varianten</li>
|
||||
<li data-i18n="p2_f2">Warenkorb und Kasse, auf dem Handy geprüft</li>
|
||||
<li data-i18n="p2_f3">Gutscheincodes und Versandregeln</li>
|
||||
<li data-i18n="p2_f4">Adminbereich für die eigenständige Artikelpflege</li>
|
||||
<li data-i18n="p2_f5">Mehrsprachig</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pfo-block">
|
||||
<h3 data-i18n="pf_stil">Stilrichtung</h3>
|
||||
<p data-i18n="p2_stil">Dunkel mit warmen Violett- und Rosétönen, passend zum handgemachten Sortiment.</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="wd-btn-reihe" style="margin-top:1rem">
|
||||
<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>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Ehrliche Leerstelle statt erfundener Kundenstimmen. -->
|
||||
<div class="wd-notiz wd-auf">
|
||||
<p><strong data-i18n="pf_regeln_titel">Was hier bewusst fehlt</strong><br />
|
||||
<span data-i18n="pf_regeln_text">Es steht kein einziges Kundenzitat auf dieser Seite. Nicht, weil es keine zufriedenen Kunden gäbe, sondern weil noch niemand ein Zitat geschrieben und freigegeben hat.</span></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="pf_cta_h2">Soll deins das dritte sein?</h2>
|
||||
<p class="wd-lead" data-i18n="pf_cta_p">Ob dein Projekt hier später auftaucht, entscheidest ausschließlich du — die Aufnahme ins Portfolio ist von der Veröffentlichung deiner Seite getrennt und braucht deine ausdrückliche Erlaubnis.</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="wd-fuss"></div>
|
||||
|
||||
<script src="/assets/js/i18n-wd-portfolio.js?v=20260822wd"></script>
|
||||
<script src="/assets/js/wd-core.js?v=20260822wd"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
+155
@@ -0,0 +1,155 @@
|
||||
/* =====================================================================
|
||||
sw.js — Service Worker NUR für /webdesign/
|
||||
Macht den Bereich auf Handy und Computer als App installierbar und
|
||||
sorgt dafür, dass die Oberfläche auch bei wackeliger Verbindung
|
||||
sofort da ist.
|
||||
|
||||
⚠️ SICHERHEITSENTSCHEIDUNG, DIE HIER DEN AUSSCHLAG GIBT
|
||||
|
||||
Der Webdesign-Bereich ist zugangsgeschützt (server/webdesign-gate.js).
|
||||
Ein Service Worker, der HTML-Seiten zwischenspeichert, würde diesen
|
||||
Schutz aushebeln: Nach dem Abmelden — oder nachdem jemand anders das
|
||||
Gerät in die Hand nimmt — lieferte der Zwischenspeicher die geschützten
|
||||
Seiten samt Preisen, Anfragen und Kundendaten weiterhin aus, ohne dass
|
||||
der Server je gefragt wird. Genau das ist der klassische Fehler bei
|
||||
PWAs hinter einer Anmeldung.
|
||||
|
||||
Deshalb gilt hier strikt:
|
||||
- HTML-Seiten werden NIEMALS zwischengespeichert. Immer Netz.
|
||||
Ist kein Netz da, kommt eine schlichte Offline-Meldung — nicht die
|
||||
zuletzt gesehene, möglicherweise vertrauliche Seite.
|
||||
- Zwischengespeichert werden ausschließlich die neutralen Bausteine
|
||||
unter /assets/ (Stilvorlagen, Skripte, Logo, Icons). Die enthalten
|
||||
keine Kunden- oder Projektdaten und liegen ohnehin außerhalb der
|
||||
Zugangsschranke.
|
||||
- Antworten der API (postfach.dogfather-universe.com) werden
|
||||
ebenfalls nie zwischengespeichert.
|
||||
|
||||
Das kostet Offline-Komfort. Der ist hier aber weniger wert als die
|
||||
Zusicherung, dass nach dem Schließen der Sitzung wirklich nichts mehr
|
||||
einsehbar ist.
|
||||
===================================================================== */
|
||||
|
||||
/* Version im Namen: eine Änderung dieser Zeichenkette wirft beim nächsten
|
||||
Start alle alten Zwischenspeicher weg. Muss bei jeder Änderung an den
|
||||
Dateien unten hochgezählt werden, sonst hängen Nutzer auf einem alten
|
||||
Stand fest. */
|
||||
const CACHE_NAME = "dogfather-webdesign-v1";
|
||||
|
||||
/* Bausteine, die die Oberfläche zum Anzeigen braucht. Bewusst KEINE
|
||||
HTML-Datei in dieser Liste. */
|
||||
const GRUNDGERUEST = [
|
||||
"/assets/css/main.css",
|
||||
"/assets/css/webdesign.css",
|
||||
"/assets/js/wd-core.js",
|
||||
"/assets/img/logo-dogfather-transparent.png",
|
||||
"/assets/img/wd-app-192.png",
|
||||
"/assets/img/wd-app-512.png",
|
||||
];
|
||||
|
||||
self.addEventListener("install", (ereignis) => {
|
||||
ereignis.waitUntil(
|
||||
caches.open(CACHE_NAME).then((speicher) =>
|
||||
/* addAll bricht komplett ab, wenn EINE Datei fehlt — dann wäre der
|
||||
Service Worker gar nicht erst installiert und die App nicht
|
||||
installierbar. Deshalb jede Datei einzeln und Fehler schlucken. */
|
||||
Promise.all(
|
||||
GRUNDGERUEST.map((pfad) =>
|
||||
speicher.add(new Request(pfad, { cache: "reload" })).catch(() => {})
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
/* Sofort übernehmen statt auf das Schließen aller Tabs zu warten —
|
||||
sonst bleibt nach einem Deploy tagelang die alte Fassung aktiv. */
|
||||
self.skipWaiting();
|
||||
});
|
||||
|
||||
self.addEventListener("activate", (ereignis) => {
|
||||
ereignis.waitUntil(
|
||||
caches.keys()
|
||||
.then((namen) => Promise.all(
|
||||
namen.filter((n) => n !== CACHE_NAME).map((n) => caches.delete(n))
|
||||
))
|
||||
.then(() => self.clients.claim())
|
||||
);
|
||||
});
|
||||
|
||||
/* Schlichte Offline-Meldung. Bewusst als erzeugte Antwort statt als
|
||||
Datei — so kann sie nie mit echtem Seiteninhalt verwechselt werden.
|
||||
Fünf Sprachen wären hier Überinstrumentierung: der Text erscheint nur
|
||||
ohne Internet und ist absichtlich sehr kurz gehalten. */
|
||||
function offlineSeite() {
|
||||
return new Response(
|
||||
`<!DOCTYPE html><html lang="de"><head><meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Keine Verbindung</title>
|
||||
<style>
|
||||
body{margin:0;min-height:100svh;display:flex;align-items:center;justify-content:center;
|
||||
background:#05070b;color:#eef4fb;font-family:system-ui,sans-serif;text-align:center;padding:2rem}
|
||||
.k{max-width:34ch}
|
||||
h1{font-size:1.4rem;margin:0 0 .6rem}
|
||||
p{color:#b3c2d4;line-height:1.6;margin:0 0 1.4rem}
|
||||
button{min-height:48px;padding:.8rem 1.6rem;border:none;border-radius:999px;
|
||||
background:#7fd0e8;color:#04070c;font-weight:700;font-size:1rem;cursor:pointer}
|
||||
</style></head><body>
|
||||
<div class="k">
|
||||
<h1>Keine Verbindung</h1>
|
||||
<p>Dogfather Webdesign braucht eine Internetverbindung. Sobald du wieder online bist, geht es normal weiter.</p>
|
||||
<button onclick="location.reload()">Erneut versuchen</button>
|
||||
</div></body></html>`,
|
||||
{ status: 503, headers: { "Content-Type": "text/html; charset=utf-8" } }
|
||||
);
|
||||
}
|
||||
|
||||
self.addEventListener("fetch", (ereignis) => {
|
||||
const anfrage = ereignis.request;
|
||||
|
||||
// Nur einfache Abrufe. Absendungen (POST) gehen immer direkt ans Netz.
|
||||
if (anfrage.method !== "GET") return;
|
||||
|
||||
const url = new URL(anfrage.url);
|
||||
|
||||
// Fremde Server (API, externe Bilder) nie anfassen.
|
||||
if (url.origin !== self.location.origin) return;
|
||||
|
||||
/* --- HTML: immer Netz, niemals zwischenspeichern (siehe Kopf) --- */
|
||||
const willHtml = anfrage.mode === "navigate" ||
|
||||
(anfrage.headers.get("accept") || "").includes("text/html");
|
||||
if (willHtml) {
|
||||
ereignis.respondWith(
|
||||
fetch(anfrage).catch(() => offlineSeite())
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
/* --- Zugangs-Endpunkte niemals zwischenspeichern --- */
|
||||
if (url.pathname.startsWith("/webdesign/zugang-")) return;
|
||||
|
||||
/* --- Neutrale Bausteine: erst Zwischenspeicher, dann Netz ---
|
||||
"stale-while-revalidate": die gespeicherte Fassung geht sofort raus
|
||||
(die Seite baut sich ohne Wartezeit auf), im Hintergrund wird eine
|
||||
frische geholt und für das nächste Mal abgelegt. */
|
||||
if (url.pathname.startsWith("/assets/")) {
|
||||
ereignis.respondWith(
|
||||
caches.open(CACHE_NAME).then(async (speicher) => {
|
||||
const gespeichert = await speicher.match(anfrage);
|
||||
const ausDemNetz = fetch(anfrage)
|
||||
.then((antwort) => {
|
||||
/* Nur vollständige, eigene Antworten ablegen. Teilantworten
|
||||
(206, z.B. bei Video-Sprüngen) lassen sich nicht sinnvoll
|
||||
zwischenspeichern und würden den Speicher beschädigen. */
|
||||
if (antwort && antwort.status === 200 && antwort.type === "basic") {
|
||||
speicher.put(anfrage, antwort.clone());
|
||||
}
|
||||
return antwort;
|
||||
})
|
||||
.catch(() => null);
|
||||
|
||||
return gespeichert || (await ausDemNetz) || Response.error();
|
||||
})
|
||||
);
|
||||
}
|
||||
/* Alles Übrige: kein respondWith -> der Browser macht es ganz normal
|
||||
selbst. Das ist die sicherste Voreinstellung. */
|
||||
});
|
||||
@@ -0,0 +1,133 @@
|
||||
<!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>Über Dogfather — Dogfather Webdesign</title>
|
||||
<meta name="description" content="Keine Agentur, keine Ticketnummer: wer hier baut, wie gearbeitet wird und woran das gelernt wurde." />
|
||||
<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>
|
||||
.ue-kopf { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
|
||||
/* Auf dem Handy zuerst der Text, dann das Bild: sonst schiebt ein
|
||||
hohes 4:5-Porträt die Überschrift komplett aus dem ersten Bildschirm. */
|
||||
@media (max-width: 860px) {
|
||||
.ue-kopf { grid-template-columns: 1fr; }
|
||||
.ue-kopf-bild { order: 2; margin-top: .5rem; }
|
||||
.ue-kopf-text { order: 1; }
|
||||
}
|
||||
.ue-portrait {
|
||||
width: 100%; max-width: 400px; 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);
|
||||
}
|
||||
.ue-fliess p { font-size: clamp(1.02rem, 1.6vw, 1.14rem); max-width: 72ch; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="wd">
|
||||
|
||||
<div id="wd-kopf"></div>
|
||||
|
||||
<main id="wd-inhalt">
|
||||
|
||||
<section class="wd-abschnitt" style="padding-top:clamp(2.4rem,6vw,4rem)">
|
||||
<div class="wd-container">
|
||||
<div class="ue-kopf">
|
||||
<div class="ue-kopf-bild">
|
||||
<img class="ue-portrait wd-auf" src="/assets/img/wd-dogfather-portrait.jpg"
|
||||
alt="Dogfather" width="900" height="1125" fetchpriority="high" decoding="async"
|
||||
data-i18n-attr="alt:ue_foto_alt" />
|
||||
</div>
|
||||
<div class="ue-kopf-text">
|
||||
<span class="wd-eyebrow" data-i18n="ue_eyebrow">Über Dogfather</span>
|
||||
<h1 data-i18n="ue_h1">Wer hier eigentlich baut</h1>
|
||||
<p class="wd-lead" data-i18n="ue_lead">Keine Agentur, kein Callcenter, keine Ticketnummer. Eine Person, die dein Projekt von der ersten Nachricht bis zur Übergabe begleitet — und die danach noch erreichbar ist.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wd-abschnitt wd-abschnitt--eng" style="padding-top:0">
|
||||
<div class="wd-container wd-container--schmal ue-fliess">
|
||||
<p class="wd-auf" data-i18n="ue_text1">Dogfather ist der Name, unter dem ich seit Jahren im Netz unterwegs bin — als Streamer, als Teil einer Community und mittlerweile auch als jemand, der Webseiten baut. Das eine ist aus dem anderen entstanden: Irgendwann brauchte das eigene Projekt eine richtige Seite, dann brauchte jemand aus dem Umfeld eine, dann noch jemand.</p>
|
||||
<p class="wd-auf" data-i18n="ue_text2">Dadurch sind die Seiten hier nicht am Reißbrett entstanden, sondern an echten Problemen: Eine Shop-Inhaberin, die ihre Artikel selbst pflegen können muss, ohne Angst etwas kaputtzumachen. Ein Team, das seine eigenen Inhalte ändern will, ohne jedes Mal jemanden zu fragen. Genau daran messe ich, ob eine Seite gut ist — nicht daran, wie sie auf einem Werbebild aussieht.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ---------------- Arbeitsweise ---------------- -->
|
||||
<section class="wd-abschnitt wd-abschnitt--gehoben">
|
||||
<div class="wd-container">
|
||||
<h2 class="wd-auf" data-i18n="ue_werte_h2">Wie ich arbeite</h2>
|
||||
<div class="wd-grid wd-grid--2" style="margin-top:1.8rem">
|
||||
<div class="wd-karte wd-karte--kappe wd-auf">
|
||||
<h3 data-i18n="ue_w1_h3">Ehrlich vor gefällig</h3>
|
||||
<p data-i18n="ue_w1_p">Wenn ein kleineres Paket reicht, sage ich das — auch wenn ich damit weniger verdiene. Wenn etwas technisch nicht sinnvoll ist, sage ich das vorher, nicht wenn die Anzahlung schon da ist.</p>
|
||||
</div>
|
||||
<div class="wd-karte wd-karte--lila wd-karte--kappe wd-auf">
|
||||
<h3 data-i18n="ue_w2_h3">Handy zuerst</h3>
|
||||
<p data-i18n="ue_w2_p">Die meisten Besucher kommen mit dem Handy. Deshalb wird dort zuerst geprüft, nicht zuletzt — und zwar auf echten Bildschirmgrößen, nicht nur in einem verkleinerten Fenster am Computer.</p>
|
||||
</div>
|
||||
<div class="wd-karte wd-karte--lila wd-karte--kappe wd-auf">
|
||||
<h3 data-i18n="ue_w3_h3">Fertig heißt fertig</h3>
|
||||
<p data-i18n="ue_w3_p">Keine halb fertigen Unterseiten, keine Platzhalter und keine Links, die ins Leere führen. Eine Seite gilt erst als fertig, wenn jedes Formular, jeder Zugang und jeder Fehlerfall wirklich durchgespielt wurde.</p>
|
||||
</div>
|
||||
<div class="wd-karte wd-karte--kappe wd-auf">
|
||||
<h3 data-i18n="ue_w4_h3">Augenschonend</h3>
|
||||
<p data-i18n="ue_w4_p">Dunkel, kontraststark genug zum Lesen, aber ohne grelle Neonfarben und ohne flackernde Effekte. Wer in den Systemeinstellungen weniger Bewegung wünscht, bekommt sie auch nicht.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ---------------- Erfahrung ---------------- -->
|
||||
<section class="wd-abschnitt">
|
||||
<div class="wd-container">
|
||||
<h2 class="wd-auf" data-i18n="ue_erfahrung_h2">Woran ich das gelernt habe</h2>
|
||||
<div class="wd-grid wd-grid--2" style="margin-top:1.8rem">
|
||||
<div class="wd-karte wd-karte--kappe wd-auf">
|
||||
<h3 data-i18n="ue_e1_h3">Dogfather Universe</h3>
|
||||
<p data-i18n="ue_e1_p">Eine Plattform mit fünf Sprachen, Teamseiten, Bewerbungssystem, Supporter-Abo mit Zahlungsanbindung und einem Verwaltungsbereich, in dem Inhalte ohne Programmierkenntnisse gepflegt werden. Öffentlich seit August 2026, auf einem eigenen Server.</p>
|
||||
</div>
|
||||
<div class="wd-karte wd-karte--lila wd-karte--kappe wd-auf">
|
||||
<h3 data-i18n="ue_e2_h3">Van's DIY & Bastelbedarf</h3>
|
||||
<p data-i18n="ue_e2_p">Ein vollständiger Onlineshop mit Warenkorb, Gutscheincodes und Versandabläufen — und einem Adminbereich, der so gebaut ist, dass die Inhaberin ihn ohne Technikkenntnisse bedient. Genau daran habe ich gelernt, wie viel Aufwand in „einfach zu bedienen“ steckt.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wd-btn-reihe wd-auf" style="margin-top:1.4rem">
|
||||
<a class="wd-btn wd-btn--zweit" href="/webdesign/portfolio.html" data-i18n="ue_projekte">Projekte ansehen</a>
|
||||
</div>
|
||||
|
||||
<div class="wd-notiz wd-auf" style="margin-top:1.6rem">
|
||||
<p><strong data-i18n="ue_team_titel">Nicht allein, aber verantwortlich</strong><br />
|
||||
<span data-i18n="ue_team_text">Bei Rückfragen, Gegenlesen und der Abnahme hilft VanVan mit — sie hat auf diese Vorabversion dieselben Rechte wie ich. Deine Ansprechperson für dein Projekt bleibe trotzdem ich, damit du nie erklären musst, was du letzte Woche schon erklärt hast.</span></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="ue_cta_h2">Klingt das nach jemandem, mit dem du arbeiten willst?</h2>
|
||||
<p class="wd-lead" data-i18n="ue_cta_p">Dann erzähl mir von deinem Vorhaben. Das Formular dauert ein paar Minuten und verpflichtet dich zu nichts.</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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<div id="wd-fuss"></div>
|
||||
|
||||
<script src="/assets/js/i18n-wd-ueber.js?v=20260822wd"></script>
|
||||
<script src="/assets/js/wd-core.js?v=20260822wd"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,280 @@
|
||||
<!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>Zugang — Dogfather Webdesign</title>
|
||||
<!-- Doppelt abgesichert: server/webdesign-gate.js schickt zusätzlich einen
|
||||
X-Robots-Tag-Header. Der Header wirkt auch dann, wenn die Seite gar
|
||||
nicht ausgeliefert wird; dieses meta wirkt auch dann, wenn die Datei
|
||||
einmal ohne den Server geöffnet wird. -->
|
||||
<meta name="robots" content="noindex, nofollow, noarchive" />
|
||||
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
|
||||
<meta name="theme-color" content="#05070b" />
|
||||
<!-- Auch hier Manifest und Symbol: die Zugangswand ist der ERSTE
|
||||
Bildschirm überhaupt, also auch der, von dem aus installiert wird.
|
||||
Genau dieser Punkt fehlte am 19.08.2026 in der Universe-Zugangsseite
|
||||
und führte dazu, dass eine Installation nur eine nackte Verknüpfung
|
||||
ohne Symbol ergab. -->
|
||||
<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>
|
||||
/* =====================================================================
|
||||
Zugangswand — nur hier gebraucht, deshalb bewusst NICHT in
|
||||
webdesign.css (die Datei wird von jeder Seite geladen; Regeln, die
|
||||
genau eine Seite braucht, gehören nicht in jeden Ladevorgang).
|
||||
===================================================================== */
|
||||
.zg-buehne {
|
||||
min-height: calc(100svh - 66px);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
padding: clamp(1.5rem, 5vw, 3.5rem) 0;
|
||||
}
|
||||
.zg-mitte { width: min(940px, 92vw); text-align: center; }
|
||||
|
||||
.zg-logo { width: clamp(120px, 22vw, 176px); margin: 0 auto 1.2rem; position: relative; }
|
||||
.zg-logo img { width: 100%; height: auto; filter: drop-shadow(0 18px 34px rgba(0,0,0,.7)); }
|
||||
/* Ruhige Glut HINTER der freigestellten Logoform — bewusst kein
|
||||
rotierender Ring: der verzerrt sich auf unregelmäßigen Formen
|
||||
(dokumentierte Lektion aus gate.html). */
|
||||
.zg-logo::before {
|
||||
content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(127,208,232,.34) 0%, rgba(183,157,255,.18) 46%, transparent 72%);
|
||||
filter: blur(30px);
|
||||
}
|
||||
|
||||
.zg-mitte h1 { margin-bottom: .35em; }
|
||||
.zg-mitte > p { max-width: 56ch; margin-left: auto; margin-right: auto; }
|
||||
|
||||
/* Zwei gleich große Karten — die Gleichwertigkeit ist hier bewusst auch
|
||||
optisch umgesetzt: gleiche Größe, gleiche Struktur, gleicher
|
||||
Rollenhinweis. Unterschiedlich ist nur die Farbwelt, damit man auf
|
||||
einen Blick sieht, welche Karte wem gehört. */
|
||||
.zg-karten {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr);
|
||||
gap: clamp(.9rem, 2.4vw, 1.5rem);
|
||||
margin: clamp(1.8rem, 4vw, 2.8rem) 0 1.6rem;
|
||||
text-align: left;
|
||||
}
|
||||
@media (max-width: 720px) { .zg-karten { grid-template-columns: 1fr; } }
|
||||
|
||||
.zg-karte { display: flex; flex-direction: column; }
|
||||
.zg-karte-kopf { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
|
||||
.zg-foto {
|
||||
width: 76px; height: 76px; flex-shrink: 0;
|
||||
border-radius: 50%; object-fit: cover;
|
||||
border: 2px solid var(--wd-rand-stark);
|
||||
box-shadow: 0 0 22px -6px rgba(127,208,232,.5);
|
||||
}
|
||||
.zg-karte--vanvan .zg-foto { border-color: rgba(183,157,255,.55); box-shadow: 0 0 22px -6px rgba(183,157,255,.55); }
|
||||
/* ".wd h2" (webdesign.css) ist spezifischer als eine reine Klasse und
|
||||
würde eine Angabe an ".zg-name" allein schlicht überstimmen — der Name
|
||||
stand dadurch in voller Überschriftengröße da. Deshalb hier bewusst
|
||||
ebenfalls zweistufig geschrieben. */
|
||||
.wd .zg-name { margin: 0; font-size: clamp(1.35rem, 3.2vw, 1.6rem); }
|
||||
.zg-rolle { margin: .1rem 0 0; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--wd-blau); }
|
||||
.zg-karte--vanvan .zg-rolle { color: var(--wd-lila); }
|
||||
|
||||
.zg-karte .wd-feld { margin-bottom: .9rem; }
|
||||
/* Code-Eingabe: großzügige Sperrung und mittige Ausrichtung, damit ein
|
||||
kurzer Code nicht verloren am linken Rand klebt. */
|
||||
.zg-karte input {
|
||||
text-align: center; letter-spacing: .16em; font-weight: 700; font-size: 1.05rem;
|
||||
}
|
||||
.zg-karte input::placeholder { letter-spacing: normal; font-weight: 400; }
|
||||
.zg-karte--vanvan input:focus { border-color: var(--wd-lila); box-shadow: 0 0 0 4px rgba(183,157,255,.16); }
|
||||
.zg-karte--vanvan .wd-btn--haupt {
|
||||
background: linear-gradient(135deg, #cdbcff, var(--wd-lila) 55%, #9b7ef0);
|
||||
box-shadow: 0 12px 34px -14px rgba(183,157,255,.8);
|
||||
}
|
||||
.zg-karte .wd-btn { margin-top: auto; }
|
||||
|
||||
.zg-fehler {
|
||||
display: none; margin: .7rem 0 0;
|
||||
font-size: .92rem; font-weight: 600; color: var(--wd-fehler);
|
||||
}
|
||||
.zg-fehler.zg-zeige { display: block; }
|
||||
|
||||
.zg-unten { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin-top: 1.4rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="wd">
|
||||
|
||||
<div id="wd-kopf" data-wd-kopf="minimal"></div>
|
||||
|
||||
<main class="zg-buehne">
|
||||
<div class="zg-mitte">
|
||||
|
||||
<div class="zg-logo">
|
||||
<img src="/assets/img/logo-dogfather-transparent.png" alt="" width="472" height="476" />
|
||||
</div>
|
||||
|
||||
<span class="wd-eyebrow" data-i18n="zg_eyebrow">Nicht öffentlich bis zur Freigabe</span>
|
||||
<h1 data-i18n="zg_h1">Willkommen zurück</h1>
|
||||
<p class="wd-lead" data-i18n="zg_text">Diese Vorabversion ist nur für Dogfather und VanVan gedacht. Wähle deine Karte und gib deinen persönlichen Zugangscode ein.</p>
|
||||
|
||||
<div class="zg-karten">
|
||||
|
||||
<!-- Karte 1: Dogfather -->
|
||||
<form class="wd-karte wd-karte--kappe zg-karte zg-karte--dogfather" id="zg-form-dogfather" novalidate>
|
||||
<div class="zg-karte-kopf">
|
||||
<img class="zg-foto" src="/assets/img/wd-dogfather-karte.jpg" alt="" width="76" height="76" />
|
||||
<div>
|
||||
<h2 class="zg-name" data-i18n="zg_dogfather">Dogfather</h2>
|
||||
<p class="zg-rolle" data-i18n="zg_rolle">Volladministrator</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wd-feld">
|
||||
<!-- Sichtbares Label statt nur Platzhalter: ein Platzhalter
|
||||
verschwindet beim Tippen und ist für Screenreader kein Ersatz. -->
|
||||
<label for="zg-code-dogfather" data-i18n="zg_code_label">Zugangscode</label>
|
||||
<!-- KEIN autofocus (Lektion vom 21.08.2026 aus gate.html): bei zwei
|
||||
gleichberechtigten Karten zieht ein vorausgewähltes Feld auf dem
|
||||
Handy den Cursor und die Ansicht zur falschen Karte, sobald die
|
||||
Seite fertig geladen hat. -->
|
||||
<input type="password" id="zg-code-dogfather" name="code"
|
||||
autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"
|
||||
inputmode="text" aria-describedby="zg-fehler-dogfather" />
|
||||
</div>
|
||||
<button type="submit" class="wd-btn wd-btn--haupt wd-btn--breit" data-i18n="zg_oeffnen">Öffnen</button>
|
||||
<p class="zg-fehler" id="zg-fehler-dogfather" role="alert"></p>
|
||||
</form>
|
||||
|
||||
<!-- Karte 2: VanVan — gleiche Struktur, gleiche Rechte, eigene Farbwelt -->
|
||||
<form class="wd-karte wd-karte--lila wd-karte--kappe zg-karte zg-karte--vanvan" id="zg-form-vanvan" novalidate>
|
||||
<div class="zg-karte-kopf">
|
||||
<img class="zg-foto" src="/assets/img/wd-vanvan-karte.jpg" alt="" width="76" height="76" />
|
||||
<div>
|
||||
<h2 class="zg-name" data-i18n="zg_vanvan">VanVan</h2>
|
||||
<p class="zg-rolle" data-i18n="zg_rolle">Volladministrator</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wd-feld">
|
||||
<label for="zg-code-vanvan" data-i18n="zg_code_label">Zugangscode</label>
|
||||
<input type="password" id="zg-code-vanvan" name="code"
|
||||
autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false"
|
||||
inputmode="text" aria-describedby="zg-fehler-vanvan" />
|
||||
</div>
|
||||
<button type="submit" class="wd-btn wd-btn--haupt wd-btn--breit" data-i18n="zg_oeffnen">Öffnen</button>
|
||||
<p class="zg-fehler" id="zg-fehler-vanvan" role="alert"></p>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wd-hinweis" style="text-align:left">
|
||||
<p class="wd-hinweis-titel" data-i18n="zg_sicher_titel">Warum ein Code?</p>
|
||||
<p data-i18n="zg_sicher_text">Solange die Seite nicht freigegeben ist, soll niemand Preise, Beispiele oder Kundendaten sehen können. Der Code wird ausschließlich auf dem Server geprüft und nie im Browser gespeichert. Nach fünf Fehlversuchen greift eine kurze Wartezeit.</p>
|
||||
</div>
|
||||
|
||||
<div class="zg-unten">
|
||||
<a class="wd-btn wd-btn--still wd-btn--klein" href="/index.html" data-i18n="zg_zurueck">Zum Dogfather Universe</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/assets/js/i18n-wd-zugang.js?v=20260822wd"></script>
|
||||
<script src="/assets/js/wd-core.js?v=20260822wd"></script>
|
||||
<script>
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
/* Zielpfad aus der Adresszeile. Wird zusätzlich SERVERSEITIG geprüft
|
||||
(sicherePfadAngabe in webdesign-gate.js) — diese Prüfung hier ist nur
|
||||
die freundliche erste Stufe, niemals die eigentliche Absicherung. */
|
||||
var params = new URLSearchParams(location.search);
|
||||
var roh = params.get("next") || "/webdesign/";
|
||||
var ziel = (roh.indexOf("/webdesign/") === 0 && roh.indexOf("//") !== 0 && roh.indexOf("\\") < 0 && roh.indexOf("..") < 0)
|
||||
? roh : "/webdesign/";
|
||||
|
||||
var ZEITLIMIT_MS = 12000;
|
||||
|
||||
function binde(formId, inputId, fehlerId) {
|
||||
var form = document.getElementById(formId);
|
||||
var eingabe = document.getElementById(inputId);
|
||||
var fehlerEl = document.getElementById(fehlerId);
|
||||
var knopf = form.querySelector('button[type="submit"]');
|
||||
var laeuft = false;
|
||||
|
||||
function sperren(an, text) {
|
||||
laeuft = an;
|
||||
knopf.disabled = an;
|
||||
knopf.setAttribute("aria-busy", an ? "true" : "false");
|
||||
knopf.textContent = text;
|
||||
}
|
||||
|
||||
function fehler(text) {
|
||||
fehlerEl.textContent = text;
|
||||
fehlerEl.classList.add("zg-zeige");
|
||||
form.querySelector(".wd-feld").classList.add("wd-feld--fehler");
|
||||
}
|
||||
|
||||
form.addEventListener("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
if (laeuft) return; // Doppel-Tap ignorieren
|
||||
fehlerEl.classList.remove("zg-zeige");
|
||||
form.querySelector(".wd-feld").classList.remove("wd-feld--fehler");
|
||||
|
||||
var code = eingabe.value.trim();
|
||||
if (!code) {
|
||||
fehler(window.WD.t("zg_leer"));
|
||||
eingabe.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
sperren(true, window.WD.t("zg_pruefe"));
|
||||
|
||||
/* AbortController statt AbortSignal.timeout(): letzteres kennen
|
||||
ältere Handy-Browser nicht. Ohne Zeitlimit hängt fetch im
|
||||
Mobilfunk unbegrenzt und es sieht aus, als sei der Tap nie
|
||||
angekommen (genau dieser Report kam am 19.08.2026 zu gate.html). */
|
||||
var abbruch = new AbortController();
|
||||
var timer = setTimeout(function () { abbruch.abort(); }, ZEITLIMIT_MS);
|
||||
|
||||
try {
|
||||
var antwort = await fetch("/webdesign/zugang-pruefen", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ code: code, next: ziel }),
|
||||
signal: abbruch.signal,
|
||||
});
|
||||
var daten = await antwort.json().catch(function () { return null; });
|
||||
|
||||
if (!antwort.ok || !daten || !daten.ok) {
|
||||
fehler((daten && daten.error) || window.WD.t("zg_falsch"));
|
||||
sperren(false, window.WD.t("zg_oeffnen"));
|
||||
eingabe.select();
|
||||
return;
|
||||
}
|
||||
|
||||
/* Erfolg: Knopf bewusst gesperrt lassen — die Seite wechselt
|
||||
gleich, ein weiterer Tap wäre nur verwirrend. */
|
||||
knopf.textContent = window.WD.t("zg_willkommen");
|
||||
location.href = daten.next || "/webdesign/";
|
||||
} catch (err) {
|
||||
fehler(err && err.name === "AbortError"
|
||||
? window.WD.t("fehler_zeit")
|
||||
: window.WD.t("fehler_verbindung"));
|
||||
sperren(false, window.WD.t("zg_oeffnen"));
|
||||
} finally {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
});
|
||||
|
||||
/* Nach einem Sprachwechsel muss auch die Knopfbeschriftung mitziehen —
|
||||
sie wird oben per JS gesetzt und trägt deshalb kein data-i18n. */
|
||||
document.addEventListener("wd-sprache-geaendert", function () {
|
||||
if (!laeuft) knopf.textContent = window.WD.t("zg_oeffnen");
|
||||
});
|
||||
}
|
||||
|
||||
binde("zg-form-dogfather", "zg-code-dogfather", "zg-fehler-dogfather");
|
||||
binde("zg-form-vanvan", "zg-code-vanvan", "zg-fehler-vanvan");
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user