/*
 * Kontaktseite (Sprint 11, AP 11.1) — nur auf page-kontakt.php geladen.
 * Erweitert um den Projekt-Assistenten (Version 1, freigegeben 2026-08-04);
 * gestalterisch veredelt 2026-08-05 (Auftraggeber-Freigabe der HTML-Vorschau)
 * — ausschließlich Gestaltung, keine Änderung an .wna-assistent*-Klassen-
 * Bedeutung, Zustandslogik oder Datenfluss in projekt-assistent.js.
 * .wna-assistent* ist das vom Skript gerenderte Ablauf-Panel; .wna-kontakt__feld*
 * wird von beidem geteilt (JS-Fragen und dem klassischen <noscript>-Formular).
 *
 * Oberflächen-System (bewusst ausschließlich bestehende Tokens, keine neue
 * Farbe): Seite = neutral-50 (main.css) → Bühne/Panel = neutral-100
 * ("Sekundärfläche, Karten", siehe theme.json) → Karten/Felder darin =
 * neutral-50, mit Orange-Akzent ausschließlich für den aktiven Auswahlzustand
 * und die Fortschrittsanzeige. Chamfer (--wp--custom--cut--*) als
 * durchgängiges Formprinzip statt Radius auf Bühne, Karten, Feldern, Buttons.
 */

.wna-kontakt__hero {
	padding-block: var(--wp--preset--spacing--7) var(--wp--preset--spacing--5);
}

.wna-kontakt__inhalt {
	max-width: 64rem;
	padding-block-end: var(--wp--preset--spacing--8);
}

.wna-kontakt__einleitung {
	margin-bottom: var(--wp--preset--spacing--6);
	max-width: 42rem;
}

.wna-kontakt__fehler {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--5);
	color: var(--wp--preset--color--text-inverse);
	background-color: var(--wp--preset--color--status-error);
	border-radius: var(--wp--custom--radius--sm);
}

/* ---------- Geteilte Feld-Bausteine (JS-Ablauf und <noscript>-Formular) ---------- */

.wna-kontakt__feld {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	margin: 0 0 var(--wp--preset--spacing--5);
}

.wna-kontakt__feld label {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body);
}

.wna-kontakt__feld input,
.wna-kontakt__feld textarea {
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4);
	font: inherit;
	color: var(--wp--custom--color--text-primary);
	background-color: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 0;
	clip-path: polygon( 0 0, calc( 100% - var(--wp--custom--cut--sm) ) 0, 100% var(--wp--custom--cut--sm), 100% 100%, 0 100% );
	transition: border-color 150ms ease;
}

.wna-kontakt__feld input:focus,
.wna-kontakt__feld textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.wna-kontakt__feld.has-error input,
.wna-kontakt__feld.has-error textarea {
	border-color: var(--wp--preset--color--status-error);
}

.wna-kontakt__feld-hinweis {
	margin: calc( -1 * var(--wp--preset--spacing--3) ) 0 var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
}

.wna-kontakt__feld-gruppe {
	padding: 0;
	margin: 0 0 var(--wp--preset--spacing--4);
	border: none;
}

.wna-kontakt__feld-gruppe legend {
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--3);
	font-weight: 600;
}

.wna-kontakt__radio {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--2);
	font-weight: 400;
}

.wna-kontakt__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Projekt-Assistent — Bühne ---------- */

.wna-assistent {
	background-color: var(--wp--preset--color--neutral-100);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 0;
	clip-path: polygon( 0 0, calc( 100% - var(--wp--custom--cut--lg) ) 0, 100% var(--wp--custom--cut--lg), 100% 100%, 0 100% );
	padding: var(--wp--preset--spacing--8);
}

@media ( max-width: 680px ) {
	.wna-assistent {
		clip-path: polygon( 0 0, calc( 100% - var(--wp--custom--cut--md) ) 0, 100% var(--wp--custom--cut--md), 100% 100%, 0 100% );
		padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--5);
	}
}

/* Eyebrow (bestehendes Site-Motiv, hier für den Assistenten-Kontext genutzt) */

.wna-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
}

/* ---------- Fortschrittsanzeige ---------- */

.wna-assistent__progress {
	display: flex;
	height: 3px;
	background-color: var(--wp--preset--color--neutral-200);
	margin-bottom: var(--wp--preset--spacing--3);
}

.wna-assistent__seg {
	flex: 1;
	height: 100%;
}

.wna-assistent__seg + .wna-assistent__seg {
	margin-left: 2px;
}

.wna-assistent__seg > i {
	display: block;
	height: 100%;
	width: 0;
	background-color: var(--wp--preset--color--accent);
	transition: width 200ms ease-out;
}

.wna-assistent__seg.is-done > i {
	width: 100%;
}

.wna-assistent__seg.is-current > i {
	width: 100%;
	position: relative;
}

.wna-assistent__seg.is-current > i::after {
	content: "";
	position: absolute;
	right: -5px;
	top: -3px;
	bottom: -3px;
	width: 8px;
	background-color: var(--wp--preset--color--accent);
	clip-path: polygon( 0 0, 100% 50%, 0 100% );
}

.wna-assistent__panel {
	display: flex;
	flex-direction: column;
}

@media ( prefers-reduced-motion: no-preference ) {
	.wna-assistent__panel {
		animation: wna-assistent-schritt-ein 240ms ease-out;
	}
}

@keyframes wna-assistent-schritt-ein {
	from {
		opacity: 0;
		transform: translateY( 10px );
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.wna-assistent__titel {
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 var(--wp--preset--spacing--2);
}

.wna-assistent__titel:focus-visible {
	outline: none;
}

.wna-assistent__sub {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--lead);
	margin: 0 0 var(--wp--preset--spacing--5);
	max-width: 52ch;
}

.wna-assistent__req {
	/* Textfarbe bewusst nicht Akzent-Orange: 2,11:1 auf neutral-50, unter dem
	   WCAG-AA-Mindestwert 4,5:1 (siehe DECISIONS.md, bereits einmal korrigiert). */
	color: var(--wp--preset--color--text-secondary);
	font-weight: 700;
}

/* ---------- Einstieg: Hero ---------- */

.wna-assistent__hero {
	margin-bottom: var(--wp--preset--spacing--7);
}

.wna-assistent__hero .wna-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 var(--wp--preset--spacing--4);
}

.wna-assistent__hero .wna-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background-color: var(--wp--preset--color--accent);
	flex: none;
}

.wna-assistent__hero-titel {
	/* Groesser und mit mehr Zeilenabstand als zuvor — soll emotionaler wirken,
	   ohne den Wortlaut zu aendern (2026-08-05, rein gestalterisch). */
	font-size: clamp( 2.1rem, 4.4vw, 3rem );
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-wrap: balance;
	max-width: 17ch;
	margin: 0 0 var(--wp--preset--spacing--5);
}

.wna-assistent__hero-sub {
	max-width: 52ch;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	color: var(--wp--preset--color--text-secondary);
	margin: 0;
}

/* ---------- Einstieg: Leistungskarten ---------- */

.wna-assistent__service-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var(--wp--preset--spacing--4);
	margin-bottom: var(--wp--preset--spacing--5);
}

@media ( max-width: 900px ) {
	.wna-assistent__service-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media ( max-width: 560px ) {
	.wna-assistent__service-grid {
		grid-template-columns: 1fr;
	}
}

.wna-assistent__service-karte {
	position: relative;
	overflow: hidden;
	text-align: left;
	font: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--4);
	background-color: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-left: 3px solid transparent;
	border-radius: 0;
	clip-path: polygon( 0 0, calc( 100% - var(--wp--custom--cut--sm) ) 0, 100% var(--wp--custom--cut--sm), 100% 100%, 0 100% );
	transition: border-color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}

.wna-assistent__service-karte::after {
	/* Akzentanimation: schmale Orange-Linie, die beim Hover von links
	   einschwingt (2026-08-05, rein gestalterisch). */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background-color: var(--wp--preset--color--accent);
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 220ms ease-out;
}

.wna-assistent__service-karte:hover::after,
.wna-assistent__service-karte:focus-visible::after {
	transform: scaleX( 1 );
}

.wna-assistent__service-karte:hover {
	/* Etwas lebendiger: leichte Elevation per Schatten statt nur Rahmenfarbe
	   (2026-08-05, rein gestalterisch) — Schattenfarbe ist die bestehende
	   Anthrazit-Textfarbe bei reduzierter Deckkraft, keine neue Farbe. */
	border-color: var(--wp--preset--color--accent);
	transform: translateY( -4px );
	box-shadow: 0 14px 28px -16px rgba( 34, 31, 29, 0.35 );
}

.wna-assistent__service-karte:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.wna-assistent__service-karte .t {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--2);
}

.wna-assistent__service-karte .t::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate( -45deg );
	opacity: 0;
	transition: opacity 150ms ease, transform 150ms ease;
}

.wna-assistent__service-karte:hover .t::after,
.wna-assistent__service-karte:focus-visible .t::after {
	opacity: 1;
	transform: rotate( -45deg ) translateX( 2px );
}

.wna-assistent__service-karte .d {
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.55;
}

.wna-assistent__divider {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	margin: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	color: var(--wp--preset--color--neutral-400);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.wna-assistent__divider::before,
.wna-assistent__divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--wp--preset--color--neutral-200);
}

.wna-assistent__quick-btn {
	/* Bewusst zurueckhaltender als die Leistungskarten (2026-08-05, rein
	   gestalterisch): kein Rahmen/Chamfer/eigene Flaeche mehr — liest sich
	   als ruhiger Zweitweg, nicht als gleichwertige Alternative zur
	   Hauptauswahl. */
	display: block;
	width: 100%;
	text-align: center;
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	cursor: pointer;
	padding: var(--wp--preset--spacing--3);
	background: none;
	color: var(--wp--preset--color--text-secondary);
	border: none;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--neutral-200);
	text-underline-offset: 3px;
	transition: color 150ms ease, text-decoration-color 150ms ease;
}

.wna-assistent__quick-btn:hover,
.wna-assistent__quick-btn:focus-visible {
	color: var(--wp--custom--color--text-primary);
	text-decoration-color: currentColor;
	outline: none;
}

/* ---------- Auswahlfragen ---------- */

.wna-assistent__choice-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--5);
}

@media ( max-width: 560px ) {
	.wna-assistent__choice-grid {
		grid-template-columns: 1fr;
	}
}

.wna-assistent__choice-btn {
	position: relative;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--7) var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	background-color: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-left: 3px solid transparent;
	border-radius: 0;
	clip-path: polygon( 0 0, calc( 100% - var(--wp--custom--cut--sm) ) 0, 100% var(--wp--custom--cut--sm), 100% 100%, 0 100% );
	transition: border-color 150ms ease;
}

.wna-assistent__choice-btn::after {
	content: "";
	position: absolute;
	right: var(--wp--preset--spacing--5);
	top: 50%;
	width: 7px;
	height: 12px;
	border-right: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: translateY( -60% ) rotate( 45deg ) scale( 0.7 );
	opacity: 0;
	transition: opacity 150ms ease, transform 150ms ease;
}

.wna-assistent__choice-btn[aria-pressed="true"] {
	border-left-color: var(--wp--preset--color--accent);
}

.wna-assistent__choice-btn[aria-pressed="true"]::after {
	opacity: 1;
	transform: translateY( -60% ) rotate( 45deg ) scale( 1 );
}

.wna-assistent__choice-btn:hover,
.wna-assistent__choice-btn:focus-visible {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}

.wna-assistent__choice-btn[aria-pressed="true"]:hover,
.wna-assistent__choice-btn[aria-pressed="true"]:focus-visible {
	border-left-color: var(--wp--preset--color--accent);
}

/* Terminwahl (terminart-Schritt nutzt dieselbe Choice-Grid-/Button-Struktur,
   erhält aber ein eigenes Icon-Karten-Layout — siehe .wna-assistent__termin-icon
   in projekt-assistent.js, rein dekorativ, keine Logikänderung). */

.wna-assistent__choice-grid--termin {
	grid-template-columns: repeat( 4, 1fr );
}

@media ( max-width: 760px ) {
	.wna-assistent__choice-grid--termin {
		grid-template-columns: 1fr 1fr;
	}
}

.wna-assistent__choice-btn--termin {
	text-align: center;
	padding: var(--wp--preset--spacing--5) var(--wp--preset--spacing--3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	border-left: none;
	border-top: 3px solid transparent;
}

.wna-assistent__choice-btn--termin::after {
	display: none;
}

.wna-assistent__choice-btn--termin[aria-pressed="true"] {
	border-top-color: var(--wp--preset--color--accent);
	border-left: 1px solid var(--wp--preset--color--neutral-200);
}

.wna-assistent__termin-icon {
	color: var(--wp--preset--color--text-secondary);
	transition: color 150ms ease;
}

.wna-assistent__choice-btn--termin[aria-pressed="true"] .wna-assistent__termin-icon {
	/* Text-Primär statt Akzent-Orange: das Icon ist neben der Rahmenfarbe der
	   zweite visuelle Statushinweis und muss daher als Grafikelement die
	   3:1-Mindestkontrastanforderung erfüllen (Akzent auf neutral-50: 2,11:1). */
	color: var(--wp--custom--color--text-primary);
}

.wna-assistent__multi-grid {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	margin-bottom: var(--wp--preset--spacing--5);
}

.wna-assistent__multi-opt {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	background-color: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 0;
	clip-path: polygon( 0 0, calc( 100% - var(--wp--custom--cut--sm) ) 0, 100% var(--wp--custom--cut--sm), 100% 100%, 0 100% );
	cursor: pointer;
	transition: border-color 150ms ease;
}

.wna-assistent__multi-opt:hover {
	border-color: var(--wp--preset--color--accent);
}

.wna-assistent__multi-opt.is-checked {
	border-color: var(--wp--preset--color--accent);
}

.wna-assistent__multi-opt input {
	appearance: none;
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	flex: none;
	margin: 0;
	position: relative;
	background-color: var(--wp--preset--color--neutral-50);
	border: 1.5px solid var(--wp--preset--color--neutral-400);
	clip-path: polygon( 0 0, calc( 100% - 5px ) 0, 100% 5px, 100% 100%, 0 100% );
	cursor: pointer;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.wna-assistent__multi-opt input:checked {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.wna-assistent__multi-opt input:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate( 40deg );
}

.wna-assistent__multi-opt input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.wna-assistent__unit {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
	margin: calc( -1 * var(--wp--preset--spacing--3) ) 0 var(--wp--preset--spacing--4);
}

.wna-assistent__wochenende {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--text-primary);
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--2);
	min-height: 1.2em;
	margin: 0 0 var(--wp--preset--spacing--3);
}

.wna-assistent__wochenende:empty {
	border-left-color: transparent;
}

/* ---------- Datenschutzhinweis (2026-08-05, vor dem Absenden) ---------- */

.wna-assistent__datenschutz {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--text-secondary);
	line-height: 1.6;
	margin: 0 0 var(--wp--preset--spacing--6);
	padding-left: var(--wp--preset--spacing--4);
	border-left: 2px solid var(--wp--preset--color--neutral-200);
}

.wna-assistent__datenschutz a {
	color: var(--wp--custom--color--text-primary);
	text-decoration: underline;
	font-weight: 600;
}

.wna-assistent__datenschutz a:hover,
.wna-assistent__datenschutz a:focus-visible {
	/* Kein Farbwechsel zu Akzent-Orange (2,11:1 auf neutral-50, unter AA) —
	   Hover-/Fokus-Feedback läuft über die bereits vorhandene Unterstreichung. */
	text-decoration-thickness: 2px;
}

