Die zweite Sitzung hat in den Praesentationen des Vaults 83 Stellen
gefunden — und damit auf Loecher in MEINER Wache gezeigt. Ich habe
sie nachgemessen, alle drei waren echt.
LOCH 1 — SIE SAH NUR `server/workspace-*.js`
Also ausgerechnet nicht `workspace.js`, die groesste Datei des
Hauses. Der weitere Filter fand dort sofort drei Stellen:
workspace.js:3404 Kanal „Chat-Moderation" (Protokoll)
workspace.js:3422 „${titel}" -> ${haus} (Protokoll)
workspace.js:3304 „${… || "ohne Titel"}" (siehe Loch 3)
Das ist heute der DRITTE Fall von „die Wache kennt nur die halbe
Menge" — nach pruef-struktur (sah nur die Pruefdateien, nicht die
Anwendung) und pruef-fingermass (sah keine variable Breite).
LOCH 2 — IHR AUSDRUCK GILT JE ZEILE
Ein `„`, das erst in der naechsten Zeile mit einem geraden `"`
schliesst, fiel durch. Gemessen: drei echte Faelle, zwei davon
sichtbarer Seitentext.
workspace/leistung.html „nicht / zugeordnet"
workspace/leistung.html „Backstage-Tabelle / einfuegen"
workspace/assets/js/ampel.js „noch ' + 'verbessern"
Beim letzten laeuft das Zitat ueber eine Zeichenketten-Verkettung.
Neue Regel ohne Fehlalarme: erst alle RICHTIG geschlossenen Paare
entfernen (auch mehrzeilig), dann die einzeilig falschen (die meldet
die alte Regel). Was danach noch ein `„` hat und binnen drei Zeilen
ein gerades `"`, ist ein Fund. Ausgenommen bleibt das Zeichen ALS
WERT — in `content: "„";` und in den Sprachtabellen ist das `„` der
Inhalt und das `"` die Begrenzung.
LOCH 3 — EINE AUSNAHME, DIE EINEN FUND VERSCHLUCKT HAT
Gefunden durch die ZAHL, nicht durch den Blick: Der weitere Filter
liess die Ausnahmen von 12 auf 13 steigen. Die dreizehnte war
`… „${zeile[titelSpalte] || "ohne Titel"}"`
Der Ausdruck blieb am `"` von `"ohne Titel"` haengen; als Inhalt kam
`${zeile[titelSpalte] || ` heraus, das endet auf ein Leerzeichen,
und damit galt „der Satz geht in der naechsten Zeile weiter". Das
echte Schlusszeichen stand hinter dem `}` und war gerade.
Dass die Ausnahmen gezaehlt UND genannt werden, hat ihn gefunden.
Genau dafuer steht die Zeile dort.
Behoben an der Wurzel: Anfuehrungszeichen innerhalb einer Einsetzung
`${…}` werden vorher durch X ersetzt, bei gleicher Laenge und
gleichen Zeilenumbruechen. Das nimmt einer ganzen Sorte
Fehlklassifizierung die Grundlage — die Ausnahmen fielen danach von
13 auf 11.
UND EIN VIERTES, BEIM MESSEN AUFGEFALLEN
`„Van-Van”` in assets/js/data-modis.js schliesst mit U+201D, dem
ENGLISCHEN Zeichen. Zweimal, beide Male in einer DEUTSCHEN Zeile
(`de:` und `"de-CH":`) — nicht einmal eine Uebersetzung, in der es
richtig waere. Eigene Regel dafuer, die keine Ausnahme braucht: Wer
mit `„` oeffnet, schliesst deutsch; in fremdsprachigen Zeilen steht
gar kein `„` am Anfang.
DIE AUSNAHMEZAHL IST JETZT STRENG. Sie stand auf „hoechstens 12" —
damit waere der Anstieg auf 13 nicht aufgefallen. Jetzt genau 11,
wie bei den Grundlinien in pruef-fingermass.
GEPRUEFT: pruef-struktur 68 -> 75 Pruefungen, 0 Fehler. Dazu
leistung-optik 59/0, ampel 47/0, treff 85/0, modi-verborgen 87/0 —
die Seiten, deren Text ich angefasst habe. Steuerzeichen: 830
Dateien, keines. Beide Stempel gesetzt.
Sechs echte Stellen berichtigt, vier neue Gegenproben.
Co-Authored-By: Claude Opus 5 <[email protected]>
431 lines
26 KiB
HTML
431 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de" data-i18n-titel="seiten_titel">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<!-- viewport-fit=cover ist die Voraussetzung dafuer, dass env(safe-area-inset-*)
|
||
ueberhaupt einen Wert liefert. Ohne diese Angabe gibt jedes env() null zurueck
|
||
-- die Sicherheitsabstaende im CSS waeren totes Recht. Zusammen mit
|
||
apple-mobile-web-app-status-bar-style=black-translucent (siehe unten) laeuft
|
||
der Inhalt sonst installiert unter Uhr und Akkuanzeige. -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||
<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/app-symbole/webdesign-32.png?v=202610011927" />
|
||
<meta name="theme-color" content="#564e95" />
|
||
<link rel="manifest" href="/webdesign/app.webmanifest" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/webdesign-180.png?v=202610011927" />
|
||
<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=202610011927" />
|
||
<link rel="stylesheet" href="/assets/css/webdesign.css?v=202610011927" />
|
||
<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 & 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-top:.6rem">
|
||
<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=202610011927"></script>
|
||
<script src="/assets/js/wd-core.js?v=202610011927"></script>
|
||
<script src="/assets/js/wd-anfrage.js?v=202610011927"></script>
|
||
</body>
|
||
</html>
|