DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rechtliches: elektronische Widerrufsfunktion (§ 356a BGB), Impressum, AGB,

Browse Source 
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]>
This commit is contained in:
DogFatherGit
2026-08-23 12:29:09 +02:00
co-authored by Claude Opus 5
parent 98fc04c666
commit 14ad108c87
24 changed files with 1749 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/webdesign.css
+156
View File
@@ -1542,3 +1542,159 @@ button.po-aufg-haken:hover { border-color: var(--wd-gold); background: rgba(232,
margin: .8rem 0 .2rem; padding-right: .3rem;
display: flex; flex-direction: column; gap: .5rem;
}
/* =====================================================================
WIDERRUF (§ 356a BGB) — und die Druckansicht der Bestätigung
Gestalterisch bewusst ZURÜCKHALTEND. Alles andere im Bereich darf
Stimmung machen; diese Seite nicht. Wer hier landet, will eine Sache
erledigen und danach Gewissheit haben. Grosse Effekte würden hier wie
Ablenkung wirken — und der Vorwurf, man wolle den Widerruf erschweren,
ist genau der, den man am wenigsten gebrauchen kann.
===================================================================== */
.wr-h2 { font-size: 1.12rem; margin: 0 0 .5rem; }
.wr-info {
border-left: 3px solid var(--wd-blau);
margin-bottom: 1.4rem;
}
.wr-pruef {
display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr);
gap: .45rem .9rem; margin: .9rem 0 1.1rem;
padding: .9rem 1rem; border-radius: 12px;
background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
}
@media (max-width: 520px) { .wr-pruef { grid-template-columns: 1fr; gap: .1rem; } }
.wr-pruef dt { color: var(--wd-text-soft); font-size: .88rem; }
.wr-pruef dd { margin: 0; color: var(--wd-text); overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 520px) { .wr-pruef dd { margin-bottom: .55rem; } }
/* Der Bestätigungsschritt hebt sich ab — hier passiert das Verbindliche. */
.wr-bestaetigen { border-color: var(--wd-rand-stark); }
/* Grün statt Gold für den Abschluss: Der Widerruf ist erfolgreich
erklärt, das ist aus Sicht des Kunden eine gute Nachricht. Gold ist im
Bereich für "das betrifft dich, tu was" reserviert — hier ist nichts
mehr zu tun. */
.wr-fertig { border-color: rgba(111,214,163,.42); }
.wr-haken {
width: 46px; height: 46px; border-radius: 50%;
display: grid; place-items: center; line-height: 1;
font-size: 1.5rem; margin-bottom: .7rem;
background: rgba(111,214,163,.14); color: var(--wd-ok);
border: 1px solid rgba(111,214,163,.4);
}
.wr-beleg {
margin: 1rem 0; padding: 1.1rem 1.2rem;
border-radius: 14px;
background: rgba(8,14,24,.55);
border: 1px solid var(--wd-rand-stark);
}
.wr-beleg-kopf {
display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
justify-content: space-between;
padding-bottom: .6rem; margin-bottom: .7rem;
border-bottom: 1px solid var(--wd-rand);
}
.wr-beleg-nr { font-family: var(--font-head); font-weight: 800; color: var(--wd-blau); }
.wr-beleg dl {
display: grid; grid-template-columns: minmax(0,.42fr) minmax(0,1fr);
gap: .45rem .9rem; margin: 0;
}
@media (max-width: 520px) { .wr-beleg dl { grid-template-columns: 1fr; gap: .1rem; } }
.wr-beleg dt { color: var(--wd-text-soft); font-size: .86rem; }
.wr-beleg dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .wr-beleg dd { margin-bottom: .55rem; } }
/* ---------------------------------------------------------------------
DRUCKANSICHT
Die Eingangsbestätigung ist ein Rechtsnachweis. Ein Ausdruck mit
dunklem Hintergrund verbraucht eine halbe Patrone und ist auf Papier
schlecht lesbar — und ein Nachweis, den niemand ausdruckt, weil er
hässlich wird, erfüllt seinen Zweck nicht.
Deshalb: auf Papier schwarz auf weiss, ohne Navigation, ohne Knöpfe,
nur der Beleg. Adressen werden ausgeschrieben, weil ein Link auf
Papier nichts nützt.
--------------------------------------------------------------------- */
@media print {
body.wd { background: #fff !important; color: #000 !important; }
.wd-kopf, #wd-kopf, .wd-fuss, #wd-fuss,
.wr-nicht-drucken, .wr-info, #wr-form, #wr-schritt2,
.wd-meldung, .wd-eyebrow { display: none !important; }
.wd-abschnitt { padding: 0 !important; }
.wd-karte, .wr-beleg {
background: #fff !important; border: 1px solid #000 !important;
box-shadow: none !important; color: #000 !important;
}
.wr-fertig, .wr-beleg { page-break-inside: avoid; }
.wr-haken { border-color: #000 !important; color: #000 !important; background: #fff !important; }
.wr-beleg-nr, .wr-h2, h1, h2, dt, dd, p { color: #000 !important; }
.wr-beleg dt { color: #444 !important; }
/* Adressen ausschreiben — ein Link ist auf Papier wertlos. */
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}
/* ---------------------------------------------------------------------
RECHTSSEITE
Lange Texte, die man liest statt überfliegt. Deshalb: schmalere
Zeilen, mehr Zeilenabstand, klare Absätze. Und KEIN Blocksatz --
der reisst im Deutschen wegen der langen Wörter Löcher in die Zeile
und macht genau die Texte schwerer lesbar, bei denen es auf jedes
Wort ankommt.
--------------------------------------------------------------------- */
.rl-nav {
display: flex; flex-wrap: wrap; gap: .45rem;
margin: 1.2rem 0 1.6rem;
}
.rl-nav a {
padding: .42rem .85rem; border-radius: 999px;
border: 1px solid var(--wd-rand); background: var(--wd-glas);
font-size: .88rem; color: var(--wd-text-mid) !important; text-decoration: none;
}
.rl-nav a:hover { border-color: var(--wd-rand-stark); color: var(--wd-text) !important; }
.rl-sprache { margin-bottom: 1.8rem; }
.rl-h2 {
margin-top: 2.4rem;
/* Ein Sprungziel darf nicht unter der klebenden Kopfzeile landen. */
scroll-margin-top: 5.5rem;
}
.rl-text { line-height: 1.75; }
.rl-text h3 {
font-size: 1rem; margin: 1.5rem 0 .5rem;
color: var(--wd-blau);
}
.rl-text h3:first-child { margin-top: 0; }
.rl-text p { margin: 0 0 .8rem; }
.rl-text ul { margin: 0 0 .9rem; padding-left: 1.2rem; }
.rl-text li { margin-bottom: .35rem; }
.rl-text code {
font-size: .86em; padding: .1rem .35rem; border-radius: 5px;
background: rgba(127,208,232,.09); color: var(--wd-blau);
}
/* Die Belehrung hebt sich ab: Sie ist der Teil, auf den es rechtlich
ankommt, und muss auch optisch als geschlossener Block erkennbar sein. */
.rl-widerruf { border-left: 3px solid var(--wd-gold); }
.rl-adresse {
padding: .7rem .9rem; border-radius: 10px;
background: rgba(127,208,232,.05); border: 1px solid var(--wd-rand);
}
/* Das Muster-Formular sieht bewusst wie ein Formular aus — man soll
sehen, dass man es ausdrucken und ausfüllen kann. */
.rl-formular {
margin-top: .6rem; padding: 1rem 1.1rem;
border-radius: 12px; border: 1px dashed var(--wd-rand-stark);
background: rgba(8,14,24,.4);
font-size: .93rem;
}
.rl-formular p { margin: 0 0 .6rem; }