DogFatherGitandClaude Opus 5
10a075cc33
Bis hierher trug jede Karte EINEN Schatten. Das ist solide und genau der Grund, warum eine Oberflaeche "ordentlich" statt "teuer" wirkt. Echtes Licht erzeugt zwei Dinge gleichzeitig: einen engen, dunklen Kontaktschatten an der Kante -- er sagt dem Auge, dass etwas AUFLIEGT -- und einen weiten, weichen Umgebungsschatten, der sagt, wie HOCH es darueber schwebt. Nur einen von beiden zu setzen sieht aus wie ein Aufkleber; beide zusammen ergeben einen Gegenstand. Dazu die LICHTKANTE: eine 1 Pixel hohe, sehr schwache weisse Linie an der Oberkante. Sie tut so, als kaeme das Licht von oben und braeche sich an der Kante. Das ist das meistuebersehene Detail in dunklen Oberflaechen und dasjenige mit der groessten Wirkung -- ohne sie wirkt eine Karte wie ein Loch im Hintergrund, mit ihr wie ein Stueck Material. Drei Stufen, mehr braucht es nicht: ruhende Flaechen, hervorgehobene Flaechen, Schwebendes. Dazu eine vierte, umgekehrte fuer Eingabefelder: Die liegen nicht AUF der Flaeche, sie sind hineingeschnitten -- oben dunkel, unten hell. Weil es die gemeinsamen Bausteine sind, wirkt es sofort auf allen 13 Seiten: Hauptseite, Portal und Verwaltung. Dazu Feinheiten, die einzeln niemand bemerkt und in Summe den Unterschied machen: Uebergaenge auf 160-180 ms verkuerzt (alles darueber wirkt beim Ueberfahren traege), eigene Rueckmeldung beim Druecken, optische Laufweitenkorrektur fuer grosse Ueberschriften (-.028em bei h1; das Auge sieht bei 48px mehr Weissraum zwischen Buchstaben als bei 16px), text-wrap: balance gegen einzelne Woerter in der letzten Zeile. EIN FEHLER BEIM EINBAU, GEMESSEN STATT UEBERSEHEN Nach dem ersten Durchgang hatten die Karten ihre Lichtkante, der Hauptknopf nicht. Grund: Die Grundregel lautet ".wd .wd-btn--haupt, .wd-btn--haupt" -- der erste Teil zaehlt ZWEI Klassen. Mein Nachtrag zaehlte eine und verlor, obwohl er spaeter steht. Dieselbe Falle wie am 22.08.2026 bei ".wd a" gegen ".wd-btn--haupt". Aufgefallen nur, weil die Pruefung die Lichtkanten ZAEHLT. PRUEFWERKZEUGE ANGEPASST diagnose.html ist jetzt ausgenommen. Sie traegt bewusst alles fest in sich -- eigene Farben, keine Uebersetzung -- weil sie funktionieren muss, wenn genau das kaputt ist, was sie untersucht. Sie an den Regeln der eigentlichen Seite zu messen erzeugte zwei Meldungen, die man auf Dauer wegsieht. Und irgendwann sieht man dann auch eine echte weg. ALLES GRUEN: Gestaltung 0 Befunde (12 Seiten x 5 Sprachen gegen WCAG 2.2 AA), Designsystem 5, Verwaltung 69, Portal 32. Versionsstempel und Cache auf v17. Co-Authored-By: Claude Opus 5 <[email protected]>
145 lines
7.3 KiB
HTML
145 lines
7.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" data-i18n-titel="wr_titel">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Vertrag widerrufen — Dogfather Webdesign</title>
|
|
<meta name="description" content="Elektronische Widerrufsfunktion nach § 356a BGB — Vertrag online widerrufen, mit sofortiger Eingangsbestätigung." />
|
|
<meta name="robots" content="noindex, follow" />
|
|
<link rel="icon" type="image/png" href="/assets/img/favicon.png" />
|
|
<link rel="manifest" href="/webdesign/app.webmanifest" />
|
|
<meta name="theme-color" content="#05070b" />
|
|
<link rel="stylesheet" href="/assets/css/main.css?v=20260823wd17" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd17" />
|
|
</head>
|
|
<body class="wd">
|
|
<div id="wd-kopf"></div>
|
|
|
|
<main>
|
|
<section class="wd-abschnitt">
|
|
<div class="wd-container wd-schmal">
|
|
|
|
<span class="wd-eyebrow" data-i18n="wr_eyebrow">Widerruf</span>
|
|
<h1 data-i18n="wr_h1">Vertrag widerrufen</h1>
|
|
<p class="wd-fuehrung" data-i18n="wr_lead">
|
|
Hier kannst du deinen Vertrag ohne Angabe von Gründen widerrufen.
|
|
Du bekommst sofort eine Bestätigung mit Zeitpunkt — zum Speichern und Ausdrucken.
|
|
</p>
|
|
|
|
<!-- Die Belehrung steht ÜBER dem Formular, nicht darunter oder als
|
|
Link. Wer widerrufen will, soll vorher wissen, was gilt — nicht
|
|
erst hinterher nachlesen müssen. -->
|
|
<div class="wd-karte wr-info">
|
|
<h2 class="wr-h2" data-i18n="wr_frist_h">Wie lange habe ich Zeit?</h2>
|
|
<p data-i18n="wr_frist_t">
|
|
Die Widerrufsfrist beträgt <strong>14 Tage</strong> ab dem Tag des Vertragsschlusses.
|
|
Zur Wahrung der Frist reicht es, dass du den Widerruf vor Ablauf der Frist absendest.
|
|
</p>
|
|
<p class="wd-klein wd-leise" data-i18n="wr_frist_hinweis">
|
|
Wichtig bei Dienstleistungen: Wenn du ausdrücklich zugestimmt hast, dass vor Ablauf
|
|
der Frist mit der Arbeit begonnen wird, und bestätigt hast, dass du dadurch dein
|
|
Widerrufsrecht verlierst, erlischt es mit vollständiger Erbringung der Leistung.
|
|
Bis dahin schuldest du bei einem Widerruf nur den Wert dessen, was bis zum Widerruf
|
|
bereits geleistet wurde.
|
|
</p>
|
|
<p><a href="/webdesign/rechtliches.html#widerruf" data-i18n="wr_zur_belehrung">Vollständige Widerrufsbelehrung lesen</a></p>
|
|
</div>
|
|
|
|
<div class="wd-meldung" id="wr-meldung" hidden></div>
|
|
|
|
<!-- ============ SCHRITT 1: ANGABEN ============ -->
|
|
<form class="wd-karte" id="wr-form" novalidate>
|
|
<h2 class="wr-h2" data-i18n="wr_form_h">Deine Angaben</h2>
|
|
<p class="wd-klein wd-leise" data-i18n="wr_form_t">
|
|
Wir brauchen nur drei Dinge: deinen Namen, um welchen Vertrag es geht,
|
|
und wohin die Bestätigung soll.
|
|
</p>
|
|
|
|
<div class="wd-feld" id="wr-feld-name">
|
|
<label for="wr-name"><span data-i18n="wr_name">Dein Name</span><span class="wd-pflicht" aria-hidden="true">*</span></label>
|
|
<input type="text" id="wr-name" name="name" autocomplete="name" maxlength="200" />
|
|
<p class="wd-feld-fehler"></p>
|
|
</div>
|
|
|
|
<div class="wd-feld" id="wr-feld-vertrag">
|
|
<label for="wr-vertrag"><span data-i18n="wr_vertrag">Welcher Vertrag?</span><span class="wd-pflicht" aria-hidden="true">*</span></label>
|
|
<input type="text" id="wr-vertrag" name="vertrag" maxlength="300"
|
|
placeholder="z. B. P-2608-0001 oder „Website für Musterbau“" />
|
|
<span class="wd-feld-hilfe" data-i18n="wr_vertrag_hilfe">
|
|
Die Projektnummer steht in deinem Angebot und im Portal. Eine Beschreibung reicht aber auch.
|
|
</span>
|
|
<p class="wd-feld-fehler"></p>
|
|
</div>
|
|
|
|
<div class="wd-feld" id="wr-feld-kontakt">
|
|
<label for="wr-kontakt"><span data-i18n="wr_kontakt">E-Mail für die Bestätigung</span><span class="wd-pflicht" aria-hidden="true">*</span></label>
|
|
<input type="email" id="wr-kontakt" name="kontakt" autocomplete="email" inputmode="email" maxlength="200" />
|
|
<p class="wd-feld-fehler"></p>
|
|
</div>
|
|
|
|
<div class="wd-feld">
|
|
<label for="wr-betrifft"><span data-i18n="wr_betrifft">Betrifft nur einen Teil?</span> <span class="wd-leise" data-i18n="wr_freiwillig">freiwillig</span></label>
|
|
<input type="text" id="wr-betrifft" name="betrifft" maxlength="300" />
|
|
</div>
|
|
|
|
<!-- Ausdrücklich als freiwillig gekennzeichnet. Ein Widerruf
|
|
braucht KEINE Begründung, und ein Feld, das nach einer
|
|
verlangt, hält Leute davon ab. -->
|
|
<div class="wd-feld">
|
|
<label for="wr-grund"><span data-i18n="wr_grund">Grund</span> <span class="wd-leise" data-i18n="wr_grund_frei">freiwillig — du musst keinen angeben</span></label>
|
|
<textarea id="wr-grund" name="begruendung" rows="3" maxlength="2000"></textarea>
|
|
</div>
|
|
|
|
<div class="wd-btn-reihe">
|
|
<button type="submit" class="wd-btn wd-btn--haupt" id="wr-weiter" data-i18n="wr_weiter">Weiter zur Bestätigung</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- ============ SCHRITT 2: BESTÄTIGEN ============
|
|
§ 356a verlangt ausdrücklich eine ZWEITE Schaltfläche mit der
|
|
Aufschrift "Widerruf bestätigen". Ein einstufiges Formular
|
|
würde die Vorschrift nicht erfüllen. -->
|
|
<div class="wd-karte wr-bestaetigen" id="wr-schritt2" hidden>
|
|
<h2 class="wr-h2" data-i18n="wr_pruef_h">Bitte prüfen und bestätigen</h2>
|
|
<p class="wd-klein wd-leise" data-i18n="wr_pruef_t">
|
|
Das schickst du ab. Danach ist der Widerruf erklärt.
|
|
</p>
|
|
<dl class="wr-pruef" id="wr-pruef"></dl>
|
|
<div class="wd-btn-reihe">
|
|
<button type="button" class="wd-btn wd-btn--haupt" id="wr-bestaetigen" data-i18n="wr_bestaetigen">Widerruf bestätigen</button>
|
|
<button type="button" class="wd-btn wd-btn--still" id="wr-zurueck" data-i18n="wr_aendern">Angaben ändern</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ SCHRITT 3: EINGANGSBESTÄTIGUNG ============ -->
|
|
<div class="wd-karte wr-fertig" id="wr-schritt3" hidden>
|
|
<div class="wr-haken" aria-hidden="true">✓</div>
|
|
<h2 class="wr-h2" data-i18n="wr_fertig_h">Dein Widerruf ist eingegangen</h2>
|
|
<p data-i18n="wr_fertig_t">
|
|
Das hier ist deine Eingangsbestätigung. Speichere oder drucke sie —
|
|
sie ist dein Nachweis, dass du rechtzeitig widerrufen hast.
|
|
</p>
|
|
<div class="wr-beleg" id="wr-beleg"></div>
|
|
<div class="wd-btn-reihe wr-nicht-drucken">
|
|
<button type="button" class="wd-btn wd-btn--haupt" id="wr-drucken" data-i18n="wr_drucken">Bestätigung drucken oder als PDF sichern</button>
|
|
<a class="wd-btn wd-btn--still" href="/webdesign/" data-i18n="wr_zurueck_start">Zur Startseite</a>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="wd-klein wd-leise wr-nicht-drucken" style="margin-top:1.4rem" data-i18n="wr_alternativ">
|
|
Du kannst den Widerruf auch formlos per E-Mail erklären — dieses Formular ist nur der
|
|
bequemere Weg, kein vorgeschriebener.
|
|
</p>
|
|
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="wd-fuss"></div>
|
|
|
|
<script src="/assets/js/i18n-wd-widerruf.js?v=20260823wd17"></script>
|
|
<script src="/assets/js/wd-core.js?v=20260823wd17"></script>
|
|
<script src="/assets/js/wd-widerruf.js?v=20260823wd17"></script>
|
|
</body>
|
|
</html>
|