/*
 * emo2026, interactive tool surfaces.
 *
 * Loaded only on the four tool pages:
 *   - /anforderungsassistent/                  (wizard)
 *   - /konfigurator/                           (wizard)
 *   - /netzwerkisolator-vergleich/             (compare, selection)
 *   - /netzwerkisolator-vergleich-ergebnis/    (compare, results)
 *
 * Two visual systems live here, side by side:
 *   1. .wizard__* , Apple multi-step wizard (apple.com/de/shop/buy-mac/…).
 *      Hero + progress bar + step body (tile grid) + back/next nav row.
 *   2. .compare__*, Comparison tool. Checkbox grid for selection,
 *      horizontal-scroll table for results.
 *
 * Tokens come from tokens.css. Page-local custom properties at the top
 * capture geometry that's truly tool-only, none belong in the global
 * vocabulary.
 *
 * Plain CSS, no preprocessor, no nesting. Targets stable Firefox
 * (the user's debug browser), Chromium, Safari.
 *
 * Mobile breakpoint: 833px (matches the rest of the theme, header nav,
 * product-line grid). Below this, tile grids collapse to 1 column and
 * type drops a step.
 */

:root {
	/* ============================================================
	 * Layout, tool-local
	 * ============================================================ */
	--tools-max-width:        var(--layout-content-max-width);
	--tools-side-padding:     var(--layout-gutter);
	--tools-mobile-breakpoint: 833px; /* Same cutover as nav. */

	/* Vertical rhythm. Tighter than product-line because the wizard
	 * has more sections stacked above the fold. */
	--tools-section-pad-y:        var(--space-10);  /* 80px desktop */
	--tools-section-pad-y-mobile: var(--space-8);   /* 48px mobile  */

	/* ---- Wizard hero ----
	 * Soft slate-to-white gradient, same family as the
	 * Netzwerkisolatoren product-line hero so the brand reads as one. */
	--wizard-hero-bg: linear-gradient(180deg, var(--grey-25) 0%, var(--grey-50) 60%, var(--color-bg-base) 100%);
	/* A wizard step is a single interaction: it should fit the viewport at any
	 * resolution rather than making you scroll to reach the choices. All the
	 * vertical rhythm below is therefore fluid (vh-aware clamps) instead of the
	 * fixed desktop spacing the editorial pages use, at 1280x720 the step used
	 * to run 1845px tall, i.e. 1125px of overflow. */
	--wizard-hero-pad-y:        clamp(0.75rem, 2.5vh, 2rem);  /* 12-32px */
	--wizard-hero-pad-y-mobile: clamp(0.75rem, 2vh, 1.5rem);
	--wizard-body-pad-y:        clamp(1rem, 3vh, 2.25rem);

	/* ---- Progress bar ---- */
	--wizard-progress-pad-y:    clamp(0.6rem, 1.6vh, 1rem);
	--wizard-progress-marker-size: 28px;
	--wizard-progress-color-done:     var(--color-link);
	--wizard-progress-color-active:   var(--color-text-primary);
	--wizard-progress-color-upcoming: var(--color-text-muted);
	--wizard-progress-rule-color:     var(--color-border-hairline);

	/* ---- Tile grid ---- */
	--wizard-tile-radius: var(--radius-lg);
	--wizard-tile-pad:    clamp(0.85rem, 1.3vw, 1.15rem);     /* 14-18px */
	--wizard-tile-bg:     var(--color-bg-elevated);
	--wizard-tile-border: 1px solid transparent;
	--wizard-tile-shadow:       0 1px 2px rgba(0, 0, 0, 0.04);
	--wizard-tile-shadow-hover: 0 18px 36px rgba(0, 0, 0, 0.10);
	/* Sized to the text it holds, not to a fixed box: two lines of description
	 * need ~90px, and the card grows with the viewport rather than starting at
	 * 180-240px of mostly-empty surface. */
	--wizard-tile-min-h:  clamp(4.5rem, 9vh, 6rem);           /* 72-96px */

	/* ---- Nav row pill ---- */
	--wizard-nav-pad-y: clamp(1rem, 2.5vh, 2rem);

	/* ---- Compare ---- */
	--compare-card-radius: var(--radius-card);
	--compare-card-bg:     var(--color-bg-elevated);
	--compare-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	--compare-card-shadow-hover: 0 18px 36px rgba(0, 0, 0, 0.10);
	--compare-card-shadow-checked: 0 18px 36px color-mix(in srgb, var(--color-link) 18%, transparent);
	--compare-card-media-aspect: 4 / 3;

	/* ---- Compare table ---- */
	--compare-table-row-pad-y: var(--space-4);
	--compare-table-col-min-w: 190px;   /* four products plus the label column fit the 1200px box (QM-23) */

	/* ---- Motion ---- */
	--tools-easing:   var(--motion-ease-standard);
	--tools-duration: var(--motion-duration-base);
}

/* ============================================================
 * Shared host element styling.
 * Both .wizard and .compare sit on the white base background.
 * ============================================================ */
.wizard,
.compare {
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	background: var(--color-bg-base);
}

