/* dkg/formular – Rückruf und Schadenmeldung (06 § 6.4). Tokens ausschließlich aus theme.json. */

.dkg-formular {
	--dkg-f-line: var(--wp--custom--line-strong);
	--dkg-f-ease: var(--wp--custom--ease, cubic-bezier(.2, .7, .1, 1));
	max-width: 40rem;
	font-family: var(--wp--preset--font-family--archivo);
	color: var(--wp--preset--color--ink);
	scroll-margin-top: calc(var(--wp--custom--header-h, 3.5rem) + 1rem);
}

.dkg-formular svg {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.dkg-formular__titel {
	margin: 0 0 var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.15;
	text-wrap: balance;
}

.dkg-formular__form {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.dkg-formular__felder,
.dkg-formular__schritt {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Schritt-Frage als Legende */
.dkg-formular__frage {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	line-height: 1.15;
}

.dkg-formular__frage:focus {
	outline: none;
}

.dkg-formular__frage:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.dkg-formular__nr,
.dkg-formular__fortschritt {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

.dkg-formular__fortschritt {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.dkg-formular__fortschritt[hidden] {
	display: none;
}

.dkg-formular__balken {
	display: block;
	height: 2px;
	background: var(--wp--custom--line);
}

.dkg-formular__balken > span {
	display: block;
	width: calc(var(--dkg-anteil, .25) * 100%);
	height: 100%;
	background: var(--wp--preset--color--navy);
	transition: width 320ms var(--dkg-f-ease);
}

/* Mit JS: nur der aktive Schritt (Klasse setzt forms.js); die Schritt-Nummer zeigt der Fortschritt. */
.dkg-formular.is-js .dkg-formular__schritt:not(.is-aktiv) {
	display: none;
}

.dkg-formular.is-js .dkg-formular__nr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Felder */
.dkg-formular__feld {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.dkg-formular__label {
	padding: 0;
	font-weight: 600;
	line-height: 1.3;
}

.dkg-formular__hilfe {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-2);
}

.dkg-formular__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: .75rem .875rem;
	border: 1px solid var(--dkg-f-line);
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: max(1rem, var(--wp--preset--font-size--body)); /* ≥ 16 px: kein Auto-Zoom auf iOS */
	transition: border-color 160ms var(--dkg-f-ease);
}

.dkg-formular__input[type="tel"] {
	font-variant-numeric: tabular-nums;
}

.dkg-formular__input:hover {
	border-color: var(--wp--preset--color--ink-2);
}

.dkg-formular__input:focus-visible,
.dkg-formular__input:focus {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--navy);
}

.dkg-formular__input[aria-invalid="true"] {
	border-color: var(--wp--preset--color--signal);
	border-width: 2px;
}

/* Fehler: Signal + Icon + Text */
.dkg-formular__fehlertext {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-start;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--signal);
}

.dkg-formular__fehlertext[hidden],
.dkg-formular__fehler[hidden] {
	display: none;
}

.dkg-formular__fehler {
	padding: var(--wp--preset--spacing--40);
	border: 2px solid var(--wp--preset--color--signal);
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--white);
}

.dkg-formular__fehler:focus {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.dkg-formular__fehler-titel {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	margin: 0 0 var(--wp--preset--spacing--20);
	font-weight: 700;
	color: var(--wp--preset--color--signal);
}

.dkg-formular__fehler ul {
	margin: 0;
	padding-left: 1.25rem;
}

.dkg-formular__fehler a {
	color: var(--wp--preset--color--ink);
}

/* Chips = echte Radios, ≥ 44 px, gewählt Navy-Fläche */
.dkg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.dkg-chip {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.dkg-chip__input,
.dkg-check__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.dkg-chip__text {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: .5rem .875rem;
	border: 1px solid var(--dkg-f-line);
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--white);
	line-height: 1.25;
	transition: background-color 160ms var(--dkg-f-ease), border-color 160ms var(--dkg-f-ease), color 160ms var(--dkg-f-ease);
}

.dkg-chip:hover .dkg-chip__text {
	border-color: var(--wp--preset--color--navy);
}

.dkg-chip__input:checked + .dkg-chip__text {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.dkg-chip__input:focus-visible + .dkg-chip__text,
.dkg-check__input:focus-visible + .dkg-check__text::before {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.dkg-chip__input[aria-invalid="true"] + .dkg-chip__text {
	border-color: var(--wp--preset--color--signal);
}

/* Checkbox */
.dkg-check {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	cursor: pointer;
}

.dkg-check__text {
	display: inline-flex;
	gap: .75rem;
	align-items: center;
	line-height: 1.3;
}

.dkg-check__text::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid var(--dkg-f-line);
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--white) center / 1rem no-repeat;
}

.dkg-check__input:checked + .dkg-check__text::before {
	border-color: var(--wp--preset--color--navy);
	background-color: var(--wp--preset--color--navy);
	box-shadow: inset 0 0 0 4px var(--wp--preset--color--white);
}

.dkg-check__input[aria-invalid="true"] + .dkg-check__text::before {
	border: 2px solid var(--wp--preset--color--signal);
}

.dkg-check a {
	position: relative;
	z-index: 1;
}

/* Hinweis „Ich habe den Unfall verursacht“: ohne JS über :has(), sonst immer sichtbar */
.dkg-formular__hinweis {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 2px solid var(--wp--preset--color--navy);
	background: var(--wp--preset--color--paper-2);
	font-size: var(--wp--preset--font-size--small);
}

@supports selector(:has(*)) {
	.dkg-formular__hinweis[data-dkg-hint] {
		display: none;
	}

	.dkg-formular__feld:has(input[value="verursacht"]:checked) .dkg-formular__hinweis[data-dkg-hint="verursacht"] {
		display: flex;
	}
}

/* Foto-Hinweis mit WhatsApp */
.dkg-formular__notiz {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	align-items: start;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--white);
}

.dkg-formular__notiz p {
	margin: 0;
}

.dkg-formular__notiz .dkg-formular__wa {
	grid-column: 2;
}

.dkg-formular__wa {
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--wp--preset--color--navy);
}

