/*
 * emo2026, info pages.
 *
 * Six static-content templates share this stylesheet:
 *   - page-produkte.php          (catalog overview)
 *   - page-events.php            (trade-show timeline)
 *   - page-messe.php             (the page of one fair)
 *   - page-versand-zahlung.php   (shipping & payment)
 *   - page-haendler.php          (distributor list)
 *   - page-faqs.php              (accordion Q&A)
 *
 * All pages reuse .content-hero from content.css for the headline block;
 * everything below the hero is defined here with the .info-* prefix to
 * avoid colliding with content.css's .content-* selectors.
 *
 * Apple-editorial: centered narrow column for prose, wider grid (1200px
 * cap) for cards, lots of whitespace, hairline dividers, gradient
 * placeholders only (no photography per the redesign brief).
 *
 * Tokens come from tokens.css. Page-local custom properties live at the
 * top of this file and capture geometry that's truly local to these
 * five templates (tile gradients, badge size, accordion padding).
 *
 * Plain CSS, no preprocessor, no nesting. Targets stable Firefox
 * (the user's debug browser), Chromium, Safari.
 */

:root {
	/* Shared column caps, match content.css so info pages line up
	   visually with the rest of the editorial templates. */
	--info-column-wide:    var(--layout-content-max-width);  /* 1200px */
	--info-column-narrow:  820px;
	--info-gutter:         var(--layout-gutter);

	/* Vertical rhythm under the hero. */
	--info-section-gap:    var(--space-12); /* 128px between major sections */
	--info-block-gap:      var(--space-9);  /* 64px between sub-blocks */

	/* Tile geometry (Produkte page). */
	--info-tile-gap:       var(--space-6);  /* 28px */
	--info-tile-pad:       var(--space-7);  /* 40px */
	--info-tile-radius:    var(--radius-panel);
	--info-tile-media-h:   200px;           /* gradient placeholder height for grid tiles */
	--info-tile-media-h-lg: 280px;          /* feature-tile gradient height */

	/* Gradient palette, aliases onto the brand ramp in tokens.css so a
	   palette change happens in one place. The local names stay because
	   the call sites read better as --info-grad-map than --emo-grad-wash. */
	--info-grad-a:    var(--emo-grad-a);
	--info-grad-b:    var(--emo-grad-b);
	--info-grad-c:    var(--emo-grad-c);
	--info-grad-blue: var(--emo-grad-feature);   /* emoswitch feature tile */
	--info-grad-slate: linear-gradient(135deg, var(--grey-800) 0%, var(--grey-700) 100%);  /* trafo, NEUTRAL by design, not brand */

	/* Event timeline. */
	--info-event-badge-w:  120px;
	--info-event-gap:      var(--space-5);  /* 22px between badge and body */

	/* Page of one fair (page-messe.php). */
	--info-messe-column:   980px;
	--info-messe-gap:      var(--space-11); /* 96px between sections */
	--info-messe-avatar:   160px;

	/* FAQ accordion. */
	--info-faq-pad-y:      var(--space-5);  /* 22px top/bottom padding inside summary */
}

/* ============================================================
 * Shared scaffolding
 * ============================================================ */

.info-stack {
	max-width: var(--info-column-wide);
	margin: 0 auto;
	padding: 0 var(--info-gutter);
	display: flex;
	flex-direction: column;
	gap: var(--info-section-gap);
}

.info-stack > :first-child {
	/* The hero already pads its bottom; pull the first section up
	   so the gap reads as a single rhythm step, not a double. */
	margin-top: 0;
}

/* Section header used inside the Produkte stack and elsewhere. */
.info-category {
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
}

.info-category__header {
	max-width: 48em;
}

.info-category__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-40);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.info-category__desc {
	margin: var(--space-3) 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-21);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

/* ============================================================
 * Produkte, tile grid
 * ============================================================ */

