DogFatherGitandClaude Opus 5
d6e75ce56a
"ich will das die kacheln richtig speziell sind und modern ... dass viel mehr auffaellt und doch modern und profissionell" Die Kacheln hatten Verlaufsrand, Verlaufsflaeche, Schatten und Lichtkante -- alles richtig, alles STATISCH. Was fehlte, war das Gefuehl von Material: eine Flaeche, die auf Licht reagiert. ZWEI EBENEN Ein weicher Lichtfleck folgt dem Zeiger ueber die Flaeche. Und -- der Teil, der wirklich auffaellt -- der RAND glueht an derselben Stelle auf und verlaeuft nach beiden Seiten aus. Das geht ohne zusaetzliches Element: Die Kachel hat bereits zwei Hintergrundebenen (Flaeche padding-box, Verlaufsrand border-box). Beim Ueberfahren bekommt die Randebene einen Lichtpunkt an der Zeigerstelle. Der Rand ist nur einen Pixel breit -- genau dort laesst sich Licht am staerksten zeigen, ohne kitschig zu werden. Ein Lichtfleck OHNE mitleuchtende Kante wirkt wie ein Fleck AUF der Kachel; mit ihr wirkt die ganze Kachel beleuchtet. Die Flaeche selbst bleibt beim Ueberfahren unveraendert -- sonst wuerde der Text flackern. VIER ENTSCHEIDUNGEN GEGEN BILLIGE OPTIK Die Farbe folgt der Kachel: blaue leuchten blau, lila lila. Sonst braeche der Effekt die Farbordnung, die ueberall sonst Bedeutung traegt. Nur bei echtem Zeiger (hover: hover, pointer: fine). Auf dem Handy gibt es keinen; dort bliebe der Lichtfleck an einer zufaelligen Stelle kleben. Aus bei prefers-reduced-motion. Auch wenn sich nichts bewegt: Etwas, das dem Zeiger folgt, ist Bewegung. Erste Fassung war mit 13 % zu zurueckhaltend -- am Screenshot geprueft und auf 22 % angehoben. "Man soll es spueren" ist richtig, aber es muss auch ankommen. SPARSAM GEBAUT EIN Zuhoerer am Dokument statt einem je Kachel -- sonst muesste jede nachgeladene Kachel einzeln nachgeruestet werden. Geschrieben wird erst im naechsten Bildaufbau: Der Zeiger meldet sich bis zu tausendmal je Sekunde, der Bildschirm zeichnet sechzigmal; ohne Drosselung rechnet der Browser neunhundertmal umsonst. Der Inhalt bekommt z-index 1. Ohne das legt sich der absolut gesetzte Lichtfleck ueber den Text -- absolut positionierte Elemente malen ueber Fluss-Inhalt, auch wenn sie im Quelltext davor stehen. Das Ergebnis waere ein Schleier auf der Schrift, den man erst beim Vergleich zweier Kacheln bemerkt. Eigens geprueft. GEPRUEFT: 7 Pruefungen fuer den Effekt selbst -- unsichtbar im Ruhezustand, erscheint beim Ueberfahren, folgt dem Zeiger auf 6 Pixel genau, Inhalt liegt darueber, lila Kacheln leuchten lila, bei Bewegungsempfindlichkeit vollstaendig abgeschaltet. Gestaltung 0 Befunde, Designsystem 5, Verwaltung 69, Portal 32. Versionsstempel und Cache auf v19. 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=20260823wd19" />
|
|
<link rel="stylesheet" href="/assets/css/webdesign.css?v=20260823wd19" />
|
|
</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=20260823wd19"></script>
|
|
<script src="/assets/js/wd-core.js?v=20260823wd19"></script>
|
|
<script src="/assets/js/wd-widerruf.js?v=20260823wd19"></script>
|
|
</body>
|
|
</html>
|