/* ==========================================================================
   Contix Mega-Menü · Basis
   --------------------------------------------------------------------------
   Breakpoint-abhängige Regeln (Leiste vs. Hamburger/Overlay) stehen in
   responsive.css und werden pro benutztem Breakpoint inline ausgegeben.

   Gestaltung über CSS-Variablen. Öffentlich (vom Elementor-Stil-Tab oder
   eigenem CSS auf einem Vorfahren gesetzt):
     --cxm-primary  --cxm-accent  --cxm-ink  --cxm-text  --cxm-muted
     --cxm-accent-1 --cxm-accent-2 --cxm-line --cxm-surface --cxm-surface-alt
     --cxm-bar-color --cxm-bar-hover --cxm-bar-gap --cxm-bar-pad --cxm-bar-h
     --cxm-btn-bg --cxm-btn-color --cxm-btn-radius
     --cxm-dd-radius --cxm-dd-shadow --cxm-dd-border --cxm-dd-offset
     --cxm-dd-w --cxm-dd-col-w --cxm-teaser-w
     --cxm-burger --cxm-burger-bg --cxm-overlay-bg
     --cxm-util-color --cxm-util-hover --cxm-util-gap --cxm-focus
     --cxm-bar-size
     Suche: --cxm-search-size --cxm-search-radius --cxm-search-bg
     --cxm-search-color --cxm-search-bg-hover --cxm-search-color-hover
     --cxm-search-w --cxm-field-radius
   Ohne Angabe greifen die globalen Elementor-Farben (--e-global-color-*)
   bzw. die Skin-Tokens des Design-Switch (--c-line, --c-muted, --c-surface,
   --c-bg, --c-primary-soft, --r-sm, --r-md, --r-btn, --fs-nav, --nav-case,
   --nav-tracking),
   danach die Multischule-Werte. Skins wechseln Farben, indem sie die
   --e-global-color-* unter [data-skin] neu setzen. Intern wird mit --_* gerechnet, damit ein
   Wert am Vorfahren nicht von einem Standardwert auf .cxm überdeckt wird.
   ========================================================================== */

