DogFatherGitandClaude Opus 5
14ad108c87
Widerrufsbelehrung und Datenschutz
RECHERCHIERT, NICHT AUS DEM GEDAECHTNIS
Der Webdesign-Bereich hatte KEINE eigene Rechtsseite -- obwohl dort
Vertraege geschlossen und Zahlungen ausgeloest werden. Die Fusszeile
verwies auf die Kontaktseite des Universe, die ein Content-Projekt
beschreibt, kein Dienstleistungsgeschaeft.
Die Web-Recherche hat eine Pflicht zutage gefoerdert, die seit zwei
Monaten gilt und die die Seite nicht erfuellt hat:
§ 356a BGB -- elektronische Widerrufsfunktion, in Kraft seit
19.06.2026. Sie gilt fuer ALLE Fernabsatzvertraege, die ueber eine
Online-Benutzeroberflaeche geschlossen werden, nicht nur fuer
Finanzdienstleistungen.
WARUM DAS HIER GILT: Im Kundenportal nimmt der Kunde Zusatzangebote per
Klick VERBINDLICH an ("Damit nimmst du das Zusatzangebot verbindlich
an"). Das ist ein Vertragsschluss ueber eine Online-Benutzeroberflaeche.
Fuer die geplanten PayPal-Zahlungen gilt dasselbe.
Der Anbieter sitzt in Luxemburg. Fuer Verbraucher mit gewoehnlichem
Aufenthalt in Deutschland gilt nach Art. 6 Rom-I-VO trotzdem das
deutsche zwingende Verbraucherrecht, weil die Seite sich erkennbar an den
deutschsprachigen Markt richtet. Deshalb wurde der STRENGERE Standard
umgesetzt, nicht der bequemere.
WAS GEBAUT WURDE
webdesign/widerruf.html -- die Widerrufsfunktion, genau nach dem
Wortlaut der Vorschrift:
* Beschriftung "Vertrag widerrufen" (gesetzlich vorgegeben)
* ZWEITE Schaltflaeche "Widerruf bestaetigen" (ebenfalls vorgegeben --
ein einstufiges Formular wuerde die Vorschrift nicht erfuellen)
* unverzuegliche Eingangsbestaetigung mit Nummer, ZEITPUNKT (nicht nur
Datum), Empfaenger und dem Wortlaut der Erklaerung
* Link in der Fusszeile JEDER Seite -- "staendig verfuegbar,
hervorgehoben platziert, leicht zugaenglich" heisst nicht "in den AGB
versteckt"
Drei Entscheidungen, die unmittelbar aus dem Sinn der Vorschrift folgen:
KEINE ANMELDUNG. Die Seite ist von der Zugangswand ausgenommen. Wer
seinen Code verlegt hat, wuerde sonst seine Frist verlieren --
Fristverlust durch eine selbstgebaute Huerde ist der schlimmste
denkbare Fall.
KEINE MENGENBEGRENZUNG. Ueberall sonst richtig, hier ein
Rechtsverlust: Wer in der letzten Stunde seiner Frist wegen eines
hakenden Netzes dreimal klickt, darf nicht abgewiesen werden.
KEIN ZWISCHENSPEICHER. Beim Anfrageformular ein Segen, hier eine
Falle: Auf einem geteilten Rechner laege der halb ausgefuellte Widerruf
des einen im Browser des naechsten.
webdesign/rechtliches.html -- Impressum, AGB, Widerrufsbelehrung samt
Muster-Widerrufsformular, Datenschutzerklaerung. Alle Betreiberangaben
sind aus den bestehenden Seiten UEBERNOMMEN, nichts erfunden: Anschrift
in Mondercange, Kleinunternehmerregelung nach Art. 57 TVA-Gesetz LU und
Richtlinie (EU) 2020/285, netcup/Cloudflare, PayPal Luxemburg.
Migration 0014: wd_widerrufe (der dauerhafte Datentraeger und der
Nachweis, wird nie geleert) und wd_zustimmungen. Letztere speichert nicht
nur den Haken, sondern den WORTLAUT, den der Kunde gesehen hat -- die
Beweislast fuer die Zustimmung zum vorzeitigen Leistungsbeginn liegt beim
Unternehmer (§ 356 Abs. 4 BGB), und im Streit zaehlt, WAS bestaetigt
wurde. Bewusst OHNE Fremdschluessel: CASCADE wuerde den Nachweis mit dem
Kunden mitloeschen, RESTRICT wuerde eine DSGVO-Loeschung blockieren.
Druckansicht: Die Eingangsbestaetigung ist ein Rechtsnachweis. Auf Papier
schwarz auf weiss, ohne Navigation und Knoepfe -- ein Nachweis, den
niemand ausdruckt, weil er eine halbe Patrone kostet, erfuellt seinen
Zweck nicht.
ZWEI ECHTE FEHLER GEFUNDEN
1. Die Pflicht-Sternchen verschwanden nach der Uebersetzung. Ursache:
data-i18n stand auf dem <label> selbst und ersetzte dessen ganzen
Inhalt -- samt <span class="wd-pflicht">. Das Anfrageformular macht es
laengst richtig (data-i18n auf einem INNEREN span); die neue Seite
hatte das Muster nicht uebernommen. Aufgefallen ist es nur, weil der
Test die Pflichtfelder GEZAEHLT hat statt sie vorauszusetzen.
2. window.WD.sprache() gibt es nicht, die Funktion heisst getSprache().
Dadurch brach der Uebergang zur zweiten Stufe stumm ab.
GEPRUEFT: 58 Pruefungen, alle bestanden. Darunter die gesetzlich
vorgegebenen Beschriftungen in allen FUENF Sprachen, "kein Grund noetig",
genau drei Pflichtfelder, Datum UND Uhrzeit in der Bestaetigung, und die
Druckansicht.
WAS FILIPE NOCH PRUEFEN LASSEN MUSS: Diese Texte sind sorgfaeltig
recherchiert, aber ich bin keine Rechtsanwaeltin. Vor dem oeffentlichen
Start gehoert das Ganze einmal zu einer im luxemburgischen Recht
qualifizierten Fachperson -- besonders die grenzueberschreitende Lage
(Sitz LU, Kunden in DE/CH/FR/PT) und die Frage, ob die Seite in
Franzoesisch und Portugiesisch aktiv verkaufen soll. Dann muessen die
Rechtstexte auch dorthin uebersetzt werden, und zwar fachlich.
Versionsstempel und Cache-Name auf v7.
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=20260823wd7" />
|
||
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd7" />
|
||
<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: .74rem; 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=20260823wd7"></script>
|
||
<script src="/assets/js/wd-core.js?v=20260823wd7"></script>
|
||
<script src="/assets/js/wd-anfrage.js?v=20260823wd7"></script>
|
||
</body>
|
||
</html>
|