/*
 * Seite "Vertrag widerrufen" (Template widerruf). Maße am Original gemessen, Code selbst geschrieben.
 * Aufbau: .wr (Seitenkörper) > .wr__intro (Überschrift, Einleitung), form.wr-form > .wr-fields (Raster der Felder),
 * .wr-captcha (ALTCHA im Aussehen des Originals), .wr-submit (Button), .wr-confirm (nur Variante B).
 * Grundlagen (Farben, Schriften, .kd-prose, .kd-button) kommen aus base.css.
 */

.wr {
	--wr-fehler: #a3281c;
	/* Der Seitenkörper endet 20 px unter dem Button, dazu kommen die 60 px Abstand des Abschnitts */
	padding-bottom: 20px;
}
/* Beim Springen (Fokus, Sprungmarke) soll nichts unter dem mitlaufenden Kopfbereich verschwinden */
.wr, .wr__intro, .wr__alert, .wr-confirm__title { scroll-margin-top: 130px; }
.wr__intro p { margin-bottom: 40px; }
.wr__success { outline: none; }

/* Allgemeine Meldung über dem Formular (Fehler vom Server) */
.wr__alert {
	margin: 0 0 30px;
	padding: 15px;
	border: 1px solid var(--wr-fehler);
	border-radius: 10px;
	color: var(--wr-fehler);
	font-size: 16px;
	line-height: 1.6;
}
.wr__alert:focus { outline: none; }