.cxm {
	--_primary: var(--cxm-primary, var(--e-global-color-primary, #ee2b6d));
	--_accent: var(--cxm-accent, var(--e-global-color-accent, #c8104f));
	--_ink: var(--cxm-ink, var(--e-global-color-secondary, #1e2140));
	--_text: var(--cxm-text, var(--e-global-color-text, #1e2140));
	--_muted: var(--cxm-muted, var(--c-muted, #565b73));
	--_a1: var(--cxm-accent-1, #ffc53d);
	--_a2: var(--cxm-accent-2, #16a391);
	--_line: var(--cxm-line, var(--c-line, #e1e1e8));
	--_surface: var(--cxm-surface, var(--c-surface, #ffffff));
	--_alt: var(--cxm-surface-alt, var(--c-primary-soft, #f3f3f6));

	--_bar-color: var(--cxm-bar-color, var(--_ink));
	--_bar-hover: var(--cxm-bar-hover, var(--_accent));
	--_bar-gap: var(--cxm-bar-gap, 2px);
	--_bar-pad: var(--cxm-bar-pad, 14px);
	--_bar-h: var(--cxm-bar-h, 48px);

	--_btn-bg: var(--cxm-btn-bg, var(--_accent));
	--_btn-color: var(--cxm-btn-color, #ffffff);
	--_btn-radius: var(--cxm-btn-radius, var(--r-btn, 999px));

	--_dd-radius: var(--cxm-dd-radius, var(--r-md, 16px));
	--_item-radius: var(--cxm-item-radius, var(--r-sm, 999px));
	--_dd-shadow: var(--cxm-dd-shadow, 0 1px 2px rgb(30 33 64 / .05), 0 14px 36px rgb(30 33 64 / .13));
	--_dd-border: var(--cxm-dd-border, transparent);
	--_dd-offset: var(--cxm-dd-offset, 10px);
	--_dd-w: var(--cxm-dd-w, 320px);
	--_dd-col-w: var(--cxm-dd-col-w, 250px);
	--_teaser-w: var(--cxm-teaser-w, 280px);

	--_burger: var(--cxm-burger, var(--_ink));
	--_burger-bg: var(--cxm-burger-bg, transparent);
	--_overlay-bg: var(--cxm-overlay-bg, var(--_surface));

	--_util-color: var(--cxm-util-color, var(--_muted));
	--_util-hover: var(--cxm-util-hover, var(--_ink));
	--_util-gap: var(--cxm-util-gap, 16px);

	--_focus: var(--cxm-focus, var(--_accent));
	--_ease: cubic-bezier(.2, .7, .2, 1);
	--_dur: .25s;

	position: relative;
	-webkit-tap-highlight-color: transparent;
}

/* A11y 1.1.3: Pill-Indikator – Schrift auf heller Fläche (--_alt) braucht ≥ 4,5:1.
   Leitfarbe ist für Weiß ausgelegt; auf der hellen Fläche die dunkle Variante nehmen. */
.cxm.cxm--ind-pill { --_bar-hover: var(--cxm-bar-hover, var(--c-primary-deep, var(--_accent))); }

.cxm *,
.cxm *::before,
.cxm *::after { box-sizing: border-box; }

.cxm ul { list-style: none; margin: 0; padding: 0; }
.cxm li { margin: 0; }
.cxm li::marker { content: none; }
.cxm a { text-decoration: none; }

.cxm-icon { display: block; flex: none; }

.cxm :focus-visible {
	outline: 2px solid var(--_focus);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Farbwahl am Menüpunkt (Feld "Farbe") */
.cxm [data-cxm-color="primary"]  { --_c: var(--_primary); --_c-on: #ffffff; }
.cxm [data-cxm-color="accent-1"] { --_c: var(--_a1);      --_c-on: var(--_ink); }
.cxm [data-cxm-color="accent-2"] { --_c: var(--_a2);      --_c-on: #ffffff; }
.cxm [data-cxm-color="dark"]     { --_c: var(--_ink);     --_c-on: #ffffff; }

/* Hinweis-Etikett */
.cxm-badge {
	display: inline-block;
	margin-left: .35em;
	padding: .15em .6em;
	border-radius: 999px;
	background: var(--_a1);
	color: var(--_ink);
	font-size: .72em;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .02em;
	text-transform: none;
	vertical-align: .12em;
	white-space: nowrap;
}

/* ---------- Leiste ---------- */

.cxm-nav__list { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--_bar-gap); }
.cxm-nav__item { position: relative; }

.cxm .cxm-nav__link,
.cxm .cxm-nav__trigger {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin: 0;
	padding: 0 var(--_bar-pad);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: var(--nav-tracking, 0);
	text-align: left;
	text-transform: var(--nav-case, none);
	color: var(--_bar-color);
	background: none;
	border: 0;
	border-radius: var(--_item-radius);
	box-shadow: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--_dur) linear, background-color var(--_dur) linear;
}
.cxm .cxm-nav__link:hover,
.cxm .cxm-nav__link:focus,
.cxm .cxm-nav__trigger:hover,
.cxm .cxm-nav__trigger:focus { color: var(--_bar-hover); background: none; }
.cxm-nav__icon { width: 18px; height: 18px; }
.cxm-nav__chevron { width: 16px; height: 16px; margin-left: -2px; transition: transform var(--_dur) var(--_ease); }
.cxm-nav__trigger[aria-expanded="true"] .cxm-nav__chevron { transform: rotate(180deg); }

/* Größe und Laufweite der Leiste: Kit-Typo „Navigation“ → Token fs-nav (je
   Skin) → 1rem. Eine Stufe spezifischer als Elementors Global-Standardregel
   (.elementor-widget-cxm-megamenu …), die ohne im Kit gesetzte Größe ins Leere
   läuft und sonst die Elterngröße erbt. Eine im Widget gesetzte Typografie
   (Stil-Tab → Menüleiste) gewinnt weiterhin. */
.cxm.cxm--main .cxm-nav__link,
.cxm.cxm--main .cxm-nav__trigger {
	font-size: var(--cxm-bar-size, var(--e-global-typography-accent-font-size, var(--fs-nav, 1rem)));
	line-height: var(--e-global-typography-accent-line-height, 1.2);
	letter-spacing: var(--e-global-typography-accent-letter-spacing, var(--nav-tracking, 0));
}

/* Hervorgehobener Menüpunkt */
.cxm-nav .cxm-nav__link--button,
.cxm-nav .cxm-nav__link--button:hover,
.cxm-nav .cxm-nav__link--button:focus {
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	color: var(--_btn-color);
	background: var(--_btn-bg);
	border-radius: var(--_btn-radius);
}
.cxm-nav .cxm-nav__link--button:hover { filter: brightness(.92); }
.cxm-nav .cxm-nav__link--button::after { display: none; }

/* ---------- Hamburger ---------- */

.cxm .cxm-burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	color: var(--_burger);
	background: var(--_burger-bg);
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}
.cxm .cxm-burger:hover,
.cxm .cxm-burger:focus { background: var(--_burger-bg); color: var(--_burger); }
.cxm-burger__bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform var(--_dur) var(--_ease), opacity .15s linear;
}
.cxm-burger[aria-expanded="true"] .cxm-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cxm-burger[aria-expanded="true"] .cxm-burger__bar:nth-child(2) { opacity: 0; }
.cxm-burger[aria-expanded="true"] .cxm-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Dropdown-Karte (alle Breiten) ---------- */

.cxm-dd { display: flex; background: var(--_surface); text-align: left; color: var(--_text); }
.cxm-dd__main,
.cxm-dd__stack { min-width: 0; }

.cxm-dd__entry {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	color: var(--_text);
}
.cxm-dd__text { display: block; min-width: 0; }
.cxm-dd__title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--_ink);
	transition: color .1s linear;
}
.cxm-dd__desc {
	display: block;
	padding-top: 3px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--_muted);
}
/* Links mit .cxm davor: schlägt die Linkfarbe des Kits (.elementor-kit-N a) */
.cxm a.cxm-dd__entry:hover .cxm-dd__title { color: var(--_accent); }
a.cxm-dd__entry:hover .cxm-dd__title,
.cxm-dd__sublink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Liste: Zeilen mit Haarlinie, die bei Hover die Farbe annimmt */
.cxm-dd--list .cxm-dd__list > li {
	border-bottom: 1px solid var(--_line);
	transition: border-color var(--_dur) linear;
}
.cxm-dd--list .cxm-dd__list > li:last-child { border-bottom-color: transparent; }
.cxm-dd--list .cxm-dd__list > li:hover { border-bottom-color: var(--_c, var(--_primary)); }

/* Übersichtslink / Spaltenkopf "Titel →" */
.cxm .cxm-dd__overview,
.cxm .cxm-dd__head {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 16px 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--_ink);
}
.cxm-dd__arrow { width: 18px; height: 18px; color: var(--_c, var(--_accent)); transition: transform var(--_dur) var(--_ease); }
.cxm a.cxm-dd__overview:hover,
.cxm a.cxm-dd__head:hover { color: var(--_ink); }
a.cxm-dd__overview:hover span,
a.cxm-dd__head:hover span { text-decoration: underline; text-underline-offset: 3px; }
a.cxm-dd__overview:hover .cxm-dd__arrow,
a.cxm-dd__head:hover .cxm-dd__arrow { transform: translateX(4px); }

/* Unterlinks (3. Ebene, Liste) mit Farbpunkt */
.cxm-dd__entry--parent { padding-bottom: 0; }
.cxm-dd__sub { margin: 6px 0 0; padding: 0 0 12px; }
.cxm-dd__entry--icon + .cxm-dd__sub { padding-left: 46px; }
.cxm .cxm-dd__sublink {
	position: relative;
	display: block;
	padding: 4px 0 4px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--_muted);
}
.cxm-dd__sublink::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 7px;
	height: 7px;
	margin-top: -3.5px;
	border-radius: 50%;
	background: var(--_c, var(--_primary));
}
.cxm .cxm-dd__sublink:hover { color: var(--_ink); }

/* Icon im Kreis / Farbpunkt */
.cxm-dd__entry--icon { align-items: center; padding: 8px 0; }
.cxm-dd__spot {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border: 1px solid var(--_c, var(--_line));
	border-radius: 50%;
	background: var(--_c, var(--_surface));
	color: var(--_c-on, var(--_accent));
	transition: border-color var(--_dur) linear, transform var(--_dur) var(--_ease);
}
.cxm-dd__spot svg { width: 16px; height: 16px; }
a.cxm-dd__entry--icon:hover .cxm-dd__spot { border-color: var(--_c, var(--_accent)); transform: scale(1.06); }
.cxm-dd__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--_c, var(--_primary));
}
.cxm-dd__entry--static { cursor: default; }

/* Teaser-Box */
.cxm-dd__teaser {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: none;
	width: var(--_teaser-w);
	padding: 24px;
	background: var(--_alt);
}
.cxm-dd__teaser-media {
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: calc(var(--_dd-radius) * .6);
	background: var(--_line);
}
.cxm-dd__teaser-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cxm-dd__teaser-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--_ink); }
.cxm-dd__teaser-text { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--_text); }
.cxm .cxm-dd__teaser-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	min-height: 44px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--_btn-color);
	background: var(--_btn-bg);
	border-radius: var(--_btn-radius);
}
.cxm .cxm-dd__teaser-btn:hover,
.cxm .cxm-dd__teaser-btn:focus { color: var(--_btn-color); filter: brightness(.92); }
.cxm-dd__teaser-btn svg { width: 16px; height: 16px; transition: transform var(--_dur) var(--_ease); }
.cxm-dd__teaser-btn:hover svg { transform: translateX(3px); }

/* Schriftgrößen im Dropdown. Elementors Global-Standardregeln
   (.elementor-widget-cxm-megamenu …) laufen ohne im Kit gesetzte Größe ins
   Leere und erben sonst 16 px. Diese Regeln sind eine Stufe spezifischer;
   eine im Widget gesetzte Typografie (Stil-Tab → Dropdown) gewinnt weiterhin.
   Pro Kunde per CSS-Variable änderbar: --cxm-dd-head-size, --cxm-dd-title-size,
   --cxm-dd-desc-size. Mobil-Overlay: etwas größer (responsive.css). */
.cxm.cxm--main .cxm-dd__overview,
.cxm.cxm--main .cxm-dd__head,
.cxm.cxm--main .cxm-dd__teaser-title {
	font-size: var(--cxm-dd-head-size, var(--_dd-head, 1rem));
	line-height: 1.25;
}
.cxm.cxm--main .cxm-dd__title {
	font-size: var(--cxm-dd-title-size, var(--_dd-title, .875rem));
	line-height: 1.3;
}
.cxm.cxm--main .cxm-dd__sublink {
	font-size: var(--cxm-dd-desc-size, var(--_dd-desc, .8125rem));
	line-height: 1.3;
}
.cxm.cxm--main .cxm-dd__desc,
.cxm.cxm--main .cxm-dd__teaser-text {
	font-size: var(--cxm-dd-desc-size, var(--_dd-desc, .8125rem));
	line-height: 1.45;
}

/* Zusatzmenü im Overlay: nur mobil (siehe responsive.css) */
.cxm-nav__extra { display: none; }

/* ---------- Utility-Leiste ---------- */

.cxm-utility__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--_util-gap); }
.cxm-utility__item { display: flex; align-items: center; gap: var(--_util-gap); }
.cxm--sep .cxm-utility__item + .cxm-utility__item::before {
	content: "·";
	color: var(--_util-color);
	font-weight: 700;
}
.cxm .cxm-utility__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--_util-color);
	transition: color var(--_dur) linear;
}
.cxm .cxm-utility__link:hover,
.cxm .cxm-utility__link:focus,
.cxm .cxm-utility__item--current .cxm-utility__link { color: var(--_util-hover); }
.cxm-utility__item--current .cxm-utility__link span:first-of-type { text-decoration: underline; text-underline-offset: 4px; }
.cxm-utility__icon { width: 16px; height: 16px; color: var(--_c, currentColor); }
.cxm-utility__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--_c, var(--_primary)); flex: none; }

/* ---------- Suche (Dropdown) ---------- */

.cxm-search {
	--_s-size: var(--cxm-search-size, 40px);
	--_s-radius: var(--cxm-search-radius, 999px);
	--_s-bg: var(--cxm-search-bg, var(--c-bg, var(--_alt)));
	--_s-color: var(--cxm-search-color, var(--_ink));
	--_s-bg-h: var(--cxm-search-bg-hover, var(--_alt));
	--_s-color-h: var(--cxm-search-color-hover, var(--_accent));
	--_s-w: var(--cxm-search-w, 440px);
	--_field-radius: var(--cxm-field-radius, var(--_btn-radius));
	display: flex;
}

.cxm .cxm-search__toggle {
	position: relative;
	display: grid;
	place-items: center;
	width: var(--_s-size);
	height: var(--_s-size);
	margin: 0;
	padding: 0;
	color: var(--_s-color);
	background: var(--_s-bg);
	border: 0;
	border-radius: var(--_s-radius);
	box-shadow: none;
	cursor: pointer;
	transition: color var(--_dur) linear, background-color var(--_dur) linear;
}
.cxm .cxm-search__toggle:hover,
.cxm .cxm-search__toggle:focus,
.cxm .cxm-search__toggle[aria-expanded="true"] { color: var(--_s-color-h); background: var(--_s-bg-h); }
.cxm .cxm-search__toggle:focus-visible { border-radius: var(--_s-radius); }
.cxm-search__icon { grid-area: 1 / 1; transition: opacity .15s linear, transform var(--_dur) var(--_ease); }
.cxm-search__icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.cxm-search__toggle[aria-expanded="true"] .cxm-search__icon--open { opacity: 0; transform: scale(.6); }
.cxm-search__toggle[aria-expanded="true"] .cxm-search__icon--close { opacity: 1; transform: none; }

