DogFatherGitandClaude Opus 5
3ca9f0b0cd
"Sieht gut aus" ist Geschmack und laesst sich nicht pruefen. Handwerkliche
Qualitaet laesst sich pruefen -- und bei einer WEBDESIGN-Seite ist sie
zugleich das Verkaufsargument: Wer selbst schludert, kann schlecht
Sorgfalt verkaufen.
Neues Werkzeug pruef-design.mjs misst 13 Seiten x 5 Sprachen auf
Handy-Breite gegen WCAG 2.2 AA -- denselben Standard, auf den auch das
Barrierefreiheitsstaerkungsgesetz verweist. Der Browser rechnet, es wird
nichts geschaetzt.
ERGEBNIS: 0 Befunde. Kontrast, Klickflaechen, Tastaturfokus,
Ueberschriftenstruktur, Bildalternativen, Feldbeschriftungen,
lang-Attribut, Schriftgroessen.
ECHTE BEFUNDE, DIE BEHOBEN WURDEN
1. 23 Schriftgroessen unter 12px (bis hinunter zu 10,9px), verteilt ueber
CSS und sieben Seiten. Betroffen waren durchweg gesperrte
Grossbuchstaben-Beschriftungen -- also genau die Textsorte, die klein
ohnehin am schlechtesten lesbar ist. Alle auf mindestens 12px, die
gesperrten auf 12,8px. Das ist zugleich die Dauervorgabe
"augenschonend" ernst genommen.
2. Ueberschriftensprung h2 -> h4 in der Fusszeile, auf ALLEN 13 Seiten in
allen 5 Sprachen (42 Stellen). Wer sich mit einem Screenreader durch
die Ueberschriften bewegt, hoert dadurch eine Gliederung, die es nicht
gibt, und vermutet uebersprungene Abschnitte. Jetzt h2 mit
Gestaltungsklasse: Die Ebene sagt etwas ueber die STRUKTUR, die
Groesse ueber die GEWICHTUNG -- zwei verschiedene Dinge.
3. code-Auszeichnung auf der Rechtsseite rutschte durch relative
Groessenangabe auf 11,2px. Jetzt mit Untergrenze abgesichert.
SECHS FEHLALARME IM WERKZEUG -- ALLE GEFUNDEN UND BESEITIGT
Der erste Lauf meldete 302 Fundstellen. Fast alle waren falsch. Haette
ich sie "repariert", haette ich funktionierende Gestaltung zerstoert.
Jeder Fehlalarm hatte eine eigene, nicht offensichtliche Ursache:
* Farbverlaeufe: getComputedStyle().backgroundColor liefert bei einer
reinen Verlaufsflaeche "rgba(0,0,0,0)". Die Suche lief an der hellen
Knopfflaeche VORBEI bis zum dunklen Seitengrund und verglich dunkle
Schrift mit dunklem Grund -- Ergebnis 1:1 fuer 60 einwandfreie
Knoepfe. Jetzt werden die Farbstopps ausgelesen und der
unguenstigste Fall gerechnet.
* MEHRERE Hintergrundebenen: Die Karten nutzen den bekannten Kniff
"Flaeche padding-box, Rahmenverlauf border-box". Der helle
Rahmenverlauf ist im Textbereich gar nicht sichtbar. Alle Ebenen
zusammenzurechnen ergab 820 Meldungen mit Werten wie "3,45:1" fuer
Text, der in Wahrheit ueber 7:1 liegt. CSS malt die ERSTE Ebene oben
-- nur die zaehlt. Das Trennen an Kommas muss dabei die Kommas
INNERHALB der Verlaufsklammern respektieren.
* Verlaufsschrift (background-clip:text): Dort ist die Schriftfarbe
durchsichtig und der Verlauf IST der Text. Farbe gegen Hintergrund zu
vergleichen ergibt zwangslaeufig 1:1.
* Verlaufsstopps mit wenig Deckkraft (9 % und 4 % Gold in den
Hinweiskaesten) wurden verworfen statt auf den Untergrund gerechnet.
Uebrig blieb "nicht messbar" fuer 72 Textstellen. Ein Pruefwerkzeug,
das bei allem passt, prueft nichts.
* Laufende Ueberblendungen: getComputedStyle liefert waehrend einer
Ueberblendung den ZWISCHENWERT. Nach blur() verblasst der Fokusring
ueber 0,16 s -- misst man sofort, sieht man ihn noch, und "vorher"
ist identisch mit "nachher". Das Codefeld der Verwaltung wurde
dadurch als "ohne sichtbaren Fokus" gemeldet. Nachgewiesen mit
el.matches(":focus") === false bei gleichzeitig sichtbarem Schatten.
Loesung: Ueberblendungen fuer die Messung abschalten.
* Ausgeblendete Abschnitte: Eine Ueberschrift in einem versteckten
Bereich hat selbst weiterhin display:block. Im Portal wurden dadurch
drei h1 gezaehlt, obwohl immer nur eine sichtbar ist. Jetzt
getClientRects().
Dazu zwei bekannte Muster, die das Werkzeug jetzt kennt: der Sprunglink
(absichtlich aus dem Bild geschoben) und die winzigen Auswahlfelder
hinter den Kacheln (die Kachel IST die Klickflaeche).
ALLE UEBRIGEN PRUEFUNGEN WEITERHIN GRUEN nach den Aenderungen:
Anfragedetail 20, Verwaltung 69, Portal 32, Widerruf 58, Textkodierung
55 Seiten-Sprach-Kombinationen.
Versionsstempel und Cache-Name auf v8.
Co-Authored-By: Claude Opus 5 <[email protected]>
426 lines
25 KiB
HTML
426 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" data-i18n-titel="seiten_titel">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Projekt anfragen — Dogfather Webdesign</title>
|
||
<meta name="description" content="Vier kurze Schritte zu deiner unverbindlichen Projektanfrage. Kostenlos, ohne Vertrag, mit Zusammenfassung vor dem Absenden." />
|
||
<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=20260823wd8" />
|
||
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd8" />
|
||
<style>
|
||
/* ---------- Schrittanzeige ----------
|
||
Zeigt alle vier Schritte gleichzeitig statt nur "3 von 4". Man sieht
|
||
dadurch von Anfang an, wie lang das Formular wirklich ist — die
|
||
wichtigste Maßnahme gegen Abbrüche. */
|
||
.af-schritte { display: flex; gap: .4rem; margin-bottom: .8rem; }
|
||
.af-schritt-marke { flex: 1; text-align: center; }
|
||
.af-schritt-balken {
|
||
height: 5px; border-radius: 999px; background: rgba(127,208,232,.14);
|
||
margin-bottom: .45rem; overflow: hidden;
|
||
}
|
||
.af-schritt-balken span {
|
||
display: block; height: 100%; width: 0;
|
||
background: linear-gradient(90deg, var(--wd-blau-tief), var(--wd-blau));
|
||
transition: width var(--wd-zeit-lang) cubic-bezier(.4,0,.2,1);
|
||
}
|
||
.af-schritt-marke.af-erledigt .af-schritt-balken span,
|
||
.af-schritt-marke.af-aktiv .af-schritt-balken span { width: 100%; }
|
||
.af-schritt-name {
|
||
font-size: 0.8rem; font-weight: 700; letter-spacing: .04em;
|
||
color: var(--wd-text-soft);
|
||
}
|
||
.af-schritt-marke.af-aktiv .af-schritt-name { color: var(--wd-blau); }
|
||
.af-schritt-marke.af-erledigt .af-schritt-name { color: var(--wd-text-mid); }
|
||
@media (max-width: 560px) {
|
||
/* Auf schmalen Bildschirmen nur der aktive Name — vier Namen
|
||
nebeneinander werden sonst auf zwei Buchstaben gequetscht. */
|
||
.af-schritt-marke:not(.af-aktiv) .af-schritt-name { display: none; }
|
||
.af-schritt-marke.af-aktiv { flex: 2; }
|
||
}
|
||
|
||
.af-zaehler { font-size: .85rem; color: var(--wd-text-soft); margin: 0 0 1.4rem; }
|
||
|
||
/* ---------- Seiten des Formulars ---------- */
|
||
.af-seite { display: none; }
|
||
.af-seite.af-sichtbar { display: block; animation: af-rein .3s ease both; }
|
||
@keyframes af-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
|
||
@media (prefers-reduced-motion: reduce) { .af-seite.af-sichtbar { animation: none; } }
|
||
|
||
.af-seite > h2 { font-size: clamp(1.35rem, 3.4vw, 1.9rem); margin-bottom: .8em; }
|
||
|
||
/* Honigtopf: für Menschen unsichtbar, für automatische Skripte ein
|
||
ganz normales Feld. Bewusst NICHT display:none — manche Skripte
|
||
überspringen versteckte Felder gezielt. So wirkt es echt. */
|
||
.af-falle {
|
||
position: absolute !important; left: -9999px !important;
|
||
width: 1px; height: 1px; overflow: hidden;
|
||
}
|
||
|
||
.af-knopfleiste {
|
||
display: flex; gap: .7rem; margin-top: 1.6rem;
|
||
padding-top: 1.2rem; border-top: 1px solid var(--wd-rand);
|
||
}
|
||
.af-knopfleiste .af-vor { margin-left: auto; }
|
||
@media (max-width: 520px) {
|
||
.af-knopfleiste { flex-direction: column-reverse; }
|
||
.af-knopfleiste .af-vor { margin-left: 0; }
|
||
.af-knopfleiste .wd-btn { width: 100%; }
|
||
}
|
||
|
||
/* ---------- Zusammenfassung ---------- */
|
||
.af-zus-block { border-bottom: 1px solid var(--wd-rand); padding: .9rem 0; }
|
||
.af-zus-block:last-of-type { border-bottom: none; }
|
||
.af-zus-kopf { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .5rem; }
|
||
.af-zus-kopf h3 { margin: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wd-blau); }
|
||
.af-zus-kopf button {
|
||
margin-left: auto; background: none; border: none; cursor: pointer;
|
||
color: var(--wd-blau); font-weight: 700; font-size: .85rem;
|
||
min-height: 44px; padding: 0 .3rem;
|
||
}
|
||
.af-zus-kopf button:hover { color: var(--wd-blau-hell); text-decoration: underline; }
|
||
.af-zus-zeile { display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr); gap: .3rem 1rem; margin-bottom: .35rem; }
|
||
@media (max-width: 560px) { .af-zus-zeile { grid-template-columns: 1fr; gap: 0; margin-bottom: .7rem; } }
|
||
.af-zus-was { color: var(--wd-text-soft); font-size: .93rem; }
|
||
.af-zus-wert { color: var(--wd-text); font-size: .97rem; overflow-wrap: break-word; }
|
||
.af-zus-wert.af-leer { color: var(--wd-text-soft); font-style: italic; }
|
||
|
||
/* ---------- Danke ---------- */
|
||
.af-danke { text-align: center; padding: clamp(1.5rem,4vw,2.5rem) 0; }
|
||
.af-danke-haken {
|
||
width: 74px; height: 74px; margin: 0 auto 1.2rem;
|
||
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||
background: rgba(111,214,163,.12); border: 2px solid var(--wd-ok);
|
||
font-size: 2.1rem; color: var(--wd-ok);
|
||
}
|
||
.af-nummer {
|
||
display: inline-block; margin: .3rem 0 .6rem;
|
||
font-family: var(--font-head); font-weight: 800;
|
||
font-size: clamp(1.5rem,4vw,2rem); letter-spacing: .06em;
|
||
color: var(--wd-gold);
|
||
padding: .5rem 1.2rem; border-radius: 12px;
|
||
background: rgba(232,200,119,.08); border: 1px solid rgba(232,200,119,.32);
|
||
}
|
||
|
||
.af-wieder {
|
||
display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem;
|
||
margin-bottom: 1.4rem;
|
||
}
|
||
.af-wieder[hidden] { display: none; }
|
||
</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(2rem,5vw,3.2rem)">
|
||
<div class="wd-container wd-container--schmal">
|
||
<span class="wd-eyebrow" data-i18n="af_eyebrow">Projektanfrage</span>
|
||
<h1 data-i18n="af_h1">Erzähl mir von deinem Vorhaben</h1>
|
||
<p class="wd-lead" data-i18n="af_lead">Vier kurze Schritte, etwa fünf Minuten. Unverbindlich, kostenlos — und du siehst am Ende alles noch einmal, bevor du absendest.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="wd-abschnitt" style="padding-top:0">
|
||
<div class="wd-container wd-container--schmal">
|
||
|
||
<!-- Hinweis auf wiederhergestellte Eingaben -->
|
||
<div class="wd-notiz af-wieder" id="af-wieder" hidden>
|
||
<p style="margin:0;flex:1" data-i18n="af_wiederhergestellt">Wir haben deine letzte Eingabe wiederhergestellt.</p>
|
||
<button type="button" class="wd-btn wd-btn--still wd-btn--klein" id="af-verwerfen" data-i18n="af_verwerfen">Neu anfangen</button>
|
||
</div>
|
||
|
||
<div class="wd-karte" id="af-rahmen">
|
||
|
||
<!-- Schrittanzeige -->
|
||
<div id="af-fortschritt">
|
||
<div class="af-schritte" role="list">
|
||
<div class="af-schritt-marke" role="listitem" data-marke="1">
|
||
<div class="af-schritt-balken"><span></span></div>
|
||
<div class="af-schritt-name" data-i18n="af_s1">Vorhaben</div>
|
||
</div>
|
||
<div class="af-schritt-marke" role="listitem" data-marke="2">
|
||
<div class="af-schritt-balken"><span></span></div>
|
||
<div class="af-schritt-name" data-i18n="af_s2">Umfang</div>
|
||
</div>
|
||
<div class="af-schritt-marke" role="listitem" data-marke="3">
|
||
<div class="af-schritt-balken"><span></span></div>
|
||
<div class="af-schritt-name" data-i18n="af_s3">Inhalte & Rahmen</div>
|
||
</div>
|
||
<div class="af-schritt-marke" role="listitem" data-marke="4">
|
||
<div class="af-schritt-balken"><span></span></div>
|
||
<div class="af-schritt-name" data-i18n="af_s4">Kontakt</div>
|
||
</div>
|
||
</div>
|
||
<p class="af-zaehler" id="af-zaehler" aria-live="polite">Schritt 1 von 4</p>
|
||
</div>
|
||
|
||
<div class="wd-meldung" id="af-meldung" hidden></div>
|
||
|
||
<form id="af-form" novalidate>
|
||
|
||
<!-- Honigtopf -->
|
||
<div class="af-falle" aria-hidden="true">
|
||
<label for="af-website">Website (bitte frei lassen)</label>
|
||
<input type="text" id="af-website" name="website" tabindex="-1" autocomplete="off" />
|
||
</div>
|
||
|
||
<!-- ============ SCHRITT 1 ============ -->
|
||
<div class="af-seite af-sichtbar" data-seite="1">
|
||
<h2 data-i18n="af1_h2">Worum geht es ungefähr?</h2>
|
||
|
||
<div class="wd-feld" id="feld-paket">
|
||
<span class="wd-feld-legende" data-i18n="af1_paket_label">Art des Projekts</span>
|
||
<span class="wd-feld-hilfe" data-i18n="af1_paket_hilfe">Nur eine grobe Richtung — wenn du unsicher bist, wähle das Letzte.</span>
|
||
<div class="wd-wahl wd-wahl--2" role="radiogroup" aria-labelledby="feld-paket">
|
||
<label class="wd-wahl-kachel">
|
||
<input type="radio" name="paket" value="onepager" />
|
||
<span class="wd-wahl-inhalt">
|
||
<span class="wd-wahl-titel" data-i18n="pk_onepager_h3">Onepager</span>
|
||
<span class="wd-wahl-text"><span data-i18n="ab_preis">ab</span> 300 €</span>
|
||
</span>
|
||
</label>
|
||
<label class="wd-wahl-kachel">
|
||
<input type="radio" name="paket" value="website" />
|
||
<span class="wd-wahl-inhalt">
|
||
<span class="wd-wahl-titel" data-i18n="pk_website_h3">Professionelle Website</span>
|
||
<span class="wd-wahl-text"><span data-i18n="ab_preis">ab</span> 500 €</span>
|
||
</span>
|
||
</label>
|
||
<label class="wd-wahl-kachel">
|
||
<input type="radio" name="paket" value="shop" />
|
||
<span class="wd-wahl-inhalt">
|
||
<span class="wd-wahl-titel" data-i18n="pk_shop_h3">Shop & umfangreiche Website</span>
|
||
<span class="wd-wahl-text"><span data-i18n="ab_preis">ab</span> 1.000 €</span>
|
||
</span>
|
||
</label>
|
||
<label class="wd-wahl-kachel">
|
||
<input type="radio" name="paket" value="verwaltung" />
|
||
<span class="wd-wahl-inhalt">
|
||
<span class="wd-wahl-titel" data-i18n="pk_verwaltung_h3">Buchhaltungs- & Steuerverwaltungsseiten</span>
|
||
<span class="wd-wahl-text"><span data-i18n="ab_preis">ab</span> 1.500 €</span>
|
||
</span>
|
||
</label>
|
||
<label class="wd-wahl-kachel">
|
||
<input type="radio" name="paket" value="betreuung" />
|
||
<span class="wd-wahl-inhalt">
|
||
<span class="wd-wahl-titel" data-i18n="betreuung_h3">Laufende Betreuung</span>
|
||
<span class="wd-wahl-text" data-i18n="betreuung_preis">ab 49 € / Monat</span>
|
||
</span>
|
||
</label>
|
||
<label class="wd-wahl-kachel">
|
||
<input type="radio" name="paket" value="unklar" />
|
||
<span class="wd-wahl-inhalt">
|
||
<span class="wd-wahl-titel" data-i18n="af1_unklar">Ich weiß es noch nicht</span>
|
||
<span class="wd-wahl-text" data-i18n="af1_unklar_text">Wir finden im Gespräch heraus, was passt.</span>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
<p class="wd-feld-fehler" data-fehler="paket"></p>
|
||
</div>
|
||
|
||
<div class="wd-feld" id="feld-ziel">
|
||
<label for="af-ziel"><span data-i18n="af1_ziel_label">Was soll die Seite erreichen?</span><span class="wd-pflicht" aria-hidden="true">*</span></label>
|
||
<span class="wd-feld-hilfe" data-i18n="af1_ziel_hilfe">Ein, zwei Sätze reichen.</span>
|
||
<textarea id="af-ziel" name="ziel" rows="3" data-i18n-attr="placeholder:af1_ziel_platzhalter"></textarea>
|
||
<p class="wd-feld-fehler" data-fehler="ziel"></p>
|
||
</div>
|
||
|
||
<div class="wd-feld">
|
||
<label for="af-zielgruppe"><span data-i18n="af1_zielgruppe_label">Wer sind deine Kunden?</span> <span class="wd-leise" data-i18n="af_optional">optional</span></label>
|
||
<input type="text" id="af-zielgruppe" name="zielgruppe" data-i18n-attr="placeholder:af1_zielgruppe_platzhalter" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ SCHRITT 2 ============ -->
|
||
<div class="af-seite" data-seite="2">
|
||
<h2 data-i18n="af2_h2">Wie groß soll es werden?</h2>
|
||
|
||
<div class="wd-feld">
|
||
<label for="af-seiten"><span data-i18n="af2_seiten_label">Welche Bereiche brauchst du?</span> <span class="wd-leise" data-i18n="af_optional">optional</span></label>
|
||
<textarea id="af-seiten" name="seiten" rows="2" data-i18n-attr="placeholder:af2_seiten_platzhalter"></textarea>
|
||
</div>
|
||
|
||
<div class="wd-feld">
|
||
<span class="wd-feld-legende" data-i18n="af2_funktionen_label">Was soll die Seite können?</span>
|
||
<span class="wd-feld-hilfe" data-i18n="af2_funktionen_hilfe">Alles, was du hier ankreuzt, wird im Angebot berücksichtigt. Nichts davon ist Pflicht.</span>
|
||
<div class="wd-wahl wd-wahl--2">
|
||
<label class="wd-wahl-kachel"><input type="checkbox" name="funktionen" value="kontaktformular" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af2_f_kontakt">Kontaktformular</span></span></label>
|
||
<label class="wd-wahl-kachel"><input type="checkbox" name="funktionen" value="galerie" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af2_f_galerie">Bildergalerie</span></span></label>
|
||
<label class="wd-wahl-kachel"><input type="checkbox" name="funktionen" value="termin" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af2_f_termin">Terminbuchung</span></span></label>
|
||
<label class="wd-wahl-kachel"><input type="checkbox" name="funktionen" value="shop" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af2_f_shop">Produkte verkaufen</span></span></label>
|
||
<label class="wd-wahl-kachel"><input type="checkbox" name="funktionen" value="login" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af2_f_login">Geschützter Kundenbereich</span></span></label>
|
||
<label class="wd-wahl-kachel"><input type="checkbox" name="funktionen" value="blog" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af2_f_blog">Blog oder Neuigkeiten</span></span></label>
|
||
<label class="wd-wahl-kachel"><input type="checkbox" name="funktionen" value="sprachen" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af2_f_sprachen">Mehrere Sprachen</span></span></label>
|
||
<label class="wd-wahl-kachel"><input type="checkbox" name="funktionen" value="karte" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af2_f_karte">Karte / Anfahrt</span></span></label>
|
||
<label class="wd-wahl-kachel"><input type="checkbox" name="funktionen" value="newsletter" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af2_f_newsletter">Newsletter</span></span></label>
|
||
<label class="wd-wahl-kachel"><input type="checkbox" name="funktionen" value="app" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af2_f_app">Als App installierbar</span></span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Folgefragen: erscheinen nur, wenn sie zur Auswahl passen
|
||
(Masterplan S.10 "Intelligente Felder"). -->
|
||
<div class="wd-notiz" id="af-folge-shop" hidden style="margin-bottom:1.15rem">
|
||
<h3 style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wd-blau);margin:0 0 .8rem" data-i18n="af2_shop_h3">Zum Verkauf</h3>
|
||
<div class="wd-feld" style="margin-bottom:.9rem">
|
||
<label for="af-shop-anzahl" data-i18n="af2_shop_anzahl">Wie viele Produkte ungefähr?</label>
|
||
<input type="text" id="af-shop-anzahl" name="d_shop_anzahl" inputmode="numeric" />
|
||
</div>
|
||
<div class="wd-feld" style="margin-bottom:.9rem">
|
||
<label for="af-shop-versand" data-i18n="af2_shop_versand">Verschickst du selbst?</label>
|
||
<input type="text" id="af-shop-versand" name="d_shop_versand" />
|
||
</div>
|
||
<div class="wd-feld" style="margin-bottom:0">
|
||
<label for="af-shop-zahlung" data-i18n="af2_shop_zahlung">Gewünschte Zahlungsarten</label>
|
||
<input type="text" id="af-shop-zahlung" name="d_shop_zahlung" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wd-notiz" id="af-folge-verwaltung" hidden>
|
||
<h3 style="font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wd-blau);margin:0 0 .8rem" data-i18n="af2_vw_h3">Zur Verwaltung</h3>
|
||
<div class="wd-feld" style="margin-bottom:.9rem">
|
||
<label for="af-vw-rollen" data-i18n="af2_vw_rollen">Wie viele Personen arbeiten damit?</label>
|
||
<input type="text" id="af-vw-rollen" name="d_vw_rollen" />
|
||
</div>
|
||
<div class="wd-feld" style="margin-bottom:0">
|
||
<label for="af-vw-dokumente" data-i18n="af2_vw_dokumente">Welche Unterlagen sollen hinein?</label>
|
||
<input type="text" id="af-vw-dokumente" name="d_vw_dokumente" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ SCHRITT 3 ============ -->
|
||
<div class="af-seite" data-seite="3">
|
||
<h2 data-i18n="af3_h2">Was hast du schon, und was ist der Rahmen?</h2>
|
||
<p class="wd-klein wd-leise" data-i18n="af3_hilfe">Bitte ehrlich antworten — fehlende Texte und Bilder sind der häufigste Grund, warum Projekte länger dauern.</p>
|
||
|
||
<div class="wd-tabelle-rahmen" style="margin:1.2rem 0 1.5rem">
|
||
<table class="wd-tabelle" style="min-width:0">
|
||
<tbody id="af-vorhanden"></tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="wd-feld">
|
||
<label for="af-budget" data-i18n="af3_budget_label">Welcher Rahmen ist realistisch?</label>
|
||
<span class="wd-feld-hilfe" data-i18n="af3_budget_hilfe">Keine Bindung — die Angabe hilft nur, dir kein Angebot zu schreiben, das an deinem Rahmen vorbeigeht.</span>
|
||
<select id="af-budget" name="budget">
|
||
<option value="" data-i18n="af3_budget_wahl">Bitte auswählen</option>
|
||
<option value="bis-500" data-i18n="af3_budget_1">bis 500 €</option>
|
||
<option value="500-1000" data-i18n="af3_budget_2">500 – 1.000 €</option>
|
||
<option value="1000-2500" data-i18n="af3_budget_3">1.000 – 2.500 €</option>
|
||
<option value="ueber-2500" data-i18n="af3_budget_4">über 2.500 €</option>
|
||
<option value="unklar" data-i18n="af3_budget_5">Weiß ich noch nicht</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="wd-feld">
|
||
<label for="af-termin"><span data-i18n="af3_termin_label">Bis wann sollte es fertig sein?</span> <span class="wd-leise" data-i18n="af_optional">optional</span></label>
|
||
<span class="wd-feld-hilfe" data-i18n="af3_termin_hilfe">Die Zeitrahmen auf der Preisseite gelten ab Eingang der Anzahlung, nicht ab heute.</span>
|
||
<input type="text" id="af-termin" name="termin" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ SCHRITT 4 ============ -->
|
||
<div class="af-seite" data-seite="4">
|
||
<h2 data-i18n="af4_h2">Wie erreiche ich dich?</h2>
|
||
|
||
<div class="wd-feld" id="feld-name">
|
||
<label for="af-name"><span data-i18n="af4_name">Name</span><span class="wd-pflicht" aria-hidden="true">*</span></label>
|
||
<input type="text" id="af-name" name="name" autocomplete="name" data-i18n-attr="placeholder:af4_name_platzhalter" />
|
||
<p class="wd-feld-fehler" data-fehler="name"></p>
|
||
</div>
|
||
|
||
<div class="wd-feld" id="feld-email">
|
||
<label for="af-email"><span data-i18n="af4_email">E-Mail</span><span class="wd-pflicht" aria-hidden="true">*</span></label>
|
||
<input type="email" id="af-email" name="email" autocomplete="email" inputmode="email" />
|
||
<p class="wd-feld-fehler" data-fehler="email"></p>
|
||
</div>
|
||
|
||
<div class="wd-feld">
|
||
<span class="wd-feld-legende" data-i18n="af4_weg">Wie darf ich mich melden?</span>
|
||
<div class="wd-wahl wd-wahl--2">
|
||
<label class="wd-wahl-kachel"><input type="radio" name="kontaktweg" value="email" checked /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af4_weg_email">Per E-Mail</span></span></label>
|
||
<label class="wd-wahl-kachel"><input type="radio" name="kontaktweg" value="telefon" /><span class="wd-wahl-inhalt"><span class="wd-wahl-titel" data-i18n="af4_weg_telefon">Per Telefon</span></span></label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wd-feld" id="feld-telefon">
|
||
<label for="af-telefon"><span data-i18n="af4_telefon">Telefon</span> <span class="wd-leise" id="af-telefon-opt" data-i18n="af_optional">optional</span></label>
|
||
<input type="tel" id="af-telefon" name="telefon" autocomplete="tel" inputmode="tel" />
|
||
<p class="wd-feld-fehler" data-fehler="telefon"></p>
|
||
</div>
|
||
|
||
<div class="wd-feld">
|
||
<label for="af-bemerkung"><span data-i18n="af4_bemerkung">Noch etwas, das ich wissen sollte?</span> <span class="wd-leise" data-i18n="af_optional">optional</span></label>
|
||
<span class="wd-feld-hilfe" data-i18n="af4_bemerkung_hilfe">Auch Fragen an mich gehören hier hinein.</span>
|
||
<textarea id="af-bemerkung" name="bemerkung" rows="3"></textarea>
|
||
</div>
|
||
|
||
<div class="wd-feld" id="feld-datenschutz">
|
||
<label class="wd-wahl-kachel" style="display:block">
|
||
<input type="checkbox" name="datenschutz" id="af-datenschutz" />
|
||
<span class="wd-wahl-inhalt">
|
||
<span class="wd-wahl-text" style="color:var(--wd-text-mid)" data-i18n="af4_datenschutz">Ich bin damit einverstanden, dass meine Angaben zur Bearbeitung dieser Anfrage gespeichert werden.</span>
|
||
</span>
|
||
</label>
|
||
<p class="wd-feld-fehler" data-fehler="datenschutz"></p>
|
||
<p class="wd-klein" style="margin:.6rem 0 0">
|
||
<a href="/kontakt.html" target="_blank" rel="noopener" data-i18n="af4_datenschutz_link">Datenschutz nachlesen</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ ZUSAMMENFASSUNG ============ -->
|
||
<div class="af-seite" data-seite="5">
|
||
<h2 data-i18n="af_zus_h2">Passt alles so?</h2>
|
||
<p class="wd-klein wd-leise" data-i18n="af_zus_hilfe">Das schickst du ab. Du kannst jeden Punkt noch ändern.</p>
|
||
<div id="af-zusammenfassung" style="margin-top:1.2rem"></div>
|
||
<div class="wd-hinweis" style="margin-top:1.4rem">
|
||
<p class="wd-hinweis-titel" data-i18n="af_kein_vertrag_titel">Das ist noch kein Auftrag</p>
|
||
<p data-i18n="af_kein_vertrag_text">Mit dem Absenden entsteht kein Vertrag und keine Zahlungspflicht. Du bekommst zuerst ein schriftliches Angebot und entscheidest dann in Ruhe.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ DANKE ============ -->
|
||
<div class="af-seite" data-seite="6">
|
||
<div class="af-danke">
|
||
<div class="af-danke-haken" aria-hidden="true">✓</div>
|
||
<h2 data-i18n="af_danke_h2">Angekommen!</h2>
|
||
<p data-i18n="af_danke_text">Deine Anfrage liegt bei mir. Ich melde mich innerhalb weniger Tage.</p>
|
||
<p class="wd-klein wd-leise" style="margin-bottom:.2rem" data-i18n="af_danke_nummer">Deine Anfragenummer</p>
|
||
<p class="af-nummer" id="af-nummer">—</p>
|
||
<p class="wd-klein wd-leise" data-i18n="af_danke_notieren">Notier sie dir — mit dieser Nummer findest du deine Anfrage sofort wieder.</p>
|
||
<div class="wd-btn-reihe" style="justify-content:center;margin-top:1.4rem">
|
||
<a class="wd-btn wd-btn--zweit" href="/webdesign/" data-i18n="af_danke_zurueck">Zurück zur Startseite</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="af-knopfleiste" id="af-knopfleiste">
|
||
<button type="button" class="wd-btn wd-btn--still" id="af-zurueck" data-i18n="af_zurueck">Zurück</button>
|
||
<button type="button" class="wd-btn wd-btn--haupt af-vor" id="af-weiter" data-i18n="af_weiter">Weiter</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<p class="wd-klein wd-leise" style="margin-top:1rem;text-align:center" id="af-speicherhinweis" data-i18n="af_gespeichert">Deine Eingaben werden automatisch in diesem Browser gespeichert.</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<div id="wd-fuss"></div>
|
||
|
||
<script src="/assets/js/i18n-wd-anfrage.js?v=20260823wd8"></script>
|
||
<script src="/assets/js/wd-core.js?v=20260823wd8"></script>
|
||
<script src="/assets/js/wd-anfrage.js?v=20260823wd8"></script>
|
||
</body>
|
||
</html>
|