/* ============================================================
 * 1. WIZARD, HERO
 * Same shape as product-line hero but smaller padding because
 * the progress bar follows immediately below.
 * ============================================================ */
.wizard__hero {
	background: var(--wizard-hero-bg);
	padding-block: var(--wizard-hero-pad-y);
	padding-inline: var(--tools-side-padding);
	text-align: center;
}

.wizard__hero-inner {
	max-width: 820px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.35rem, 1.2vh, 0.85rem);
}

.wizard__eyebrow {
	margin: 0;
	font-size: var(--font-size-18);
	font-weight: 500;
	/* Brand green, sitewide (owner 2026-08-31): hero eyebrows carry emo
	 * green everywhere. */
	color: var(--color-accent);
	letter-spacing: var(--letter-spacing-base);
}

.wizard__title {
	margin: 0;
	font-family: var(--font-display);
	/* Fluid, and far smaller than the editorial 80px display size: the wizard
	   title is a label for a tool, not a magazine headline, it must not eat
	   the space the choices need. */
	font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem);           /* 28-48px */
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	font-weight: 600;
	color: var(--color-text-primary);
	/* fit-titles.js scales long titles down, no mid-word breaks. */
	hyphens: manual;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* Past the first step the hero is only a label, the progress bar already says
 * where you are, so a full display headline there just pushes the choices below
 * the fold. Shrink it so every step fits one screen. */
.wizard:not(.wizard--step-1) .wizard__hero {
	padding-block: clamp(0.6rem, 1.8vh, 1.1rem);
}

.wizard:not(.wizard--step-1) .wizard__eyebrow {
	display: none;
}

.wizard:not(.wizard--step-1) .wizard__title {
	font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.6rem);       /* 18-26px */
	color: var(--color-text-secondary);
	font-weight: 500;
}

.wizard:not(.wizard--step-1) .wizard__tagline {
	display: none;
}

.wizard__tagline {
	margin: 0;
	max-width: 720px;
	font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.25rem);      /* 15-20px */
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	font-weight: 400;
	color: var(--color-text-secondary);
}

/* ============================================================
 * 2. WIZARD, PROGRESS BAR
 * Numbered pills connected by a hairline rule. State classes
 * (--done / --active / --upcoming) are static HTML.
 *
 * Implementation note: the connecting rule is drawn as a
 * pseudo-element on each <li> (::before, sitting before the
 * marker). The first item suppresses its rule so the line
 * doesn't run off the left edge.
 * ============================================================ */
.wizard__progress {
	background: var(--color-bg-base);
	border-bottom: 1px solid var(--color-border-hairline);
	padding-block: var(--wizard-progress-pad-y);
	padding-inline: var(--tools-side-padding);
}

.wizard__progress-list {
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
}

.wizard__progress-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	position: relative;
	min-width: 0;
}

/* Connecting rule between items. Sits behind markers. */
.wizard__progress-item::before {
	content: "";
	position: absolute;
	top: calc(var(--wizard-progress-marker-size) / 2);
	left: calc(-50% + (var(--wizard-progress-marker-size) / 2));
	right: calc(50% + (var(--wizard-progress-marker-size) / 2));
	height: 1px;
	background: var(--wizard-progress-rule-color);
}
.wizard__progress-item:first-child::before {
	display: none;
}
/* Done items get a darker rule leading into them. */
.wizard__progress-item--done::before,
.wizard__progress-item--active::before {
	background: var(--wizard-progress-color-done);
}

.wizard__progress-marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wizard-progress-marker-size);
	height: var(--wizard-progress-marker-size);
	border-radius: 50%;   /* circle: numbered step marker */
	font-size: var(--font-size-14);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	background: var(--color-bg-base);
	border: 1px solid var(--wizard-progress-color-upcoming);
	color: var(--wizard-progress-color-upcoming);
	position: relative;        /* stack above the ::before rule */
	z-index: 1;
	transition: background-color var(--tools-duration) var(--tools-easing),
	            border-color var(--tools-duration) var(--tools-easing),
	            color var(--tools-duration) var(--tools-easing);
}

.wizard__progress-item--done .wizard__progress-marker {
	background: var(--wizard-progress-color-done);
	border-color: var(--wizard-progress-color-done);
	color: var(--color-text-inverse);
}

.wizard__progress-item--active .wizard__progress-marker {
	background: var(--wizard-progress-color-active);
	border-color: var(--wizard-progress-color-active);
	color: var(--color-text-inverse);
}

.wizard__progress-label {
	font-size: var(--font-size-14);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-base);
	color: var(--wizard-progress-color-upcoming);
	text-align: center;
	line-height: var(--line-height-tight);
}

.wizard__progress-item--done .wizard__progress-label,
.wizard__progress-item--active .wizard__progress-label {
	color: var(--color-text-primary);
}
.wizard__progress-item--active .wizard__progress-label {
	font-weight: 600;
}

/* ============================================================
 * 3. WIZARD, STEP BODY
 * Step counter + headline + tile grid.
 * ============================================================ */
.wizard__body {
	padding-block: var(--wizard-body-pad-y);
	padding-inline: var(--tools-side-padding);
}