.info-tile-grid {
	display: grid;
	gap: var(--info-tile-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.info-tile-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-tile-grid__item {
	display: flex;
}

/* Base tile, used for sub-cards inside a category. Vertical layout:
   gradient media on top, text body underneath. Anchor-as-card. */
.info-tile {
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: var(--color-bg-elevated);
	border-radius: var(--info-tile-radius);
	overflow: hidden;
	color: var(--color-text-primary);
	text-decoration: none;
	transition: transform var(--motion-duration-base) var(--motion-ease-standard),
		box-shadow var(--motion-duration-base) var(--motion-ease-standard);
}

.info-tile:hover,
.info-tile:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	color: var(--color-text-primary);
}

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

.info-tile__media {
	display: block;
	width: 100%;
	height: var(--info-tile-media-h);
	background: var(--info-grad-a);
}

/* Gradient variants, keyed by the `gradient` field on the tile. */
.info-tile__media--a     { background: var(--info-grad-a); }
.info-tile__media--b     { background: var(--info-grad-b); }
.info-tile__media--c     { background: var(--info-grad-c); }
.info-tile__media--blue  { background: var(--info-grad-blue); }
.info-tile__media--slate { background: var(--info-grad-slate); }

/* Real product renders in the media slot (2026-08 sweep: a real photo
   beats the gradient stand-in). Product-on-white photography: contain,
   not cover, mirroring .shop-card__media img. The img fills absolutely
   so the feature tile's auto-height media column sizes it reliably. */
/* White plate on a warm tile, the same direction shop.css settles: the
 * CARD carries the warm ground and the PLATE is white, so a photo shot on
 * white meets its plate seamlessly while the plate still reads as its own
 * surface. This was elevated on elevated, i.e. 1:1, so the plate had no
 * edge at all and the photo appeared to float in the tile. */
.info-tile__media--photo {
	position: relative;
	background: var(--color-bg-base);
}

.info-tile__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--space-4);
	box-sizing: border-box;
}

.info-tile__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	flex: 1 1 auto;
	padding: var(--info-tile-pad);
}