/* ---------- Navigation ---------- */

.wna-assistent__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	margin-top: var(--wp--preset--spacing--6);
}

.wna-assistent__zurueck {
	font: inherit;
	font-weight: 600;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--wp--preset--color--text-secondary);
	padding: var(--wp--preset--spacing--2) 0;
	transition: color 150ms ease;
}

.wna-assistent__zurueck:hover,
.wna-assistent__zurueck:focus-visible {
	color: var(--wp--custom--color--text-primary);
	text-decoration: underline;
}

.wna-cta-band__link.wna-chamfer-sm {
	font-weight: 700;
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--7);
	transition: filter 150ms ease, transform 120ms ease-out;
}

.wna-cta-band__link.wna-chamfer-sm:hover {
	filter: brightness( 1.06 );
}

.wna-cta-band__link.wna-chamfer-sm:active {
	transform: translateY( 1px );
}

/* ---------- Zusammenfassung ("Dossier") ---------- */

.wna-assistent__summary-group {
	margin-bottom: var(--wp--preset--spacing--6);
}

.wna-assistent__summary-group h3 {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--wp--preset--color--text-secondary);
	margin: 0 0 var(--wp--preset--spacing--3);
}

.wna-assistent__summary-row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--4);
	padding: var(--wp--preset--spacing--3) 0;
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

.wna-assistent__summary-row .k {
	color: var(--wp--preset--color--text-secondary);
}

.wna-assistent__summary-row .v {
	font-weight: 600;
	text-align: right;
}

.wna-assistent__edit {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--custom--color--text-primary);
	text-decoration: underline;
	background: none;
	border: none;
	cursor: pointer;
	font-weight: 700;
	padding: 0;
	margin-left: var(--wp--preset--spacing--3);
	transition: color 150ms ease;
}

.wna-assistent__edit:hover,
.wna-assistent__edit:focus-visible {
	/* Kein Farbwechsel zu Akzent-Orange (2,11:1 auf neutral-50, unter AA) —
	   Hover-/Fokus-Feedback läuft über die bereits vorhandene Unterstreichung. */
	text-decoration-thickness: 2px;
}

/* ---------- Termin-Alternativen ---------- */

.wna-assistent__alt-row {
	margin-bottom: var(--wp--preset--spacing--4);
	padding-bottom: var(--wp--preset--spacing--4);
	border-bottom: 1px solid var(--wp--preset--color--neutral-200);
}

.wna-assistent__alt-fields {
	margin-top: var(--wp--preset--spacing--3);
}

.wna-assistent__alt-fields.is-hidden {
	display: none;
}

/* ---------- Erwartungsbox (Kontaktschritt, Terminwunsch-Anzeige) ---------- */

.wna-assistent__expect {
	background-color: var(--wp--preset--color--neutral-50);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 0;
	clip-path: polygon( 0 0, calc( 100% - var(--wp--custom--cut--sm) ) 0, 100% var(--wp--custom--cut--sm), 100% 100%, 0 100% );
	padding: var(--wp--preset--spacing--5);
	margin: 0 0 var(--wp--preset--spacing--5);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--text-secondary);
}

.wna-assistent__expect-titel {
	font-weight: 700;
	color: var(--wp--custom--color--text-primary);
	margin: 0 0 var(--wp--preset--spacing--2);
}

.wna-assistent__expect ul {
	margin: var(--wp--preset--spacing--2) 0 0;
	padding-left: 1.1rem;
}

.wna-assistent__expect li {
	margin-bottom: var(--wp--preset--spacing--1);
}

@media ( prefers-reduced-motion: reduce ) {
	.wna-assistent__panel {
		animation: none;
	}
	.wna-assistent__service-karte,
	.wna-assistent__choice-btn,
	.wna-assistent__multi-opt,
	.wna-cta-band__link.wna-chamfer-sm {
		transition: none;
	}
}