.wizard__body-inner {
	max-width: var(--tools-max-width);
	margin-inline: auto;
}

.wizard__step-counter {
	margin: 0 0 var(--space-3);
	font-size: var(--font-size-12);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
	text-align: center;
}

.wizard__step-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);           /* 22-32px */
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	font-weight: 600;
	color: var(--color-text-primary);
	text-align: center;
}

.wizard__step-subhead {
	margin: 0 auto clamp(1rem, 2.5vh, 1.75rem);
	max-width: 620px;
	font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);     /* 15-18px */
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
	text-align: center;
}

/* ---- Tile grid ----
 * Two flavors: 2 cols (Anforderungsassistent) and 3 cols (Konfigurator).
 * Both collapse to 1 col under the mobile breakpoint. */
.wizard__tiles {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: clamp(0.75rem, 1.6vh, 1.25rem);
}
.wizard__tiles--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 820px;
	margin-inline: auto;
}
.wizard__tiles--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wizard__tile-item {
	display: flex;
}

.wizard__tile {
	flex: 1;
	display: flex;
	/* A ROW, not a column. Stacking icon-over-text-over-chevron made every tile
	   ~220px tall for two lines of copy, so a 4-choice step could not fit a
	   720px screen. Side by side, the same content needs ~110px. */
	flex-direction: row;
	align-items: center;
	gap: var(--space-4);
	padding: var(--wizard-tile-pad);
	min-height: var(--wizard-tile-min-h);
	background: var(--wizard-tile-bg);
	border: var(--wizard-tile-border);
	border-radius: var(--wizard-tile-radius);
	box-shadow: var(--wizard-tile-shadow);
	color: var(--color-text-primary);
	text-align: left;
	font-family: inherit;
	cursor: pointer;
	transition: transform var(--tools-duration) var(--tools-easing),
	            box-shadow var(--tools-duration) var(--tools-easing),
	            border-color var(--tools-duration) var(--tools-easing);
}

.wizard__tile:hover,
.wizard__tile:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--wizard-tile-shadow-hover);
	border-color: var(--color-border-hairline);
}

.wizard__tile:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 3px;
}

.wizard__tile-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: clamp(2.25rem, 4.5vh, 3rem);                      /* 36-48px */
	height: clamp(2.25rem, 4.5vh, 3rem);
	border-radius: var(--radius-md);
	background: var(--color-bg-base);
	color: var(--color-link);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.wizard__tile-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1 1 auto;
	min-width: 0;
}

.wizard__tile-label {
	font-size: var(--font-size-21);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-primary);
}

.wizard__tile-desc {
	font-size: clamp(0.8rem, 0.72rem + 0.3vw, 0.95rem);      /* 13-15px */
	/* Body-copy floor is 1.4+ (spec section 6); tile descriptions are
	   prose, not data rows, so the dense exception does not apply. */
	line-height: 1.45;
	color: var(--color-text-secondary);
}

/* Gradient-backed tiles (used by the Konfigurator's product-line picks).
 * Reuses the product-line gradient palette for visual consistency.
 * Justify text to the bottom so the gradient reads as a poster header
 * with the title sitting at the foot of the card. */
.wizard__tile--gradient {
	color: var(--color-text-inverse);
	background: var(--emo-grad-a);
	border-color: transparent;
	/* Was: justify-content: flex-end + min-height 240px, which produced a tall
	   card with the text pinned to the bottom and a big empty slab of gradient
	   above it. Gradient tiles carry no icon, so just left-align them in the
	   row and let them share the same fluid height as every other tile. */
	justify-content: flex-start;
}
.wizard__tile--grad-a { background: var(--emo-grad-a);  }
.wizard__tile--grad-b { background: var(--emo-grad-b);  }
.wizard__tile--grad-c { background: var(--emo-grad-c);  }
.wizard__tile--grad-d { background: var(--emo-grad-d);  }
.wizard__tile--grad-e { background: var(--emo-grad-e);  }
.wizard__tile--grad-f { background: var(--emo-grad-f);  }

.wizard__tile--gradient .wizard__tile-label,
.wizard__tile--gradient .wizard__tile-desc {
	color: var(--color-text-inverse);
}
.wizard__tile--gradient .wizard__tile-desc {
	color: var(--color-text-inverse-secondary);
}
.wizard__tile--gradient .wizard__tile-icon {
	background: rgba(255, 255, 255, 0.18);
	color: var(--color-text-inverse);
	box-shadow: none;
}

/* ============================================================
 * 4. WIZARD, NAV ROW
 * Back text-link on the left, primary "Weiter" pill on the right.
 * Disabled state is the default in this scaffold.
 * ============================================================ */
.wizard__nav {
	margin-top: var(--wizard-nav-pad-y);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
}

.wizard__nav-spacer {
	display: inline-block;
}