.info-tile__eyebrow {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.info-tile__title {
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.info-tile__title--lg {
	font-size: var(--font-size-40);
}

.info-tile__desc {
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.info-tile__desc--lg {
	font-size: var(--font-size-21);
}

.info-tile__more {
	margin-top: auto;
	padding-top: var(--space-3);
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	font-weight: 400;
	color: var(--color-link);
}

.info-tile__chevron {
	display: inline-block;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.info-tile:hover .info-tile__chevron,
.info-tile:focus-visible .info-tile__chevron {
	transform: translateX(4px);
}

/* Feature tile, full-width, taller media, larger text. Used for the
   single "Fußschalter" and "Trenntransformatoren" slots on /produkte/. */
.info-tile--feature {
	flex-direction: row;
	min-height: var(--info-tile-media-h-lg);
}

.info-tile--feature .info-tile__media {
	flex: 0 0 45%;
	height: auto;
	min-height: var(--info-tile-media-h-lg);
}

.info-tile--feature .info-tile__body {
	flex: 1 1 55%;
	gap: var(--space-4);
	padding: var(--space-9) var(--space-9);
	justify-content: center;
}

/* Tool tile, no media, denser text, slightly tighter padding. */
.info-tile--tool .info-tile__body {
	padding: var(--space-7);
	gap: var(--space-3);
}

/* ============================================================
 * Events, vertical timeline
 * ============================================================ */

.info-events {
	max-width: var(--info-column-narrow);
	margin: 0 auto;
	padding: 0 var(--info-gutter);
}

.info-events__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.info-events__item + .info-events__item {
	border-top: 1px solid var(--color-border-hairline);
}

.info-event {
	display: flex;
	gap: var(--space-7);
	align-items: flex-start;
	padding: var(--space-7) 0;
}

.info-event__badge {
	flex: 0 0 var(--info-event-badge-w);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: var(--space-4) var(--space-3);
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-md);
	color: var(--color-text-primary);
	text-align: center;
}

.info-event__day {
	font-family: var(--font-display);
	font-size: var(--font-size-40);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.info-event__month-year {
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.info-event__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	min-width: 0;
}

.info-event__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.info-event__location {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.info-event__desc {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-base);
	color: var(--color-text-primary);
}

.info-event__cta {
	align-self: flex-start;
	margin-top: var(--space-2);
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	color: var(--color-link);
	text-decoration: none;
	/* Opacity is the press channel; release eases back through this. */
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.info-event__chevron {
	display: inline-block;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.info-event__cta:hover .info-event__chevron,
.info-event__cta:focus-visible .info-event__chevron {
	transform: translateX(4px);
}

.info-event__cta:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

/* "Ansehen" and "Termin vormerken" side by side; a fair without its own
   page has only the second link. */
.info-event__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	margin-top: var(--space-2);
}

.info-event__ctas .info-event__cta {
	margin-top: 0;
}

/* ============================================================
 * Messeauftritt, the page of one fair (page-messe.php)
 *
 * Hero from content.css plus the venue line, then three sections from
 * the owner's sketch (2026-10-29): booth with the fair's plans, the
 * contact person on site, the products on show. Cards are the info
 * tiles above; the person card follows .about-leader (tint, no border).
 * ============================================================ */

.info-messe__venue {
	margin: var(--space-6) 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

.content-messe .info-messe__venue + .content-hero__subhead {
	margin-top: var(--space-3);
}

.info-messe {
	max-width: var(--info-messe-column);
	margin: 0 auto;
	padding: 0 var(--info-gutter);
	display: flex;
	flex-direction: column;
	gap: var(--info-messe-gap);
}

.info-messe__head {
	margin-bottom: var(--space-7);
	text-align: center;
}

.info-messe__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-40);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.info-messe__kicker {
	margin: var(--space-3) 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-secondary);
}

/* Hall and booth as one pill: "Halle 17 | E07". */
.info-messe__booth {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	width: fit-content;
	margin: 0 auto var(--space-7);
	padding: var(--space-4) var(--space-7);
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.info-messe__booth-sep {
	width: 1px;
	height: 1.1em;
	background-color: var(--color-text-muted);
}

.info-messe__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--info-tile-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.info-messe__cell {
	display: flex;
}

/* Contact person, centered card with a round portrait. */
.info-messe__people {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--info-tile-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.info-messe-person {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	max-width: 380px;
	box-sizing: border-box;
	padding: var(--space-8) var(--space-6);
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-card);
	text-align: center;
}

.info-messe-person__photo {
	display: block;
	width: var(--info-messe-avatar);
	height: var(--info-messe-avatar);
	margin-bottom: var(--space-2);
	border-radius: 50%;
	object-fit: cover;
}

.info-messe-person__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.info-messe-person__role {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-text-secondary);
}

.info-messe-person .info-event__cta {
	align-self: center;
	margin-top: var(--space-3);
}

/* Product tile: text left, cut-out render right, as in the sketch. */
.info-messe-product {
	flex-direction: row;
	align-items: stretch;
}

.info-messe-product .info-tile__body {
	flex: 1 1 55%;
	min-width: 0;
}

.info-messe-product__media {
	flex: 0 0 45%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-5) var(--space-5) var(--space-5) 0;
	box-sizing: border-box;
}

.info-messe-product__media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 180px;
	object-fit: contain;
}

/* ============================================================
 * Versand & Zahlung, two-column lists + VAT note
 * ============================================================ */

.info-vz {
	max-width: var(--info-column-wide);
	margin: 0 auto;
	padding: 0 var(--info-gutter);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-10);
}

.info-vz__col {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.info-vz__col-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-40);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.info-vz__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.info-vz__item {
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border-hairline);
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.info-vz__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.info-vz__name {
	margin: 0;
	font-family: var(--font-display);
	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);
}

.info-vz__meta {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-primary);
}

