/* ========================================================= leano – Widerrufsfunktion (Bestätigungsseite) de/widerrufen.html + withdraw-contract.html Eigenes Stylesheet: legal.css/style.css/kontakt.css bleiben unberührt. Schriftgrößen, Farben und Einrückung sind dieselben wie in legal.css (Titel bei x=100, Inhalt eingerückt bei x=300, max. 880px breit), damit die Seite sich nahtlos zwischen die Rechtsseiten einfügt. Header + Footer kommen aus js/layout.js. ========================================================= */ /* Die Rechtsseiten haben 300px Luft nach unten – das trägt dort, weil die Texte lang sind. Das Formular ist kurz; mit 300px steht die Fußzeile in einem Loch. Deshalb hier weniger, Titelabstand und seitliche Ränder bleiben unverändert. */ .wf-main { padding-bottom: 170px; } /* ---------- Einleitung: gleiche Einrückung wie .legal-lead ---------- */ .wf-intro { margin: 55px 0 0 200px; max-width: 880px; font: 400 14px/27px var(--font-body); color: var(--black); } .wf-intro a { color: inherit; text-decoration: underline; } /* ---------- Statusmeldung (Rückmeldung des Bestätigungslinks aus der E-Mail) ---------- */ /* Wird von js/widerruf.js aus dem Query-Parameter „status“ befüllt und sonst ausgeblendet. */ .wf-status { margin: 30px 0 0 200px; max-width: 880px; padding: 16px 20px; border: 1px solid var(--dark-grey); border-left: 4px solid var(--dark-grey); border-radius: 20px; background: var(--bg-grey); font: 400 14px/25px var(--font-body); color: var(--black); } .wf-status[hidden] { display: none; } .wf-status.is-ok { border-left-color: #75A83A; } .wf-status.is-error { border-left-color: var(--office-red); } /* ---------- Vertragsdaten (nur bei Aufruf aus der eingeloggten App) ---------- */ /* Gleiche Kasten-Optik wie die Quittung und die Fußzeile: grauer Grund, 1px Rand, 20px Radius. Mehr Gestaltung braucht der Block nicht – er informiert nur. */ .wf-context { margin: 36px 0 0 200px; max-width: 560px; } .wf-context[hidden] { display: none; } .wf-context-box { padding: 22px 26px; border: 1px solid var(--dark-grey); border-radius: 20px; background: var(--bg-grey); } .wf-context-title { margin: 0 0 14px; font-family: var(--font-heading); font-weight: 600; font-size: 15px; line-height: 24px; color: var(--black); } .wf-context-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; } .wf-context-list dt { margin: 0; font: 400 13px/22px var(--font-body); color: #6F6F6F; white-space: nowrap; } .wf-context-list dd { margin: 0; font: 400 13px/22px var(--font-body); color: var(--black); overflow-wrap: anywhere; } /* Hinweis zur Frist – grün, solange sie läuft, rot, wenn sie abgelaufen ist. Dieselben beiden Farben wie die Icons der Absende-Buttons der Seite. */ .wf-context-period { margin: 16px 0 0; font: 400 13px/22px var(--font-body); } .wf-context-period.is-open { color: var(--office-green-text); } .wf-context-period.is-closed { color: var(--office-red); } /* ---------- Formular ---------- */ .wf-form { margin: 44px 0 0 200px; max-width: 560px; } .wf-field { margin-top: 30px; } .wf-field:first-child { margin-top: 0; } .wf-label { display: block; margin: 0 0 6px; font: 700 14px/24px var(--font-body); color: var(--black); } /* Kennzeichnung Pflicht/optional – steht direkt in der Beschriftung, nicht als Sternchen */ .wf-label-note { font-weight: 400; color: #6F6F6F; } .wf-field input, .wf-field textarea { width: 100%; box-sizing: border-box; display: block; border: 0; border-bottom: 1px solid var(--dark-grey); background: transparent; font: 400 16px/27px var(--font-body); color: var(--black); padding: 0 2px; } .wf-field input { height: 40px; line-height: 40px; } .wf-field textarea { height: 122px; resize: vertical; padding-top: 4px; } .wf-field input:focus, .wf-field textarea:focus { outline: none; border-bottom-color: var(--black); } /* Fehlerhafte Pflichtfelder markiert js/widerruf.js über aria-invalid */ .wf-field input[aria-invalid="true"], .wf-field textarea[aria-invalid="true"] { border-bottom-color: var(--office-red); } /* Erläuterung unter einem Feld (wozu die Angabe dient) */ .wf-note { margin: 6px 0 0; font: 400 12px/22px var(--font-body); color: #6F6F6F; } /* Spam-Schutz (Honeypot): für Menschen unsichtbar, nur Bots füllen es aus */ .wf-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Sammelfehler über dem Button */ .wf-error { margin: 30px 0 0; font: 400 14px/25px var(--font-body); color: var(--office-red); } .wf-error[hidden] { display: none; } /* ---------- Bestätigungs-Schaltfläche ---------- */ /* Beschriftung ist gesetzlich festgelegt („Widerruf bestätigen“ / „Confirm withdrawal“) und steht ausschließlich im HTML. Aussehen kommt aus .btn-ghost in style.css. Der Rest ist 1:1 das Verhalten der beiden anderen Absende-Buttons der Seite (.kf-send in kontakt.css, .auth-submit in login.css): Pfeil morpht bei Fehler zu „!“, bei Erfolg zu „✓“, beim Hover wandert er 5px nach rechts. Gleiche Maße, gleiche Dauern, gleiche Kurven. NICHT übernommen wird der Text-Wechsel des Kontaktformulars – die Beschriftung dieses Buttons darf sich nicht ändern. */ .wf-actions { margin-top: 40px; } .wf-submit { cursor: pointer; font-family: inherit; box-sizing: border-box; font-size: 13px; } .wf-submit > .wf-submit-text { top: 0; line-height: 25px; } .wf-submit > .wf-submit-icon { top: 0; } .wf-submit-icon { position: relative; width: 14px; height: 14px; flex: none; margin-right: 5px; transition: margin-right 500ms ease; } .wf-submit-icon .ic { position: absolute; inset: 0; width: 14px; height: 14px; opacity: 0; transform: scale(0.55); transition: opacity 500ms ease, transform 500ms ease; } /* Pfeil dauerhaft auf eigener GPU-Ebene -> beim Hover kein Sub-Pixel-Sprung */ .wf-submit-icon .ic-arrow { opacity: 1; transform: translate3d(0, 0, 0); will-change: transform; backface-visibility: hidden; } .wf-submit.is-error .ic-arrow, .wf-submit.is-success .ic-arrow { opacity: 0; transform: scale(0.55); } .wf-submit.is-error .ic-warn { opacity: 1; transform: translateX(3px); } .wf-submit.is-success .ic-check { opacity: 1; transform: translateX(5px); } .wf-submit.is-error .wf-submit-icon { margin-right: -2px; } .wf-submit.is-success .wf-submit-icon { margin-right: 7px; } .wf-submit .wf-submit-text { white-space: nowrap; overflow: hidden; box-sizing: border-box; text-align: center; flex: none; padding: 0 10px; } .wf-submit:not(.is-error):not(.is-success):hover .ic-arrow { transform: translate3d(5px, 0, 0); } .wf-submit[disabled] { cursor: default; } /* ---------- Quittung (ersetzt das Formular nach dem Absenden) ---------- */ .wf-receipt { margin: 44px 0 0 200px; max-width: 880px; } .wf-receipt[hidden] { display: none; } /* Die Quittung bekommt per JavaScript den Fokus, damit Screenreader sie vorlesen. Der Standard-Fokusrahmen zöge dabei einen zweiten Rahmen um den Kasten – hier also unterdrücken. Wer per Tastatur navigiert, bekommt ihn weiterhin. */ .wf-receipt:focus { outline: none; } .wf-receipt:focus-visible { outline: 2px solid var(--office-blue); outline-offset: 4px; } .wf-receipt-box { padding: 26px 30px; border: 1px solid var(--dark-grey); border-radius: 20px; /* wie .site-footer – die einzige Kasten-Optik der Seite */ background: var(--bg-grey); } .wf-receipt-title { margin: 0; font: 700 15px/24px var(--font-body); color: var(--black); } .wf-receipt-list { margin: 17px 0 0; } .wf-receipt-list dt { margin: 14px 0 0; font: 700 14px/24px var(--font-body); color: var(--black); } .wf-receipt-list dt:first-child { margin-top: 0; } .wf-receipt-list dd { margin: 2px 0 0; font: 400 14px/27px var(--font-body); color: var(--black); white-space: pre-wrap; /* Wortlaut der Erklärung zeilengetreu wiedergeben */ overflow-wrap: break-word; } .wf-receipt-hint { margin: 20px 0 0; font: 400 14px/27px var(--font-body); color: var(--black); } /* „Erklärung speichern“ und „Drucken“ sind ebenfalls .btn-ghost aus style.css – hier steht nur die Anordnung nebeneinander und das, was einem