/* ==========================================================================
   PRINTEREI – COMPONENTS
   Reusable building blocks. Every page uses these – never one-off styles.
   Uses tokens.css only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icon (Tabler SVG sprite)
   -------------------------------------------------------------------------- */
.icon {
	width: var(--icon-size, var(--icon-sm));
	height: var(--icon-size, var(--icon-sm));
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: var(--icon-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.icon--xs { --icon-size: var(--icon-xs); }
.icon--md { --icon-size: var(--icon-md); }
.icon--lg { --icon-size: var(--icon-lg); }

/* --------------------------------------------------------------------------
   Button
   Variants: --primary (red), --secondary (teal), --outline, --ghost,
             --light (for dark backgrounds)
   Sizes:    --sm, (default), --lg
   Icon:     add .btn__icon; arrows slide on hover automatically.
   -------------------------------------------------------------------------- */
.btn {
	--btn-h: var(--control-h);
	--btn-px: var(--control-px);
	--btn-bg: var(--color-primary);
	--btn-bg-hover: var(--color-primary-hover);
	--btn-fg: var(--color-on-primary);
	--btn-fg-hover: var(--btn-fg);
	--btn-border: transparent;
	--btn-border-hover: var(--btn-border);
	--btn-shadow-hover: none; /* buttons only lift a little on hover, no shadow */

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: var(--btn-h);
	padding: 0 var(--btn-px);
	border: var(--control-border) solid var(--btn-border);
	border-radius: var(--radius-control);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	line-height: 1;
	letter-spacing: var(--ls-snug);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.btn:hover {
	background: var(--btn-bg-hover);
	border-color: var(--btn-border-hover);
	color: var(--btn-fg-hover);
	box-shadow: var(--btn-shadow-hover);
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.btn:focus-visible {
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-control);
}

.btn__icon {
	--icon-size: var(--icon-sm);
	transition: transform var(--dur-base) var(--ease-out);
}

.btn:hover .btn__icon--arrow {
	transform: translateX(3px);
}

.btn:hover .btn__icon--diag {
	transform: translate(2px, -2px);
}

.btn--secondary {
	--btn-bg: var(--color-secondary);
	--btn-bg-hover: var(--color-secondary-hover);
	--btn-fg: var(--color-on-secondary);
}

.btn--outline {
	--btn-bg: transparent;
	--btn-bg-hover: var(--color-secondary);
	--btn-fg: var(--color-secondary);
	--btn-fg-hover: var(--color-on-secondary);
	--btn-border: var(--color-secondary);
}

.btn--ghost {
	--btn-bg: transparent;
	--btn-bg-hover: var(--color-secondary-soft);
	--btn-fg: var(--color-secondary);
	--btn-px: var(--space-4);
}

.btn--light {
	--btn-bg: var(--c-white);
	--btn-bg-hover: var(--c-white);
	--btn-fg: var(--color-secondary);
	--btn-fg-hover: var(--color-primary);
}

/* Light green call to action (header, menu bar, phone menu): teal on hover */
.btn--lime {
	--btn-bg: var(--color-todo);
	--btn-bg-hover: var(--color-secondary);
	--btn-fg: var(--color-on-todo);
	--btn-fg-hover: var(--color-on-secondary);
}

/* 1.3.39: in the teal menu bar a teal hover would vanish (teal on teal) – there it turns white with black text. */
.site-header__bar .btn--lime {
	--btn-bg-hover: var(--c-white);
	--btn-fg-hover: var(--color-on-todo);
}

.btn--sm {
	--btn-h: var(--control-h-sm);
	--btn-px: var(--control-px-sm);
	font-size: var(--fs-sm);
}

.btn--lg {
	--btn-h: var(--control-h-lg);
	--btn-px: var(--control-px-lg);
	font-size: var(--fs-md);
}

.btn--block {
	width: 100%;
}

/* Square icon-only button (same height as .btn) */
.icon-btn {
	--ib-size: var(--control-h);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ib-size);
	height: var(--ib-size);
	padding: 0;
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-control);
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	transition:
		border-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}

.icon-btn:hover {
	border-color: var(--color-secondary);
	color: var(--color-secondary);
}

.icon-btn .icon {
	--icon-size: var(--icon-sm);
}

.icon-btn--round {
	border-radius: var(--radius-pill);
}

.icon-btn__badge {
	position: absolute;
	top: calc(var(--space-2) * -1);
	right: calc(var(--space-2) * -1);
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 var(--space-1);
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-on-primary);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1.25rem;
	text-align: center;
	box-shadow: 0 0 0 2px var(--color-surface);
}