/* Karte wie ein Untermenü. Ohne JS: rechtsbündig unter der Lupe.
   Mit JS: Oberkante auf Höhe der Untermenü-Karten, im Header-Container
   gehalten, schmal (< 768 px) in voller Header-Breite. */
.cxm-search__panel {
	position: absolute;
	top: calc(100% + var(--cxm-search-y, 0px));
	right: 0;
	z-index: 1000;
	width: var(--cxm-search-pw, min(var(--_s-w), calc(100vw - 32px)));
	padding-top: var(--_dd-offset);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: transform var(--_dur) var(--_ease),
	            opacity .2s linear,
	            visibility 0s linear var(--_dur);
}
.cxm-search--placed .cxm-search__panel { right: auto; left: var(--cxm-search-x, 0px); }
.cxm-search.is-open .cxm-search__panel,
.cxm-search:not(.cxm-search--js):focus-within .cxm-search__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	transition-delay: 0s;
}

.cxm-search__card {
	display: block;
	padding: 16px;
	border: 1px solid var(--_dd-border);
	border-radius: var(--_dd-radius);
	box-shadow: var(--_dd-shadow);
}
.cxm-search__form { display: flex; gap: 8px; margin: 0; }
.cxm-search__field { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.cxm-search__field-icon { position: absolute; left: 14px; color: var(--_muted); pointer-events: none; }

.cxm .cxm-search__input {
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 14px 0 42px;
	font: inherit;
	font-size: 16px; /* ab 16 px zoomt iOS beim Fokus nicht */
	line-height: 1.2;
	color: var(--_text);
	background: var(--_surface);
	border: 1px solid var(--_line);
	border-radius: var(--_field-radius);
	box-shadow: none;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--_dur) linear, box-shadow var(--_dur) linear;
}
.cxm .cxm-search__input::placeholder { color: var(--_muted); opacity: 1; }
.cxm .cxm-search__input:focus,
.cxm .cxm-search__input:focus-visible {
	border-color: var(--_accent);
	border-radius: var(--_field-radius);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 18%, transparent);
	outline: 0;
}

