Vertrag widerrufen
<!--
WIDERRUFSBUTTON + WIDERRUFSFORMULAR – "Die Ostseetrolle"
==========================================================
Einbau in Elementor: Neues "HTML"-Widget einfügen, diesen kompletten Code
hineinkopieren. Am besten auf der Seite /widerrufsbelehrung/ platzieren,
kann aber auch der Footer-Button "Vertrag widerrufen" auf diese Stelle
verlinken oder direkt dieses Widget ersetzen.
WICHTIG VOR DEM VERÖFFENTLICHEN:
1) Zeile mit "EMAIL_ADRESSE" unten im mit der echten
Kontakt-E-Mail-Adresse befüllen (auf der Live-Seite aktuell maskiert,
daher hier als Platzhalter).
2) Adresse/PLZ prüfen – auf der bestehenden Seite steht "220941
Bargteheide", das ist vermutlich ein Tippfehler (Bargteheide hat die
PLZ 22941). Bitte gegenchecken und ggf. unten korrigieren.
-->
.wt-widerruf-root{
--wt-ink:#1B4965;
--wt-ink-soft:#3d6a82;
--wt-teal:#4FA8A2;
--wt-teal-dark:#2f8480;
--wt-sand:#FBF7EE;
--wt-line:#d9e4e3;
--wt-radius:14px;
font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
}
.wt-widerruf-trigger{
display:inline-flex;
align-items:center;
gap:.5em;
font-family:"Quicksand","Inter",sans-serif;
font-weight:600;
font-size:.95rem;
letter-spacing:.01em;
color:#fff;
background:linear-gradient(135deg,var(--wt-teal),var(--wt-teal-dark));
border:none;
border-radius:999px;
padding:.7em 1.4em;
cursor:pointer;
box-shadow:0 4px 14px rgba(47,132,128,.28);
transition:transform .15s ease, box-shadow .15s ease;
}
.wt-widerruf-trigger:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(47,132,128,.36); }
.wt-widerruf-trigger:focus-visible{ outline:3px solid #a9d8d4; outline-offset:2px; }
.wt-overlay{
position:fixed; inset:0; z-index:9999;
background:rgba(17,45,58,.55);
backdrop-filter:blur(2px);
display:none; align-items:center; justify-content:center;
padding:24px;
}
.wt-overlay.wt-open{ display:flex; }
.wt-modal{
position:relative;
width:100%; max-width:560px; max-height:90vh; overflow-y:auto;
background:var(--wt-sand);
border-radius:var(--wt-radius);
box-shadow:0 20px 60px rgba(0,0,0,.25);
border-top:6px solid var(--wt-teal);
}
.wt-modal-inner{ padding:32px 32px 28px; }
.wt-close{
position:absolute; top:12px; right:14px;
width:34px; height:34px; border-radius:50%;
border:none; background:transparent; color:var(--wt-ink-soft);
font-size:1.6rem; line-height:1; cursor:pointer;
}
.wt-close:hover{ background:rgba(27,73,101,.08); }
.wt-eyebrow{
font-family:"Quicksand",sans-serif;
text-transform:uppercase;
letter-spacing:.12em;
font-size:.72rem;
font-weight:700;
color:var(--wt-teal-dark);
margin:0 0 .3em;
}
#wtTitle{
font-family:"Quicksand",sans-serif;
font-size:1.5rem;
color:var(--wt-ink);
margin:0 0 .5em;
}
.wt-lead{ color:var(--wt-ink-soft); font-size:.92rem; line-height:1.5; margin:0 0 1.4em; }
.wt-fieldset{ border:1px solid var(--wt-line); border-radius:10px; padding:.7em 1em 1em; margin:0 0 1.2em; }
.wt-fieldset legend{ font-family:"Quicksand",sans-serif; font-weight:700; font-size:.78rem; color:var(--wt-ink); padding:0 .4em; }
.wt-recipient{ margin:0; font-size:.88rem; color:var(--wt-ink-soft); line-height:1.5; }
.wt-form{ display:flex; flex-direction:column; gap:1em; }
.wt-row{ display:grid; grid-template-columns:1fr 1fr; gap:1em; }
.wt-field{ display:flex; flex-direction:column; gap:.35em; font-size:.85rem; color:var(--wt-ink); font-weight:600; }
.wt-field input, .wt-field textarea{
font-family:inherit; font-size:.92rem; font-weight:400; color:var(--wt-ink);
border:1px solid var(--wt-line); border-radius:8px; padding:.6em .7em;
background:#fff; resize:vertical;
}
.wt-field input:focus, .wt-field textarea:focus{
outline:none; border-color:var(--wt-teal); box-shadow:0 0 0 3px rgba(79,168,162,.18);
}
.wt-hint{ font-size:.78rem; color:var(--wt-ink-soft); margin:0; line-height:1.5; }
.wt-actions{ display:flex; flex-wrap:wrap; gap:.7em; margin-top:.3em; }
.wt-btn{
font-family:"Quicksand",sans-serif; font-weight:700; font-size:.9rem;
border-radius:999px; padding:.7em 1.5em; cursor:pointer; border:1px solid transparent;
}
.wt-btn-primary{ background:var(--wt-ink); color:#fff; }
.wt-btn-primary:hover{ background:#123449; }
.wt-btn-secondary{ background:transparent; color:var(--wt-ink); border-color:var(--wt-line); }
.wt-btn-secondary:hover{ background:rgba(27,73,101,.06); }
.wt-copied{ font-size:.82rem; color:var(--wt-teal-dark); font-weight:600; margin:.2em 0 0; }
@media (max-width:480px){
.wt-row{ grid-template-columns:1fr; }
.wt-modal-inner{ padding:26px 20px 22px; }
}
(function(){
// ---- Konfiguration: bitte vor Live-Schaltung ausfüllen ----
var EMAIL_ADRESSE = ""; // TODO: echte Adresse eintragen
var EMPFAENGER_TEXT = "Anna Schöbel, Ludwig-Bechstein-Weg 6b, 22941 Bargteheide";
// -------------------------------------------------------------
var openBtn = document.getElementById('wtOpenBtn');
var closeBtn = document.getElementById('wtCloseBtn');
var overlay = document.getElementById('wtOverlay');
var form = document.getElementById('wtForm');
var copyBtn = document.getElementById('wtCopyBtn');
var copiedMsg = document.getElementById('wtCopiedMsg');
var dateField = document.getElementById('wtDate');
function todayISO(){ return new Date().toISOString().slice(0,10); }
function fmt(dateStr){
if(!dateStr) return '____________';
var d = new Date(dateStr + 'T00:00:00');
return d.toLocaleDateString('de-DE');
}
function openModal(){
overlay.classList.add('wt-open');
document.body.style.overflow = 'hidden';
if(!dateField.value) dateField.value = todayISO();
document.getElementById('wtName').focus();
}
function closeModal(){
overlay.classList.remove('wt-open');
document.body.style.overflow = '';
openBtn.focus();
}
openBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
overlay.addEventListener('click', function(e){ if(e.target === overlay) closeModal(); });
document.addEventListener('keydown', function(e){ if(e.key === 'Escape' && overlay.classList.contains('wt-open')) closeModal(); });
function buildText(){
var goods = document.getElementById('wtGoods').value || '____________________________';
var orderedAt = fmt(document.getElementById('wtOrderedAt').value);
var receivedAt = fmt(document.getElementById('wtReceivedAt').value);
var name = document.getElementById('wtName').value || '____________________________';
var address = document.getElementById('wtAddress').value || '____________________________';
var date = fmt(dateField.value);
return "An " + EMPFAENGER_TEXT + "\n\n" +
"Hiermit widerrufe(n) ich/wir den von mir/uns abgeschlossenen Vertrag über den Kauf der folgenden Waren / die Erbringung der folgenden Dienstleistung:\n" +
goods + "\n\n" +
"Bestellt am: " + orderedAt + "\n" +
"Erhalten am: " + receivedAt + "\n\n" +
"Name des/der Verbraucher(s): " + name + "\n" +
"Anschrift des/der Verbraucher(s): " + address + "\n\n" +
"Datum: " + date;
}
form.addEventListener('submit', function(e){
e.preventDefault();
if(!form.reportValidity()) return;
var body = buildText();
var subject = "Widerruf meiner Bestellung – Die Ostseetrolle";
var mailto = "mailto:" + EMAIL_ADRESSE +
"?subject=" + encodeURIComponent(subject) +
"&body=" + encodeURIComponent(body);
window.location.href = mailto;
});
copyBtn.addEventListener('click', function(){
var text = buildText();
navigator.clipboard.writeText(text).then(function(){
copiedMsg.hidden = false;
setTimeout(function(){ copiedMsg.hidden = true; }, 3500);
});
});
})();
Widerrufsrecht für Verbraucher
Muster‑Widerrufsformular
Sie haben das Recht, Ihre Bestellung innerhalb von 14 Tagen ohne Angabe von Gründen zu widerrufen. Nutzen Sie dazu einfach dieses Formular – verpflichtend ist es nicht, erleichtert uns die Bearbeitung aber sehr.
Bei postalischer Mitteilung ist zusätzlich eine eigenhändige Unterschrift erforderlich. Bei E-Mail-Versand ist keine Unterschrift nötig.
Text wurde in die Zwischenablage kopiert.