/* Anfrageformular – Token aus theme.json mit Fallbacks, Präfix .tr-anfrage.
 * Seit 09.10.2026 kompakt: Formular über die volle Inhaltsbreite (Davids Wunsch: von links nach rechts),
 * Felder im Raster (Desktop 12 Spalten, Tablet 6, Handy 1–2), Feldhöhe 42 px, Pill-Schaltflächen. */
.tr-anfrage {
	--tr-a-text: var(--wp--preset--color--text, #231f20);
	--tr-a-leise: var(--wp--preset--color--text-leise, #545454);
	--tr-a-flaeche: var(--wp--preset--color--flaeche, #ffffff);
	--tr-a-flaeche-alt: var(--wp--preset--color--flaeche-alt, #f4f4f2);
	--tr-a-linie: var(--wp--preset--color--linie, #8a8a8a);
	--tr-a-linie-leicht: #d6d4cf;
	--tr-a-akzent: var(--wp--preset--color--akzent, #b3141b);
	--tr-a-primaer: var(--wp--preset--color--primaer, #d71920);
	--tr-a-fehler: var(--wp--preset--color--fehler, #a3111a);
	--tr-a-erfolg: var(--wp--preset--color--erfolg, #1e6b34);
	--tr-a-abstand: 1.25rem;
	--tr-a-abstand-klein: 0.75rem;
	--tr-a-radius: 10px;
	--tr-a-radius-gross: 16px;
	--tr-a-feld-hoehe: 2.625rem;
	color: var(--tr-a-text);
	max-width: none;
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* Volle Inhaltsbreite: auch im zweispaltigen Seitenraster (Titel links, Inhalt rechts) über beide Spalten.
 * Bündig mit der linken Textkante des Abschnitts, damit kein schmaler Einzug neben dem Fließtext entsteht. */
.tr-seiteninhalt .tr-section > .tr-anfrage {
	grid-column: 1 / -1;
	width: 100%;
	max-width: none;
	margin-inline: 0 !important;
}

/* Abschnitt mit dem Formular: weniger Luft oben, damit Position 1 ohne Scrollen sichtbar ist */
.tr-seiteninhalt > .tr-section:has(> .tr-anfrage) {
	padding-block-start: var(--wp--preset--spacing--50, 2.5rem);
}

.tr-anfrage__form {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--tr-a-abstand);
}

.tr-anfrage__form > * {
	grid-column: 1 / -1;
	margin: 0;
	min-width: 0;
}

/* Anmerkungen und Dateien nebeneinander, wenn sie aufeinander folgen */
@media (min-width: 64rem) {
	.tr-anfrage__anmerkungen:has(+ .tr-anfrage__dateien) {
		grid-column: 1 / span 7;
	}

	.tr-anfrage__anmerkungen + .tr-anfrage__dateien {
		grid-column: 8 / -1;
	}
}

.tr-anfrage__intro,
.tr-anfrage__weg,
.tr-anfrage__pflicht-hinweis {
	max-width: 68ch;
}

.tr-anfrage__intro {
	margin: 0;
	font-size: 1rem;
}

/* ---------- Gruppen (Positionen, Kontakt, Anmerkungen, Dateien) ---------- */
.tr-anfrage__gruppe {
	border: 1px solid var(--tr-a-linie-leicht);
	border-radius: var(--tr-a-radius-gross);
	background: var(--tr-a-flaeche);
	padding: var(--tr-a-abstand);
	margin: 0;
	min-width: 0;
}

.tr-anfrage__gruppe > legend {
	/* Legende innerhalb der Karte statt auf der Rahmenlinie */
	float: left;
	width: 100%;
	font-weight: 700;
	font-size: 1.0625rem;
	padding: 0;
	margin: 0 0 0.375rem;
}

.tr-anfrage__gruppe > legend + * {
	clear: both;
}

.tr-anfrage__positionen > .tr-anfrage__hilfe {
	margin-block-end: var(--tr-a-abstand-klein);
}

/* Kontakt: 3 Felder je Zeile (Desktop), 2 (Tablet), 1 (Handy) */
.tr-anfrage__kontakt {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tr-a-abstand-klein) var(--tr-a-abstand);
	align-items: start;
}

.tr-anfrage__kontakt > legend {
	float: left;
	grid-column: 1 / -1;
	width: 100%;
	margin-block-end: 0.25rem;
	padding: 0;
	margin-inline-start: 0;
}

/* ---------- Felder ---------- */
.tr-anfrage__feld {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.tr-anfrage__feld label {
	font-weight: 600;
	font-size: 0.875rem;
	margin: 0;
}

/* Hilfetext unter dem Feld, damit die Eingaben einer Zeile auf einer Höhe liegen */
.tr-anfrage__feld > .tr-anfrage__hilfe {
	order: 3;
}

.tr-anfrage__feld > .tr-anfrage__fehler {
	order: 4;
}

.tr-anfrage__feld input:not([type="checkbox"]),
.tr-anfrage__feld select,
.tr-anfrage__feld textarea {
	font: inherit;
	color: var(--tr-a-text);
	background: var(--tr-a-flaeche);
	border: 1px solid var(--tr-a-linie);
	border-radius: var(--tr-a-radius);
	padding: 0.45rem 0.75rem;
	min-height: var(--tr-a-feld-hoehe);
	height: var(--tr-a-feld-hoehe);
	width: 100%;
	box-sizing: border-box;
}

.tr-anfrage__feld textarea {
	height: auto;
	min-height: 4.25rem;
	resize: vertical;
}

.tr-anfrage__feld input[type="file"] {
	height: auto;
	padding: 0.4rem;
}

.tr-anfrage__feld input[type="file"]::file-selector-button {
	font: inherit;
	min-height: 2rem;
	margin-inline-end: 0.75rem;
	padding: 0.25rem 1rem;
	border: 1px solid var(--tr-a-text);
	border-radius: 999px;
	background: var(--tr-a-flaeche-alt);
	color: var(--tr-a-text);
	cursor: pointer;
}

.tr-anfrage__feld input:hover:not([type="checkbox"]),
.tr-anfrage__feld select:hover,
.tr-anfrage__feld textarea:hover {
	border-color: var(--tr-a-text);
}

.tr-anfrage__feld--check {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--tr-a-feld-hoehe);
}

.tr-anfrage__feld--check input {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	flex: none;
	accent-color: var(--tr-a-akzent);
}

.tr-anfrage__feld--check label {
	font-weight: 500;
}

.tr-anfrage :focus-visible {
	outline: 3px solid var(--tr-a-text);
	outline-offset: 2px;
}

.tr-anfrage__hilfe,
.tr-anfrage__pflicht-hinweis,
.tr-anfrage__datenschutz {
	color: var(--tr-a-leise);
	font-size: 0.8125rem;
	margin: 0;
}

.tr-anfrage__pflicht {
	color: var(--tr-a-fehler);
}

.tr-anfrage__fehler {
	color: var(--tr-a-fehler);
	font-weight: 600;
	font-size: 0.875rem;
	margin: 0;
}

.tr-anfrage__fehler:empty {
	display: none;
}

.tr-anfrage__feld--fehler input,
.tr-anfrage__feld--fehler select,
.tr-anfrage__feld--fehler textarea {
	border: 2px solid var(--tr-a-fehler);
}

.tr-anfrage__fehlerliste {
	border: 2px solid var(--tr-a-fehler);
	border-left-width: 6px;
	border-radius: var(--tr-a-radius);
	padding: var(--tr-a-abstand);
	background: var(--tr-a-flaeche);
}

.tr-anfrage__fehlerliste h2 {
	margin: 0 0 0.5rem;
	font-size: 1.05em;
}

.tr-anfrage__fehlerliste a {
	color: var(--tr-a-fehler);
}

/* ---------- Positionen ---------- */
.tr-anfrage__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--tr-a-abstand-klein);
}

.tr-anfrage__position > fieldset {
	position: relative;
	border: 1px solid var(--tr-a-linie-leicht);
	border-radius: var(--tr-a-radius);
	background: var(--tr-a-flaeche-alt);
	margin: 0;
	padding: 0.75rem var(--tr-a-abstand) var(--tr-a-abstand);
	min-width: 0;
}

.tr-anfrage__position legend {
	float: left;
	width: 100%;
	margin: 0 0 0.5rem;
	padding: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	min-height: 2rem;
	line-height: 2rem;
}

.tr-anfrage__position-raster {
	clear: both;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 0.625rem var(--tr-a-abstand-klein);
	align-items: start;
}

/* Desktop: Hersteller | Artikelnummer | Menge | Einheit — darunter Beschreibung | Wunschtermin | Alternative */
.tr-anfrage__position-raster > :nth-child(1) { grid-column: 1 / span 3; grid-row: 1; }
.tr-anfrage__position-raster > :nth-child(2) { grid-column: 4 / span 4; grid-row: 1; }
.tr-anfrage__position-raster > :nth-child(3) { grid-column: 1 / span 6; grid-row: 2 / span 2; }
.tr-anfrage__position-raster > :nth-child(4) { grid-column: 8 / span 2; grid-row: 1; }
.tr-anfrage__position-raster > :nth-child(5) { grid-column: 10 / span 3; grid-row: 1; }
.tr-anfrage__position-raster > :nth-child(6) { grid-column: 7 / span 6; grid-row: 3; min-height: 2rem; }
.tr-anfrage__position-raster > :nth-child(7) { grid-column: 7 / span 2; grid-row: 2; }
.tr-anfrage__position-raster > :nth-child(8) { grid-column: 9 / span 4; grid-row: 2; }

/* Beschreibung: breit, aber niedrig (2 Zeilen) */
.tr-anfrage__position-raster textarea {
	min-height: 4.25rem;
}

.tr-anfrage__entfernen.tr-button-sekundaer {
	position: absolute;
	top: 0.625rem;
	inset-inline-end: var(--tr-a-abstand);
	min-height: 2rem;
	padding: 0.2rem 0.9rem;
	font-size: 0.8125rem;
}

.tr-anfrage__hinzu.tr-button-sekundaer {
	margin-top: var(--tr-a-abstand-klein);
}

.tr-anfrage__position-raster code,
.tr-anfrage [id$="-artikelnummer"] {
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* Ohne JavaScript: weitere Positionen eingeklappt */
.tr-anfrage__mehr {
	margin-top: var(--tr-a-abstand-klein);
}

.tr-anfrage__mehr > summary {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.4rem 1.1rem;
	border: 1px solid var(--tr-a-text);
	border-radius: 999px;
	font-weight: 600;
	cursor: pointer;
}

.tr-anfrage__mehr > summary::-webkit-details-marker {
	display: none;
}

.tr-anfrage__mehr > summary::before {
	content: "+";
	margin-inline-end: 0.5rem;
	font-weight: 700;
}

.tr-anfrage__mehr[open] > summary::before {
	content: "−";
}

.tr-anfrage__mehr[open] > summary {
	margin-bottom: var(--tr-a-abstand-klein);
}

.tr-anfrage__mehr > .tr-anfrage__hilfe {
	margin-top: var(--tr-a-abstand-klein);
}

/* Ansage für Screenreader (sichtbar nur für Hilfstechnik) */
.tr-anfrage__ansage {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Schaltflächen (Pill) ---------- */
.tr-anfrage button,
.tr-anfrage .tr-button-sekundaer {
	font: inherit;
	cursor: pointer;
	min-height: 2.75rem;
	padding: 0.55rem 1.4rem;
	border-radius: 999px;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.tr-anfrage__senden {
	background: var(--tr-a-akzent);
	color: #ffffff;
	border: 2px solid var(--tr-a-akzent);
	font-weight: 700;
	padding-inline: 2rem;
}

.tr-anfrage__senden:hover {
	background: var(--tr-a-text);
	border-color: var(--tr-a-text);
}

.tr-anfrage__senden[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.tr-anfrage .tr-button-sekundaer {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background: var(--tr-a-flaeche);
	color: var(--tr-a-text);
	border: 1px solid var(--tr-a-text);
	text-decoration: none;
	font-weight: 600;
}

.tr-anfrage .tr-button-sekundaer:hover {
	background: var(--tr-a-text);
	color: var(--tr-a-flaeche);
}

/* ---------- Zusammenfassung, Hinweise, Erfolg ---------- */
.tr-anfrage__zusammenfassung {
	background: var(--tr-a-flaeche-alt);
	border-inline-start: 4px solid var(--tr-a-text);
	border-radius: var(--tr-a-radius);
	padding: 0.75rem var(--tr-a-abstand);
}

.tr-anfrage__zusammenfassung h2 {
	margin: 0 0 0.25rem;
	font-size: 1em;
}

.tr-anfrage__zusammenfassung ul {
	margin: 0;
	padding-inline-start: 1.2em;
	display: flex;
	flex-wrap: wrap;
	column-gap: 2.5em;
}

.tr-anfrage__weg {
	border-inline-start: 4px solid var(--tr-a-primaer);
	padding-inline-start: 0.75rem;
}

.tr-anfrage__erfolg {
	border: 2px solid var(--tr-a-erfolg);
	border-left-width: 6px;
	border-radius: var(--tr-a-radius);
	padding: var(--tr-a-abstand);
}

.tr-anfrage__vorgang {
	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
	font-size: 1.25em;
	letter-spacing: 0.04em;
}

.tr-anfrage__status:empty {
	display: none;
}

.tr-anfrage__aktionen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--tr-a-abstand);
}

/* Honeypot: für Menschen unsichtbar, für Hilfstechnik ausgeblendet */
.tr-anfrage__hp {
	/* Ohne Versatz versteckt: -10000px ergab in der LTR-Insel auf AR-Seiten 10.000 px seitlichen Scrollraum */
	position: absolute !important;
	inset-block-start: 0;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.tr-anfrage--js .tr-anfrage__ohne-js {
	display: none;
}

.tr-anfrage [hidden] {
	display: none !important;
}

/* ---------- Tablet: 6 Spalten je Position, Kontakt 2 je Zeile ---------- */
@media (max-width: 63.99rem) {
	.tr-anfrage__position-raster {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.tr-anfrage__position-raster > :nth-child(n) {
		grid-row: auto;
	}

	.tr-anfrage__position-raster > :nth-child(1) { grid-column: 1 / span 3; }
	.tr-anfrage__position-raster > :nth-child(2) { grid-column: 4 / span 3; }
	.tr-anfrage__position-raster > :nth-child(3) { grid-column: 1 / -1; }
	.tr-anfrage__position-raster > :nth-child(4) { grid-column: 1 / span 2; }
	.tr-anfrage__position-raster > :nth-child(5) { grid-column: 3 / span 2; }
	.tr-anfrage__position-raster > :nth-child(6) { grid-column: 5 / span 2; align-self: end; }
	.tr-anfrage__position-raster > :nth-child(7) { grid-column: 1 / span 3; }
	.tr-anfrage__position-raster > :nth-child(8) { grid-column: 4 / span 3; }

	.tr-anfrage__kontakt {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Handy: eine Spalte, nur Menge + Einheit nebeneinander ---------- */
@media (max-width: 40rem) {
	.tr-anfrage {
		--tr-a-abstand: 1rem;
	}

	.tr-anfrage__gruppe {
		padding: 0.875rem;
	}

	.tr-anfrage__position > fieldset {
		padding: 0.625rem 0.75rem 0.875rem;
	}

	.tr-anfrage__entfernen.tr-button-sekundaer {
		inset-inline-end: 0.75rem;
	}

	.tr-anfrage__position-raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tr-anfrage__position-raster > :nth-child(n) {
		grid-column: 1 / -1;
	}

	.tr-anfrage__position-raster > :nth-child(4) { grid-column: 1; }
	.tr-anfrage__position-raster > :nth-child(5) { grid-column: 2; }

	.tr-anfrage__kontakt {
		grid-template-columns: minmax(0, 1fr);
	}

	.tr-anfrage__aktionen .tr-anfrage__senden {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tr-anfrage * {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}