.info-vz__meta-label {
	display: inline-block;
	min-width: 6em;
	font-weight: 600;
	color: var(--color-text-secondary);
}

.info-vz__desc {
	margin: var(--space-1) 0 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.info-vz-note {
	max-width: var(--info-column-wide);
	margin: var(--info-block-gap) auto 0;
	padding: var(--space-7) var(--info-gutter) 0;
	border-top: 1px solid var(--color-border-hairline);
}

.info-vz-note__title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
}

.info-vz-note__body {
	margin: 0;
	max-width: 56em;
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-loose);
	color: var(--color-text-secondary);
}

/* ============================================================
 * Händler, distributor world map + region groups
 *
 * Map ground: assets/img/haendler-map.jpg, derived from the legacy
 * raster uploads/emo-map-dark_300x169.jpg, Lanczos upscale to
 * 1600x900, Gaussian blur r=2.2 (melts the JPEG block artifacts into
 * a deliberate soft-focus backdrop), grayscale + mild autocontrast,
 * then duotone-remapped onto the brand palette: deep petrol ocean
 * (kin of --color-brand-deep) to muted sage land. Pins are pure CSS
 * dots absolutely positioned on percentage coordinates hand-verified
 * against the raster's landmass geometry.
 * ============================================================ */

.info-haendler-map {
	max-width: var(--info-column-wide);
	/* No bottom margin, it would stack onto the page-level bottom padding. */
	margin: 0 auto;
	padding: 0 var(--info-gutter);
}

.info-haendler-map__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-surface);
	/* Same deep petrol as the raster's ocean, paints the tile while
	   the lazy image loads (width/height attrs reserve the box). */
	background-color: var(--color-brand-deep);
}

.info-haendler-map__image {
	display: block;
	width: 100%;
	height: auto;
}

.info-haendler-map__pins {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	inset: 0;
}

/* Location pin: EMO HARMONY dot (--color-cta) on the dark map ground, with a
   deep hairline so it also holds on the light sage landmasses, plus a
   soft halo (raw rgba of --color-cta, matching the existing
   info.css practice of raw rgba for shadows). */
.info-haendler-map__pin {
	position: absolute;
	width: 12px;
	height: 12px;
	transform: translate(-50%, -50%);
	border-radius: 50%;   /* circle: a map dot */
	background-color: var(--color-cta);
	border: 2px solid var(--color-brand-deep);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-cta) 35%, transparent);
}

/* HQ pin (Berlin): slightly larger, wider halo. */
.info-haendler-map__pin--hq {
	width: 16px;
	height: 16px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-cta) 30%, transparent);
}

/* Focus ring: white on the dark map, the usual --color-link ring
   would vanish against the petrol ocean. */
.info-haendler-map__pin:focus-visible {
	outline: 2px solid var(--color-bg-base);
	outline-offset: 3px;
}

/* Pin label: visually a tooltip above the dot, revealed on
   hover/focus. opacity: 0 keeps it in the accessibility tree, so
   screen readers read every list item without interaction. */
.info-haendler-map__pin-label {
	position: absolute;
	left: 50%;
	bottom: calc(100% + var(--space-2));
	transform: translateX(-50%);
	white-space: nowrap;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-translucent-strong);
	color: var(--color-text-primary);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease; /* micro-feedback, spec 7: <= 250ms */
}

.info-haendler-map__pin:hover .info-haendler-map__pin-label,
.info-haendler-map__pin:focus .info-haendler-map__pin-label,
.info-haendler-map__pin:focus-visible .info-haendler-map__pin-label {
	opacity: 1;
}

/* Pins near the right edge (Tokyo): align the label's right edge to
   the dot so the tile's overflow: hidden cannot clip it. */
.info-haendler-map__pin--end .info-haendler-map__pin-label {
	left: auto;
	right: calc(-1 * var(--space-2));
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.info-haendler-map__pin-label {
		transition: none;
	}
}

/* Caption pill, bottom-left on the map: Mouser distributes worldwide,
   a fact without a single pin coordinate. --radius-md instead of the
   pill radius: the line may wrap on narrow viewports. */
.info-haendler-map__caption {
	position: absolute;
	left: var(--space-5);
	bottom: var(--space-5);
	max-width: calc(100% - (2 * var(--space-5)));
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 500;
	color: var(--color-text-primary);
	background-color: var(--color-bg-translucent-strong);
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-md);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.info-haendler {
	max-width: var(--info-column-wide);
	margin: 0 auto;
	padding: 0 var(--info-gutter);
	display: flex;
	flex-direction: column;
	gap: var(--info-block-gap);
}

.info-haendler__region {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.info-haendler__region-title {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	font-family: var(--font-display);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text-primary);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border-hairline);
}

.info-haendler__flag {
	font-size: var(--font-size-28);
	line-height: 1;
}

.info-haendler__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.info-haendler__item {
	display: flex;
	gap: var(--space-7);
	align-items: flex-start;
	justify-content: space-between;
	padding: var(--space-6) 0;
	border-top: 1px solid var(--color-border-hairline-translucent);
}

.info-haendler__item:first-child {
	border-top: 0;
	padding-top: var(--space-3);
}

.info-haendler__primary {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
}

.info-haendler__name {
	margin: 0;
	font-family: var(--font-display);
	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);
}

.info-haendler__address {
	margin: 0;
	font-style: normal;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.info-haendler__contact {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	color: var(--color-text-secondary);
}

.info-haendler__contact a {
	color: var(--color-link);
	text-decoration: none;
}

.info-haendler__contact a:hover,
.info-haendler__contact a:focus-visible {
	text-decoration: underline;
}

.info-haendler__contact-sep {
	color: var(--color-text-muted);
}

.info-haendler__cta {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	color: var(--color-link);
	text-decoration: none;
	/* Opacity is the press channel; release eases back through this. */
	transition: opacity var(--motion-duration-fast) var(--motion-ease-standard);
}

.info-haendler__chevron {
	display: inline-block;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.info-haendler__cta:hover .info-haendler__chevron,
.info-haendler__cta:focus-visible .info-haendler__chevron {
	transform: translateX(4px);
}

.info-haendler__cta:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

/* ============================================================
 * FAQs, semantic <details> accordion
 * ============================================================ */

.info-faqs {
	max-width: var(--info-column-narrow);
	margin: var(--space-7) auto 0;
	padding: 0 var(--info-gutter);
}

.info-faqs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--color-border-hairline);
}

.info-faqs__item {
	border-bottom: 1px solid var(--color-border-hairline);
}

.info-faq {
	/* Reset native <details> defaults so our chevron is the only marker. */
}

.info-faq__summary {
	display: flex;
	/* Centre, not baseline: the chevron is a glyph in a fixed 1em box
	   (below), centring keeps it optically level with a one-line question
	   and splits the difference acceptably on the rare two-liner, while
	   baseline drifted the moment the glyph rotates. */
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	padding: var(--info-faq-pad-y) 0;
	cursor: pointer;
	list-style: none;        /* Firefox */
	color: var(--color-text-primary);
	transition: color var(--motion-duration-fast) var(--motion-ease-standard),
		background-color var(--motion-duration-fast) var(--motion-ease-standard);
}

/* Suppress the default disclosure triangle in WebKit + Blink. */
.info-faq__summary::-webkit-details-marker {
	display: none;
}

/* Suppress in Firefox / standards (CSS Lists 3 marker pseudo). */
.info-faq__summary::marker {
	content: "";
}

.info-faq__summary:hover,
.info-faq__summary:focus-visible {
	color: var(--color-link);
}

.info-faq__summary:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 4px;
	border-radius: var(--radius-sm);
}

/* The question is an <h3> (it was a span): every question sits in the
   document outline under the page's h2. The heading has to look exactly
   like the span did, so the UA heading defaults are neutralised here:
   no margin, block like any flex item, the summary's colour (so the
   hover and focus tint on .info-faq__summary still reaches the text)
   and the type scale this rule always carried. */
.info-faq__question {
	flex: 1 1 auto;
	display: block;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-21);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
	color: inherit;
}

.info-faq__chevron {
	flex: 0 0 auto;
	/* Fixed square box with the glyph dead-centre: the rotate(90deg)
	   below then pivots cleanly around the box centre instead of the
	   text baseline. Sized to the question's type scale. */
	display: grid;
	place-items: center;
	width: 1em;
	height: 1em;
	font-size: var(--font-size-21);
	line-height: 1;
	color: var(--color-text-muted);
	transform: rotate(0deg);
	transform-origin: center;
	transition: transform var(--motion-duration-base) var(--motion-ease-standard),
		color var(--motion-duration-fast) var(--motion-ease-standard);
}

/* When the disclosure is open, rotate the chevron 90° downward. */
.info-faq[open] > .info-faq__summary .info-faq__chevron {
	transform: rotate(90deg);
	color: var(--color-text-primary);
}

.info-faq__answer {
	padding: 0 0 var(--info-faq-pad-y);
	max-width: 56em;
	font-family: var(--font-sans);
	font-size: var(--font-size-18);
	line-height: var(--line-height-loose);
	color: var(--color-text-secondary);
}

/* Figure inside an answer (the MOPP matrix on Q14): a quiet framed
   graphic that never outgrows the answer column. */
.info-faq__figure {
	margin: var(--space-5) 0;
}

.info-faq__figure img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-surface);
	background: var(--color-bg-base);
}

.info-faq__answer p {
	margin: 0;
}

.info-faq__answer p + p {
	margin-top: var(--space-4);
}

/* ============================================================
 * Press feedback, pointer-down response under 100ms (spec 1).
 * The press duration lives inside :active so the press snaps
 * while the release eases back through the base transition.
 * ============================================================ */

.info-tile:active {
	transform: scale(0.98);
	transition-duration: var(--motion-duration-press);
}