.wizard__nav-back {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	padding: var(--space-3) 0;
	background: none;
	border: 0;
	color: var(--color-link);
	font-family: inherit;
	font-size: var(--font-size-16);
	font-weight: 400;
	cursor: pointer;
	text-decoration: none;
	/* Opacity is in the list so the press below can ease back on release. */
	transition: color var(--tools-duration) var(--tools-easing),
	            opacity var(--tools-duration) var(--tools-easing);
}
.wizard__nav-back:hover:not([disabled]),
.wizard__nav-back:focus-visible:not([disabled]) {
	color: var(--color-link-hover);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.wizard__nav-back[disabled] {
	color: var(--color-text-muted);
	cursor: not-allowed;
}

.wizard__nav-next {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-7);
	background: var(--color-cta);
	color: var(--color-cta-ink);
	border: 0;
	border-radius: var(--radius-control);
	font-family: inherit;
	font-size: var(--font-size-18);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-base);
	cursor: pointer;
	transition: background-color var(--tools-duration) var(--tools-easing),
	            transform var(--tools-duration) var(--tools-easing),
	            opacity var(--tools-duration) var(--tools-easing);
}
.wizard__nav-next:hover:not([disabled]),
.wizard__nav-next:focus-visible:not([disabled]) {
	background: var(--color-cta-hover);
}
.wizard__nav-next:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 3px;
}
.wizard__nav-next[disabled] {
	background: var(--grey-200);
	color: var(--color-text-muted);
	cursor: not-allowed;
	opacity: 0.85;
}

.wizard__nav-next-chevron {
	display: inline-block;
	transition: transform var(--tools-duration) var(--tools-easing);
}
.wizard__nav-next:hover:not([disabled]) .wizard__nav-next-chevron {
	transform: translateX(3px);
}

/* ============================================================
 * 5. WIZARD, FOOTNOTE
 * ============================================================ */
.wizard__footnote {
	margin: 0 auto;
	padding: 0 var(--tools-side-padding) clamp(1rem, 3vh, 2.5rem);
	max-width: 720px;
	text-align: center;
	font-size: var(--font-size-12);
	color: var(--color-text-muted);
}

/* ============================================================
 * 6. COMPARE, HERO
 * Same shape as the wizard hero so the two tool families read
 * as siblings.
 * ============================================================ */
.compare__hero {
	background: var(--wizard-hero-bg);
	padding-block: var(--wizard-hero-pad-y);
	padding-inline: var(--tools-side-padding);
	text-align: center;
}

.compare__hero-inner {
	max-width: 820px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
}

.compare__eyebrow {
	margin: 0;
	font-size: var(--font-size-18);
	font-weight: 500;
	/* Brand green, sitewide (owner 2026-08-31): hero eyebrows carry emo
	 * green everywhere. */
	color: var(--color-accent);
	letter-spacing: var(--letter-spacing-base);
}

.compare__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-56);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	font-weight: 600;
	color: var(--color-text-primary);
	/* fit-titles.js budgets these to one line, no mid-word breaks. */
	hyphens: manual;
	overflow-wrap: break-word;
}

.compare__tagline {
	margin: 0;
	max-width: 720px;
	font-size: var(--font-size-28);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	font-weight: 400;
	color: var(--color-text-secondary);
}

/* "Auswahl ändern" back link on the result page. */
.compare__back-link {
	margin: var(--space-3) 0 0;
	font-size: var(--font-size-16);
}
.compare__back-link a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	color: var(--color-link);
	text-decoration: none;
	transition: color var(--tools-duration) var(--tools-easing);
}
.compare__back-link a:hover,
.compare__back-link a:focus-visible {
	color: var(--color-link-hover);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ============================================================
 * 7. COMPARE, SELECTION GRID
 * Each card is a <label> wrapping a checkbox. CSS-only state:
 *   - default → light card with grey border, "Auswählen" label
 *   - hover   → lift + shadow
 *   - checked → blue border + accent shadow + tick + "Ausgewählt" label
 *
 * The native <input type="checkbox"> is visually hidden but kept
 * keyboard-focusable; focus shifts a ring onto the card itself.
 * ============================================================ */
.compare__form {
	background: var(--color-bg-base);
}

.compare__select {
	padding-block: var(--tools-section-pad-y);
	padding-inline: var(--tools-side-padding);
}

.compare__select-inner {
	max-width: var(--tools-max-width);
	margin-inline: auto;
}

.compare__section-title {
	margin: 0 0 var(--space-7);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	font-weight: 600;
	color: var(--color-text-primary);
	text-align: center;
}

.compare__grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--space-6);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compare__grid-item {
	display: flex;
}

.compare__card {
	flex: 1;
	position: relative;          /* contains the visually-hidden checkbox */
	display: flex;
	flex-direction: column;
	background: var(--compare-card-bg);
	border-radius: var(--compare-card-radius);
	border: 2px solid transparent;
	overflow: hidden;
	box-shadow: var(--compare-card-shadow);
	cursor: pointer;
	transition: transform var(--tools-duration) var(--tools-easing),
	            box-shadow var(--tools-duration) var(--tools-easing),
	            border-color var(--tools-duration) var(--tools-easing);
}
.compare__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--compare-card-shadow-hover);
}

/* Hide the native checkbox visually but keep it focusable so keyboard
 * users still get a usable control. The card surfaces its focus ring
 * via :focus-within below. */