.wr-form {
	--wr-rand: #c6c6c6;
	color: var(--kd-text);
	font-size: 16px;
	line-height: 24px;
}
/* ------------------------------------------------------------------ Felder */
/* Unter 520 px untereinander, danach drei Spalten (Name, E-Mail, Nummer), die beiden unteren Felder über die ganze Breite */
.wr-fields {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
@media (min-width: 520px) {
	.wr-fields {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.wr-field--wide { grid-column: 1 / -1; }
}

.wr-label {
	display: block;
	margin-bottom: 10px;
	color: var(--kd-text);
	font-size: 18px;
	font-weight: 300;
	line-height: 27px;
}
.wr-required { font-weight: 300; }

.wr-input {
	display: inline-block;
	width: 100%;
	height: 50px;
	padding: 15px;
	border: 1px solid var(--wr-rand);
	border-radius: 10px;
	background-color: var(--kd-white);
	color: var(--kd-text);
	font-family: var(--kd-font-copy);
	font-size: 16px;
	font-weight: 300;   /* wie im Original: dort steht 400, geladen ist aber nur Raleway 300 und 700 */
	line-height: 20px;
}
textarea.wr-input {
	height: 148px;
	resize: vertical;
}
.wr-input[aria-invalid="true"] { border-color: var(--wr-fehler); }

.wr-help {
	margin-top: 5px;
	color: #4e5056;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
}
.wr-error {
	margin-top: 5px;
	color: var(--wr-fehler);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

/* ------------------------------------------------------------------ Sicherheitsprüfung (ALTCHA) */
/* Das Original zeigt ein Kästchen von 252 x 66 px, mittig unter dem Formular: Schild, Titel, grauer Balken zum Anklicken
   und eine kleine Zeile unten rechts. Hier steckt ALTCHA im selben Kästchen und folgt dem Maß und der Anordnung.
   Das Widget zeichnet ohne Shadow DOM, seine Klassen beginnen mit .altcha. Der Balken ist die Beschriftung des
   Kontrollkästchens, das unsichtbar darüber liegt: Klick, Tastatur und Fokus behalten so die Funktion des Widgets. */
.wr-captcha {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.wr-captcha__box {
	position: relative;
	width: 252px;
	max-width: 100%;
	height: 66px;
	color: #222;
	font-family: var(--kd-font-copy);
	font-size: 14px;
	font-weight: 300;   /* das Original lädt Raleway nur in 300 und 700, 400 fällt auf 300 zurück */
	line-height: 16.8px;
}
.wr-captcha__icon {
	position: absolute;
	top: 15px;
	left: 9px;
	z-index: 1;
	fill: #222;
	pointer-events: none;
}
.wr-captcha__title {
	position: absolute;
	top: 9.2px;
	left: 49px;
	z-index: 1;
	pointer-events: none;
	white-space: nowrap;
}
.wr-captcha altcha-widget {
	position: absolute;
	inset: 0;
	display: block;
	--altcha-spinner-color: #222;
}
.wr-captcha .altcha { position: static; }
.wr-captcha .altcha-main {
	position: absolute;
	inset: 0;
	display: block;
	max-width: none;
	padding: 0;
	border: 1px solid #f4f4f4;
	border-radius: 0;
	background: var(--kd-white);
	color: #222;
}
.wr-captcha .altcha-main > div:first-child { display: block; width: auto; }
.wr-captcha .altcha-checkbox-wrap {
	position: absolute;
	top: 25px;
	left: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 196px;
	height: 22.8px;
	padding: 2px 6px;
	border: 1px solid transparent;
	background: #f1f1f1;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 16.8px;
	text-align: center;
}
.wr-captcha .altcha-checkbox-wrap:hover { background: #e8e8e8; }
.wr-captcha .altcha-checkbox-wrap:has(input:focus-visible) {
	outline: 2px solid var(--kd-text);
	outline-offset: 2px;
}
.wr-captcha .altcha-checkbox-wrap > label {
	display: block;
	width: 100%;
	white-space: nowrap;
	cursor: pointer;
}
.wr-captcha .altcha-checkbox {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: auto;
	height: auto;
}
.wr-captcha .altcha-checkbox input {
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.wr-captcha .altcha-checkbox svg { display: none; }
.wr-captcha .altcha-checkbox-spinner {
	inset: 2px auto auto 8px;
	width: 16px;
	height: 16px;
	pointer-events: none;
}
.wr-captcha .altcha[data-state="verified"] .altcha-checkbox-wrap { color: #1d6b3a; }
.wr-captcha .altcha[data-state="verified"] .altcha-checkbox-wrap > label::before { content: "\2713\00a0"; }
.wr-captcha .altcha-footer {
	position: absolute;
	right: 6px;
	bottom: 0;
	display: block;
	width: auto;
	height: 15px;
	font-family: var(--kd-font-copy);
	font-size: 10px;
	font-weight: 300;
	line-height: 15px;
	opacity: 1;
}
.wr-captcha .altcha-footer p {
	font-size: inherit;
	line-height: inherit;
	white-space: nowrap;
}
.wr-captcha .altcha-footer a { text-decoration: none; }
.wr-noscript {
	margin-top: 20px;
	color: var(--wr-fehler);
	text-align: center;
}

/* ------------------------------------------------------------------ Button */
.wr-submit {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
.wr-form .kd-button {
	border: 0;
	font-family: var(--kd-font-copy);
	font-size: 16px;
	font-weight: 300;
}
.wr-form .kd-button:disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* ------------------------------------------------------------------ Bestätigungsschritt (Variante B) */
.wr-confirm__title {
	margin: 0 0 20px;
	font-family: var(--kd-font-head);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}
.wr-confirm__title:focus { outline: none; }
.wr-summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 15px;
	align-items: baseline;
	margin-bottom: 30px;
}
.wr-summary dt {
	font-size: 18px;
	font-weight: 300;
	line-height: 27px;
}
.wr-summary dd {
	margin-top: 4px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	overflow-wrap: anywhere;
	white-space: pre-line;
}
@media (min-width: 520px) {
	.wr-summary { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 15px 20px; }
	.wr-summary dd { margin-top: 0; }
}
.wr-confirm__note {
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
}
.wr-confirm__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
}

/* Meldungen des Widgets (abgelaufen, Fehler) erscheinen unter dem Kästchen, damit der Titel lesbar bleibt */
.wr-captcha .altcha-popover {
	top: calc(100% + 6px);
	left: 0;
	right: auto;
	width: 252px;
	max-width: calc(100vw - 40px);
}
.wr-captcha .altcha-popover-arrow { left: 20px; }