/* --------------------------------------------------------------------------
   Eyebrow, badge, chip
   -------------------------------------------------------------------------- */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--color-primary-text);
}

.eyebrow::before {
	content: "";
	width: var(--space-6);
	height: 2px;
	border-radius: var(--radius-pill);
	background: currentColor;
}

.section-head--center .eyebrow::before,
.eyebrow--plain::before {
	display: none;
}

.section--dark .eyebrow {
	color: var(--c-teal-100);
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--accent-soft, var(--color-secondary-soft));
	color: var(--accent-ink, var(--color-secondary));
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	white-space: nowrap;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: var(--control-h-sm);
	padding: 0 var(--space-4);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	transition: all var(--dur-base) var(--ease-out);
}

.chip:hover,
.chip[aria-pressed="true"] {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
}

/* --------------------------------------------------------------------------
   Icon tile – colored square holding an icon (uses .accent-* classes)
   -------------------------------------------------------------------------- */
.icon-tile {
	--tile-size: 3.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tile-size);
	height: var(--tile-size);
	flex: none;
	border-radius: var(--radius-tile);
	background: var(--accent-soft, var(--color-secondary-soft));
	color: var(--accent-ink, var(--color-secondary));
	transition:
		background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		transform var(--dur-slow) var(--ease-spring);
}

.icon-tile .icon {
	--icon-size: var(--icon-md);
}

.icon-tile--sm {
	--tile-size: 2.75rem;
}

.icon-tile--sm .icon {
	--icon-size: var(--icon-sm);
}

/* --------------------------------------------------------------------------
   Card – base + two variants used on the homepage
   -------------------------------------------------------------------------- */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
	transition:
		transform var(--dur-slow) var(--ease-out),
		box-shadow var(--dur-slow) var(--ease-out),
		border-color var(--dur-slow) var(--ease-out);
}

a.card:hover,
.card--hover:hover {
	transform: translateY(var(--hover-lift));
	box-shadow: var(--shadow-md);
	border-color: transparent;
	color: var(--color-text);
}

a.card:hover .icon-tile {
	background: var(--accent, var(--color-secondary));
	color: var(--accent-on, var(--color-on-secondary));
	transform: rotate(-6deg) scale(1.06);
}

.card__title {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
}

.card__text {
	font-size: var(--fs-sm);
	color: var(--color-text-muted);
}

.card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-2);
}

.card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-secondary);
}

.card__link .icon {
	--icon-size: var(--icon-xs);
	transition: transform var(--dur-base) var(--ease-out);
}

a.card:hover .card__link {
	color: var(--color-primary);
}

a.card:hover .card__link .icon {
	transform: translateX(3px);
}

/* Colored top line that grows on hover */
.card--accent-line::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto;
	height: 4px;
	border-radius: var(--radius-card) var(--radius-card) 0 0;
	background: var(--accent, var(--color-primary));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-slow) var(--ease-out);
}

a.card--accent-line:hover::before {
	transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Media – real image or branded placeholder (until photos are delivered)
   -------------------------------------------------------------------------- */
.media {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-media);
	background: var(--accent-soft, var(--color-surface-sunk));
	/* --ratio comes from the markup; a parent may override it per breakpoint */
	aspect-ratio: var(--ratio-override, var(--ratio, 4 / 3));
}

.media > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-reveal) var(--ease-out);
}

.media--placeholder {
	display: grid;
	place-items: center;
	color: var(--accent-ink, var(--color-secondary));
}

/* CMYK dots pattern + large icon = branded placeholder */
.media--placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
	background-size: 18px 18px;
	opacity: 0.14;
}

.media__icon {
	position: relative;
	--icon-size: 4rem;
	--icon-stroke: 1.25;
	opacity: 0.9;
}

.media__label {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-xs);
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	box-shadow: var(--shadow-xs);
}

