DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
692d702ebffc34bb8c6132b7dbda7268ce803d29
dogfather-universe/webdesign/anfrage.html
T
DogFatherGitandClaude Opus 5 be3599239d Designsystem: eine Quelle je Farbe, Radien auf eine Skala 
Diese Runde ging eine Ebene tiefer als "sieht es gut aus": Ist das
System, aus dem das Aussehen entsteht, ueberhaupt eines?

DIE MESSUNG VORWEG

  Markenfarben ausgeschrieben im Quelltext:  155 Stellen
    davon Blau 74, Gold 33, Lila 22, Gruen 16, Rot 10
  verschiedene Eckenradien:                   12
    darunter 5px, 7px, 9px, 11px

Die Farben gab es laengst als Variablen. Sie standen trotzdem ueberall
ausgeschrieben da, weil halbdurchsichtige Toene -- Raender, Leuchten,
sanfte Flaechen -- einen Alphawert brauchen, und das mit einer fertigen
Farbvariablen nicht geht: rgba(127, 208, 232, .16).

Die Folge waere beim ersten Farbwechsel sichtbar geworden: Man findet
150 Stellen, uebersieht fuenf, und die Seite hat danach zwei Blautoene,
die sich um eine Nuance unterscheiden. Genau das ist der Unterschied
zwischen einer gewachsenen und einer gestalteten Oberflaeche.

WAS GEAENDERT WURDE

Kanalvariablen (--wd-blau-rgb: 127 208 232) neben den fertigen Farben.
Damit schreibt man rgb(var(--wd-blau-rgb) / .16), und eine Aenderung
wirkt ueberall. 164 Stellen umgestellt, verteilt ueber CSS und neun
Seiten.

Auch die abgeleiteten Farben zeigen jetzt auf die Kanaele statt eigene
Werte zu fuehren -- und die vier Prozessfarben (--wd-p1 bis p4) sind
keine eigenen Farben mehr, sondern Rollen: --wd-p1: var(--wd-blau).
Sonst haette man vier weitere Stellen, die beim naechsten Farbwechsel
stillschweigend zurueckbleiben.

Ergebnis: Jede Markenfarbe hat genau EINE Quelle. Ausgeschriebene
Markenfarben im Quelltext: 0.

Radien auf vier Stufen plus Pillenform: 6 / 10 / 14 / 20 / 999. Kein
Wert wurde um mehr als 2px verschoben, optisch aendert sich also nichts
Spuerbares -- 12 verschiedene Werte sind auf 3 tatsaechlich verwendete
zusammengeschmolzen. Zwischenwerte wie 7px oder 11px entstehen nicht aus
Absicht, sondern weil man beim Bauen einer neuen Kachel nicht nachschaut,
was nebenan schon gilt.

DER BEWEIS, DASS ES EIN SYSTEM IST

Neue Pruefung pruef-system.mjs. Sie behauptet nicht, sie STELLT UM: Die
Markenfarbe wird von Babyblau auf kraeftiges Orange gesetzt und dann
nachgezaehlt, ob irgendwo der alte Ton stehen bleibt.

  658 von 1975 sichtbaren Elementen tragen die Markenfarbe
  0 bleiben nach der Umstellung beim alten Ton
  Prozessfarben folgen nachweislich mit
  Radien: 3 Stufen

UND DIE WICHTIGSTE ERKENNTNIS -- ueber das Messen selbst

Der erste Anlauf meldete 110 haengengebliebene Elemente, alle in Kopf-
und Fusszeile. Die naheliegende Erklaerung waere gewesen: "da steht die
Farbe noch ausgeschrieben". Sie war falsch.

Nachgewiesen ueber die DevTools-Schnittstelle: Auf diese Elemente wirkt
die Regel ".wd a:not(.wd-btn) -> var(--wd-blau)", und --wd-blau
resolviert an genau dieser Stelle korrekt zum neuen Orange. Trotzdem
blieb die berechnete Textfarbe alt -- auch nach erzwungener
Neuberechnung.

Der Unterschied: Kopf- und Fusszeile werden von wd-core.js per innerHTML
eingefuegt. Chromium erneuert solche Teilbaeume nicht zuverlaessig, wenn
man eine Variable NACHTRAEGLICH umstellt. Laedt man dieselbe Seite mit
bereits geaenderter Variable, sind sie orange -- gegengeprueft mit einem
Minimalbeispiel, in dem derselbe Mechanismus einwandfrei funktioniert.

Das Pruefverfahren wurde deshalb umgestellt: Die Variable wird VOR dem
Laden ueberschrieben. Das entspricht genau dem, was eine Aenderung in der
CSS-Datei bewirkt -- also dem Fall, um den es wirklich geht.

Haette ich der ersten Messung geglaubt, haette ich 110 einwandfreie
Stellen "repariert" und dabei das gerade aufgebaute System wieder
zerlegt. Es ist der siebte Fehlalarm in eigener Messtechnik innerhalb
von zwei Runden -- und der subtilste.

ALLE PRUEFUNGEN GRUEN: Gestaltung 0 Befunde (13 Seiten x 5 Sprachen
gegen WCAG 2.2 AA), Anfragedetail 20, Verwaltung 69, Portal 32,
Widerruf 58, Textkodierung 55 Kombinationen, Designsystem 5.

Versionsstempel und Cache-Name auf v9.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-08-23 13:05:12 +02:00

426 lines
25 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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=20260823wd9" />
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd9" />
<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: rgb(var(--wd-blau-rgb) / .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: rgb(var(--wd-ok-rgb) / .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: 10px;
background: rgb(var(--wd-gold-rgb) / .08); border: 1px solid rgb(var(--wd-gold-rgb) / .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 &amp; 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 &amp; 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- &amp; 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=20260823wd9"></script>
<script src="/assets/js/wd-core.js?v=20260823wd9"></script>
<script src="/assets/js/wd-anfrage.js?v=20260823wd9"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink