/**
 * Widerrufsformular – nutzt die Design-Tokens des Themes (--td-*).
 * Keine externen Schriften, keine externen Ressourcen.
 * Ruhige, sachliche Gestaltung: keine Warnfarben für den Normalfall.
 */

.tdw {
	--tdw-border: var(--td-border, #e6eaf0);
	--tdw-muted: var(--td-muted, #64748b);
	--tdw-accent: var(--td-accent, #2f6df6);
	--tdw-radius: var(--td-radius-sm, 8px);

	max-width: 720px;
	color: var(--td-text, #1f2933);
}

.tdw__title {
	font-size: clamp(1.7rem, 3.4vw, 2.2rem);
	line-height: 1.2;
	margin: 0 0 .6rem;
}

.tdw__lead {
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--tdw-muted);
	margin: 0 0 2rem;
}

/* ── Meldungen ─────────────────────────────────────────────────────── */

.tdw-alert {
	padding: 1rem 1.15rem;
	border-radius: var(--tdw-radius);
	border: 1px solid transparent;
	margin: 0 0 1.5rem;
	line-height: 1.6;
}

.tdw-alert ul { margin: .5rem 0 0; padding-left: 1.25rem; }
.tdw-alert a { color: inherit; }

.tdw-alert--ok   { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.tdw-alert--warn { background: #fffbeb; border-color: #fde68a; color: #713f12; }
.tdw-alert--err  { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }

/* ── Formular ──────────────────────────────────────────────────────── */

.tdw-form { margin: 0; }

.tdw-field { margin-bottom: 1.5rem; }

.tdw-field > label {
	display: block;
	font-weight: 600;
	margin-bottom: .3rem;
	line-height: 1.4;
}

.tdw-req { color: var(--tdw-accent); margin-left: .15em; }

.tdw-hint {
	display: block;
	font-size: .9rem;
	color: var(--tdw-muted);
	margin-bottom: .45rem;
	line-height: 1.5;
}

.tdw-field input,
.tdw-field textarea {
	width: 100%;
	padding: .75rem .9rem;
	font: inherit;
	font-size: 1rem;
	color: inherit;
	background: #fff;
	border: 1px solid var(--tdw-border);
	border-radius: var(--tdw-radius);
	/* Kein Zoom-Sprung auf iOS bei Fokus. */
	max-width: 100%;
}

.tdw-field textarea { resize: vertical; min-height: 5rem; }

.tdw-field input:hover,
.tdw-field textarea:hover { border-color: #c8d2e0; }

/* Deutlich sichtbarer Fokus – auch für Tastaturbedienung. */
.tdw-field input:focus-visible,
.tdw-field textarea:focus-visible,
.tdw .tdw-btn:focus-visible,
.tdw a:focus-visible {
	outline: 3px solid var(--tdw-accent);
	outline-offset: 2px;
	border-color: var(--tdw-accent);
}

/* ── Schaltflächen ─────────────────────────────────────────────────── */

/* Die Seite bringt Bootstrap mit (.btn / .btn-primary); dessen Regeln
   werden nach dieser Datei geladen und gewinnen daher. Diese Angaben sind
   nur der Rückfall, damit die Schaltflächen auch ohne Bootstrap wie
   Schaltflächen aussehen und bedienbar bleiben. */
.tdw .tdw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	padding: .7rem 1.5rem;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
}

.tdw .tdw-btn--primary {
	background: var(--tdw-accent);
	border-color: var(--tdw-accent);
	color: #fff;
}

.tdw .tdw-btn--ghost {
	background: transparent;
	border-color: var(--tdw-border);
	color: inherit;
}

/* Einstiegsschaltfläche nach § 356a BGB: „gut lesbar" heißt hier groß,
   ruhig und ohne Konkurrenz durch andere Elemente daneben. */
.tdw-entry { margin: 0 0 1.75rem; }

.tdw .tdw-entry__btn {
	font-size: 1.15rem;
	padding: .9rem 2.1rem;
}

/* Der Shortcode [td_widerruf_button] steht auch außerhalb der Widerrufsseite
   (AGB, Widerrufsbelehrung) – dort ohne die Breitenbegrenzung der Seite. */
.tdw--button-only { max-width: none; margin: 1.5rem 0; }
.tdw--button-only .tdw-entry { margin-bottom: 0; }

/* Ein Datum braucht keine volle Zeilenbreite. */
.tdw-field input[type="date"] { max-width: 16rem; }

.tdw-field--error input,
.tdw-field--error textarea { border-color: #dc2626; }

.tdw-error {
	display: block;
	margin-top: .4rem;
	font-size: .92rem;
	color: #b91c1c;
	line-height: 1.5;
}

/* Honeypot: für Menschen unsichtbar, für Screenreader ausgeblendet. */
.tdw-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tdw-privacy {
	font-size: .92rem;
	color: var(--tdw-muted);
	line-height: 1.6;
	margin: 0 0 1.75rem;
}

.tdw-submit { margin-top: .25rem; }

/* ── Zusammenfassung ───────────────────────────────────────────────── */

.tdw-summary {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.4rem;
	background: var(--td-bg-alt, #f6f8fb);
	border: 1px solid var(--tdw-border);
	border-radius: var(--td-card-radius, 14px);
}

.tdw-summary > div {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 1rem;
	padding: .55rem 0;
	border-bottom: 1px solid var(--tdw-border);
}

.tdw-summary > div:last-child { border-bottom: 0; }

.tdw-summary dt { font-weight: 600; margin: 0; }
.tdw-summary dd { margin: 0; overflow-wrap: anywhere; }

.tdw-declaration {
	padding: 1rem 1.15rem;
	border-left: 4px solid var(--tdw-accent);
	background: var(--td-bg-alt, #f6f8fb);
	border-radius: 0 var(--tdw-radius) var(--tdw-radius) 0;
	margin: 0 0 1.75rem;
}

.tdw-declaration .tdw-hint { margin: .35rem 0 0; }

/* ── Aktionen ──────────────────────────────────────────────────────── */

.tdw-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	align-items: center;
}

/* Der endgültige Button hat sichtbar mehr Gewicht als „Zurück". */
.tdw-final { font-size: 1.05rem; padding-inline: 1.9rem; }

.tdw-note {
	margin: 1rem 0 0;
	font-size: .92rem;
	color: var(--tdw-muted);
	line-height: 1.6;
}

/* ── Klein & mobil ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.tdw-summary > div { grid-template-columns: 1fr; gap: .2rem; }
	.tdw-actions { flex-direction: column; align-items: stretch; }
	.tdw-actions .tdw-btn { width: 100%; text-align: center; justify-content: center; }
}

/* ── Dunkles Farbschema, falls das Theme es anbietet ───────────────── */

@media (prefers-color-scheme: dark) {
	.tdw-field input,
	.tdw-field textarea {
		background: #fff;
		color: #1f2933;
	}
}