/* --------------------------------------------------------------------------
   CMYK bar – brand signature stripe
   -------------------------------------------------------------------------- */
.cmyk-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	height: 4px;
}

.cmyk-bar > span:nth-child(1) { background: var(--c-cyan-500); }
.cmyk-bar > span:nth-child(2) { background: var(--c-magenta-500); }
.cmyk-bar > span:nth-child(3) { background: var(--c-yellow-500); }
.cmyk-bar > span:nth-child(4) { background: var(--c-key-900); }

/* --------------------------------------------------------------------------
   Form controls (same height + radius as buttons)
   -------------------------------------------------------------------------- */
.field {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* A long select text never makes the field wider than its column. */
	gap: var(--space-2);
}

.field__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--color-text);
}

.input {
	width: 100%;
	min-height: var(--control-h);
	padding: 0 var(--space-4);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-control);
	background: var(--color-field);
	color: var(--color-text);
	font-size: var(--fs-base);
	transition:
		border-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

/* A textarea keeps the same inset at the top as at the side, so its first line stays clear of the floating label. */
textarea.input {
	min-height: 7rem;
	padding-block: var(--space-3);
	line-height: var(--lh-base);
	resize: vertical;
}

.input::placeholder {
	color: var(--color-text-subtle);
}

.input:hover {
	border-color: var(--c-gray-400);
}

.input:focus-visible {
	border-color: var(--color-focus);
	box-shadow: 0 0 0 3px var(--c-cyan-50);
	border-radius: var(--radius-control);
}

/* --------------------------------------------------------------------------
   Dropdown (assets/js/select.js) – replaces the browser / WordPress look of
   every <select>. The real select stays hidden inside .pr-select.
   -------------------------------------------------------------------------- */
.pr-select {
	position: relative;
	display: block;
	min-width: 0;
}

.pr-select__native {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.pr-select__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	width: 100%;
	min-height: var(--control-h);
	padding: 0 var(--space-4);
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-control);
	background: var(--color-field);
	color: var(--color-text);
	font: inherit;
	font-size: var(--fs-base);
	text-align: left;
	cursor: pointer;
	transition:
		border-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.pr-select__button:hover {
	border-color: var(--c-gray-400);
}

.pr-select__button:focus-visible,
.pr-select.is-open .pr-select__button {
	border-color: var(--color-focus);
	border-radius: var(--radius-control);
	box-shadow: 0 0 0 3px var(--c-cyan-50);
	outline: none;
}

.pr-select__button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.pr-select__value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pr-select__button.is-placeholder .pr-select__value {
	color: var(--color-text-muted);
}

.pr-select__icon {
	flex: none;
	width: var(--icon-xs);
	height: var(--icon-xs);
	color: var(--color-text-muted);
	transition: transform var(--dur-fast) var(--ease-out);
}

.pr-select.is-open .pr-select__icon {
	transform: rotate(180deg);
}

.pr-select__list {
	position: absolute;
	z-index: var(--z-raised);
	top: calc(100% + var(--space-1));
	right: 0;
	left: 0;
	max-height: 18rem;
	margin: 0;
	padding: var(--space-1);
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-md);
	background: var(--color-field);
	box-shadow: var(--shadow-sm);
}

.pr-select__list[hidden] {
	display: none;
}

.pr-select.is-up .pr-select__list {
	top: auto;
	bottom: calc(100% + var(--space-1));
}

.pr-select__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 2.5rem;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-xs);
	color: var(--color-text);
	font-size: var(--fs-base);
	line-height: var(--lh-snug);
	cursor: pointer;
}

.pr-select__option.is-active {
	background: var(--color-surface-alt);
}

.pr-select__option[aria-selected="true"] {
	color: var(--color-secondary);
	font-weight: var(--fw-semibold);
}