.compare__checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Keyboard focus only: a mouse click leaves the hidden checkbox focused,
 * and :focus-within then drew a second ring around the already selected
 * card (QM 2026-10-27, item 168). */
.compare__card:has(.compare__checkbox:focus-visible) {
	outline: 2px solid var(--color-link);
	outline-offset: 3px;
}

.compare__card-media {
	aspect-ratio: var(--compare-card-media-aspect);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-inverse);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-base);
	text-align: center;
	padding: var(--space-5);
}
.compare__card-media--a { background: var(--emo-grad-a);  }
.compare__card-media--b { background: var(--emo-grad-b);  }
.compare__card-media--c { background: var(--emo-grad-c);  }
.compare__card-media--d { background: var(--emo-grad-d);  }
.compare__card-media--e { background: var(--emo-grad-e);  }
.compare__card-media--f { background: var(--emo-grad-f);  }

.compare__card-mark {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

/* Both material fallbacks (spec section 5). Dark fills, not white ones,
   so the white mark stays readable on every gradient variant. */
@media (prefers-reduced-transparency: reduce) {
	.compare__card-mark {
		background: rgba(0, 0, 0, 0.45);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-contrast: more) {
	.compare__card-mark {
		background: rgba(0, 0, 0, 0.7);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 1px solid var(--color-text-inverse);
	}
}

.compare__card-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-6);
}

.compare__card-name {
	font-size: var(--font-size-21);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: var(--color-text-primary);
}

.compare__card-spec {
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

/* Selection state line. By default shows "Auswählen" in muted grey;
 * when the input is checked, swaps to a blue tick + "Ausgewählt". */
.compare__card-state {
	margin-top: var(--space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-14);
	font-weight: 500;
	color: var(--color-text-muted);
}

.compare__card-state-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;   /* circle: the checked tick disc */
	border: 1px solid var(--color-border-hairline);
	background: var(--color-bg-base);
	/* transparent, NOT inverse white: unchecked, the tick has to be
	 * invisible on its own ground. Painting it white only worked while
	 * --color-bg-base and --color-text-inverse happened to be the same
	 * value; the ink is set where it means something, in the :checked
	 * rule below. */
	color: transparent;
	font-size: 0.6875rem;                                    /* 11px */
	line-height: 1;
}

.compare__card-state-label-on  { display: none; }
.compare__card-state-label-off { display: inline; }

/* :checked state, sibling combinator from the input to its
 * downstream .compare__card-state inside the same <label>. One ring
 * only: the card border and the tick say "selected", the photo box keeps
 * no inner ring of its own. */
.compare__card:has(.compare__checkbox:checked) {
	border-color: var(--color-link);
	box-shadow: var(--compare-card-shadow-checked);
}
.compare__checkbox:checked ~ .compare__card-body .compare__card-state {
	color: var(--color-link);
}
.compare__checkbox:checked ~ .compare__card-body .compare__card-state-tick {
	background: var(--color-link);
	border-color: var(--color-link);
	/* Inverse ink lands here, on EMO CORE: 5.58:1. */
	color: var(--color-text-inverse);
}
.compare__checkbox:checked ~ .compare__card-body .compare__card-state-label-on  { display: inline; }
.compare__checkbox:checked ~ .compare__card-body .compare__card-state-label-off { display: none; }

/* ============================================================
 * 8. COMPARE, SUBMIT ROW
 * Centered "Vergleich starten" pill, disabled-state styling.
 * ============================================================ */
.compare__submit-row {
	margin-top: var(--space-9);
	display: flex;
	justify-content: center;
}

.compare__submit {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-8);
	background: var(--color-cta);
	color: var(--color-cta-ink);
	border: 0;
	border-radius: var(--radius-control);
	font-family: inherit;
	font-size: var(--font-size-18);
	font-weight: 500;
	letter-spacing: var(--letter-spacing-base);
	cursor: pointer;
	transition: background-color var(--tools-duration) var(--tools-easing),
	            opacity var(--tools-duration) var(--tools-easing);
}
.compare__submit:hover:not([disabled]),
.compare__submit:focus-visible:not([disabled]) {
	background: var(--color-cta-hover);
}
.compare__submit:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 3px;
}
.compare__submit[disabled] {
	background: var(--grey-200);
	color: var(--color-text-muted);
	cursor: not-allowed;
	opacity: 0.85;
}

.compare__submit-chevron {
	display: inline-block;
	transition: transform var(--tools-duration) var(--tools-easing);
}
.compare__submit:hover:not([disabled]) .compare__submit-chevron {
	transform: translateX(3px);
}

/* ============================================================
 * 9. COMPARE, HINT BAND
 * Small muted band below the submit row.
 * ============================================================ */
.compare__hint {
	padding: 0 var(--tools-side-padding) var(--space-10);
}

.compare__hint-inner {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
}

.compare__hint-text {
	margin: 0;
	font-size: var(--font-size-14);
	color: var(--color-text-secondary);
}

/* ============================================================
 * 10. COMPARE, RESULTS TABLE
 * Horizontal-scroll wrapper around a real <table>. The first
 * column is the spec label (sticky-left on wide-enough viewports);
 * each remaining column is a product. Below 833px the table just
 * scrolls horizontally, no layout collapse, the comparison only
 * makes sense as a true side-by-side.
 * ============================================================ */