.info-event__cta:active,
.info-haendler__cta:active {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

.info-faq__summary:active {
	background-color: var(--grey-100);
	transition-duration: var(--motion-duration-press);
}

/* ============================================================
 * Responsive, match the chrome breakpoint at 833px.
 * Grids collapse to single column; hero type drops one step
 * (the hero is .content-hero so content.css already handles
 * its breakpoint shift; we just take care of our own grids).
 * ============================================================ */

/* Tablet landscape: 3 tiles become 2. The single-column step lives
   at 640px, not here and not at 833px, so a portrait tablet still
   gets two tiles per row. */
@media (max-width: 1024px) {
	.info-tile-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 833px) {
	:root {
		--info-section-gap: var(--space-10);
		--info-block-gap:   var(--space-7);
		--info-tile-pad:    var(--space-6);
		--info-tile-media-h: 160px;
		--info-tile-media-h-lg: 200px;
		--info-event-badge-w: 88px;
		--info-messe-gap:     var(--space-9);
		--info-messe-avatar:  128px;
	}

	.info-messe__title {
		font-size: var(--font-size-28);
	}

	.info-messe__booth {
		font-size: var(--font-size-21);
		padding: var(--space-3) var(--space-6);
	}

	/* The tile grid stays 2-up here, see the 640px block below. */

	.info-tile--feature {
		flex-direction: column;
	}

	.info-tile--feature .info-tile__media {
		flex: 0 0 auto;
		height: var(--info-tile-media-h-lg);
		min-height: 0;
		width: 100%;
	}

	.info-tile--feature .info-tile__body {
		padding: var(--info-tile-pad);
	}

	.info-tile__title--lg {
		font-size: var(--font-size-28);
	}

	.info-tile__desc--lg {
		font-size: var(--font-size-18);
	}

	.info-category__title,
	.info-vz__col-title {
		font-size: var(--font-size-28);
	}

	.info-category__desc {
		font-size: var(--font-size-18);
	}

	.info-event {
		gap: var(--space-5);
	}

	.info-event__badge {
		flex-basis: var(--info-event-badge-w);
		padding: var(--space-3) var(--space-2);
	}

	.info-event__day {
		font-size: var(--font-size-28);
	}

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

	.info-vz {
		grid-template-columns: 1fr;
		gap: var(--space-9);
	}

	.info-haendler__item {
		flex-direction: column;
		gap: var(--space-4);
	}

	.info-haendler__cta {
		align-self: flex-start;
	}

	.info-haendler-map__caption {
		left: var(--space-3);
		bottom: var(--space-3);
		max-width: calc(100% - (2 * var(--space-3)));
		padding: var(--space-1) var(--space-3);
		font-size: var(--font-size-12);
	}

	.info-faq__question {
		font-size: var(--font-size-18);
	}

	.info-faq__chevron {
		font-size: var(--font-size-18);
	}
}

/* ============================================================
 * Phone, 640px. Declared AFTER the 1024px block so the narrower
 * query wins on source order at equal specificity.
 * ============================================================ */

@media (max-width: 640px) {
	.info-tile-grid--3,
	.info-messe__grid {
		grid-template-columns: 1fr;
	}

	/* Too narrow for text beside the render ("Netzwerkisolatoren" ran
	   under the image): render on top, like the other info tiles. */
	.info-messe-product {
		flex-direction: column;
	}

	.info-messe-product__media {
		order: -1;
		flex-basis: auto;
		padding: var(--space-6) var(--space-6) 0;
	}

	.info-messe-product__media img {
		width: auto;
		max-width: 100%;
		max-height: 140px;
	}
}

/* ============================================================
 * Reduced motion, disable hover-shift transforms.
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.info-tile,
	.info-tile__chevron,
	.info-event__chevron,
	.info-haendler__chevron,
	.info-faq__chevron {
		transition: none;
	}

	.info-tile:hover,
	.info-tile:focus-visible {
		transform: none;
	}

	.info-tile:hover .info-tile__chevron,
	.info-tile:focus-visible .info-tile__chevron,
	.info-event__cta:hover .info-event__chevron,
	.info-event__cta:focus-visible .info-event__chevron,
	.info-haendler__cta:hover .info-haendler__chevron,
	.info-haendler__cta:focus-visible .info-haendler__chevron {
		transform: none;
	}

	/* The FAQ chevron rotation is meaningful state (open vs closed),
	   so we keep the rotation but drop the animation duration. */
	.info-faq[open] > .info-faq__summary .info-faq__chevron {
		transform: rotate(90deg);
	}

	/* Transforms are stripped above; keep the tile press as a
	   background shift instead (spec 7 keeps feedback). */
	.info-tile:active {
		transform: none;
		background-color: var(--grey-100);
	}
}

/* ============================================================
 * a11y, supplemental focus indicators.
 *
 * .info-haendler__contact a only adds text-decoration on focus, which
 * is easy to miss in a dense distributor list where neighboring rows
 * already underline on hover. Add a discrete ring matching the chrome's
 * contract (2px solid --color-link, 2px offset). The .info-event__cta
 * and .info-haendler__cta selectors already carry explicit outline rules
 * earlier in this file, not duplicated here.
 * ============================================================ */
.info-haendler__contact a:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ============================================================
 * Material fallbacks for the translucent map caption pill
 * (spec 5): near-solid without blur, and solid plus a defined
 * border under increased contrast.
 * ============================================================ */

@media (prefers-reduced-transparency: reduce) {
	.info-haendler-map__caption,
	.info-haendler-map__pin-label {
		background-color: var(--color-bg-base);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

@media (prefers-contrast: more) {
	.info-haendler-map__caption,
	.info-haendler-map__pin-label {
		background-color: var(--color-bg-base);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 1px solid var(--color-text-primary);
	}
}