/* Widerruf-Button – Frontend */

:root {
	--wrb-color: #000000;
	--wrb-text: #ffffff;
	--wrb-hover: #444444;
	--wrb-hover-text: #ffffff;
	--wrb-label: #ffffff;
	--wrb-footer-bg: #1f2937;
}

/* Schwebender Button */
.wrb-fab {
	position: fixed;
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--wrb-color);
	color: var(--wrb-text);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wrb-fab:hover {
	background: var(--wrb-hover);
	color: var(--wrb-hover-text);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* Fokus-Ring: heller Innenring (kontrastiert den Button) + dunkler Halo
   (kontrastiert die Seite) – dadurch auf jedem Hintergrund sichtbar (WCAG 1.4.11). */
.wrb-fab:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #1f2937, 0 6px 20px rgba(0, 0, 0, 0.25);
}

.wrb-fab__icon {
	flex: 0 0 auto;
}

/* Eigene Label-Farbe (unabhängig von Icon/Text). */
.wrb-fab__label {
	color: var(--wrb-label);
}

/* Beim Hover folgt das Label der Hover-Textfarbe (konsistenter Effekt). */
.wrb-fab:hover .wrb-fab__label,
.wrb-footer-bar:hover .wrb-fab__label {
	color: var(--wrb-hover-text);
}

.wrb-pos-bottom-right  { right: var(--wrb-offset-right, 24px);  bottom: var(--wrb-offset-bottom, 24px); }
.wrb-pos-bottom-left   { left: var(--wrb-offset-left, 24px);   bottom: var(--wrb-offset-bottom, 24px); }
.wrb-pos-top-right     { right: var(--wrb-offset-right, 24px);  top: var(--wrb-offset-top, 24px); }
.wrb-pos-top-left      { left: var(--wrb-offset-left, 24px);   top: var(--wrb-offset-top, 24px); }
.wrb-pos-bottom-center { left: 0; right: 0; bottom: var(--wrb-offset-bottom, 24px); margin: 0 auto; width: fit-content; }

/* Größen */
.wrb-size-small.wrb-fab  { padding: 8px 14px;  font-size: 13px; }
.wrb-size-large.wrb-fab  { padding: 16px 26px; font-size: 18px; }
.wrb-size-small .wrb-fab__icon { width: 18px; height: 18px; }
.wrb-size-large .wrb-fab__icon { width: 28px; height: 28px; }

/* Extra Footer-Leiste (volle Breite unten) */
.wrb-footer-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin: 0;
	padding: 16px 20px;
	border: 0;
	background: var(--wrb-footer-bg);
	color: var(--wrb-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
	-webkit-appearance: none;
	appearance: none;
	transition: filter 0.15s ease;
}

.wrb-footer-bar:hover { filter: brightness(0.92); }

.wrb-footer-bar:focus-visible { outline: 3px solid #ffffff; outline-offset: -5px; }

.wrb-size-small.wrb-footer-bar { padding: 10px 16px; font-size: 14px; }
.wrb-size-large.wrb-footer-bar { padding: 22px 24px; font-size: 19px; }

/* „Erst beim Scrollen einblenden" */
.wrb-reveal {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.wrb-reveal.wrb-reveal--shown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Inline-Button (Shortcode [widerruf_button]) */
.wrb-inline-btn {
	display: inline-block;
	padding: 4px 14px;
	border: 0;
	border-radius: 6px;
	background: var(--wrb-color);
	color: var(--wrb-text);
	font: inherit;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	vertical-align: baseline;
	-webkit-appearance: none;
	appearance: none;
}

.wrb-inline-btn:hover {
	background: var(--wrb-hover);
	color: var(--wrb-hover-text);
}

.wrb-inline-btn:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #1f2937;
}

/* Modal */
.wrb-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
}

.wrb-modal.is-open {
	display: flex;
}

.wrb-modal__overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	backdrop-filter: blur(1px);
}

.wrb-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 520px;
	margin: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	padding: 28px 28px 18px;
	font-family: inherit;
	color: #1f2937;
}

/* Defensiv gegen Theme-Button-Styles (Hintergrund, Padding, min-height …). */
.wrb-modal .wrb-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #64748b;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.wrb-modal .wrb-modal__close:hover {
	color: #1f2937;
	background: #f1f5f9 !important;
}