.compare__result {
	padding-block: var(--tools-section-pad-y);
	padding-inline: var(--tools-side-padding);
}

.compare__result-scroll {
	max-width: var(--tools-max-width);
	margin-inline: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-surface);
	background: var(--color-bg-base);
}

.compare__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-16);
	color: var(--color-text-primary);
}

.compare__table-caption {
	caption-side: top;
	/* Centred over the compared models, well clear of the box's rounded
	   corners; left-aligned it still sat against the 62px corner (QM-23,
	   owner 2026-10-27). */
	text-align: center;
	padding: var(--space-5) var(--space-5) var(--space-4);
	font-size: var(--font-size-14);
	font-weight: 500;
	color: var(--color-text-muted);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
}

.compare__th {
	background: var(--color-bg-elevated);
	border-bottom: 1px solid var(--color-border-hairline);
	padding: var(--space-5);
	text-align: left;
	font-weight: 600;
	vertical-align: bottom;
	min-width: var(--compare-table-col-min-w);
}

.compare__th--label {
	background: var(--color-bg-base);
	min-width: 180px;
}

.compare__th--product {
	text-align: center;
}

.compare__th-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--space-3);
	border-radius: var(--radius-panel);
	color: var(--color-text-inverse);
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	padding: var(--space-4);
}
.compare__th-media--a { background: var(--emo-grad-a);  }
.compare__th-media--b { background: var(--emo-grad-b);  }
.compare__th-media--c { background: var(--emo-grad-c);  }
.compare__th-media--d { background: var(--emo-grad-d);  }
.compare__th-media--e { background: var(--emo-grad-e);  }
.compare__th-media--f { background: var(--emo-grad-f);  }

.compare__th-mark {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
}

.compare__th-name {
	display: block;
	font-size: var(--font-size-18);
	font-weight: 600;
	color: var(--color-text-primary);
	letter-spacing: var(--letter-spacing-base);
}

.compare__row-label {
	background: var(--color-bg-base);
	padding: var(--compare-table-row-pad-y) var(--space-5);
	text-align: left;
	font-weight: 500;
	color: var(--color-text-secondary);
	font-size: var(--font-size-14);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	border-bottom: 1px solid var(--color-border-hairline);
	vertical-align: middle;
}

.compare__cell {
	padding: var(--compare-table-row-pad-y) var(--space-5);
	text-align: center;
	border-bottom: 1px solid var(--color-border-hairline);
	color: var(--color-text-primary);
	font-size: var(--font-size-16);
	vertical-align: middle;
}

.compare__table tbody tr:last-child .compare__row-label,
.compare__table tbody tr:last-child .compare__cell {
	border-bottom: 0;
}

.compare__result-footnote {
	max-width: var(--tools-max-width);
	margin: var(--space-5) auto 0;
	font-size: var(--font-size-12);
	color: var(--color-text-muted);
	text-align: center;
}

/* (.screen-reader-text utility is provided by style.css; not redefined here.) */

/* ============================================================
 * 11. RESPONSIVE, < 833px
 * Wizard tile grids collapse to 1 column, deliberately: a step's
 * tiles are compact ROWS (icon left, text right), so one per line
 * fills the width with no wasted margin, and the binding constraint
 * on a step is vertical, fitting four or five choices on screen.
 * The CARD grids (.compare__grid, .wizard__results) do NOT collapse
 * here, they step at 640px, see section 11b and section 13.
 * Type drops a step. Progress labels can wrap. The compare results
 * table keeps its desktop layout but scrolls inside its wrapper.
 * ============================================================ */
@media (max-width: 832px) {

	/* Hero shrink. */
	.wizard__hero,
	.compare__hero {
		padding-block: var(--wizard-hero-pad-y-mobile);
	}

	/* .wizard__title / .wizard__tagline are fluid clamps, overriding them here
	   with a fixed size is what forced a 56px headline onto a phone. */
	.compare__title {
		font-size: var(--font-size-40);
	}

	.compare__tagline {
		font-size: var(--font-size-21);
	}

	/* Section padding shrink. (.wizard__body keeps its fluid pad.) */
	.compare__select,
	.compare__result {
		padding-block: var(--tools-section-pad-y-mobile);
	}

	.wizard__step-subhead {
		font-size: var(--font-size-16);
		margin-bottom: var(--space-5);
	}

	/* One column, but as compact ROWS (icon left, text right), not tall cards.
	 * Four or five choices then still fit a phone screen without scrolling,
	 * which is the entire point of a step. */
	.wizard__tiles--cols-2,
	.wizard__tiles--cols-3 {
		grid-template-columns: 1fr;
	}

	/* Phone budget is tight: a 5-choice step has to fit ~795px of usable height
	 * next to the header, progress bar, title and nav. Every value below is
	 * pared to what the content actually needs. */
	.wizard__tiles {
		gap: var(--space-2);
	}

	.wizard__tile {
		flex-direction: row;
		align-items: center;
		gap: var(--space-3);
		min-height: 0;
		padding: var(--space-3) var(--space-4);
	}

	.wizard__tile-icon {
		width: 36px;
		height: 36px;
	}

	.wizard__tile-icon svg {
		width: 20px;
		height: 20px;
	}

	.wizard__tile-text {
		flex: 1 1 auto;
		min-width: 0;
	}

	.wizard__tile-label {
		font-size: var(--font-size-16);
	}

	.wizard__tile-desc {
		font-size: 0.78rem;
	}

	/* Gradient tiles carry no icon: left-align them in the row. */
	.wizard__tile--gradient {
		justify-content: flex-start;
	}

	.wizard__progress-marker {
		width: 24px;
		height: 24px;
	}

	.wizard__footnote {
		padding-bottom: var(--space-4);
	}

	/* Progress labels can wrap and shrink. */
	.wizard__progress-list {
		gap: var(--space-2);
	}
	.wizard__progress-label {
		font-size: var(--font-size-12);
	}

	/* Nav row keeps horizontal layout (small enough already), but
	 * the next button can grow to feel like a primary action. */
	.wizard__nav-next {
		padding: var(--space-3) var(--space-6);
	}

	/* Compare grid keeps two columns here, see the 640px block below. */

	/* Compare section title. */
	.compare__section-title {
		font-size: var(--font-size-21);
	}
}