/* Check mark on the chosen entry (mask = color from currentColor) */
.pr-select__option[aria-selected="true"]::after {
	content: "";
	flex: none;
	width: var(--icon-xs);
	height: var(--icon-xs);
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pr-select__option[aria-disabled="true"] {
	color: var(--color-text-subtle);
	cursor: default;
}

.form-note {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.notice {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-control);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.notice--success {
	background: var(--c-teal-50);
	color: var(--color-success);
}

.notice--error {
	background: var(--color-primary-soft);
	color: var(--color-error);
}

.hp-field {
	position: absolute;
	left: -9999px;
}

/* --------------------------------------------------------------------------
   Slider – one component, two modes:
   [data-slider="fade"]     one slide at a time (hero)
   [data-slider="carousel"] scroll-snap track, several visible (references)
   -------------------------------------------------------------------------- */
.slider {
	position: relative;
}

.slider__viewport {
	position: relative;
}

/* Carousel mode */
.slider--carousel .slider__track {
	--per-view: 3;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--per-view) - 1) * var(--grid-gap)) / var(--per-view));
	gap: var(--grid-gap);
	margin: 0;
	padding: 0 0 var(--space-2);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.slider--carousel .slider__track::-webkit-scrollbar {
	display: none;
}

.slider--carousel .slider__track:focus-visible {
	box-shadow: var(--focus-ring);
	border-radius: var(--radius-card);
}

.slider--carousel .slider__slide {
	scroll-snap-align: start;
	min-width: 0;
}

@media (max-width: 1024px) {
	.slider--carousel .slider__track { --per-view: 2; }
}

@media (max-width: 640px) {
	.slider--carousel .slider__track { --per-view: 1.15; }
}

/* Fade mode */
.slider--fade .slider__track {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slider--fade .slider__slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--dur-slow) var(--ease-out),
		visibility 0s linear var(--dur-slow);
}

.slider--fade .slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition:
		opacity var(--dur-slow) var(--ease-out),
		visibility 0s;
}

/* Controls */
.slider__controls {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.slider__arrow {
	--ib-size: var(--control-h);
}

.slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
	border-color: var(--color-border-strong);
	color: var(--color-text);
}

.slider__dots {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.slider__dot {
	display: block;
	width: var(--space-6);
	height: var(--space-6);
	padding: 0;
	border: 0;
	background: transparent;
	position: relative;
}

.slider__dot::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: var(--space-2);
	height: var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-border-strong);
	transform: translate(-50%, -50%);
	transition:
		width var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out);
}

.slider__dot[aria-current="true"]::before {
	width: var(--space-5);
	background: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Marquee – infinite logo strip
   -------------------------------------------------------------------------- */
.marquee {
	--gap: var(--space-4);
	display: flex;
	gap: var(--gap);
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, var(--c-white) 8%, var(--c-white) 92%, transparent);
}

.marquee__list {
	display: flex;
	flex: none;
	gap: var(--gap);
	min-width: 100%;
	justify-content: space-around;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: marquee var(--marquee-speed) linear infinite;
}

.marquee:hover .marquee__list,
.marquee:focus-within .marquee__list {
	animation-play-state: paused;
}

@keyframes marquee {
	to {
		transform: translateX(calc(-100% - var(--gap)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee {
		mask-image: none;
	}

	.marquee__list {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}

	.marquee__list[aria-hidden="true"] {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Accordion (native <details>)
   -------------------------------------------------------------------------- */
.accordion {
	display: grid;
	gap: var(--space-3);
}

.accordion__item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	background: var(--color-surface);
	transition:
		border-color var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.accordion__item:hover {
	border-color: var(--color-border-strong);
}

.accordion__item[open] {
	border-color: transparent;
	box-shadow: var(--shadow-md);
}

.accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	list-style: none;
	cursor: pointer;
	border-radius: var(--radius-card);
}

.accordion__summary::-webkit-details-marker {
	display: none;
}

/* The heading inside a summary (FAQ, AGB): part of the component, so it also works on plain pages. */
.accordion__question {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-normal);
}

.accordion__toggle {
	display: grid;
	place-items: center;
	width: var(--space-8);
	height: var(--space-8);
	flex: none;
	border-radius: var(--radius-pill);
	background: var(--color-secondary-soft);
	color: var(--color-secondary);
	transition:
		transform var(--dur-base) var(--ease-out),
		background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out);
}

.accordion__item[open] .accordion__toggle {
	transform: rotate(45deg);
	background: var(--color-primary);
	color: var(--color-on-primary);
}

.accordion__content {
	padding: 0 var(--space-6) var(--space-6);
	color: var(--color-text-muted);
}

.accordion__content > * {
	margin: 0;
}

.accordion__content > * + * {
	margin-top: var(--space-3); /* Several paragraphs (AGB) do not stick together. */
}

/* Opening and closing glide (browsers without ::details-content simply open at once). */
.accordion__item {
	interpolate-size: allow-keywords;
}

.accordion__item::details-content {
	block-size: 0;
	overflow: clip;
	transition:
		block-size var(--dur-slow) var(--ease-in-out),
		content-visibility var(--dur-slow) allow-discrete;
}

.accordion__item[open]::details-content {
	block-size: auto;
}

/* --------------------------------------------------------------------------
   Chips – small spec labels (and link variant)
   -------------------------------------------------------------------------- */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.chips--center {
	justify-content: center;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--color-surface-alt);
	color: var(--color-text);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}

.chip--link {
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border-strong);
	background: var(--color-surface);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition:
		background-color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.chip--link .icon {
	color: var(--accent-ink);
}

.chip--link:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--color-text);
	transform: translateY(var(--hover-lift));
}