.cxm .cxm-search__submit {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	height: 48px;
	margin: 0;
	padding: 0 18px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--ls-btn, 0);
	text-transform: var(--case-btn, none);
	color: var(--_btn-color);
	background: var(--_btn-bg);
	border: 0;
	border-radius: var(--_field-radius);
	box-shadow: none;
	cursor: pointer;
}
.cxm .cxm-search__submit:hover,
.cxm .cxm-search__submit:focus { color: var(--_btn-color); background: var(--_btn-bg); filter: brightness(.92); }
.cxm .cxm-search__submit:focus-visible { border-radius: var(--_field-radius); }
.cxm-search__submit svg { width: 16px; height: 16px; transition: transform var(--_dur) var(--_ease); }
.cxm-search__submit:hover svg { transform: translateX(3px); }

@media (max-width: 419.98px) {
	.cxm .cxm-search__submit { padding: 0 15px; }
	.cxm-search__submit span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Nur für Screenreader */
.cxm .cxm-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Leere Navigation im Editor */
.cxm-empty { margin: 0; padding: 12px 16px; font-size: 14px; color: #6b6b75; background: #f3f3f6; border: 1px dashed #c8c8d2; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
	.cxm *,
	.cxm *::before,
	.cxm *::after { transition-duration: .01ms !important; }
}