/* ============================================================
 * 11b. Tablet + phone steps for the compare card grid.
 *
 * Eight product cards. The ladder is 3 / 2 / 1 like every other card
 * grid in the theme; the 832px block above deliberately leaves the
 * column count alone so a portrait tablet keeps two cards per row.
 *
 * Both blocks sit AFTER the base rule (.compare__grid, section 8) and
 * after the 832px block, and the 640px block sits after the 1024px
 * one: all three have the same specificity, so source order is what
 * decides which one wins where they overlap.
 * ============================================================ */
@media (max-width: 1024px) {
	.compare__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.compare__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
 * 12. Reduced motion, honor the OS pref.
 * Wizard tile lift + chevron nudges + compare card lift + table
 * shadows are all decorative. Disable transitions and any
 * transform translate/scale that's purely cosmetic. The progress
 * bar marker color transitions are also dropped (state still
 * reads from background/color, just instantly).
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.wizard__tile,
	.wizard__progress-marker,
	.wizard__nav-back,
	.wizard__nav-next,
	.wizard__nav-next-chevron,
	.compare__card,
	.compare__back-link a,
	.compare__submit,
	.compare__submit-chevron {
		transition: none !important;
	}

	.wizard__tile:hover,
	.wizard__tile:focus-visible,
	.compare__card:hover {
		transform: none;
	}

	.wizard__nav-next:hover:not([disabled]) .wizard__nav-next-chevron,
	.compare__submit:hover:not([disabled]) .compare__submit-chevron {
		transform: none;
	}
}

/* ============================================================
 * Server-driven tools: anchor tiles, wizard results, photo cards.
 * Added when the wizard/compare scaffolds became functional.
 * ============================================================ */

/* Choice tiles are now links, neutralize anchor defaults so the
   existing .wizard__tile button styling carries over. */
a.wizard__tile {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.wizard__tile-chevron {
	margin-left: auto;
	align-self: center;
	color: var(--color-text-muted);
	font-size: var(--font-size-21);
	transition: transform var(--motion-duration-base) var(--motion-ease-standard), color var(--motion-duration-base) var(--motion-ease-standard);
}

a.wizard__tile:hover .wizard__tile-chevron,
a.wizard__tile:focus-visible .wizard__tile-chevron {
	transform: translateX(3px);
	color: var(--color-link);
}

a.wizard__nav-back {
	text-decoration: none;
}

/* Wizard result cards, the recommendation grid on the final step.
 * Fixed 3-up, matching .wizard__tiles--cols-3 and .compare__grid on the same
 * page. It used to be repeat(auto-fill, minmax(260px, 1fr)), which had two
 * problems once --layout-content-max-width grew past 1200px: the track count
 * climbed with the container (4 tracks at 1200px, 6 at 1792px), and auto-fill
 * keeps its empty tracks, so a 2-result answer sat in two narrow cards at the
 * left with half the row blank. emo2026_wizard_recommend() returns at most 6
 * items, so 3 across fills two clean rows at the maximum. */
.wizard__results {
	list-style: none;
	margin: var(--space-7) 0 0;
	padding: 0;
	display: grid;
	gap: var(--space-5);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.wizard__results {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phone step, not the page's 832px chrome step: at 768px these result
   cards still want two per row. Declared after the 1100px block above,
   equal specificity means source order picks the winner. */
@media (max-width: 640px) {
	.wizard__results {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wizard__result-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: var(--radius-card);
	background: var(--color-bg-elevated);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform var(--motion-duration-base) var(--motion-ease-standard), box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}

.wizard__result-card:hover,
.wizard__result-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.10);
}

.wizard__result-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--color-bg-base);
	border-bottom: 1px solid var(--color-border-hairline);
}

.wizard__result-img {
	max-width: 70%;
	max-height: 76%;
	object-fit: contain;
}