/* --------------------------------------------------------------------------
   Mockup card – tinted 4:5 stage, icon badge, title, chips, price + arrow
   -------------------------------------------------------------------------- */
.card--mockup {
	height: 100%;
	gap: 0;
	padding: var(--space-2);
}

.card__stage {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-md);
	background: var(--accent-soft);
}

.card__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
	background: var(--color-surface);
	box-shadow: var(--shadow-xs);
}

.card__mockup {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: var(--shadow-mockup);
	transition: transform var(--dur-reveal) var(--ease-out);
}

/* Photo mockups are full scenes: cover the stage, no cut-out shadow */
.card__mockup.mockup--photo {
	object-fit: cover;
	filter: none;
}

a.card--mockup:hover .card__mockup {
	transform: scale(1.04);
}

.card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-3) var(--space-3);
}

.card__price--quiet {
	color: var(--color-text-muted);
}

/* Segmented buttons: a thumb slides to the chosen button.
   Every row of 2–4 buttons that marks its choice with aria-checked,
   aria-selected or aria-pressed gets .pr-seg – then it slides, no extra CSS.
   (The radio switches .wz-seg and the KI switches .ai-seg / .ai-switch slide the same way.) */
.pr-seg {
	--n: 2;
	--i: 0;
	--seg-pad: var(--space-1);
	position: relative;
	isolation: isolate;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: var(--seg-pad);
	padding: var(--seg-pad);
}

.pr-seg[hidden] {
	display: none;
}

.pr-seg:has(> :nth-child(3)) {
	--n: 3;
}

.pr-seg:has(> :nth-child(4)) {
	--n: 4;
}

/* A hidden last button (only offered sometimes) takes no slot. */
.pr-seg:has(> :nth-child(3):last-child[hidden]) {
	--n: 2;
}

.pr-seg:has(> :nth-child(4):last-child[hidden]) {
	--n: 3;
}

.pr-seg:has(> :nth-child(2):is([aria-checked="true"], [aria-selected="true"], [aria-pressed="true"])) {
	--i: 1;
}

.pr-seg:has(> :nth-child(3):is([aria-checked="true"], [aria-selected="true"], [aria-pressed="true"])) {
	--i: 2;
}

.pr-seg:has(> :nth-child(4):is([aria-checked="true"], [aria-selected="true"], [aria-pressed="true"])) {
	--i: 3;
}

.pr-seg::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--seg-pad);
	bottom: var(--seg-pad);
	left: var(--seg-pad);
	width: calc((100% - var(--seg-pad) * (var(--n) + 1)) / var(--n));
	border-radius: var(--radius-sm);
	background: var(--seg-thumb, var(--color-surface));
	box-shadow: var(--shadow-xs);
	transform: translateX(calc((100% + var(--seg-pad)) * var(--i)));
	transition: transform var(--dur-slow) var(--ease-out);
	will-change: transform; /* Own layer: keeps sliding while the page is busy. */
}