/* Buttons */
.dkg-formular__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	margin-top: var(--wp--preset--spacing--20);
}

.dkg-formular__button,
.dkg-formular__weiter,
.dkg-formular__zurueck {
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: .75rem 1.5rem;
	border: 1px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius, 2px);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 160ms var(--dkg-f-ease), color 160ms var(--dkg-f-ease);
}

.dkg-formular__button,
.dkg-formular__weiter {
	flex: 1 1 12rem;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.dkg-formular__button:hover,
.dkg-formular__weiter:hover {
	background: var(--wp--preset--color--navy-2);
}

.dkg-formular__zurueck {
	background: transparent;
	color: var(--wp--preset--color--navy);
}

.dkg-formular__zurueck:hover {
	background: var(--wp--preset--color--paper-2);
}

.dkg-formular__button:focus-visible,
.dkg-formular__weiter:focus-visible,
.dkg-formular__zurueck:focus-visible,
.dkg-formular a:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

.dkg-formular__button[aria-busy="true"] {
	cursor: progress;
	opacity: .75;
}

.dkg-formular__nav [hidden] {
	display: none !important;
}

/* Fuß: Eilt es? + Datenschutz */
.dkg-formular__fuss {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-2);
}

.dkg-formular__fuss p,
.dkg-formular__danke p {
	margin: 0;
}

.dkg-formular__eilt a {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--wp--preset--color--navy);
}

/* Ohne JavaScript: kein Absenden möglich, nur der Hinweis mit Telefon/WhatsApp/E-Mail (Codex Gate 3).
   Die Klasse dkg-js setzt der Head-Stub (inc/Tracking) synchron, daher kein Aufblitzen. */
html:not(.dkg-js) .dkg-formular__form {
	display: none;
}

.dkg-formular__nojs {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--line-strong);
	border-left: 3px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--white);
	font-weight: 600;
}

.dkg-formular__nojs a {
	color: var(--wp--preset--color--navy);
	white-space: nowrap;
}

/* Honeypot: aus dem Sichtfeld, nicht display:none */
.dkg-formular__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dkg-formular__sr,
.dkg-formular .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Danke-Zustand */
.dkg-formular__danke {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--wp--custom--line);
	border-left: 3px solid var(--wp--preset--color--mint);
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--white);
}

.dkg-formular__danke[hidden] {
	display: none;
}

.dkg-formular__danke:focus {
	outline: none;
}

.dkg-formular__danke-titel {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	margin: 0;
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1.15;
}

.dkg-formular__danke-sub {
	margin: 0;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

.dkg-formular__danke-nr strong {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-variant-numeric: tabular-nums;
}

.dkg-formular__ablauf {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding-left: 1.5rem;
}

.dkg-formular__danke .dkg-formular__eilt {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.dkg-formular__avatar {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}

/* Rückruf-Dialog: mobil Bottom-Sheet, ab 48rem zentriert mit Schatten (06 § 2.1 Ausnahme).
   dialog.dkg-dialog: höhere Spezifität als die Layout-Regel :root :where(.is-layout-flow) > * (Block-Gap-Margin). */
dialog.dkg-dialog {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	max-height: calc(100dvh - var(--wp--custom--header-h, 3.5rem));
	margin: auto 0 0;
	padding: var(--wp--preset--spacing--50) var(--wp--custom--gutter, 1rem) calc(var(--wp--preset--spacing--50) + env(safe-area-inset-bottom, 0px));
	border: 0;
	border-top: 1px solid var(--wp--custom--line-strong);
	border-radius: var(--wp--custom--radius, 2px) var(--wp--custom--radius, 2px) 0 0;
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dkg-dialog::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 48%, transparent);
}

.dkg-dialog .dkg-formular {
	position: relative;
	max-width: none;
}

.dkg-dialog .dkg-formular__titel {
	padding-right: 7rem;
}

.dkg-dialog__schliessen {
	position: absolute;
	top: -.25rem;
	right: 0;
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	min-height: 44px;
	padding: 0 .75rem;
	border: 1px solid var(--wp--custom--line-strong);
	border-radius: var(--wp--custom--radius, 2px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.dkg-dialog__schliessen:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
}

@media (min-width: 48rem) {
	dialog.dkg-dialog {
		width: min(36rem, calc(100vw - 2rem));
		max-height: calc(100dvh - 4rem);
		margin: auto;
		padding: var(--wp--preset--spacing--60);
		border: 1px solid var(--wp--custom--line);
		border-radius: var(--wp--custom--radius, 2px);
		box-shadow: var(--wp--custom--shadow-dialog);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dkg-formular *,
	.dkg-dialog {
		transition: none !important;
	}
}

/* Kein Scrollen der Seite hinter dem offenen Dialog */
html:has(.dkg-dialog[open]) {
	overflow: hidden;
}