.wizard__result-mark {
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	color: var(--color-text-muted);
}

.wizard__result-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-5);
}

.wizard__result-name {
	font-weight: 600;
	font-size: var(--font-size-18);
	color: var(--color-text-primary);
}

.wizard__result-meta {
	font-size: var(--font-size-14);
	color: var(--color-text-secondary);
}

.wizard__result-price {
	font-size: var(--font-size-16);
	font-weight: 600;
	color: var(--color-text-primary);
}

.wizard__result-link {
	margin-top: var(--space-2);
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	color: var(--color-link);
	font-size: var(--font-size-16);
	font-weight: 500;
}

.wizard__results-empty {
	margin: var(--space-7) 0 0;
	font-size: var(--font-size-18);
	color: var(--color-text-secondary);
}

.wizard__results-actions {
	margin-top: var(--space-7);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.wizard__results-action {
	display: inline-block;
	padding: 10px 20px;
	border-radius: var(--radius-control);
	border: 1px solid var(--color-border-hairline);
	color: var(--color-text-primary);
	font-size: var(--font-size-16);
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
}

.wizard__results-action:hover,
.wizard__results-action:focus-visible {
	background: var(--color-bg-elevated);
	text-decoration: none;
}

.wizard__results-action:first-child {
	background: var(--color-cta);
	border-color: var(--color-cta);
	color: var(--color-cta-ink);
}

.wizard__results-action:first-child:hover,
.wizard__results-action:first-child:focus-visible {
	background: var(--color-cta-hover);
	border-color: var(--color-cta-hover);
}

/* Compare: real product photos in selection cards + table heads. */
.compare__card-media--photo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-base);
}

.compare__card-img,
.compare__th-img {
	max-width: 72%;
	max-height: 78%;
	object-fit: contain;
}

.compare__th-media--photo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-base);
}

.compare__th-name {
	color: inherit;
	text-decoration: none;
}

a.compare__th-name:hover,
a.compare__th-name:focus-visible {
	color: var(--color-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.compare__cell-cta {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--radius-control);
	background: var(--color-cta);
	color: var(--color-cta-ink);
	font-size: var(--font-size-14);
	font-weight: 600;
	text-decoration: none;
	/* Base transition so the press duration override has a list to act on. */
	transition: background-color var(--motion-duration-base) var(--motion-ease-standard);
}

.compare__cell-cta:hover,
.compare__cell-cta:focus-visible {
	background: var(--color-cta-hover);
	color: var(--color-cta-ink);
	text-decoration: none;
}

/* ============================================================
 * Press feedback (spec section 1): every control answers on
 * pointer-DOWN, under 100ms. The duration override sits INSIDE
 * :active so the press snaps while the release keeps the slower
 * hover ease from the base transition list. Placed after all
 * base/hover rules so :active wins the source-order tie.
 * ============================================================ */
.wizard__tile:active,
.wizard__result-card:active,
.compare__card:active {
	transform: translateY(-1px) scale(0.98);
	transition-duration: var(--motion-duration-press);
}

.wizard__nav-next:active:not([disabled]),
.compare__submit:active:not([disabled]),
.wizard__results-action:first-child:active,
.compare__cell-cta:active {
	background: color-mix(in srgb, var(--color-cta) 88%, #000);
	transition-duration: var(--motion-duration-press);
}

.wizard__results-action:active {
	background: var(--grey-100);
	transition-duration: var(--motion-duration-press);
}

.wizard__nav-back:active:not([disabled]) {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

/* ============================================================
 * Wizard: in-place step swapping (assets/js/wizard.js).
 * The region fades slightly while the next step is fetched -
 * enough to signal "working" without a layout shift or spinner.
 * ============================================================ */

.wizard__live {
	transition: opacity 0.12s var(--motion-ease-standard, ease);
}

/* Opacity dim only: input stays live during the swap (spec section 2,
   no lockout), wizard.js aborts the stale fetch when a newer click wins. */
.wizard__live.is-loading {
	opacity: 0.55;
}

/* The swapped-in step gets focus for keyboard/AT users; don't paint a
   focus ring on a heading that was focused programmatically. */
.wizard__step-title:focus {
	outline: none;
}

.wizard__step-title:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
}

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

	/* These surfaces postdate the policy block in section 12: their
	   lifts and nudges are stripped here for the same reason. */
	.wizard__result-card,
	.wizard__tile-chevron {
		transition: none;
	}
	.wizard__result-card:hover,
	.wizard__result-card:focus-visible,
	a.wizard__tile:hover .wizard__tile-chevron,
	a.wizard__tile:focus-visible .wizard__tile-chevron {
		transform: none;
	}

	/* Transforms are stripped, but pointer-down feedback survives as a
	   background shift (spec section 7 keeps comprehension feedback). */
	.wizard__tile:active,
	.wizard__result-card:active,
	.compare__card:active {
		transform: none;
		background-color: var(--grey-100);
	}

	/* Gradient tiles paint a full background-image that hides any
	   background-color press; dim those instead. */
	.wizard__tile--gradient:active {
		opacity: 0.7;
	}
}