/* The buttons themselves stay see-through: only the thumb moves. */
.pr-seg > :is(button, [role="radio"], [role="tab"]) {
	background: transparent;
	box-shadow: none;
	transition: color var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
	.pr-seg::before {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   «See all» link in a section head: text + round arrow, no box
   -------------------------------------------------------------------------- */
.more-link {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-secondary);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	white-space: nowrap;
}

.more-link__arrow {
	display: grid;
	place-items: center;
	width: var(--space-8);
	height: var(--space-8);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	transition:
		background-color var(--dur-base) var(--ease-out),
		border-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		translate var(--dur-base) var(--ease-out);
}

.more-link__arrow .icon {
	--icon-size: var(--icon-xs);
}

.more-link:hover {
	color: var(--color-secondary-hover);
}

.more-link:hover .more-link__arrow {
	border-color: var(--color-secondary);
	background: var(--color-secondary);
	color: var(--color-on-secondary);
	translate: 2px 0;
}

.more-link:focus-visible {
	outline: none;
	border-radius: var(--radius-sm);
	box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Phones: one padding rule for every box – 16 px inside a card or panel,
   pictures 8 px from the edge (like the product cards on the home page).
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.card:not(.card--mockup) {
		padding: var(--space-4);
	}
}

/* --------------------------------------------------------------------------
   Floating labels – every text field and dropdown of the site.
   The label sits inside the field and glides up into a gap in the border
   when the field is focused or filled; the active field lifts slightly.
   Layout is pure CSS (no jump while the page loads); assets/js/fields.js
   only adds the border with the gap (.fl-notch) and switches the motion
   on (html.fl-anim). Opt out with .field--static.
   Example placeholders are hidden: the label is the only text.
   -------------------------------------------------------------------------- */
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) {
	--fl-x: calc(var(--space-4) + var(--control-border));                    /* text inset of the field */
	--fl-up: calc(var(--control-border) / 2 - var(--fs-xs) * 1.25 / 2);         /* label / notch centred on the top border */
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) > label {
	position: relative;
	z-index: 2;
	grid-area: 1 / 1;
	align-self: start;
	justify-self: start;
	max-width: calc(100% - 2 * var(--fl-x));
	margin: 0 0 0 var(--fl-x);
	padding: 0;
	overflow: hidden;
	color: var(--color-text-muted);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
	transform: translateY(calc((var(--control-h) - var(--fs-base) * 1.25) / 2));
	transform-origin: 0 0;
	pointer-events: none;
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) > label + * {
	grid-area: 1 / 1;
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) ::placeholder {
	color: transparent;
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):is(:focus-within, :has(> label + :is(input, textarea):not(:placeholder-shown), > label + * :is(input:not([type="hidden"]), textarea):not(:placeholder-shown), select)) > label {
	font-weight: var(--fw-semibold);
	transform: translateY(var(--fl-up)) scale(0.8125);
}

/* Help text under the field lines up with the text inside it. */
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) > .field__help {
	padding-left: var(--fl-x);
}

/* The border with the gap (added by fields.js) – the field's own border hides. */
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) > .fl-notch {
	position: relative;
	z-index: 1;
	grid-area: 1 / 1;
	align-self: stretch;
	min-width: 0;
	margin: var(--fl-up) 0 0;
	padding: 0 calc(var(--space-4) - var(--space-1));
	border: var(--control-border) solid var(--color-border-strong);
	border-radius: var(--radius-control);
	pointer-events: none;
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) > .fl-notch legend {
	float: none;
	width: auto;
	max-width: 0.01px;
	height: calc(var(--fs-xs) * 1.25);
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: 1.25;
	white-space: nowrap;
	visibility: hidden;
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) > .fl-notch legend > span {
	display: inline-block;
	padding: 0 var(--space-1);
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):is(:focus-within, :has(> label + :is(input, textarea):not(:placeholder-shown), > label + * :is(input:not([type="hidden"]), textarea):not(:placeholder-shown), select)) > .fl-notch legend {
	max-width: 100%;
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):has(> .fl-notch) :is(.input, .input-text, .pr-select__button),
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):has(> .fl-notch) :is(.input, .input-text, .pr-select__button):hover,
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):has(> .fl-notch) :is(.input, .input-text, .pr-select__button):focus,
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):has(> .fl-notch) :is(.input, .input-text, .pr-select__button):focus-visible {
	border-color: transparent;
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):hover > .fl-notch {
	border-color: var(--c-gray-400);
}