.wrb-modal__title {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 700;
}

.wrb-modal__intro {
	margin: 0 0 18px;
	font-size: 14px;
	color: #64748b;
}

/* Formularfelder */
.wrb-field { margin-bottom: 14px; }

.wrb-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 14px;
	font-weight: 600;
}

.wrb-field input[type="text"],
.wrb-field input[type="email"],
.wrb-field select,
.wrb-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 9px;
	font-size: 15px;
	font-family: inherit;
	box-sizing: border-box;
	background: #fff;
	color: #1f2937;
}

.wrb-field input:focus,
.wrb-field select:focus,
.wrb-field textarea:focus {
	outline: 2px solid #1f2937;
	outline-offset: 1px;
	border-color: var(--wrb-color);
	box-shadow: none;
}

.wrb-field--check label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 500;
}

.wrb-field--check input { margin-top: 3px; }

.wrb-req { color: var(--wrb-color); }

.wrb-error {
	display: none;
	margin-top: 4px;
	font-size: 13px;
	color: #dc2626;
}

.wrb-field.has-error input,
.wrb-field.has-error select { border-color: #dc2626; }

.wrb-field.has-error .wrb-error { display: block; }

.wrb-belehrung {
	margin: 16px 0;
	font-size: 14px;
}

/* Auf Schritt 1 sind die Links das letzte Element: mehr Abstand nach oben,
   weniger nach unten zum Modal-Rand. */
.wrb-fstep[data-fstep="1"] .wrb-belehrung {
	margin-bottom: 0;
}

.wrb-belehrung a { color: var(--wrb-color); text-decoration: underline; }

.wrb-form__error {
	display: none;
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 14px;
}

.wrb-form__error.is-visible { display: block; }

/* Primär-Buttons (Absenden / Weiter) – defensiv gegen Theme-Styles. */
.wrb-modal .wrb-submit,
.wrb-modal .wrb-next {
	width: 100%;
	min-height: 0 !important;
	padding: 13px 18px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--wrb-color) !important;
	color: var(--wrb-text) !important;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.wrb-modal .wrb-submit:hover,
.wrb-modal .wrb-next:hover { background: var(--wrb-hover) !important; color: var(--wrb-hover-text) !important; }

.wrb-modal .wrb-submit:disabled { opacity: 0.6; cursor: progress; }

/* Sekundär-Button (Zurück). */
.wrb-modal .wrb-back {
	min-height: 0 !important;
	padding: 13px 18px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: #475569 !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.wrb-modal .wrb-back:hover { background: #f8fafc !important; }

/* Schritt-Layout */
.wrb-step-indicator {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #586374;
	text-transform: uppercase;
}

.wrb-fstep[hidden] { display: none; }

.wrb-step-actions {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}

.wrb-step-actions .wrb-back { flex: 0 0 auto; }
.wrb-step-actions .wrb-submit { flex: 1 1 auto; }

/* Honeypot */
.wrb-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Erfolg */
.wrb-step--success { text-align: center; padding: 8px 0; }

/* Programmatischer Fokus auf der Bestätigungs-Überschrift ohne sichtbaren Ring. */
.wrb-step--success .wrb-modal__title:focus { outline: none; }

.wrb-success__icon {
	width: 64px;
	height: 64px;
	margin: 8px auto 16px;
	border-radius: 50%;
	background: #16a34a;
	color: #fff;
	font-size: 34px;
	line-height: 64px;
}

.wrb-success__time {
	font-weight: 700;
	margin: 0 0 10px;
}

@media (max-width: 600px) {
	.wrb-modal__dialog { padding: 22px 18px 14px; }
	/* Standard: nur Icon. Mit „Label mobil" (--mobile-label) bleibt die Beschriftung sichtbar. */
	.wrb-fab:not(.wrb-fab--mobile-label) .wrb-fab__label { display: none; }
	.wrb-fab:not(.wrb-fab--mobile-label) { padding: 14px; }
}

/* Nutzer mit „Bewegung reduzieren": Übergänge/Transformationen abschalten. */
@media (prefers-reduced-motion: reduce) {
	.wrb-fab,
	.wrb-footer-bar,
	.wrb-reveal {
		transition: none;
	}

	.wrb-fab:hover {
		transform: none;
	}
}