/* Active field: teal border and label, lifted with a light shadow. */
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):focus-within {
	z-index: var(--z-raised); /* its open dropdown list stays above the next field */
	transform: translateY(var(--field-lift));
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):focus-within > .fl-notch,
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):focus-within :is(.input, .input-text, .pr-select__button) {
	border-color: var(--color-secondary);
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):focus-within > label {
	color: var(--color-secondary);
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) :is(.input, .input-text, .pr-select__button):focus,
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) :is(.input, .input-text, .pr-select__button):focus-visible,
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) .pr-select.is-open .pr-select__button {
	box-shadow: none;
	outline: none;
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):focus-within :is(.input, .input-text, .pr-select__button) {
	box-shadow: var(--shadow-field);
}

/* Error */
/* The red border: on the notch when it is there (the field's own border would cross the label). */
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):is(.woocommerce-invalid, .is-invalid, :has([aria-invalid="true"])) > .fl-notch,
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):is(.woocommerce-invalid, .is-invalid, :has([aria-invalid="true"])):not(:has(> .fl-notch)) :is(.input, .input-text, .pr-select__button) {
	border-color: var(--color-error);
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):is(.woocommerce-invalid, .is-invalid, :has([aria-invalid="true"])) > label,
:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):is(.woocommerce-invalid, .is-invalid, :has([aria-invalid="true"])):focus-within > label {
	color: var(--color-error);
}

:is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):is(.woocommerce-invalid, .is-invalid, :has([aria-invalid="true"])):focus-within :is(.input, .input-text, .pr-select__button) {
	box-shadow: var(--shadow-field-error);
}

/* Motion – only once fields.js has set the first state (no animation on page load). */
.fl-anim :is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) {
	transition: transform var(--dur-field) var(--ease-in-out);
}

.fl-anim :is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) > label {
	transition:
		transform var(--dur-field) var(--ease-in-out),
		color var(--dur-field) var(--ease-in-out),
		font-weight var(--dur-field) var(--ease-in-out);
}

.fl-anim :is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) > .fl-notch {
	transition: border-color var(--dur-field) var(--ease-in-out);
}

.fl-anim :is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) > .fl-notch legend {
	transition: max-width var(--dur-notch-close) var(--ease-in-out);
}

.fl-anim :is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))):is(:focus-within, :has(> label + :is(input, textarea):not(:placeholder-shown), > label + * :is(input:not([type="hidden"]), textarea):not(:placeholder-shown), select)) > .fl-notch legend {
	transition: max-width var(--dur-notch-open) var(--ease-out) var(--delay-notch); /* the gap opens once the label is on its way */
}

.fl-anim :is(:is(.field, .woocommerce form .form-row):not(.field--static):has(> label + :is(input.input:not([type="file"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]), textarea.input, input.input-text, textarea.input-text, .select, .pr-select, .wz-custom__input, .password-input)), .woocommerce form .form-row:not(.field--static):has(> label + .woocommerce-input-wrapper > :is(input.input-text, textarea, select, .pr-select, .password-input))) :is(.input, .input-text, .pr-select__button) {
	transition:
		border-color var(--dur-field) var(--ease-in-out),
		box-shadow var(--dur-field) var(--ease-in-out);
}

/* ==========================================================================
   1.3.40: one frame per area – cards and question lists without inner boxes
   ========================================================================== */
/* Product and service cards: the picture runs to the card edge – no tinted box inside the card */
.card--mockup {
	padding: 0;
	overflow: hidden;
}

.card--mockup .card__stage {
	border-radius: 0;
}

.card--mockup .card__body {
	padding: var(--box-pad);
}

/* Every frame that remains: 20 px inside */
.card:not(.card--mockup) {
	padding: var(--box-pad);
}

/* Questions (accordion): one list with hairlines, not a stack of cards */
.accordion {
	gap: 0;
	border-top: 1px solid var(--color-border);
}

.accordion__item,
.accordion__item:hover,
.accordion__item[open] {
	border: 0;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.accordion__summary {
	padding-inline: 0;
	border-radius: 0;
}

.accordion__content {
	padding-inline: 0;
}